samedi 28 juillet 2012

Les 4 grands standard d'animation HTML5 (2/2)

Interview N°2, donnée pour Elephorm, dans le cadre du lancement de la formation VOD intitulée "Flash Pro CS6, export HTML5", disponible à cette adresse :
http://blog.elephorm.com/technologie-flash#a_aid=AZ 


Les 4 grands standard d'animation HTML5

En HTML5, on distingue 4 grands standards d’animation : le CSS, le Javascript, le SVG et le Canvas. Certains sont plus ouverts et garantissent une meilleure accessibilité. D’autres, bien que structurellement ouverts, demeurent peu accessibles et non référençables, mais vont permettre d’apporter une couche interactive et graphique avancée proches des possibilités jusqu’ici réservées au format Flash SWF. Je vous propose de revenir rapidement sur ces différents formats afin de bien identifier le segment occupé par Canvas, le nouveau format HTML5 disponible dans Flash Pro CS6.

  • Le CSS a vocation à accompagner la mise en forme des données textes en y ajoutant des styles. Ces styles peuvent être animés. Mais les animations produites se limitent généralement à de l’accompagnement de données par des effets de transition ou des blocs défilants, davantage réservés donc à des sites éditoriaux, des books en ligne, plus qu’à de véritables environnements graphiques et ludiques. Des outils comme Sencha permettent de générer des animations CSS. Nous illustrons cette technique dans la formation.
  • Le SVG est un standard d’animation vectoriel et sémantique. Il permet d’offrir un rendu épuré de type infographique ou BD, et conviendra, idéalement, à de l’animation de données au sein d’une interface de site Web. Le calcul de l’animation des points d’ancrage et des points d’inflexion requiert cependant des ressources importantes que ne possèdent pas encore la plupart des périphériques mobiles. Les animations peuvent, hélas, dans ce contexte, parfois apparaître saccadées en dehors d’un ordinateur classique. Ce standard reste en revanche intéressant pour la représentation animée de menus, de cartes géographiques, de listes de personnes, de profiloscopes, de cartographies et tout ce qui repose sur de l’information structurée et sémantique avec une approche déjà plus graphique qu’en CSS seul. Le logiciel Adobe Edge a été conçu pour ce type d’animation. Nous montrons également quelques exemples en SVG dans notre formation.
  • Le Canvas est un standard d’animation qui propose un rendu bitmap, par opposition au rendu vectoriel du SVG. C’est, en somme, une fenêtre vidéo, dans laquelle on peut afficher des données graphiques, avec un rendu vidéo. A la différence du format vidéo, l’affichage en Canvas est traité dynamiquement par le navigateur. C’est en quelque sorte de la vidéo, mais lue et interprétée par le navigateur en temps réel, ce qui en fait format interactif. C’est du coup un peu plus gourmand que la vidéo car les données affichées doivent être calculée pendant le rendu. Mais moins gourmand que le SVG qui doit, en plus, gérer le calcul des données vectorielles des formes graphiques. Le standard Canvas s’apprête à des compositions graphiques élaborées, mêlant toutes sortes de médias, des images, des vidéos, de la 3D, de l’interactivité, grâce à la complétion Javascript. A terme, nous pouvons tout-à-fait envisager que le standard Canvas viendra remplacer le format SWF si les éditeurs de logiciels ou de librairies exploitent pleinement ses capacités. Ce que nous pouvons produire aujourd’hui en Canvas est de plus en plus proche de ce que nous réalisions jusqu’à lors en SWF. Canvas, associé désormais à Flash Pro, ouvre donc une nouvelle voie dans l’animation, plus que durable. Les logiciels Flash Pro CS6 et Hype sont conçus pour ce type d’animation. De nombreuses librairies gratuites existent aussi sur le Web pour réaliser ce type de contenu. J’ai rassemblé quelques liens que vous retrouverez dans les fichiers de travail associés à la formation pour illustrer également ce format, en plus de tous les exercices que nous produisons ensemble tout au long de la formation.
  • Le Javascript, pour finir, apparaît de loin le plus avancé des standards puisque c’est le langage que l’on utilise pour ajouter de l’interactivité dans le navigateur et accessoirement pour étendre les fonctionnalités de nombreuses solutions propriétaires. C’est aussi ce langage qui permettra d’étendre les fonctionnalités des standards HTML5 de l’animation que sont CSS, SVG ou Canvas.
Et quand doit-on alors utiliser Canvas ?

Canvas, de par sa vocation plutôt graphique, doit être privilégié pour les contenus qui accompagnent les textes, complémentaires aux textes. Nous réserverons les standards SVG et CSS pour le traitement graphique des textes eux-mêmes. SVG et CSS ne complètent pas un texte, c’est la forme du texte ! En revanche, si votre projet doit être mobile, il vaut mieux le réaliser en Canvas. Il apparaîtra plus fluide et disposera de plus amples fonctionnalités interactives. Notez que si vous préférez les standards SVG ou CSS pour produire des animations, tout comme Canvas, celles-ci perdront de toutes façons leur côté sémantique et accessible au moment de la compilation.

Une conclusion ?

Flash Pro CS6 et le standard Canvas répondent à un nouvel éventail de possibilité, plus large que tous les autres standards HTML5 d’animation réunis, et réalisables depuis un seul environnement déclinable en Canvas, en SWF et sous la forme d’applications mobiles, qui plus est déjà bien connu de bon nombre d’utilisateurs, et disponible dans la suite creative de bon nombre de studios graphiques. Apprendre à dompter l’export HTML5 de Flash CS6 m’apparaît donc la solution la plus raisonnable, la plus efficace, aujourd’hui, pour préparer vos projets à destination de tous les environnements, et ce, à moindre coût.

Aucun commentaire:

Enregistrer un commentaire