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

Dreamweaver CS6 : Les nouveautés

La balise <canvas>, mais encore ?

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
L'ajout de la balise fait également partie des éléments de média présents dans le panneau d'insertion. Ne vous emballez pas, car si Dreamweaver vous propose l'ajout de la balise, il vous incombe de prendre en charge l'ensemble des scripts qui vont la faire s'allumer. Profitez-en pour explorer de manière très subjective une de ses nombreuses possibilités d'utilisation.
04:37

Transcription

Une autre particularité de HTML5, c'est de fournir l'élément canvas, traduit ici par Zone de travail dans la palette d'Insertion Commun. Alors, ne nous excitons pas, la nouvelle version de Dreamweaver CS6 12.1 ne fait qu'intégrer cette balise canvas, et c'est tout, elle ne fait rien d'autre, elle ne va pas écrire les Java Script pour nous, elle ne va pas fabriquer tout ce qu'on pourrait créer autour de canvas. Alors je vais quand même profiter de cette animation pour vous présenter ce qu'on peut faire avec canvas, et quelles sont les capacités, les possibilités qui vont pouvoir s'ouvrir maintenant à nos animations. Alors, pour insérer cet élément canvas, je vais me placer ici, juste avant ces deux boutons, je vais sélectionner l'élément p, puis par la flèche gauche de mon clavier, je vais pouvoir basculer mon point d'insertion juste devant la balise p. Je vais pouvoir cliquer depuis le panel Insertion Commun ici, Zone de travail, ou depuis le menu Insertion Zone de travail, dans la partie haute de ce sous-menu, donc ici, on l'intégre, et dès cet instant-là, Dreamweaver installe une balise canvas avec une sorte de garde place ici, une sorte de localiseur par défaut, et simplement les deux balises ouvrantes et fermantes de canvas. Vous voyez que l'inspecteur de propriétés n'est pas non plus verbeux, on n'a pas trop grand chose à lui placer, donc on va définir une dimension de 390 par 260, vous voyez qu'instantanément bien entendu, cet élément-là se dimensionne, et on va lui donner un identifiant sortie ici, et donc maintenant, on va utiliser un Java Script, et depuis la palette commune, on va pouvoir venir insérer, comme à l'accoutumé, des scripts supplémentaires. Alors là, je vais m'appuyer sur un script qui m'a gentiment été prêté par David Powers, qui fait la partie Anglaise de Video2Brain, et donc ce script va faire tout le job pour montrer un peu ce que canvas nous permet de faire très rapidement. Alors ici, on va placer la balise Script. Avant toute chose quand même, je vais placer mon curseur juste avant la fermeture de la balise body pour mettre mon script à la fin, et je vais ré-invoquer cette fenêtre de Script ici. On va venir dans la partie canvas, et je vais pointer vers ce script convert_image, qui a déjà été écrit, et qui, si j'actualise maintenant ma page, on peut venir visualiser ici. Si on regarde de près en fait, il y a quelque chose comme une centaine de lignes qui a été pondue, et ici la dernière ligne, c'est une fonction qui appelle convert, qui va passer l'identifiant de cette zone de canvas, donc sortie, et qui va passer l'image kiwis.jpg. Alors je fais Fichier Enregistrer, voilà, et je vais basculer à un aperçu indirect, et on s'aperçoit que le script va télécharger directement cette image kiwi.jpg, et l'afficher dans l'espace de canvas. Si je passe sur l'élément gris ici, on s'aperçoit qu'on passe à un niveau de gris, le bouton s'est auto-préparé pour aller sur le mode Couleur. Si je passe sens dessus dessous, on inverse notre image, on peut revenir en mode Couleur, retour à la normale, vous voyez qu'on peut manipuler de l'image ici, très simplement. Alors si, au lieu d'appeler l'élément kiwi, j'appelait le second élément que j'ai dans mon dossier, pommes, on pourrait bien entendu repasser pareil, de la même manière, vers une fenêtre et inverser les images très simplement par du code. Alors bien entendu, les palettes de canvas ne sont pas prises en compte par des navigateurs plus anciens, et donc il va falloir repartir sur la partie haute de l'élément canvas, voilà ici, dans la partie html, et venir placer dans cette balise canvas, un texte qui serait pris en compte uniquement par les navigateurs qui ne liraient pas cette balise-là. Alors ici, ce qu'on va faire, on va directement dans la partie Insertion insérer une image, et je vais insérer par exemple l'image des kiwis ici... ...voilà. Et donc cette image ne serait lue que par des navigateurs qui ne pourraient pas comprendre la balise canvas. Donc, les navigateurs qui ne liraient pas la balise canvas vont pouvoir lire ce qu'il y a à l'intérieur, donc cette image-là. Et le script se charge lui, en fait, d'effacer toutes ces parties qui ne seraient pas nécessaires, donc tous les boutons de commandes sur un navigateur. Alors encore une fois, c'est un tantinet frustrant dans le sens où la balise canvas n'insère pas de fonctionnalité propre, si ce n'est la balise canvas elle-même, mais je tenais, avec cette étape, à vous montrer quand même les ouvertures qu'on peut avoir avec l'utilisation d'une telle balise.

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 !