Depuis que le HTML5 fait son apparition dans l'actualité et surtout sur des sites comme celui de
Chrome Experiments, de nombreuses personnes prévoient la fin de Flash. Avec l'annonce d'Adobe Edge à
Max 2010 ou encore lors de la
présentation de la suite CS5.5, Adobe a confirmé son ouverture sur les strandards du web, même celles n'appartenant pas à la société. En effet, il est bon de rappeler encore une fois qu'Adobe fait parti du W3C. Ainsi, même si Flash est l'une des plus grosses sources de revenus, l'outil a au départ été développé afin de faire des choses qui n'étaient pas possibles avec le HTML par exemple. C'est encore cette vision qu'a Adobe, en amélioration aujourd'hui la prise en charge de la 3D principalement.
Qu'est ce qu'Adobe Edge ?
Je ne vais pas revenir en détails sur ce qu'est Adobe Edge (vous le trouverez sur de nombreux autres blogs ou sites d'actus), mais rapidement, Adobe Edge est destiné à être un éditeur de contenus interactifs usant donc des futurs standards du web que sont HTML5 (incluant Javascript et CSS3), aidé par le célèbre framework jQuery.
Plus précisément.
Après avoir vu que la version béta était sortie, je me suis empressé de la télécharger et de l'essayer. J'ai du le faire sur Windows car non compatible avec Mac OS inférieur à 10.6.
L'ergonomie reprend les principes des autres outils d'Adobe. Vous y trouverez :
- une barre d'outils composée de 4 outils : flèche de sélection, création d'un "carré", création d'un "carré arrondi", outil texte
- un panneau propriétés permettant de modifier les paramètres de chaque objet
- une timeline qui permettra de gérer vos animations, comme pour Flash
- un panneau éléments regroupant tous vos objets
- et bien sûr une scène
Comme vous l'avez compris, tout est vraiment encore très basique. Vous pourrez aussi importer des images, mais pas les redimensionner. Ces images seront en fait mises en "background" de votre "div". Finalement, on ne peut ajouter que des "div" qui pourront prendre les formes que l'on souhaite, y ajouter des transformations grâce à la timeline et au panneau propriétés, puis exporter le tout pour avoir un aperçu directement dans le navigateur.
Que vaut le code ?
Je pose cette question car c'est l'une des questions cruciales que se posera tout développeur. En effet, bien que Dreamweaver est un très bon logiciel permettant de faire des sites en WYSIWYG, le code généré est peu propre, et très lourd.
C'est pour l'instant le cas avec Edge, dans une moindre mesure. Le code est très compréhensible, très propre, mais pour effectuer les animations, Edge fait appel à des tableaux JSON dans lesquels seront enregistrés chaque changement de conformation, grâce à l'ID de l'élément et des propriétés CSS3. Au final, jQuery n'intervient encore que très peu dans ces animations.
Les animations peuvent être assez longues à charger, comme on peut le voir dans les
exemples présents sur le site.
Adobe Edge promet de belles choses mais ...
Adobe Edge part d'une bonne idée : faciliter la conception d'animations grâce au HTM5 pour tout type de personne ne connaissant pas ce nouveau standard. Mais je parle bien d'"animation" et non de sites complets, car pour l'instant, cet outil ne sert qu'à ça. Il n'utilise d'ailleurs que des propriétés basiques de HTML5 que sont les propriétés CSS3. C'est ce que précise Adobe dans la description présente sur le
Labs d'Adobe.
J'attends donc impatiemment l'arrivée d'une version plus aboutie qui permettra d'aller plus loin dans la création d'animations plus complexes. Le top serait même de pouvoir ajouter des librairies telles que Three.js, Highcharts.js ou encore Paper.js, qui seraient alors interprétés par Adobe Edge.
Vous pouvez télécharger Adobe Edge sur ce
lien et voir des exemples
ici ou
là.
