Luxusní podoba webu – skiny 1.

2. dubna 2003

•

Poprvé jsem se setkal s pojmem „skin“ u MP3 přehrávače. Dnes se pojem skin těší velké oblibě ve spoustě desktopových aplikací. Ptáte se, jak využít tento princip při tvorbě webu? A čemu všemu můžeme dát kůži? Vysvětlení vám podá tento seriál, na jehož konci si v PHP napíšeme počítadlo návštěvníků ála Winamp.

Možnost přizpůsobit si vzhled aplikace, ať již jde o aplikaci desktopovou na kterékoli platformě nebo aplikaci webovou, je mnohdy příjemná. V oblasti webových stránek takovou možnost implementujeme několika způsoby, které si zde postupně ukážeme. Jistě ne z legrace se apeluje na stránky každému přístupné. Však i já se dostanu do situace, kdy mám oči unavené a desetipixelové písmo mi v takovém případě činí obtíže. Ale ukážu i jiný příklad. Kupříkladu kurzovní lístek ČNB se mi může hodit ve zpracování určité kalkulace v tabulkovém procesoru. Ovšem dostat ho tam v podobě, v jaké chci, může být někdy problém (i pro člověka na uživatelské úrovni). Často nestačí myší označit a přenést data přes clipboard, jelikož webdesigner Xkrát zanořil prvek <TABLE> (čtenáře Intervalu to už ani nenapadne), čímž prakticky upřednostnil design před užitností prezentovaných informací.

Expertům CSS signature

Předpokládáme-li návštěvníka znalého webdesignu, není nic snazšího než zařadit do kódu stránky (jejíž vykreslení určujeme kaskádovým stylováním) do značky <BODY> atribut ID s hodnotou jménowebu-cz (například id="interval-cz"). Zkušenému uživateli tím umožníme upravit v jeho prohlížeči zobrazení těchto stránek podle jeho představ. Chytí se právě tohoto selektoru (v CSS #interval-cz), s jehož CSS redefinicí seznámí svůj prohlížeč. S nápadem zvaným CSS signature poprvé přišel Eric Meyer.

Ačkoli je uživatel znalý, není od věci napsání přehledné návodky pro snazší pochopení struktury naší XHTML stránky. Přímo k použití bychom také mohli dát jeden inspirativní příklad. A jelikož je tato možnost viditelná pouze z kódu stránky, mohli bychom dát o ní vědět i viditelně. Při kvalitní implementaci CCS2 lze touto technikou dosáhnout velice širokých možností, které by se s příchodem CSS3 posunuly ještě dále. Pro vyzkoušení jsem připravil příklad.

V ohnisku běžní uživatelé

Případ popsaný výše se nehodí pro běžného uživatele, ba i ten expert si někdy chce na internetu odpočinout. V takovém případě můžeme nabídnout jiné zobrazení stránky, případně umožnit přepnout styl zobrazení celého webu. Tentokrát musíme jiné zobrazení připravit a poté dát k dispozici přes přátelské rozhraní. K tomu účelu se hodí hypertextový odkaz (upoutat lze i vhodně volenou ikonkou) či formulářové tlačítko. Po kliknutí může dojít například k tomu, že hlavní menu, které předtím bylo interaktivně ovladatelné (client-side skript) a umístěné vlevo (se známým efektem rychlého prostoupení k podpoložkám v hierarchii)…

dynamické menu

…může být zobrazeno na samotném konci celé stránky a nebude už rušit při práci v dané aplikaci:

obrázek interpretace CSS v prohlížeči po přepnutí stylu

Na ukázku tohoto efektu, jež má na svědomí právě CSS, se můžete samozřejmě podívat zblízka.

Samotné řešení otázky, jak přepínat stylové předpisy, může padnout na client-side skript (JavaScript, VBScript a podobně). Využít navíc můžeme cookie a udržovat zobrazení podle vybraného stylu pro všechny stránky webu, jak je psáno v článku Martina Snížka. Nebo padne řešení na server-side skript. Zde už nejsme daleko od realizace funkce personalizace. Klient si pak svůj vzhled nastaví pouze jednou a my mu jej servírujeme bez ohledu na počítač, u kterého sedí. Nevýhodou je obtěžující autentizace.

Layout stránky aneb jak na to s obrázky

Zatím jsem hovořil o přepínání celých CSS předpisů. Jsme na úrovni ovládání designu stránky, jejíž obsah známe. Řídíme tedy konečné zobrazení v prohlížeči (barvy, velikost písma…) celou silou, kterou nám poskytuje CSS. Když se podíváme na úroveň jednotlivých XHTML elementů, jsme schopni takto řídit zobrazení nadpisů (<H1>, <H2>…), odstavců, tabulek, seznamů (<UL>, <OL>), formulářových prvků a tak dále.

Prostřednictvím CSS nemůžeme zasahovat do obsahu obrázku. CSS nám dovoluje:

obrázek obtáhnout barvou libovolné tučnosti a rozšířit v horizontálním či vertikálním směru
pod obrázkem s částečnou průhledností, u něhož to má smysl (PNG, GIF), nastavit barvu pozadí
obrázek v dokumentu libovolně pozicovat (ať absolutně nebo relativně, rozdíl zde nehraje roli)
využitím CSS vlastnosti z-index úplně nebo částečně obrázek překrýt (blokovým elementem nebo jiným obrázkem)
přepnutím CSS předpisu obrázek ve stránce zaměnit za jiný

To je ve výčtu možností CSS vše, čím se lze nějak obrázku dotknout. Bude-li si uživatel přát přepnout zobrazení do červeného designu, řekneme OK – připravíme takovou deklaraci CSS, která patřičně obarví nadpisy, text odstavců, hyperlinky a nezapomeneme se odkázat i na červenou modifikaci obrázku loga služby. Na úrovni serveru máme možností více, můžeme generovat i odlišný tok XHTML kódu.

Ukážeme si řešení luxusního případu, kdy chceme dynamicky měnit obrázky. Inu, jak třeba vytesat jméno přihlášeného uživatele s náhodným denním symbolem do obrázku loga či na pozadí stránky? Myslím, že v této chvíli vás řešení už napadne samo. Určitě nebude webový grafik každému uživateli po registraci kreslit takový obrázek a následně ručně potvrzovat úspěšnost registrace. Technologií CSS se nám to zřejmě nepovede, proto ho budeme upravovat programově (automaticky) na straně serveru. Kdyby šlo jen o to, vytesat jméno uživatele do obrázku loga, vygenerujeme takový obrázek již při registraci uživatele do systému. Vznikne nám tím na serveru zvýšená spotřeba diskové kapacity, ale pravděpodobně dáme tomuto řešení přednost a vyvarujeme se vysokému zatížení serveru neustálým generování stejných obrázků – což by mohlo nastat v případě, kdy bychom obrázek generovali run-time při každém HTTP požadavku. My navíc chceme obrázek loga doplnit o specifický symbol dne. Nuže, vygenerujeme obrázky všech uživatelů každý den o půlnoci, nebo při prvním přihlášení v daném dni a cestu k jeho umístění na disku uložíme do modulu personalizace čili do DB.

Výše popsaný příklad můžete vzít jako inspiraci a použít ve své práci. Tímto jistě nekončíme. V příštím článku budu prezentovat analýzu problému, jak užít princip skinovatelnosti obrázků. Řekneme si požadavky na skinovatelný web a praktický příklad předvede počítadlo – jak jinak než skinovatelné.