Dreamweaver CS6 : Les nouveautés

Nouvelle approche des formulaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une des améliorations et propositions du HTML5 est d'améliorer considérablement la gestion des formulaires. Dreamweaver se devait de repenser le flux de travail quant à son utilisation. Vous allez donc en décrire les principaux avantages et les inconvénients que Adobe devrait gommer dans une prochaine mouture. Quoiqu'il en soit, vous allez voir en quoi cette nouvelle approche devrait convenir à un grand nombre d'utilisateurs.
07:06

Transcription

Dorénavant Dreamweaver propose une approche pour la préparation de nos formulaires un peu plus détaillée, plus orientée HTML5. En lieu et place d'un simple champ input text field dans lequel on pouvait choisir le type Dreamweaver égrène l'intégralité des éléments et beaucoup de types d'éléments de formulaires sont apparus comme E-mail, URL, Tél. et on va pouvoir venir renseigner de manière auto-typée l'intégralité de nos formulaires. On va voir que les flux de travail ont été repensés par l'équipe de Adobe et il va falloir s'habituer à une nouvelle approche qui sera certainement améliorée dans les versions à venir mais qui déjà commence à vraiment optimiser le flux de travail. Il y a des points positifs, des points négatifs. On va regarder dans un premier temps l'ensemble des points positifs. Pour commencer, je vais rajouter une balise d'élément de formulaire depuis soit la palette d'insertion Formulaire ou depuis le menu Insertion, ici, Formulaire, où j'ai accès à exactement au même type d'éléments. Dès l'instant où l'on place un élément de formulaire, on s'aperçoit que l'inspecteur de propriétés propose de nouvelles fonctionnalités qui n'étaient pas là auparavant comme No validate ou Auto Complete qui vont permettre de ne pas valider cet élément-là ou d'automatiquement auto-compléter les champs et également de pouvoir définir le type d'encodage des caractères accepté par les formulaires. Si je place mon curseur à l'intérieur du formulaire et que je place un simple Texte input on s'aperçoit qu'il n'y a plus de boîte de dialogue. C'est un des points positifs, Dreamweaver intègre directement un élément input de type Text avec un Name par défaut et un id par défaut à Text field, chose qu'il ne faisait pas auparavant puisqu'il reprenait à chaque fois la boite de dialogue qui nous demandait de renseigner l'id, le label, etc... avant de pouvoir nous donner accès à cette possibilité-là, c'est-à-dire d'intervenir sur l'inspecteur de propriétés. Il est vrai que maintenant, si je reprends ici et que je place un Nom directement on voit bien que le Name et l'id s'auto-complètent tous les deux par rapport à cette modification-là. On a donc cet accès rapide dessus mais le point négatif va être pour l'ajout du label. On avait, dans les versions antérieures une boite de dialogue qui s'ouvrait et nous demandait de définir les labels, maintenant il faut le faire dans un second temps. La première possibilité va être de sélectionner puisque mon élément est sélectionné, ici, sélectionner le Text field et venir cliquer sur Étiquette pour ajouter une balise label à l'intérieur. Ici, je pourrais venir ajouter Nom: On voit bien que cet élément-là peut se mettre en place aussi rapidement. Le souci est que, pour des raisons d'accessibilité, il est conseillé de ne pas du tout encapsuler la balise input à l'intérieur d'une balise label mais, bien au contraire, de séparer, d'utiliser l'attribut for pour la balise label afin de la mettre en relation avec le champ de saisie avec lequel elle va être associée. Je vais supprimer cette partie-là, je vais sélectionner la balise label, ici, et, avec un clic droit, je vais pouvoir faire Supprimer la balise donc j'ai supprimé ma balise. Maintenant je vais, avec input toujours sélectionné, appuyer sur la flèche gauche de mon clavier pour placer mon curseur juste avant ce champ input et, cette fois-ci, placer l'étiquette. Je vais pouvoir remplir l'étiquette de la même manière Nom : mais il va falloir que je vienne manuellement à l'intérieur de la balise mon attribut for, et là il va falloir que je donne exactement le même nom que le champ avec lequel je veux l'associer. On s'aperçoit que ça a été mis en place, je vais nettoyer le code pour mieux le voir. C'est un peu plus long mais c'est un flux de travail qui devra s'améliorer dans les versions prochaines. D'ores et déjà il faut déjà pouvoir commencer à intégrer ce type de démarche et d'approche. Un point positif quand même c'est que si je sélectionne ce champ-là, je vais pouvoir changer le nom. Je vais pouvoir passer sur Name, voilà. Dès l'instant où je modifie l'identifiant et la balise name de ce champ regardez ce qui se passe au niveau de l'attribut for, lui aussi a adapté, modifié son remplacement. Donc on n'est pas non plus retourné dans des complexités de gestion et de flux de travail avec cette séparation entre label et input. C'est quelque chose qu'il faut prendre en compte au niveau de notre manière d'approcher la création de formulaires. Revenons sur ce champ input, ici et regardons que l'inspecteur des propriétés a été un peu modifié, ici et on retrouve toute une série de paramètres comme : disable, autofocus, required, read, auto complete on a même les list data, il faudrait créer un data list, ici, pour pouvoir venir accéder à ces éléments d’information. On s'aperçoit qu'on a toutes les propriétés propres à HTML5 qui sont apparues dans Dreamweaver. Ici le champ Place Holder qui serait un garde place pour pouvoir taper votre nom ou toutes ces informations qui pourraient être distribuées aux internautes. Patter aussi, qui accepte des expressions régulières et qui va permettre de pouvoir définir les types de caractères qui sont autorisés ou non dans ce champ de saisie. Egalement la balise Formulaire, ici, qui va permettre d’attribuer des champs qui ne seraient pas inclus dans une balise formulaire qui seraient épars sur la page à venir s'intégrer à l'intérieur de ce formulaire au moment d'être envoyés. On n'a pas accès ici au circuit de validation mais rappelez-vous quand même que vous avez la possibilité d'utiliser la librairie Spry également et de pouvoir utiliser des validations de champs de texte, de zones de texte, de cases à cocher, etc.. qui pourront être utilisés aussi bien depuis la palette formulaire que depuis le menu Insertion / Spry, ici, pour pouvoir apporter ces scripts de validation au cas par cas, au champ par champ. Enfin, un autre élément qu'il faut prendre en considération c'est que Dreamweaver, ici, ne va pas se conduire de la même manière si on insère un champ de formulaire dans la partie d'affichage, la partie de création, ou dans la partie code. Regardez, si je me place dans la partie code, ici, et que je viens insérer simplement un input field, un text field de base, simplement la balise input text type a été placée et je n'ai aucune information placée comme name ou id, il faut maintenant, manuellement, venir les placer y compris le label. Il est donc vrai qu'il est plus rapide de créer un formulaire depuis l'espace d'affichage, l'espace de création mais toutes les possibilités sont ouvertes donc on peut travailler aussi bien en mode code qu'en mode création, il faut simplement prendre en considération que maintenant Dreamweaver nous propose l'intégralité des balises de type HTML5 et que le flux de travail a été dissocié pour nous permettre d'aller plus vite. On n' a plus cette case de labels à remplir au départ.

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 !