Slyšeli jste všechny zvěsti o tom, že HTML5 převezme vládu nad Adobe Flash. Většina webové komunity se sice hádá, jestli je to možné, nebo ne, ale určitě vás zajímá, co dělá HTML5 tak mocným, že ho chce použít i obří společnost Apple, aby nahradila Flash.
Proto existuje tento příspěvek, nebudeme mluvit o tom, co HTML5 umí, ale ukážeme živé ukázky kouzelných věcí, které HTML5 dokáže s jinými jazyky, jako je JavaScript, takže se připravte na inspiraci.
Poznámka: Vzhledem k tomu, že HTML5 není plně podporováno některými webovými prohlížeči, jako je Internet Explorer, důrazně vám doporučujeme používat prohlížeč Firefox, abyste si mohli prohlédnout všechny níže uvedené ukázky HTML5.
Animace
Prvek canvas v HTML5 je rozhodujícím faktorem pro to, aby HTML5 nahradilo některé animace Flash. Umožňuje vytvářet dynamické, skriptovatelné vykreslování 2D tvarů a bitmapových obrázků pomocí Javascriptu, což jinými slovy znamená, ovladatelnou animaci.
Audioburst Animation
Pohodlná a fantastická animace vytvořená pomocí prvku canvas a zvukové značky HTML5.
Ball Pool
Tato ukázka, která byla předvedena na poslední akci Google I/O, vám ukáže, jak dynamické může být HTML5.
Blob Sallad
Tvor splácaný z HTML5, který by vás potěšil.
Bomomo
S Bomomo můžete pozorovat různé pohyby atomů simulované pomocí HTML5.
Browser Ball
Nechte se ohromit touto „cross-browser“ koulí HTML5.
Bubliny
Zabavte se vytvářením nekonečných plovoucích bublin s různými barvami.
Kreslená animace plátna
Jednoduchá a zábavná kreslená animace HTML5, která vám pomůže pochopit, co umí prvek plátno HTML5.
Coolclock
Pěkné, přizpůsobitelné analogové hodiny vytvořené pomocí HTML5 a JavaScriptu.
Flickr PS3 Slideshow
Prohlížejte si fotografie z Flickru pomocí slideshow ve stylu PS3 ve webovém prohlížeči.
Interaktivní Polaroid
Interaktivní ukázka, která funguje dost podobně jako vícedotykové rozhraní.
JS ohňostroj
Vychutnejte si okamžik ohňostroje s preferovanou gravitací a rychlostí, který pohání HTML5 a Javascript.
Kaleidoskop
Velmi krásný a futuristický kaleidoskop HTML5.
Tekuté částice
Citlivá animace částic, která reaguje na základě pohybu myši.
Mesmerizer
Další citlivá a vynikající ukázka HTML5, která ukazuje, jak blízké prvky reagují na váš pohyb myší.
Mlhovina
Ztratíte se s touto podivuhodnou mlhovinou HTML5.
Paralaxa
Zobrazte všechny 2D tvary v paralelní perspektivě.
Částicová animace
Elegantní částicová animace HTML5, která se může zformovat do vámi preferovaného sdělení.
Rozprostření
Ztratíte se s touto nekonečnou animací rozprostření.
Hvězdné pole
Velmi povedená animace hvězdného pole HTML5, která by měnila směr a rychlost podle pohybu myši.
Video Destruction
Jedním kliknutím rozbijete přehrávané video.
Vlnobití
Sledujte, jak se pohybuje vlna na plátně HTML5 změnou její amplitudy, vlnové délky, šířky atd.
3D efekt
Potlačí vás animace na plátně? To je více, co umí prvek canvas v HTML5, a říká se tomu 3D efekt. Vývojář se může spolehnout na prvek canvas, DOM a JavaScript a vytvořit 3D efekt, který může později rozvinout do 3D animace nebo hry.
Canvas3D a Flickr
S fotostreamem Flickr získáte zcela nový 3D zážitek.
Simulace látky
Realistická simulace látky založená na HTML5.
Vyvíjející se příšera
Sledujte příšeru vyvíjející se ve složitého tvora, jedním z jejích tvůrců je HTML5.
Google Giftbox
Obří vyhledávač Google je prezentován ve 3D hratelném zobrazení.
JS Touch
Vysoce kvalitní a realistická ukázka „3D na 2D plátně“.
Prezentace dat
Přestože lze prvek plátna v HTML5 použít k vytváření animací a 3D efektu, lze jej implementovat také k prezentaci matematických dat.
Gnuplot
Gnuplot, aplikace pro vykreslování dat ve verzi HTML5.
RGraph
RGraph poskytuje širokou škálu možností prezentace dat, například sloupcový graf, ukazatel průběhu a tradiční radarový graf.
Webová aplikace
Koneckonců s využitím všech možností kombinovaných jazykem HTML5 a dalšími jazyky lze vytvořit interaktivní aplikaci nebo hru, která se blíží aplikaci Flash.
CanvasPaint
Svědčí o tom, že do webového prohlížeče přichází bratr Microsoft Paint a jeho otcem je HTML5.
CanvasMol
Vědecká aplikace, která je vytvořena tak, aby vám pomohla pochopit strukturu některých zemských prvků.
Cartoon Builder
Kreslete zajímavý kreslený obrázek pomocí tohoto minimálního a interaktivního kreslícího programu.
Nakreslete sem cokoli
Nakreslete cokoli, co můžete přetáhnout v ukázce, aby se zobrazily detaily.
Gartic Sketch
Originální aplikace HTML5, která vám umožní vytvořit několik základních kreseb, které lze uložit do různých obrazových formátů, jako je jpeg nebo png.
PhysicSketch
Kreslete si, co chcete, a sledujte, jak reagují se simulovanou gravitací.
Sketchpad
Výkonná kreslicí aplikace HTML5, která vám umožní přesně kreslit a upravovat obrázek.
Smalltalk
Webová aplikace, která potvrzuje zeměpisnou polohu zpráv týkajících se počasí získaných z Twitteru, a vytváří z nich tak na plátně mapu „sociálního počasí“, poměrně triviální (jak uvádí autor), ale zajímavou.
Hra
3Bored
Nikdy byste se nenudili, kdybyste se v příští vteřině dokázali neustále vyhýbat stovkám kulek HTML5.
Breakout
Rebound the ball to break all bricks.
Kanvascape
Není to úplně hra, ale ukazuje, jak lze HTML5 použít k vývoji prohlížečové hry z pohledu první osoby.
Catch It
Kolik kuliček dokážeš uhnout, abys získal vítězný čtverec HTML5?“
Chain Reaction
Překonávej exploze, abys dosáhl cíle, ať nejsi závislý.
Cubeout
Hraj Tetris ve 3D, pohled shora dolů.
etchaFyzika
Kresli předmět, abys přesunul kuličku na hvězdu, nezapomeň na gravitaci.
Skládačka
Klikejte, otáčejte a pouštějte dílky skládačky, abyste vyřešili tuto skládačku založenou na HTML5.
Skládačka
Sklouzněte k vítězství, další hra HTML5, která je vytvořena tak, aby vyždímala šťávu z vaší mysli.
Stejná hra
Odstraňte určitou skupinu, abyste získali další skupinu spárovanou ve stejné barvě, a nakonec byste získali vítězství.
Tetris
Jedna z nejklasičtějších her, kterou oživilo HTML5.
Torus
Ještě jedna hra Tetris v pseudo 3D verzi.
Závěr
Co je omezením HTML5? V tuto chvíli nemůžeme rozhodnout, ale díky působivému videu níže můžeme vědět, kam až se HTML5 posunulo:
Ano, je to Quake II ve webovém prohlížeči, takže nyní je zcela jasné, že s HTML5 by se zrodily další převratné webové aplikace, které by sloužily miliardám uživatelů internetu. Je to rychlé, vyvíjí se to a mění to světový web. Otázkou je, jak byste tento převratný jazyk HTML5 využili vy?
Rádi si poslechneme váš nápad!