Webmastering w przykładach: www.willaewa.pl

Witryna dostępna pod adresem http://www.willaewa.pl pełni rolę wizytówki pensjonatu o nazwie Willa Ewa, który znajduje się w miejscowości Lądek Zdrój. Artykuł opisuje szczegóły realizacji witryny.

Wykorzystane języki oraz narzędzia

Witryna jest wykonana w językach: XHTML 1.0 strict, CSS2, JavaScript. Polskie znaki diakrytyczne są zakodowane w standardzie utf-8.

Testy poprawności witryny wykonałem wykorzystując nagłówek HTTP:

header(\'Content-Type: application/ xhtml+xml\');

co gwarantuje składniową zgodność kodu XHTML ze standardami.

Szablon witryny został narysowany w programie GIMP. Plik XCF zamieniłem na witrynę WWW, krojąc go ręcznie przy użyciu opcji Edycja > Kopiuj widoczne oraz Edycja > Wklej jako nowy. Wymiana zawartości witryny jest oprogramowana w PHP z wykorzystaniem szablonów Smarty.

Pracę nad witryną rozpocząłem od wykonania serii fotografii pensjonatu Willa Ewa. Łącznie wykonałem około 200 fotografii, z czego ostatecznie wybrałem 51.

Funkcjonalność witryny

Witryna pensjonatu Willa Ewa jest wykonana w oparciu o układ stałej szerokości. Jej wygląd nie ulega zmianie wraz ze zmianą szerokości okna przeglądarki. Szerokość szablonu wynosi 760 pikseli, dzięki czemu na stronie nigdy nie pojawia się poziomy pasek przewijania (przy rozdzielczości od 800 x 600 wzwyż).

Witryna jest wyświetlana w trybie standardów przez wszystkie nowe przeglądarki, czyli IE6, Firefox 1.5, Opera 7, Netscape 8, od podanych wersji wzwyż.

Menu główne ma siedem opcji: o nas, adres, pokoje, łazienki, posesja, budynek oraz galeria. Zmiana opcji menu powoduje wyświetlenie innej treści, zaś sam szablon witryny pozostaje ten sam.

Menu główne wykorzystuje technikę rollover. Każda z opcji reaguje na wskaźnik myszki.

Ostatnia z opcji menu głównego, galeria, przenosi do wystawy fotografii prezentujących wygląd pensjonatu. Galeria jest zorganizowana w postaci serii fotografii, po których wędrujemy przy użyciu strzałek, co ilustruje rys. 2.

Skórka witryny

Układ: XCF

Skórkę witryny wykonałem programem GIMP. Zasadniczymi elementami skórki są:

• obły, niebieski prostokąt,
• zdjęcie pensjonatu wtopione w obły prostokąt,
• niebieski pas uwypuklający opcje menu,
• napisy.

Oczywiście każdy z tych elementów należy umieścić na osobnej warstwie. Kolor wypełnienia niebieskiego, obłego prostokąta należy dobrać na postawie koloru nieba wtapianej fotografii. Ponadto opcje menu należy wykonać – na potrzeby efektu rollover – w dwóch wariantach. Przygotowując układ zadbałem, by szerokość niebieskiego, obłego prostokąta wynosiła 760 pikseli.

Poszczególne elementy skórki są przedstawione na rys. 3, 4, 5 oraz 6.

Krojenie pliku XCF

Skończoną skórkę w formacie XCF pokroiłem na serię mniejszych plików jpg. Najpierw w programie GIMP dodałem prowadnice.

Następnie na podstawie prowadnic wykroiłem fragmenty widoczne na rys. 7. Do krojenia obrazów wykorzystuję opcje: Edycja > Kopiuj widoczne oraz Edycja > Wklej jako nowy. Rys. 8 przedstawia szczegółowe informacje dotyczące plików tworzących menu.

Kod XHTML/CSS/JavaScript

Układ XHTML jest wykonany przy użyciu czterech elementów div. Element div#pojemnik jest pojemnikiem o stałej szerokości 760 pikseli. Pojemnik ten jest podzielony poziomo na trzy mniejsze fragmenty: div#menu, div#tresc oraz div#dol:

Każda z opcji menu jest hiperłączem wykorzystującym efekt rollover. Oto kod XHTML opcji o nas:

Implementacja efektu rollover jest zawarta w pliku rollover.js, zaś style CSS w plikach style. css (style ekranowe) oraz print.css (style do wydruku).

Treść witryny

Oczywiście przy tak niewielkiej witrynie tworzenie bazy danych jest bezcelowe. Treść witryny (tj. zawartość poszczególnych podstron) jest przechowywana w plikach tekstowych o rozszerzeniach .tpl. Są to pliki: onas.tpl, adres.tpl, pokoje.tpl, lazienki.tpl, posesja.tpl, budynek.tpl, galeria. tpl oraz blad.tpl.

Pliki .tpl dołączam do strony instrukcjami include szablonów Smarty, np.:

{stala}{include file=\”adres.tpl\”}{/stala}

Na podstawie stanu aplikacji wybierany jest jeden z plików. Ponadto fotografie dostępne w galerii są zawarte w folderze foto.

Zmienne URL

Do wyboru podstrony serwisu stosuję zmienną URL o nazwie {stala}id{/stala}. Zmienna ta jest dostępna w tablicy {stala}$_GET[\’id\’]{/stala}. Jej wartość ma następujące znaczenie:

- strona błędu
- o nas
- adres
- pokoje
- łazienki
- posesja
- budynek
- galeria

W galerii fotografii zmienna {stala}$_GET[\’id2\’]{/stala} zawiera numer wybranej fotografii.

Skrypt PHP

Rola skryptu PHP sprowadza się do:

• ustalenia stanu aplikacji (czyli wartości zmiennej {stala}$akcja{/stala}) na podstawie zmiennej {stala}$_GET[\’id\’]{/stala},
• ustalenia numeru wybranej fotografii (pod warunkiem, że {stala}$akcja{/stala} = 8),
• ustalenia – na potrzeby wskaźnika – numerów fotografii pierwszej, poprzedniej, następnej i ostatniej (pod warunkiem, że {stala}$akcja{/stala} = 8),
• przekazania zmiennych do szablonu,
• przetworzenia szablonu.

Nazwy plików graficznych z galerii są następującej postaci:

foto-1.jpg
foto-2.jpg
...
foto-52.jpg

Poznamy je wywołując funkcję {stala}glob(){/stala}. Natomiast liczbę fotografii wyznaczam przy użyciu funkcji {stala}count(){/stala}:

$images = glob(\'foto/\'.jpg\');
$foto_max = count($images);

Oczywiście zmienne {stala}$_GET[\’id\’]{/stala} oraz {stala}$_GET [\’id2\’]{/stala} należy poddać pełnej walidacji, czyli sprawdzić ich zakres. W przypadku zmiennej {stala}$_GET[\’id\’]{/stala} test ma postać:

if (isset($_GET[\'id\']) &&
    str_ievpifr($_GET[\'id\'], 2, 8)) {
    ...
}

gdyż opcje menu mają numery od 2 do 8. Natomiast testując numer fotografii wykorzystujemy zmienną {stala}$foto_max{/stala}:

if (
    (count($_GET) === 2) &&
    isset($_GET[\'id2\']) &&
    str_ievpifr($_GET[\'id2\'], 1, $foto_max)
) {
    ...
}

Szablony Smarty

Witryna wykorzystuje szablony Smarty. Szablon główny jest zapisany w pliku index.tpl. W szablonie tym jest zawarta skórka witryny oraz instrukcja {stala}if{/stala}, odpowiedzialne za wstawienie odpowiedniej zawartości:

    {if $akcja == 1}
        {include file=\"brak.tpl\"}
    {elseif $akcja == 2}
        {include file=\"onas.tpl\"}
    {elseif $akcja == 3}
        {include file=\"adres.tpl\"}
    {elseif $akcja == 4}
        {include file=\"pokoje.tpl\"}
    {elseif $akcja == 5}
        {include file=\"lazienki.tpl\"}
    {elseif $akcja == 6}
        {include file=\"posesja.tpl\"}
    {elseif $akcja == 7}
        {include file=\"budynek.tpl\"}
    {elseif $akcja == 8}
        

            {include file=\"galeria.tpl\"}
        
    {/if}

Treść każdej podstrony jest zapisana w osobnym pliku .tpl. Na przykład witryna widoczna po wybraniu opcji adres jest zawarta w pliku adres.tpl. Jest to prosty kod XHTML opisujący zawartość strony:

Willa EWA

ul. Spacerowa 5

57-540 Lądek-Zdrój


tel./fax. (074) 8146 691


http://www.willaewa.pl

willaewa@willaewa.pl

Mapa dojazdu do pensjonatu Willa EWA:

800× 600
1600× 1200

Detale

Przyjazne URL

Witryna Willa Ewa wykorzystuje przyjazne adresy URL. Na zewnątrz aplikacji widocznymi adresami URL są wyłącznie:

index.html
adres.html
pokoje.html
lazienki.html
posesja.html
budynek.html
galeria-1.html
galeria-2.html
...
galeria-52.html

Przyjazne adresy URL są zaimplementowane przy użyciu plików .htaccess oraz filtr.log. Nadchodzące zapytania HTTP dotyczące plików .html są zamieniane przez serwer Apache (na podstawie zawartości pliku .htaccess). Na przykład zapytanie o plik budynek.html jest przełożone na zapytanie dotyczące dokumentu index.php?id=7.

Natomiast generowane strony WWW są poddawane konwersji odwrotnej. Adresy postaci index.php?id=XXX są zamieniane na adresy .html na bazie pliku filtr.log. Konwersja ta jest realizowana przez fragment:

$strona = $s->fetch(\'index.tpl\');
$tmpFiltr = file_get_contents(\'filtr.log\');
$tmpFiltr= uncomment_and_trim ($tmpFiltr);
list($w, $c, $filtr) = string2VArray ($tmpFiltr, \"\t\");
$strona = str_replace($filtr[0], $filtr[1], $strona);
echo $strona;

Pliki .htaccess oraz filtr.log są generowane – z racji na liczbę fotografii – skryptem PHP.

Tak wykonana witryna nie wymaga PHP działającego na serwerze (ani żadnego dodatkowego oprogramowania) i może być przeglądana także z płyty CD. Wystarczy witrynę wykonaną w PHP zgrać w postaci offline (np. programem wget), po czym na serwerze umieścić statyczne pliki .html.

Atrybuty title oraz alt

Ponieważ witryna stosuje graficzne menu, należy pamiętać o atrybutach title oraz alt dołączanych do hiperłączy. W przeciwnym razie witryna będzie niedostępna dla przeglądarek, które nie wyświetlają obrazów.

Rozmiary plików

Wykonując menu graficzne należy zwrócić uwagę na rozmiar plików. Po pierwsze opcje menu zapisujemy w formacie .jpg, gdyż pliki .png będą wielokrotnie większe. Po drugie zapisując pliki .jpg tworzące menu ustalamy ich dokładność na około 85%. Wówczas otrzymamy opcje menu wielkości około od 1 do 3 kB każda (pamiętajmy, że każda opcja to dwa pliki graficzne do efektu rollover).

Dolna, obła fotografia tworząca szablon stron zajmuje około 100 kB. W celu zmniejszenia jej wymiaru wybieramy dokładność 50%. Dodatkowo możemy zwiększyć wygładzanie, tak jak to zostało zilustrowane na rys. 9.

W podobny sposób zmniejszyłem rozmiar fotografii z galerii (ustaliłem ich dokładność na 60%).

Ikona

Wykorzystując dowolny program do rysowania ikon rysujemy ikonę o wymiarach 16 x 16 pikseli, przedstawioną na rys. 10.

Ikonę zapisujemy w pliku willaewa.ico i dołączamy do kodu XHTML elementem link:

Błąd 404

W pliku .htaccess na serwerze dodajemy wpisy:

ErrorDocument 404 /blad.html
RewriteRule *blad.html$ index.php?id=1

Dzięki niemu odwołania do nieistniejących plików będą skierowane na stronę zawierającą poniższy tekst:

Błędny adres, podany dokument nie istnieje!

Stałe wymiary obrazów

W pliku CSS wprowadzamy stałe wymiary wszystkich obrazów. Pozwoli to przeglądarkom na ustalenie ułożenia obrazów na stronie przed pobraniem plików graficznych.

Quirksy dla IE5

Sprawdzamy wygląd witryny w przeglądarce IE5. Jeśli odpowiednio duża liczba wizyt pochodzi z tej przeglądarki, to dodajemy – w szablonie głównym index.tpl – komentarze IE ustalające quirksy (wymiary pudełek dwóch elementów div):

{literal}

{/literal}

Z racji na użycie systemu Smarty, style wewnętrzne muszą być ujęte wewnątrz {stala}{literal}{/stala} oraz {stala}{/literal}{/stala}.

Język strony i metadane

Na zakończenie dodajemy atrybuty lang, xml: lang oraz meta definiujące język strony:

...

oraz elementy meta opisujące witrynę: