Microsoft Expression Web 2 : un éditeur de code

Regroupant cinq outils, Microsoft Expression 2.0 se compose d’Expression Web pour la création de pages Web, Expression Blend pour la création d’interfaces, Expression Design pour l’illustration vectorielle, Expression Media pour la gestion des médias et Expression Encoder pour l’encodage de vidéos.

Microsoft Expression Web est le successeur de Microsoft FrontPage. Il permet de créer des sites Web en se conformant aux normes Web du HTML, CSS, XML et des sites ASP.NET dynamiques.
La dernière version d’Expression Web voit son interface revisitée, ajoute la prise en charge de PHP et l’importation Adobe Photoshop.

Etant un utilisateur occasionnel de Dreamweaver et Aptana, j’ai donc testé ce logiciel en démo…

Les critères d’évaluation du logiciel :

Voici, les critères d’un éditeur HTML (CSS – JS – XML) sur lesquels l’évaluation du logiciel a été basé :
Code :

• Coloration syntaxique
• Auto-complétion
• Raccourcis
• Documentation sur le langage
• Gestion de l’encodage
• Visualisation et modification CSS
• Visualisation et modification JS (Dom – objet – fonction)
• Débogueur
• Gestion ligne (cacher, sélection)

Fichier :

• Gestion site
• Création fichier
• « Linkage » des attributs sur les fichiers associés
• SVN – FTP
• Recherche – remplacer

Autres :

• Gestion du WYSIWYG
• Prévisualisation navigateurs
• Snippets
• Fonctionnalités
• Ergonomie
• Gestion des images
• Système de plugins

Code :
La coloration syntaxique existe pour tous les langages avec un jeu de 3 couleurs au minimum sans mise en avant (gras) par défaut. Cependant les options du logiciel permettent de modifier tous ces paramètres. Un sur-lignage du code HTML/CSS apparait si celui est erroné (balise non fermé, attributs mal écrit).

L’auto-complétion est configurable, tout en étant à la base bien gérée avec un listage complet des attributs et valeurs possibles. La fermeture automatique de la balise se fait, par contre, dès le « > » de la premier balise ; celle des guillemets est traditionnel.
Concernant les raccourcis, il n’y a rien d’exceptionnel avec, comme dans Dreamweaver, des raccourcis pour le « strong », « em » ou « strike ».

La documentation sur les langages n’est pas disponible à partir de l’application. Celle de l’application est directement en ligne.
L’encodage est configurable sur le fichier et/ou l’ensemble du site.
La visualisation et modification des CSS peut se faire à travers un panneau latéral proposant les attributs de la classe, id ou même de la balise html (si le fichier n’est pas en cours de modification). Cela ressemble à la visualisation des CSS dans firebug.

Un autre panneau latéral « Application de style » permet de voir tous les styles liés au document et d’en appliquer un sur une balise html.
La visualisation du DOM ne se fait pas sur l’ensemble de document mais uniquement sur un élément. En résumé on ne voit que les parents de l’élément sélectionné.
Le débogage se fait d’une part avec la coloration syntaxique (code erronée) et d’autre part avec les scripts proposant des rapports sur les CSS, l’accessibilité et la compatibilité.
Concernant les lignes, elles sont numérotées mais ne peuvent être cachées (compressé). Les lignes sont sélectionnables via leur numéro. Par contre, le double clic sur un mot ayant un « underscore » ne permet pas sa sélection totale.

Fichier :

L’ouverture d’un site crée l’ouverture d’une nouvelle fenêtre de l’application. Les fichiers sont illustrés par un icône représentant son extension.
La création d’un nouveau fichier propose un template en fonction de son extension. Le template pour un fichier HTML est le plus abouti avec le doctype, title, encodage, html-body. Pour les autres formats, le template n’est pas forcement très approprié. Il est possible, bien sûr, d’en créer d’autre.
L’emplacement du fichier peut être en dehors du « projet ouvert ».

Comme Zend via le php, le « Linkage » des attributs sur les fichiers associés est proposé : un clic (+ctrl) sur la classe, id ou la fonction JS permet d’aller à la déclaration de celui-ci.
La fonctionnalité « Recherche – remplacer » est complète avec une application sur un ou plusieurs fichiers, le choix de la direction et des manipulations à partir des balises HTML.
L’application propose un gestionnaire FTP mais pas de subversion.

Autres :

En majorité, la gestion du WYSIWYG est fidèle au rendu des navigateurs ; les développeurs ont porté une attention aux normes W3C d’après le site officiel. Il peut interpréter les pages dynamiques sans installation d’un serveur, ce que je n’ai pas pu constater (demo ?).

La prévisualisation des pages peut se faire à travers les navigateurs existants sur le poste de travail.

Les « snippets » (morceau de code) sont assez nombreux et configurable. Beaucoup de balises HTML peuvent être insérées via un panneau latéral et une barre d’outils: tags commun, formulaire, tableau, mise en forme, etc…
Ils existent une optimisation html (commentaire, espace, « code inutile », caractères word) et des fonctionnalités proposant des rapports sur les CSS (retrouver la CSS inutilisée,…), l’accessibilité, les liens cassés et la compatibilité (doctype W3C – IE).

Au niveau ergonomie, on peut gérer ses « vues » et organiser son espace de travail comme on le souhaite via du « droganddrop » sur les blocs. Par contre je n’ai pas réussi à avoir mon fichier en plein écran.
L’un des nouveautés de cette version est la génération de Png, Gif ou Jpeg à partir d’un fichier Photoshop ; et de sélectionner les couches Photoshop que l’on souhaite inclure ou exclure de l’image.
Les plugins sont peu nombreux et payants d’après cette page .

Points forts + :

• Le linkage des fichiers (id, classe, fonction js)
• La visualisation des styles associés au document (panneau latéral « Application de style »)
• Presque les mêmes fonctionnalités que Dreamweaver…

Points faibles – :

• Mais pas autant poussé que celui-ci.
• Aucune gestion du javascript (inspecteur DOM, intégration framework)
• Ouverture d’une nouvelle fenêtre pour l’arborescence d’un site, pas de plein écran pour coder avec seulement le fichier

Comparatif – Mon avis :

Dans cette version de démo testée, il n’y pas vraiment de gestion sur le javascript et PHP, à part la coloration syntaxique pour les 2 langages.

Les avantages d’EW2, au niveau HTML, sont le linkage des fichiers et la visualisation des styles comparés à Dreamweaver. Sinon Dreamweaver surpasse toutes les autres fonctionnalités d’EW2.

Le mode WYSIWYG ne sert pas à grand-chose dans le travail des monteurs (remplacement de texte). Ce logiciel serait plus destiné pour des personnes ne voulant pas coder l’HTML vu son interface ; ou développant avec l’ASP vu ses composants.

Aptana, basé sur éclipse, est, quand à lui, plus orienté vers le développement javascript.
Pour ma part, Dreamweaver est plus attrayant qu’EW2 pour le montage et il gère mieux le php. Aptana reste, avant tout, orienté vers des applications web 2 et autres langages (Ruby / Rails, ajax, php, python).

Quelques liens :

Site officiel
Documentation en ligne
Tutoriaux
Add-ons
Astuces