The Web (part 1)
Bon.
On va parler du web.
En particulier, de comment ça marche.
On va parler du web.
En particulier, de comment ça marche.
1 - Client & Serveur
Que se passe t'il quand on ouvre un site ?
Le client, par exemple les navigateurs chrome, firefox, ou safari, envoi un message à l'adresse indiquée. Par exemple, https:/example.com envoi des infos vers example.com.
La page commence à charger.
Ce message transit par internet (un autre poste décrira ça), et arrive sur le serveur de "example.com".
En général, le serveur se charge de renvoyer les informations demandées (la page d'accueil de example.com dans l'exemple).
Ces informations transit par internet et arrive au client. Celui-ci se charge de les afficher.
La page s'affiche.
Si un problème survient au cours de cette opération, une erreur s'affiche. Par exemple, pas de connexion internet ou serveur indisponible.
Résumé : le client demande, le serveur répond. Si l'un des deux fonctionne mal, une erreur s'affiche.
Le client, par exemple les navigateurs chrome, firefox, ou safari, envoi un message à l'adresse indiquée. Par exemple, https:/example.com envoi des infos vers example.com.
La page commence à charger.
Ce message transit par internet (un autre poste décrira ça), et arrive sur le serveur de "example.com".
En général, le serveur se charge de renvoyer les informations demandées (la page d'accueil de example.com dans l'exemple).
Ces informations transit par internet et arrive au client. Celui-ci se charge de les afficher.
La page s'affiche.
Si un problème survient au cours de cette opération, une erreur s'affiche. Par exemple, pas de connexion internet ou serveur indisponible.
Résumé : le client demande, le serveur répond. Si l'un des deux fonctionne mal, une erreur s'affiche.
2 - Contenu d'une page web
Une page web se décompose généralement en 4 types de fichiers :
- Le contenu textuel (langage HTML)
- La mise en page ("langage" CSS)
- Le contenu multimédia (images, vidéos, streaming multimédia)
- Les interactions côté client (langage JavaScript)
Les technologies HTML et CSS sont des technologies standardisées qui permettent un rendu quasi identique d'un client à l'autre.
3 - HTML
Le contenu textuel comprend toutes les informations textuelles (titres, paragraphes, liens, formulaires, boutons) à l'écran, mais aussi le titre de la page (au niveau des onglets). Ce cotenu est codé en HyperText Markup Language, ou HTML, un langage où on se sert de balises pour coder les informations. Par exemple le titre principal "Life on Peaceful" de la page d'accueil sera codé par :
<h1> Life on Peaceful </h1>
où la balise <h1> traduit le début d'un titre de premier niveau (header 1) et </h1> vient fermer cette balise.
Il est possible de faire un site complet avec uniquement du code HTML, par exemple https://www.rfc-editor.org/rfc-index.html.
Le HTML est naturellement mis en forme par le client (et diffère donc légèrement d'un client à l'autre).
Le style basique laisse cependant à désirer.
On utilise donc une autre technologie pour la mise en page.
Résumé : Le HTML correspond au contenu web dans son plus simple appareil. Pas de fioritures, uniquement du contenu, c'est le fond.
4 - CSS
Afin de mettre en page le code HTML est utilisé la technologie des Cascading Style Sheets, ou CSS.
Ce code se présente sous la forme d'un fichier séparé qui indique au client comment mettre en forme le contenu.
On y retrouve en particulier les notions de marge, de taille de police, de couleur d'arrière-plan ou de texte, la présence ou non de bordures autour d'un élément, la couleur des boutons, les ombres, le positionnement, etc.
Le standard CSS continue d'évoluer aujourd'hui afin de rendre plus facile le travail des développeurs et designers (qui conçoivent les visuels des sites).
Ce code se présente sous la forme d'un fichier séparé qui indique au client comment mettre en forme le contenu.
On y retrouve en particulier les notions de marge, de taille de police, de couleur d'arrière-plan ou de texte, la présence ou non de bordures autour d'un élément, la couleur des boutons, les ombres, le positionnement, etc.
Le standard CSS continue d'évoluer aujourd'hui afin de rendre plus facile le travail des développeurs et designers (qui conçoivent les visuels des sites).
Aujourd'hui, il est possible de créer des dessins, des animations, d'ajouter des filtres sur des photos, et plus encore avec du CSS.
Résumé : Le code CSS correspond à la mise en forme d'une page web. C'est la forme visuelle de la page.
To be continued ...