Semantyczna sieć a webdevelopment

10 listopada 2012

Na początku powinienem się do czegoś przyznać, oświadczenie to idealnie mogą odzwierciedlać słowa utworu „Nie jestem punkiem” pana Dariusza Paraszczuka, co w moim wykonaniu zabrzmiałoby jakoś tak:

Nie jestem webdeveloperem i nigdy nie byłem,
i nigdy tego przed wami nie kryłem.
Nie jestem webdeveloperem, co nie oznacza,
że nie popieram lub mi uwłacza.

Nie jestem webdeveloperem i być nie chciałem,
bo się po prostu nie nadawałem.
Więc skojarzenia są bezpodstawne,
nie sprawiedliwe no i zabawne.

Nie jestem webdeveloperem i nigdy nie byłem,
chociaż go czuję i blisko z nim żyję.
Nie jestem webdeveloperem i być nie mogę,
bo inną w życiu obrałem drogę.

To tyle w tej kwestii wstępnego wyjaśnienia. Nie jestem webdevelperem i nigdy nie byłem, co nie oznacza, ze nie miałem z nim do czynienia i nie znam wielu panujących w tym środowisku standardów oraz dobrych praktyk. Chciałbym się jednak podzielić swoimi odczuciami, uwagami, jakie mnie od jakiegoś czasu nachodzą, a momentami nawet dręczą.

Co jakiś czas, gdy z jakiś powodów, głównie nie zależnych ode mnie, wracam na krótką chwilę do „webowego developmentu”, staram się poznać trendy i zmiany, jakie zaszły w tym środowisku od ostatniej mojej styczności. A zmiana zawsze jest dużo, środowisko i trendy panujące w sieci szybko się zmieniają i ewoluują. Powstaje dużo narzędzi ułatwiających prace webdeveloperom – kiedyś nikt nawet nie śnił o takich inicjatywach jak HTML5 Boilerplate czy Twitter Bootstrap. Standardy i specyfikacje się rozszerzają, coraz więcej (jak nie wszystko) da się obecnie zrobić w przeglądarce za pomocą HTML5, CSS i JS. A kiedyś trzeba było stosować różne sztuczki i kruczki…

Za każdym razem odczuwam, ze w sieci nadal panuje wielki burdel. Od dawna próbowano zbudować lepszy web, XHTML miał pomóc zunifikować kontent pałętający się po sieci, ułatwiając jego przetwarzanie, a także rozdzielając widok od treści za pomocą CSS-a. Mimoz iż, mamy obecnie HTML5, ludzie nadal nie potrafią dobrze z niego korzystać. Semantyczna sieć przyszłości chyba nadal jest mrzonką, gdy ponad połowa sieci i developerów ma ją w głębokim poważaniu.

W latach 90 i na przełomie milenium borykaliśmy się z falą budowania stron i aplikacji z niepoprawnym wykorzystaniem elementów języka HTM i CSS, głownie objawiającym się bazowaniem na tabelkowych layoutach. Wyrośliśmy z tego, przeszliśmy ku większemu rozdzieleniu treści i wyglądu, poprawniejszym wykorzystywaniu tagow HTML-owych, zgodnie z ich przeznaczeniem, poznaliśmy podstawy semantyki, a developrzerzy nauczyli się, że tabelka służy do prezentacji tabelarycznych danych, a nie traktowania jako fundamentu dla całej strony. Do tego nadają się inne elementy, takie jak kontenery – div.

Mimo, iż obecnie aplikacje webowe i witryny budowane są z wykorzystaniem bardziej odpowiednich elementów i narzędzi, chociażby div i css, to tamten problem odrodził się w nieco innej odsłonie.

Uwidacznia się on tym, że pomimo ładnego sklejania strony na divach, semantyka nadal kuleje. Ponad większość stron dostępnych w sieci zawiera niezłą papkę tagów. Tym razem treść opakowana jest nadmierną ilością kontenerów i class css-owych – ot nowy wymiar sieci. Twory takie posiadają zerową użyteczność, pomimo tego, że całościowo i wizualnie prezentują się bardzo ładnie, a nawet oszałamiająco.

Używanie diva jako jedynego taga, którym emulujemy inne elementy jest chore. Wiele razy spotkałem się ze stronami, gdzie to właśnie kontenerami budowano wszystkie możliwe konstrukcje, często zbiżone do list, czy tabelek. Jeśli dane reprezentują listę powinno się wykorzystać dedykowane do tego elementy dostępne w HTML, przecież mamy od groma różnych typów list. Podobnie z tabelkami, tabelki nie są złem, analogicznie jak konstrukcja goto w językach programowania. Trzeba tylko wiedzieć jak ją dobrze wykorzystać. Niestety, niektórzy chyba mają problem z rozróżnieniem danych i usilnie pakując je w kontenery przedstawiane w formie tabelki.

Braki w semantyce implikują problemy z użytecznością. Zupa tagowa, brak odpowiedniej struktury strony, z nagłówkami i paragrafami… dla osób, którzy z różnych powód nie korzystają lub nie widzą efektu działania styli CSS, je wyłączyli lub korzystają z sieci poprzez odpowiednie czytniki (niewidomi), z takiej strony niczego się nie dowiedzą. Strona taka, jej kontent wygląda dla nich jak zlepek zdań, wyrazów, czasem nawet nie mających sensu (vide dane tabelaryczne prezentowane w tabelce zbudowanej na divach).

Myślenie nie boli„, ale wystarczy tylko tyle, wystarczy się zastanowić. Weźmy sobie jako przykład logo firmy w nagłówku strony, które w większości przypadków jest odnośnikiem do głównej strony. O tym akurat wszyscy wiedzą i takie działanie przeszło już do kanonu. Podobnie jest z wpakowaniem tego obrazka do arkusza styli, a nie treści strony. To już jest plus, ale dlaczego od razy nie zawrzeć tego linka w nagłówku pierwszego stopnia, wskaże jest to elementem najwyższego poziomu w strukturze dokumentu? Idąc dalej, czemu nie dodać w tym linku lub nagłówku jakieś treści – nazwy strony, firmy. Treść tą następnie za pomocą prostych zabiegów w CSS można „wyłączyć” lub ukryć. Co to da? Da to wiele – strona zachowa swoją strukturę dokumentu, trochę semantyki, zwiększy usability, i wszyscy będą zadowoleni.

To wszystko jest naprawdę proste, wszystkie elementy odpowiadające za wygląd powinny się znaleźć w arkuszu styli CSS. Strona z wyłączonymi stylami powinna ładnie odzwierciedlać strukturę dokumentu oraz być użyteczna i nie ograniczać korzystania z jej zasobów.

Poprawna struktura strony jest podstawą, fundamentem. Należy wykorzystywać w niej odpowiednie do tego celu elementy języka HTML, takie jak header, h*, p, a article, section, footer itd… Dopiero po zbudowaniu odpowiedniej struktury dokumentu, przystępujemy do konstruowania i dostosowywania arkusza styli, aby taką prostą i przejrzystą stronę przedstawić według założonego projektu designu i layoutu. Ingerując w stronę jedynie za pomocą pomocniczych elementów takich jak div i span, jedynie tam, gdzię to jest faktycznie konieczne.

Nigdy na odwrót! Nie należy dostosowywać kontentu i struktury dokumentu pod wygląd. Oczywiście w pewnych znikomych sytuacjach, czasem nie da się wszystkiego załatwić CSS-em, czasem trzeba pewne większe elementy struktury strony odpowiednio ułożyć, ale takie sytuacje zdarzają się naprawdę rzadko.

Niestety w prawdziwym świecie, gdzie liczy się szyki zarobek i jak najmniejszy czas poświęcony na projekt, upłynie jeszcze wiele czasu, zanim cokolwiek się zmieni. Czy doczekamy się kiedyś semantycznej sieci?
Pocieszeniem może być to, ze niektórzy, w tym także wielkie firmy, dostrzegają problem, a zarazem potencjał w semantycznej sieci, i starają się tworzyć swoje dzieła zgodnie z ideą. Oby takie posunięcia były coraz częstsze, a ludzie tworzący siec starali się bardziej, ku lepszej przyszłości.

To na tyle w tej kwestii, obecnie tymczasowo pracuję jako webdeveloper przy prostej aplikacji webowej, a raczej webowego panelu oraz infrastruktury i serwisów/agentów nadzorujących i zarządzajacych, do farmy serwerów i chmury, od strony klienta i administratora, dla jednego z naszych projektów. Przy okazji rozwijając mój stary, prosty micro-framework, implementujący w jakimś stopniu MVC w PHP. Tutaj tez mnie zastanawia kilka kwestii, m.in. dlaczego nikt nie buduje modułów PHP w C/C++, które poprawiłyby wydajność wielu aplikacji webowych. Bo po co trzymać PHP-owy kod fundamentu (np. farmewroka, core, engine) i tracić na wydajności ciągłego jego przetwarzania, a nie zrobić tego natywnie. Przecież te fundamenty w danych projektach się prawie wcale nie zmieniają, są tylko wykorzystywane niczym zewnętrzne, trzecie elementy lub narzędzia.. Ale to inna bajka, o której opowiem następnym razem…

Przy okazji, powinienem odświeżyć kilka swoich stron skupionych wokół homepag’u, nie tylko wizualnie, ale także od strony kodu i kontentu. Może, wkrótce mi się to uda…

Podobne notatki:

Może zainteresują Cię również następujące, pododbne notatki:

Komentarze i nawiązania (2)

Kanał RSS komentarzy

  1. Buduje buduje :)

    http://www.yafdev.com/

  2. Znamy, znamy ;)
    Trafilem na niego przypadkiem, i to wlasnie on „otworzyl mi oczy”… i zmusi(l) do eksperymentow ze swoim tworem…

Dodaj swój komentarz

Możesz użyć tych tagów XHTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Jeśli chcesz wstawić kilku linijkowy fragment kodu, użyj tagów <pre lang="x"></pre> (gdzie x język kodu np. cpp, perl, html). W ten sposób kod zostanie odpowiednio sformatowany i pokolorowany przez system.

Uwaga!

Na tym blogu działa system cache oraz filtr antyspamowy. Twój komentarz może być widoczny na stronie z pewnym opóźnieniem. Proszę o cierpliwość. Jeśli utraciłeś już wszystkie jej zasoby poinformuj mnie o tym, być może system uznał Cię za spamera ;)