Quelques semaines après la version anglaise, Adobe sort la version française de Dreamweaver. Cette nouvelle mouture était particulièrement attendue puisque c'est la première depuis le rachat de Macromedia. On pouvait donc se demander ce qu'elle allait nous réserver.

Une très bonne cuvée dans l'ensemble, où les efforts ont porté vers l'intégration avec les logiciels Adobe tels que Photoshop CS3 ou Bridge, la visualisation de pages Web sur téléphones portables grâce à Device Central, une volonté toujours plus affirmée de respecter les standards du Web en proposant des outils de vérification de code toujours plus efficaces couplés au site Web CSS Advisor, sans oublier les incontournables fonctionnalités AJAX, basées sur la bibliothèque Spry, . Cette bibliothèque est également en oeuvre lors de l'utilisation d'effets spéciaux si populaires aujourd'hui sur le Web : panneaux à onglets, barre de menus déroulants, etc.

La partie CSS s'est étoffée de nouvelles fonctionnalités, améliorant la gestion globale des CSS (déplacer, renommer, etc) ainsi que la vérification de compatibilité avec les navigateurs.

Nouveau document

Le panneau Nouveau document s'est enrichi de tout un ensemble de mises en page prédéfinies, basées sur des feuilles de style. Quand un modèle a été sélectionné, on peut choisir l'emplacement de stockage de la feuille de style : en interne, dans l'en-tête du document ou en externe dans un fichier séparé, et on peut aussi relier directement le document à une CSS externe déjà existante.

Une fois le document créé, on remarquera que le code CSS généré est largement, très largement commenté. C'est vraiment une très bonne chose, presque chaque règle CSS est expliquée : pourquoi telle propriété est utilisée, quelles sont ses effets, les éventuels effets secondaires dans certains navigateurs, etc. C'est extrêmement bien documenté, l'utilisateur n'est pas laissé dans l'ignorance et c'est un excellent moyen d'apprendre et de comprendre les CSS.

Styles CSS

Le panneau Styles CSS s'est lui aussi étoffé de divers menus contextuels supplémentaires, facilitant certaines opérations sur les règles CSS, opérations qui manquaient cruellement aux versions précédentes de Dreamweaver, à commencer tout bêtement par des copier/couper/coller/supprimer...

Il y aussi désormais en plus les possibilités de :

• Renommer la classe : comme son nom l'indique, on peut renommer la classe et toutes les instances de cette classe à travers tous les documents.
• Modifier le sélecteur : permet de modifier non seulement le nom du sélecteur mais aussi d' ajouter ou supprimer des sélecteurs. On peut ainsi créer des sélecteurs descendants, sélecteurs groupés ou autre en restant dans le panneau CSS, chose qu'il fallait faire en mode Code auparavant.
• Déplacer les règles CSS : par exemple, une règle CSS placée en interne dans un document peut facilement être transportée dans un fichier CSS externe qui existe déjà, ou dans un nouveau. De plus, si cette règle existe déjà dans la destination, Dreamweaver le signale et propose d'arrêter le transfert ou de copier quand même la règle.

Et enfin, sachant que l'ordre d'écriture des règles peut être important, on peut réordonner la position des règles directement à la souris dans le panneau, par de simples glisser-déposer (il était temps !).

On notera d'autre part la présence dans le menu Édition > Préférences > Format de code, d'une nouvelle option Mise en forme avancée, dotée d'un bouton "CSS..." permettant de régler les formatages d'écriture des CSS à sa convenance :

CSS Advisor

Signalons enfin l'apparition d'une option Vérification de la compatibilité avec les navigateurs, qui recense tous les éventuels problèmes CSS qui pourraient affecter les affichages dans certains navigateurs. Au bas de cet onglet, via un lien, ou d'un simple clic-doit sur l'erreur, option Plus d'infos, on accède directement au site d'aide CSS Advisor, qui permettra (peut-être...) de trouver des solutions aux problèmes, et où chacun peut participer et partager ses expériences via des commentaires. De nombreux bugs, connus et moins connus sont répertoriés, avec la façon de les éliminer ou de les contourner. Des forums (anglais) sont aussi disponibles.

Pour l'anecdote : la notion de "calques" a disparu de Dreamweaver : on les appelle maintenant des div PA ou Éléments PA (PA pour Positionnement Absolu). Du coup dans les Comportements, on ne dit plus "Afficher-Masquer les calques", mais "Afficher-Masquer les éléments" :-)

La bibliothèque Spry

Les modules Spry représentent certainement la plus grosse nouveauté dans Dreamweaver CS3.

Spry est une bibliothèque Javascript (nom officiel : cadre applicatif Spry ou framework en anglais) permettant de créer des interfaces enrichies, avec des barres de menus déroulants, des panneaux à onglets, d'incorporer du XML dans les documents HTML et en faire des affichages répétés, dynamiques, de mettre à jour des sections de document sans recharger toute la page, de valider des contrôles de formulaire instantanément, etc.

C'est ce qu'on appelle des widgets.

Bref, c'est l'irruption d'AJAX (Asynchronous JavaScript And XML) dans Dreamweaver.

Il n'est donc pas forcément nécessaire d'être un as de la programmation pour se servir de cette bibliothèque, puisque tout va se faire à l'aide de boîtes de dialogues, mais on peut remarquer quand même que son utilisation demandera de bonnes connaissances CSS et HTML quand il s'agira d'adapter tout cela à une charte graphique déjà en place, sans oublier d'éventuelles connaissances Javascript pour modifier certains paramètres.

On accède aux outils Spry par le panneau Insertion :

Ou par le menu Insertion > Spry

1 - Cette série d'outils permet d'incorporer des données XML à un document.Une fois qu'un ensemble de données a été défini, il suffit d'ouvrir le panneau Liaisons et de glisser-déposer des données dans la page, qui pourront être relées ou non à des regions détaillées, toujours au sein de la même page, et le tout sans recharger le document.

C'est plutôt bien réalisé et assez facile à mettre en place. Par contre, on pourra y trouver un inconvénient important : il sera impossible de faire valider les documents utilisant cette technologie via les outils de validation du W3, en raison de l'emploi d'attributs de balises totalement absents des listes du consortium, et encore moins avec les propres outils de Dreamweaver...

Exemple.

2 - Cet ensemble d'outils permet des vérifications "en temps réel" de données rentrées dans des objets de formulaire, avec affichage des erreurs directement sur la page,à côté du champ fautif. C'est très complet au point de vue des vérifications effectuées, beaucoup plus en tout cas que ce que fait le comportement Javascript Valider le formulaire, plutôt médiocre il faut dire.

Gestion d'une validation Spry de champ de texte par le panneau Propriétés :

On peut ainsi imposer des longueurs de texte minimales et maximales, obliger certains champs à ne recevoir que certains types de données (date, chiffres) avec toutefois un bémol : certains types de données n'ont été prévu que pour fonctionner aux...États-Unis ou au Canada (N° de téléphone, code postal, N° sécu...). D'autre part, on peut se demander pourquoi on ne trouve pas dans ces outils de vérificateurs de boutons-radios.

Exemple.

3 - Ces derniers outils permettent de créer des interfaces enrichies, à l'aide de barres de menus, de panneaux à onglets, etc. Là encore, c'est plutôt bien fait, uniquement à base de styles CSS. Pour personnaliser ces interfaces, il faudra bien connaitre ces derniers.

Gestion d'une barre de menus Spry dans le panneau Propriétés :

Exemple.

Tous les scripts générés, ainsi que les feuilles de style de la bibliothèque Spry, sont externalisés dans des fichiers à part, situés dans un dossier nommé par défaut SpryAssets. On peut tout à fait changer cet emplacement par défaut en passant par l'édition de la définition du site. Et on oubliera pas bien entendu de les télécharger sur le serveur lors de la publication du site...

Intégration avec Photoshop, Bridge, Device Central

L'intégration avec Fireworks existait depuis longtemps, mais aujourd'hui DW peut travailler aussi avec d'autres logiciels tiers.

Ainsi, il est désormais possible dans Photoshop CS3 de sélectionner une partie d'un fichier PSD, voire même plusieurs calques, de les copier et les coller dans Dreamweaver, qui proposera automatiquement des options d'optimisation de l'image pour la rendre compatible avec les formats en vigueur sur le Web.

Dreamweaver peut également communiquer avec Bridge, logiciel autonome permettant de gérer les ressources d'images de façon extrêment poussée (tris, recherches, inscription de méta-données, etc.)

À l'inverse, dans Bridge, on peut facilement demander à placer une ou plusieurs images dans un document ouvert dans Dreamweaver par simple glisser-déposer.

Pour finir, Adobe a pensé à ceux qui ont besoin de voir le rendu de leurs pages HTML sur un appareil mobile. Dreamweaver possède un nouvel Aperçu dans le navigateur :

Ceci ouvre la page en cours dans l'onglet Émulateur de Device Central.

Device Central offre une quantité impressionnante d'appareils mobiles prédéfinis, avec toutes leurs caractéristiques, la possibilité de créer une liste de favoris, d'exporter ou importer des profils. L'émulateur affiche la page comme elle se présenterait dans Opera SSR (Small Screen Rendering), à moins qu'une feuille de style spéciale ne gère l''affichage.

Comportements

Quelques nouveaux comportement sont apparus, concernant uniquement des effets spéciaux que l'on peut appliquer sur certaines parties d'une page. Ces comportements sont aussi basés sur Spry.

L'utilisation est simple : comme pour tous les comportements, il faut sélectionner un élément déclencheur, qui peut être n'importe quelle balise, puis sélectionner dans la boite de dialogue l'élément-cible sur lequel sera appliqué l'effet :

À part cela, rien de nouveau dans les comportements. On notera tout de même avec satisfaction que l'abominable Afficher le menu contextuel est passé à la trappe, dans la section Obsolètes...En espérant qu'il disparaîtra définitivement dans l'avenir !

Quelques exemples.

Adobe Dreamweaver Developer Toolbox

Sous ce nom se cachent les extensions développées par la société InterAKT (alias Adobe Romania aujourd'hui), rachetée l'année dernière par Adobe. L'ADDT 1.0 n'est pas inclus dans Dreamweaver. Il faut l'acheter en supplément au prix de 299 $ (http://www.adobe.com/products/dreamweaver/addt/) et prend la suite des anciennement nommés MX Kollection 3.7.1 ou MX Kollection Pro 3.7.1.
Les sites créés exclusivement avec ces modules restent compatibles avec ADDT, hormis ceux qui utilisaient un modèle de serveur PHP_ADODB.

Essentiellement destiné à la création et gestion de sites dynamiques, cette extension offre une quantité intéressante de fonctionnalités :

Via le menu Insertion :

Dans les Comportements serveurs :

Après le rachat d'Interakt par Adobe, on espérait bien voir ces comportements intégrés d'office à Dreamweaver...Dommage que ce ne soit pas le cas, car côté dynamique en natif, rien n'a changé dans les comportements serveurs.

Certes, les 300$ que coûte ADDT peuvent paraître rebutant, mais il est clair qu'avec une telle collection d'outils, cette somme est vite amortie. Les temps de développement sont nettement réduits.

Conclusion

Dreamweaver CS3 n'apporte pas de révolution majeure dans le développement Web, mais il continue d'évoluer dans le bon sens, en suivant les tendances du jour, comme avec les objets Spry par exemple, et en collant au plus près des attentes des utilisateurs. Il s'est nettement affiné sur la gestion des feuilles de style et s'est pourvu de nouvelles fonctionnalités qui rendent l'outil toujours plus intéressant.