Darmowe artykuły

Archiwum kategorii ‘Darmowe artykuły’

Uwaga SSL!

piątek, 9 Marzec 2012

W sieci pojawia się coraz więcej stron chronionych certyfikatem SSL. I niby wszystko jest proste. Wykupujemy certyfikat, instalujemy dla wybranej domeny (jak mamy serwer wykupiony w jakiejś firmie, to w instalacji certyfikatu zazwyczaj wyręczy nas ta firma) i ewentualnie wymuszamy by wszystkie adresy zaczynały się od https:// Można to zrobić choćby przy pomocy mode-rewrite w pliku .htaccess

RewriteCond %{HTTPS} !=on
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

I wszystko byłoby pięknie. Sam właśnie niedawno budowałem jeden taki portal. Dużą niespodzianką był dla mnie jego wygląd w przeglądarkach… Zgadnijcie… Internet Explorer. Wszystkie zasoby spoza domeny z SSL nie były przez przeglądarkę ani interpretowane (plik css dostosowujący znaczniki HTML 5 do IE), ani wyświetlane (podlinkowane grafiki i filmy z YouTube.)

Dlaczego IE ma problemy z SSL?

No może nie tyle IE ma problemy z SSL, co twórcy stron mogą mieć problemy z IE . Tym przeglądarkom nie podoba się, że na stronie chronionej przez SSL znajdują się adresy do zasobów w ten sposób nie chronionych. Można wprawdzie w przeglądarce zaznaczyć odpowiednią opcję i wszystko będzie śmigać jak wiedźma na miotle, ale nie możemy przecież napisać przy każdym zewnętrznym zasobie na stronie:

„Nie widzisz tego filmu? Musisz pogrzebać w ustawieniach swojej przeglądarki. Uwaga! To może okazać się trudniejsze od grzebania w uchu.”

Jak przechytrzyć IE – rozwiązanie

Rozwiązanie jest proste do tego stopnie, że nie jestem pewien czy powinienem o tym pisać? Dla porządku jednak doprowadzę sprawę do końca. Wystarczy zmienić protokół we wszystkich zewnętrznych linkach z http: na https:. Jeżeli mamy gdzieś adres http://www.strona.pl/biala-plama.png, zamieniamy na https://www.strona.pl/biala-plama.png. Przecinek i kropka na końcach adresów wynikają z interpunkcji poprzedniego zdania i nie są częścią adresów

Epilog

I znowu myśl ludzka okazała się potężniejsza od Internet Explorera.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 1 komentarz »

Co chciałbyś wiedzieć o HTML 5?

środa, 14 Grudzień 2011

Niebawem premiera kursu z HTML 5. W związku z tym postanowiłem dołączyć do szkolenia część poświęconą odpowiedziom na Wasze pytania dotyczące HTML 5. Odpowiedzi na najciekawsze, albo najpopularniejsze pytania dołączę do kursu w postaci dodatkowych nagrań, albo e-booka, a może jedno i drugie.

Osoby, których pytania wykorzystam, dostaną zupełnie za darmo odpowiedź zarówno na swoje pytanie jak i odpowiedzi na pytania pozostałych osób. Czyli dostanie e-booka lub dostęp do tej części kursu, w której będę na te pytania odpowiadał.

W formularzu na dole strony wpisz swoje pytanie: Co najbardziej interesuje Cię w HTML 5? Czego chciałbyś się dowiedzieć o tworzeniu stron w tym języku? Jeżeli wykorzystam Twoje pytanie, dostaniesz opracowania wszystkich najciekawszych i najpopularniejszych pytań. Powiadomię Cię o tym na adres, który wpiszesz w formularzu na dole strony. Jeżeli wolisz, swoje pytanie możesz przesłać na adres trener@serwan.pl

Zaszufladkowany do Darmowe artykuły, Tymczasowe | 2 komentarzy »

Czy programowanie w PHP oznacza wcześniejszą emeryturę?

piątek, 9 Grudzień 2011

Na postawione w tytule pytanie nie udzielę jednoznacznej odpowiedzi. Będąc programistą z pewnością ma się większe możliwości. Jeżeli programujesz zawodowo, to już po kilku latach powinieneś zarabiać więcej niż większość ludzi wokół Ciebie. Taki zawód. Przekroczenie średniej krajowej nie jest w nim żadnym wyczynem. Natomiast co zrobisz z zarobionymi pieniędzmi, to już Twoja sprawa.

Jeżeli odpowiednio wcześniej zatroszczysz się o siebie, perspektywa wydłużonego wieku emerytalnego może Cię w ogóle nie dotyczyć. Jeżeli jednak będzie dotyczyć?

Dostałem dzisiaj od znajomej kilka zdjęć. Zainspirowały mnie one do wstukania tych kilku zdań. Posłużę się nimi również w roli podsumowania tego tematu. Możesz oczywiście mieć inne zdanie. Możesz chcieć podzielić się swoimi przemyśleniami ze mną i innymi czytelnikami. Skorzystaj z formularza na dole strony.

Programowanie w php oznacza wcześniejszą emeryturę.

Tagi:PHP
Zaszufladkowany do Darmowe artykuły, Tymczasowe | 4 komentarzy »

HTML 5

piątek, 2 Grudzień 2011

Kilka miesięcy temu napisałem krótki tekst HTML 5 – czy to już?. Kilka osób wyraziło w komentarzach do tego tekstu swoje zainteresowanie tym językiem. Wydawało mi się wówczas, że na robienie stron w HTML 5 jest jeszcze za wcześnie. Argumentem, który przytaczałem wówczas, była zbyt duża popularność IE7. Internet Explorer w tej wersji trzymał się przez kilka miesięcy na poziomie 7%, ale w końcu spadł i to o ponad połowę w przeciągu jednego, czy dwóch tygodni. Oznacza to, że kurs z HTML-a 5 pojawi się jeszcze przed świętami.

Dziś na zachętę pokażę jak wygląda podstawowa struktura strony w HTML 5

<!DOCTYPE html>
<html>
 <head>
  <meta charset=”utf-8” />
  <title>Strona testowa</title>
 </head>
 <body>
  <div>
   <header></header>
   <nav>
   </nav>
   <h1>Strona testowa</h1>
   <article>
    <section></section>
   </article>
   <aside></aside>
   <footer></footer>
  </div>
 </body>
</html>

Już na pierwszy rzut oka widać znaczne uproszczenie w stosunku do wcześniejszych wersji. Pojawiły się też nowe znaczniki. W większości są to znaczniki blokowe odpowiadające elementowi div, ale są wzbogacone semantycznie. Można więc powiedzieć, że header to taki div ale przeznaczony na umieszczenie elementów nagłówka strony, nav to system nawigacyjny, footer to stopka strony, article – główna zawartość, section – logicznie wyodrębnione części, a aside to treści poboczne, uzupełniające

Dodanie znaczeń do elementów htmla jest dużym ułatwieniem. Dzięki temu kod strony jest bardziej zwięzły; eliminujemy potrzebę stosowania wielu dodatkowych klas i identyfikatorów. Prostsze jest też odwołanie się do konkretnych elementów w stylach CSS i w JavaScript.

HTML 5 może być zapisywany jako format html lub xml. W pierwszym przypadku możemy uprościć niektóre zapisy. Wartości atrybutów mogą pozostać niecytowane, jeśli nie zawierają spacji ani „”", „‘”, „=”, „<", i ">„. W przeciwnym wypadku musi być podawany przy pojedyncze lub podwójne cudzysłowy.

  <input name=imie maxlength=200>
  <input name='imie' maxlength='200'>
  <input name="imie" maxlength="200">
  <!-- Ale już w przypadku pola formularza "drugie imie" mamy tylko dwa warianty -->
  <input name='drugie imie' maxlength='200'>
  <input name="drugie imie" maxlength="200">

Wartość atrybutu wraz z „=” można pominąć całkowicie, jeśli jest pusty.

  <input name=address disabled>
  <input name=address disabled="">

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 2 komentarzy »

A w IE znowu…

wtorek, 8 Listopad 2011

Jeżeli ktoś wykonując lekcję z poprzedniego wpisu sprawdził jej efekt pod Internet Explorerem, mógł być zaskoczony odmiennym rezultatem niż ten z nagrania. A im wcześniejszej wersji używał, tym efekt był bardziej widoczny. Na szczęście IE 6 praktycznie jest nieużywany, a IE 7 w ciągu ostatniego miesiąca mocno stracił na popularności (mam nadzieję, że na zawsze). Mimo tych optymistycznych zmian na rynku przeglądarek, przedstawiam dzisiaj sposób, jak poradzić sobie z Internet Explorerem:

Jeżeli nie widzisz nagrania, wciśnij F5 na klawiaturze.

Jeżeli nie wszystko jest dla Ciebie jasne. Jeżeli chciałbyś wiedzieć coś więcej o tworzeniu formularzy i nadawaniu im odpowiedniego wyglądu, zadaj mi pytanie. Właśnie do tego celu służy okno komentarzy na dole tej strony.

Mam dla Ciebie dodatkowy prezent. Jeżeli interesuje Cię pozycjonowanie stron w wyszukiwarkach, z pewnością przydadzą Ci się poniższe publikacje: W pierwszej znajdziesz informację o doborze i testowaniu słów kluczowych, a w drugiej mechanizm funkcjonowania najpopularniejszych wyszukiwarek.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Niezbędny na prawie każdym squeeze page jest…

poniedziałek, 7 Listopad 2011

Użytkownik na Twojej stronie squeeze page może zrobić jedną z dwóch czynności: wykonać pożądaną przez Ciebie akcję, albo spadać. Takie przynajmniej są założenia. Najczęstszymi akcjami są: zamówienie, zakup lub pozostawienie swoich danych. Do wszystkich tych czynności służą formularze. Jak do tego się zabrać. Zobacz na przygotowanym przeze mnie nagraniu

Jeżeli nie widzisz nagrania, wciśnij F5 na klawiaturze.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

Jak zrobić stronę squeeze page?

czwartek, 3 Listopad 2011

Czym jest squeeze page pisałem już kiedyś. Dzisiaj chcę pokazać, jak zabrać się za wykonanie takiej strony.

Jeżeli nie widzisz nagrania, wciśnij F5 na klawiaturze.

Niedawno udostępniłem kurs Zawodowy Webmaster, którego częścią jest to nagranie, swojemu 10-cio letniemu synowi Patrykowi. Zaskoczyło mnie, jak świetnie poradził sobie z wykonaniem zadań. Dla tych co mają wątpliwości, czy sobie poradzą: kurs jest na poziomie uzdolnionego 10-cio latka .

Tagi:CSS, HTML, squeeze page, XHTML
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 2 komentarzy »

Jak łączyć klasy

poniedziałek, 31 Październik 2011

Obstylowując strony internetowe często używamy identycznych ustawień dla tych samych właściwości różnych elementów. Np. mamy pogrubione i powiększone fragmenty tekstu i nagłówki tabel, wyrównane do prawej nagłówki h3 i grafiki, pochylone i kolorowe nagłówki i linki. Jednocześnie każdy element ma nieco inne zestawienie tych właściwości. Nagłówki tabel i nagłówki h2 są dodatkowo wyśrodkowane, a fragmenty tekstu i części wykreślone są zapisane na zmienionym tle, a czym bardziej złożona strona, tym większa ilość kombinacji. Skutkiem tego jest coraz bardziej rozbudowany plik css.

Zaprezentuję to na przykładzie. Załóżmy, że chcę osiągnąć na stronie efekt jak w poniższej ramce.

Tekst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor molestie dui, bibendum ullamcorper tortor sodales id. Suspendisse porttitor, lacus eget faucibus faucibus, tortor arcu eleifend est, id vehicula ligula magna et dolor. Duis ligula neque, aliquam quis egestas a, hendrerit vel lectus. Duis nec lectus lacus, sit amet adipiscing nibh. Pellentesque ultricies laoreet dapibus. Nam ut turpis quis felis adipiscing tincidunt. Cras ut massa dolor, ut ultricies tortor. Mauris id neque sed elit porta tempor sit amet sed urna. ~~Phasellus lacinia diam a ligula~~ lobortis non semper mauris gravida.

Grafika

Tabela

A	B	C
Lorem ipsum dolor sit amet, consectetur adipiscing elit.		Phasellus tempor molestie dui, bibendum ullamcorper tortor sodales id.
Suspendisse porttitor, lacus eget faucibus faucibus, tortor arcu eleifend est, id vehicula ligula magna et dolor.	Duis ligula neque, aliquam quis egestas a, hendrerit vel lectus.	Cras ut massa dolor, ut ultricies tortor.

Wyróżnione fragmenty tekstu są ujęte w znaczniki span z nadaną klasą wazne, grafika jest zawarta w bloku div z klasą prawe. Standardowo style dla tej ramki wyglądałyby następująco:

h2
{
	text-align: center;
	font-style: italic;
	color: #00cc00;
}
 
h3
{
	text-align: right;
	font-style: italic;
	color: #00cc00;
}
 
.wazne
{
	font-size: 120%;
	font-weight: bold;
	display: inline-block;
	background-color: #ccffee;
}
 
a
{
	font-style: italic;
	color: #00cc00;
}
 
del
{
	display: inline-block;
	background-color: #ccffee;
}
 
.prawe
{
	text-align: right;
}
 
thead
{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

To skromne w końcu formatowanie można by było nieco uprościć definiując dodatkowe klasy, a usuwając definicje styli dla konkretnych elementów strony:

.wysrodkuj
{
	text-align: center;
}
 
.prawe
{
	text-align: right;
}
 
.pochylone-zielone
{
	font-style: italic;
	color: #00cc00;
}
 
.wazne
{
	font-size: 120%;
	font-weight: bold;
}
 
.tlo
{
	display: inline-block;
	background-color: #ccffee;
}

Elementom strony możemy nadać teraz odpowiednie klasy. Dzięki temu, że jeden element może mieć kilka klas, uzyskujemy wysoką elastyczność i wiele możliwości użycia tych samych definicji styli. Klasy w atrybucie class rozdzielamy spacją. Poniżej prezentuję to na fragmentach przykładu z ramki na początku tego artykułu.

	<h2 class="wysrodkuj pochylone-zielone">Tekst</h2>
 
	<span class="wazne tlo">Suspendisse porttitor</span>
 
	<a class="pochylone-zielone" href="#">Nam ut turpis quis felis adipiscing tincidunt</a>
 
	<del class="tlo" datetime="2011-10-31T12:08:54+00:00">Phasellus lacinia diam a ligula</del>
 
	<h3 class="prawe pochylone-zielone">Grafika</h3>
 
	<div class="prawe" style="text-align: right;">
		<img src="/wp-content/uploads/mini_zawodowy_webmaster.jpg" alt="Zawodowy Webmaster" />
	</div>
 
	<thead class="wazne wysrodkuj">
		<tr><td>A</td><td>B</td><td>C</td></tr>
	</thead>

Pokazana metoda budowania styli części z Was była z pewnością znana, ale wiem, że dla większości będzie to odkrycie, które ułatwi znacznie pracę nad stylami na stronach internetowych.

Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 6 komentarzy »

Problemy z funkcjami.

czwartek, 15 Wrzesień 2011

Podczas niedawnych prac nad kursem dotyczącym integracji systemów płatności internetowych ze stroną WWW natknąłem się na wadliwe działanie funkcji htmlentities(). Problem polegał na tym, że ciągi znaków zakodowane w UTF-8 pomimo przesłania do funkcji informacji o kodowaniu, miały zamieniane litery ‘ó’ oraz ‘Ó’ na encje ‘ó’ oraz ‘Ó’. Sprawa wygląda dosyć dziwnie, bo szukając informacji o tym błędzie natknąłem się na kilka dyskusji i podobne problemy napotkali też inni programiści, ale niekoniecznie dotyczyły one tych samych liter.

Rozwiązanie problemu jest oczywiście dosyć proste. Należy encje zamienić z powrotem na odpowiedni litery. Należy przy tym pamiętać, by plik z kodem był również zakodowany w UTF-8.

<?php
	$value=htmlentities($value, ENT_COMPAT, 'UTF-8');
	$value=str_replace(array('&oacute;', '&Oacute;'), array('ó', 'Ó'), $value);
?>

Funkcja str_replace() zamienia w zmiennej $value fragmenty z tablicy, która jest pierwszym argumentem tej funkcji na elementy tablicy, która jest argumentem drugim.

Z kolei wczoraj, konfigurując portal pewnej szkoły zauważyłem, że w pewnych miejscach polskie znaki również nie wyświetlają się poprawnie. Przeglądarka poprawnie interpretowała kodowanie strony, również w bazie danych wszystkie napisy były zapisane prawidłowo. Po bliższym przyjrzeniu się problemowi, winowajcą okazała się funkcja strtolower() zmieniająca wszystkie znaki na małe. Funkcja ta również nie radziła sobie z kodowaniem UTF-8. W tym przypadku jednak znalazł się zamiennik: funkcja mb_strtolower(). Jej użycie dla tekstów kodowanych w UTF-8 wygląda następująco

<?php
	$tytul=mb_strtolower($tytul, 'UTF-8');
?>

Tagi:echo, foreach, funkcje, htmlentities(), mb_strtolower, PHP, strtolower(), str_replace(), UTF-8
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | Brak komentarzy »

MVC

środa, 17 Sierpień 2011

W niedalekiej przyszłości mam w planach zajęcie się tematami wzorców projektowych i frameworków. Z obydwoma tematami związany jest wzorzec MVC. Będący z jednej strony właśnie wzorcem, a z drugiej podstawowym elementem konstrukcji wielu frameworków w tym najpopularniejszych: Zend Framework, KohanaPHP czy Symfony.

Model-View-Controller czyli Model-Widok-Kontroler jest architektonicznym wzorcem projektowym. Wzorzec ten dzieli strukturę aplikacji na trzy części:

Model: Zazwyczaj składa się z modułów zajmujących się logiką aplikacji. To właśnie one są odpowiedzialne za przetwarzania danych. W klasach modelu znajdują się wszelkiego rodzaju operacje na bazie danych. Jeżeli w systemie znajdują się zapytania SQL, powinny być umieszczone właśnie w modelu.
Widok: Jest warstwą prezentacji danych. Umożliwia interakcje użytkownika z aplikacją.
Kontroler: Odbiera dane wejściowe od użytkownika i na ich podstawie wywołuje odpowiednie modele. Dane z modeli wysyła do odpowiednich widoków.

Poszczególne części tego wzorca powinny mieć wyłączność na pełnienie swoich funkcji, z czym niektórzy programiści mają problem. Umieszczanie fragmentów widoku czy zapytań SQL w kontrolerze nie powinno mieć miejsca. Niestety nawet niektóre frameworki sprzyjają takiemu przemieszaniu funkcji poszczególnych elementów wzorca MVC.

Choć wzorzec MVC jest głównie wykorzystywany w aplikacjach pisanych obiektowo, to w uproszczonej postaci został wykorzystany w kursie „Zawodowy Webmaster” do budowy portalu społecznościowego. Rolę kontrolera pełni tam plik index.php, modelu – funkcje.php, a widoku pliki szablonów.

Tagi:frameworki, klasa, konstruktor, MVC, obiekt, PHP, programowanie obiektowe, wzorce projektowe
Zaszufladkowany do Darmowe artykuły, Sekrety Webmasterów | 2 komentarzy »