Ceux qui travaillent dans le secteur de la conception Web comparent le développement de sites Web frontaux à un tabouret à trois pieds. Ces trois branches - les trois couches du développement Web - comprennent la structure, le style et les comportements.
Pourquoi devriez-vous séparer les couches?
Lorsque vous créez une page Web, sa structure doit être reléguée à votre code HTML, vos styles visuels à la feuille CSS et vos comportements aux scripts. Certains des avantages de la séparation des couches sont les suivants:
- Ressources partagées: Lorsque vous écrivez un fichier CSS ou JavaScript externe, toute page du site peut utiliser ce fichier. Si vous devez modifier ce fichier, par exemple mettre à jour certains styles typographiques sur le site Web, chaque page utilisant cette feuille de style obtiendra la modification. Il n'est pas nécessaire d'éditer chaque page du site individuellement, ce qui peut s'avérer une entreprise éprouvante pour un grand site Web.
- Téléchargements plus rapides: Une fois que le script ou la feuille de style a été téléchargé par votre client pour la première fois, il est mis en cache par le navigateur Web. Comme ces ressources partagées sont maintenant contenues dans le cache du navigateur, les autres pages demandées dans le navigateur se chargent plus rapidement, ce qui améliore la vitesse et les performances globales des pages.
- Equipes multi-personnes: Si plusieurs personnes travaillent simultanément sur un site Web, vous pouvez utiliser des systèmes permettant d’archiver et de archiver des fichiers afin de s’assurer que tout le monde travaille avec les dernières versions. Cela est beaucoup plus difficile à réaliser si les styles et les comportements sont étroitement liés aux documents de structure.
- SEO: Un site dont le style et la structure sont bien séparés est susceptible de donner de meilleurs résultats pour les moteurs de recherche, car ils peuvent analyser ce contenu plus efficacement et comprendre la page sans s'embourber dans des informations de style et de comportement.
- Accessibilité: Les feuilles de style externes et les fichiers de script sont plus accessibles aux personnes et aux navigateurs. Des logiciels tels que les lecteurs d'écran peuvent traiter plus facilement le contenu de la couche de structure sans traiter de styles qu'ils ne peuvent pas utiliser.
- Rétrocompatibilité: Un site conçu avec des couches de développement distinctes est plus susceptible d'être rétrocompatible, car les navigateurs et les périphériques qui ne peuvent pas utiliser certains styles CSS ou dont JavaScript est désactivé peuvent toujours afficher le code HTML. Vous pouvez ensuite améliorer progressivement votre site Web avec des fonctionnalités pour les navigateurs qui les prennent en charge.
HTML: La couche de structure
La couche de structure ou de contenu d'une page Web est le code HTML sous-jacent de cette page. Tout comme le cadre d'une maison crée une base solide sur laquelle repose le reste de la maison, une base solide en HTML crée une plate-forme sur laquelle un site Web peut être créé.
La couche de structure est l'endroit où vous stockez tout le contenu que vos clients veulent lire ou regarder. La structure HTML peut comprendre du texte et des images. Elle inclut les liens hypertexte que les visiteurs utiliseront pour naviguer sur le site Web. Celui-ci est codé au format HTML5 conforme aux normes et peut inclure du texte, des images et du multimédia (vidéo, audio, etc.).
Tous les aspects du contenu d'un site doivent être représentés dans la couche de structure. Cela permet aux clients dont le JavaScript est désactivé ou qui ne peuvent pas voir l'accès CSS à l'intégralité du site, sinon à toutes ses fonctionnalités.
CSS: la couche de styles
Cette couche détermine l'aspect d'un document HTML structuré pour les visiteurs d'un site et est définie par CSS (Cascading Style Sheets). Ces fichiers contiennent des instructions stylistiques sur la manière dont le document doit être affiché dans un navigateur Web. La couche de style comprend généralement des requêtes multimédia qui modifient l'affichage d'un site en fonction de la taille de l'écran et du périphérique.
Tous les styles visuels d'un site Web doivent résider dans une feuille de style externe. Vous pouvez utiliser plusieurs feuilles de style, mais rappelez-vous que chaque fichier CSS nécessite une requête HTTP pour le récupérer, ce qui affecte les performances du site.
JavaScript: la couche de comportement
La couche de comportement rend un site Web interactif, permettant à la page de réagir aux actions de l'utilisateur ou de changer en fonction d'un ensemble de conditions. JavaScript est le langage le plus couramment utilisé pour la couche de comportement, mais CGI et PHP sont également très fréquemment utilisés.
Lorsque les développeurs font référence à la couche de comportement, la plupart d'entre eux désigne la couche qui est activée directement dans le navigateur Web. Vous utilisez cette couche pour interagir directement avec le DOM (Document Object Model). L'écriture de code HTML valide dans la couche de contenu est importante pour les interactions DOM dans la couche de comportement. Lorsque vous intégrez la couche de comportement, vous devez utiliser des fichiers de script externes, comme avec CSS, pour optimiser la vitesse et les performances.
