Introduction
Un peu d’histoire
Le World Wide Web, communément appelé web, a été inventé en 1989 au CERN par Tim Berners-Lee et Robert Cailliau. Contrairement à l’idée reçue et à un abus de langage, le Web et Internet ne sont pas la même chose :
Internet est un réseau de télécommunication :
- international,
- permettant l’accès à des données de toutes sortes : textes, images, musiques, etc.
- reposant sur des protocoles de communication : HTTP, FTP, SMTP, POP3, P2P, etc.
Le World Wide Web est :
- un service d’Internet
- reposant sur trois technologies :
- l’adressage par URL (Uniform Resource Locator) pour la localisation des ressources,
- le protocole de transfert HTTP (Hypertext Transfert Protocol) pour la méthode d’accès aux ressources.
- le langage de présentation HTML (Hypertext Markup Language) pour la structuration des documents transmis sur le réseau.
Le Web est un système fonctionnant sur Internet
Chronologie
Au début d’internet, les documents web étaient écrits uniquement en HTML. Ce langage de présentation permet de structurer ces mêmes documents sous forme de titres, paragraphes, listes et liens hypertextes.
Structurer une page web avec du HTML est équivalent à structurer un document dans une suite office.
Avec les années, le langage HTML s’est étoffé. L’apparition des feuilles de style CSS et des langages de programmation ont permis de rendre le web plus souple et de diversifier sa conception graphique.
| Année | Technologie | Évènement |
|---|---|---|
| 1989 | HTTP | Naissance du protocole |
| 1989 | WWW | Premier navigateur web |
| 1989 | HTML | Naissance du langage balisé |
| 1994 | WWW | Fondation de la W3C |
| 1995 | HTML | version 2.0 |
| 1996 | CSS | version 1.0 |
| 1997 | HTML | version 3.2 |
| 1999 | CSS | version 2.0 |
| 2012 | HTML | version 5.0 |
| 2012 | CSS | version 3.0 |
Le Web, comment ça marche ?
Au dela des technologies liées au Web, celui-ci repose sur une logique dite de client-serveur.
Faisons un analogie avec la vie réelle : dans un restaurant, le client passe une commande à un serveur qui s’occupe de vous délivrer le résultat de votre requête, préparée par les équipes.
Sur le web, cela fonctionne pareil : le client (le navigateur web) passe une commande (une requête) à un serveur (un ordinateur connecté à Internet) qui s’occupe de délivrer le résultat de votre requête (la page web) préparée par les équipes (les programmes).
Les navigateurs web
En cours d’écriture
La console des navigateurs
Chaque navigateur est doté d’une console accessible en faisant clic droit, inspecter ou en appuyant sur la touche F12 du clavier.
Ouvrez la console de votre navigateur en faisant un clic droit ou en appuyant sur F12.
Les onglets de la console
La console est divisée en plusieurs onglets permettants de visualiser un certain nombre d’informations. C’est également un indispensable pour les développaires web. Voyons ensemble les principaux onglets :
L’onglet Inspecteur
Cet onglet permet d’afficher le code source de la page tel qu’il a été envoyé par le serveur. On y retrouve le code HTML et CSS de la page (le style).
Le code affiché est modifiable et permet aux développaires de le vérifier si l’affichage ne correspond pas à ce qui est attendu par exemple. Toute modification permet de modifier la page web affichée mais pas celle coté serveur
L’onglet Console
Cet onglet permet de lire les traces du site et d’écrire du code JavaScript.
Le code écrit dans cet onglet permet d’intéragir avec la page web affichée mais pas celle coté serveur
L’onglet Accessibilité
Cet onglet permet de consulter la façon dont les divers éléments de la page seront interprétés par les outils d’assitance technique (exemple: lecteurs d’écran)
L’accessibilité web est un droit fondamental pour les personnes handicapées. Elle est règlementée par le RGAA (Référentiel général d’amélioration de l’accessibilité).
L’onglet Réseau
Cet onglet permet de visualiser, sous forme d’un tableau, l’ensemble des requêtes HTTP (les échanges entre le client et le serveur). Chaque ligne correspond à une ressource dont le navigateur a besoin pour afficher convenablement la page (exemple: une image, une fonte, etc.).
Pour chaque ressource, le tableau présente les informations suivantes :
- État
- Le code état HTTP de la requête.
- Méthode
- La méthode de requête HTTP utilisée.
- Domaine
- Le nom de domaine où se site la ressource.
- Fichier
- Le nom du fichier.
- Initiateur
- L’élément HTML qui a déclenché la demande d’une ressource.
- Type
- Le type de la ressoure (exemple: jpg).
- Transfert
- La quantité de ressources transferées par le réseaux (exprimé en octets).
- Taille
- Le poids de la ressource (exprimé en octets).
- Chronologie
- La chronologie et le temps de chargement des ressources.
Cet onglet est très utile pour mesurer l’impact environnemental d’une page web lorsque l’on s’insrit dans une démarche d’écoconception web.
L’onglet Débogeur
Cet onglet permet de voir le code JavaScript et de déboguer celui-ci en cas d’erreur.