Dzięki wysiłkom i szerokiej rzeszy aktywistów (takich, jak sam ), o standardach sieciowych mówi się coraz częściej i głośniej.
„Nowa fala” zaczyna docierać również do Polski – pojawiają się pierwsze blogi, w których autorzy dzielą się swoją wiedzą i doświadczeniami w tej materii, serwisy dla twórców stron internetowych również dostrzegają zapotrzebowanie na „nową” wiedzę. Nawet co poniektóre portale zaczynają wywieszać ikonki zgodności z XHTML (jakkolwiek, delikatnie mówiąc, na wyrost).
„Promotorzy” standardów zachwalają je jako panaceum na bolączki współczesnego Internetu. Lek, dzięki któremu witryny będą ładować się szybciej, docierać do szerszego grona odbiorców, działać równie dobrze we wszystkich współczesnych i przyszłych przeglądarkach itd. itd.
Tyle teorii. W praktyce wygląda to tak, że strony takie nie będą powstawać, dopóki znakomita większość dzisiejszych webdesignerów nie zmieni swojego dotychczasowego sposobu myślenia. Mówiąc o zmianie, mam na myśli wyrzucenie na śmietnik 90% dotychczasowych umiejętności i przyzwyczajeń. Umiejętności i przyzwyczajeń nabytych przy okazji studiowania samouczków pisanych przez mniejszych bądź większych amatorów w epoce Dzikiego Zachodu Internetu – Wojen Przeglądarek. Ale wojna już się skończyła. Teraz obowiązują inne reguły. A właściwie dopiero teraz zaczynają obowiązywać jakiekolwiek reguły. Jeśli projektanci i twórcy stron internetowych się do nich nie dostosują – w ciągu najbliższych paru lat ich obecna wiedza stanie się nic nie warta.
Koncepcja separacji
Standardy sieciowe większości dzisiejszych twórców stron kojarzą się przede wszystkim z XHTML-em, kodowaniem pozbawionym tabel, używaniem walidatora kodu itp. Jednak to tylko narzędzia, które pozwalają realizować szerszą koncepcję nowoczesnej witryny sieciowej – koncepcję separacji.
Separacja oznacza w tym przypadku maksymalne rozdzielenie warstw składających się na każdą stronę internetową, czyli struktury, prezentacji i zachowania.
Każda z wspomnianych warstw realizowana jest za pomocą innych technologii:
- struktura – to treść danej strony, która jest odpowiednio zhierarchizowana przez kod XHTML (czyli podzielona na paragrafy, nagłówki, listy wypunktowane itd.);
- prezentacja – to wygląd strony, za który, w idealnej sytuacji, w całości powinien odpowiadać kod CSS;
- zachowanie – to mechanizmy i funkcje danej strony wykraczające poza możliwości samej struktury czy prezentacji, realizowane przy użyciu języka ECMAScript (czyli ustandaryzowanej wersji JavaScriptu) oraz, opcjonalnie, modelu obiektów dokumentu – DOM;
Między strukturą, prezentacją i zachowaniem zachodzą relacje, które zostały zilustrowane na poniższym schemacie:
- Ilustracja 1. Wzajemne relacji między strukturą, prezentacją i zachowaniem.
Jak więc widać, podstawę strony internetowej stanowi struktura. Na nią może zostać nałożona prezentacja. Warstwa zachowania natomiast pozwala kontrolować zarówno strukturę, jak i prezentację. Spośród trzech wymienionych, tylko warstwa struktury może funkcjonować samoistnie, jako pełnoprawna strona internetowa.
Struktura
Struktura, czyli dokument XHTML zawierający wyłącznie treść strony, pogrupowaną w odpowiednie elementy (paragrafy, nagłówki) stanowi podstawę strony internetowej. Należy zauważyć, że do treści strony zaliczać się będzie również grafika, o ile jest istotna z merytorycznego punktu widzenia (tzn. dotyczy omawianego na stronie tematu – np. wykresy, ilustracje, zrzuty ekranowe itd.).
W optymalnych warunkach, warstwa struktury pozbawiona jest jakiegokolwiek wyglądu czy zachowania narzuconego przez projektanta (w szczególności przestarzałych, prezentacyjnych elementów HTML, jak <font>, <u>, <s>, oraz tabel wykorzystywanych do pozycjonowania elementów). Krój czcionki, jej wielkość, marginesy paragrafów czy kolory linków – wszystko to wyświetlane jest w sposób domyślny dla danej przeglądarki.
- Ilustracja 2. Dokument XHTML zawierający wyłącznie ustrukturalizowaną treść danej strony, zaprezentowany w przeglądarce Firefox.
Strona zawierająca wyłącznie warstwę strukturalną nie jest specjalnie atrakcyjna wizualnie (delikatnie mówiąc). Tym niemniej jest w pełni funkcjonalną stroną, dającą się odczytać w dowolnym urządzeniu czy programie do przeglądania WWW.
Prezentacja
Kiedy już uznamy, że nasza strona powinna mimo wszystko być miła dla oka, czas zająć się warstwą prezentacyjną. Tworzą ją kod CSS oraz odpowiednio przygotowane pliki z grafiką. Idealnie, CSS powinien odpowiadać za całość wyglądu strony – od podziału na nagłówek, kolumny i stopkę (o ile taki ma wystąpić), poprzez osadzanie wszelkiej grafiki (tej o charakterze dekoracyjnym), po kontrolowanie typografii (kolory, kroje i rozmiar czcionek, odstępy między liniami tekstu, odstępy między paragrafami itd.). Zakładając zastosowanie poprawnego rozdziału na warstwę struktury i prezentacji, po podłączeniu do pokazanej na poprzedniej ilustracji strony plików CSS, uzyskamy następujący efekt:
- Ilustracja 3. Efekt nałożenia warstwy prezentacji na strukturę.
Zachowanie
Kiedy budowana witryna wymaga funkcjonalności, która wykracza poza strukturę i prezentację, musimy dodać warstwę zachowania. Realizowana jest ona np. poprzez ECMAScript, czyli ustandaryzowaną wersję JavaScriptu, oraz interfejs DOM, który pozwala nam na manipulację dowolnym elementem drzewa dokumentu XHTML.
Tworząc warstwę zachowania, należy pamiętać o jednej rzeczy – nie powinno się za jej pomocą realizować funkcjonalności, który przynależą, z logicznego punktu widzenia, do innych warstw. Chodzi mi przede wszystkim o tzw. menu DHTML, które są zmorą z punktu widzenia dostępności (ang. accessibility) stron internetowych (spróbujcie użyć takiego menu przy wyłączonej obsłudze skryptów albo w przeglądarce tekstowej czy telefonie komórkowym).
Nie znaczy to absolutnie, że nie powinno się używać skryptów w ogóle. Trzeba po prostu na każdym kroku zastanawiać się, czy strona będzie będzie mogła być używana, kiedy, z jakichś przyczyn, skrypt będzie wyłączony.
Od strony technicznej
W praktyce separację warstw składających się na stronę internetową osiąga się kilkoma równocześnie stosowanymi sposobami:
1. Stosowanie semantycznego kodu XHTML
O tym była mowa już wcześniej – unikanie za wszelką cenę nadużywania elementów języka XHTML. Tabela, jak sama nazwa wskazuje, powinna służyć wyłącznie do prezentowania danych tabelarycznych – nie do budowania szkieletu projektu strony.
2. Unikanie przestarzałych elementów HTML
Nie stosujemy żadnych elementów języka HTML, których działanie można zastąpić przez CSS (czyli m.in. <font>, <u>, <small> itd.).
3. Każdy język w osobnym pliku
Powinniśmy, w miarę możliwości, kod CSS i ECMA (JavaScript) trzymać w zewnętrznych plikach, zamiast osadzać bezpośrednio w plikach XHTML.
4. CSS, CSS, CSS…
Nie jestem w stanie przecenić znaczenia tego punktu – do tworzenia warstwy wizualnej strony służy CSS i tylko CSS.
Ale po co?
OK, przebrnąłeś przez ten przydługi elaborat, ale wciąż nie wiesz, dlaczego właściwie miałbyś się trudzić na rozdzielaniem warstw struktury, prezentacji i zachowania? Powodów jest co najmniej kilka:
1. Profesjonalizm
Każdy chce być dobry w tym, co robi. Niestety, wiąże się to z nieustannym wysiłkiem inwestowanym w samorozwój oraz ciągłym weryfikowaniem nie tylko wyników swojej pracy, ale również stosowanej metodologii. Kiedy przestajesz zastanawiać się, dlaczego robisz coś tak, a nie inaczej – popadasz w rutynę, a w efekcie cofasz się w rozwoju.
Odnoszę nieodparte wrażenie, że właśnie rutyna i niechęć do nauki jest głównym powodem oporu wielu twórców stron internetowych wobec konieczności zmian przestarzałych metod pracy.
Rozwarstwienie budowy strony, wizualizacja poprzez CSS, dbanie o dostępność i użyteczność – dzisiaj stosowanie się do tych zaleceń dowodzi dobrej orientacji w relacjach między powinnościami a możliwościami technologicznymi w naszej pracy, a przez to profesjonalizmu i poważnego podejścia do webdesignu.
2. Elastyczność
Warstwowe budowanie stron daje developerom niespotykaną wcześniej elastyczność – umożliwia m.in.:
- modyfikację układu wizualnego strony poprzez zmianę jednej linijki kodu CSS,
- szybkie zmiany całej warstwy prezentacyjnej (podłączenie innego arkusza CSS),
- różnicowanie wyglądu strony w zależności od urządzenia wyjściowego (co przydaje się szczególnie przy tworzeniu stron do druku),
- szybkie przeniesienie treści zestrukturalizowanej poprawnym XHTMLem na inne platformy korzystające z XMLa (można przykładowo wykorzystać w ten sposób treść witryny podczas budowy prezentacji w technologii Macromedia Flash),
- bezproblemową możliwość ponownego wykorzystania skryptów trzymanych w osobnych plikach JS (pod warunkiem, rzecz jasna, odpowiednio elastycznego programowania).
3. Przyszłość
Jakkolwiek górnolotnie by to nie zabrzmiało – jesteśmy skazani na dbałość o standardy sieciowe (o czym wspomniałem na początku). Cały Internet zmierza powoli w kierunku integracji – zarówno na poziomie technologicznym, jak i społecznym. Rozumie to coraz więcej zainteresowanych osób i podmiotów – od producentów przeglądarek internetowych, poprzez część webdesignerów, po co bardziej świadomych klientów. są po prostu zbyt wielkie, aby z nich, ot tak, zrezygnować.
