Les personnes qui travaillent dans le création de sites web l'industrie a comparé le développement de sites Web frontaux à un tabouret à trois pieds. Ces trois étapes (les trois couches du développement Web) comprennent la structure, le style et les comportements d'un site.
Pourquoi devriez-vous séparer les calques?
Lorsque vous créez une page Web, sa structure doit être reléguée à votre code HTML, styles visuels au CSS, et les comportements aux scripts. Certains des avantages de la séparation des couches sont:
- Ressources partagées: Lorsque vous écrivez un fichier CSS ou JavaScript externe, n'importe quelle page du site peut utiliser ce fichier. Si vous devez apporter une modification à ce fichier, peut-être pour mettre à jour certains styles typographiques sur le site Web, chaque page qui utilise cette feuille de style obtiendra le changement. Il n'est pas nécessaire de modifier chaque page du site Web individuellement, ce qui pourrait être une entreprise épuisante 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. Parce que 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.
- Équipes de plusieurs personnes:Si vous avez plusieurs personnes travaillant sur un site Web à la fois, utilisez des systèmes de contrôle de version qui permettent d'archiver et d'extraire les fichiers pour vous assurer que tout le monde travaille avec le dernières versions. Ce processus est beaucoup plus difficile à réaliser si les styles et les comportements sont étroitement liés aux documents de structure.
- Référencement:Un site qui démontre une séparation claire du style et de la structure est susceptible de mieux fonctionner pour les moteurs de recherche car ils peut explorer ce contenu plus efficacement et comprendre la page sans s'enliser dans le style visuel et le comportement informations.
- Accessibilité:Les feuilles de style externes et les fichiers de script sont plus accessibles aux personnes et aux navigateurs. Des logiciels tels que lecteurs d'écran peuvent traiter le contenu de la couche de structure plus facilement sans traiter des styles qu'ils ne peuvent pas utiliser de toute façon.
- 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 appareils qui ne peuvent pas utiliser certains styles CSS ou qui ont désactivé JavaScript peuvent toujours afficher le 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 structure ou la couche de contenu d'une page Web est le sous-jacent HTML code de cette page. Tout comme le cadre d'une maison crée une base solide sur laquelle le reste de la maison est construit, une base solide de 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 être constituée de texte et d'images, et elle inclut les hyperliens que les visiteurs utiliseront pour naviguer sur le site Web. Ces informations sont codées dans des normes conformes HTML5 et peut inclure du texte, des images et du multimédia (vidéo, audio, etc.).
Chaque aspect du contenu d'un site doit être représenté dans la couche de structure. Cette séparation permet aux clients qui ont désactivé JavaScript ou qui ne peuvent pas afficher l'accès CSS à l'ensemble du site Web, voire à toutes ses fonctionnalités.
CSS: la couche de styles
Cette couche dicte l'apparence d'un document HTML structuré pour les visiteurs d'un site et est définie par CSS (Feuilles de style en cascade). Ces fichiers contiennent des instructions stylistiques sur la façon dont le document doit être affiché dans un navigateur Web. La couche de style comprend généralement requêtes multimédias qui modifient l'affichage d'un site en fonction de taille de l'écran et appareil.
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 chaque fichier CSS nécessite une requête HTTP pour le récupérer, affectant les performances du site.
JavaScript: la couche comportementale
La couche de comportement rend un site Web interactif, permettant à la page de répondre 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ésignent la couche qui est activée directement dans le navigateur Web. Utilisez cette couche pour interagir directement avec le modèle d'objet de document. Écrire du HTML valide dans la couche de contenu est important pour les interactions DOM dans la couche de comportement. Lorsque vous créez la couche de comportement, vous devez utiliser des fichiers de script externes, tout comme avec CSS, pour optimiser la vitesse et les performances.