Interactions entre l’homme et la machine sur le 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. 
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.

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" pour que le web commence à devenir populaire en dehors du monde de la recherche.

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).
   

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).

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.

Voici un exemple d'URL :

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

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

• 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. 

C’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)

Dans notre exemple : «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.

C’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, 

Dans notre exemple : /chemin/vers/».

• La ressource elle-même

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

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

Dans notre exemple :

?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.

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

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.

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

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

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

Voici un exemple de réponse possible :

$\scriptstyle\color{blue}{\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\color{blue}{\textit{< Cache-Control: private, max-age=0}}$
$\scriptstyle\color{blue}{\textit{< Content-Type: text/html; charset=ISO-8859-1}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{}}$
$\scriptstyle\color{blue}{\textit{

Voici un paragraphe.

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

• $\color{blue}{\text{HTTP/1.1 200 OK}}$ : Le code 200 signifie que la ressource est bien présente sur le serveur.
  Il existe d'autres code 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.
  
  
• $\color{blue}{\text{Server: Apache/2.0.54 (Debian GNU/Linux)}}$ $\color{blue}{\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.

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

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.
   

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

• 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.

Remarque : quand on clique sur un lien, le navigateur envoie de même une requête 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.

Quelques 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

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.