Ukázka webových stránek HTML5:

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!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.