HTML5 Rocks

HTML5 Rocks

HTML5 Fonctionnalités

Graphismes

Le Web a toujours été un média visuel, qui comportait toutefois des limites. Jusqu'à récemment, les développeurs HTML n'avaient d'autre choix que d'utiliser les technologies CSS et JavaScript pour la création d'animations et d'effets visuels sur leurs sites Web, ou ils devaient se tourner vers des plug-ins tels que Flash.

Grâce à l'ajout de technologies telles que l'élément Canvas, le WebGL et les images SVG, ce temps-là est révolu ! Il existe en effet de nombreuses nouvelles fonctionnalités qui ont trait aux graphiques sur le Web : les Canvas 2D, le WebGL, les images SVG, les transformations CSS 3D et les fichiers SMIL.

Nouveautés

The Future is Now!

Bien sûr, ces nouvelles technologies ne seraient d'aucune utilité si elles ne pouvaient pas s'exécuter rapidement. Heureusement, les moteurs JavaScript sont désormais suffisamment puissants pour pouvoir exécuter des jeux 3D et manipuler des vidéos en temps réel. La composition graphique avec accélération matérielle est actuellement mise en œuvre dans de nombreux navigateurs, ce qui signifie que même les transitions et les transformations CSS seront on ne peut plus fluides.

Les développeurs tirent pleinement parti de ces fonctionnalités : une avalanche de démos de graphismes HTML ont fait leur apparition sur le Web, allant des mises en œuvre de vieux algorithmes graphiques 2D aux techniques inédites créées spécialement pour le Web moderne.

Compatibilité des navigateurs

Le thème des graphismes est si vaste qu'il implique plusieurs spécifications. Une démo de graphisme complète peut utiliser plusieurs des éléments suivants :

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

Démos

Dans la pratique

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

Ressources

  • svgweb Compatibilité SVG sur tous les navigateurs
  • Adobe Illustrator HTML5 pack Compatibilité SVG, CSS et Canvas pour Illustrator
  • Raphaël Bibliothèque d'animations contenant des images SVG
  • cakejs Bibliothèque de graphes de scène JavaScript pour l'élément canvas
  • Processing.js Passage du langage de script d'animation Processing à JavaScript (utilisation des canvas)
  • three.js Moteur 3D léger — utilise l'élément canvas, les images SVG et le WebGL
  • GPU Accelerated Compositing in Chrome Informations détaillées sur l'implémentation de la composition graphique avec accélération matérielle dans Google Chrome