Web

Objectifs

Comment utiliser Internet ?

• Différencier Internet du Web
• Différencier Web 1.0, 2.0 et 3.0
• Identifier les protocoles HTTP et HTTPS
• Identifier les différentes parties d'une URL et critiquer leur utilisation

Cours

Web

Réseaux

Précédemment

• Comment connecter des ordinateurs ensemble.

• Comment utiliser cette connexion ?

Historique Internet & Web

• 1969 : ARPANET (ancêtre d'Internet)

  • Courriel (SMTP)

  • Transfert de fichiers (FTP)

  • Messagerie instantanée (IRC)

• 1989 : Conception (sur papier) du Web

• 1991 : Première page Web (en HTML)

  • Par des ingénieurs du CERN

  • https://info.cern.ch/hypertext/WWW/TheProject.html

WWW (Web)

• World Wide Web

• Web = HTML + HTTP + URL

  • URL : Adresse unique d'une page (Où ?)

  • HTTP : Protocole de transfert de pages (Comment ?)

  • HTML : Langage de description de pages (Quoi ?)

Web 1.0

• Statique

  • Affichage de pages web tel quel

  • Pas de modification/interaction par l'utilisateur

• Exemples

  • Page vitrine

  • Site d'information

Web 2.0 (depuis ~2004)

• Participatif

  • Modification de la page par les utilisateurs

  • Démocratisation de la création de contenu

• Exemples

  • Réseaux sociaux

  • Blogs

  • Wikis

  • Forums

Web 3.0 ?

• En développement, directions possibles :

  • Sémantique : données structurées pour les machines

  • Décentralisation : utilisation de la blockchain pour répartir le contrôle

  • Intelligence artificielle : améliorer l'expérience utilisateur (UX) en personnalisant le contenu

  • Réalité augmentée et virtuelle : nouvelles façons d'interagir avec le Web

  • Internet des objets (IoT) : connecter des objets physiques au Web (domotique)

Web 1.0 vs 2.0

https://balqisnadiah.wordpress.com/2016/05/14/web-1-0-vs-web-2-0-vs-web-3-0/

Web 1.0 vs 2.0

https://www.researchgate.net/figure/The-evolution-from-Web-10-to-Web-20_fig2_239854147

HTTP

• HyperText Transfer Protocol

• Protocole de communication client-serveur

• Méthodes de requête (Client → Serveur)

  • GET : Récupérer une page

  • POST : Modifier une page

• Statut de réponse (Client ← Serveur)

  • 200 : OK

  • 404 : Non trouvé

  • 500 : Erreur serveur

• HTTPS

  • HTTP sécurisé : HyperText Transfer Protocol Secure

  • Chiffrement des données (illisible par un tiers)

URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Uniform Resource Locator

  • Aussi appelé "adresse Web"

• Adresse unique d'une ressource sur le Web

Schéma (Protocole)

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Protocole

  • Délimité par :// à la fin

  • Web : http:// ou https://

  • FTP : ftp://

  • Mail : mailto:

  • Téléphone : tel:

Autorité (Serveur)

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Nom de domaine

  • Avec ou sans sous-domaine

• Port

  • Optionnel, par défaut 80 (HTTP) ou 443 (HTTPS)

  • Délimité par :

Chemin (Ressource)

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Chemin de la ressource

  • Délimité par /

  • Dossier ou fichier

  • Extension : .html, .php, .jpg, .pdf, …

Paramètres

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Paramètres

  • Délimités par ? et & : ? débute la liste, & sépare les paramètres

  • Clé et valeur

  • Souvent utilisé pour du tracking : utm_source, utm_medium, utm_campaign, …

Ancre ou Fragment

https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Ancre/Fragment

  • Délimitée par #

  • Position dans la page

  • ID de l'élément ciblé

  • Scroll automatique

  • Pas envoyé au serveur

Anatomie d'une URL

https://strategylab.ca/parts-of-a-url/

Paramètres UTM

• Urchin Tracking Module

• Permettent de suivre les clics sur un lien

• Pour analyser l'efficacité d'une campagne publicitaire

• Exemple : ?utm_campaign=nomdelacampagne&utm_source=wikipedia&utm_medium=referral

• Nettoyer les URL avant de les partager !

  • Essayer d'enlever les paramètres et vérifier que le lien fonctionne toujours

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Exercices

Classer les site web suivants parmi les catégories suivantes : web 1.0, web 2.0, web 3.0. Pourquoi ?

• Amazon
• Facebook
• Google
• Instagram
• Netflix
• Portail du Gouvernement suisse
• RTS
• Site de la commune de Lausanne
• Site du cours
• TikTok
• Twitter
• Wikipedia

Solution

• web 1.0 :
  • Amazon (sans compter les évaluations des utilisateurs)
  • Google (sans compter la publicité ciblée et les résultats personnalisés)
  • Portail du Gouvernement suisse
  • Site de la commune de Lausanne
  • Site du cours
  • RTS
• web 2.0 :
  • Amazon (évaluations des utilisateurs)
  • Facebook (réseau social)
  • Google (publicité ciblée et résultats personnalisés)
  • Instagram (réseau social)
  • Netflix (personnalisation des recommandations)
  • TikTok (réseau social)
  • Twitter (réseau social)
  • Wikipedia (collaboratif)
• web 3.0 : aucun

Quelles informations pouvez-vous en tirer si quelqu'un vous envoie ce lien ? https://www.example.com?utm_source=google&utm_medium=banner&utm_campaign=black_friday_sale

Solution

Que le lien vient une annonce publicitaire de Google pour les Black Friday

• Décortiquer l'URL suivante et nommer les différentes parties :
  https://www.google.com/search?client=firefox-b-d&q=bleu
• Deviner sur quoi vous allez tomber en suivant sur le lien.
• Quel le numéro de port utilisé ?
• Quelle information superflue est envoyée à Google ?
• Comment nettoyer le lien ?

Solution

• Les différentes parties sont :
  • https : protocole
  • www.google.com : nom de domaine
  • /search : chemin
  • ?client=firefox-b-d&q=bleu : paramètres
    • client=firefox-b-d : paramètre client avec la valeur firefox-b-d
    • q=bleu : paramètre q avec la valeur bleu
• Sur la recherche google de bleu
• Le port par défaut pour le protocole HTTPS est le port 443
• client=firefox-b-d : information sur le navigateur utilisé
• https://www.google.com/search?q=bleu : supprimer le paramètre client

Identifier les parties de l'URL suivante : http://www.example.com:8080/path/to/page?name=ferret&color=purple

Solution

• Les différentes parties sont :
  • http : protocole
  • www.example.com : nom de domaine
  • :8080 : port
  • /path/to/page : chemin
  • ?name=ferret&color=purple : paramètres
    • name=ferret : paramètre name avec la valeur ferret
    • color=purple : paramètre color avec la valeur purple

• Identifier les parties de l'URL suivante : https://youtu.be/peDhGtFuQ_s?si=O6llMGQcPrFOo12N
• Nettoyer le lien pour ne garder que l'essentiel.

Solution

• Les différentes parties sont :
  • https : protocole
  • youtu.be : nom de domaine
  • /peDhGtFuQ_s : chemin
  • ?si=O6llMGQcPrFOo12N : paramètres
    • si=O6llMGQcPrFOo12N : paramètre si avec la valeur O6llMGQcPrFOo12N
• https://youtu.be/peDhGtFuQ_s : supprimer le paramètre si renvoie toujours à la même vidéo

Outils

• Parseur d'URL

Sources

• https://apprendre.modulo-info.ch/resx/web.html
• https://fr.vikidia.org/wiki/World_Wide_Web et https://fr.wikipedia.org/wiki/World_Wide_Web
• https://fr.vikidia.org/wiki/Web_2.0 et https://fr.wikipedia.org/wiki/Web_2.0
• https://www.lesnumeriques.com/vie-du-net/qu-est-ce-que-le-web3-et-comment-il-pourrait-changer-la-face-d-internet-a172679.html
• https://fr.vikidia.org/wiki/Hypertext_Transfer_Protocol et https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol
• https://fr.vikidia.org/wiki/Hypertext_Transfer_Protocol_Secure et https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol_Secure
• https://fr.vikidia.org/wiki/Adresse_URL et https://fr.wikipedia.org/wiki/Uniform_Resource_Locator
• https://fr.wikipedia.org/wiki/Param%C3%A8tres_UTM
• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
• https://blog.hubspot.com/marketing/what-are-utm-tracking-codes-ht