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é.

Odkazy a zdroje

Umožněte uživateli zvětšit písmo na vaší stránce
Řízená sazba textu
Cookies a definované záložky ve stránce

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět