HTML+TIME

Sériál článkov pripravený pre časopis PC REVUE o rozšírení TIME (Timed Interactive Multimedia Extensions) webového prehliadača Microsoft Internet Explorer. Bolo zavedené v IE 5. Od IE 5.5 je k dispozícii druhá verzia TIME, ktorá implementuje podmnožinu odporúčania W3C SMIL (Worl Wide Web Consortium - Synchronized Multimedia Integration Language). Články opisujú TIME 2, a teda aj SMIL.

---

Obsah

1. Úvod
2. Jednoduchšie než skripty
3. Variácie nadpisu
4. Pohyb
5. Ladenie pohybu
6. Animované menu
7. Animované menu II
8. Filtre a premeny
9. Video s titulkami
10. Programové konštrukcie

---

Úvod do problematiky rozšírenia HTML pomocou TIME ukazujú jednoduché príklady. Zadaním hodnôt atribútov prvkov je možné dosiahnuť rôzne správanie prvkov na stránke.

• 01_Uvod/Nadpis_01.htm .. (kód)
  Zobrazenie nadpisu po dvoch sekundách na dobu troch sekúnd.
• 01_Uvod/Nadpis_02.htm .. (kód)
  Blikanie nadpisu - cyklus vytvorený prvkom seq.
• 01_Uvod/Nadpis_02a.htm .. (kód)
  Blikanie nadpisu - použitie parametra timeaction.
• 01_Uvod/Nadpis_03.htm .. (kód)
  Presun nadpisu s využitím prvku animateMotion.
• 01_Uvod/Nadpis_03a.htm .. (kód)
  Presun nadpisu s využitím prvku animateMotion a výpis polohy.
• 01_Uvod/Nadpis_04.htm .. (kód)
  Presun nadpisu s využitím prvku animateMotion - väzba pomocou id.
• 01_Uvod/Nadpis_04a.htm .. (kód)
  Presun nadpisu s využitím prvku animateMotion - väzba pomocou id; výpis polohy.
• 01_Uvod/Nadpis_05.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím prvku animateMotion.
• 01_Uvod/Nadpis_06.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím prvku animate.
• 01_Uvod/Nadpis_06a.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím prvku animate; výpis polohy.

^^

---

Porovnanie zabezpečenia pohybu v JavaScripte a v HTML+TIME.

• 02_XScript/01_animate.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím HTML+TIME - prvok animate.
• 02_XScript/02_marquee.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím neštandardného prvku marquee.
• 02_XScript/03_JavaScript.htm .. (kód)
  Nepretržitý pohyb nadpisu s využitím JavaScript.
• 02_XScript/04_JavaScriptN.htm .. (kód)
  Riadenie pohybu viacerých objektov skriptom.
• 02_XScript/04_JavaScriptN_a.htm .. (kód)
  Riadenie pohybu viacerých objektov skriptom, funkcia pre získanie objektu.
• 02_XScript/05_TimeN.htm .. (kód)
  Riadenie viacerých objektov s využitím HTML+TIME.

^^

---

V úvodnom článku sú príklady, ktoré "oživujú" nadpis. Tu je pokračovanie, ktoré ukazuje ďalšie "dynamické" variácie nadpisu.

• 03_Nadpis/Nadpis_07.htm .. (kód)
  Zmena veľkosti nadpisu.
• 03_Nadpis/Nadpis_08.htm .. (kód)
  Zmena farby pozadia nadpisu: attributeName="backgroundColor" to="yellow".
• 03_Nadpis/Nadpis_08a.htm .. (kód)
  Zmena farby nadpisu: attributeName="Color" to="white".
• 03_Nadpis/Nadpis_09.htm .. (kód)
  Zmena viacerých atribútov nadpisu - veľkost, farba pozadia.
• 03_Nadpis/Nadpis_10.htm .. (kód)
  Zmena textu nadpisu.
• 03_Nadpis/Nadpis_10a.htm .. (kód)
  Zmena textu nadpisu a výpis času.

^^

---

Príklady ukazujúce možnosti predpísania pohybu s rôznymi časovými charakteristikami (rovnomerný, zrýchlený, spomalený, nerovnomerný pohyb), ako aj s rôznymi plošnými charakteristikami (priamka, krivka, dráha = viac úsekov). Príklady sú v dvoch verziách - čistá a ladiaca. V čistej verzii sú iba príkazy predpisujúce pohyb, v ladiacej verzii (v názve súboru je _L) sa počas pohybu zobrazuje čas a poloha obrazu, po skončení pohybu sa zobrazí dráha a po kliknutí aj okno s časovým diagramom.

^^

---

Článok opisuje spôsob získania údajov o pohybe objektu na stránke. V predošlom článku to umožnilo vykreslť dráhu pohybu, časový diagram a vydať ďalšie doplňujúce údaje o pohybe. Ladiaca verzia príkladov má v názve súboru _L.

^^

---

Na príklade vytvorenia animovaného kontextového menu sú ukázané možnosti vzájomnej symbiózy HTML+TIME a skriptov vytvorených v jazyku JavaScript. V príkladoch tohto článku sú riešené čiastkové problémy - presun jednej položky menu, obsluha udalostí. Kompletácia čiastkových riešení, optimalizácia a vylepšenie riešenia bude v nasledujúcom článku. Podobne ako v predošlých dvoch článkoch, aj tu je ladiaca verzia skriptu - v názve súboru je _L.

• 06_Menu/Menu_01a.htm .. (kód)
  06_Menu/Menu_01a_L.htm .. (kód)
  Presunutie jednej položky z východzej polohy na cieľovú. Začiatok pohybu je po piatich sekundách a trvá 2 sekundy.
• 06_Menu/Menu_01b.htm .. (kód)
  06_Menu/Menu_01b_L.htm .. (kód)
  Obsluha udalostí jednej položky menu - presunutie položky menu na pozíu, kde používateľ klepne na pravé tlačidlo myši. Začiatok pohybu aj cieľovú pozíciu teda určuje používateľ. Pri prechode ponad položku menu kurzorom myši sa zmení farba jej pozadia. Klepnutie ľavým tlačidlom myši na položku menu vyvolaná obsluha udalosti.

^^

---

Čiastkové riešenia z predošlého článku sú skompletované do výsledného riešenia. Sú ukázané možnosti, ako riešenie vylepšiť.

• 07_Menu2/Menu_02.htm .. (kód)
  Kompletné riešenie - kontextové menu.
• 07_Menu2/Menu_03.htm .. (kód)
  Vylepšené riešenie - zjednodušenie zápisu položiek menu, zvýraznenie aktuálnej položky, dráha pohybu po krivkách.
  Tabuľka štýlov je v samostatnom súbore Menu.css.
  Do samostatného súboru Menu.js sú vyňaté aj skripty.
• 07_Menu2/Menu_04.htm .. (kód)
  Do menu je doplnená štvrtá položka.

^^

---

Filtre a premeny boli v prehliadačoch Internet Explorer umožnené rozšírením štandardných vlastností kaskádových štýlov, ktoré dovoľuje definovať filter ako vlastnosť štýlu. S využitím skriptov je možné volať metódy objektov zodpovedajúcich filtrom. Tak je možné dosiahnuť premeny na stránke. Rozšírenie HTML+TIME tieto premeny zjednodušuje - uberá na náročnosti skriptov. S výhodou je pri tom možné využiť prvok transitionFilter.

• 08_Filtre/filter_01.htm .. (kód)
  Použitie filtra Gradient.
• 08_Filtre/filter_02.htm .. (kód)
  Použitie filtrov Alpha a Emboss.
• 08_Filtre/filter_03.htm .. (kód)
  Použitie filtrov Shadow (tiene), Glow (žiarenie) a Wave (zvlnenie). Na text sú filtre uplatnené iba pri jeho absolútnej pozícii.
• 08_Filtre/premena_01.htm .. (kód)
  Premena jedného obrázka na druhý s využitím absolútnej pozície dvoch obrázkov a zmenou ich viditeľnosti. Premena je uskutočňovaná filtrom Spiral (odkrývanie nového obrázka sa robí po špírále). Tento filter je definovaný pre kontajner - prvok div, v ktorom sú obrázky. Funguje to pri absolútnych pozíciách.
• 08_Filtre/premena_02.htm .. (kód)
  Premena jedného obrázka na druhý zmenou hodnoty atribúta src prvku img. Použitý je filter Fade - postupné zoslabovanie starého a zvýrazňovanie nového obrázku. Na rozdiel od predošlého príkladu tu nie je vyžadovaný kontajner ani absolútna pozícia. Ukázané je využitie obsluhy udalosti onfilterchange. Je to použiteľné na zamedzenie možnosti odštartovania novej premeny, kým sa neskončí predošlá premena. V príklade je počas premeny zmazaný oznam - text pod obrázkom.
• 08_Filtre/TransFilter_01.htm .. (kód)
  Predošlé príklady ukazovali použitie filtrov a premien bez využitia rozšírenia HTML+TIME. V tomto a nasledujúcom príklade je do hry zapojený prvok transitionFilter z tohto rozšírenia.
• 08_Filtre/TransFilter_02.htm .. (kód)
  Z rozvíjacieho zoznamu je možné zvoliť typ filtra. Na začiatku zoznamu sú filtre, ktoré sú definované v SMIL, na konci - filtre z rozšírenia kaskádových štýlov pre IE. Tie sa dajú rozpoznať podľa zátvoriek za názvom filtra v zozname.

^^

---

Multimédiá sa k nám dostávajú rôznymi kanálmi. Jedným z cieľov tvorcov SMIL - odporúčania W3C - bolo zabezpečiť možnosť, aby sa multimédiá k nám dostávali aj prostredníctvom webu. Je na to určené HTML+TIME, ktoré implementuje prvok media - umožňuje použiť na stránke multimédiá. Postupnoť príkladov ukazuje spôsob zabezpečenia možnosti prehrávania videa. Do kódu pre jednoduché prehratie videa sa postupne dopĺňajú možnosti, aby prehrávanie bolo možné ovládať a aby bolo sprevádzané výpisom titulkov. Treba poznamenať, že v čase vytvárania tohto príspevku v slovenskej časti Internetu nie vždy a všade boli dostupné také zdroje, ktoré by dokázali prehrať s prijateľnou časovou odozvou 640 KB súbor 12 sekundového video záznamu. A tak začiatok prehrávania videa môže byť oneskorený :-(

• 09_Media/media1.htm .. (kód)
  Prehratie videa.
• 09_Media/media2.htm .. (kód)
  Do predošlého príkladu sú doplnené riadiace tlačidlá pre odštartovanie, pozastavenie, pokračovanie a skončenie prehrávania.
• 09_Media/media3.htm .. (kód)
  Povolovanie a zakazovanie tlačidiel podľa aktuálneho stavu práce s videom.
• 09_Media/media4.htm .. (kód)
  Iné riešenie povolovania a zakazovania tlačidiel podľa aktuálneho stavu práce s videom.
• 09_Media/media5.htm .. (kód)
  Doplnené vypisovanie času od štartu videa a času prvku media. Treba si všimnúť, že počas pozastavenia videa sa čas prvku media nemení - stojí. Uvedené riešenie umožňuje zistiť časové okamihy pre výpis sprievodného textu - titulkov.
• 09_Media/media6.htm .. (kód)
  To isté čo predošlý príklad, ale namiesto priameho zápisu príkazov v hodnote atribútu onclick sú vytvorené obslužné funkcie tejto udalosti.
• 09_Media/media7.htm .. (kód)
  Nesynchronizovaný výpis sprievodného textu - titulky sa menia aj počas pozastavenia videa.
• 09_Media/media8.htm .. (kód)
  Synchronizácia dosiahnutá sledovaním času prvku media. K tomu je vytvorená funkcia Stop.
• 09_Media/media9.htm .. (kód)
  Synchronizácia dosiahnutá špeciálnymi atribútmi prvku media a vytvorením spoločného rodičovského prvku t:par. Prvok t:media je stanovený za riadiaci prvok synchronizácie - je master.
• 09_Media/mediaa.htm .. (kód)
  To isté ako predošlý príklad, ale namiesto prvku t:media je použitý prvok t:video. Prvky t:animation, t:audio, t:img, t:media,t:ref a t:video sú synonymá - majú rovnakú implementáciu. Ich význam je v tom, že kód je ľahšie čitateľný.

^^

---

Rozšírenie TIME značkovacieho jazyka HTML umožňuje urobiť dynamickými pôvodne statické vlastnosti prvkov - po určitom čase na definovanú dobu zmeniť hodnoty atribútov. Existujú viaceré konštrukcie, ktoré bez rozšírenia TIME treba robiť v skriptoch, napr. postupná, či paralelná zmena vlastností prvkov ba dokonca aj cyklus.

• 10_Prog/Set1.htm .. (kód)
  Zmena hodnoty atribútu prvku po dvoch sekundách od zobrazenia stránky na dobu troch sekúnd.
• 10_Prog/Set2.htm .. (kód)
  Zmena hodnoty atribútu prvku po klepnutí myšou.
• 10_Prog/SeqSet1.htm .. (kód)
  Po sekunde trvalá zmena šírky a po ďalšej sekunde dočasná zmena farby pozadia prvku div.
• 10_Prog/ParSet1.htm .. (kód)
  Paralelná zmena šírky a farby prvku div po klepnutí na 3 sekundy.
• 10_Prog/ParSet2.htm .. (kód)
  Paralelná zmena šírky a farby prvku div po klepnutí. Zmena farby oneskorená o jednu sekundu.
• 10_Prog/Cyklus1.htm .. (kód)
  Cyklus realizovaný pomocou prvku p, ktorému bolo prisúdené správanie v súľade s rozšírením TIME. Sedemnásťkrát vypíše čas.
• 10_Prog/Cyklus2.htm .. (kód)
  Nekonečný cyklus vypisovania času realizovaný pomocou prvku p, ktorému bolo prisúdené správanie v súľade s rozšírením TIME. Po klepnutí myšou opakovaná inicializácia prvku = začiatok plynutia času.
• 10_Prog/Excl1.htm .. (kód)
  Postupne sa ukážu obsahy štyroch prvkov, ktorým bolo prisúdené správanie z rozšírenia TIME. Časované prvky sú zaradené do obsahu prvku t:excl, čím je zaručená excluzivita ich zobrazenia - v danom čase bude zobrazený obsah iba jedného prvku.
• 10_Prog/Excl2.htm .. (kód)
  To isté ako predošlý príklad, ale nie je použitý t:excl.
• 10_Prog/SlideShow1.htm .. (kód)
  Jednoduché riešenie prezentácie obrázkov - prvok img má rozšírené správanie podľa TIME, a tak sa dá využiť jeho časovanie. Použitý prvok t:seq zabezpečuje postupné vykonávanie viacerých prvkov img.
• 10_Prog/SlideShow2.htm .. (kód)
  Pre prezentáciu obrázkov je použitý prvok t:img z rozšírenia TIME. Riešenie je podobné ako v predošlom príklade, ale tu je k obrázkom doplnený sprievodný text.
• 10_Prog/SlideShow3.htm .. (kód)
  Použitie filtrov umožňuje dosiahnuť rôzne efekty pri otváraní obrázkov.

^^

---