Vzhled části webu podle aktuálního ročního období

V tomto článku si ukážeme další triky, které lze provozovat se systémovým datem a časem. Podíváme se na to, jak můžeme udržovat vzhled našeho webu aktuální vzhledem k ročnímu období, aniž bychom museli stránky pravidelně aktualizovat.

Co je vlastně aktuální vzhled stránek vzhledem k ročnímu období? Mnohé profesionální weby mění vzhled svých grafických prvků podle toho, jaké roční období je – dobrý příklad je třeba Seznam – jádro nadpisu zůstává zachováno, ale například na podzim pokryje nápis Seznam listí, v zimě sníh a podobně. Na velkých webech většinou bývá někdo, kdo se o takovou aktualizaci stará, pokud však chceme podobnou funkčnost docílit i na webu, na jehož správu nemáme mnoho času, nezbývá nám než sáhnout k nějaké automatizaci – a JavaScript je na to jak dělaný.

Poznámka: Jako u všech manipulací s datem a časem v JavaScriptu, funkčnost závisí na správném nastavení data v počítači návštěvníka – nezabráníme tedy tomu, abychom návštěvníkovi se špatně jdoucími systémovými hodinami tvrdili uprostřed léta, že venku mrzne, a podobným drobným nedopatřením.

Nejdříve ukázka práce takového skriptu na fiktivním serveru, kterému dáme název třeba AlfaBeta (opět se esteticky založeným čtenářům omlouvám za grafiku):

Vzhled uvedeného obrázku se mění v závislosti na denním čase a ročním období. Pokud vám nevadí manipulace se systémovým datem vašeho počítače, zkuste posunout hodiny o 12 hodin a datum o několik měsíců, a obnovte tuto stránku – obrázky by se měly změnit.

Povedlo se? Mělo by – použité funkce pracují minimálně na Internet Exploreru od verze 4.0 a Netscape od verze 3.0. Podívejme se nyní, jak je to uděláno. Nejprve si ukážeme HTML kód, uvedený v místě, kde se má zobrazit obrázek:

Z uvedeného je vidět, že se nejedná o jediný obrázek, ale o tabulku se dvěma řádky a se dvěma obrázky, zvlášť pro rozlišení denního času a zvlášť pro rozlišení ročního období. Důvod k rozdělení obrázku na dvě části je ryze praktický: snižuje počet obrázků, které je potřeba připravit (nemusíme připravovat všechny možné kombinace, ale pouze všechna období zvlášť a všechny denní doby zvlášť). Oba obrázky mají uvedenu vlastnost name – jsou pojmenovány kvůli snadné adresaci v obslužném skriptu.

Přepínání obrázků podle data a času zajišťuje následující skript – je vhodné jej uvést pod uvedenou tabulkou:

Kód opět není složitý. Nejprve zjistíme systémové datum, a vyextrahujeme z něj do zvláštních proměnných údaje potřebné pro rozhodování. Poté změníme první obrázek podle aktuální hodiny – zde rozlišujeme pouze den a noc, ale nic nebrání tomu podmínku rozšířit a přidat ráno, poledne, večer, půlnoc, před úsvitem a další. Následuje rozlišení ročního období; pro správnou funkci musí být proměnná obdobi nastavena na hodnotu nula již před podmínkou, nejlépe v deklaraci. Zkontrolujte si rovněž data začátku jednotlivých období.

Závěrem:

V kódu není nastaven žádný časovač, zajišťující opětovné volání funkce. Znamená to, že pokud návštěvník setrvá na jedné stránce několik hodin, potažmo měsíců, nebudou se mu po tu dobu měnit obrázky podle denního ani ročního období. Takové nebezpečí je ale, myslím, zanedbatelné.

Uvedený kód může změnit i více než jeden obrázek – nemusíme se tedy omezovat jen na nadpis, ale můžeme si připravit celou řadu grafických prvků a proměnit vzhled stránky daleko důkladněji.

Ačkoliv to v tomto příkladě není uvedeno, je vhodné jako výchozí obrázky (HTML kód: parametr SRC v tagu IMG) použít nějaké „neutrální“ – pokud má návštěvník vypnut JavaScript, nebo používá antikvární verzi prohlížeče, ke změně obrázků nedojde.

A konečně – u většiny skriptů na „překlápění“ obrázků bývá zvykem připravovat si všechny potřebné obrázky předem – „natahovat“ je do pomocných proměnných v rámci hlavičky stránky. Tady nic takového nepoužíváme, důvod je ten, že ke změně nedochází periodicky, a pouze u dvou malých obrázků, a tedy časové zdržení při načítání stránky lze považovat za zanedbatelné. Pokud bychom však používali větší obrázky, nebo větší množství, mohlo by jejich postupné načítání působit rušivě a před-příprava by tedy byla vhodná.

A to je pro tentokrát vše, přeji vám příjemný den.

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

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