HTML5 : Optimisation des flux de production

Valider le code HTML

Testez gratuitement nos 1330 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lors de la mise en place des documents HTML, vous devrez valider régulièrement la qualité d'écriture et de formatage. Découvrez comment faciliter cette tâche.
08:45

Transcription

Lors de la mise en place de nos structures HTML, On a continuellement besoin de s’assurer de la bonne qualité de notre écriture. Donc ici par exemple, je m’aperçois que dans cette balise img, ici. L’attribut CLASS est en haut de casse, Ou il manque l’attribut ALT également. Donc tout ceci va pouvoir assez rapidement pénaliser notre structure, Notamment au niveau du référencement, Au niveau de l’accessibilité qui s’appuierait sur cette structure. Donc pour cela on va avoir besoin de s’entourer d’un outil, Qui va continuellement observer cette écriture, La génération de ces HTML, Et que l’on pioche chez Gulp ou Grunt, Vous avez pléthore de plug-ins ou de modules, Qui prennent ce genre de fonctionnalités en main. Donc ici j’ai placé mon focus sur grunt-html-val Qui est un vieux plug-in qui date de trois ans, Qui n’a pas été mis à jour depuis. Et qui va nous permettre quand même de pouvoir explorer D’une part comment on va pouvoir utiliser le site npmjs, Et puis d’autre part comment on va mettre en place une tâche sous Grunt. Première chose ici c’est de voir que dans ce site, On a continuellement toutes les informations nécessaires. De la ligne de commande pour l’installation, Le chargement de la tâche, Chose qu’on n’a pas vu puisque jusqu’à présent on faisait du JavaScript Ici on va devoir charger un plug-in. On va l’utiliser au travers de loadNpmTasks Et puis on a même la possibilité d’avoir une utilisation, Une exploitation par défaut, qui nous est proposée. On n’a qu’à copier-coller tout ça. La seule chose qui manque en fait, Cest le registertask qui n’a pas été mis en place, Qu’il nous faudra ajouter dans le gruntjs. Ici on a toute une série également d’options, Qui peuvent être configurées pour affiner la tâche. Première chose à faire déjà, Ça va être de regarder l’état des lieux dans lequel on se situe. Donc on a un fichier HTML, Le Gruntfile.js qui doit être vide, Et puis un package JSON de base Qui en fait ne fait qu’installer la première dépendance qui est Grunt. Donc pas besoin de le faire. Et un Gruntfile qui est vide. On va venir installer, On va pointer la ligne de commande sur le dossier en question. Et puis du fait qu’on a un package JSON déjà, On va lancer un npm install, Pour installer la première dépendance qui est Grunt. Si vous n’auriez pas de package JSON, Vous démarrez le projet à zéro, Il suffit de faire un npm init, Et puis de faire un premier Ici on colle la ligne qui a été récupérée sur le site, Qui va nous permettre d’installer et de sauver La dépendance de cette extension dont on a besoin. Et puis une fois que ça ça été fait, on va aller directement, On va retourner sur le site. Pour venir copier, non seulement le chargement de la tâche, Mais en plus la première configuration. Donc une fois tout récupéré au sein de Gruntfile.js On s’aperçoit que le seul paramètre qu’on va devoir affecter, Va être le paramètre de source qui va indiquer en fait, Le dossier que l’on doit explorer. Ici en l’occurrence, « **/*.html » dit ici par rapport au niveau du Gruntfile.js On va chercher tous les dossiers, Peu importe le nom qui serait à l’intérieur de ce dossier ici, Et on va rentrer à l’intérieur et aller explorer, Peu importe le nom du fichier, qui aurait une extension HTML. Donc ici ce n’est pas le cas. On est directement à la racine ici de notre dossier 03_02, Donc cette partie-là on n’en a pas besoin, on va pouvoir la supprimer. Et utiliser un « *.html » Ça veut dire que tous les fichiers de type HTML seront affectés. Alors bien sûr on aurait pu écrire directement en dure Et faire 12500302 Parce qu’en fait on n’a que ce fichier à explorer. Mais dans le cas où on placerait un second fichier, En mettant simplement «*.html » On va venir explorer systématiquement tous les fichiers HTML. Bien sûr que comme on est dans un arrêt ici, On est dans un tableau, on pourrait rajouter une virgule ici, Et puis venir ajouter une autre chaine d’exploration ici, Qui pourrait être pourquoi pas, « ../../ » Pour remonter au niveau de chapitre 3 ici, Faire un « ** » Pour dire tous les dossiers, quels que soient leurs noms, Donc ça incomberait de 03_01 à 03_08 « /*.html » pour dire tous les fichiers HTML Qu’on trouverait à l’intérieur de ces dossiers respectifs. Donc on va pouvoir comme ça, Venir définir l’ensemble des fichiers qui seront à observer. Le dernier élément qui nous manque ici maintenant, Ça va être de récupérer un grunt registerTask, Donc ici on va créer un un grunt.registerTask Comme on l’a fait dans les premiers fichiers d’exemple, On va donner la chaine d’invocation, Donc validehtml par exemple, Et on va invoquer le html_val Qui sera notre première fonction définie dans le fichier init config là-haut. Et on va fermer notre JavaScript. On pense à enregistrer bien sûr, Attention ici il y a une deuxième parenthèse de trop. Et puis on va pouvoir rebasculer dans la console de commande, Pour lancer depuis Grunt, Et là dès qu’on lance cette tâche, Rapidement on nous dit, On a travaillé sur le fichier Voici ce qu’on a trouvé. Il manque un attribut Il y a un attribut pour la définition du JavaScript qui n’est pas nécessaire, Qui peut être retirée. Il manque l’attribut titre dans le lien qu’on a ici sur la partie « a href » Etc. Vous voyez que toutes les informations ont été données. Alors on pourrait rentrer ici maintenant Dans une version un peu plus sophistiquée, On pourrait aller affiner ce fichiergrunt, En venant définir un certain nombre d’options. Donc ici on s’aperçoit que par défaut, On a le ImageAlt Qu’on va détecter si l’attribut alt est placé par défaut c’est True. On pourrait le placer sur False, On voit qu’on peut détecter la hauteur d’image, La largeur d’image, Les points d’ancrage, est-ce qu’il y a un titre, Est-ce que les singleQuotes sont utilisés, Pareil pour les filtrages au niveau des attributs au niveau du script, etc. On va pouvoir venir comme ça, Définir un certain nombre de paramètres supplémentaires. Donc au lieu de garder que la partie défaut ici, On va pouvoir rajouter une virgule ici sur notre HTML, Et on pourrait donc dire qu’on va créer Une valeur qui serait cette fois-ci souple, Qui contiendrait un objet, Cet objet pourrait avoir tout un certain nombre de propriétés Définies en fonction de ce qu’on a vu dans le site npmjs, Donc par exemple, au niveau des options. On va créer un autre objet, Avec là image hauteur qu’on placerait sur False, cette fois-ci. Image largeur qu’on place sur False également, Et on peut comme ça continuer, tout un certain nombre d’attributs. Et puis bien entendu, Il nous faut rajouter un deuxième élément à cette option, Qui va être cette fois-ci, la même source que l’on va exploiter. Maintenant pour pouvoir invoquer, Alors ici si vous le souhaitez, On peut le placer là de façon à mieux voir Que c’est au même niveau que défaut ici, Si vous souhaitez maintenant pouvoir invoquer soit défaut, soit souple Vous avez vu que tout à l’heure quand on a invoqué html_val En fait ça invoquait automatiquement une valeur par défaut, Puisque si ce n’est pas précisé cette propriété, On va pouvoir directement attaquer cette valeur-là Par contre on pourrait préciser soit html_val : souple Soit html_val : défaut Si on le voulait de manière explicite. Pour cela on va utiliser une petite astuce JavaScript Qui va nous permettre de dire, on va faire un var, On va créer une variable type Et on va dire que ce type c’est égal à grunt.option Au singulier ici, Et on va chercher une option qu’on pourrait appeler type, Alors là c’est un nom purement arbitraire, On aurait pu l’appeler tout à fait autrement, Donc ici on va dire, tu prends cette valeur type, Et si tu n’es pas défini, à ce moment-là, Tu prendras la valeurdefault ici De façon à dire cette variable type ici, Va prendre la valeur que tu passeras en option, Et si tu ne passes pas d’option, On prendra la valeur défaut, Comme ça ça sera plus calé. Ce qu’on va faire maintenant c’est de dire Au lieu d’attaquer le html_val, On va attaquer le html_val plus type, Sauf qu’ici ça ne va pas fonctionner, Puisque si je passe un paramètre, il faut passer par « : ».. Moi ce que j’aime bien faire ici, C’est rajouter un tableau directement autour de ces éléments Parce que ça nous permet, Ça peut être une chaine de caractères ou tableau, De bien regrouper ces deux valeurs entre-elles, On voit vite comment on doit travailler. Donc ici j’enregistre cet élément-là, Je retourne dans ma console de commande ici, Et cette fois-ci je vais faire un Grunt validehtml, Je peux venir récupérer cette valeur-là, Par contre je vais passer à un «--» comme ça, tiret, tiret, Je vais dire que type est égal à, et je vais utiliser souple ici. Donc si je passe dans ce sens-là, On s’aperçoit que l’on vérifie notre fichier HTML, En ne tenant pas compte de la hauteur d’image, La largeur d’image ou l’attribut du script. Si par contre maintenant je fais simplement un grunt validehtml À ce moment-là je repasse dans ma valeur par défaut, Et je recontrôle l’intégralité de mon script.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 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 !