Adobe Creative Suite 6 : le dossier

Stéphane Ruscher
Spécialiste informatique
16 août 2012 à 18h22
0
0

La CS6 côté web : Dreamweaver et Muse

Le web est le domaine de la création numérique sur lequel Adobe était le plus attendu avec cette Creative Suite 6 : en 2 ans, le web a beaucoup changé... Et pas forcément dans le sens d'Adobe ! Entre l'essor de HTML5 et les déboires de Flash sur mobile, qui ont finalement poussé à l'abandon du plug-in sur smartphone et tablettes, Adobe se devait de réagir. La CS6 semble apporter une réponse plutôt cohérente : les outils historiques tels que Dreamweaver, Flash ou Fireworks évoluent vers les standards (HTML5, JavaScript, CSS3...), et l'éditeur inaugure deux nouveaux logiciels, malheureusement réservés à l'offre Creative Cloud : Muse et Edge, également orientés vers la création de sites et d'animations utilisant les standards.

Dreamweaver CS6 : multi écrans au programme

Quoi de neuf dans Dreamweaver CS6 ? Un temps critiqué pour la mauvaise qualité et lisibilité du code généré ainsi que pour ses mises en page basées sur des tableaux, Dreamweaver a su évoluer dans le bon sens. Celui-ci s'oriente en effet vers un éditeur misant davantage sur la complémentarité entre codage à la main et création WYSIWYG, et en mettant le paquet sur la simplification de l'édition des CSS.

01F4000005357904-photo-dreamweaver-cs6-interface-designer.jpg


La version CS6 continue sur la lancée. L'interface n'évolue pas fondamentalement : on retrouve ce qui a fait le succès des 2 versions précédentes : une harmonisation avec les autres logiciels de la suite d'Adobe, et le choix entre de nombreux espaces de travail prédéfinis, correspondant aux différents métiers du web : codage, design, ou encore création d'applications. Les nostalgiques de feu Macromedia Studio retrouveront même la disposition « Classique » reprenant les barres d'outils du logiciel avant sa fusion.

012C000005357902-photo-dreamweaver-cs6-interface-codeur.jpg
012C000005357900-photo-dreamweaver-cs6-interface-classique.jpg


La principale nouveauté de Dreamweaver CS6 suit une tendance actuelle du web : la création de designs dits « adaptatifs » (Responsive design en anglais) Pour les non-web designers, il s'agit de créer des mises en pages fluides, qui s'adaptent à différentes largeurs d'écran, en modifiant profondément la mise en page du site selon les différentes tailles, mais en n'utilisant qu'une seule et même feuille de style. On voit évidemment l'intérêt d'un design adaptatif : proposer un seul et même site s'adaptant automatiquement à un écran d'ordinateur, un smartphone, ou une tablette !

01F4000005357906-photo-dreamweaver-cs6-responsive-design-creation.jpg


L'implémentation de la fonctionnalité est plutôt bien vue, et basée sur des grilles prédéfinies, pour lesquelles on spécifiera un nombre de colonnes pour chacun des 3 écrans. La page créée inclut un élément Div indispensable, le gridContainer, dans lequel on va placer d'autres éléments Div spécifiques. 3 boutons permettent de basculer en un clic entre les modes smartphone, tablette et desktop, et pour chaque mode, on pourra agencer les Div selon le nombre de colonnes disponibles sur chaque écran. Dreamweaver fait le reste avec une feuille de style et un fichier JavaScript. Réalisez un aperçu dans votre navigateur préféré, redimensionnez la fenêtre et observez !

012C000005357908-photo-dreamweaver-cs6-responsive-design-desktop.jpg
012C000005357910-photo-dreamweaver-cs6-responsive-design-resolution.jpg


Bien entendu, de nombreux développeurs préféreront coder tout ça « a la mano » mais on peut tout de même saluer l'effort d'Adobe pour fournir une solution simple permettant de réaliser un site adapté à plusieurs écrans à partir des mêmes éléments.

Toujours concernant la partie CSS, la version CS6 de Dreamweaver se dote d'un éditeur de transitions CSS plutôt pratique pour créer des animations sur certains éléments d'une page sans avoir recours à JavaScript. Les principaux navigateurs web prennent désormais en charge les transitions CSS, même s'il est encore nécessaire d'utiliser des préfixes spécifiques à chaque navigateur pour s'assurer de la compatibilité.

01F4000005357912-photo-dreamweaver-cs6-transitions-css.jpg


La bonne nouvelle, c'est que le panneau de création de transitions CSS inclut cette éventualité : le code généré automatiquement par l'assistant ajoute à la feuille de style toutes les variations « vendor specific » ainsi que la version générique de la propriété. La boite de dialogue permettant de créer les transitions est des plus simples : les champs permettent de choisir facilement le type d'élément à animer, la ou les propriétés à changer, la durée de la transition (ainsi que son délai éventuel) et la valeur finale. Là encore, rien que l'on ne puisse pas faire manuellement, mais la fonctionnalité est un bon exemple de ce que Dreamweaver fait de mieux : simplifier l'application de fonctionnalités des navigateurs modernes.


Adobe Muse : Dreamweaver pour les nuls

Alors que Dreamweaver s'oriente de plus en plus comme un croisement entre un environnement de développement et un éditeur WYSIWYG, Adobe effectue un retour curieux mais pas inintéressant vers le 100% WYSIWYG avec une nouvelle application, Muse, réservée aux utilisateurs du Creative Cloud. Ici, le but est en quelque sorte de proposer à nouveau une application simple permettant de créer des sites web sans ligne de code, en empruntant un fonctionnement proche d'une application de PAO. D'ailleurs les auteurs de l'application en disent long : il s'agit de l'équipe d'InDesign.

L'interface de Muse est agréable, reprenant des éléments de Dreamweaver mais en les simplifiant à l'extrême : on garde le concept du panneau de propriétés latéral, mais les différents onglets ne touchent pas à des éléments trop techniques, et on reste dans des propriétés de mise en page classiques : réglages du texte, des couleurs, de l'habillage des éléments... On apprécie également l'accès depuis la barre d'outils principale à des options de retouche photo basique pour agrémenter les éléments de biseaux, lueurs ou ombres portées, et un outil permettant de créer des bords arrondis pour chacun des angles d'un bloc.

012C000005358532-photo-muse-polices-creation-barre-d-onglets.jpg
012C000005358534-photo-muse-polices-etat-boutons.jpg


L'application s'articule essentiellement autour de deux modules : le plan, qui permet de créer l'architecture du site, et la partie Conception, qui se présente comme un éditeur WYSIWYG classique. La principale différence entre ce dernier et un logiciel comme Dreamweaver est l'absence totale de vue du code. Muse est exclusivement visuel : vous créez des formes et des zones de texte en les délimitant, vous ajoutez des images par simple glisser/déposer, et surtout, vous disposez de nombreux éléments prédéfinis tels que des barres de navigation, des modules de diaporama ou encore des composants issus de services tels que Google Maps.

01F4000005358538-photo-muse-polices-widgets-barre-outils.jpg


Côté conception de l'architecture du site, là encore tout est très visuel : chaque page créée est représentée de manière graphique sur un plan, et affublée de signes + à gauche, à droite et en bas de la vignette. Cliquez sur un de ces signes et une autre page se crée, au même niveau ou au niveau inférieur. La partie conception permet également de créer des gabarits de page que l'on pourra alors réutiliser facilement.

01F4000005358530-photo-muse-plan.jpg


Il va de soi que Muse s'adresse à un public bien spécifique, désirant publier du contenu web rapidement et sans effort. Mais alors qu'on pouvait craindre le pire et se retrouver avec des sites « clé en main » bardés de Flash et de technologies propriétaires, bonne surprise : pour les composants prédéfinis, Adobe a eu recours au framework Javascript JQuery ! En outre, on appréciera l'intégration intuitive des polices TypeKit, inclues dans l'abonnement Creative Cloud, une interface permettant de les ajouter et de les utiliser dans ses projets Muse en quelques clics. Ce dernier point justifie sans doute en partie l'exclusivité de l'application à l'offre Creative Cloud. Du moins, ça fait passer la pilule...

01F4000005358536-photo-muse-polices-typekit.jpg
Modifié le 01/06/2018 à 15h36
0
0
Partager l'article :

Actualités récentes

Comparatif antivirus 2020 : quel est le meilleur service du marché ?
Le volant de course Logitech G29 Driving Force de nouveau à prix cassé !
Tesla arrête sa politique de retour sous sept jours avec remboursement aux USA
Comparatif VPN 2020 : quel est le meilleur VPN du marché ?
Des chercheurs californiens utilisent l'impression 3D pour renforcer les bâtiments en béton
Suite Office : 30 ans de bureautique au service de la productivité
Amazon : il n'y a jamais eu autant de faux avis que depuis le début de la pandémie
L'UE va mettre à jour une directive anti-blanchiment visant notamment les cryptomonnaies
6 mois, 2,5 Tb/s de données : Google dévoile une attaque DDoS extrême 3 ans après
GM va faire rouler des voitures autonomes sans conducteur à San Francisco
scroll top