Olet siis kuullut kaikki huhut siitä, että HTML5 syrjäyttäisi Adobe Flashin. Vaikka suurin osa verkkoyhteisöstä väittää, että se on mahdollista tai ei, sinun täytyy vaeltaa, mikä tekee HTML5:stä niin tehokkaan, että jopa jättiläisyhtiö Apple haluaa käyttää sitä korvaamaan Flashin.
Sentähden tämä viesti on olemassa, emme puhu siitä, mitä HTML5 voi tehdä, vaan näytämme live-demoja maagisista asioista, joita HTML5 voi saavuttaa muiden kielten, kuten JavaScriptin, kanssa, joten valmistaudu inspiroitumaan.
Huomautus: Koska HTML5 ei ole täysin tuettu tietyissä web-selaimissa, kuten Internet Explorerissa, on erittäin suositeltavaa käyttää Firefox-selainta kaikkien alla olevien HTML5-demojen katsomiseen.
Animaatio
HTML5:n canvas-elementti on ratkaiseva tekijä sille, että HTML5:llä voidaan korvata tietyt Flash-animaatiot. Sen avulla voit rakentaa dynaamisen, skriptattavissa olevan 2D-muotojen ja bittikarttakuvien renderöinnin Javascriptin avulla, eli toisin sanoen hallittavissa olevan animaation.
Audioburst-animaatio
Mukava ja fantastinen animaatio, joka on luotu HTML5:n canvas-elementillä ja äänitunnisteella.
Pallopoolipeli
Viimeisimmässäkin Googlen I/O-tapahtumassa esiteltynä tämä demo osoittaa, kuinka dynaaminen HTML5:n käyttö voi olla.
Blob Sallad
HTML5:n synnyttämä olento, joka ilahduttaisi sinua.
Bomomo
Bomomon avulla voit tarkkailla erilaisia atomien liikkeitä, joita simuloidaan HTML5:llä.
Browser Ball
Hämmästy tällä ”selaintenvälisellä” HTML5-pallolla.
Kuplat
Ole hauska luomalla loputtomasti kelluvia kuplia eri väreillä.
Canvas-sarjakuva-animaatio
Yksinkertainen ja hauska HTML5-sarjakuva, joka auttaa sinua ymmärtämään, mitä HTML5:n canvas-elementillä voi tehdä.
Coolclock
Kiva, muokattavissa oleva analoginen kello, joka on rakennettu HTML5:llä ja JavaScriptillä.
Flickr PS3 Slideshow
Katsele Flickrin valokuvia PS3-tyylisellä diaesityksellä selaimessa.
Interaktiivinen Polaroid
Vuorovaikutteinen demo, joka toimii melko samankaltaisesti kuin multi touch -käyttöliittymä.
JS Fireworks
Nauti ilotulitushetkestä haluamallasi painovoimalla ja nopeudella HTML5:n ja Javascriptin avulla.
Kaleidoskooppi
Erittäin kaunis ja futuristinen HTML5-kaleidoskooppi.
Nestehiukkaset
Herkkä hiukkasanimaatio, joka reagoi hiiren liikkeesi perusteella.
Mesmerizer
Toinen herkkä ja erinomainen HTML5-demo, joka näyttää, miten lähellä olevat elementit reagoivat hiiren liikkeeseesi.
Sumupilvi
Hukassa tämän ihmeellisen HTML5-sumun kanssa.
Parallax
Katsele kaikkia 2D-muotoja rinnakkaisessa perspektiivissä.
Partikkelianimaatio
Elikäs HTML5-hiukkasanimaatio, joka voi muotoutua haluamasi viestin muotoon.
Levitys
Hukehdu tämän loputtoman levitysanimaation avulla.
Tähtikenttä
Erittäin siisti HTML5-tähtikenttäanimaatio, joka vaihtaisi suuntaa ja nopeutta hiiren liikkeen perusteella.
Videon tuhoaminen
Yksi napsautus pelattavan videon puomittamiseen.
Aaltomuoto
Tarkkaile, miten HTML5:n canvas-aalto liikkuu muuttamalla sen amplitudia, aallonpituutta, leveyttä jne.
3D-efekti
Ahdistaa canvas-animaatio? Enemmänkin HTML5:n canvas-elementti voi tehdä, ja sitä kutsutaan 3D-efektiksi. Kehittäjä voi luottaa canvas-elementtiin, DOM:iin ja JavaScriptiin luodakseen 3D-efektin, jota voidaan myöhemmin kehittää 3D-animaatioksi tai peliksi.
Canvas3D ja Flickr
Saa aivan uusi 3D-kokemus Flickrin valokuvavirran avulla.
Kangassimulaatio
Realistinen, HTML5-pohjainen kangassimulaatio.
Evolvoituva hirviö
Tarkkaile hirviön kehittymistä monimutkaiseksi olennoksi, jonka yksi luoja on HTML5.
Google Giftbox
Jättiläinen hakukone Google esitellään 3D:nä, pelattavassa näkymässä.
JS Touch
Laadukas ja realistinen ’3D on 2D Canvas’ -esittely.
Datan esittäminen
HTML5:n canvas-elementtiä voidaan käyttää animaatioiden ja 3D-efektien luomiseen, mutta se voidaan toteuttaa myös matemaattisen datan esittämiseen.
Gnuplot
Gnuplot, datan piirtosovellus HTML5-versiona.
RGraph
RGraph tarjoaa laajan valikoiman datan esitystapoja, kuten pylväsdiagrammin, etenemispalkin ja perinteisen tutkakaavion.
Web-sovellus
Käyttämällä kaikkia HTML5:n ja muiden kielten yhdistämiä mahdollisuuksia voi luoda interaktiivisen sovelluksen tai pelin, joka on lähellä Flash-sovellusta.
CanvasPaint
Todennäköisesti Microsoft Paintin veli saapuu selaimeesi, ja hänen isänsä on HTML5.
CanvasMol
Tieteellinen sovellus, joka on rakennettu auttamaan sinua ymmärtämään tiettyjen maa-ainesten rakennetta.
Cartoon Builder
Piirrä mielenkiintoinen sarjakuvakuva tällä minimaalisella ja vuorovaikutteisella sarjakuvan rakentajalla.
Drag Anything Here
Vedä mitä tahansa, mitä voit vetää demossa näyttääksesi yksityiskohtia.
Gartic Sketch
Originaalinen HTML5-sovellus, jonka avulla voit tehdä joitain peruspiirroksia, jotka voidaan tallentaa eri kuvaformaatteihin, kuten jpeg tai png.
PhysicSketch
Piirrä mitä tahansa haluat ja katso, miten ne reagoivat simuloidun painovoiman vaikutuksesta.
Sketchpad
Tehokas HTML5-piirtosovellus, jonka avulla voit piirtää ja muokata kuviasi tarkasti.
Smalltalk
Websovellus, joka vahvistaa Twitteristä hankittujen säähän liittyvien viestien maantieteellisen sijainnin ja muokkaa niistä näin kankaaseen pohjautuvan ”sosiaalisen sään” kartan, melko triviaalin (kuten kirjoittaja toteaa) mutta mielenkiintoisen.
Peli
3Bored
Et kyllästyisi koskaan, jos pystyt jatkuvasti väistelemään satoja HTML5-luoteja seuraavassa sekunnissa.
Breakout
Kierrättääksesi pallon rikkoaksesi kaikki tiilet.
Canvascape
Ei aivan peli, mutta se osoittaa, miten HTML5:n avulla voidaan kehittää First Person Shooting -selainpeli.
Catch It
Kuinka monta palloa pystyt väistämään saadaksesi voittavan HTML5-ruutusi?
Ketjureaktio
Ketjuta räjähdys saavuttaaksesi päämäärän, äläkä jää koukkuun.
Cubeout
Pelaa Tetristä 3D:ssä, ylhäältä alas -näkymässä.
etchaPhysics
Piirrä kohde siirtääksesi pallon tähteen, älä unohda painovoimaa.
Palapeli
Klikkaa, käännä ja pudota palapelin paloja ratkaistaksesi tämän HTML5-pohjaisen palapelin.
Liukumäki-palapeli
Liukumäki voittajaksi, jälleen yksi HTML5-peli, joka on rakennettu puristamaan mielesi mehut.
Sama peli
Poista tietty ryhmä saadaksesi toisen samanvärisen ryhmän pariksi ja saisit lopulta voiton.
Tetris
Yksi klassisimmista peleistä herätetty henkiin HTML5:n avulla.
Torus
Jälleen yksi Tetris-peli pseudo-3D-versiona.
Johtopäätökset
Mikä on HTML5:n rajoitus? Tässä vaiheessa emme voi päättää, mutta alla olevan vaikuttavan videon avulla voimme tietää, kuinka pitkälle HTML5:tä on viety:
Joo, se on Quake II web-selaimessa, joten nyt on hyvin selvää, että HTML5:n avulla syntyisi lisää uraauurtavia web-sovelluksia palvelemaan miljardeja internetin käyttäjiä. Se on nopea, se kehittyy ja se muuttaa maailmanverkkoa. Kysymys kuuluukin, miten sinä käyttäisit tätä peliä muuttavaa HTML5:tä?
Haluamme kuulla ideasi!