Le Web

Hypertexte

Prenons comme exemple une page Wikipédia. Par exemple, [la page de la Course wikipédienne]](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Exercices/Course_wikip%C3%A9dienne).

La page est en majeure partie composée de texte.

Et dans ce texte, il y a des liens internes, vers d'autres pages de Wikipédia, comme par exemple un lien vers la page des liens internes

Toutes les pages de Wikipédia sont plus ou moins liées entre elles par ces liens.

En fait, on peut voir Wikipédia comme un énorme texte, composé d'un grand nombre de pages, et qu'on ne lirait plus forcément de bas en haut et de gauche à droite, mais aussi en suivant les liens. Les "routes de lecture" sont alors très nombreuses.

On appelle un tel texte un hypertexte.

Le World Wide Web (plus généralement appelé Web), est aussi un hypertexte, qui regroupe l'ensemble des ressources (les pages web, mais aussi les images etc) accessibles par internet par le biais d'un Navigateur Web, comme Firefox ou Chromium.

Parfois, plusieurs ressources font partie d'un ensemble qu'on appelle un site web.

Où vivent les sites web ?

Les sites webs sont hébergés sur des ordinateurs (serveurs) partout dans le monde, avec lesquels le navigateur communique par le biais d'Internet.

Remarque

Le serveur initialement le logiciel qui est utilisé pour envoyer la page web au navigateur, et on appelle par extension serveur la machine sur laquelle il s'exécute.

Chaque ressource sur le Web est identifiée de manière unique par une URL (Uniform Resource Locator, localisateur uniforme de ressource), souvent appelé adresse web. Elle permet de créer facilement des liens entre les pages.

Une URL est composée de nombreuses parties. Décorticons l'adresse de la page de ce cours :

https://snt.felix-bertoni.fr/web/le_web_client_serveur/

https est le protocole, c'est la manière avec laquelle on accède à la machine

snt.felix-bertoni.fr est un nom de domaine, qui en général identifie un serveur.

/web/le_web_client_serveur/ est le chemin de la ressource sur le serveur. C'est exactement le même principe qu'un chemin de fichier sur un ordinateur de bureau.

Remarque

Une URL comporte parfois de nombreuses autres informations. L'analyse qui est faite ici est très simplifiée.

HTTP : modèle client-serveur

Une fois que l'on connaît l'adresse d'un page ou juste d'un serveur, on peut y accéder avec un navigateur, en utilisant le protocole de communication HTTP ou sa variante sécurisée, HTTPS.

Un protocole de communication est l'ensemble des règles (spécification) qui doivent être respectées pour permettre la communication entre deux appareils.

Analogie

Pour des humains, un protocole de communication serait par exemple le fait de dire bonjour, excusez-moi quand on aborde quelqu'un dans la rue pour demander une information, puis de terminer la conversation par merci, bonne journée.

Dans le protocole HTTP, deux entités (logiciels, machines) communiquent : le client et le serveur.

• le client, généralement un navigateur web, demande au serveur d'effectuer des actions, par le biais de requêtes. Par exemple "Coucou, donne moi la page /web/le_web_client_serveur/ s'il te plaît".

• le serveur se contente de répondre aux requêtes qu'il reçoit. "Tiens, voilà le cours sur le web !"

Le protocole HTTP est sans état. Autrement dit, les requêtes faites par le client ne sont pas reliées entre elles, il n'y a pas de conversation entre le client et le serveur, seulement des questions et des réponses.

Les protocoles sans état sont relativement peu intuitifs pour les humains, parce que nous discutons par le biais de conversations, où chaque partie d'un dialogue est s'appuie sur la discussion passée.

Si par exemple, imaginons que vous appelez un(e) ami(e) pour lui demander dans quelle salle a lieu le cours de SNT. La conversation se déroulera à peu près comme suit :

• Vous : "Salut, ça va ? Est-ce que tu peux me rappeler quelle salle c'est la SNT ?"
• Lui/elle : "Salut, c'est en G510"
• Vous: "Dans quel bâtiment ?"
• Lui/elle : "Bâtiment G, au fond du lycée !"

Quand vous avez demandé Dans quel bâtiment ?, vous avez implicitement fait référence à votre première question, ou vous mentionnez la salle de SNT. Votre ami(e), qui est aussi humain(e), arrive bien à comprendre celà, et donc vous réponds correctement.

Dans le protocole HTTP, c'est comme si vous raccrochiez à chaque réponse, que vous oubliiez tout, et que vous rappeliez ensuite pour poser la question suivante :

• Vous : "Salut, ça va ? Est-ce que tu peux me rappeler quelle salle c'est la SNT ?"
• Lui/elle : "Salut, c'est en G510" (l'appel se termine, il/elle oublie) (vous rappeler : )
• Vous: "Dans quel bâtiment ?"
• Lui/elle : "Comment ça quel bâtiment? De quoi tu me parles ?"

Ne pas avoir de conversation (d'état) est d'une manière générale un gros avantage pour le web :

• Celà rends le protocole plus simple.
• Il y a peu d'échanges entre le client et le serveur, celà économise donc de la connection Internet.
• Les échanges peuvent être très espacés dans le temps, de plusieurs semaines, sans que ça ne pose de problèmes.

Observer les requêtes

On peut voir les requêtes HTTP dans un navigateur (dans ce tutoriel, Firefox est présenté). Pour celà, il faut appuyer sur F12, une interface apparaît.

Ensuite, il faut aller dans l'onglet network (ou réseau), et sélectionner all.

La liste des requêtes est alors présente en dessous. Il faut parfois recharger la page (F5) pour que des requêtes apparaissent. Par exemple, sur cette page de cours, ça donne quelque chose comme ça :

Chaque colonne a un sens :

• Status/statut : si la requête a terminé avec succès (200) ou non (autre valeur)
• Method/méthode : la méthode HTTP utilisée. Celà corresponds au type de demande que fait le navigateur au serveur. Par exemple GET veut généralement dire "donne moi quelque chose", alors que POST veut dire "change quelque chose".
• Domain/domaine : le nom de domaine. Sur cette capture, c'est 127.0.0.1, mais si vous refaites ces manipulations, ce sera sans doute snt.felix-bertoni.fr.
• File/fichier : la ressource (fichier HTML, image, ...) que le serveur demande
• Type/type : Le type de fichier (html, css, png, ...)

Si vous cliquez sur une requête, les détails de la requête seront affichés dans une autre section :

On ne détaillera pas celà ici.

Les traitements sur le serveur

Les sites webs sont donc en deux parties :

• le frontend ("partie avant"), qui est la (les) page(s) web affichée(s) dans notre navigateur.
• le backend ("partie arrière"), qui est le serveur.

Dans beaucoup de sites internets, la majorité des mécanismes du site se trouvent dans le backend, entre autres :

• Le stockage des données
• Le traitement des données
• Les systèmes d'authentification avec un mot de passe
• La mise en forme des pages web demandées

Autrement dit, les page webs ne sont souvent qu'une interface pour le site web, et ne réalisent pas ou peu de calculs : elles ne servent qu'à gérer les intéractions avec l'utilisateur.

Par exemple, quand vous cherchez une vidéo sur YouTube (ou Framatube) :

Frontend	backend
Vous entrez votre recherche dans la barre de recherche, le navigateur envoie une requête au serveur YouTube (ou Framatube) pour avoir la réponse.
	Le serveur recoit la requête, puis interroge sa base de données pour connaître les vidéos qui peuvent vous intéresser
	Le serveur construit une nouvelle page YouTube (ou Framatube) HTML, et l'envoie à votre navigateur
Le serveur recoit la réponse sous forme d'une page HTML et l'affiche pour que vous choisissiez une vidéo

Les cookies

A ce point là du cours, il y a peut-être quelque-chose qui vous gêne : si HTTP est sans état, pourquoi n'a-t-on pas besoin de rentrer notre mot de passe à chaque requête effectuée par le navigateur ? Comment un site d'achat peut-il retenir notre panier d'une page à l'autre ?

Reprenons l'exemple de la conversation :

• Vous : "Salut, ça va ? Est-ce que tu peux me rappeler quelle salle c'est la SNT ?"
• Lui/elle : "Salut, c'est en G510" (l'appel se termine, il/elle oublie) (vous rappeler : )
• Vous: "Dans quel bâtiment ?"
• Lui/elle : "Comment ça quel bâtiment? De quoi tu me parles ?"

En fait, notre deuxième question (Dans quel bâtiment ?) n'a pas de réponse parce qu'elle manque de contexte. On pourrait la reformuler pour répéter les éléments qui ont étés oubliés à la question d'avant :

• Vous : "Salut, ça va ? Est-ce que tu peux me rappeler quelle salle c'est la SNT ?"
• Lui/elle : "Salut, c'est en G510" (l'appel se termine, il/elle oublie) (vous rappeler : )
• Vous: "Dans quel bâtiment est la salle G510 ?"
• Lui/elle : "Bâtiment G, au fond du lycée !"

Dans la navigation web, le contexte est généralement transmis sous forme de cookie. Un cookie est un tout petit texte qui contient quelques d'informations formant le contexte.

Les cookies sont nécessaires au fonctionnement du web moderne, sans quoi notre expérience de navigation en tant qu'utilisateurs serait très limitée. Toutefois, les cookies peuvent permettre de nous pister.

Certains site internets font appel à des sites tiers pour une partie de leur contenu. C'est par exemple le cas de la plupart des publicités affichées dans une page. Si un publicitaire nous laisse un cookie, et que ce même tiers fait partie d'un autre site que nous visitons, alors le publicitaire saura que nous avons visité les deux sites.

• Je visite le site abc.xyz, la publicité DD, par le publicitaire AA laisse un cookie.
• Je visite le site ggg.ooo, la publicité EE, par le publicitaire AA reconnaît le cookie AA.

Donc, AA sait maintenant que j'ai visité abs.xyz ET ggg.ooo.

Avoir une grande quantité de données de l'historique des sites visités par une personne peut permettre d'établir en partie son profil psychologique : goûts, opinions politiques, peurs, ... Avoir un tel profil ouvre alors la porte à une influence plus efficace mais pas forcément désirée. Ainsi, un publicitaire pourra choisir pour un même produit (ou service ou politicien ou autre) différentes manières de le présenter à l'utilisateur, en fonction de son profil.

Ainsi, pour vous présenter une gourde, si vous êtes plutôt aventurier, elle vous sera montrée comme un outils pour partir à l'aventure. Si vous préférez le confort de votre canapé, elle sera présentée comme l'atout a avoir pour garder au chaud votre chocolat chaud pour ne pas avoir à vous lever.

Pour une gourde, celà peut faire sourire. Mais c'est bien plus dramatique si l'on vous présente des personnalités politiques pour qui voter en jouant sur vos peurs, ou en ommettant volontairement LE point de son programme qui vous ferait ne pas voter pour cette personne.

parler de Brave etc

Moteurs de recherches