Le Web

• Contexte
• Programme
• Documents
• Déroulement
• Traces
• Évaluation

Contexte

Cette séquence couvre le thème « Le web » du programme, en quatre séances d'une heure et demie. Il n'y a aucun prérequis : elle peut être faite dés le début de l'année.

Cette séquence suppose que les élèves ont accès à un ordinateur pour chacune des séances.

Durant cette séquence, les élèves seront amenés à consulter ce site web (cette page là en particulier) : lors des activités sur ordinateur, plutôt que de distribuer un énoncé papier, celui-ci est publié sur mon site web.

Programme

Cette séquence couvre les points suivants (parfois totalement, parfois partiellement) :

• Droit d'auteur
• Langage HTML (langage CSS en option)
• Modèle client/serveur
• Liens hypertexte
• URL (de manière partielle et succinte)
• Paramètres de sécurité d'un navigateur
• Programmation en Python
• Moteurs de recherche : Principes et usages

Cette séquence ne couvre pas les points suivants :

• Repères historiques.
• Requête HTTP

Documents

• L'ensemble des documents nécessaires à cette activité sont listés ici:
  • Activité 1 : Danse des balises.
  • Activité 2 : Aucun document à télécharger, mais le professeur doit préparer un document pour l'activité (la falsification d'un site web).
  • Activité 3 : calculatrice.py.
  • Activité 4 : Laurel, Larcenet, Revoy.
  • Activité 5 : Aucun document.
  • Activité 6 : feuille de calcul de synthèse, sujet à distribuer aux élèves. En outre, il faut apporter (ou avoir fait apporter) un dé à six faces par paire d'élèves.
  • Activité 7 : Aucun document.
• Les sources des documents (principalement du LuaLaTeX) sont disponibles dans mon dépôt git.

Déroulement

Séance 1

Découverte du HTML, et premier aperçu du modèle client/serveur

Activité 1 : La danse des balises (30 minutes)

Cette activité¹ (docx², pdf) a été présentée en formation par Laurent Cooper (qui s'est lui même inspiré d'une activité de Mozilla).

Activité 2 : Falsification d'un site web (1 heure)

Note : Cette séance est très largement inspirée d'une séance proposée par Laurent Cooper.

Le but de cette séance est de :

• faire découvrir, puis manipuler, le HTML ;
• repérer la barre d'URL, et faire une première analyse de cette URL ;
• prendre conscience de la différence entre client et serveur.

Au préalable, le professeur a téléchargé, puis falsifié une page web (comme le feront les élèves). Rendre absurde le titre d'un article de presse est une bonne idée.

1. En grand groupe.

   1. Le professeur projette sa page web falsifiée, et demande des commentaires. Si nécessaire, il les guide pour qu'ils se rendent compte que l'article est faux.
   2. Le professeur explique rapidement ce qu'est une URL, et comment elle fonctionne (protocole, nom de domaine, nom de la ressource (pour faire simple)), et comment cela peut aider à repérer une tentative d'hameçonnage.
   3. Les autres lecteurs du site web voient-il l'article original, ou l'article modifié ? Cela est l'occasion de parler de client et de serveur. Il est possible d'amener un journal (papier) pour expliciter le fait qu'une altération d'un exemplaire du journal ne modifie pas les autres exemplaires.
   4. Le professeur annonce que les élèves vont à présent réaliser une falsification similaire, et donne les consignes de la partie suivante.

2. En binôme, sur machines, les élèves suivent cet énoncé, et rendent leur travail à la fin de la séance.

Séance 2

Activité 3 : Réalisation d'une calculatrice en ligne (30 minutes)

Pour aller plus loin sur le modèle client/serveur, et pour intégrer un peu de Python, les élèves réalisent une calculatrice en ligne, c'est-à-dire un site web qui demande deux nombres et une opération, et dont le serveur calcule le résultat.

Après une courte introduction par le professeur (et la démonstration de l'usage de la calculatrice), les élèves travaillent en binôme, en suivant cet énoncé.

Activité 4 : Un peu de droit d'auteur (1 heure)

Notes

1. Je n'ai jamais fait d'étude de documents en classe, et je n'en ai jamais conçu. Je ne sais donc absolument pas si ces documents sont trop longs, trop nombreux, trop complexes, etc. À bien relire avant d'utiliser en classe.
2. Dans les documents concernant Laurel, j'ai refait ce graphique. En effet, si l'exception pédagogique m'autorise à diffuser cette image à mes élèves, elle m'interdit de la publier ici sur mon blog. Les collègues souhaitant utiliser l'image originale peuvent, au choix :
   • télécharger « à la main » l'image, la renommer laurel-camembert.jpg, la placer dans le même répertoire que les sources, et compiler (avec LuaLaTeX) le document laurel.tex ;
   • télécharger les sources, exécuter le programme python laurel-camembert.py (qui est dans les sources) pour télécharger automatiquement la bonne image, et compiler le document (avec LuaLaTeX).

Sous la forme d'une étude de document, cette activité vise à faire réfléchir les élèves aux droits d'auteurs (en particulier sur le web), en se posant les questions suivantes :

• Ai-je le droit d'utiliser une image trouvée sur internet ?
• Les auteurs qui publient en accès libre des œuvres sur internet se privent-ils de tout revenu ?

Cette réflexions se fait en étudiant trois auteurs de bande dessinée qui publient (ou ont publié) leurs œuvres en accès libre sur internet :

• Laurel qui a récolté 650000€ en financement participatif pour la publication au format papier de deux bandes dessinées intégralement lisibles sur internet ;
• Manu Larcenet qui a arrêté la publication de son blog car les internautes continuaient à copier ses dessins, malgré son interdiction ;
• David Revoy qui publie ses dessins sous licence Creative Commons by 4.0 (qui autorise la réutilisation, même commerciale), et qui arrive malgré cela à vivre de son art³.

Le déroulement est le suivant :

1. Le professeur explique la problématique.

2. Le professeur distribue les documents. Chaque élève (ou binôme d'élève) se voit distribuer l'une des trois feuilles concernant Laurel, Larcenet, ou Revoy (il y a trop de documents pour que chaque élève étudie l'ensemble : avec ce système, chaque élève s'intéresse à un auteur, et les réflexions sont mises en commun ensuite).

   Les élèves lisent les documents, et répondent aux questions (qui sont les mêmes pour les trois auteurs).

3. Bilan en grand groupe : avec le professeur, la classe fait le bilan, et compare les licences utilisées par les auteurs, en mettant cela en lien avec le droit d'auteur.

Voici (dans les grandes lignes) le bilan que j'attends.

• Usage privé

  L'usage privé (dans ma chambre, sur mon agenda, etc.) est toujours légal. L'auteur ne peut pas d'y opposer.

• Usage public

  Les auteurs sont libres de diffuser ou non leurs œuvres gratuitement, et d'autoriser ou non leur rediffusion par les lecteurs (voire leur réutilisation dans le cas de David Revoy qui utilise une licence Creative Commons).

  Cela signifie que copier une œuvre trouvée sur internet n'est pas, toujours légal, ou toujours illégal. Cela dépend :

  • de la volonté de l'auteur (et de l'éventuelle licence attachée à l'œuvre) ;
  • de l'usage qui en est fait (simple rediffusion, modification, vente…).

  Par défaut (si l'auteur n'a pas précisé autre chose), l'usage public est interdit.

• Commercialisation

  Contrairement à ce que le « bon sens » pourrait nous souffler, il est tout à fait possible de gagner de l'argent en vendant des œuvres disponibles gratuitement par ailleurs. Outre les cas de Laurel et David Revoy étudiés ici, nous pouvons citer :

  • tous les classiques de la littérature (Molière, Voltaire, Hugo…) dont on achète souvent les livres alors qu'ils sont dans le domaine public ;
  • Radiohead, qui en 2007 a vendu trois millions d'exemplaires (physiques et numériques) de son album In Rainbows publié sous licence Creative Commons (et donc téléchargeable gratuitement et légalement)⁴ ;
  • Nine Inch Nails, qui en 2008 a vendu 750000 exemplaires de son album Ghosts I-IV, qui s'est également placé à la première place des vente numériques sur Amazon, alors qu'il pouvait être téléchargé légalement et gratuitement⁵.

Séance 3

Activité 5 : Traçage et Identification (30 minutes)

Remarque : Cette activité est très largement inspirée d'une présentation faite lors de la formation de SNT du 11 avril 2019 à Grenoble, dont je n'ai malheureusement pas noté l'auteur.

⚠️ Attention ⚠️ Il faut absolument réaliser ce travail sur les ordinateurs du lycée avant de le faire devant les élèves. En effet, beaucoup de choses peuvent mal se passer.

• Les plugins peuvent ne pas fonctionner avec Firefox, s'il n'est pas à jour.
• Lancer plusieurs instances de Firefox avec plusieurs profils différents ne fonctionne pas forcément facilement. Il y a deux manières de faire :
  • visiter la page about:profiles doit permettre de gérer les profils (créer un profil, lancer une nouvelle instance). Dans mon lycée (avec Firefox 54), cela ne fonctionne pas ;
  • lancer Firefox en ligne de commande avec firefox --ProfileManager --no-remote permet de lancer une nouvelle instance avec le gestionnaire de profils Firefox. Sous Windows 7 (et versions suivantes ?), il faut appuyer sur les touches Windows + R, puis dans la fenêtre qui s'ouvre, inscrire la commande firefox --ProfileManager --no-remote.
• Dans mon lycée, les paramètres de Firefox sont remis à zéro à chaque nouvelle connexion : ces profils ne peuvent donc pas être créés en avance.

Le but de cette activité est de montrer aux élèves comment les entreprise du web (les GAFAM en particulier) peuvent connaître nos centres d'intérêt.

Toute cette activité se fait en frontal : le professeur parle, parle, parle, et les élèves écoutent avec passion, en répondant aux questions du professeur.

1. Au préalable, le professeur a préparé deux profils Firefox :

   • un premier (appelé profil vierge par la suite), sur lequel a été installée uniquement l'extension lightbeam ;
   • un second (appelé profil protégé par la suite), sur lequel ont été installées les extensions lightbeam, uBlock Origin, et Privacy Badger.

2. Première navigation, sur le profil vierge.

   1. Sur l'ordinateur vidéo-projeté, le professeur visite les sites suivants :
      • il recherche "leboncoin" sur Google, puis recherche un vélo à acheter ;
      • il recherche "L'équipe" sur Google, puis consulte un article sur une course de vélo.
   2. Le professeur ouvre le panneau Lightbeam, puis explique aux élèves ce qu'il voit :
      • le site web visité, et tous les autres sites web visités à son insu ;
      • Facebook a été visité (à notre insu) depuis http://leboncoin.fr et depuis http://lequipe.fr
   3. Question : Quelles sont les conséquences ? Facebook sait désormais que j'aime le vélo, et va m'afficher des publicités sur le vélo.

3. On recommence, sur le profil protégé.

   1. Le professeur montre qu'il a installé un bloqueur de publicité (par exemple ublock) et un bloqueur de mouchards (par exemple privacy badger).
   2. Il recommence la navigation, et on observe sur LightBeam que cette fois-ci, beaucoup moins de sites web sont visités, et quasiment aucun n'est commun aux deux sites http://leboncoin.fr et http://lequipe.fr.

4. Question : Comment les sites web peuvent-ils savoir que c'est la même personne qui a consulté les petites annonces et le journal sportif ?

   • Beaucoup d'informations sont fournies par le navigateur : (voir par exemple https://amiunique.org/).
   • Mon adresse IP permet de me localiser assez précisément : (voir par exemple https://whatsmyip.com/your-ip-address).
   • Des cookies sont stockés. Pour ce dernier point, après avoir expliqué leur fonctionnement, il est possible d'aller observer dans les préférences de Firefox (dans le profil vierge) que bien que nous n'ayons jamais visité http://facebook.com, un cookie a bien été déposé.

5. Pour finir (et pour faire la transition avec l'activité suivante), sur le profil vierge, on fait la recherche acheter un vélo sur Google. Demander ensuite :

   • Google me propose des magasins près de chez moi : Comment sait-il où j'habite ?
   • Comment Google trie les sites web qu'il me propose ? Deux réponses : la publicité, et la popularité des sites web.
     • Pour la publicité, comment Google sait-il si oui ou non on a cliqué sur une publicité (pour facturer cela) ? Montrer que l'adresse fournie n'est pas directement celle du marchand, mais qu'elle passe par les serveurs de Google.
     • Pour la popularité des sites web, c'est l'objet de l'activité suivante.

Activité 6 : Moteurs de recherche (30 minutes)

Inspiré de Mesure de popularité d'une page web, de Julien Launay.

Matériel nécessaire : un dé à six faces par binôme.

1. Avant le début de l'activité, le professeur a :

   • ouvert sur son ordinateur le fichier permettant de synthétiser les résultats de l'ensemble de la classe ;
   • reproduit sur un simulateur de PageRank (exemple) le graphe manipulé dans l'activité.

2. Le professeur distribue le sujet (source), et lit avec les élèves l'énoncé.

3. À la main, avec le dé, par binômes, les élèves simulent une marche aléatoire sur le graphe. Le professeur les laisse chercher deux minutes, puis il parcours la salle pour :

   • dire à chaque binôme (dés que la place est libre) qu'il peut aller reporter ses résultats sur l'ordinateur du professeur ;
   • ramasser son dé.

   À la fin de l'activité, sur l'ordinateur du professeur, le score PageRank de l'ensemble du graphe est disponible.

4. Les élèves répondent d'abord seuls, puis en faisant le bilan en grand groupe avec le professeur, à la suite de l'activité (parties Analyse et Search Engine Optimization).

   La réponse attendue à la dernière question est que l'on peut créer trois nouvelles pages web qui forment une clique avec le sommet F (c'est-à-dire que chaque sommet de F et des trois nouveaux sommets pointe vers les autres). Cela augmente artificiellement la popularité de ces pages, et permet de faire de F la page la plus populaire du graphe.

Activité 7 : Configuration d'un navigateur (15 minutes)

Les élèves vont sur leur ordinateur pour configurer leur navigateur pour limiter d'être pistés. Sur nos ordinateurs (solution région dans l'académie de Grenoble), la configuration du navigateur est réinitialisée à chaque connexion⁶, donc cette activité ne sert qu'à s'entraîner pour chez soi. Les élèves sont autorisés à faire cela sur leur ordiphone s'ils l'ont avec eux.

Ils suivent l'énoncé sur cette page.

Si les élèves ont fini en avance, ils peuvent commencer le travail de la séance suivante.

Séance 4

Activité 8 : Tâche finale (1h30)

Les élèves sont amenés à réaliser, seuls, une page web à partir d'un squelette.

Cette séance se fait sur ordinateur, en suivant cet énoncé.

Traces

En l'état, à la fin de la séquence, les élèves n'ont que très peu de traces de leur travail. Des fiches-bilans pourraient être envisagées.

Évaluation

Je ne me suis pas encore vraiment posé cette question. Au fil des séances, les élèves doivent rendre des travaux, mais je n'ai pas encore réfléchi à la manière dont je les évaluerai.