L'essentiel du HTML5

Construire son arborescence

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le chemin d'accès fait référence à l'arborescence du site et à la manière de répartir et de distribuer les fichiers. Mettez en place une arborescence type pour simplifier les méthodes et les habitudes.
05:05

Transcription

Dès qu'on parle de chemin d'accès, il est mportant de bien comprendre comment on va construire l'arborescende de son site. Comment on va distribuer l'intégralité des pages et des ressources au sein de notre site. Alors généralement, on a un dossier qu'on appelle racine du site qui n'est pas forcément la racine du serveur mais qui va être la racine du serveur web. Donc, si on part de ce dossier racine qui généralement s'appelle www ou http docs, suivant les serveurs, vous allez pouvoir arborer l'intégralité de votre site à l'intérieur de ce dossier. Le premier fichier va être généralement un fichier .extension. Donc soit un fichier index.html, index.php, index.asp, .cfm. Peu importe le type de langage serveur que vous avez utilisé. Il sera placé, donc, à la racine du site. Vous allez créer un dossier, généralement, html. Vous pouvez l'appeler page, vous pouvez l'appeler contenu, comme vous voulez. Mais HTML tout en majuscules peut être une alternative. Et là dedans, vous allez placer l'intégralité de vos page web. Soit à la racine, soit vous allez pouvoir créer des dossiers qui auront le nom du module en question. Donc, ça pourrait être par exemple maketing, commercial, catalogue, aide en ligne, etc... Vous allez pouvoir créer autant de modules, autant de dossiers que vous avez besoin pour ne pas avoir plétors de fichiers html ou php, peu importe l'extension que vous allez utiliser au sein de ce dossier html. Vous allez avoir un dossier que vous allez appeler images, tout en minuscules, au pluriel, dans lequel vous allez placer les images et illustrations de votre site. Vous pouvez, ou pas, les regrouper par dossier, par catégories, en fonction de vos besoins. Et puis, je vous propose de créer un dossier que vous appellerez js, tout court, pour mettre tous les javascript. Pourquoi js ? Parce que vous allez des fois avoir à utiliser jQuery, underscore ou d'autres librairies js. Et eux, utilisent cette appellation. Donc, ça peut être intéressant de garder l'appellation commune pour ne pas avoir à renommer une librairie et surtout pouvoir mutualiser l'ensemble de ces fichiers. Donc, vous aurez vos propres scripts, groupés ou pas par pages ou modules en fonction de vos besoins. et ce qu'on appellera les vendors, qui seront donc toutes les librairies extérieures que vous allez ajouter à votre site. Dans ces vendors, je vous invite à éventuellement les regrouper par utilité. Donc, jQuery, underscore, angular, etc... Tout ce que vous allez utiliser comme librairie, vous pourrez en placer autant que vous souhaitez. Toujours à la racine du site, vous pourrez avoir un dossier de modules. Alors, ne pas confondre avec les module html. Mais ici, pouvoir avoir des modules particuliers que vous utiliseriez pour votre site. Il peut s'agir par exemple de modules SASS, de modules NPM, de GEM, tout ce que vous allez utiliser pour construire votre site. Par exemple, certains vont utiliser des post processeurs comme gulp ou grump. Donc tous ces modules pourront être stockés à la racine du site. Ensuite, vous pourrez stocker, pour ceux d'entre vous qui utilisent dreamweaver par exemple, le dossier Template. Alors faites bien attention, avec un T majuscule et ne pas renommer ce fichier parce que dreamweaver se base dessus. Je ne l'ai pas marqué là dessus mais vous avez un autre dossier qui s'appelle Library qu'il faut garder, écrit exactement tel quel, avec un L majuscule. Parce que dreamweaver s'y réfère et va l'utiliser. Donc ça, ce sont des dossiers que vous aurez également à la racine de votre site. Et puis un dossier SAS. Donc, on parlait des modules juste avant. Si vous utilisez un pré processeur, cette fois-ci, à base de SASS, vous allez pouvoir utiliser un dossier pour mettre tous les fichiers source. Je ne l'ai pas noté également ici, vous aurez le dossier SASS cache et tout ce qui va être réfèrent à cette technologie. Alors ne pas confondre la technologie SASS, S-A-S-S en majuscules, avec les langages utilisés qui serait sass ou scssen minuscules. Donc à ce moment-là, vous pouvez les regrouper ou les nommer en fonction, soit si vous utilisez sass ou scss. Enfin, un dossier css écrit en minuscules parce que, pareil que pour le dossier js, les vendors, les lirairies, les tierces parties que vous allez utiliser, font référence à ce dossier de la sorte. Mettez le dossier images à l'interieur de css éventuellement puisque les css vont s'y référer. Pareil pour les dossiers vendors, tout ce qui aura trait à jQuery, toutes les petites images dont vous avez besoin, placez-les là Et bien entendu, placez vos fichiers style.css purs et durs. Enfin, deux dossiers que vous pouvez rajouter à la racine de votre site. Source, pour placer tous les documents source que vous allez utiliser. Les fichiers word, excel, éventuellement les fichiers natifs psd, rai, etc... qui vous serviront à construire votre site pour les maquettes, pour les prototypes, les validations clients. Et un dossier que vous pouvez mettre soit à l'intérieur de source, soit au même niveau que source. qui serait outils. qui vont être un peu à l'instar du dossier module, ici, pour gulp ou grump. Des outils que vous utiliseriez pour vous aider à soit communiquer avec cos clients, soit construire votre site. Voilà, donc pensez à définir une arborescence de site de type type, on va dire, un peu modèle. Que vous utiliserez pour chacun de vos sites de façon à pouvoir prendre des habitudes à pouvoir mutualiser des scripts, à pouvoir toujours fonctionner, on va dire, sur les mêmes bases.

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 !