Le front-end Web n'est-il que la couche de présentation ?

Non. Le frontal Web peut être divisé en trois couches : 1. La couche structurelle, qui est créée par des langages de balisage​​tels que HTML ou XHTML et est utilisée pour stocker tout le contenu que les clients souhaitent lire ou visualiser, ce qui peut inclure du texte, des images, des hyperliens et du multimédia. 2. La couche de présentation, créée par CSS, contient des instructions de style sur la façon d'afficher les documents Web dans un navigateur Web. 3. La couche de comportement est le comportement de la page Web. Elle est créée par le langage JS et peut mettre à jour le contenu de la page Web en temps réel, rendant le site Web interactif et permettant à la page de répondre aux opérations de l'utilisateur ou aux modifications en fonction d'un ensemble de conditions.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

W3C fait référence au World Wide Web Consortium (World Wide Web Consortium), fondé en octobre 1994. L'émergence du W3C consiste à personnaliser les normes de développement Web, afin qu'une même page Web puisse avoir le même effet dans différents navigateurs. Nos pages Web personnalisées doivent donc suivre les spécifications du W3C.

L'idée du développement Web front-end est de diviser les pages Web en trois niveaux, à savoir : la couche de structure, la couche de présentation (style) et la couche de comportement.

HTML : Couche structurelle

La couche structurelle ou de contenu d'une page Web est le code HTML sous-jacent de la page. Tout comme la structure d’une maison constitue une base solide pour 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 structurelle est utilisée pour stocker tout le contenu que le client souhaite lire ou visualiser. La structure HTML peut contenir du texte et des images, ainsi que des hyperliens que les visiteurs utilisent pour naviguer sur le site Web. Ceci est codé en HTML5 conforme aux normes et peut inclure du texte, des images et du multimédia (vidéo, audio, etc.).

CSS : Couche de style

Cette couche dicte l'apparence d'un document HTML structuré pour les visiteurs du site Web et est définie par CSS (Cascading Style Sheets). Ces fichiers contiennent des instructions de style sur la façon d'afficher le document dans un navigateur Web. La couche de style comprend généralement des requêtes multimédias qui modifient l'affichage du site en fonction de la taille de l'écran et de l'appareil.

Tous les styles visuels de votre site Web doivent être dans des feuilles de style externes. Vous pouvez utiliser plusieurs feuilles de style, mais gardez à l'esprit que chaque fichier CSS nécessite une requête HTTP pour le récupérer, ce qui affecte les performances du site.

JavaScript : couche comportementale

La couche comportementale rend un site Web interactif, permettant aux pages de répondre aux actions des utilisateurs ou de changer en fonction d'un ensemble de conditions. JavaScript est le langage le plus couramment utilisé pour la couche comportementale, mais CGI et PHP sont également fréquemment utilisés.

Lorsque les développeurs font référence aux couches comportementales, la plupart font référence aux couches qui sont activées directement dans le navigateur Web. Vous pouvez utiliser cette couche pour interagir directement avec le DOM (Document Object Model). L'écriture de code HTML valide dans la couche de contenu est très importante pour l'interaction DOM dans la couche comportementale. Lors de la création de couches comportementales, les fichiers de script externes doivent être utilisés tout comme CSS pour optimiser la vitesse et les performances.

En termes simples, JavaScript, HTML et CSS constituent ensemble les pages Web que nous voyons

• HTML est utilisé pour définir le contenu des pages Web, tel que les titres, le texte, les images, etc.

• CSS ; est utilisé pour contrôler l'apparence de la page Web, comme la couleur, la police, l'arrière-plan, etc. ;

• JavaScript est utilisé pour mettre à jour le contenu de la page Web en temps réel, comme obtenir des données du serveur et mettre à jour sur la page Web, en modifiant le style de certaines balises ou le contenu, etc., vous pouvez rendre les pages Web plus vivantes.

HTML est HyperText Markup Language, un langage de balisage standard utilisé pour créer des pages Web. HTML est responsable de la structure des trois composants d'une page Web. HTML utilise des balises pour identifier les différents composants d'une page Web. Ce qu'on appelle l'hypertexte fait référence à des hyperliens qui nous permettent de passer d'une page à une autre.

CSS fait référence aux feuilles de style en cascade. Les styles définissent la manière d'afficher les éléments HTML et sont utilisés pour contrôler l'apparence des pages Web. CSS est responsable des performances des trois composants d'une page Web et les styles sont généralement enregistrés dans des fichiers .css externes. Il suffit de modifier un simple document CSS pour modifier la mise en page et l'apparence de toutes les pages.

JavaScript est un langage de script ("JS" en abrégé), un langage de programmation léger utilisé pour contrôler le comportement des pages Web. JavaScript est responsable du comportement des trois composants d'une page Web. Il peut être inséré dans le code de programmation de la page HTML. Une fois JavaScript inséré dans la page HTML, il peut être exécuté par tous les navigateurs modernes.

Développez les connaissances : les avantages de la superposition

1. Ressources partagées :

Lorsque vous écrivez un fichier CSS ou JavaScript externe, n'importe quelle page du site peut utiliser le fichier. Si vous devez apporter des modifications à ce fichier, par exemple en mettant à jour certains styles de typographie sur votre site, chaque page utilisant cette feuille de style recevra les modifications. Il n’est pas nécessaire de modifier chaque page de votre site Web individuellement, ce qui peut s’avérer une tâche fastidieuse pour les grands sites Web.

2. Vitesse de téléchargement plus rapide :

Une fois le script ou la feuille de style téléchargé par le client pour la première fois, le navigateur Web le mettra en cache. Étant donné que ces ressources partagées sont désormais incluses dans le cache du navigateur, les autres pages demandées dans le navigateur se chargent plus rapidement, améliorant ainsi la vitesse et les performances globales des pages.

3. Équipe composée de plusieurs personnes :

Si plusieurs personnes travaillent sur le site en même temps, vous pouvez utiliser un système qui permet d'archiver et d'extraire les fichiers pour garantir que tout le monde utilise la dernière version. C'est encore plus difficile si le style et le comportement sont étroitement liés à la documentation structurelle.

4. Optimisation des moteurs de recherche :

Un site Web avec une séparation claire du style et de la structure est susceptible de mieux fonctionner avec les moteurs de recherche, car ils peuvent explorer plus efficacement le contenu et comprendre la page sans s'enliser dans le style visuel et les informations comportementales.

5. Accessibilité :

Les feuilles de style et les fichiers de script externes sont plus accessibles aux personnes et aux navigateurs. Les logiciels tels que les lecteurs d'écran peuvent travailler plus facilement avec le contenu d'une couche structurelle sans avoir à gérer des styles qui sont de toute façon inutilisables.

6. Compatibilité ascendante :

Les sites conçus avec une couche de développement distincte sont plus susceptibles d'être rétrocompatibles, car les navigateurs et les appareils qui ne peuvent pas utiliser certains styles CSS ou dont JavaScript est désactivé peuvent toujours afficher le HTML. Vous pourrez ensuite enrichir progressivement votre site internet en utilisant les fonctionnalités des navigateurs qui les supportent.

(Partage de vidéos d'apprentissage : Démarrer avec le front-end Web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!