@ccueil Colles

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é;
    • ...
    Ce projet est trop précoce par rapport aux technologies existantes. Si la mise en œvre du projet Xanadu ne put se faire, le concept d'hypertexte et le modèle client - serveur inspirèrent clairement Tim Berners Lee quelques années plus tard.
  • 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
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".
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, …)

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.
Deux langages sont à l'origine du succès du web: le php, qui est exécuté par le serveur web, et le javascript, qui est téléchargé depuis le serveur web mais exécuté par le client, en particulier sur l'ordinateur de l'utilisateur.

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 2
Décrire les URL suivantes:
  1. ftp://ftpperso.free.fr
  2. http://xymaths.free.fr/Lycee/2nde/SNT/web/
  3. http://xymaths.free.fr/Lycee/2nde/SNT/web/?PetitePrecision#php
  4. mailto:me@moi.fr
  5. https://example.org/formulaire.html
  1. Protocole ftp (file transfert protocol), et nom de domaine ftpperso.free.fr
  2. Protocole http, nom de comaine xymaths.free.fr, et chemin complet vers la ressource /Lycee/2nde/SNT/web/
  3. Protocole http, nom de comaine xymaths.free.fr, et chemin complet vers la ressource /Lycee/2nde/SNT/web/, et ?PetitePrecision paramètre php et enfin #php localisation sur la page
  4. Protocole mailto permettant d'adresser un mail
  5. 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 3
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 à
6.109
104
= 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 4
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, ...
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
  • 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"
Il s'agit d'informations faussées ou truquées qui peuvent être émises et propagées:
  • 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 5
    Comment 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 6
    Comment 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
    Lire à ce sujet: Viscosité sociale et granularité informationnelle, par un auteur qui est chercheur universitaire (maître de conférence) en sciences de l'information.

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: