Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Appliquer des styles depuis le nuancier jQuery Mobile

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Une seconde nouveauté de Dreamweaver CS6 qui concerne l'utilisation de jQuery Mobile est le panneau Nuancier jQuery Mobile qui va permettre de personnaliser de manière ergonomique et simple les divers composants de l'interface. Le tout en temps réel et tout en naviguant dans le projet,
04:38

Transcription

Une autre nouveauté de Dreamweaver CS6 en relation à la librairie JQuery Mobile va venir de la souplesse, de la personnalisation de ces thèmes. Donc on a vu qu'on peut réaliser des thèmes, qu'ils vont se préparer sous forme de trash : a, b, c, d, etc, et maintenant dans Dreamweaver, depuis le menu Fenêtre, Nuancier, JQuery Mobile, je vais avoir ici une nouvelle palette qui va me permettre, en fonction des éléments sélectionnés, d'accéder à des thèmes ou pas, ou des sous-thèmes et pouvoir modifier, en fonction de l'élément dans lequel je suis. Donc, si par exemple, je vais dans la page 3, vous vous rappelez qu'on avait un bouton. Ce bouton, Activer/Désactiver, va se retrouver ici. Voilà, Activer/Désactiver et ce bouton-là, je peux le sélectionner et modifier ses couleurs, par exemple, le transformer en bouton jaune ou blanc, et je vais pouvoir, bien entendu, accéder aux thèmes qui sont présents. Donc là, c'est le thème D, et comment le thème va t-il se rajouter ? Tout simplement, par ce simple ajout d'un attribut, qui va dire : data-theme D et on sait qu'il va aller chercher le Select pour le data-theme. Enfin, le Select en tant qu'objet pour le data-theme associé, qui va pouvoir prendre la couleur placée sur cet élément. Donc, c'est très simple d'utilisation et on peut aller un peu plus loin, c'est-à-dire qu'on peut revenir, par exemple, sur la partie page 2, là où l'on avait passé la série de boutons. Et sur cette série de boutons, ils se retrouvent ici les boutons. D'accord, donc c'est très simple, dès que je sélectionne un bouton, j'ai une icône qui est l'arrow-r, la flèche de droite est sélectionnée, on la voit ici, mais je vais pouvoir modifier le bouton de cette flèche, par un bouton Croix, vous voyez qu'en temps réel, il apparaît sur l'interface donc je vais pouvoir sélectionner ce bouton-là. Je fais un peu de place et je vais aller plus loin, je vais dire : je vais le mettre à défaut à gauche, en fait non, pas à défaut, je le veux à gauche, et là je le place sur la gauche, ce qui fait que quand je vais prendre le bouton droite ici, je vais pouvoir très bien mettre un autre type d'icône qui serait par exemple celui-là ou celui-là, Information, et je vais pouvoir dire que je le veux à droite, et je vais pouvoir positionner mes éléments de cette manière, et je pourrais même dire que sur cette partie-là, je ne veux pas de bouton, donc, je le supprime et ce bouton est parti de cette interface. Vous voyez, cette grande souplesse de personnalisation qu'on va pouvoir avoir sur les interfaces JQuery, depuis Dreamweaver CS 6. C'est vrai qu'on parle de cette nouveauté Nuancier JQuery Mobile mais je ne sais pas si vous l'avez remarqué, depuis tout à l'heure je travaille en code En direct, c'est-à-dire en mode rendu WebKit qui est quand même assez proche de la réalité, qui me permet en temps réel, de pouvoir non seulement naviguer dans l'interface utiliser ce navigateur qui a une partie haute qui est une pure merveille, qui permet de revenir page avant, page arrière, etc. d'utiliser le code, si j'ai besoin, en temps réel, de changer le contenu, Reset, voilà, il suffit d'actualiser, c'est parti, c'est magique ! Et puis ici depuis la partie Nuancier JQuery Mobile de pouvoir venir personnaliser les éléments comme on le souhaite. Je trouve que vraiment, l'IDE de Dreamweaver, avec cette assistance visuelle, qui n'écrit pas du code pour nous, mais qui va placer des éléments de code pour nous, c'est-à-dire que le code n'a pas à être ni plus propre ni moins propre, c'est exactement le code qu'on pourrait avoir si on était développeur. Je trouve que cet outil d'assistance à la création d'interface pour appareil mobile, c'est une petite pure merveille. C'est vrai que là, je m'emporte un peu, mais c'est mon sentiment personnel. Après cette envolée, regardons quand même quelques ressources, car il est vrai que là j'ai agit principalement sur des couleurs et très peu sur des modifications profondes d'interface. Ici, sur le site toujours de jquerymobile.com/ressources, vous avez toute une série d'exemples où on voit qu'il y a des personnalisations qui peuvent être un peu plus lourdes, un peu plus fortes que simplement jouer sur des couleurs. Je vous invite à venir les regarder, à vous en inspirer et à pouvoir partir de là pour pouvoir décliner vos interfaces soit en utilisant Firefox CS6, soit TimeRoller, soit directement les CSS. Parce qu'après tout, il n'est que question de CSS. Et si vous venez dans la partie Thèmes, la partie vraiment de la CSS, alors, ici, elle a été compilée et minimalisée. Mais vous pouvez utiliser un thème Roller qui serait une base de départ, et qui ne serait pas minimalisée et ici partir sur les modifications que vous souhaitez apporter directement à chacune des propriétés, ce ne sont que des CSS encore une fois.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !