jeudi 25 avril 2013

Edge : infographie animée HTML5


Voici une infographie animée en HTML5, réalisée pour le journal du net et disponible à l'adresse suivante :

http://www.journaldunet.com/economie/energie/construction-de-reacteurs-nucleaires.shtml?utm_source=benchmail&utm_medium=mail&utm_campaign=ML158_E10244385&f_u=14183370

Cette réalisation est un exemple concret d'une animation en HTML5, réalisée à l'aide de la suite logicielle Adobe Edge Tools désormais composée de plusieurs outils : Edge Animate, Edge Flow, Edge Code, Edge Font. Tous disponibles à partir d'un abonnement Adobe creative cloud.

Cette infographie est non seulement réalisée en HTML5 mais intègre directement la page HTML sans passer par un iFrame. La structure sémantique de son code favorise le référencement et l'indexation des données animées. Les propriétés SVG (vectorielles) de certains éléments de l'animation (les ellipses qui apparaissent au clic sur les villes du monde) apportent une écriture lisse et assez fluide, parce que la forme reste simple naturellement.

Edge offre une solution idéalement adaptée à ce type de mise en scène, à la fois graphique et sémantique, par opposition à MotionComposer ou Flash pro, qui conviendront davantage aux animations d'accompagnement ou n'ayant pas vocation à être référencées, bien que plus simple à produire via MotionComposer et plus graphique encore via Flash pro. MotionComposer exportera par exemple des bannières, des illustrations animées, des petits books persos, en HTML5 et en SWF. Flash pro exportera des interfaces de jeu et des dessins-animés interactifs ou des applications mobiles.
  • Edge animate est le logiciel d'animation et d'ajout d'interactivité à partir d'une liste d'actions prédéfinies, sans coder.
  • Edge reflow permet de gérer l'affichage et l'élasticité d'une page selon son contexte d'affichage.
  • Edge code est un éditeur de code Javascript (repose sur le moteur de Brackets). Il ne contient pas de librairies. C'est juste un éditeur de code.
  • Edge inspect est un plugin qu'on installe sur chaque périphérique de test afin de synchroniser les modifications avec ses mises en forme au sein de Animate ou Reflow.
  • Edge web fonts et Typekit sont respectivement un système de gestion de polices et un service connecté de stockage des polices pour enrichir gratuitement la mise en forme de vos pages Web tout en garantissant la lisibilité des textes et leur référencement. Le texte reste texte sans style appliqué dans le flux du texte.
  • Phonegap build permet d'encapsuler des pages HTML au sein d'une pseudo application mobile, laquelle reposera sur Webkit, le moteur de Safari et Chrome.

Pour en savoir plus sur Edge tools :
http://html.adobe.com/fr/edge/


Pour en savoir plus sur le potentiel de Edge tools, lisez également cet article :
http://bloc-notes-arzhur.blogspot.fr/2013/05/edge-tools-simpose-enfin.html

Aucun commentaire:

Enregistrer un commentaire