Seriál Webdesignérův průvodce po HTML5

V předchozím článku jsme podrobně probírali třídy Blob, File a metody rozhraní FileReader. Ukázali jsme si, jak v prohlížeči otevřít soubor, předaný buď pomocí drag-n-drop, nebo pomocí INPUT FILE. V dnešním pokračování si ukážeme možnosti vytváření souborů v prohlížeči a jejich ukládání, jak na server, tak na místní disk.

Už několikrát jsme v článcích na Zdrojáku použili FileAPI, relativně novou součást webových technologií, která umožňuje číst, zpracovávat a ukládat soubory. V této minisérii se podíváme na nejrůznější nástroje a rozhraní, která využijete při zpracovávání souborů v prohlížečích, trochu podrobněji.

Možná znáte výrok: „Vesmír existuje, jen když se na něj někdo dívá“. Mottem dnes popisované novinky – Page Visibility API – by mohla být parafráze tohoto výroku, nějak takto: „Stránka pracuje, jen když si ji někdo prohlíží“. Jak to celé funguje a jaký to má praktický význam? Ukážeme si v článku.

S nástupem AJAXu a moderních prohlížečů se schopnostmi offline práce a s pokročilými JS API se stávají jednostránkové webové aplikace (single-page apps), tedy takové, kde je veškerá funkcionalita umístěna v jedné stránce a se serverem se pracuje jen prostřednictvím datového rozhraní, stále populárnější. Jejich použití ale přináší některé problémy.

Vývoj pro mobilní zařízení je v současnosti žhavým tématem. Letos poprvé překročily počty prodaných smartphonů prodeje klasických PC. Stále víc uživatelů používá k procházení webu mobilní zařízení, což klade nároky na vývojáře, kteří jsou nuceni své stránky upravit tak, aby byly použitelné i na těchto zařízeních.

FileSystem API řeší jeden ze zásadních problémů webových aplikací, kterým je nemožnost pracovat se soubory v uživatelově počítači. S tímto API, které nabízí zatím jen Chrome 9, může webová aplikace vytvářet, číst, procházet a zapisovat do bezpečně vymezené části uživatelova souborového systému.

Čtenář jistě promine kulturní narážku v nadpisu. Samosebou jde o implementaci metody drag-and-drop, tedy česky „táhni a pusť“. Podpora pro tuto metodu je totiž zahrnuta již do specifikace HTML5, takže už není potřeba k těmto účelům využívat JavaScriptových knihoven (i když se JavaScriptu nevyhneme).

Už jste se někdy přistihli, že si ukládáte informace k dalšímu zpracování k elementům do atributů rel nebo class? Pokud ano, máme pro vás skvělé novinky: v HTML5 si můžete uložit libovolné informace do vlastních atributů, které jsou pro toto použití přímo určené. Pojďme si ukázat, jak na to.

Seriál o novinkách, které přináší technologie HTML5 a na které se mohou vývojáři webů a webových aplikací těšit (nebo je už i používat), má už přes deset dílů. Je tedy nejvyšší čas na drobnou rekapitulaci, shrnutí probraného a určení témat do dalších dílů. A k tomu dostanete jeden drobný dárek od Marka Pilgrima.

V dnešním dílu našeho průvodce po vymoženostech, které vývojářům webových stránek nabízejí nové technologie z rodiny HTML5, se po oblastech poměrně slušně podporovaných a použitelných dostáváme na nejistou půdu novinek, které budeme moci použít možná za rok, možná vůbec ne. Vítejte ve světě HTML5 databází.

Jednou z největších nevýhod JavaScriptu je, že současné implementace provádí skripty v jednom vlákně. Pokud někde navrhnete příliš složitý výpočet (nebo uděláte chybu, která vyústí v zacyklení), přestane web reagovat a nezpracovává události vyvolané uživatelem. Řešit by to měl koncept Web Workers.

Technologie počítané do „rodiny HTML5“ zahrnují kromě nových elementů a API k funkcím jako je geolokace i možnost provozování offline aplikací, jak jsme si naznačili v minulém článku. Ovšem aplikační cache je jen jedna část offline aplikace. Druhá, neméně důležitá, je ukládání dat na straně klienta.

V dalším pokračování webdesignérova průvodce po technologiích z rodiny HTML5 si představíme nástroj, který umožňuje, podobně jako třeba Google Gears, provozovat webové aplikace i tehdy, když není uživatel online. To se – zejména ve spojení s mobilními zařízeními – opět ukazuje jako aktuální problém.

Sémantický web byl kdysi jen sen, nyní to vypadá, že tenhle sen budeme v příštích letech žít. A jistě bude spojen minimálně s jednou technologií z trojice Mikroformáty, RDFa či Microdata. O Mikroformátech i o RDFa jsme na Zdrojáku už psali. Zbývají Microdata – dítě editora Iana Hicksona, podle jeho slov takové „zjednodušené RDFa“.

V dalším pokračování seriálu o HTML5 se podíváme na jednu z novinek prakticky – vyzkoušíme si, jak lze pomocí HTML5 a elementu Audio vytvořit webový rozhlasový přijímač, který přehrává streamované vysílání rozhlasových stanic, a navíc si ukážeme, jak z takového přehrávače vytvořit samostatnou aplikaci.

Na většině webových stránek budeme po návštěvníkovi chtít, aby nám poskytl nějaké informace. Ať už je to poštovní adresa při objednávce u e-shopu nebo komentář na webu. Formuláře tu s námi jsou již dlouho a skoro stejně dlouho si webdesigneři přáli, aby toho uměly více. Naštěstí pomohl JavaScript a většinu chybějících věcí jsme si nějak dopsali. Podívejme se, jak HTML5 usnadňuje tvorbu formulářů bez potřeby JavaScriptu.

Naposledy jsme si užili teorie a povídali si o stavu implementace elementu <video>. Dnes to bude čistá praxe. Je čas, abychom základy z minula využili a nějaké video publikovali. (Důrazně doporučujeme přečíst si minulý článek, než začnete číst tento). Na závěr článku si doplníme vzdělání ještě o element <audio>.

V minulých týdnech jsme si povídali o tom, jak smysluplně označovat obsah stránek. Ale abychom vůbec mohli nějaký obsah označovat, musíme nějaký (nejlépe hodnotný) mít. Blogy (a psaní) už jsou z módy a tak musíme, chceme-li být in, natáčet a publikovat audio a video. Ovšem pro publikaci tohoto typu obsahu jsme donedávna potřebovali plugin v prohlížeči. Dnes se podíváme, jak kartami míchá HTML5, a na nový element <video>.

Další týden, další porce informací o HTML5. Dnes dokončíme přehled nových elementů, povíme si o několika změnách u některých starých známých a ukážeme si pár zjednodušení, které HTML5 vnáší do běžně používaných věcí.

V minulém díle jsme se podívali na základní principy, na kterých HTML5 stojí. Dneska se podíváme na to, s čím si ho mnoho kodérů spojuje – změny v sémantice, nové tagy a podobné věci. Představíme si šest sémantických tagů, kterými můžeme nahradit DIVy.

HTML5 je bezpochyby tématem číslo jedna většiny dnešních webdesignérských hovorů, sporů a diskusí. Proto jsme se rozhodli věnovat se mu zde na Zdrojáku, a to podrobněji a spíš z praktického hlediska, tedy „co můžeme začít používat a k čemu je to dobré“. V dnešním díle si ujasníme, o čem vlastně bude řeč.