Po několika výletech do nejbližšího okolí WWW, zaměřených na vytváření skriptů a přenosové mechanismy Webu, se vrátíme zpět k vlastním stránkám. Jubilejní desátý díl věnujeme konstrukcím, jejichž prostřednictvím lze stránky všelijak rozhýbat.

Přiznejme, že se jedná o prvky kontroverzní. Na jedné straně je jakýkoli pohyb, interaktivita či dynamika uživatelsky velice lákavá. Tohle je jedna z věcí, které radikálně odlišují počítačové nosiče informací od papírových. Na straně druhé se však nevhodné používání těchto konstrukcí snadno může zvrtnout. Hranice kýče je velmi blízko. Animace navíc mívají tendenci strhávat na sebe nadměrnou pozornost a odvádět uživatele od vlastního obsahu stránky. Proto buďte při používání pohybu na stránkách velmi opatrní.

Existence blikajících nápisů vzbudila bouřlivé reakce, směřující k jednoznačnému odmítání tohoto prvku. Všechna doporučení pro tvorbu stránek, která jsem zatím četl, se shodují na názoru: NEBLIKAT!

Jen výjimečně je některá informace natolik důležitá, aby si zasloužila takto silné zdůraznění. Například pokud na stránce publikujete oznámení o probíhající soutěži a blíží se termín pro podání přihlášek. Považujete-li onu soutěž za velmi atraktivní pro své čtenáře, lze na blížící se uzávěrku upozornit blikáním.

Naopak za příklad naprostého nepochopení lze považovat blikající nápis "Stránka je ve výstavbě". Samotná skutečnost zveřejnění nedokončené stránky je známkou pochybení ze strany autora. Pokud tuto skutečnost ještě zvýrazňuje, dělá zhruba totéž jako kdyby si na dveře pověsil veliký neonový nápis "Jsem trouba".

Obecná nevraživost vůči blikání se projevila i tím, že značka <BLINK> nepronikla ani do HTML verze 3.2, ani do jiných WWW klientů.

Pro přípravu animovaného GIFu potřebujete specializovaný program. Běžné nástroje pro práci z grafikou (jako je Adobe Photoshop či PaintShop Pro) vám poslouží při výrobě jednotlivých dílčích obrázků, výslednou animaci však vytvořit nedovedou. Jedním z volně dostupných produktů s potřebnými vlastnostmi je Microsoft GIF Animator. Nepatří sice ke špičce, zato je k dispozici zdarma, takže nic nebrání jeho použití. Pokud zatoužíte po programu s rafinovanějšími vlastnostmi, můžete sáhnout např. po PhotoImpactu firmy Ulead. Budete si však muset připlatit.

Vytvoření animovaného GIFu začíná přípravou jednotlivých dílčích obrázků, představujících jednotlivé fáze pohybu. Měly by být stejně velké a mají-li představovat pohyb jednoho objektu, měly by obsahovat i totožnou paletu barev. Druhý požadavek odpadá, chcete-li v animaci střídat obrázky nesourodé - například několik různých výrobků.

Když máte obrázky nachystány, spusťte GIF Animator (nebo podobný program). V něm nadefinujte pořadí, ve kterém mají být jednotlivé obrázky prezentovány. U každého z nich můžete zároveň zadejte, po jaké době (zpravidla v milisekundách) nahradí svého předchůdce. Tento údaj nenechávejte nevyplněný. Jinak by se mohlo stát, že se na výkonnějším počítači budou obrázky střídat tak rychle, až budou čtenáři oči přecházet. Speciální volba umožňuje animaci zacyklit.

Pokud se týče vnitřního uložení, není animovaný GIF skutečně nic jiného, než posloupnost obrázků. Jejich případné podobnosti se žádným způsobem nevyužívá při komprimaci. Proto očekávejte, že se výsledná velikost souboru nebude příliš lišit od součtu velikostí jednotlivých obrázků. Jedinou možnost úspory dává, pokud lze další obrázek získat z předchozího překreslením obdélníkové oblasti v něm (vně této oblasti jsou obrázky shodné). GIF 89 pak umožňuje uložit do souboru pouze tuto změnu a souřadnice, na které má být obdélník zakreslen. Některé animační programy (MS GIF Animator mezi ně bohužel nepatří) umí takovéto oblasti vyhledávat automaticky. Výsledná velikost souboru pak může dost razantně poklesnout.

Animované GIFy jsou velkým hitem poslední doby a ve Webu již začíná být přeanimováno. Pokuste se odolat pokušení a používejte je raději méně než více. Jsou akceptovatelné na prezentačních stránkách, které mají především upoutat pozornost a zaujmout čtenáře. Jakmile však pokročí k "seriózním" informačním stránkám, měl by pohyb mizet. Dopřejte uživateli klid na čtení.

Mnohem používanější, protože méně výrobně náročná, je metoda "klient táhne". Pro její účely byla použita nestandardní HTTP hlavička Refresh. Oznamuje klientovi, že po určité době má automaticky nahrát tutéž a nebo také zcela jinou stránku. Do stránky lze tuto instrukci vložit následovně:

<META HTTP-EQUIV="Refresh" CONTENT="10">

Refresh: 10

<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.jinde.cz/">

Ačkoli je tato metoda pro animaci použitelná jen se skřípěním zubů, přesto ji nelze zcela zatracovat. S výhodou se dá nasadit při stěhování. Na původním místě zanecháte krátkou stránku, oznamující nové URL informací. Je vhodné doplnit ji značkou <META>. Ta zařídí, že věci znalý klient sám přejde na správné místo. Uživatelé ostatních si budou muset přečíst oznámení o stěhování a přesunout se na nové místo ručně (prostřednictvím odkazu na stránce).

Druhá metoda pro animaci pomocí HTTP je nazývána "server tlačí". Spočívá v tom, že server pošle klientovi odpověď typu multipart/x-mixed-replace. Jedná se o typ, definovaný speciálně pro tyto účely. Data mají několik částí, které server posílá postupně. Klient musí každou část zobrazit, jakmile ji obdrží, a nahradit jí část předchozí. Díky tomu server může postupně posílat jednotlivé fáze animace a klient je zobrazuje tak, jak přicházejí. Základní nevýhodou je, že na straně serveru musíte mít odesílající program (zpravidla CGI skript). Málokdo je ochoten zatěžovat se jeho vytvářením, takže s tlačícími servery se v současném Internetu setkáte jen zcela výjimečně.

Jelikož problematika jazyka Java daleko překračuje rozsah našeho seriálu, nebudeme tuto stopu dále sledovat. Pouze vás odkážeme na výše zmíněný server Gamelan, kde můžete získat aplety pro nejrůznější účely.

Díky této těsné vazbě má JavaScript přístup k řadě součástí klienta. Umožňuje provádět věci, které jsou Javě nedostupné. Bohužel jeho podpora je ještě méně rozšířená, než v případě Javy. Na seriózní interpretaci programů v JavaScriptu se lze spolehnout jen u Netscape Navigatoru.

Pro vlastní animaci se tento jazyk příliš nehodí, jeho prostřednictvím však lze vytvářet některé zajímavé interaktivní prvky stránek. Do dnešního příkladu jsme zařadili aktivní tlačítka, která mění svůj vzhled, když nad ně uživatel přesune kurzor myši. Jelikož jsme se JavaScriptu dosud nevěnovali, berte dnešní příklad jako dogma. Pokusíme se jej popsat alespoň do té míry, abyste tyto prvky dokázali přenést na své stránky. Předpokládám, že každý, kdo někdy programoval, se dokáže v příkladu orientovat.

Základní myšlenka je velmi jednoduchá. Každému tlačítku jsou přiřazeny dva obrázky - jeden aktivní (myš je nad tlačítkem) a druhý neaktivní (myš je jinde). Funkce Vymen zajišťuje jejich střídání. Její první argument udává, zda má použít aktivní nebo pasivní obrázek. Druhý argument pak identifikuje, kterého prvku se výměna týká. Jeho hodnota se musí shodovat s atributem NAME odpovídající značky <IMG>.

Navázání funkce Vymen na tlačítko zajišťují atributy onMouseover a onMouseout značky <A> obklopující tlačítko. První udává jméno funkce, která bude vyvolána, když nad něj uživatel přesune myš. Funkce uvedená v onMouseout se naopak spustí v okamžiku opuštění tlačítka.

Zdrojový text JavaScriptu je uzavřen v párové značce <SCRIPT>. Aby se jím nenechali vyvést z rovnováhy starší klienti, je celý kód uzavřen do html komentáře, který začíná znaky <!-- a končí -->. Klienti, kteří nepodporují značku <SCRIPT>, budou celý jeho obsah ignorovat.

Inicializace obrázků pro jednotlivá tlačítka se provádí až v samotném závěru skriptu - v posloupnosti řádků

Tlacitko["index"] = new Tlacitko ( "zapnuto", "vypnuto", šířka, výška );

Chcete-li použít tuto techniku na své stránce, stačí vytvořit odpovídající obrázky a pojmenovat jednotlivá tlačítka. Jména se musí objevit v inicializaci tlačítek na konci skriptu a volání funkce Vymen v atributech onMouseover a onMouseout jednotlivých tlačítek. URL obrázků pak použijete jednak při inicializaci tlačítek, jednak ve značkách <IMG>.

Otevře-li stránku uživatel, jehož klient nepodporuje JavaScript, nestane se žádné neštěstí. Tlačítka pouze nebudou reagovat na pohyby myši. Uživatel uvidí jen jejich vypnutou tvář, která je uvedena ve značkách <IMG>.