Antylameriada.net - Zapis semantyczny

Zapis semantyczny

Czym jest semantyka?

Semantyka

Semantyka to dyscyplina badająca relacje pomiędzy znakami a przedmiotami, do których się one odnoszą. Semantyka zajmuje się badaniem znaczenia słów, czyli interpretacją znaków oraz interpretacją zdań i wyrażeń języka. Semantyka logiczna (nazywana też czasem teorią modeli) bada języki sztuczne, gdzie badany język nazywany językiem przedmiotowym jest interpretowany za pomocą metajęzyka.

Semantykę nazywa się teorią znaczenia lub teorią oznaczania (Quine) zależnie od określenia pojęcia znaczenia.

W naszym przypadku, czyli w przypadku osób zajmujących się tworzeniem stron WWW, semantyka zajmuje się znaczeniem logicznym poszczególnych części strony.

"Stara szkoła"

Kiedy kilka lat temu tworzenie stron WWW stało się umiejętnością, która była dostępna dla każdego powstało wiele różnych kursów HTML. Większość z nich, już w trakcie powstawania okazywała oznaki "nieświeżości". Czemu? Język HTML został zaprojektowany tak, żeby być samowystarczalnym, czyli tak, by przy jego pomocy ingerować w wygląd strony. Jednak zastosowane tam rozwiązania pozwalały na bardzo ograniczoną możliwość edycji wyglądu. Były dwie drogi powiększenia tych możliwości: rozbudowanie znaczników odpowiadających za wygląd w HTML-u albo opracowanie technologii, która byłaby łatwa w użyciu, uniwersalna i miała ogromne możliwości. Wybrano oczywiście tę drugą, lepszą drogę - opracowano kaskadowe arkusze stylów CSS. Dzięki takiemu krokowi, z języka HTML praktycznie zniknęły niepotrzebne znaczniki, które odpowiadały za wygląd i nie niosły ze sobą żadnego znaczenia - wartości semantycznej.

Niestety wraz z ewolucją techniczną standardów stron WWW nie poszła ewolucja projektantów. Projektanci, zarówno ci projektujący zarobkowo, jak i ci, którzy robili własne, amatorskie strony zdawali się nie zauważać postępu technologicznego i wciąż korzystali z już przestarzałych metod. Kursy, z których się uczyli nie były uaktualniane a mimo to miały wciąż nowych czytelników, przez co stare, błedne metody były ciągle powielane przez coraz to nowych adeptów sztuki tworzenia stron WWW.

Problem niestety jest wciąż aktualny, ponieważ ciągle "stara szkoła" jest szkołą dominującą i mimo, że nowoczesne metody tworzenia stron są stosowane przez coraz większe rzesze webmasterów to są oni ciągle w mniejszości.

Oszczędność

Wiele stron, ma w nagłówku podobnego potworka:

<center><font face="Arial" size="+2" color="red"><b>Tytuł strony</b></font></center><br><br><br>

Cóż w tym złego? Nawyki! Myśli człowieka, który stworzył taki nagłówek, były skoncentrowane wyłącznie na wyglądzie tego kawałka tekstu. Nie zastanawiał się nad ilością danych, które musi wpisać. Nie pomyślał o problemach związanych z najmniejszą nawet aktualizacją wyglądu. A nauczył się tego zapewne podczas podglądania kodu stworzonego przez jakiś kiepskiej jakości edytor wizualny.

A przecież wystarczy zapisać:

<h1>Tytuł strony</h1>

Oraz zastosować do tego prosty styl:

h1 {
	color: red;
	font: normal normal bold 24pt/150% Arial, sans-serif;
	margin-bottom: 3em;
	text-align: center;
}

Ale jaka z tego oszczędność danych, skoro zarówno jeden jak i drugi zapis są podobne objętościowo? Mogłoby się wydawać, że nie ma. Ale jest! Styl można zapisać w zewnętrznym pliku, który będzie dołączany do każdego dokumentu hipertekstowego na stronie. Plik ten zostanie pobrany przez przeglądarkę tylko raz. W tym "złym" wariancie formatowanie tego kawałka tekstu będzie ładowane za każdym razem gdy będzie pobierany plik. A na każdej stronie przecież występuje nagłówek. Jeśli by zastosować ten gorszy wariant to zamiast kilkudziesięciu przeglądarka będzie ściągać kilkaset niepotrzebnych bajtów.

A jakaż jest to oszczędność czasu! Jeśli chcemy przebudować wygląd naszej strony to zmieniając formatowanie nagłówków musielibyśmy edytować wszystkie pliki. Zajęłoby to z pewnością sporo czasu, a i pewnie o czymś byśmy zapomnieli przez co któryś z nagłówków mógłby straszyć starym wyglądem wśród nowej szaty graficznej.

Zapis semantyczny nie ma na celu oszczędności czasu i objętości danych, ale jego dobrze opracowane podstawy to gwarantują. W praktyce zawsze odpowiedni zapis semantyczny jest dużo bardziej optymalny niż analogiczny zapis "starej szkoły".

Ułatwienie dostępu

Przeanalizujmy przykład źle zrobionego menu nawigacyjnego:

<table>
	<tr><td><a href="plik1.html"><img src="strzalka.gif" width="20" height="20" border="0"> Strona główna</a></td></tr>

	<tr><td><a href="plik2.html"><img src="strzalka.gif" width="20" height="20" border="0"> Informacje</a></td></tr>

	<tr><td><a href="plik3.html"><img src="strzalka.gif" width="20" height="20" border="0"> Kontakt</a></td></tr>

</table>

Większość programów czytających z ekranu (ang. screenreaders), które są używane przez osoby niewidome przeczyta to mniej więcej jako:

Strona posiada trzy odnośniki. Tabela z trzema wierszami i jedną kolumną. Odnośnik. Obrazek strzalka.gif Strona główna Odnośnik. Obrazek strzalka.gif Informacje Odnośnik Obrazek strzalka.gif Kontakt Koniec tabeli.

Nie jest to dobre rozwiązanie. Przecież słysząc słowo "tabela" oczekujemy jakiegoś zestawienia danych. Z pewością menu nawigacyjne ciężko zaliczyć do jakiegokolwiek zestawienia danych. Zastanówmy się czym jest takie menu. Nasuwa się odpowiedź, że to menu jest listą odnośników. Jest! A przecież języki hipertekstowe mają "gotowca" do tworzenia takich list:

<ul>
	<li><a href="plik1.html">Strona główna</a></li>

	<li><a href="plik2.html">Informacje</a></li>
	<li><a href="plik3.html">Kontakt</a></li>
</ul>

Oraz do tego drobny styl:

ul {
	list-style: circle inside url(strzalka.gif);
}

Dzięki temu zabiegowi program odczyta:

Strona posiada trzy odnośniki. Lista trzech elementów. Punktor Odnośnik Strona główna Punktor Odnośnik Informacje Punktor Odnośnik Kontakt Koniec listy.

Należy zauważyć, że program czytający z ekranu nie zwraca uwagi na kolorystykę i układ elementów - czyta je w takiej kolejności w jakiej są one ułożone w kodzie strony. Dlaczego więc mamy takiemu programowi serwować dane, które nie są mu przydatne, a nawet zakłócają, w pewnym sensie, jego pracę?

Roboty sieciowe, przeglądarki tekstowe

W gruncie rzeczy robot sieciowy, na przykład pajączek wyszukiwarki (ang. crawler) jest pewną odmianą przeglądarki tekstowej. Podstawową różnicą jest oczywiście przeznaczenie, ale sposób działania jest bardzo podobny. Programy czytające z ekranu działają w zakresie interpretacji odczytywanych danych na identycznych zasadach jak przeglądarki tekstowe i roboty sieciowe.

Ale co wspólnego ma semantyka z przeglądarkami tekstowymi? Bardzo wiele. Przecież semantyka nie odnosi się do wyglądu strony, ale jej logicznej zawartości. Przeglądarka tekstowa nie zwraca uwagi na wygląd strony, ale zaznacza w swoich wyświetlanych wynikach elementy semantycznie opisane. I tak nagłówki mogą zostać wyśrodkowane i napisane innym kolorem, tak by wyróżnić je od zwykłego tekstu. Akapity będę odpowiednio oddzielone, zawsze o taką samą odległością, niezależną od ilości wstawionych łamań linii, jak to uczy "stara szkoła", a słowa, które będą odpowiednio zaakcentowane (na przykład przy pomocy znaczników <em> lub <strong>) zostaną wyróżnione od reszty tekstu ułatwiając czytającemu szybkie wzrokowe odszukanie interesujących go zagadnień.

Semantyczne wyróżnienie pewnych słów lub zwrotów podpowie również, że to słowo lub zwrot faktycznie jest tematem strony i nie wystąpiło w tekście przez przypadek. Jest to jedna z podstawowych reguł pozycjonowania, niestety bardzo często zapominana.

Zdarza się, że projektant nie myśląc o semantycznym zapisie, a skupiając się tylko na stronie wizualnej tworzy na przykład menu, które w graficznej przeglądarce wygląda tak, jak sobie zamierzył, a w przeglądarkach tekstowych, pajączkach i programach do czytania z ekranu jest to po prostu zbitka liter nie mająca większego sensu, powstała z połączenia wyrazów tworzących menu. Ciężko jest stworzyć coś takiego posługując się tylko zaleceniami "starej szkoły", jednak już osoby pod wpływem "pośredniej szkoły" są w stanie zrobić coś takiego. Przykład? Proszę:

<a href="plik1.html">Strona główna</a><a href="plik2.html">Kontakt</a>

Z odpowiednim stylem:

a { display: block;
	float: left;
	width: 200px;	
}

W przeglądarkach graficznych pojawią się dwa linki w nowych liniach wyraźnie oddzielone od siebie. Jednak przeglądarka tekstowa wyświetli coś w rodzaju: Strona głównaKontakt. Rozwiązaniem tego problemu jest oczywiście semantyka, czyli, w tym przypadku, zastosowanie listy w sposób podobny jak w przytoczonym wcześniej przykładzie.

Krótko na koniec

Artykuł ten nie ma na celu opisania wszystkich zalet zapisu semantycznego, ani sposobów jego użycia. Opisuje tylko najważniejsze zalety takiego zapisu pomijając już rozważania na temat czystości i czytelności kodu, która rozumie się sama przez się.

Oczywiście dzisiejsze przeglądarki wciąż nie są idealne, ale takie też nigdy nie będą. Przy korzystaniu z zapisu semantycznego nie ma większych problemów z jego obsługą w przeglądarkach. Problemy niestety pojawiaja się w momencie, gdy chcemy obudowę wizualną dla dokumentu przy pomocy CSS. Jest to trudne i wymaga nieco przestawienia sposobu myślenia. Zdarza się również, że niektórych efektów nie możemy osiągnąć, a ich osiągnięcie w "starej szkole" było bardzo łatwe, choć błędne. Należy się wtedy zastanowić, czy bardziej zależy nam na formie, czy na treści.

Antylameriada.net - Krzysztof Sawicki