Donc, vous avez entendu toutes les rumeurs selon lesquelles HTML5 prendrait le dessus sur Adobe Flash. Alors que la plupart de la communauté web argumente que c’est possible ou non, vous devez vous demander ce qui rend HTML5 si puissant que même la société géante Apple veut l’utiliser pour remplacer Flash.
C’est pourquoi ce post existe, nous n’allons pas parler de ce que HTML5 peut faire, mais montrer des démos en direct de choses magiques que HTML5 peut réaliser avec d’autres langages comme JavaScript, alors préparez-vous à être inspiré.
Note : Comme HTML5 n’est pas entièrement supporté par certains navigateurs web comme Internet Explorer, il vous est fortement recommandé d’utiliser le navigateur Firefox pour visualiser toutes les démos HTML5 ci-dessous.
Animation
L’élément canvas de HTML5 est le facteur décisif pour que HTML5 remplace certaines animations Flash. Il vous permet de construire un rendu dynamique et scriptable de formes 2D et d’images bitmap avec Javascript, ce qui, par d’autres termes, est une animation contrôlable.
Audioburst Animation
Une animation confortable et fantastique créée avec le canvas et la balise audio de HTML5.
Ball Pool
Etant présentée lors du dernier événement Google I/O, cette démo vous montre à quel point HTML5 peut être dynamique.
Blob Sallad
Une créature engendrée par HTML5 qui vous plairait.
Bomomo
Avec Bomomo, vous pouvez observer différents mouvements atomiques simulés avec HTML5.
Browser Ball
S’émerveiller avec cette balle HTML5 ‘cross-browser’.
Bulles
Amusez-vous en créant des bulles flottantes sans fin avec différentes couleurs.
Canvas Cartoon Animation
Un dessin animé HTML5 simple et drôle qui vous aide à comprendre ce que l’élément canvas de HTML5 peut faire.
Coolclock
Une jolie horloge analogique personnalisable construite par HTML5 et JavaScript.
Flickr PS3 Slideshow
Voir les photos de votre Flickr avec un diaporama de style PS3 dans le navigateur web.
Polaroid interactif
Une démo interactive qui fonctionne de manière assez similaire à l’interface multi-touch.
JS Fireworks
Profitez du moment du feu d’artifice avec votre gravité et votre vitesse préférées, alimenté par HTML5 et Javascript.
Kaléidoscope
Un kaléidoscope HTML5 très beau et futuriste.
Particules liquides
Une animation de particules sensibles qui réagit en fonction du mouvement de votre souris.
Mesmerizer
Une autre démo HTML5 sensible et remarquable qui montre comment les éléments proches réagissent en fonction du mouvement de votre souris.
Nébuleuse
Dégagez-vous avec cette merveilleuse nébuleuse HTML5.
Parallax
Voyez toutes les formes 2D en perspective parallèle.
Animation de particules
Une élégante animation de particules HTML5 qui peut prendre la forme de votre message préféré.
Spread
Dégagez-vous avec cette animation d’étalement sans fin.
Starfield
Une animation de champ d’étoiles HTML5 très cool qui changerait de direction et de vitesse en fonction du mouvement de votre souris.
Destruction vidéo
Un clic pour faire exploser une vidéo en cours de lecture.
Forme d’onde
Observez comment la vague de toile de HTML5 se déplace en modifiant son amplitude, sa longueur d’onde, sa largeur, etc.
Effet 3D
Impressionné par l’animation de la toile ? C’est plus que l’élément canvas de HTML5 peut faire, et c’est ce qu’on appelle l’effet 3D. Le développeur peut s’appuyer sur l’élément canvas, le DOM et le JavaScript pour créer un effet 3D, qui peut ensuite être développé en animation 3D ou en jeu.
Canvas3D et Flickr
Vivez une toute nouvelle expérience 3D avec le photostream de Flickr.
Simulation de tissu
Une simulation de tissu réaliste, basée sur HTML5.
Monstre en évolution
Observez un monstre qui évolue en une créature compliquée, l’un de ses créateurs est HTML5.
Google Giftbox
Le moteur de recherche géant Google est présenté en 3D, en vue jouable.
JS Touch
Une vitrine ‘3D sur toile 2D’ de haute qualité et réaliste.
Présentation de données
Si l’élément canvas de HTML5 peut être utilisé pour créer des animations et un effet 3D, il peut également être mis en œuvre pour présenter des données mathématiques.
Gnuplot
Gnuplot, une application de traçage de données en version HTML5.
RGraph
RGraph fournit une large gamme de présentation de données comme le graphique à barres, la barre de progression et le graphique radar traditionnel.
Application Web
En définitive, en utilisant toutes les possibilités combinées par HTML5 et d’autres langages, on peut créer une application interactive ou un jeu proche de l’application Flash.
CanvasPaint
Témoin, le frère de Microsoft Paint arrive dans votre navigateur web, et son père est HTML5.
CanvasMol
Une application scientifique qui est construite pour vous aider à comprendre la structure de certains éléments terrestres.
Cartoon Builder
Dessinez une image de dessin animé intéressante avec ce constructeur de dessin animé minimal et interactif.
Drag Anything Here
Drag tout ce que vous pouvez glisser dans la démo pour montrer les détails.
Gartic Sketch
Une application HTML5 originale qui vous permet de faire quelques dessins de base qui peuvent être enregistrés dans différents formats d’image comme jpeg ou png.
PhysicSketch
Dessinez ce que vous voulez et voyez comment ils réagissent à la gravité simulée.
Sketchpad
Une puissante application de dessin HTML5 qui vous permet de dessiner et de modifier votre image de manière précise.
Smalltalk
Une application web qui confirme la position géographique d’un message lié à la météo acquis sur Twitter, les formant ainsi en une carte ‘météo sociale’ basée sur une toile, assez triviale (comme l’indique l’auteur) mais intéressante.
Jeu
3Bored
Vous ne vous ennuieriez jamais si vous pouvez continuer à éviter des centaines de balles HTML5 à la seconde suivante.
Breakout
Rebondissez la balle pour casser toutes les briques.
Canvascape
Pas tout à fait un jeu, mais il démontre comment HTML5 peut être utilisé pour développer un jeu par navigateur de tir à la première personne.
Catch It
Combien de balles pouvez-vous esquiver pour obtenir votre carré HTML5 gagnant ?
Chain Reaction
Enchaînez l’explosion pour atteindre l’objectif, ne devenez pas accro.
Cubeout
Joue à Tetris en 3D, vue de haut en bas.
etchaPhysics
Dessine un élément pour déplacer la balle vers l’étoile, n’oublie pas la gravité.
Jigsaw Puzzle
Cliquez, faites tourner et déposez les pièces du puzzle pour résoudre ce puzzle basé sur HTML5.
Slide Puzzle
Glissez vers la victoire, un autre jeu HTML5 construit pour presser le jus de votre esprit.
Same Game
Enlevez certains groupes pour obtenir un autre groupe apparié de la même couleur et vous finiriez par remporter la victoire.
Tetris
Un des jeux les plus classiques ramené à la vie par HTML5.
Torus
Encore un autre jeu Tetris en version pseudo-3D.
Conclusion
Quelle est la limite de HTML5 ? À ce stade, nous ne pouvons pas décider, mais avec l’impressionnante vidéo ci-dessous, nous pouvons savoir jusqu’où le HTML5 a été poussé :
Oui, c’est Quake II dans le navigateur web, donc maintenant il est très clair qu’avec le HTML5, plus d’application web révolutionnaire serait née pour servir des milliards d’internautes. C’est rapide, ça évolue, et ça change le monde du web. La question est la suivante : comment utiliseriez-vous ce HTML5 qui change la donne ?
Nous aimerions bien entendre votre idée !