Ogród Zen to projekt, który od 2003 r. skutecznie promuje praktyczne zastosowania CSS, pokazując sile, jaka tkwi w tym, wydaje się, niezbyt rozbudowanym języku. Przedsięwzięcie stara się jednocześnie udowodnić, że warto dbać o standardy sieciowe i zgodność z przeglądarkami.
Ogród Zen (ang. Zen Garden) tylko pozornie nie ma nic wspólnego z japońskimi
ogrodami, w których zamiast drzew i zieleni, oświadczymy kamienie i biały żwir.
Sztuka Zen wywodzi się z buddyjskiej sekty o takiej samej nazwie. Jej założeniem
jest osiągniecie mistrzostwa w dyscyplinie i zbliżenie się do oświecenia poprzez
medytacje. Twór, jakim jest ogród Zen, ma wiec stanowić swojego rodzaju
inspiracje i poprzez to zmuszać do refleksji. Taki jest też projekt, który
zaprezentował David Shea, grafik, projektant stron internetowych.
Zen Garden to zbiór projektów witryn internetowych, w których szczególna uwagę położono na
zgodność ze standardami sieciowymi. Zgodnie z ich założeniami, witryna
internetowa ma składać się z dwóch niezależnych części: definiującej treść
(dokument XHTML) oraz definiującej wystrój graficzny (arkusz stylów CSS).
Gdy
Shea rozpoczynał projektowanie ogrodu, sztuka tworzenia witryn internetowych
pozostawała na rozdrożu. Witryny tworzone na jedna z przeglądarek internetowych,
na drugiej zachowywały się całkowicie nieprzewidywalnie. Jedyna technika
projektowania witryn polegała na zagnieżdżaniu tabel. Uzyskany w ten sposób
efekt pozwalał tworzyć witryny, które w dość precyzyjny sposób oddawały
zamierzenia projektantów.
Tworzenie witryny w ten sposób ma jednak zasadnicza
wadę. Kod strony zaprojektowanej ta metoda jest długi i bardzo skomplikowany.
Ponowne sięgniecie do kodu oznacza konieczność zrozumienia całej jego struktury,
a nie tylko sekcji, która mamy zamiar zmodyfikować. Witryny oparte wyłącznie na
języku HTML miały też inna, dość poważna wadę.
Każda zmiana, nawet preferowanego
koloru odnośnika, wiązała się z koniecznością modyfikacji wielu znaczników.
Niestety, słaba obsługa kaskadowych arkuszy stylów przez przeglądarki sprawiła,
że CSS nie został zauważony i tym samym nie było mowy o poważnym potraktowaniu
go przez projektantów witryn. Jak każda nowa technologia, tak i CSS potrzebował
czasu i inspiracji płynącej ze środowiska.
Założenia projektu Zen Garden są proste. Otrzymujemy dokument XHTML, którego pod żadnym pozorem nie możemy zmodyfikować. Do niego projektujemy arkusz stylów i jeżeli nasz projekt jest
dobry, może stać się inspiracja dla innych. Gdy powstawał ten artykuł, Zen
Garden liczył sobie 979 projektów, z czego 192 zostały uznane za oficjalne.
Co najważniejsze, każdy może dodać własny projekt. Jeżeli mamy wystarczająco dużo
chęci i jesteśmy skłonni poświecić masę czasu na stworzenie projektu, udowodnimy
nie tylko sobie, ale także innym, że w projektowaniu stron WWW jesteśmy naprawdę
dobrzy. Powszechne są przypadki, gdy autor projektu Zen otrzymuje wiele
propozycji współpracy od klientów indywidualnych i agencji interaktywnych
dlatego, że jego projekt wybił się ponad przeciętność. Projekt w ogrodzie Zen to
dziś już nie tylko chęć rozwoju, lecz także element budowania swojego portfolio
i prestiżu własnej osoby.
Pamiętajmy, że w każdym projekcie powinno być coś
rewolucyjnego, coś, czego nie wymyślił nikt inny. Oczywiście, łatwiej
powiedzieć, trudniej zrobić, lecz to właśnie Zen Garden daje niepowtarzalna
szanse odkrycia nowych, ciekawych efektów, które można osiągnąć przy użyciu CSS.
Dzięki jednemu szablonowi strony dla wszystkich projektów projektanci mogą
rywalizować na równych warunkach i to czyni Zen Garden prawdziwym polem do
popisu. Choc strona główna Zen Garden mieści się pod adresem
http://www.csszengarden.com, pełna lista dostępnych projektów znajduje się na
http://www.mezzoblue.com/zengarden/alldesigns/.
Projekty oficjalne
Mimo że każdy może dodać własny projekt do zasobów Zen Garden, tylko te
najlepsze maja szanse stać się projektami oficjalnymi. Różnica miedzy jednymi a
drugimi jest zasadnicza. Projekty oficjalne są hostowane przez serwis
http://www.csszengarden.com, stad cały kod odpowiedzialny za generowanie wyglądu
strony znajduje się na oficjalnej witrynie. Ponadto projekty z grupy oficjalnych
są wyświetlane przez dłuższy czas na liście ostatnio dodanych projektów, wraz ze
screenem, podpisem autora oraz informacja o kraju, z którego pochodzi. Dla
projektów nieoficjalnych nie ma takiego podglądu. Projekty nieoficjalne są
znacznie rzadziej oglądane przez internautów i cieszą się mniejszym
zainteresowaniem.
Decyzje o dołączeniu projektu do grupy oficjalnych podejmuje
założyciel Zen Garden. Projekt taki musi charakteryzować szereg cech.
Najważniejsze z nich to innowacyjność i zgodność ze standardami (kod CSS musi
być poprawny, strona przejrzysta i łatwa w obsłudze – użyteczna i funkcjonalna).
Rodzaje projektowanych witryn
Wraz z powiększaniem się Ogrodu zaszła konieczność wprowadzenia podziału
na kategorie. Obecnie jest ich kilkadziesiąt.
Najważniejsze z nich to:
-
2 Column – układy 2-kolumnowe,
- 3 Column – układy 3-kolumnowe,
- Conceptual – związane bezpośrednio z idea Zen Garden,
- Garden & Floral – bazujące na naturalniej zieleni,
- Minimal – minimalistyczne,
- Special Effects – z ruchomymi efektami specjalnymi,
- Zen – klimaty japońskie,
-
Themes & Look-alikes Designs – szablony i witryny naśladujące design
innych serwisów, -
Official – do tej kategorii trafiają projekty oficjalne, nie podlegając już
dalszemu podziałowi kategorie.
Jak dodać własny projekt?
Zanim dodamy projekt do Zen Garden, musimy się upewnić w kilku sprawach.
Czy przetestowaliśmy swój projekt na wielu różnych przeglądarkach?
Powinniśmy. Czy nasz projekt pozwala na skalowanie czcionek
o 150% w przeglądarkach z silnikiem Mozilla? Musi. Czy przy rozdzielczości
800 x 600 pojawia się pasek przewijania w poziomie? Nie może.
Jeżeli na pytania odpowiemy zgodnie z żądaniami autorów, możemy wypełnić
formularz mieszczący się pod adresem: http://www.mezzoblue.com/zengarden/submit/. Projekty dodawane są z dużym opóźnieniem. Upewnijmy
się, że oddajemy projekt naprawdę dopracowany. Zapytajmy znajomych czy
podoba się im nasza praca i przygotujmy się, że nawet mimo wniesienia
ogromnego wysiłku, nasz projekt nie znajdzie się na liście oficjalnych. Warto
jednak sprobować.
Jak wygląda kod źródłowy HTML?
Tworzenie nowego projektu dla Ogrodu Zen rozpoczyna się od pobrania źródła HTML,
którego nie wolno modyfikować. Na jego podstawie budujemy kod CSS, który w
połączeniu z tym źródłem ma stworzyć kompletny projekt. W jaki sposób dodamy
grafikę, nie mogąc zmieniać kodu HTML?
Za pomocą CSS. Wszystkich operacji przy
projektowaniu dokonujemy wyłącznie na arkuszu stylów. Taka jest przecież idea
projektu. Pusty szablon znajduje się pod adresem:
http://www.csszengarden.com/zengarden-sample.html.
Aby rozpocząć prace, trzeba odnaleźć fragment:
W miejsce none wpisujemy nazwę arkusza stylów, nad którym zamierzamy pracować
(np. projekt1.css).
Przejrzyjmy dokładnie kod źródłowy. Znajdziemy tam
nadspodziewanie dużo niepotrzebnych znaczników oraz identyfikatorów. Ponieważ
nie wolno modyfikować kodu źródłowego, autor kodu postanowił dodać wiele
nadmiarowych znaczników. To z pewnością ułatwi projektowanie, bo łatwo uzyskamy
dostęp do każdej sekcji dokumentu. Jeżeli i to będzie za mało, spójrzmy na sam
koniec kodu:
To 6 dodatkowych pudełek na elementy dodatkowe – zdjęcia, które możemy następnie
wypozycjonować wewnątrz strony według własnych potrzeb. Kod źródłowy natchnął
jednego z projektantów do stworzenia jego graficznej mapy. Znajdziemy ja na rys.
Pomoże w szybkim przyswojeniu dostępnych w dokumencie elementów i ich nazw.
Jak zaprojektować CSS?
Projektowanie arkusza ogrodu Zen to wyzwanie samo w sobie, ponieważ
zmusza do operowania wyłącznie w obrębie dokumentu CSS. Gdy pojawiają
się problemy z poprawnym działaniem CSS, najczęściej sięgamy po dodatkowe
znaczniki HTML. Tu projekt nie popuszcza. Rozwiązania musimy szukać
wyłącznie wewnątrz stylów. Właśnie dlatego warto sprobować swoich sił
i podjąć wyzwanie, niekoniecznie zgłaszając efekt swoich prac na oficjalnej
witrynie projektu.
Co najważniejsze, problemy, z którymi się spotykamy prawie
na pewno zostały już rozwiązane. Poszukajmy innych projektów, w których
osiągnięto rezultat podobny do zamierzonego przez nas. Zajrzyjmy do
kodu CSS i przekonamy się, jak ten problem rozwiązał inny projektant.
Przykładowy arkusz stylów znajduje się pod adresem:
http://www.csszengarden.com/zengarden-sample.css.
W CSS chodzi o sztuczki
CSS w dużej mierze opiera się na swego rodzaju sztuczkach. Aby stworzyć
konkretny efekt, trzeba nierzadko posiłkować się \”okrężna\” składnia. Dostępne na
rynku przeglądarki niestety wciąż nie \”mówią\” wspólnym językiem. Szczególnie
widoczne jest to właśnie w technologii CSS, która została wprowadzona do
przeglądarek stosunkowo późno, w każdym przypadku z różnym poziomem integracji i
zmianami w stosunku do standardu (oficjalne informacje o standardzie CSS:
http://www.w3.org).
Zastępowanie tekstu grafiką
Zwróćmy szczególna uwagę na poszczególne nagłówki strony, np. \”The Road to
Enlightenment\”. W wielu projektach zauważymy, że zamiast tekstu nagłówka pojawia
się jego graficzny odpowiednik. To pozwala autorowi na dobranie dowolnej
czcionki bez ryzyka, że nie wyświetli się prawidłowo w przeglądarce
internetowej. Efekt, o którym mowa, nazywa się FIR (Fahrner Image Replacement) i
został szczegółowo omówiony w artykule Douglasa Bowmana mieszczącym się pod
adresem http://www.stopdesign.com/articles/replace_text/. Dzięki tej sztuczce
następująco wyglądający kod HTML:
The Road to Enlightenment
[..]
pozwala w efekcie wyświetlić element graficzny. Do arkusza stylów należy
dodać następujący kod:
div.id h3 {background-image: url(\"road_to_en.gif\");
background-repeat: no-repeat; height: 30px;}
div.id h3 span { display: none; }
Jak łatwo zauważyć, osiągnięcie efektu wymaga dwóch deklaracji. Pierwsza polega
na wstawieniu do nagłówka h3 elementu graficznego, druga – na spowodowaniu, by
zawartość tekstowa więcej się nie pojawiała. Ta sztuczka jest doskonała, bo mimo
zastosowania grafiki pozwala wyszukiwarkom przeanalizować zawartość nagłówka
(wciąż jest to tekst).
Także osoby niewidome nie będą miały większych problemów
z \”odsłuchaniem\” tak stworzonego nagłówka. Syntezator mowy również wykorzysta
tekst – grafika jest dla niego elementem nie do przeskoczenia.
Centrowanie kontenera
Problemem, który może nasunąć się podczas tworzenia arkuszu dla Ogrodu Zen może
być centrowanie kontenera div. Zadanie wydaje się tylko z pozoru proste. Kod
źródłowy kontenera prezentuje się następująco:
tekst
Naszym zadaniem jest wycentrowanie kontenera. W
przeglądarkach z rodziny Mozilla to łatwe – centrowanie odbywa się tu na
zasadzie przypisania wartości \”auto\” dla prawego i lewego marginesu kontenera.
Internet Explorer do osiągnięcia efektu wymaga wycentrowania zawartości całego
dokumentu. Metoda ta zmusza następnie do zmiany wyrównania zawartości wszystkich
elementów z powrotem do lewej strony. Cały kod CSS prezentuje się następująco:
body { text-align: center; }
div.container {width: 250px;
background-color: yellow;text-align: left; // IE
margin: 0 auto; // Mozilla
}
Książka o Zen Garden
Ogród Zen doczekał się książki na własny temat. Książka The Zen of CSS Design
została opublikowana na początku 2005 r. nakładem wydawnictwa Peachpit Press.
Autorami sa Dave Shea, pomysłodawca projektu, i Molly E. Holzschlag, autorka
kilkudziesięciu pozycji książkowych nt. projektowania witryn internetowych.
W
Polsce pozycje zdecydowało się opublikować wydawnictwo Helion. W połowie 2006 r.
ukazała się książka \”Źródło oświecenia dla projektantów stron WWW\”, która jest
tłumaczeniem wydania angielskiego. Książka została wydana bardzo luksusowo, na
papierze kredowym i w kolorze.
Zawartość skierowano do zaawansowanych
webmasterów, którzy świadomi swojej wiedzy chcą dowiedzieć się więcej o tym, jak
powstały najciekawsze projekty ogrodu. Tych udało się w książce zmieścić 36.
Jednak nie liczby świadczą o treści, bo czytelnik dowiaduje się wiele o
zaawansowanych sztuczkach, zagadnieniach związanych z typografia i sposobem
odbioru strony przez internautę.
Dużo uwagi poświecono wiec samemu zagadnieniu
projektowania – inżynierii projektowania, skupiając się bardziej na stworzeniu
idealnego układu, niż na przeczesywaniu i objaśnianiu linijek z kodem. Pod tym
względem pozycja ta jest unikalna.
Galeria projektów
Jak wyglądają projekty najlepszych? Prezentujemy 6 projektów oficjalnych, które
uznaliśmy za dobrze zaprojektowane i rzucające się w oczy. Nie
próbujemy oceniać żadnych z przedstawianych prac, stad brak komentarzy na ich
temat, zgodnie z łacińskim przysłowiem \”De gustibus non est disputandum\”.
Pozostałe, równie interesujące projekty można obejrzeć na witrynie
Mezzoblue.com.
Polski akcent
Wyzwanie stworzenia unikatowego projektu podejmują graficy z całego świata.
Niewielu udaje się przeforsować je do tego stopnia, by znalazły się w grupie
oficjalnych. Tym bardziej cieszy fakt, że w Ogrodzie Zen znalazł się także i
polski akcent. Michał Mokrzycki to jedyny polski autor, któremu udało się
stworzyć oficjalne projekty dla Ogrodu. Więcej o samym
autorze można znaleźć na jego witrynie: http://nf.hyperreal.info.
