W odniesieniu do stron WWW coraz częściej mówi się o tzw. semantycznym kodzie XHTML. W artykule wyjaśnię na czym owa semantyczność polega.
Witryna WWW widziana oczami człowieka i robota
Witryny internetowe są tworzone dla ludzi. Nadrzędnym celem jest to, by człowiek czytający tekst zrozumiał zawarte w nim informacje. Na przykład strona z rozkładem jazdy autobusów, która zawiera tabelę podobną do tych wiszących na przystankach, będzie jasna i zrozumiała dla większości osób. Pojawi się w niej numer linii, godziny odjazdów autobusów oraz adres przystanku.
Natomiast robot, który odwiedza taką witrynę, nie ma możliwości sklasyfikowania zawartych w niej informacji. W żaden sposób nie będzie mógł przełożyć godzin odjazdów na bazę danych rozkładu jazdy danej linii. Jedynymi widocznymi dla robota informacjami będą teksty zawarte na stronie. Co więcej, informacje widoczne w postaci graficznej będą zupełnie niedostępne dla robota. To, co człowiek potrafi przeczytać i jednoznacznie sklasyfikować jest widziane przez roboty internetowe jedynie w postaci ciągu tekstów pozbawionych wzajemnych relacji.
SEMANTYKA
- jęz. dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów; semazjologia
- log. dział semiotyki, jedna z głównych dyscyplin logiki współczesnej, zajmująca się badaniem związków jakie zachodzą między wyrażeniami języka a przedmiotami do których się one odnoszą
To zjawisko powoduje, że wyszukiwanie w internecie ma charakter wyszukiwania tekstu. Użytkownik podaje wyraz, a wyszukiwarka odnajduje w bazie danych adresy stron, które zawierają podany wyraz. Jeśli robot potrafiłby sklasyfikować informacje zawarte na stronie, wyszukiwanie nabrałoby innego wymiaru.
Semantyka sieci WWW
Semantyczny Web stanowi kolejny etap rozwoju sieci WWW. W projekcie tym nacisk jest położony na to, by zasoby zawarte w sieci WWW były zrozumiałe nie tylko dla człowieka, ale również dla robotów (ogólniej: dla oprogramowania przetwarzającego zasoby sieci WWW).
Rozwińmy dalej przykład rozkładu jazdy autobusów. Witryna taka będzie wykonana w oparciu o bazę danych. Jeśli robotowi dostarczymy informacje o powiązaniach poszczególnych danych, to po odwiedzeniu i przeanalizowaniu wszystkich podstron rozkładu robot powinien dysponować bazą danych zbliżoną w pewnym stopniu do oryginalnej bazy danych.
- Uwagi na temat tego, że każdy zbędny element div psuje semantykę kodu znajdziemy m.in. w artykule Matthew Levine\’a pt. In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail.
- Uwagi o identyfikatorach semantycznych znajdziemy w artykule In Search of the Holy Grail oraz na stronie organizacji W3C: http://www.w3.org/QA/Tips/goodclassnames.
Powinien odróżniać linie, przystanki i godziny odjazdu. Obecnie robot wyłącznie zgromadzi teksty zawarte na wszystkich podstronach, gubiąc wszelkie relacje łączące godziny odjazdu, numery linii oraz adresy przystanków.
Semantyka zasobów WWW oznacza więc wprowadzenie nowego aspektu do współczesnych stron internetowych: znaczenia, dostępnego dla robotów. Oczywiście robot jest i będzie tylko automatem. Bez względu na postać zasobów, nie będzie w stanie docenić piękna wierszy Norwida. Będzie jednak umiał utworzyć relację: poeta – wiersz poety. W ten sposób szukając w internecie wierszy Norwida nie będziemy szukali stron, na których pojawiają się wyrazy norwid wiersze, a raczej stron wyznaczonych przez relację Norwid – wiersze.
Semantyka kodu XHTML
Język XHTML nie umożliwia tworzenia semantycznych dokumentów. Przygotowując stronę WWW z rozkładem jazdy autobusów nie mamy żadnej możliwości poinformowania robota o relacjach jakie łączą numery linii, godziny odjazdu oraz adresy przystanków. Bez względu na kod XHTML robot nie ma szans zbudowania żadnych relacji jakie zostały wykorzystane w bazie danych. Utworzenie, choćby najprostszych zależności, numer linii – godziny odjazdu, będzie wymagało indywidualnego, inteligentnego przetworzenia konkretnej strony. A robot jest tej inteligencji pozbawiony.
Obecnie jedynie możemy ułatwić robotowi analizę tekstową dokumentu, przez umieszczenie na stronie napisów:
Rozkład jazdy autobusów
Miasto: Wrocław
Linia: 153
Przystanek: Zoo
Godziny odjazdów: 10:15, 12:40
Pierwszym krokiem tworzenia semantycznych dokumentów XHTML jest więc dostarczanie wszystkich danych w postaci tekstowej. Jeśli na stronie pojawia się jakakolwiek informacja w postaci graficznej i nie ma swojego odpowiednika tekstowego, to witryna taka nie jest semantyczna.
Drugim krokiem jest usunięcie z dokumentu XHTML wszelkich elementów i znaczników pełniących wyłącznie rolę prezentacyjną. Wszelkie aspekty wyglądu witryny mają być zdefiniowane w arkuszach stylów. Zadanie to należy wykonać tak, by zminimalizować kod XHTML. Każdy znacznik stosowany wyłącznie do osiągnięcia układu graficznego psuje semantykę kodu. Na przykład pojemnik:
tworzony wyłącznie w celu nadania wizualnych cech witryny burzy semantykę kodu XHTML.
Strona z jednym menu
Jak zatem tworzyć semantyczne dokumenty XHTML? Najmniejszą niebanalną stroną WWW jest strona zawierająca jedno menu i treść. Do wykonania semantycznego menu strony WWW mamy do dyspozycji dwie listy: ul oraz ol. Wykonanie menu w postaci akapitu p zawierającego serię hiperłączy oraz elementu div z hiperłączami jest z punktu widzenia semantyki strony nieco gorsze.
Relacja ul-li czy ol-li jest bardzo mocna i dokładnie odzwierciedla relację, jaka łączy opcje menu. Ponadto w elementach div oraz p mogą się znaleźć dodatkowe teksty, które zaburzą strukturę całości. Nawet jeśli żadne zbędne napisy nie pojawią się w menu wykonanym przy użyciu p czy div, to i tak fakt, że mogłyby się pojawić utrudnia robotowi odtworzenie relacji.
Wykonywanie menu w postaci listy ol bądź ul stało się powszechne. Do umieszczenia na stronie tekstu użyję natomiast elementu div. Z uwagi na to, że menu możemy wykonać jako listę ul lub ol, a kolejność elementów ul/ol i div może być dowolna, istnieją cztery semantyczne strony z jednym menu.
Rozwiązanie pierwsze
Lista: ul
Kolejność: ul, div
Rozwiązanie drugie
Lista: ul
Kolejność: div, ul
|
|
|
Rozwiązanie trzecie
Lista: ol
Kolejność: ol, div
Rozwiązanie czwarte
Lista: ol
Kolejność: div, ol
|
|
|
Rozwiązania niesemantyczne
Jeśli przyjąć, że semantykę kodu burzy każdy element użyty wyłącznie w celach zmiany wyglądu, to stosowanie jakichkolwiek pojemników będzie niesemantyczne.
Oba przykłady zawierają elementy powodujące, że kod nie jest semantyczny.
Przykład z pojemnikiem
Przykład z kolumnami: lewą i prawą
Dodatkową, z punktu widzenia semantyki, wadą ostatniego rozwiązania jest użycie identyfikatorów lewa oraz prawa. Identyfikatory oraz nazwy klas powinny odnosić się do roli elementów, a nie ich wizualnych cech. Stosowanie identyfikatorów: lewy, czerwony, gruby, nasrodek itd. powoduje, że kod XHTML nie jest semantyczny.
Osobnym zagadnieniem jest liczba identyfikatorów i klas. Nawet jeśli każdy element XHTML będzie miał identyfikator i klasę, to strona taka ciągle będzie semantyczna. Liczba identyfikatorów i klas nie psuje semantyki kodu XHTML. Taki kod jest po prostu bardziej rozwlekły, trudniejszy w zarządzaniu i mniej czytelny.
|
|
|
Nadużywanie klas jest nazywane w książce Jeffreya Zeldmana Projektowanie serwisów WWW. Standardy sieciowe mianem classitis (strona 178).
Czy każda strona WWW ma mieć identyczny kod XHTML?
W kontekście semantyki odpowiedź na to pytanie jest twierdząca lub… prawie twierdząca. Przyjrzyjmy się czterem rozwiązaniom strony z jednym menu. W kodzie XHTML tych czterech przykładów nie ma miejsca na żadne modyfikacje. Jeden element na menu (ol lub ul), jeden element na zawartość (div). Zatem każda strona z jednym menu musi przybrać jedną z czterech postaci.
Oczywiście przykład ten jest skrajnie uproszczony. Co się stanie, jeśli do strony zechcemy dodać stopkę i nagłówek? Wówczas pojawią się dwa dodatkowe elementy div, jeden na nagłówek (div#header) oraz jeden na stopkę (div#footer):
Zmieniając kolejność elementów div otrzymamy 4! = 24 możliwe kombinacje. Dodatkowo, zastępując w menu listę ul listą ol kombinacji będzie się 24 x 2 = 48.
Powiedzmy jeszcze raz dokładnie: każda strona z jednym menu (bez nagłówka i stopki) ma mieć postać taką, jak w jednym z czterech przykładów (z dokładnością do białych znaków oraz identyfikatorów). Każda strona z jednym menu z nagłówkiem i stopką ma mieć jedną z 48 możliwych postaci (z dokładnością do białych znaków oraz identyfikatorów). Jeśli chcemy tworzyć semantyczny kod XHTML, to nie mamy żadnego wyboru.
Style, style, style
Czy wszystkie strony mają być identyczne?
Czy fakt, że strony mają mieć identyczny kod XHTML oznacza, że wszystkie strony w internecie będą identyczne? Oczywiście nie. Kod XHTML nie ma żadnego wpływu na wygląd witryny.
Wszystkie cechy wizualne strony WWW mają być ustalone w stylach. Począwszy od czcionek, poprzez kolory, obramowania, a skończywszy na układzie całości.
Ten sam kod XHTML możemy ułożyć na nieskończenie wiele sposobów, nadając każdemu projektowi indywidualne cechy. Takie podejście jest stosowane w projekcie CSS Zen Garden (http://www.csszengarden.com). Cały Ogród Zen nie jest niczym innym, jak zbiorem kilkuset arkuszy stylów zmieniających wygląd jednej i tej samej strony WWW. Zadanie jest o tyle ciekawe, że webmaster nie ma prawa modyfikacji pliku XHTML! Z góry zadany kod XHTML należy ozdobić stylami CSS, nadając mu unikalny wygląd.
Przykład: szablon auta
Jako przykład zmodyfikuję kod szablonu, który przedstawiłem w artykule \”GIMP: tworzenie szablonów stron WWW – część 1\”, stosując w nim technikę rolloverów CSS.
Kod XHTML szablonu jest zgodny z pierwszą wersją witryny z jednym menu:
Ponieważ opcje menu reagują na wskazanie kursorem myszki, a każda z nich posiada unikalny obraz tła, należy im nadać identyfikatory. Style odpowiadające za wygląd menu są następujące:
#menu {
background : url(\'img/menu-tlo.png\') no-repeat;
width : 1000px;
height : 224px;
padding : 0px;
margin : 0px auto;
border : none;
list-style-type : none;
position : relative;
}
Ustalają one wymiary oraz położenie elementu ul i nadają mu tło. Tekst każdej opcji ma być niewidoczny, hiperłącza nie mają podkreślenia, zaś same opcje nie mają marginesu, obramowania oraz wyrównania:
#menu a {
text-decoration : none;
display : block;
position : absolute;
padding : 0px;
margin : 0px;
border : none;
font-size : 0px;
color : black;
}
Opcje pozycjonujemy bezwzględnie w odniesieniu do elementu ul. Zapewniają to dwa wpisy:
position : absolute;
position : relative;
w powyższych stylach. W odniesieniu do każdej z opcji ustalamy: wymiary, położenie oraz tło po wskazaniu kursorem myszki:
#o1 a {
/*
* lewy gorny naroznik rollovera w obrazie
*/
left : 310px;
top : 84px;
/*
* wymiar rollovera
*/
width : 116px;
height : 135px;
}#
o1 a:hover {
background : url(\'img/lorem-on.png\') no-repeat;
}
W ten sposób witryna o semantycznym kodzie XHTML otrzymuje unikalny wygląd (rys. 7).
Podsumowanie
Poprawność syntaktyczna jest pierwszym krokiem w kierunku tworzenia semantycznych stron w języku XHTML. Dyskusja na temat semantyki ma sens jedynie w odniesieniu do dokumentów poprawnych składniowo. Jeśli zatem myślimy o tworzeniu stron semantycznych, to najpierw zbadajmy poprawność składniową kodu XHTML oraz CSS. Moje trzy ulubione metody to: wtyczka HTML Validator do Firefoksa, walidator W3C, wymuszenie typu {stala}application/xhtml+xml{/stala}.
Jak już wcześniej wspomniałem, język XHTML nie jest semantyczny. Określenie \”semantyczny kod XHTML\” oznacza jedynie, że:
- wszystkie informacje są dostępne w postaci tekstowej,
- kod nie zawiera ani jednego elementu służącego wyłącznie do modyfikacji wyglądu,
- wszystkie identyfikatory i nazwy klas odnoszą się do funkcji, a nie do wyglądu.
Czy cechy te mają istotne znaczenie? Obecnie jest to w dużej części sztuka dla sztuki. Nie ma oprogramowania, które reagowałoby na identyfikatory niesemantyczne, np. lewy, prawy. Jest to jedynie zmiana mentalna, mająca na celu upowszechnienie pojęcia semantyczności w środowisku osób tworzących sieć WWW.
Podobnie sprawa wygląda w odniesieniu do dodatkowych, zbędnych elementów, które dotyczą wyglądu. Na przykład pojemników. Dodanie jednego czy dwóch pojemników nie powoduje żadnych konsekwencji, a niejednokrotnie znacznie ułatwia projekt w oparciu o CSS. Jedynie postać tekstowa zawartych informacji ma praktyczne znaczenie. Witryny, które zawierają informacje w postaci graficznej, nie są dostępne dla wyszukiwarek.
