|
Jusqu'à présent, en matière d'édition web professionnelle, Dreamweaver faisait figure de poids lourd. Aujourd'hui Microsoft propose Expression Web, un éditeur qui pourrait bien venir lui disputer sa place de leader.
Expression Web fait partie d'une nouvelle gamme de logiciels lancée par Microsoft et prend la suite de FrontPage. Notons d'emblée que la migration de sites faits sous FrontPage, vers EW, ne pose visiblement pas de problèmes. Ces produits sont regroupés dans la suite Expression Studio, qui comprend, outre Expression Web :
Expression Web est surtout orienté concepteur/designer de sites Web, mais veut aussi jouer le rôle de passerelle entre les développeurs et les designers. Pour les purs développeurs qui préfèrent nager dans le code, il y a toujours Visual Studio, à l'interface minimaliste. Disons-le tout de suite, j'ai été agréablement surpris par Expression Web. Il possède une interface claire, très soignée, et reprend la même logique d'organisation qu'on peut trouver dans Dreamweaver : barres d'outils spécialisés, panneaux dédiés à des tâches spécifiques telles que la gestion des CSS, insertion d'objets courants HTML, gestion des dossiers et des fichiers, etc.
Par défaut, EW produit des documents au format XHTML 1.0 Transitional, CSS 2.1, conformes aux standards en vigueur, répondant aux normes du W3C. Pour un utilisateur expérimenté venant de Dreamweaver, la prise en main d'Expression Web ne demandera pas énormément de temps. En quelques heures, les nouveaux repères peuvent être pris : Expression Web présente juste simplement et autrement, tout en innovant aussi par endroits. Les ressemblances entre les deux logiciels sont assez frappantes, mais d'un autre côté, il n'y a pas 36 façons de présenter et d'organiser un logiciel de création web, et les deux savent se démarquer dans l'emploi de certains modules. Tour d'horizon Nous allons donc ici faire un bref tour d'horizon du logiciel, décrire quelques uns des points sur lesquels Expression Web nous a intéressé, tout en soulignant ici ou là les différences ou ressemblances avec Dreamweaver. L'installation d'Expression Web par défaut est plutôt conséquente : plus de 800 Mo, dont apparemment une grosse part d'outils Office dont je ne suis pas sûr qu'ils soient tous vraiment nécessaires au bon fonctionnement du programme. On peut bien sûr choisir de ne pas installer certaines applications. Pour donner une idée approximative des ressemblances/différences entre les deux logiciels, voici deux copies d'écran : Dreamweaver  Expression Web 
L'espace de travail
- Panneaux Dossiers/Fichiers : dans Expression Web, ce panneau se décline en deux versions : l'une réduite, celle que l'on voit ici, affichant simplement les dossiers et les fichiers, et l'autre plus conséquente, qui occupe l'espace central, avec un onglet intitulé Site Web. Signalons au passage que ces deux panneaux manquent cruellement d'un bouton Actualiser : l'insertion d'un nouvel objet dans l'arborescence ne rafraichit pas automatiquement celle-ci, sachant que la touche F5 ne fonctionne pas sur mon clavier...
- Panneaux CSS
- Document en mode fractionné
- Panneaux d'insertion d'objets
- Panneau Propriétés
- Sélecteur de balises
L'espace de travail s'organise en panneaux, eux-mêmes subdivisés en onglets. Panneaux et/ou onglets peuvent être ancrés n'importe où dans l'interface, ou être rendus flottants, indépendants de tout le reste. Par contre, une fois qu'un panneau est flottant, il semble impossible de le redimensionner.
Toutes les barres d'outils qu'on trouve dans EW sont entièrement personnalisables, comme on peut le faire dans Word ou Excel par exemple : supprimer des boutons, en ajouter, les déplacer, créer de nouvelles barres d'outils, bref, on peut réorganiser totalement l'espace de travail. Définir un site C'est une opération extrêmement simple avec Expression Web : on peut choisir de créer un site vide ou reprendre un site déjà existant. Dans les deux cas, il suffit d'indiquer l'emplacement du dossier. 
Il y a aussi la possibilité de créer un site à partir d'exemples prédéfinis : 
Dans ce cas-là, c'est toute une arborescence qui est construite (y compris avec les images) et tous les fichiers HTML sont basés sur un modèle .dwt. Il ne s'agit évidemment pas ici de "Dreamweaver Template", mais de "Dynamic Web Template", compatible avec Dreamweaver dans une certaine mesure. - On prendra garde de placer le fichier dwt dans un dossier Templates lorsqu'il est créé avec EW, sinon il est inopérant si on souhaite le récupérer dans DW : ce dernier garde bien trace des régions modifiables, mais ne fait aucune mise à jour si le modèle est modifié.
- Si on récupère un modèle fait avec DW, comprenant autre chose que des simples régions modifiables (par exemple, des régions facultatives, répétées) il devient inutilisable dans EW : les pages faites à partir du modèle ne possèdent plus aucune région verrouillée, donc plus de mises à jour des pages.
À part ça, si on s'en tient à des modèles basiques, composés de simples régions modifiables, ce type de documents sera donc exploitable sous l'un ou l'autre de ces logiciels, en prenant quelques précautions. On peut aussi noter que les pages qui composent ce site prédéfini sont très soignées, codées en XHTML, avec des mises en page et des présentations basées sur des feuilles de style externe CSS. Aperçu dans le navigateur J'ai particulièrement apprécié les options offertes ici : possibilité bien sûr de visualiser les pages dans tous les navigateurs, pour peu qu'ils soient installés mais aussi de faire un aperçu en fonction de certaines tailles de fenêtres, allant du 640 x 480 (que j'ai supprimé sur cette copie d'écran) jusquà 1024 x 768 : 
Et aussi et surtout, la possibilité de faire un aperçu en lançant tous les navigateurs en même temps. Feuilles de styles La gestion des CSS est très complète et m'a vraiment emballé. Je n'ai rien trouvé à redire au rendu des CSS dans EW, qui reproduit pratiquement à l'identique ce qu'on verra dans un navigateur. De même, aucune différence par rapport au rendu de DW.
On pourra regretter cependant que EW ait cédé lui aussi à la tentation des "couches" (calques dans DW), éléments en positionnement absolu, qui donnent tant de mal aux personnes débutantes... Le processus de création de styles dans Expression Web diffère très peu de celui de Dreamweaver, on en comprend donc très vite les mécanismes. Et là, dans le domaine CSS, je vais le dire tout net : Expression Web fait mieux que Dreamweaver, en raison de simples petits ajouts qui en facilite la gestion globale. 
On a des possibilités de tris très intéressantes : par défaut, le panneau affiche les règles CSS dans l'ordre où elles sont écrites dans le document mais on peut les trier par noms d'éléments, ou bien par type (sélecteurs d'éléments, d'ID, de classes, etc).
Visuellement, la liste de toutes les règles est très claire : tous les sélecteurs d'éléments sont affichés avec un point bleu sur leur gauche, les sélecteurs d'ID avec un point rouge et les sélecteurs de classes avec un point vert.
De plus, la présence d'un cercle autour d'un de ces points indique si le sélecteur est utilisé ou pas. Ainsi, dans la copie d'écran ci-dessus, on peut détecter que le sélecteur .float_right n'est utilisé nulle part dans le document. Enfin, sachant que l'ordre d'écriture des règles CSS peut être très important, on peut à tout moment déplacer une règle vers le haut ou vers le bas simplement à l'aide de la souris. Bonus : on peut aussi savoir combien de fois un sélecteur est utilisé dans une page, et demander à Expression Web de sélectionner toutes les instances de cette règle. 
La fenêtre d'édition des styles est claire et bien pensée : comme dans Dreamweaver, elle se présente sous forme de catégories mais offre en plus un aperçu des propriétés CSS qui sont mises en oeuvre, ainsi qu'une description complète de la règle CSS en cours d'édition.
Toute catégorie qui a été modifiée apparait en gras sur la gauche. Très pratique quand on veut faire une modification, on repère tout de suite celle qui nous intéresse, cela évite de naviguer à travers toutes les autres catégories à la recherche de celle qu'on avait modifié un instant auparavant. 
Et enfin, on a bien sûr une fenêtre d'édition directe via le panneau Propriétés CSS, où l'on peut choisir d'afficher toutes les propriétés CSS, ou juste celles qui sont en cours pour un sélecteur donné, avec le bouton Résumé.  | 
Sélecteur de couleurs bien pensé : Expression Web affiche les couleurs utilisées dans le document, avec leur notation hexadécimale au survol de la souris. | En mode Code, une fonctionnalité très pratique : il suffit de faire un Ctrl-clic sur un sélecteur pour arriver directement au code correspondant dans la CSS, et ce même s'il s'agit d'une feuille de style externe. 
Images J'aime bien la gestion des images. On a la possibilité de demander à faire une miniature d'une image, EW la réduit, l'enregistre par défaut sous le nom xxx_small.gif, et fait un lien dessus pointant vers la grande image. C'est rapide et bien fait.
La taille par défaut des vignettes générées peut être paramétrée en se rendant dans le menu Outils > Options de l'éditeur de pages > Créer une miniature. 
Toutes les images peuvent être retouchées via la barre d'outils des images : contraste, luminosité, pivoter, etc. C'est là aussi que l'on peut créer des zones réactives et appliquer divers effets. 
Dynamique Pour l'instant, Expression Web ne supporte qu'un seul langage, ASP.NET 2.0 et possède donc bien sûr les outils nécessaires pour faciliter la création de ce type de pages dynamiques, en y associant une base de données comme SQL Server, Access, MySQL, Postgres, Oracle, du moment que celle-ci supporte une connexion ODBC. Une boîte à outils de contrôles ASP.NET est donc présente, permettant de glisser-déposer des contrôles ASP dans la page. Il y a en outre la possibilité de créer des pages-maîtres, qui définiront une mise en page commune à un ensemble de pages. 
À noter que contrairement à DW, aucun besoin de définir un serveur d'évaluation. Il est embarqué d'office avec EW. Un message parut sur un forum EW laisse entendre que ses futures versions pourrait intégrer le PHP...Affaire à suivre... XML et XSLT sont pris en charge. Un simple glisser-déposer d'un fichier XML dans un document et les données s'affichent sous forme de tableau, données qui peuvent ensuite être manipulées aisément en mode Création (affichage conditionnel, mise en forme, etc). Travailler le code Le sélecteur de balises fonctionne comme celui de DW. En mode Création, selon la position du curseur, le nom de la balise en cours s'affiche en haut du bloc à gauche. L'ensemble de la balise et de son contenu peut être glisser-déposer ailleurs dans la page. 
De plus, on peut travailler les dimensions de la boite (marges, contenus) directement à la souris : 
En mode Code, la vérification de la validité du code est efficace : balises non fermées ou mal fermées, mal imbriquées etc. sont signalées immédiatement : 
EW possède aussi un module "Extraits de codes", accessible via un simple Ctrl+Entrée. C'est un peu l'équivalent des Fragments de code de DW, mais curieusement, ce module d'EW n'est accessible qu'en mode Code. Pour accéder à un extrait de code, il suffit de taper les premières lettres du mot-clé défini lors de la création. 
Un certain nombre d'extraits de code sont proposés par défaut et on peut donc bien sûr s'en créer des nouveaux en cliquant sur Personnaliser la liste. Points faibles : au fil du temps, cette liste peut s'allonger démesurément. Retenir tous les mots-clés affectés aux extraits de code me semble problématique. Il n'y a pas non plus de possibilités de ranger, classer ces codes, via un système de catégories ou de dossiers par exemple. On aura donc tout intérêt à se créer des mots-clés pertinents de façon à s'y retrouver rapidement. 
Les interventions en mode Code sont facilitées par Intellisense, une aide à la frappe (Indicateur de codes dans DW).
Le fonctionnement est identique à celui de DW : taper un <, et une liste déroulante propose une liste de balises. Une fois la balise sélectionnée, taper un espace propose une liste des attributs possibles.  |  | Une fonctionnalité que j'apprécie : la possibilité de créer des signets en mode Code. Attention, il ne s'agit pas d'ancres HTML, mais de simples repères visuels qu'on peut attacher à un ou plusieurs endroits du code, à gauche des numéros de ligne, ce qui permet de naviguer rapidement d'un point à un autre du code.
Malheureusement, EW ne va pas assez loin dans la gestion de ces signets : aucun moyen d'en avoir la liste sous les yeux, par exemple d'un simple clic droit, afficher la liste de tous les signets, chaque signet prenant comme intitulé le début de la ligne pour savoir de quoi il s'agit, puis un simple clic permettrait d'atteindre la ligne en question (exactement ce qu'on peut trouver dans un éditeur tel que PSPad). 
Gestion du site EW dispose d'excellents outils de rapports : compatibilité, accessibilité, CSS. 
Rien que le rapport CSS peut fournir trois types d'informations : Liens de feuilles de style, Erreurs CSS et Utilisation CSS.
Le rapport Erreurs CSS est très utile, il permet :
- de repérer les sélecteurs créés dans une CSS, mais non utilisés dans les pages.
- à l'inverse, de repérer les sélecteurs utilisés dans les pages, mais non définis dans une CSS,
- les styles qui n'ont pas la même casse entre la CSS et le document HTML. Le rapport Utilisation CSS, quant à lui, fait un bilan général et affiche les sélecteurs utilisés, les pages qui utilisent ces sélecteurs et l'emplacement des CSS. Des rapports détaillés sur l'ensemble du site, avec de nombreuses options qui permettront de faire des bilans. Un vérificateur de liens digne de ce nom, à savoir qu'il vérifie si les liens externes sont toujours valides (si la page-cible répond ou pas). On trouve aussi le bilan des fichiers non liés (fichiers orphelins dans DW) et on peut faire des listings de fichiers selon des critères de date (paramétrables). 
L'ensemble de ces rapports est vraiment complet, bien construit et donne une vision claire de la situation du site à tout moment. En résumé : Points forts - Très bonne maîtrise de la gestion des feuilles de style
- Prise en compte des problèmes de compatibilité, grâce aux rapports de sites
- Intégration du format XML très réussie
- Mise en page par glisser-déposer relativement souple : le déplacement de blocs de codes en mode Création permet d'aller plus vite dans des opérations courantes.
- Création instantanée d'un site au complet avec ses multiples rubriques, mise en page déjà élaborée, quelques images déjà incorporées.
- Une interface soignée et bien conçue : EW est un logiciel plutôt agréable à utiliser dans l'ensemble.
Points faibles Précisons ici que ces points faibles ne bloquent aucunement le flux de production, ils sont cependant parfois gênants ou déroutants. - Impossible de mettre côte à côte deux documents, pas de disposition de fenêtres en mosaïque verticale ou horizontale, ou en cascade. Seul moyen de voir deux documents en même temps : demander à EW d'en ouvrir un dans une nouvelle fenêtre...ce qui ouvre une deuxième instance d'EW. Pas pratique du tout.
- Impossible de redimensionner les panneaux quand on les détache de l'interface.
- Insérer dans un document des objets (images par exemple) qui ne sont pas dans la racine du site : EW ne prévient qu'au moment où on enregistre la page en demandant où il faut sauvegarder ces objets. Mais comme on n'enregistre pas toutes les 5 mn, on ne sait plus de quoi il parle...
- À éviter absolument : la création de tableaux avec le module Tableaux de disposition. C'est abominable à manipuler et cela génère un code épouvantable. Dans DW, cela s'appelle Mode Mise en forme et c'est tout aussi terrifiant...
Conclusion Nous n'avons fait ici qu'un rapide survol d'EW, il y aurait bien sûr, encore beaucoup de choses à décrire. Il est encore trop tôt pour déterminer qui sera le public d'EW. Véritable outil d'édition Web professionnel, on imagine déjà que les utilisateurs de Frontpage l'adoptent. Il est probable aussi qu'il va bénéficier dans les entreprises de la renommée des logiciels de bureautique Word, Excel et autres. Est-ce que des professionnels déjà aguerris sur DW basculeront sur EW ? Je n'en suis pas sûr. Les deux applications font à peu près les mêmes choses. Il y a donc là tout un public à conquérir et ces deux applications devront rivaliser d'ingéniosité pour se démarquer. Certainement une bonne chose pour l'utilisateur final.
Pour des débutants, que ce soit Dreamweaver ou Expression Web, la prise en main est de toute façon toujours un peu douloureuse car tous deux sont des outils très professionnels. L'argument qui pourrait donc faire pencher la balance vers Expression Web, c'est son prix, nettement moins élevé que celui de Dreamweaver. Au final, EW m'a vraiment séduit, et je dirais même impressionné parfois (le document XML affiché immédiatement en tableau HTML, la souplesse de gestion des feuilles de style). C'est donc un logiciel qu'il faudra suivre de très près, surtout si Microsoft fait l'effort d'offrir un support PHP/MySql dans les prochaines versions. De plus, un peu de concurrence à Dreamweaver ne peut pas faire de mal... |
