Hai sentito tutte le voci su HTML5 che avrebbe preso il posto di Adobe Flash. Mentre la maggior parte della comunità web sostiene che sia possibile o meno, vi starete chiedendo cosa rende HTML5 così potente che anche il gigante Apple vuole usarlo per sostituire Flash.
Ecco perché esiste questo post, non parleremo di ciò che HTML5 può fare, ma mostreremo demo dal vivo di cose magiche che HTML5 può raggiungere con altri linguaggi come JavaScript, quindi preparatevi ad essere ispirati.
Nota: Poiché HTML5 non è pienamente supportato da alcuni browser web come Internet Explorer, si consiglia vivamente di utilizzare il browser Firefox per visualizzare tutte le demo HTML5 qui sotto.
Animazione
L’elemento canvas di HTML5 è il fattore decisivo per sostituire alcune animazioni Flash. Ti permette di costruire un rendering dinamico e scrivibile di forme 2D e immagini bitmap con Javascript, che in altri termini è un’animazione controllabile.
Audioburst Animation
Una comoda e fantastica animazione creata con il canvas di HTML5 e il tag audio.
Ball Pool
Messa in mostra nell’ultimo evento Google I/O, questa demo ti mostra quanto può essere dinamico HTML5.
Blob Sallad
Una creatura generata in HTML5 che ti piacerebbe.
Bomomo
Con Bomomo, puoi osservare diversi movimenti atomici simulati con HTML5.
Browser Ball
Fatti stupire con questa palla ‘cross-browser’ HTML5.
Bolle
Divertiti a creare infinite bolle galleggianti con colori diversi.
Canvas Cartoon Animation
Un semplice e divertente cartone animato HTML5 che ti aiuta a capire cosa può fare l’elemento canvas di HTML5.
Coolclock
Un simpatico orologio analogico personalizzabile costruito da HTML5 e JavaScript.
Flickr PS3 Slideshow
Guarda le tue foto di Flickr con slideshow in stile PS3 nel browser web.
Interactive Polaroid
Un demo interattivo che funziona in modo abbastanza simile all’interfaccia multi touch.
Fuochi d’artificio JS
Godetevi il momento dei fuochi d’artificio con la gravità e la velocità che preferite, alimentato da HTML5 e Javascript.
Caleidoscopio
Un caleidoscopio HTML5 molto bello e futuristico.
Particelle liquide
Animazione sensibile delle particelle che reagisce in base al movimento del mouse.
Mesmerizer
Un’altra sensibile ed eccezionale demo HTML5 che mostra come gli elementi vicini reagiscono al movimento del mouse.
Nebula Cloud
Si perda con questa meravigliosa nebulosa HTML5.
Parallax
Vedi tutte le forme 2D in prospettiva parallela.
Animazione di particelle
Un’elegante animazione di particelle HTML5 che può formare il tuo messaggio preferito.
Spread
Si perde con questa animazione infinita di spread.
Campo stellare
Un’animazione HTML5 molto cool che cambia direzione e velocità in base al movimento del mouse.
Video Destruction
Un clic per far esplodere un video in riproduzione.
Waveform
Osserva come l’onda della tela di HTML5 si muove alterando la sua ampiezza, lunghezza d’onda, larghezza, ecc.
Effetto 3D
Impressionato dall’animazione della tela? Questo è il massimo che l’elemento canvas di HTML5 può fare, e si chiama effetto 3D. Gli sviluppatori possono fare affidamento sull’elemento canvas, DOM e JavaScript per creare effetti 3D, che possono poi essere sviluppati in animazioni 3D o giochi.
Canvas3D e Flickr
Avere un’esperienza 3D completamente nuova con il photostream di Flickr.
Simulazione di stoffa
Una realistica simulazione di stoffa basata su HTML5.
Mostro in evoluzione
Osserva un mostro che evolve in una creatura complicata, uno dei suoi creatori è HTML5.
Google Giftbox
Il gigantesco motore di ricerca Google è presentato in 3D, vista giocabile.
JS Touch
Una vetrina di alta qualità e realistica ‘3D su tela 2D’.
Presentazione di dati
Mentre l’elemento canvas di HTML5 può essere usato per creare animazioni ed effetti 3D, può anche essere implementato per presentare dati matematici.
Gnuplot
Gnuplot, un’applicazione per tracciare dati in versione HTML5.
RGraph
RGraph fornisce una vasta gamma di presentazioni di dati come il grafico a barre, la barra di progresso e il tradizionale grafico radar.
Applicazione web
In definitiva, usando tutte le possibilità combinate da HTML5 e altre lingue, si può creare un’applicazione interattiva o un gioco che si avvicina all’applicazione Flash.
CanvasPaint
Il fratello di Microsoft Paint arriva nel tuo browser web, e suo padre è HTML5.
CanvasMol
Un’applicazione scientifica che è costruita per aiutarti a capire la struttura di certi elementi della terra.
Cartoon Builder
Disegna interessanti immagini di cartoni animati con questo costruttore minimo e interattivo di cartoni animati.
Trascina qualsiasi cosa qui
Trascina qualsiasi cosa che puoi trascinare nella demo per mostrare i dettagli.
Gartic Sketch
Un’originale applicazione HTML5 che ti permette di fare alcuni disegni di base che possono essere salvati in diversi formati immagine come jpeg o png.
PhysicSketch
Disegna quello che vuoi e vedi come reagiscono con la gravità simulata.
Sketchpad
Una potente applicazione di disegno HTML5 che ti permette di disegnare e modificare la tua immagine in modo preciso.
Smalltalk
Un’applicazione web che conferma la posizione geografica dei messaggi relativi al tempo acquisiti da Twitter, formandoli così in una mappa ‘social weather’ su tela, abbastanza banale (come dichiarato dall’autore) ma interessante.
Gioco
3Bored
Non ti annoieresti mai se tu potessi continuare ad eludere centinaia di proiettili HTML5 nel prossimo secondo.
Breakout
Rimonta la palla per rompere tutti i mattoni.
Canvascape
Non è proprio un gioco, ma dimostra come HTML5 può essere usato per sviluppare un browser game di sparatorie in prima persona.
Catch It
Quante palle puoi schivare per ottenere il quadrato HTML5 vincente?
Chain Reaction
Catena l’esplosione per raggiungere l’obiettivo, non diventare dipendente.
Cubeout
Gioca a Tetris in 3D, vista dall’alto.
etchaPhysics
Disegna l’oggetto per spostare la palla verso la stella, non dimenticare la gravità.
Jigsaw Puzzle
Clicca, ruota e lascia cadere i pezzi del puzzle per risolvere questo puzzle basato su HTML5.
Slide Puzzle
Scivola verso la vittoria, un altro gioco HTML5 che è costruito per spremere la tua mente.
Same Game
Rimuovi un certo gruppo per ottenere un altro gruppo abbinato dello stesso colore e alla fine ti verrà assegnata una vittoria.
Tetris
Uno dei giochi più classici riportato in vita da HTML5.
Torus
Un altro gioco di Tetris in versione pseudo-3D.
Conclusione
Qual è il limite di HTML5? A questo punto non possiamo decidere, ma con l’impressionante video qui sotto possiamo sapere fino a che punto l’HTML5 è stato spinto:
Sì, è Quake II nel browser web, quindi ora è molto chiaro che con HTML5, nasceranno applicazioni web più innovative per servire miliardi di utenti internet. È veloce, si sta evolvendo e sta cambiando il world wide web. La domanda è: come useresti questo HTML5 che cambia il gioco?
Ci piace sentire la tua idea!