HTML5 : Optimisation des flux de production

Différencier le code et le format de code

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Qu'il s'agisse de HTML, CSS ou JavaScript, optimisez la lisibilité et assurez sa pérennité en adoptant un format de code approprié. Voyez de quelle manière les outils d'automatisation vous y aideront.
03:49

Transcription

Afin d’optimiser son développement, Je vous propose qu’au niveau du code et du format de code, Qu’il s’agisse aussi bien de HTML, de CSS, ou de Javascript, D’opter pour une convention qui soit commune aux trois langages. Donc à savoir par exemple, Le formater de manière à utiliser par exemple le CamelCase, Le CamelCase c’est écrire des noms qui se basent que sur des bas de casse, Et simplement au début de chaque mot, on rajoute une majuscule. Donc CamelCase, ce qui rend la lisibilité. L’intérêt du CamelCase c’est qu’il peut avoir une forme compacte, Et ne consomme pas beaucoup de caractères. On pourrait tout aussi bien écrire en séparant par des underscores, Donc Ou_tout_autre_mode Qui garde la lisibilité du mot, Mais par contre consomme du caractère Parce qu’à chaque fois on va utiliser des underscores ou des traits d’union. Faites attention aux traits d’union, C’est très bon par exemple pour les noms de fichiers, Mais des fois ça peut causer souci, notamment en Javascript. Donc à vous d’utiliser le caractère qui siéra le mieux à vos besoins. Pourquoi ça cause des soucis avec Javascript ? Parce que ça peut être le signe moins arithmétique. Ensuite je vous propose uniquement pour tout ce qui va être CSS, De s’appuyer sur BEMS, SMACSS ou OOCSS. Qui sont des mots un peu barbares. Si vous ne les connaissez pas je vous invite à apprendre Ce qu’ils cachent, ce qu’ils dissimulent. Dans notre catalogue il y aura une formation sur les CSS, Afin de mieux creuser ces approches. Plus vous allez optimiser vos écritures CSS, Plus vous allez pouvoir optimiser le développement et l’assouplir surtout. Pensez donc à utiliser des conventions de nommage. Ensuite formatez votre code avec des tabulations. Soit vous utilisez deux espaces, Soit une tabulation, soit quatre espaces, C’est à vous de voir. Trouvez une convention avec l’ensemble, Des développeurs avec qui vous allez travailler. Mais formatez vos codes de cette manière-là Afin d’accroitre leur lisibilité. Ne lésinez pas sur les commentaires. Mettez des commentaires dans vos fichiers HTML, Mettez des commentaires dans vos CSS et Javascript, Que ce soit des commentaires de ligne avec deux «/» au début, Ou des commentaires de groupe avec « /* » et « */ » Pensez à commenter abondamment. Même si cela va à l’encontre d’un code écrit correctement, faites-le. On verra que justement on peut avoir des automatiseurs de tâches Qui vont nous retirer l’ensemble de ces commentaires par la suite. Donc n’hésitez surtout pas à commenter votre code. Et puis quand vous écrivez des fichiers CSS, N’hésitez surtout pas à les éclater en plusieurs fichiers. Vous allez voir qu’on pourra concaténer nos fichiers par la suite. Donc n’hésitez pas. Vous avez une petite modification à faire, vous les faites. Sur trois fichiers, quatre fichiers. Ici admettons que vous codez que les tableaux, Les balises de tables, ici dans ce fichier-là. Mais n’hésitez surtout pas encore, À éclater la balise table en d’autres petits fichiers. Table spécial prix, Table spécial présentation produit, Table spécial ceci. Vous allez voir que vous allez gagner en lisibilité, En clarté, en optimisation lors du développement. Et puis après libre à vous de concaténer tout ça avec un automatiseur de tâches. Et bien entendu vous faites ça pareil pour les Javascripts. En n’hésitant surtout pas À répartir l’intégralité de votre développement sur plusieurs fichiers. Et puis enfin, comme je vous le disais, On va pouvoir compacter et concaténer. C'est-à-dire à la fin on va retirer tout ce qui est commentaires, En préserver certains éventuellement, On va retirer les espaces. Tous les éléments qui sont inutiles. On va rassembler l’ensemble des fichiers en un seul, Et on va pouvoir ainsi optimiser la lecture informatique de ces fichiers, Et non plus humaine cette fois-ci. Donc voilà quelques points que vous pouvez aborder, Avant de commencer à écrire vos premières lignes de code, Et une fois que vous aurez personnalisé Votre approche du code et du formatage de code, À ce moment-là vous allez voir que les automatiseurs de tâches Vont pouvoir nous permettre de vraiment produire de manière très souple, Et très rapide, l’ensemble de nos applications.

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 !