Interactions entre l’homme et la machine sur le Web

Le World Wide Web

Le "World Wide Web", plus communément appelé "Web" (littéralement la "toile") a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 90.

Le système hypertexte

Pour faciliter les échanges d'information entre scientifiques Tim Berners-Lee met au point le système hypertexte. Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. Ces mots "cliquables" sont appelés hyperliens.

Développement du premier navigateur web

Tim Berners-Lee développe aussi le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes). C'est en 1993 avec l'arrivée du navigateur web "NCSA Mosaic" que le web commence à devenir populaire en dehors du monde de la recherche.

Les trois notions essentielles du web

Le web est basé sur 3 notions essentielles :

1. Le protocole HTTP (HyperText Transfert Protocol)
2. Les URL (Uniform Resource Locator)
3. Le langage de description HTML (HyperText Markup Language)

Différence entre web et internet

Attention à ne pas confondre "web" et "internet". Internet interconnecte plusieurs réseaux. Le web, s'appuie certes sur internet mais alors qu'internet est basé sur le protocole IP, le web combine les 3 technologies HTTP, URL et HTML. Il est aussi à noter que sur internet d'autres fonctionnalités que le web sont à disposition.

On peut citer par exemple les emails (utilisant le protocole SMTP : Single Mail Transfert Protocol) ou bien les transferts de fichiers (utilisant le protocole FTP : File Transfert Protocol).

Qu'est-ce qu'une URL ?

Une URL est une adresse sur le web. Elle permet de trouver une page sur Internet. Le sigle URL est l'acronyme de Uniform Resource Locator. L'URL est saisie dans la barre d'adresse d'un navigateur afin d'accéder à une ressource sur le Web.

http://www.exemple.com/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2

Décomposition d'une URL

Une URL se décompose en plusieurs éléments :

Le protocole

Le protocole : « http » (pour HyperText Transfer Protocol). Il existe une version sécurisée (les données sont chiffrées) de ce protocole nommée « https ».

Le nom de domaine

Le nom de domaine est le serveur web avec lequel le navigateur communique pour échanger du contenu. Ce nom de domaine est la traduction en mots de l'adresse numérique (ou adresse IP).

«www.exemple.com».

L'extension du nom de domaine permet d'identifier le pays ou le type de site : .fr, .com, .org, .gouv.fr (pour les sites officiels du gouvernement), etc.

Le chemin d'accès

Le chemin d'accès est une précision apportée pour aider le serveur à repérer l'emplacement de la ressource, ou le « chemin » qui mène à cette ressource.

/chemin/vers/».

La ressource elle-même

Dans notre exemple : monfichier.html. Il s'agit ici d'une page html.

Les paramètres

Des paramètres (facultatifs) fournis au serveur web.

?clé1=valeur1&clé2=valeur2 #QuelquePartDansLeDocument

Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource.

Les protocoles de communication

Un protocole de communication est un ensemble de règles qui permettent à 2 ordinateurs de communiquer ensemble.

Le protocole HTTP

Le protocole HTTP (HyperText Transfert Protocol) va permettre au client d'effectuer des requêtes à destination d'un serveur web. En retour, le serveur web va envoyer une réponse.

Structure d'une requête HTTP

Voici une version simplifiée de la composition d'une requête HTTP (du client vers le serveur) :

$\scriptstyle\color{blue}{\textit{GET /monrepertoire/monFichier.html HTTP/1.1}\\
\textit{User-Agent : Mozilla/5.0}\\
\textit{Accept : text/html}}$

Cette requête http contient les informations suivantes :

• $\color{blue}{\text{"GET"}}$ est la méthode employée
• $\color{blue}{\text{"/monrepertoire/monFichier.html"}}$ correspond l'URL de la ressource demandée
• $\color{blue}{\text{"HTTP/1.1"}}$ : la version utilisée du protocole HTTP (1.1 ici)
• $\color{blue}{\text{"Mozilla/5.0"}}$ : le navigateur web employé est Firefox de la société Mozilla
• $\color{blue}{\text{"text/html"}}$ : le client s'attend à recevoir du HTML

Les méthodes HTTP principales

Parmi les méthodes HTTP disponibles $\color{red}{\text{(GET, HEAD, POST, OPTIONS,}}$ $\color{red}{\text{CONNECT, TRACE, PUT,}}$ $\color{red}{\text{PATCH, DELETE)}}$, voici le détail des 4 plus courantes :

• $\color{red}{\text{GET}}$ : C'est la méthode pour demander une ressource.
• $\color{red}{\text{POST}}$ : Cette méthode est utilisée pour soumettre des données en vue d'un traitement côté serveur. C'est la méthode employée lorsque l'on envoie au serveur les données issues d'un formulaire.
• $\color{red}{\text{DELETE}}$ : Cette méthode permet de supprimer une ressource sur le serveur.
• $\color{red}{\text{PUT}}$ : Cette méthode permet de modifier une ressource sur le serveur.

Réponse du serveur au client

Une fois que le serveur a reçu la requête du client, le serveur va adresser une réponse au client.

Exemple de réponse HTTP

Voici un exemple de réponse possible :

$\scriptstyle{\textit{< HTTP/1.1 200 OK}\\
\textit{< Date: Tue, 09 Jul 2019 19:43/31 GMT}\\
\textit{< Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4}}$
$\scriptstyle{\textit{< Cache-Control: private, max-age=0}}$
$\scriptstyle{\textit{< Content-Type: text/html; charset=ISO-8859-1}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{}}$
$\scriptstyle{\textit{

Voici un paragraphe.

Explications de la réponse serveur

Voici quelques explications sur la réponse envoyée par le serveur :

• Code de statut HTTP : $\text{HTTP/1.1 200 OK}$ - Le code 200 signifie que la ressource est bien présente sur le serveur. Il existe d'autres codes de retour, le plus courant en cas d'erreur étant le code "404 : not found" lorsque la ressource demandée par le client n'existe pas sur le serveur.
• Informations serveur : $\text{Server: Apache/2.0.54 (Debian GNU/Linux)}$ $\text{DAV/2 SVN/1.1.4}$ - On a ici une information sur la machine serveur : le type de serveur est un serveur Apache fonctionnant sur le système d'exploitation Linux.

Le protocole HTTPS

Pour garantir le chiffrement des données entre le client et le serveur, il existe une version sécurisée de http : https.

Principe de fonctionnement

Voici son principe de fonctionnement :

1. Le client (le navigateur Web) contacte un serveur et demande une connexion sécurisée en proposant une liste de méthodes de chiffrement.
2. Le serveur répond en choisissant dans cette liste une méthode de chiffrement et produit un certificat garantissant qu'il est bien le serveur en question et pas un serveur pirate déguisé.
3. Les données échangées ensuite entre le client et le serveur sont ensuite chiffrées grâce à un algorithme de cryptographie.

Le modèle client-serveur pour les pages Web

Voici le principe de fonctionnement du modèle client-serveur dans le cadre d'un échange de pages Web sur Internet :

Les acteurs du modèle client-serveur

• Le client : c'est le visiteur du site Web. Il demande la page Web au serveur. En pratique, vous êtes des clients quand vous surfez sur le Web.
  Plus précisément c'est le navigateur Web (Firefox, Chrome, Safari, IE, Edge, …) qui est le client car c'est lui qui demande la page Web.
• Le(s) serveur(s) : ce sont les ordinateurs qui délivrent les sites Web aux internautes, c'est-à-dire aux clients.

Le client fait une requête au serveur, qui lui répond en donnant la page Web.

Le navigateur comme client HTTP

Quand on ouvre une URL commençant par http://, le navigateur va agir comme un client HTTP. Il va donc envoyer une requête HTTP.

Le serveur HTTP renvoie une réponse HTTP qui contient la page Web demandée. Le navigateur interprète alors la page Web et l'affiche.

Quand on clique sur un lien, le navigateur envoie de même une requête http.

Serveur HTTP

Un serveur HTTP est un logiciel qui répond à des requêtes HTTP. Il est souvent associé au port 80 de la machine hôte.

Exemples de serveurs HTTP

• Apache HTTP Server : classique
• Apache TomCat : évolution pour Java (J2EE)
• IIS (Internet Information Services) : Microsoft
• Node.js : environnement de développement codé en JavaScript pouvant faire office de serveur web.
• Concrètement, pour développer un site-web, on se servira souvent d'une suite AMP (Apache, MySQL, PHP) comme XAMPP, EasyPhp, WampServer : serveur WAMP (Windows Apache Mysql Php) en local

Équivalence importante

En résumé : un serveur Web = un serveur HTTP

Les sites statiques

Ce sont des sites réalisés uniquement à l'aide de HTML/CSS. Ils fonctionnent très bien mais leur contenu ne change pas. Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine ».

Les sites dynamiques

Ils utilisent d'autres langages, tels que PHP ou Python, pour générer du HTML et CSS. La plupart des sites Web que vous visitez sont dynamiques.

Fonctionnalités typiques de sites dynamiques

• Un espace membres,
• Un forum,
• Un compteur de visiteurs,
• Des actualités,
• Une newsletter.

Mécanisme de génération des pages dynamiques

1. Le client demande au serveur à voir une page Web (requête HTTP) ;
2. Le serveur crée la page spécialement pour le client (en utilisant par exemple le langage PHP ou Python) ;
3. Le serveur répond au client en lui envoyant la page qu'il vient de générer (réponse HTTP).

PHP ou Python sont des langages dit serveur. Alors que HTML et CSS sont des langages dits clients.

Les sites interactifs

En plus de l'aspect dynamique, il est possible de rendre un site plus interactif, par exemple en lui permettant de détecter ce que fait l'utilisateur (déplacement souris, appui sur un élément de la page, etc.) pour déclencher des animations ou des événements. Pour cela, on ajoutera un fichier codé en JavaScript au page-web. Dans ce cas, le JavaScript est lu et interprété par le navigateur-web, on dit donc que c'est un langage client, comme le HTML et le CSS.

Un site peut à la fois être dynamique et interactif.