reklama

Tak sakra kde jsou ty HTML5 aplikace?

Kde jsou ty slibované komplexní webové aplikace, které budou prošpikované nejmodernějšími technologiemi z rodiny HTML5? Našli jsme několik specializovaných katalogů

Všechny současné prohlížeče soupeří o to, který z nich si co nejlépe poradí s HTML5. Nový standard webového jazyka skutečně přináší hromadu novinek a stejně tak přidružené technologie, se kterými si zatím pohrávají jen sami autoři prohlížečů. Do hlavy je nám neustále vtloukáváno, že co nevidět zahyne Flash Player a jeho práci převezme právě HTML5. Ostatně na tuto eventualitu se připravuje i samotné Adobe, které si už nějaký čas hraje s nejrůznějšími konverzními a exportními nástroji, jak z Flashe vyrobit standardizovaný HTML5 a tak dále.

Otázkou ale zůstává, kdy HTML5 konečně přijde a svou razancí zadupe do země veškerou konkurenci. Zatím se to neděje – posledních několik let je totiž synonymem aplikace s přívěskem „HTML5“ nějaký pěkný experiment, který je barevný, hýbe se, rotuje, dělá nejrůznější psí kusy, ale v podstatě je naprosto k ničemu.

Není všechno HTML5, co se pohybuje

I proto se dnes mnozí mylně domnívají, že HTML5 se hodí pouze a jedině na hry, které jsou zpravidla nejnázornějším médiem, jak novou technologii předvést širokým masám: Podívejte se, co to všechno umí. Tak tomuto se říká HTML5. Ti otrlejší pak za HTML5 vydávají i to, co s ním docela často nemá nic společného a jedná se „pouze“ o novinky z CSS3 a některou z mnoha populárních UI a ajaxových javascriptových knihoven v čele s jQuery. Možná jsme si trošku zvykli na to, že když se něco hýbe a „vypadá to jako Flash“, bude to nejspíš právě onen magický HTML5.

Ptám se ale znovu – kde ty všechny skvělé weby budoucnosti jsou? Odpovědí mi je pohled do historie Flash Playeru. Pokud si vzpomínáte na jeho počátky ještě pod hlavičkou Macromedie, tušíte, že byly v podstatě identické se současným HTML5. Flash Player se zprvu prosadil jako ideální médium pro přenos složitější animace, pro přenos interaktivity a... jednoduchých her. Teprve relativně nedávno s příchodem Flexu (technologie pro vývoj složitějších flashových aplikací) se konečně objevily první flashové služby a programy, které se starají třeba o vícevláknové nahrávání souborů na web (více souborů najednou a na pozadí), aplikace, které spravují nějaká data, aplikace, které tato data vizualizují a nakonec a především flashové multimediální aplikace, bez kterých se dnes neobjede žádný multimediální web včetně YouTube – sic má společně s dalšími i verzi v HTML5.

Kde jsou ty smysluplné HTML5 aplikace?

HTML5 je tedy na začátku cesty. Skutečných velkých aplikací, které by využívaly veškerých jeho možností, z nichž většina je stále ve stavu vývoje, je skutečně jako šafránu. Je to celkem logické. Překážkou zde není ani tak neznalost jazyka a nových technologií, jako spíše podpora prohlížeči a vskutku živý vývoj, kdy může validní kód vypadat jinak v dubnu a jinak v listopadu. Jen blázen by pak stavěl na HTML5 ekonomický startup, když může návrh standardu za pár měsíců vypadat zase trošku jinak a on jej bude muset opět upravit. Nedhledě na to, že kus kódu poběží pouze v Chromu a kus zase pouze ve Firefoxu. I proto se dnes nálepka „HTML5“ uvádí zpravidla pro ty případy, kdy web používá třeba jen SVG, Canvas (práce s grafikou uvnitř prohlížeče) nebo tagy audio a video, které se asi budou díky své praktičnosti šířit nejrychleji. Ostatně vložit do stránky kód:

<audio src="http://gigamania.zive.cz/audio/7635/tzive124.mp3" controls preload></audio>,

je mnohem snazší než používat některé prehistorické techniky vkládání zvuku, nebo právě některý z rozšiřujících pluginů.

Podporuje-li váš přehrávač tag audio a rozumí MP3, měla by se tu zobrazit ukázka (nebude fungovat ve Firefoxu, neboť Mozilla dlouhodobě ignoruje podporu licencovaných kodeků, kam patří i MPEG/MP3):

Pokud chcete zůstat v obraze, jak v současné chvíli vypadají plnohodnotné HTML5 programy – nikoliv jen experimenty a dema bez praktického využití a běžné služby, které si z jazyka vypůjčují jen některé nové technologie (audio/video), nemáte moc na výběr.

HTML5 Games

Jak jsem už psal výše, výhody a novinky HTML5 a jemu přidružených technologií lze asi nejsnadněji prodat skrze zábavu a multimédia. Bylo tomu tak i v případě Flash Playeru, takže se není čemu divit, že se právě na hry orientuje převážná část webů a vývojářů. Nakonec i čtenáři si už pomalu zvykají na to, že HTML5 jsou především hry. Jejich poměrně slušným katalogem je portál HTML5 Games, ve kterém najdete hry rozřazené do kategorií a můžete je odtud rovnou spustit. Pochopitelně nechybí ani nedávno uvedený Angry Birds.

Klepněte pro větší obrázek
Nejslavnější hrou napsanou v HTML5 bude asi na pár týdnů Angry Birds. Existují ale i lepší

Beauty of the web

Dalším příkladem je web Microsoftu, který Softies spustili v souvislosti s vydáním betaverzí IE9 loni v září. Dnes se plní medailonky partnerů, kteří za ty měsíce upravili své aplikace pro chod v IE9 právě s využitím některých podporovaných prvků HTML5 – zvláště Canvas. V současné době probíhá na webu mezinárodní soutěž Dev:Unpluggend o nejlepší HTML5 počin. Soutěžící si přínos HTML5 také vyložili především v kontextu herního průmyslu, takže dnes katalog obsahuje zejména hry a různé multimediální blbiny. Nás může potěšit fakt, že se do užšího výběru dostalo i české demo „červoidní plošinovky“ Cherveerium.

Klepněte pro větší obrázek
Hra z katalogu Beauty of the web: The fate of nation

HTML5 Gallery

Dost už ale bylo her, kde najít skutečné aplikace? Odpovědí může být třeba katalog HTML5 Gallery. I on se sice orientuje zejména na multimediální experimenty, vás ale bude zajímat kategorie Web App. Najdete zde desítky programů včetně velmi jednoduchého planetária. Doposud byste pro jeho vykreslení potřebovali nějaký Java applet, Silverlight nebo Flash Player, zvládne to ale i HTML5 a Canvas. Výhodou tohoto katalogu je i krátký popis, kde je často jasně řečeno, jaké technologie z rodiny HTML5 webová aplikace skutečně používá.

Klepněte pro větší obrázek
Planetárium napsané pomocí technologie Canvas

Chrome Web Store

Katalog aplikací pro prohlížeč Chrome je dalším příkladným katalogem HTML5 programů. Sice se orientuje na zmíněný prohlížeč, nicméně povětšinou platí, že se vám pouze nainstaluje odkaz na vcelku běžnou webovou aplikaci, kterou můžete spouštět v libovolném moderním prohlížeči. Mnohé z nich používají HTML5.

Canvas Demos

Sice jsem v úvodu psal, že se vyvaruji katalogům, které obsahují jen abstraktní a neurčitá dema, nicméně Canvas Demos si alespoň pohrává s použitelnými nápady. Katalog obsahuje hromadu aplikací a her roztříděných do kategorií, které používají prvek Canvas pro vykreslování grafiky na straně klienta – tedy přímo v prohlížeči. Nenajdete zde kompletní a hotové weby, ale vcelku zajímavé případy, kde se může HTML5 použít a jak to bude vypadat v praxi. – příkladem může být třeba TickerPlot, což je ukázka vizualizace interaktivního grafu. To je přitom poměrně častý případ, kdy se používá Flash Player (třeba v časové ose vývoje ceny akcií na webu Google Finance).

A nakonec ještě několik samotných projektů, které došly natolik daleko, že si zaslouží vlastní odstavec.

Foursquare Playground

Pokud hrajete Foursquare, jistě jste zvědaví, kdo se nachází ve vašem okolí. Playground to zjistí a okolní místa (venues) zobrazí podle jejich zařazení ve formě budov a ve stylu The Sims a jemu podobných her. Pokud v některé z budov někdo bude, uvidíte to a můžete se podívat, jestli to není třeba váš známý.

Klepněte pro větší obrázek  Klepněte pro větší obrázek
Playground zaujme všechny hráče Foursquaru – v podstatě je to kreslená mapa vašeho okolí

Největší Pac-man na světě

Legendární hru Pac-man z dřevních dob moderní výpočetní techniky asi netřeba představovat. Tato její verze je ale úplně jiná. Hraje se na klasické herní ploše, kterých je dnes ale obrovské množství (27 tisíc) a jsou navzájem propojené. Z jedné herní plochy tedy ve hře můžete přejít do druhé. Hra používá z HTML5 zejména tag audio a také vykreslovací techniku Canvas.

Klepněte pro větší obrázek  Klepněte pro větší obrázek
Největší Pac-Man na světě, skládá se téměř ze tří desítek tisíc navzájem propojených herních polí

What shall I do

Po Foursquare Playground a Pac-Manovi ještě jedna docela kontrastní služba – naprosto jednoduchý úkolovník What shall I do. Z hlediska HTML5 využívá vlastně jen jednu technologii – lokální paměť. I když tedy stránky opustíte a poté zase navštívíte, upomínky budete mít stále tam, kde mají být. Celý systém tedy funguje bez potřeby jakékoliv registrace. Aplikace používá CSS3 font, který bohužel nerozumí všem českým znakům.

Coolendar

A nakonec ještě jeden úkolovník. I ten je jednoduchý, už se ale umí synchronizovat s Googlem. V tomto případě se používá i exotičtější kalendářové API HTML5.

Klepněte pro větší obrázek
Coolendar je jednoduchý úkolovník se synchronizací s Googlem, zároveň ale používá některé prvky HTML5

Smallville.cz

Jako zajímavá ukázka využití nejnovějších technik může posloužit i český web Smallville.cz. Když jej navštívíte v kompatibilním prohlížeči (tím referenčním je Chrome), vše se roztočí a animuje a použije se lokální paměť prohlížeče, Flash Player zde ale nehledejte. Zajímavostí je jednoduché ovládání hlasem v základní navigaci s využitím hlasového API Googlu (opět Chrome). Pokud tedy dole klepnete na ikonu mikrofonu, schválně řekněte třeba „Galerie“.

Znáte některé další weby a zdroje aplikací, které ve větší míře využívají HTML5 a dalších technologií z této rodiny? Pochlubte se v diskuzi pod článkem.

Témata článku: Web, Technologie, Hudba, filmy, seriály, HTML5, Canvas, Angry, Playground, Audio, Pac Man, Angry Birds, Beauty, Birds, Demos, What, The Sims

74 komentářů

Nejnovější komentáře

  • no.667 20. 5. 2011 10:42:44
    Trapná úvodní obrazovka Angry Birds vytěžuje jedno jádro C2D T8100 na...
  • Jetelina 18. 5. 2011 13:28:26
    U nasazovní HTML 5 se krásně projevuje jak je těžké překonat zavedené...
  • Martin Hruška 17. 5. 2011 21:55:51
    Takže místo "optimized for internet explorer" tu máme "in latest chrome...
reklama
Určitě si přečtěte

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 133

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

Včera | Jakub Čížek | 91


reklama