Edge : Adobe veut réinventer le développement Web
A l'occasion d'une conférence mondiale à San Francisco, Adobe a levé le voile le 24 septembre sur une solution présentée comme l'aboutissement d'un travail de plus d'un an, visant à concrétiser le virage du groupe américain vers les standards Web. En février dernier, Adobe avait créé la surprise en annonçant son intention de repositionner Flash sur le terrain des jeux et de la vidéo (lire l'article : Prenant acte de l'arrivée de HTML5, Adobe repositionne Flash et AIR). Dans le même temps, le groupe avait affirmé qu'il s'engagerait plus que jamais en faveur des standards (HTML, CSS et JavaScript) sur le front du développement Web.
Tout juste annoncé, Adobe Edge vient concrétiser cette vision en proposant toute une panoplie de solutions de développement et de création Web, reprenant la philosophie des outils Flash.
Au centre de cette suite : Adobe Edge - qui était en bêta depuis l'été 2011. Rebaptisé Adobe Edge Animate, cet outil, désormais en version finale, affiche une interface graphique proche de Flash Pro. "Elle est dotée d'une timeline permettant de cadencer des éléments graphiques sur une page, de type CSS, contenu de div... Le tout dans l'optique de créer des animations Web", explique Michael Chaize, consultant chez Adobe Systems. AdobeEdge Animate prend en charge HTML (HTML5), JavaScript, JSON et CSS, ainsi que les formats graphiques JPG, SVG, PNG et GIF. Les applications sont générées en JSON (JavaScript Object Notation) à partir d'une librairie maison (Edge.js). Le rendu est optimisé pour Webkit, et compatible avec les principaux navigateurs. Les balises canvas et audio d'HTML5 ne sont pas encore supportées. "Le cadencement audio et multimédia est prévu", promet Michael Chaize.
Un éditeur Web dynamique générant des liens dans le code sources
Cette première solution est complétée par Adobe Edge Code. Un éditeur de code qui repose sur le projet Open Source Brackets (hébergé sur GitHub) - lancé par les ingénieurs d'Adobe. Sa valeur ajoutée ? Développé en HTML, CSS et JavaScript, il permet de naviguer dans le code source de manière dynamique. Brackets donne par exemple la possibilité d'accéder au code CSS correspondant à une balise HTML, de le modifier, puis de visualiser le rendu en temps réel sans avoir à recharger le navigateur. Du fait de son caractère Open Source et de son socle Web, Brackets permet de développer des plugins. Adobe en revendique déjà plus d'une centaine, couvrant l'aide à la complétion, le formatage de code et le test notamment.
En plus de Brackets et son écosystème de plugins Open Source, Adobe Edge Code est livré avec deux extensions supplémentaires. L'une pour PhoneGap Build : un outil de build (reposant sur l'environnement de développement multiplate-forme PhoneGap) qui permet de packager des applications HTML dans des conteneurs natifs pour les principaux OS mobiles (iOS, Windows Phone et Android). La seconde donne accès au service Edge Fonts, également annoncé pour l'occasion. Issu du rachat de TypeKit, il permet, à l'image de Google Web Fonts, d'accéder en ligne à une bibliothèque de polices Web Open Source (environ 500), et de les insérer dans ses pages Web - en utilisant la propriété CSS @font-face et en copiant-collant une ligne JavaScript dans son code source.
Le Responsive Design en ligne de mire
Adobe Edge Suite introduit également deux outils entièrement nouveaux qui se révéleront utiles pour les adeptes du responsive design . Le premier, baptisé Adobe Edge Inspect (et dont la version bêta était connue sous le nom d'Adobe Shadow), orchestre la visualisation d'une site Web sur différents types de matériel (PC, portable, tablette, smartphone...). A chaque modification, le développeur peut immédiatement visualiser le rendu sur chaque écran. "Le second outil, Edge Reflow, permet de faire du responsive design sans avoir à coder", explique-t-on chez Adobe. Objectif : éviter aux graphistes les allers-retours incessant avec les développeurs dans ce type de projet, et leur permettre de définir eux-mêmes les règles de mise en page en fonction des dimensions d'écran.
Edge Reflow est le seul outil de la suite Adobe Edge présenté par Adobe à ne pas être encore disponible. Il devrait être lancé en version beêa à la fin de l'année, et commercialisé en version finale d'ici l'été prochain. Comme Creative Suite (avec Photoshop, Illustrator, InDesign...), Adobe Edge Suite est disponible dans le cadre de Creative Cloud. Cette offre de licence par abonnement donne accès à l'ensemble des applications de la suite pour 49 euros par mois sans limitation fonctionnelle. Une version gratuite d'Adobe Edge Suite est également proposée avec certaines limitations (PhoneGap Build permet de générer qu'une seule application par exemple, et Edge Inspect de ne débogger qu'un seul site).
Adobe s'investit au W3C
Dans le cadre de ce chantier, Adobe a décidé de s'investir au sein du W3C pour promouvoir les standards et les effets visuels au sein des langages Web. "Nous ne maitrisions pas l'implémentation des standards au sein des navigateurs. Nous avons donc choisi de nous investir au sein du W3C aux côtés de Microsoft, Google et Apple", commente Michael Chaize. "Nous militons dans ce cadre pour un Web qui tendrait vers une qualité graphique proche des magazines papiers, un Web qui pourrait offrir des possibilités visuelles avancées, équivalentes à ce que peut générer Photoshop, avec des effets de transparence, des filtres..." L'accueil réservé à Adobe Edge Suite par la communauté des développeurs Web tend à montrer que l'éditeur est en passe de réussir son pari, dans l'attente des premiers retours d'expérience.