Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Définir le format SVG et son intégration

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Intégrer un format SVG au sein d'une page HTML permet d'accéder à un format vectoriel. Cela apporte aussi de l'interactivité de manière native, telle une API HTML5.
04:40

Transcription

Quelque soit le logiciel graphique que vous utilisez, si ce logiciel permet de tracer des tracés vectoriels, de fabriquer des illustrations vectorielles, vous avez la possibilité de forcément exporter vers le svg. Ici, je suis dans Adobe Illustrator, et quelque chose qui est intéressant, c'est qu'Adobe Illustrator me permet d'apporter ce qu'on appelle une interactivité svg. Qu'est ce que c'est que cette interactivité svg ? Si je sélectionne l'ensemble des éléments, je peux par exemple, à l'évènement, on clique, mais j'aurais pu choisir n'importe quel type d'évènement, ici. Lui dire, je vais éxécuter une fonction qui s'appellerait change. Et ça c'est quelque chose que je vais inventer. Cette fonction change n'existe pas. Alors, je peux aller un peu plus loin dans la partie intéractive d'Illustrator, c'est joindre un fichier javascript. Et là, je vais pouvoir dire, je veux joindre ce fichier javascript. Donc, j'ai fait simplement ajouter, je suis allé chercher un fichier javascript que j'avais préparé. Le 1157_07_06, ici. Et je l'ai ajouter à mon fichier vectoriel. Ce qui fait que maintenant quand je vais venir faire un fichier enregistrer sous, Je vais pouvoir partir au format svg. Et donc, dès l'instant où je pars au format svg, je vais enregistrer ce fichier. J'ouvre ce fichier dans n'importe quel éditeur html. Ici, je suis dans Dreamweaver mais j'aurais pu être dans Asulimtest, dans Aptana, dans peu importe le logiciel. Ici, je me retrouve dans ce qu'on appelle le format svg qui est un format à grammaire xml, qui ressemble un peu au html du fait qu'il a des balises ouvrantes/fermantes. Mais qui est vraiment sur une structure xml. Et ici, je retrouve dans la balise des définitions ici, le script javascript que j'ai intégré à mon fichier svg. Ce fichier svg, je peux directement le lire quand un navigateur puisque le navigateur est capable d'interpréter le fichier xml. Je vais pouvoir faire, ici, aperçu dans Chromium, par exemple. Et je retrouve mon fichier directement lu. Et vous voyez, ici, je suis au format svg. Mais nous, ce qui nous intéresse, c'est l'aspect html. Et si je reviens ici, je peux très bien avoir un fichier html classique. Et si je regarde le html 5 maintenant, j'ai des balises svg qui sont utilisables. Donc je vais tout simplement copier/coller toute la partie svg, ici, de mon format de fichier. Et je vais venir le coller dans du html, ici, tout simplement. Donc, j'ai bien entendu, copié la partie script, ici, qui a été liée. Je rajoute ici une feuille de style pour pouvoir définir si besoin était, ma balise svg. Et puis maintenant, je vais pouvoir la lancer dans un navigateur. Si je l'actualise ici, la voici au sein de mon navigateur. Par contre, si je regarde du côté du javascript, Rappelons nous, il y a quand même un javascript qui a été placé. Ici, j'ai un tableau qui dit que les couleurs, c'est 8d6cab Et voilà, j'ai défini tout un nombre de couleurs héxadécimales, ici. Et puis, je suis venu créer ma fonction change. Rappelez vous, j'avais créé ma fonction change ici, et je lui qu'à chaque fois qu'on va cliquer, la valeur, c'est la couleur. Et tu vas aller chercher un numéro aléatoire par rapport à celui que tu vas trouver ici. Donc, tu prendras ou celle là, ou celle là, peu importe. Alors, il pourra prendre deux fois la même. Des fois, vous cliquerez, il se passera rien parce qu'on aura repris la même couleur. Il aurait fallu faire un script un peu plus compliqué pour lui dire attention, tu la prends qu'une fois tant que tu n'as pas bouclé l'intégralité. C'est pas grave, on est au courant de ça. Ici, j'utilise du javascript pur et dur html 5. C'est à dire qu'il n'y a pas de librairie. Je fait un jQuery selector hold. Je lui dit, tu récupères tout ce qui est polygon, polyline, path ou text. Si je regarde bien, ici, ça correspond à polygon, path, text. Toutes les balises qu'on retrouve ici, à l'intérieur de ce format svg. Et je lui dit tu vas boucler sur tous ces éléments que tu auras récupéré dans items, ici. Et tu vas leur créer l'attribut fill, qui est le remplissage de couleur, si je regarde bien ici, par défaut j'en ai quelqu'uns qui sont sur la couleur de base par défaut, ici. Je lui dit, tu vas remplacer par # plus la valeur que tu auras récupéré par défaut ici. Ce qui fait que maintenant que je vais venir dans mon navigateur, ici, j'actualise pour être bien sûr d'être rafraichi. Si je clique, je vais forcément changer la couleur de mon élément. Alors, si vous cliquez deux fois et qu'il ne se passe rien, c'est parce que par 2 fois, vous allez récupérer cette même couleur. Donc, voilà un des intérêts d'utiliser du svg, c'est que non seulement, on avait vu que si je zoomais dans le navigateur, je restais quand même dans une image de qualité, ici. Et ensuite, quand je clique, je peux avoir de l'intéractivité qui est apportée à ce fichier. Ça peut être pour afficher/masquer des zones, ça peut être pour changer les propriétés de certaines zones, ça peut être pour incrémenter la partie visuelle, etc... Après, libre cours à votre créativité au niveau de l'utilisation du svg.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

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 !