sCarY words

Dla kogo to, co to i po co?

O praktyce rodzielania warstwy semantycznej i prezentacyjnej kodu (XHTML) pisano, pisze się i będzie pisać. Zapewne nic odkrywczego nawet nie stwierdzam, ale za przykładem ojca dyrektora ’sieję, sieję, sieję…’. Celem tego postu (a raczej pierwszego z cyklu) jest opisanie kilku dobrych praktyk i rozwianie kilku mitów.

“Łe? Strony na diwach?”

O wyższości layoutów opartych na divach nad tabelkowymi właściwie nie ma co tu mówić. Strony zbudowane w tej pierwszej technice zajmują mniej miejsca, posiadają bardziej czytelny kod i umożliwiają webmasterowi na znacznie prostsze i szybsze zarządzanie układem strony. Co do tego chyba większość profesjonalistów się zgodzi, nawet jeśli nie potrafi tworzyć inaczej, niz na tabelkach. Gorzej jest jednak, gdy do boju idzie neofita podjarany świeżo odkrytymi mozliwościami. Zatem kilka podstaw…

Filozofia

Główne zastosowanie stron internetowych praktycznie nie zmienilo się od stworzenia standardu WWW. Jest to oczywiście przekazywanie informacji i umożliwienie jak najłatwiejsze ich znalezienie. Służą ku temu linki i odpowiednie znaczniki odpowiadające z grubsza standardom stosowanym np. w poligrafii - nagłówki, tabele, słowniki etc. Do tego te specyficzne dla HTML (linki (a), ‘kodowe’ (code, pre) etc.). Niby takie proste, ale jak się okazuje, dla mało kogo. Kupa (w znaczeniu właściwie dosłownym) superfajnienowoczesnych stron to zdecydowany nadmiar divów, zwłaszcza w miejscach, gdzie należy użyć innego tagu. O (wydawałoby się banalnej) wiedzy nt. nagłówków wśród twórców w większości przypadków ciężko się dobrze wyrażać.

Przykład

Weźmy np. taki wm.pl. W h1 (nagłówek pierwszego stopnia) ujęte są zarówno nazwy menu (kronika policyjna, polecamy), nazwy sekcji (reklamy, wyszukiwarka), ale też i tytuł ‘najgłówniejszego artykułu’. O h2, h3, czy h4 autorzy najwyraźniej nie słyszeli. Polecam też sekcję’Pozdrowienia’, w której to każde nowe pozdrowienie jest otulone w div z określonym tym samym style’em. Nieświadomość istnienia tajemniczego tagu p zdaje się uwidaczniać tam, gdzie miejsca mieć nie powinna, czyli na stronie z danym artykułem. Tak, tak, br to jednak trochę nie to…

Zapowiedź

W następnych odcinkach ambitnie postaram się opisać mniej więcej, co i jak oraz z czym w tym łokropnym XHTMLu.

Tytułem przedmowy

‘Wracam’ po dłuższej przerwie, mam nadzieję, że na stałe (czyt. regularnie). Nowa praca, nowe sprawy na głowie etc - wiadomo ;). Będę się starał się mniej o polityce, a bardziej o czymś przydatnym. Zatem:

Problem

Jakiś czas temu przy tworzeniu kolejnej strony zapragnąłem mieć bardziej przyjazne linki. Należałoby zadać pytanie - co znaczy ‘przyjazne’? Odpowiedź jest prosta - takie, które nie są nieprzyjazne ;). Te z kolei to koszmarki, które przeciętny internauta widzi na codzień: index.php?page=0&prawa=0&strona=comment&go=355, bądź index.php?option=com_content&task=view&id=52&Itemid=84 i wiele innych linków tego typu, których miliardy w odmętach internetu. Link w takiej formie wielce niepraktycznym jest - nawet jesli zawiera w sobie faktyczną nazwę strony, do której prowadzi, jest ona zakopana w gąszczu znaków zapytania, ampersandów, cyfer i innych dziwnych znaczków. Jakże lepiej zamiast linku typu index.php?pageId=34&sort=3&order=1&userId=18, wyglądałoby coś w stylu uzytkownicy,3,1,18.htm, badz nawet uzytkownicy/stefan.htm? Poza oczywistymi walorami prezentacyjnymi (adres strony mowi cos o jej zawartości), dokumenty zwracane przez serwer w takiej postaci sa znacznie bardziej lubiane przez wyszukiwarki.

Ale jak to tak to?

Pierwsza myśl przechodząca prawdopodobnie przez głowę osoby zielonej w tym temacie to ‘kurczę blade, motyla noga, przecież nie będę tworzyć tysięcy statycznych plików HTML, żeby linki mieć ładniejsze. Od tego mam PHP, żeby samo się to robiło’. Rozumowanie jak najbardziej słuszne, ale ubogie o znajomość kilku sztuczek, a przynajmniej jednej poważnej. Mowa oczywiście o wspaniałym mod_rewrite z Apache’a. Po obszerniejsze informacje zapraszam na google. Z podstawowych rzeczy, które należy wiedzieć, wypada wspomnieć o konieczności włączenia w apache’u owego cudeńka. W httpd.conf musi się znaleźć dyrektywa LoadModule rewrite_module modules/mod_rewrite.so - w praktyce należy odhashować odpowiednią linijkę i tyle ;].

A dalej i konkretniej?

Oczywiście samo włączenie dyrektywy Apache’a to jednak trochę za mało, by się cieszyć superfajoskimi adresami. Kluczem do sukcesu jest stworzenie w katalogu głównym danej strony pliku .htaccess, w którym to należy wpisać RewriteEngine On. Dalej przychodzi czas na ustawienie danych reguł. Tutaj przyda się podstawowa znajomość wyrażeń regularnych oraz oczywiście wyobraźnia. To pierwsze, by wiedzieć, co się robi, a drugie - by zrobic to z sensem. Osobiście preferuję linki w postaci nazwaStrony,arg1,arg2.htm, ale jak ktoś woli może kombinować do woli z konfiguracjami typu nazwaStrony/arg1/arg2, co mi niekoniecznie się podoba, ale np. adres w postaci nazwaKategorii/nazwaStrony.htm sens już jakiś ma ;). Ok, tyle w teorii, w praktyce przykładowy plik .htaccess może wyglądać tak:

RewriteEngine On
RewriteRule ^([^-]+),([^-]+).htm$ index.php?page=$1&pageNo=$2 [L]
RewriteRule ^([^-]+).htm$ index.php?page=$1 [L]
RewriteRule ^([^-]+).htm_([^-]+)$ index.php?page=$1&sort=$2 [L]

(ścięło trochę, ale w kodzie strony całość :P)
Najczęściej używana reguła to oczywiście ta druga. Przekazuje ona do pliku index.php zmienną $_GET['page'] o wartości nazwy pliku .htm. Co dalej zrobi z tym index.php, to sprawa programisty :).

Uwagi

Przypadki szczególne to wszystko, co na stronie może wysyłać żądania do prawdziwych plików HTML. W praktyce wszelkie iframe’y, możliwe, że i skrypty AJAXowe. W jeszcze większej praktyce, problemy może robić np. FCKeditor, który z mieszczęsnego iframe’a korzysta. Problem trudnym nie jest - należy się zdecydować, czy “mod_rewrite’ować” .htm, czy też .html. Choć ten drugi ładniej wygląda, częściej sprawia problemy ;) - FCKeditor korzysta z plików o właśnie takim rozszerzeniu. Ustawiając dyrektywę na chwytanie .htm, problemów jak do tej pory nie mam :].

W ramach tworzenia pracy licencjackiej (a dokładniej - forum), doszedłem do punktu, w którym działało już wysyłanie oraz wyświetlanie postów. Do zaimplementowania został zatem BBCode. Jako, że w kwestii JavaScriptu i wyrażeń regularnych nie jestem zbyt lotny, stwierdzilem, że skorzystam z tego, co stworzyli już inni i dostosuję do swoich potrzeb. Kwestia czasu też była dosyć ważna (im szybciej tym lepiej ;])

Ze strony przeglądarki sprawa nie była przesadnie trudna. Napisanie samemu prostego edytora BBCode nie sprawiłoby mi większego problemu, ale szkopuł pojawiał się w momencie, gdy chciałem wstawiać tagi BBCode do zaznaczonego tekstu. Takich edytorów w necie było już znacznie mniej. Ja pozwoliłem sobie skorzystać z tego, który jest standardowo w systemie phpBB modified by Przemo. I tę część można zakończyć - reszta to kwestia przeróbki (xhtml, css).

Znacznie większy problem stanowiła dla mnie późniejsza konwersja BBCode->HTML. Wprawdzie teoretycznie nie problem znaleźć gotowe funkcje, jest też i generator. Wszystko oparte na wyrażeniach regularnych. I niby ok, pozostawał jednak pewien dosyć poważny problem - nie obsługiwały one zagnieżdżonych tagów tego samego typu. Wydaje mi się to nieco absurdalne, bo bardzo często na forach można zobaczyć wielokrotne cytaty. W każdym bądź razie, w polskim internecie nie udało mi się nic znaleźć (PEAR z biblioteką odpadał, bo nie jest ona dodawana w standardzie, a nie każdy administrator serwera spełnia życzenia klienta). Na stronach zagranicznych nie było wiele lepiej. Wprawdzie udało mi się znaleźć funkcję, która obsługuje zagnieżdżone cytaty, ale bez podania autora. Niedługo później jednak wyszukałem zwycięzcę. Jest nim biblioteka Advanced BBCode.

Stosuje się to bajecznie. Z paczki potrzebne są tylko 2 pliki - abbc.cfg.php i abbc.lib.php. Tam, gdzie będzie używany BBCode, należy zinclude’ować drugi z nich, a następnie potraktować dany łańcuch znaków funkcją abbc_proc, np:

$post=abbc_proc($post);

Sporo tagów BBCode jest już wbudowane (zdefiniowane są w pliku abbc.cfg.php), ale ich modyfikacja, bądź dodanie nowych nie stanowi większego problemu - można kombinować do woli ze znacznikami i stylami, czyli wszystko schludnie i ładnie, jak należy - polecam, jak ktoś będzie potrzebował :)