Le Web (2nde - SNT)

I. Un peu d'histoire.

Introduction : https://www.youtube.com/watch?v=GqD6AiaRo3U

On trouve le terme "web" dans WWW pour World Wide Web qui signifie large toile (d'araignée) mondiale en français. Il permet de consulter grâce à un navigateur (Chrome, Firefox, Safari, etc.) des pages regroupées sur des sites via le réseau Internet.

Le "World Wide Web", plus communément appelé "Web" a été développé au début des années 90 au CERN (Conseil Européen pour la Recherche Nucléaire) par le britannique Sir Timothy John Berners-Lee, physicien né en 1955 à Londres. Il a été rendu public le 6 août 1991.

L'idée est d'utiliser l'Internet, crée en 1972 pour les besoins de l'armée américaine, pour faciliter les échanges entre les chercheurs de différents centres de recherches qui étaient déjà connectés les uns aux autres par Internet. Tim Berners-Lee (avec d'autres ingénieurs) met alors au point le système hypertexte qui permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots. Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens" ou "liens hypertexte".

L’image de la toile (d’araignée) découle des liens hypertextes qui relient virtuellement les pages entre elles et qui peuvent donc faire penser à une immense toile d’araignée.

On peut voir la première page web à l'adresse : http://info.cern.ch/hypertext/WWW/TheProject.html

Berners-Lee développe aussi sur un ordinateur NeXT le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), qu'il nomme "Worldwideweb". On peut le voir à l'adresse : https://worldwideweb.cern.ch/browser/#https://worldwideweb.cern.ch/browser/default.html

Berners-Lee et son équipe auront finallement mis au point le Web et le concept d'hyperliens, un langage pour écrire les documents lisibles sur le Web : le HTML et un logiciel appelé navigateur qui permet d'afficher ces documents.

Le Web est la combinaison de 3 technologies :

• le protocole(*) HTTP (HyperText Transfert Protocol) qui permet les communications,

• les URL (Uniform Resource Locator) qui permettent de retrouver les ressources et

• le langage de description HTML (HyperText Markup Language) qui permet d'écrire les pages web.

() Un protocole est ensemble de règles qui permettent à 2 ordinateurs de communiquer ensemble.*

Bien que rendu public dès 1991, il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" développé pour MacOS puis pour Windows pour que le web commence à devenir populaire en dehors du petit monde de la recherche.

Aujourd'hui il existe de nombreux navigateurs, les plus célèbres sont : Chrome, Firefox, Safari, Edge, Opéra, Brava Browser, etc.

ATTENTION : Google n'est pas un navigateur, c'est un moteur de recherche.

Remarque : Attention, il ne faut pas confondre "Web" et "Internet" !

Internet est un réseau (de réseaux) et le Web est un service qui utilise ce réseau. C'est loin d'être le seul service : il y a aussi le mail, la messagerie instantanée, le transfert de fichier, etc. Internet permet de transporter les documents du Web et il fonctionne sans le Web, par contre le Web ne peut pas fonctionner sans Internet.

II. Le protocole HTTP

Comment circulent les informations sur le réseau Internet ?

Le navigateur (ou client web) est chargé de demander une page Web. Il s'agit d'une requête. Le serveur web répond aux demandes des clients quand il est interrogé. Ce serveur a un stock de nombreux fichiers et sites web qu'il peut livrer aux clients mais il faut que ces requêtes soient correctement formulées.

HTTP signifie : Hypertext Transfer Protocol. C'est le protocole de transfert d'Hypertextes, son rôle est de définir les règles suivies par le navigateur pour obtenir une page demandée à un serveur.

On peut voir parfois "htpps" au lieu de "http". C'est alors la version "sécurisée" du protocole HTTP (le "S" à la fin est l’initiale du mot "Secure"). Les données sont chiffrées (par l'algorithme SSL) avant d'être transmises sur le réseau. En cas d'interception de ces données, elles ne seront pas utilisables puisqu'elles sont chiffrées.

Remarque : Si un serveur Web ne peut pas renvoyer une ressource demandée (parce qu'il ne l'a pas par exemple), c'est aussi le protocole HTTP qui va renvoyer un message d'erreur, comme par exemple : "Error 404 page not found".

On peut par exemple l'obtenir en tapant dans un navigateur : https://google.fr/toto

III. Les URL.

URL signifie : "Uniform Resource Locator" ou, en français, "localisateur uniforme de ressource". Une URL est l'adresse d'une ressource unique sur le Web.

Les adresses web (URL) sont l'une des trois inventions à la base du World Wide Web, et selon ses inventeurs, la plus importante. Elles sont connues sous la forme de chaînes de caractères, commençant souvent par "www" et qui identifient une page web : par exemple https://www.wikipedia.org.

Ce sont ces adresses qu'on retrouve dans la barre d'adresse (ou barre URL) d'un navigateur web.

Auparavant il était nécessaire de préciser le protocole http et le réseau www quand on tapait une adresse URL dans un navigateur mais ce n'est plus le cas aujourd'hui.

Les URL se composent de plusieurs parties pour adresser une page ou un fichier :

• Le protocole : HTTP ou HTTPS (il existe d'autres protocoles).

• Le nom de domaine, qui se termine généralement par .com, .fr, .net, .gov, .org, etc.

• et éventuellement le nom du répertoire ou dossier qui contient la page Web et enfin le nom de fichier lui-même.

Par exemple : http://www.education.gouv.fr/pid24239/les-programmes-du-lycee.html

Cette URL désigne le fichier nommé : les-programmes-du-lycee.html. Ce fichier est stocké dans le répertoire (ou le dossier) pid24239. Le nom de domaine est education.gouv.fr et on y accède par le protocole http.

Remarque : La longueur maximale d’une URL d’un site ne doit pas dépasser les 2000 caractères, mais dans la pratique, il est recommandé de ne pas dépasser les 200 caractères.

IV. Les langages du Web.

Plusieurs langages, standardisés par le W3C (World Wide Web Consortium : consortium international dont le rôle est de définir les standards techniques liés au Web) permettent de décrire des pages web.

En TP nous allons nous intéresser uniquement au couple HTML+CSS.

1. Le HTML.

HTML signifie "HyperText Markup Language" qu'on peut traduire par "langage de balises pour l'hypertexte". Il est né en 1991 avec le Web et depuis 2014, on utilise la version 5 : le HTML5.

HTML n'est pas un langage de programmation, c'est un langage de description qui est utilisé afin de créer et de structurer le contenu d'une page web en utilisant des "balises", notées entre les symboles "< >" insérées au sein d'un texte "normal".

Ce balisage permet au navigateur, de savoir comment traiter et afficher les ressources, ainsi il permet de donner du sens à la page (on parle de la sémantique).

2. Le CSS.

HTML ne doit pas être utilisé pour gérer la mise en page, il s'occupe uniquement du contenu, pour tout ce qui concerne la mise en page et l'aspect "décoratif" (on parle du "style" de la page), on utilisera le CSS (Cascading Style Sheets). CSS est né au milieu des années 90 mais il n'est correctement pris en charge par tous les navigateurs que depuis le début des années 2000.

3. Le JavaScript.

Avec CSS et HTML, JavaScript (dit JS) fait partie des 3 "langages du Web" mais contrairement aux 2 précédents, c'est un langage de programmation. Il a été créé en 1995 par l'américain Brendan Eich. Son rôle est de créer du contenu "dynamique" sur une page web : animations d'images, slides, menus déroulants, mode sombres automatique, etc. Nous ne travaillons pas sur ce langage dans le cadre de la SNT.

V. Communication entre clients et serveurs.

1. Généralités.

Comme déjà brièvement évoqué, pour qu'on puisse consulter un site web, un dialogue entre le navigateur (le client) et le serveur doit être établi.

Un clic sur un lien ne nous amène pas à une page web, c'est la page web qui est envoyée au navigateur.

Par exemple en tapant "http://www.google.fr" dans la barre URL de son navigateur, l'ordinateur va chercher à entrer en communication avec le serveur sur lequel est stocké le site web google.fr.

Une fois la liaison établie, le client et le serveur vont échanger des informations en dialoguant un peu de la façon suivante (en simplifiant considérablement) :

client : bonjour www.google.fr, pourrais-tu m'envoyer le fichier index.html (fichier racine du site par défaut) ?

serveur : OK client, voici le fichier index.html

client : Je constate que des images et du code CSS sont utilisés, peux-tu me les envoyer ?

serveur : OK, les voici

Pour consulter une ressource, le client (navigateur) envoie une requête au serveur qui y répond et envoie cette ressource sous forme de "paquets" (la ressource est "découpée en petits morceaux") au client. Ces paquets sont reconstitués et la ressource est alors interprétée (affichée dans le cas d'une page web) par le client.

Remarque : En fait le client ne peut pas trouver directement le serveur avec seulement l'URL, il doit passer par un autre service appelé DNS qui permet d'associer l'URL à une adresse, appelée adresse IP, nous détaillerons un peu plus ces notions dans le prochain chapitre consacré à Internet.

2. Cas particulier : Site dynamique.

Il existe deux types de sites web :

• les sites statiques qui sont les mêmes pour tous les utilisateurs, ils ne s'adaptent pas en fonction de l'utilisateur,

• et les sites dynamiques qui vont être affichés (et donc créés) de façon personnalisée.

Par exemple, le site nsirenoir.fr est un site statique, par contre le site amazon.com est un site dynamique.

Dans le cas d'un site dynamique, la page demandée n'est pas présente sur le serveur, elle doit être "fabriquée" par le serveur avant de l'envoyer au client.

Le serveur va créer à la demande des pages HTML et les envoyer aux clients qui les demandent en fonction des informations données par ces clients.

Le contenu HTML est souvent obtenu en combinant l’utilisation d’un langage de programmation et une base de données, comme c'est le cas pour tous les sites de e-commerce par exemple.

Dans le cas d'un site dynamique, on a alors le schéma suivant :

VI. Les moteurs de recherche.

Un moteur de recherche est une application informatique permettant de rechercher des ressources.

Ces ressources peuvent être des pages web, des articles de forums, des images, des vidéos, des fichiers, etc.

Il existe des sites web dont le principal service est la recherche, ils sont alors eux-mêmes désignés comme étant des moteurs de recherche. Le plus célèbre étant bien-sûr Google.

La société Google a été créée en Californie dans la Silicon Valley en 1998 par 2 informaticiens : Larry Page et Sergey Brin. Aujourd'hui elle compte plus de 50 000 employés et fait partie des géants du marché d'Internet (avec Apple, Facebook, Amazon et Microsoft souvent appelés les "GAFAM")

On peut noter que d'autres moteurs de recherche existent (ou du moins essayent d'exister) comme, par exemple :

Bing : Moteur de recherche historique développé par Microsoft depuis 1998, 2ème plus gros moteur de recherche de France après Google (mais très loin derrière)

Yahoo! : Moteur de recherche très complet avec des fonctionnalités uniques.

Qwant : Moteur de recherche français qui mise sur la protection des données depuis 2011.

DuckDuckGo : "Le moteur de recherche qui ne vous espionne pas" d’après ses développeurs (un peu comme Qwant)

Les moteurs de recherche sont des instruments de recherche sur le web qui fonctionnent sans intervention humaine. Ils sont basés sur des "robots" (ou "bot" ou "crawler" ou encore "spyder"), qui parcourent les sites à intervalles réguliers et de façon automatique pour découvrir de nouvelles URL en suivant les liens des pages web.

L'exploration (ou crawl) du web est réalisée par les robots d'indexation qui suivent tous les liens qu'ils trouvent. Elle est lancée depuis une ressource donnée. Chaque page identifiée est alors indexée dans une base de données. L'indexation des ressources récupérées consiste à extraire les mots considérés comme significatifs des ressources explorées (d'où l'importance de donner du sens à sa page à l'aide d'HTML et de bien respecter les standards du Web), appelés "mots clés" puis à fabriquer un index (comme celui d'un livre), qui permet de retrouver rapidement ces pages en fonctions des mots clés recherchés.

La principale difficulté des moteurs de recherche consiste à classer l'ensemble des pages associées aux mots clés demandés de la façon la plus pertinente possible.

C'est sur ce classement que les moteurs de recherche se font concurrence et les méthodes qu'ils utilisent pour organiser leur classement sont tenues secrètes par les moteurs de recherche.

Google a été conçu à partir d'un algorithme d'analyse des liens appelé l'algorithme "PageRank". Le PageRank est un critère de pertinence qui analyse la quantité et la qualité des liens qui pointent vers une page web. Depuis la création de Google cet algorithme a été amélioré et complété par d'autres algorithmes mais il reste le cœur de l'algorithme de Google.

L’idée principale du PageRank est que si une page A fait un lien vers une page B, alors c’est que la page A juge que la page B est suffisamment importante pour mériter d’être citée et d’être proposée aux visiteurs. Ce lien de A vers B augmente le PageRank de B.

Deux idées supplémentaires viennent la compléter :

• L’augmentation de PageRank de la page B est d’autant plus importante que le PageRank de la page A est élevé. En d’autres termes, il est bien plus efficace d’avoir un lien depuis la page d’accueil de Google que depuis une page du site d'un inconnu.

• L’augmentation de PageRank de la page B est d’autant plus importante que la page A fait peu de liens. En d’autres termes, si la page A juge qu’il n’y a qu’une page qui mérite un lien, alors il est normal que le PageRank de la page B augmente plus que dans le cas où de nombreuses pages obtiennent un lien.

Les calculs qui interviennent sont très complexes puisqu'il faut calculer en même temps la popularité de toutes les pages du web qui dépendent des unes des autres, c'est là qu'on ne peut pas se passer de mathématiciens et d'ordinateurs de plus en plus puissants.

Google attribue un "PageRank" à chaque page puis en tenant compte d’autres facteurs tenus secret, il choisit quelles pages seront présentées en premier.

VII. Les cookies.

Introduction :Vidéo introduction

Un cookie est un fichier qui est déposé par le navigateur sur l'ordinateur quand on navigue sur certains site web. Il est composé uniquement de texte (il est donc inoffensif).

Il est généré par le serveur du site consulté et est envoyé au navigateur qui le stocke sur le disque dur. À la prochaine requête du navigateur il est renvoyé vers le serveur.

Les cookies sont utilisés, par exemple, pour :

• Les sites marchands (retrouver les paniers ou les recherches d’articles)

• S’identifier avec un login et un mot de passe (soit le navigateur "retient" le mot de passe, soit un cookie est créé avec le mot de passe).

• Stocker des paramètres d’affichage d’un site (le thème, l’affichage listes/colonnes, la langue…).

• Enregistrer les différentes saisies réalisées sur un site (ils vont pouvoir ainsi contenir, vos centres d’intérêts et les publicités proposées vont pouvoir ainsi être ciblées).

• Analyser les pages vues (pages vues, temps passé sur une page, est-ce que l’utilisateur a déjà vu cette page, etc.).

• Récupérer différentes informations personnelles vous concernant.

Il existe des cookies dits "cookies tiers" qui sont des cookies déposés sur des domaines différents de celui du site principal qui ont été interrogés par le site visité et non par l'internaute lui-même, ils sont donc déposés à l’insu de l’utilisateur. Il permettent au site tiers de voir quelles pages ont été visitées sur le site visité par un utilisateur et de collecter des informations sur lui, notamment à des fins publicitaires.

Depuis 2020, quand on navigue en europe sur le Web, on doit être informé et donner son consentement préalablement au dépôt et à la lecture de certains cookies. C'est une partie du "règlement général sur la protection des données", plus connu sous l'acronyme RGPD. Pour plus d'informations : https://www.cnil.fr/fr/cookies-et-autres-traceurs/regles/cookies/que-dit-la-loi

Vidéo qui résume le cours (ne remplace la lecture du cours) : https://www.youtube.com/watch?v=g1rvdtOUWA4