Web
Introduction - Définition
Le Web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, multimédia: image, son, vidéo) reliées par des liens hypertextes et accessibles sur le réseau internet.Repères chronologiques
- 1945: Vannevar Bush publie l'article As We May Think, un mois avant les bombardements d'Hiroshima et Nagasaki, dans lequel
il décrit un appareil électronique relié à une bibliothèque et permettant une navigation par liens entre les documents, et
aussi capable de créer automatiquement des références entre les médias.
Il appelle cet apparail le Memex, pour memory extender. - 1965: invention et programmation du concept d'hypertexte par Ted Nelson.
Ted Nelson, sociologue et philosophe, a mis en place dès les années 1960 le projet Xanadu, projet de système d'information ayant entre autres caractéristiques:- le partage instantané de données informatiques;
- chaque utilisateur est unique et identifié;
chaque document est unique, identifié et sécurisé; - chaque utilisateur peut rechercher, récupérer, créer et stocker des documents;
- chaque document peut contenir des liens de tous types;
- chaque document peut avoir des règles d'accès sécurisées;
- chaque document peut rapidement être recherché, stocké et récupéré sans que l'utilisateur ne sache où il est physiquement situé;
- chaque document est automatiquement stocké de façon redondante, pour maintenir la disponibilité même en cas de désastre;
- le protocole de communication client-serveur Xanadu est un standard librement publié;
- ...
- 1989: naissance du Web au CERN par Tim Berners Lee
- 1993: mise dans le domaine public, disponibilité du premier navigateur Mosaic
- 1995: mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP)
- 2001: standardisation des pages grâce au DOM (Document Object Model)
- 2010: mise à disposition de technologies pour le développement d'applications sur mobiles.
Évolutions du Web
- Web 1.0: ∼1990-2000
-
Web 1.0, ou web traditionnel, est avant tout statique.
Le client y "consomme" de l'information, comme dans une bibliothèque.
La communication ne se fait que dans un seul sens. - Web 2.0: ∼2000-2010
-
Web 2.0 ou web interactif ou web social.
Les utilisateurs sont aussi acteurs, contributeurs: ils peuvent interagir avec le contenu, publier des informations, communiquer et répondre à un ensemble de personnes non définies.
Exemples: wikipédia, youtube, facebook, Myspace, Flickr
Exercice 1. a)Citer quelques inconvénients du web2.0.- Thématique du copyright
- pérénnité des données
- fiabilités
- traçabilité
- Web 3.0: ∼2008-…
-
Web3.0 ou web sémantique et web "des machines".
C'est aussi le web des moteurs de recherche.
Il vise à donner un sens aux données, à l'immense masse d'informations disponibles afin de permettre son organisation, son classement, …
Il permet de mettre en relation les utilisateurs et leurs besoins et les données et applications.
la version 5 du langage HTML, ou HTML5, a été finalisée en 2014 dans cette optique. De nombreuses balises sont alors prévues pour la descritpion sémantique du contenu, comme "author", l'attribut "rel" pour indiquer le lien (relation) entre des liens, voir par exemple: quelques éléments de html5.
Le web3.0 comporte deux autres composantes principales:- le web mobile, développant des caractéristiques spécifiques aux machines mobiles (débit plus faible, taille d'écrans, capacités moindres, …)
- le web applicatif, développant des applications disponibles directement et complètement en ligne (traitement de texte, d'images, de vidéos, …)
- Web 4.0: ∼2020-…
-
Web 4.0 ou web intelligent.
L'appellation n'est pas encore officielle; aucun standard de ce web 4.0 n'a encore non plus été établi.
Les moteurs de recherche sont encore une composante essentielle pour trier, classer, ..., les informations et répondre au mieux, et rapidemment, à toutes les requêtes.
Dans le web 3.0, les recherches sont encore "manuelles": via une interface (IHM), l'utilisateur soumet des mots clés et obtient en retour une liste ordonnée de réponses qui concordent. L'utilisateur peut alors choisir parmi les résultats, en utiliser plusieurs, les comparer, ...
Dans le web 4.0, le mode d'utilisation évolue est plus direct et rapide: les moteurs de recherche sont intégrés dans des assistants virtuels avec les quels l'utilisateur va pouvoir "discuter" en langage naturel (oral ou écrit). Le réseau va pouvoir en plus proposer directement des actions que l'utilisateur n'aura plus qu'à valider.Exercice 1. b)Citer des avantages et inconvénients du web 4.0. Les illustrer à partir d'exemples de recherches ou actions (par exemple, recherche d'une information, ou achat d'un produit en ligne).
Lire aussi La commission européenne veut placer l'UE à l'avant-garde du web 4.0.
Éléments de fonctionnement du web
Les cookies
Regarder la vidéo suivante sur les cookies:Exercice 2
À l'aide des informations de cette vidéo (et, pourquoi pas, d'autres recherches personnelles), répondre aux questions suivantes.
- Cette vidéo a été créée par la CNIL. Qu'est-ce que la CNIL ?
- Donner des avantages de l'utilisation (volontaire ou non) de cookies.
- Donner des inconvénients de l'utilisation (volontaire ou non) de cookies.
- Deux personnes visitent depuis leur propre ordinateur (ou smartphone, tablette, ....) la même page web, à la même adresse et même temps.
Ces deux personnes voient pourtant une page différente. Est-ce possible ? Expliquer pourquoi.
Exercice 3
A l'aide des informations présentes sur le site de la CNIL et dans la vidéo ci-dessous, paramétrez votre navigateur web afin de limiter vos traces lors de vos navigations sur le web.
Moteurs de recherche
Un moteur de recherche est un programme, accessible via un site, qui recense et référence des pages internet de manière organisée. Trois grandes étapes peuvent être distinguées:- L'exploration (en anglais "crawling"): le robot d'indexation explore régulièrement le web en suivant tous les liens qu'il trouve et analyse les pages (titre, sous-titres, contenu, lines, ...)
- L'indexation: le moteur de recherche extrait les mots clés de chacune des pages visitées et conserve une copie de ces pages: le cache.
- Le classement ("ranking"): le moteur de recherche classe les pages selon leur pertinence par rapport à une série de mots clés.
C'est le classement des pages qui nous apparaît dans l'ordre lorsqu'on lance une recherche.
Le premier, et sûement plus célèbre, algorithme de Google pour classe efficacement des pages web s'appelle l'algorithme du PageRank. C'est aussi cet algorithme qui est à l'origine du succès de Google qu'on lui connît.
La vidéo suivante présente justement le fonctionnement du moteur de recherche Google, présenté directement par un ingénieur de Google.
Exercice 4
- Faire une recherche sur les opérateurs de recherche d'un moteur de recherche pour répondre aux questiosn suivantes.
- Quelle requête faut-il écrire dans un moteur de recherche pour obtenir des pages qui contiennent l'expression (complètement et exactement): cours de mathématiques en anglais ?
Quelle requête faut-il écrire pour trouver toutes les pages contenant l'expression (avec une faute): cours de mathématique en anglais ? - Quelle requête faut-il écrire dans un moteur de recherche pour obtenir des pages traitant du tennis mais pas du tennis de table ?
- Comment rechercher toutes les pages qui parlent des "spécialités de première" sur le site du lycée: https://www.eiffel-bordeaux.org
- Quelle est la signification de l'acronyme SEO ? Qu'est-ce qu'il signifie ?
- Quelle requête faut-il écrire dans un moteur de recherche pour obtenir des pages qui contiennent l'expression (complètement et exactement): cours de mathématiques en anglais ?
Pour aller plus loin, lire par exemple l'article de J.P. Delahaye sur le fonctionnement des moteurs de recherche.
Modèle client/serveur
L'échange de données s'appuie sur le dialogue entre clients et serveurs:- le client est l'utilisateur ou la machine qui, souvent par le biais d'un navigateur (firefox, opéra, explorer, ...) envoie une requête à un serveur.
- le serveur reçoit la requête, la traite, et renvoie les données demandées au client.
PHP: programmation côté serveur
Cliquer sur le bouton suivant et observer le comportement, en particulier l'adresse de la page. Pour être exécuté, la page est redemandée au serveur par une nouvelle requête. Le serveur en traite alors les spécificités puis retourne les données au client.Le contenu des pages peut alors être dynamique, c'est-à-dire dépendant d'actions de l'utilisateur (click sur un bouton, texte saisi, formulaire complété, ...).
Javascript: programmation côté client
Un script javascript est téléchargé, puis exécuté sur l'ordinateur client. En particulier, il permet donc une grande interactivité.Par exemple, le fameux jeu du nombre mystérieux: donner un nombre entier entre 1 et 100:
Ce programme a donc été téléchargé puis exécuté par cet ordinateur.
Afficher la source de la page pour le découvrir !
Requête HTTP et URL
L'interaction client/serveur est à l'initiative du client. Celui-ci envoie une requête HTTP au serveur qui lui répond en lui renvoyant le résultat de cette requête.HTTP, pour Hypertext Transfert Protocol, est un protocole de communication développé pour le (world wide) web.
HTTP repose le protocole TCP pour le transport des données.
HTTPS, s pour secured, est la version sécurisée de HTTP.
Les clients HTTP les plus connus sont les navigateurs web (firefox, opéra, explorer, edge, ...), mais il existe d'autres moyens et systèmes qui permettent d'interroger un serveur web: "robots" d'indexation, programme python ou autre langage par exemple.
Une URI, pour Uniform Ressource Identifier, est une adresse (chaîne de caractères) qui identifie une ressource sur un réseau. L'URL, pour Uniform Ressource Location, identifie la est une adresse (chaîne de caractères) qui identifie une ressource.
Les numéros ISBN pour les livres, ou les codes-barres peuvent être considérés comme des URI: ils identifient de manière unique une ressource, sans pour autant en fournir de localisation.
Par exemple, https://fr.wikipedia.org/wiki/Uniform_Resource_Identifie est une URL:
- https est le protocole de communication utilisé
- fr.wikipedia.org est le nom de domaine
- wiki/Uniform_Resource_Identifier est le chemin de la ressource demandée
Exercice 5
Décrire les URL suivantes:
- ftp://ftpperso.fr
- https://xymaths.fr/Lycee/2nde/SNT/web/
- https://xymaths.fr/Lycee/2nde/SNT/web/?PetitePrecision#php
- mailto:me@moi.fr
- https://example.org/formulaire.html
- Protocole ftp (file transfert protocol), et nom de domaine ftpperso.fr
- Protocole http, nom de comaine xymaths.fr, et chemin complet vers la ressource /Lycee/2nde/SNT/web/
- Protocole http, nom de comaine xymaths.fr, et chemin complet vers la ressource /Lycee/2nde/SNT/web/, et ?PetitePrecision paramètre php et enfin #php localisation sur la page
- Protocole mailto permettant d'adresser un mail
- Protocole sécurisé https, nom de domaine example.org et chemin/fichier formulaire.html
Usage du web / numérique et impact écologique
L'usage des ressources numériques a de plus en plus un impact environnemental remarquable. Voir à ce sujet quelques ressources/liens et éléments de réflexion sur cet impact environnemental.Les études réalisées jusque là montrent assez clairement que cet impact est en bonne partie dû à l'usage de la vidéo en ligne.
"Consommation" vidéo (annoncée par Netflix): 1 Go de données par heure par flux vidéo en définition standard et jusqu'à 3 Go par heure par flux vidéo en qualité vidéo optimale (haute définition HD) et 7 Go par heure et par appareil pour la Ultra HD. Contre environ 100 ko pour ce cours d'environ 10 pages au format pdf.
Exercice 6
Combien de pages au format pdf représente ainsi un film de 2h en HD ?
Pour l'ordre de grandeur: un film de 2h en HD représente ainsi environ 2x3Go=6.109 octets contre
100ko pour 10 pages, soit 10ko par page, ou encore 10.103 = 104 octets par page.
Un film HD de 2h correspond ainsi à
.
Dans des livres d'environ 200 pages chacun, cela fait donc 3000 livres...
Un film HD de 2h correspond ainsi à
|
= 6.105 = 600 000 pages |
Dans des livres d'environ 200 pages chacun, cela fait donc 3000 livres...
Le transport/débit de données est une chose, son stockage est lui aussi problématique.
Exercice 7
Qu'est-ce qu'un "data center" ?
Faire des recherches sur le sujet, et énoncer les problématiques qui leur sont propres: taille, consommation energétique, alimentation énergétique, refroidissement, ...
Faire des recherches sur le sujet, et énoncer les problématiques qui leur sont propres: taille, consommation energétique, alimentation énergétique, refroidissement, ...
Les data center nécessitent d'importants moyens pour être refroidis.
Une alternative au data center "localisé et massif", on peut chercher à distribuer la puissance de calcul et de stockage et ainsi utiliser cette énergie dissipée.
Faire des recherches par exemple sur
Une alternative au data center "localisé et massif", on peut chercher à distribuer la puissance de calcul et de stockage et ainsi utiliser cette énergie dissipée.
Faire des recherches par exemple sur
- la piscine chauffée de la Butte à Paris
- le système de chauffage résidence Florestine à Bordeaux
- des radiateurs qui cachent des serveurs de calcul ? c'est ce que propose la startup "Qarnot Computing"
Pertinence des informations - Exemple des fake news
Les fake news, litéralement fausses nouvelles, traduit par- "infox", informations fallacieuses,
- Académie française: "contre vérité" ou "ragot"
- volontairement dans un but de désinformation, de manipulation (nuage de Tchernobyl, Rainbow warrior, Brexit, élection de D. Trump, lobbyisme: tabac ou pesticides)
- involontaire: une étude récente à montré que 70% des tweets proviennent de (re)tweets par des personnes n'ayant pas lu le contenu du texte, seulement son titre.
Ainsi, des fausses informations se trouvent relayées, amplifiées, diffusées, ... et il peut presque devenir difficile de distinguer le vrai du faux.
Exercice 8Comment faire d'ailleurs ? Comment évaluer la qualité et la pertinence d'une information et éviter de croire, et propager, des fake news ?- Identifier l'auteur de l'information et son propos: narration fictive, opinion ou description de faits observés ?
- Nature du site/média: blog, site institutionnel, parti politique, ...
- Objectif du site: vente, information, faire le buzz, ...
- Contexte de l'information: date, commentaires d'autres personnes, publication de la même information sur d'autres sites, ...
Voir par exemple ce bref guide des questions à se poser face à une information
et cette page de journal Le Monde, donnant aussi des pistes pour vérifier une image ou une vidéo qui circule sur les réseaux sociaux ?
Exercice 9Comment faire pour détecter automatiquement (par un algorithme) des potentiels fake news, ou des pratiques qui peuvent y conduire (propagation involontaire) ?Quelques idées:- on peut analyser le temps passé (facile à compter...) par un utilisateur sur article/message avant de le propager (retweet)
- on peut essayer de définir un niveau de confiance à chaque utilisateur, éventuellement dans un domaine spécifique
Référencement
Le référencement consiste à lister, classer, organiser, ... un ensemble de ressources.Les moteurs de recherche référencent un ensemble de sites et pages web, et permettent de lister ceux jugés les plus pertinents par rapport à certains critères, le plus souvent des mots clés.
De l'autre côté, du point de vue du développeur Web, le travail de référencement consiste à améliorer le positionnement et (donc) la visibilité de sites dans des pages de résultats de moteurs de recherche.
On parle de SEO (Search Engine Optimization)
Image par Gerd Altmann de Pixabay
Voir aussi: