RM Cours_WEB

Séance complète – Partie 1 : Introduction : Qu’est-ce que le Web ?

Objectifs pédagogiques

À la fin de cette séance, les stagiaires sauront :

• Différencier Internet et le Web.
• Expliquer l’évolution historique des réseaux et du Web.
• Situer le rôle du développeur web dans l’écosystème.
• Comprendre le schéma simplifié d’une requête client/serveur.
• Utiliser un vocabulaire de base partagé (URL, HTTP, HTML, navigateur, serveur).

Suggestion de découpage temporel (1 journée)

• Matinée (3h30)

  • Icebreaker + brainstorming (30 min)
  • Internet vs Web (1h)
  • Historique (ARPANET → Web 2.0 → aujourd’hui) (1h)
  • Pause (15 min)
  • Schéma client/serveur + premiers exemples pratiques (1h15)

• Après-midi (3h30)

  • Rôle du développeur dans l’écosystème (1h)
  • Étude de cas : trajet d’une requête Web (1h)
  • Pause (15 min)
  • Exercice pratique guidé (1h30) : analyser ensemble une requête avec DevTools, tester un mini serveur local, représenter un schéma.

1) Icebreaker – Briser la glace (30 min)

Objectif

Amener les stagiaires à exprimer leurs représentations spontanées du Web.

Déroulé

• Question ouverte : « Pour vous, qu’est-ce que le Web ? »

• Brainstorming au tableau → tu notes tous les mots (Internet, navigateur, site, Google, etc.).

• Ensuite, tu proposes un classement en couches :

  • Infrastructure (réseau, câbles, box, 4G, WiFi)
  • Adressage (IP, DNS)
  • Protocoles (HTTP/HTTPS)
  • Applications (sites, applis web, réseaux sociaux)
  • Rôle des développeurs

2) Internet vs Web (1h)

Contenu

• Internet = réseau mondial d’ordinateurs interconnectés.

• Web = un service qui utilise Internet, basé sur l’hypertexte, les URL et HTTP/HTTPS.

• Analogie possible :

  • Internet = autoroutes
  • Web = voitures qui circulent dessus (parmi d’autres services : mail, FTP, jeux en ligne…).

Schéma simple

[ Utilisateur ] --(Internet)--> [ Serveur Web ]

Activité

• Donner des exemples de services hors Web :

  • Email (SMTP/IMAP/POP)
  • FTP (transfert de fichiers)
  • SSH (connexion distante)

• Débat rapide : « Utiliser WhatsApp, est-ce le Web ? Et YouTube ? »

3) Historique du Web (1h)

Repères clés

• 1969 : ARPANET (ancêtre d’Internet).
• Années 80 : protocoles TCP/IP → naissance d’Internet moderne.
• 1991 : Tim Berners-Lee invente le World Wide Web (HTML, HTTP, URL).
• Années 2000 : Web 2.0 (participatif, réseaux sociaux, blogs, AJAX).
• Années 2010-2020 : Cloud, mobile, API, microservices, WebApps.
• Aujourd’hui : Web = Living Standard, toujours en évolution.

Activité

• Montrer la première page web encore en ligne (CERN).
• Discussion : qu’est-ce qui a changé entre les sites des années 90 et aujourd’hui ?

4) Schéma client/serveur (1h15)

Contenu

• Client : navigateur (Chrome, Firefox, Safari…).
• Serveur : machine qui stocke et envoie les pages web.
• Principe : le client envoie une requête HTTP, le serveur renvoie une réponse HTTP.

Schéma simplifié (ASCII)

[ Navigateur (client) ] -- Requête HTTP --> [ Serveur web ]
[ Navigateur (client) ] <-- Réponse HTML -- [ Serveur web ]

Exemple concret

• Lancer un site simple index.html en local avec file://
• Puis montrer la différence avec http://localhost via un petit serveur local (ex. php -S localhost:8000).

5) Rôle du développeur web (1h)

Contenu

• Le développeur écrit du code (HTML, CSS, JS, PHP, etc.) qui sera :

  • exécuté côté client (dans le navigateur),
  • ou côté serveur (dans Apache/Nginx, Node.js, PHP, etc.).

• Place du développeur dans l’écosystème :

  • Comprendre l’architecture globale (client ↔︎ serveur).
  • Produire des sites accessibles, performants, sécurisés.

Activité

• Discussion : « Que fait un développeur web, et que ne fait-il pas ? »

  • Exemple : gérer la fibre optique ? → non.
  • Déployer une API REST ? → oui.
  • Administrer un switch réseau ? → non.

6) Étude de cas : trajet d’une requête (1h)

Étapes simplifiées

1. L’utilisateur tape une URL.
2. Le navigateur demande à un serveur DNS l’adresse IP.
3. Le navigateur se connecte au serveur web.
4. Le serveur envoie une réponse HTTP (HTML, CSS, JS).
5. Le navigateur interprète et affiche.

Activité pratique

• Ouvrir DevTools → onglet Réseau → charger un site simple → observer les requêtes (HTML, CSS, JS, images).

7) Exercice pratique fil rouge (1h30)

Consignes

• Chaque stagiaire dessine un schéma complet du trajet d’une page web, en s’inspirant de ce qu’il a appris.

• Étapes à représenter :

  • Saisie de l’URL.
  • Résolution en IP.
  • Requête envoyée au serveur.
  • Réponse affichée dans le navigateur.

• Ensuite, chacun compare avec un camarade et complète son schéma.

8) Conclusion et ouverture (30 min)

Synthèse

• Internet ≠ Web.
• Le Web repose sur URL + HTTP + HTML.
• Le développeur web intervient au niveau du code exécuté sur le serveur et/ou dans le navigateur.
• Le trajet d’une requête web est client → serveur → réponse → affichage.

Ouverture

• Prochaines étapes (Partie 2 et suivantes) : IP, DNS, protocoles, sécurité.
• Insister : ça viendra plus tard ; aujourd’hui, il faut maîtriser le schéma de base.

Fiche mémo (à distribuer)

• Internet = infrastructure → Web = service qui utilise Internet.
• URL = adresse d’une ressource web.
• HTTP/HTTPS = protocole de communication.
• HTML = langage de description de page.
• Client = navigateur → envoie requêtes.
• Serveur = machine → répond avec des ressources.
• Rôle du dev = produire du code qui fonctionne dans cet écosystème.

Cette séance tient facilement une journée avec les exercices, les schémas et les discussions. Si tu veux la faire durer 2 jours, il suffit de ralentir le rythme et de développer davantage :

• plus de temps sur les débats,
• exercices de recherche (ex. « Trouver 3 différences entre Internet et Web »),
• mini-quiz en fin de journée,
• observation de sites réels avec DevTools.