Uwaga SSL!

9 marca 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. :) :) :)

Co chciałbyś wiedzieć o HTML 5?

14 grudnia 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

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

9 grudnia 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ę.

Programowanie w php oznacza wcześniejszą emeryturę.

Programowanie w php oznacza wcześniejszą emeryturę.

HTML 5

2 grudnia 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="">

A w IE znowu…

8 listopada 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.

Jak zdobyć popularność i zjednać sobie wyszukiwarki Pierwsze miejsce w wyszukiwarkach

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

7 listopada 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.

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.

Jak zdobyć popularność i zjednać sobie wyszukiwarki Pierwsze miejsce w wyszukiwarkach

Jak zrobić stronę squeeze page?

3 listopada 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 :) .


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.

Jak zdobyć popularność i zjednać sobie wyszukiwarki Pierwsze miejsce w wyszukiwarkach

Jak łączyć klasy

31 października 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

Zawodowy Webmaster

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.

Problemy z funkcjami.

15 września 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 ‘&oacute;’ oraz ‘&Oacute;’. 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');
?>

Jak pobrać plik

8 września 2011

Strony internetowe oprócz prezentowania rozmaitych treści często udostępniają swoje zasoby do pobrania. Jeżeli również chciałbyś umożliwić internautom pobieranie pewnych dokumentów, grafik, programów i wielu innych zasobów, z tego tekstu dowiesz się jak to zrobić.

Rozwiązanie jest bardzo proste, a do tego pozwala też ukryć rzeczywistą lokalizację plików. Przypuśćmy, że plik mapa.jpg znajduje się w katalogu tajne-dane. Jeżeli w jakimś miejscu na stronie umieścimy link:

<a href="tajne-dane/mapa.jpg">mapa.jpg</a>

to zdradzimy tajną lokalizację.

Natomiast link do dokumentu html lub skryptu php otworzy stronę lub uruchomi skrypt na serwerze. Wprawdzie w zdecydowanej większości tak właśnie powinno być, ale czasem potrzebujemy niestandardowych działań.

Rozwiązanie powyższych i wielu innych podobnych problemów sprowadza się do wysłania odpowiednich nagłówków do przeglądarki. Link umieszczony na stronie prowadzi do skryptu, który pozwala na pobranie innego pliku nawet z zupełnie innej lokalizacji. Skrypt możemy zapisać w katalogu głównym serwisu w pliku o nazwie mapa.php

<?php
 $file='tajne-dane/mapa.jpg';
 header('Content-disposition: attachment; filename='.basename($file));
 header('Content-type: image/jpeg');
 readfile($file);
?>

Chcemy udostępnić internautom do pobrania skrypt: jak-to-zrobilem.php? Tworzymy plik skrypt.php, a w nim:

<?php
 $file='jak-to-zrobilem.php';
 header('Content-disposition: attachment; filename='.basename($file));
 header('Content-type: text/plain');
 readfile($file);
?>

Teraz należy Ci się kilka słów wyjaśnienia. W pierwszej linii podstawiam do zmiennej $file nazwę pliku wraz ze ścieżką. Ścieżka nie będzie dla nikogo widoczna, więc nie zdradzamy lokalizacji tego pliku. Następna linia wysyła nagłówek z informacją o przesyłanym załączniku i jego nazwie. Zauważ, że zmienna $file jest przekazywana przez funkcję basename(), która zwraca samą nazwę pliku bez ścieżki dostępu. Trzecia linia wysyła informację o typie MIME załącznika. Najpopularniejsze typy MIME umieszczam nieco niżej. Ostatnia linia przy pomocy funkcji readfile() wczytuje wskazany plik.

Pamiętaj aby nie wyświetlać niczego w tym skrypcie. Sprawdź czy poza blokiem kodu PHP nie znajdują się żadne białe znaki.

Popularne typy MIME

  • pliki specyficzne dla programów
    • application/javascript – JavaScript
    • application/xhtml+xml – XHTML
    • application/x-shockwave-flash – pliki Adobe Flash
    • application/json – Notacja Obiektowa JavaScript JSON
  • pliki audio
    • audio/mpeg – MP3 lub inny MPEG audio
    • audio/x-ms-wma – Windows Media Audio
    • audio/vnd.rn-realaudio – RealAudio
    • audio/x-wav – WAV
  • pliki z grafiką
    • image/gif – Obraz GIF
    • image/jpeg – Obraz JPEG
    • image/png – Obraz PNG
    • image/tiff – Obraz TIFF
    • image/vnd.microsoft.icon – Obraz ICO
  • tekst zrozumiały dla ludzi lub kod źródłowy
    • text/css – Cascading Style Sheets (pliki styli css)
    • text/html – HTML
    • text/plain – Dane tekstowe
    • text/xml – eXtensible Markup Language
  • pliki wideo
    • video/mpeg – MPEG-1 wideo z multiplexed audio
    • video/mp4 – MP4 wideo
    • video/quicktime – QuickTime wideo
    • video/x-ms-wmv – Windows Media Video