Internet przesiąknięty jest “stronami internetowymi” tworzonymi przez ludzi, którzy nie mają o tym zielonego pojęcia. Od razu napiszę tu, że ja nie twierdze, że robię strony idealnie, ale myślę, że mój XHTML i CSS są całkiem niezłe. Co najgorsze, są to często studenci 4-5 roku, których tak nauczyli wykładowcy. Od razu napiszę, że nie generalizuje studentów. Raczej pije do wykładowców i tych ludzi którzy nie chcą sami zainteresować się tematem o którym się uczą. Ale to temat na osobny wpis.
Klienci nie wiedzą czego oczekiwać
Klient otwiera swoją nową stronę w swojej przeglądarce i jak widzą, że wygląda dobrze, to są szczęśliwi. Spora część z nich na szczęście wie, że istnieje wiele przeglądarek. Cześć z nich nawet testuje na nich strony. Ale większa część wierzy na słowo “specjaliście”. Kolejna porcja klientów chce pozycjonować swoją stronę. Ale ta sztuka jest dla przeważającej większości nich czarną magią. Nie wiedzą na przykład o tym, że strona musi być odpowiednio zbudowana (odpowiednio skonstruowany XHTML), żeby Google potrafiło prawidłowo zindexować (przeczytać) ich stronę i wiedzieć która treść strony co oznacza. Co jest nagłówkiem, co jest paragrafem, co jest listą a co menu.
Tak, w powyższym akapicie “pije” do stron na tabelkach. Język HTML powstał po to, żeby móc opisać treść dokumentu. Dzięki znacznikom (tagom) mamy dodatkowe dane o danych (metadane). Znacznik <table> służy do przedstawiania danych tabelarycznych, takich jak skoroszyt w Excelu, jest to po prostu.. tabela. Czy strona WWW jest tabelą? Nie, nie jest. Strona WWW jest zbiorem części, segmentów. A do tworzenia segmentów służy znacznik <div>.
Język HTML nie służy do tworzenia wyglądu strony. Strona WWW powinna być napisana tak, że po wyłączeniu szablonu stylu (CSS) będzie wyglądała prawidłowo i czytelnie. Właśnie w pliku CSS (Cascade Style-Sheet) definiujemy grafikę która nie jest częścią treści strony, tylko definicją jej wyglądu. Więc wszystkie tła, kolory, krój czcionki itd. znajdują się w pliku CSS.
Często w menu strony jest jakiś znaczek oddzielający poszczególne “linki” (kotwice, od znacznika <a> który znaczy anchor), takim popularnym znakiem jest |. Ale czy taki znaczek stanowi treść strony? Wnosi jakiś przekaz, treść, wiadomości? Nie. Dlatego powinien być zdefiniowany w pliku CSS. Dla znaku | jest to proste, wystarczy ustawić odpowiednio znacznik height i border.
Co do samego menu to są dwie techniki, albo po prostu piszemy “linki” po kolei w postaci: <a href=”" title=”"></a> <a href=”" title=”"></a> itd. albo tworzymy listę linków korzystając ze znacznika <ul> czyli “unsorted list”, a każdy link umieszczamy w <li> czyli “list item”. W drugim przypadku jest to czytelniejsze. A menu jest w pewnym sensie listą linków, spisem treści strony.
Kolejną rzeczą jest niedomykanie znaczników. W HTMLu to przechodziło, w XHTMLu nie. XHTML to XML HTML, czyli HTML który ma być pisany zgodnie z zasadami XMLa. W XMLu wszystkie tagi mają być zamknięte w odpowiedniej kolejności i muszą być pisane małymi literami, podobnie jak atrybuty w tych znacznikach. Trzeba pamiętać o zamykaniu znaczników “pustych” czyli np. <img> który powinien wyglądać tak <img src=”" alt=”" />. Pisanie /> na końcu jest równoznaczne z napisaniem <img></img>. Ale jako, że w treści znacznika <img> nic nie występuje (między <img> a </img> – cala treść jest w parametrach), to można go zamknąc w skrócony sposób.
A po co to wszystko?
W końcu jak strona wygląda dobrze, to kto by się przejmował, jak jest napisana nie? NIE.
Dzięki poprawnemu użyciu znaczników i pisaniu zgodnie z XHTMLem Google może łatwiej zindexować stronę. Wie w którym miejscu jest treść strony, wie co jest ważne, wie gdzie są nagłówki paragrafów – tytuły, czyli na co kładziony jest nacisk. Nie uważa całej strony za jeden wielki arkusz Excella. Strona napisana na <div> ach zajmuje mniej miejsca co oznacza mniejsze zużycie transferu na naszym koncie i oszczędność pieniędzy.
Dodatkowo jest to ułatwienie dla ludzi niepełnosprawnych, którzy korzystają np. z czytników do stron. Dla ludzi niewidzących nie jest ważne to jak strona wygląda, jest ważna jej treść. A jak cała treść będzie tabelką to czytnik strony się pogubi.
Mniej miejsca oznacza również mniejsze zapotrzebowanie na pamięć operacyjna przeglądarki gościa strony i mniejszy czas procesora potrzebny do wyświetlenia strony. Po prostu taka strona pojawia się szybciej w oknie przeglądarki.
Dzięki oddzieleniu opisu wyglądu strony od treści strony (styl w CSS, treść i jej budowa w XHTML) oszczędzamy na transferze danych. Plik CSS ściągany jest do gościa naszej strony tylko raz. A każde przejście na inną podstronę oznacza ściagnięcie przez klienta całej treści strony. Jeżeli styl strony jest w osobnym pliku, to treść strony jest odchudzona i oznacza to mniejsze zużycie transferu, za który w końcu płaci klient.
Poprawne zamykanie tagów oznacza, że przeglądarka nie musi “zastanawiać się” nad tym “co autor miał na myśli?”. Dzięki temu strona może wczytać się szybciej. Może dla współczesnych komputerów prędkość taka nie jest ważna, bo i tak strona pojawia się szybko. Ale dla urządzenia mobilnego (PDA, komórka, smartphone) to jest problem. Ich malutki procesorek musi przetworzyć całą masę informacji.
Klient tak naprawdę nie powinien musieć nic wiedzieć o tworzeniu stron WWW. Od tego są specjaliści, żeby się na tym znać i dostarczyć dobrą, pełnowartościową usługę. Ale niestety praktyka pokazuje, że jak chcemy coś zrobić, to też musimy się na tym znać. Ubolewam nad tym strasznie.
(ta notka napisana jest w oparciu o własne doświadczenia i o to, co często mówili mi moi klienci)