Kit d'alphabétisation Web

Fiche d’archive. casahacker.org/kit-de-atividades… — Squarespace, 2019. 14 activités. Curriculum d’alphabétisation web.

Vue d’ensemble du Kit d’activités d’exploration, de construction et de participation au Web

L’objectif du Kit d’activités d’exploration, de construction et de participation au Web de la Casa Hacker est de donner aux participants une compréhension conceptuelle de base sur la façon d’explorer, de construire et de participer au Web.

L’alphabétisation Web, par exemple, aide notre communauté à :

• Comprendre comment fonctionne internet ;

• Connaître les outils et stratégies pour chercher et localiser des personnes, des ressources et des informations ;

• Nourrir le réseau de nouveaux contenus pour le garder vivant ;

• Se connecter aux communautés qui partagent, créent et entretiennent des contenus significatifs en ligne ;

• Évaluer l’information et détecter la désinformation ;

• Se donner, à soi et à sa communauté, les moyens de participer en ligne en tant que citoyens, étudiants, travailleurs et créateurs.

Développer, mettre à jour et entretenir ce kit d’activités est l’œuvre de contributeurs et de partenaires stratégiques de la Casa Hacker, en plus de tout le matériel de base et de l’expertise du Mozilla’s Core Web Literacy Curriculum.

Pratiques ouvertes

Travailler ouvertement est l’une des exigences fondamentales de ce kit d’activités et de la Base curriculaire d’alphabétisation Web 2.0. L’une des premières étapes de la mise en œuvre de ce kit est de comprendre ce que signifie travailler ouvertement. Nous vous encourageons à apprendre à travailler dans l’ouvert en étudiant notre guide « Pratiques ouvertes » (bientôt disponible) pour acquérir les bases de la participation, de la collaboration et du partage dans des projets menés par la communauté.

Diffusez, enrichissez et améliorez le Kit d’activités

Ce kit est conçu pour être inclusif, adaptable et ouvert : les communautés peuvent l’utiliser, le diffuser, l’enrichir, l’adapter et l’améliorer.

Voici comment contribuer :

• Dites-nous comment et où vous utilisez ce kit d’activités ;

• Nous aimerions aussi savoir ce que vous avez appris et ce que vous changeriez ;

• Traduisez-le dans d’autres langues ;

• Remixez-le pour d’autres publics ;

• Améliorez continuellement les activités.

Gagner des badges numériques

La Casa Hacker, via Badgr, propose des badges numériques pour les compétences d’alphabétisation web, si vous souhaitez en gagner — ou faire en sorte que votre communauté en gagne.

Mainteneurs

Ce kit d’activités est actuellement maintenu par Geraldo Barros (geraldo@casahacker.org).

Le Web et vous

Compétences : communication, collaboration

Dans cette activité de narration hors ligne, les participants réfléchissent et partagent observations, idées et sentiments sur leur propre usage du Web et sur ce que le Web signifie pour leurs communautés. Qu’aiment-ils ou détestent-ils dans le Web ? Qu’est-ce qui les intrigue ? Que voudraient-ils faire sur le Web ? Les facilitateurs utilisent les enseignements de cette activité pour contextualiser et façonner les activités suivantes pour le groupe. Cette activité de groupe doit aussi aider les participants à se connaître et à se sentir reliés.

Objectifs d’apprentissage

• Décrire comment la communauté utilise le Web et y interagit.

Temps nécessaire

De 45 minutes à 1 heure selon la taille du groupe.

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du Web variés.

Matériel

• Notes autocollantes

• Crayons, marqueurs

• Un minuteur pour tenir le temps pendant la narration

Compétences d’alphabétisation Web

C’est une activité d’introduction au développement des compétences d’alphabétisation Web.

Compétences du XXIe siècle

• Communication

• Collaboration

Introduction

[6-10 min]

• La personne facilitatrice demande à chaque participant de se présenter et de répondre à une question brise-glace (par exemple : quel est ton plat préféré, ton jeu préféré, à quel personnage de dessin animé ressembles-tu le plus). La question brise-glace aide les participants à se connaître et à se sentir plus à l’aise pendant la discussion ; elle peut — sans obligation — être liée à l’alphabétisation Web.

💡 Astuce ! La personne facilitatrice devrait faire une démonstration pour que les participants apprennent à partager et, surtout, comprennent le temps dont ils disposent pour leur présentation.

• Établissez des règles de base/accords partagés. Expliquez que les participants apprendront ensemble — en partageant perspectives et idées, en petits groupes ou en binômes et en grand groupe. Chacun est encouragé à partager activement.

• La personne facilitatrice demande : que pouvons-nous faire pour mieux travailler et apprendre ensemble ? Sollicitez les idées du groupe et dressez une liste de comportements positifs pour le travail en groupe.

💡 Astuce ! La personne facilitatrice peut ajouter des points importants si le groupe ne les propose pas. Par exemple :

• Écouter activement

• Ne pas interrompre

• Être respectueux des autres membres

• Être ouvert à des perspectives différentes des vôtres

• Si vous parlez beaucoup en groupe, essayez d’écouter davantage

• Si vous écoutez d’habitude, essayez de parler et de partager vos idées

Présenter le Web

[3-5 min]

• La personne facilitatrice explique que les participants vont réfléchir et parler d’internet et du World Wide Web — les outils et technologies que nous utilisons quand nous sommes « en ligne ». Elle demande au groupe de partager ce qu’ils font « en ligne ».

💡 Astuce ! Pour ce tour de partage, la personne facilitatrice peut encourager à lever la main et attendre son tour, ou laisser les participants partager spontanément. Choisissez le style qui convient le mieux à votre groupe.

💡 Astuce ! Si le groupe ne propose pas beaucoup d’exemples, ou n’a pas d’expérience préalable du Web, la personne facilitatrice peut évoquer des outils et technologies que le groupe utilise probablement. Exemples d’activités en ligne :

• envoyer ou recevoir des e-mails

• utiliser le web pour rester en lien avec des proches éloignés

• utiliser une application sur smartphone — par exemple une appli de cartes pour se repérer

• utiliser des sites de recherche d’emploi

• « googler » ou chercher des informations sur le web

• regarder/écouter des séries ou de la musique sur des sites comme Netflix ou Spotify

• se connecter à Facebook ou à d’autres réseaux sociaux

• jouer

• faire des achats

La personne facilitatrice souligne qu’il y a différentes manières d’être en ligne — bien des raisons pour lesquelles les gens utilisent le Web. Le groupe les explorera ensemble dans un exercice de narration.

Raconter des histoires : le Web et vous

[20-25 min]

• Dans cet exercice, la personne facilitatrice répartit les apprenants en groupes de 3 à 4 participants pour raconter et écouter des histoires. Expliquez que chaque participant aura 3 à 4 minutes pour raconter ses expériences du Web.

💡 Astuce ! Voici quelques pistes à donner aux participants pour commencer leur récit. Les conteurs doivent prendre 3 ou 4 minutes complètes. Si un conteur termine avant la fin du temps, profitez-en pour discuter, débattre et réfléchir à l’histoire. Les auditeurs doivent pratiquer l’écoute active — concentrez-vous sur le conteur.

• La personne facilitatrice choisit l’une des questions suivantes pour le groupe. Tous les conteurs répondent à la même question.

• Quelle est l’expérience la plus importante/significative/mémorable que vous ayez vécue en ligne ?

• Comment le web a-t-il changé votre vie ?

• Comment utilisez-vous le web ? Qu’aimez-vous faire en ligne ?

• OU, pour ceux qui n’ont pas d’expérience préalable du web :

• Que voudriez-vous faire en ligne ?

• Quel genre d’informations espérez-vous trouver en ligne ? Que serait-il le plus utile de découvrir ou d’apprendre ?

• En quoi être relié à beaucoup de personnes différentes dans le monde pourrait-il changer votre vie ?

• La question choisie doit être affichée dans un endroit visible de la salle ; le groupe dispose d’une minute ou deux pour penser à son histoire avant le début de l’exercice.

• La personne facilitatrice devrait raconter une histoire modèle pour donner le ton et la profondeur. Si elle raconte une histoire légère et peu personnelle, les participants le prendront comme repère. Si elle va plus loin, ou raconte une histoire plus personnelle, elle donne aux participants la permission et l’espace d’en faire autant.

💡 Astuce ! Ce doit être une histoire personnelle : en tant que facilitateur, appuyez-vous sur votre propre expérience. Voici un exemple du type d’histoire à modéliser (avec plus de détails, pour remplir 3 minutes) :

Internet a changé ma vie parce que j’ai pu m’en servir pour rencontrer des gens qui aiment la musique, l’une des choses les plus importantes de ma vie. J’ai utilisé les communautés en ligne (forums et listes de diffusion au début, pages Facebook et réseaux sociaux aujourd’hui) pour apprendre la musique, approfondissant mon goût et ma compréhension d’une manière que je n’aurais jamais imaginée. Et j’ai aussi gagné beaucoup d’amis en chemin ! Ces liens m’ont fait voyager — les deux premiers pays que j’ai visités hors du Brésil furent le Japon et l’Allemagne, pour voir des amis rencontrés dans la communauté musicale en ligne. Nous avons enfin pu nous retrouver et aller ensemble à des événements et des concerts dans la vraie vie. Vingt ans plus tard, j’ai toujours ces amitiés nées en ligne !

• Entre chaque histoire, rappelez aux participants de respirer, de faire une pause et de laisser l’histoire infuser.

• Entre chaque histoire, demandez aux apprenants de réfléchir en silence :

• Qu’est-ce qui diffère de votre propre histoire ?

• Qu’est-ce qui se ressemble ?

• Rappelez aux participants de remercier pour l’histoire.

Réflexion et retour

[10-15 min]

• Maintenant que les participants ont partagé leurs histoires individuelles, la personne facilitatrice demande au groupe de réfléchir à ce qui a été entendu (dans sa propre histoire et dans celles des autres) et de documenter et/ou discuter toutes les différentes façons dont le groupe utilise le Web.

💡 Astuce ! Si le temps manque, on peut choisir l’exercice de la carte de mots ou quelques questions d’exploration.

Carte de mots : avec des notes autocollantes, les participants dressent des listes de mots tirés des histoires. Un mot par note autocollante.

VERBES : ce que nous faisons ou aimerions faire sur le web — (exemples : se connecter, apprendre, acheter)

ADJECTIFS : comment est l’expérience pour nous et pour les autres ? (exemples : excitante, amusante, écrasante, déroutante)

NOMS : ce qui se passe/se trouve en ligne, ou ce que nous utilisons pour nous connecter (exemples : communautés, musique, téléphone portable, modem)

• Les participants apportent leurs notes autocollantes et les placent sur un mur, groupées par type de mot (verbes, adjectifs, noms). La personne facilitatrice invite les apprenants à venir regarder et à réfléchir aux questions suivantes :

• Qu’êtes-vous surpris de voir ?

• Que manque-t-il ?

• Qu’est-ce qui ressort ?

Questions d’exploration : les participants réfléchissent à quelques questions, en écrivant réponses, idées et pensées sur des notes autocollantes. La personne facilitatrice peut choisir parmi les questions suivantes (ou inventer les siennes) selon le public et ce qui a émergé des histoires :

• Qu’y a-t-il de mystérieux dans le web ? Qu’est-ce qui vous intrigue dans la technologie web — quelque chose que vous voulez apprendre ?

• De quelles façons le web a-t-il changé vos relations ? Qu’est-ce qui diffère entre interagir sur le web et « dans la vraie vie » ?

• Êtes-VOUS sur le web ? Comment et où êtes-vous représenté sur le web ?

• Comment vous exprimez-vous en ligne ? Quels sont vos différents publics ? Qui vous regarde ou vous observe ? Que choisissez-vous de partager ?

• Remettez les notes autocollantes au mur et invitez les apprenants à regarder et discuter à nouveau.

💡 Astuce ! La personne facilitatrice peut utiliser réponses, histoires et questions d’exploration pour façonner le reste du programme d’ateliers et d’événements — en revisitant les questions pour contextualiser, donner des exemples, combler des lacunes de connaissance, ou s’appuyer sur une expérience particulière — par exemple : « nous avons eu une question sur le fonctionnement d’un navigateur », alors explorons cela maintenant — ou « certains d’entre vous sont des utilisateurs actifs de YouTube : que pouvez-vous nous dire de la plateforme ? »

💡 Astuce ! Respectez toujours la variété des points de vue, idées et perspectives quand vous vous référez au contenu partagé par les participants. À la fin de l’atelier, remerciez les participants pour leur participation, leurs questions et leurs histoires !

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans l’activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Cartographier le Web

Compétences : collaboration, communication, résolution de problèmes

Description

Dans cette activité de discussion/cartographie/mise en scène, les participants partagent ce qu’ils savent déjà du Web et collaborent pour combler les lacunes et répondre aux questions. Ils travaillent ensemble à organiser ces informations en une « carte » visuelle et spatiale montrant les relations entre de nombreux éléments du Web, des serveurs aux sites, en passant par les tweets et les téléphones portables. Dans la dernière partie de l’activité, les participants « font tourner le réseau » en reliant tous les éléments.

Objectifs d’apprentissage

• Expliquer comment les parties d’internet sont reliées

• Démontrer comment l’information voyage à travers le Web à l’aide d’objets, de croquis ou de mouvements physiques

• Localiser une adresse IP et expliquer quelles informations sont transmises

Temps nécessaire

De 45 minutes à 1 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Notes autocollantes

• Crayons, marqueurs

• Pancartes préparées avec les étiquettes suivantes :

• « Saut 1 : routeur local »

• « Saut 2 : fournisseur d’accès à internet »

• « Saut 3 : le serveur »

Compétences d’alphabétisation Web

• C’est une activité d’introduction aux compétences d’alphabétisation web

Compétences du XXIe siècle

• Collaboration

• Communication

• Résolution de problèmes

Introduction

[5-10 min]

• Si les participants ne se connaissent pas, la personne facilitatrice demande à chaque membre du groupe de se présenter et de répondre à une question brise-glace (plat préféré, jeu préféré, à quelle attraction ou personnage de dessin animé ressembles-tu le plus).

💡 Astuce ! La question brise-glace aide les participants à se connaître et à se sentir plus à l’aise pendant la discussion ; elle peut — sans obligation — être liée à l’alphabétisation web.

💡 Astuce ! La personne facilitatrice devrait faire une brève démonstration.

• La personne facilitatrice relie brièvement le sujet de cette séance à une grande idée. Expliquez ceci :

• Internet est probablement l’une des technologies les plus importantes, sinon la plus importante, de notre époque.

• C’est la principale façon dont notre monde stocke et partage toutes sortes d’informations (personnelles, financières, médicales, scientifiques et bien plus).

• C’est pourquoi il est important de comprendre, au moins dans les grandes lignes, comment internet fonctionne.

• Quand nous le savons, nous prenons de meilleures décisions sur la façon de l’utiliser et sur les informations que nous partageons.

• La personne facilitatrice invite les participants à discuter de la manière dont nous « voyons » ou comprenons internet. Utilisez ces questions pour lancer la conversation :

• À quoi ressemble internet ? Peut-on le voir ?

• Si vous deviez le prendre en photo, à quoi ressemblerait-il ?

• Quelles métaphores d’internet avez-vous entendues (surfer, tuyaux, toile d’araignée, araignées et robots d’indexation) ?

• Quelles métaphores fonctionnent le mieux pour vous ?

• Pouvez-vous en proposer de nouvelles ?

Remue-méninges : les éléments de la carte

[5 min]

• La personne facilitatrice explique que l’on peut penser internet comme un système, un ensemble de parties qui forment un tout fonctionnel. Les participants peuvent travailler ensemble à créer la carte de ce système !

• Distribuez des notes autocollantes au groupe, ou si le groupe est assez petit, réfléchissez ensemble.

• Les participants écrivent différents composants du système, chacun sur une note autocollante.

💡 Astuce ! Si les participants peinent à démarrer, ils peuvent se demander : quand ils sont « en ligne », quel type de technologie utilisent-ils ? Qu’est-ce qui fait immédiatement partie de leur connexion dans leur environnement ? (leur ordinateur, aussi appelé client, smartphone, modem, routeur).

• Quelles sont les autres parties de cette connexion — celles qu’on ne voit peut-être pas ? (Wi-Fi, câbles, serveurs, antennes-relais, « le cloud »).

• En ligne, que regardent-ils ? Qu’utilisent-ils ? (navigateurs, sites web, sites spécifiques, applications ou pages, images, médias, toutes sortes de contenus, e-mail).

• Quels autres mots ou termes ont-ils entendus à propos du Web que nous n’avons pas discutés ? (paquets, bande passante, https, HTML, URL, JavaScript, etc.).

• Quelles autres choses peuvent être connectées au Web qui n’ont pas encore été mentionnées ? (pensez à l’IoT émergent — voitures autonomes, réfrigérateurs, bracelets fitness, systèmes de sécurité, feux de circulation, etc.).

💡 Astuce ! La personne facilitatrice doit s’assurer que les termes clés sont présents : ordinateur client, serveur, site web, page web, smartphone, e-mail, réseau, etc.

Définir les termes du Web

[5 min]

• Si certains termes proposés par le groupe ne sont pas familiers, prenez le temps de les définir ensemble. La personne facilitatrice peut consulter le glossaire créé par le CERT.br.

• https://cartilha.cert.br/glossario

Astuce ! L’activité de speed dating sur les mécaniques du Web est une excellente façon de travailler certaines de ces définitions. Lien original

Assembler la carte

[5 min]

• En plaçant des notes autocollantes sur un tableau, le groupe travaille ensemble à créer un diagramme d’internet. Pour les aider, utilisez les prompts suivants.

💡 Astuce ! Vous pouvez aussi utiliser des matériaux 3D tactiles, comme du papier, de la ficelle ou du carton, pour créer une maquette.

• Comment les différents éléments sont-ils reliés ? Par exemple, beaucoup d’ordinateurs clients se connectent à un même serveur.

• Où l’information est-elle stockée ou conservée, et comment est-elle transportée ?

💡 Astuce ! Si les participants découvrent ces concepts, la personne facilitatrice peut assembler la carte elle-même, en expliquant chaque étape, les relations et la façon dont l’information circule dans le système.

Faites tourner le réseau

[15-20 min]

• La personne facilitatrice devrait revoir ce qui suit :

• Nous voyons sur notre carte qu’« internet » est un système d’ordinateurs en réseau, et que le « Web » vit sur internet.

• Le Web est le système interconnecté de sites et de pages, stocké sur de nombreux ordinateurs à travers le monde.

• Nous utilisons un navigateur web, comme Firefox, pour accéder aux pages du web.

• Chaque fois que vous demandez quelque chose à internet — saisir une adresse web dans un navigateur, regarder une vidéo YouTube ou consulter vos e-mails sur smartphone — votre requête « saute » à travers plusieurs équipements réseau, comme des routeurs, des commutateurs et des serveurs, sur le chemin de votre appareil jusqu’au serveur du site.

• Montrez ces vidéos d’introduction pour donner un peu plus de contexte aux participants.

• Comment fonctionne internet ? Partie 1 : le protocole IP

• Comment fonctionne internet ? Partie 2 : systèmes autonomes, BGP, IXP.

• Comment fonctionne internet ? Partie 3 : DNS

• Comment fonctionne internet ? Partie 4 : gouvernance d’internet

• Après les vidéos, prenez quelques minutes et demandez aux participants de comparer ce qu’ils ont appris avec ce qu’ils avaient imaginé ensemble auparavant. À quel point étions-nous proches ? Qu’avons-nous oublié ? Qu’est-ce qui nous a surpris ?

• La personne facilitatrice explique au groupe que, pour aider à comprendre ce chemin, ils vont jouer une version humaine de l’information circulant sur internet, dans un parcours d’obstacles.

• L’information voyagera d’un :

• ordinateur local (client) vers

• un réseau d’accès local vers

• internet vers

• le site web de votre choix

• Commencez par montrer aux participants une maquette du système. Demandez au groupe de se rassembler près de la pancarte « Mon ordinateur » et demandez trois volontaires. Remettez aux trois volontaires les pancartes étiquetées :

• « Saut 1 : routeur local »

• « Saut 2 : fournisseur d’accès à internet »

• « Saut 3 : le serveur »

• Demandez aux volontaires de se répartir dans la salle.

• Expliquez que :

• les pancartes représentent différents « sauts » qu’une requête web doit franchir avant d’atteindre le serveur qui héberge le site recherché par l’utilisateur.

• Le reste des participants sont des paquets de code contenant des requêtes web dans un langage informatique spécial, qui essaient d’atteindre le serveur à l’autre bout de la salle.

• Choisissez l’un de ces participants « paquet » comme modèle pour le reste du groupe avant que tout le monde commence. Donnez ce scénario :

• Je suis à mon ordinateur et je décide de regarder une vidéo YouTube. Après avoir tapé l’adresse web, mon ordinateur convertit « youtube.com.br » en un type spécial de requête codée (appelée HyperText Transfer Protocol, ou HTTP) que tous les ordinateurs savent lire.

• Mon ordinateur découpe ce code en plusieurs « paquets » à envoyer sur le réseau… notre volontaire représente l’un de ces paquets.

• Demandez au volontaire de marcher jusqu’au premier saut et expliquez :

• D’abord, le paquet passe par les équipements du réseau local, comme les routeurs et modems de votre bâtiment.

• Les équipements du réseau local envoient le paquet vers internet.

• Demandez au participant d’avancer et expliquez le saut suivant : quand un paquet arrive au fournisseur d’accès à internet (FAI), il est acheminé vers l’un des routeurs de YouTube.

• Demandez au participant d’avancer et expliquez le saut suivant. Une fois le routeur de YouTube franchi, le paquet est envoyé à un serveur du siège de l’entreprise qui diffusera ma vidéo. Expliquez :

• Au serveur, pour que la vidéo soit lue sur mon ordinateur, l’ordinateur de YouTube convertit lui aussi ma vidéo en paquets, qui refont tout le chemin vers mon ordinateur en empruntant les mêmes équipements réseau qu’à l’aller.

• Demandez au participant de revenir vers vous, en marquant une pause à chaque saut du retour.

• Maintenant, augmentons la complexité du réseau — après tout, il y a des millions et des millions de serveurs et de clients, pas juste quelques-uns ! Attribuons à 2 ou 3 participants (ou plus) le rôle de « saut 3 » — le serveur. Et ajoutons quelques utilisateurs faisant des requêtes depuis des ordinateurs clients, et d’autres participants en paquets.

• Attribuez à chaque serveur un rôle — par exemple, un serveur peut être BancoDoBrasil.com.br, Americanas.com.br, ingressorapido.com.br ou le catalogue en ligne de la bibliothèque locale.

💡 Astuce ! Vous pouvez lancer un remue-méninges en demandant aux participants quels sites ils utilisent et ce qu’ils y demandent.

• Écrivez les noms des serveurs sur des cartes et demandez aux « serveurs » de les tenir.

• Demandez aux participants d’écrire des requêtes, comme « liste de jouets pour chiens en vente sur Americanas » ou « billets pour le concert d’Anitta sur IngressoRapido.com.br » sur des cartes — ils les remettront aux « paquets ».

💡 Astuce ! Demandez aux participants s’ils veulent ajouter un identifiant à leur requête pour garantir qu’elle revienne au bon ordinateur.

• Maintenant, tout le monde essaie le parcours d’obstacles ! Expliquez :

• Les utilisateurs/ordinateurs clients remettent leurs requêtes aux « paquets ».

• Les « paquets » doivent s’arrêter à chaque « saut » avant de passer au suivant.

• Attendez, il y a un « piège » ! Avant de passer d’un saut à l’autre, les paquets doivent montrer leur requête au « stop », une sorte de gatekeeper (barrière/portier).

• Au saut du FAI, la personne qui joue le fournisseur devra diriger les paquets vers les bons serveurs ; au retour, elle devra diriger le paquet vers le bon client.

• Les serveurs ont peu de temps pour marquer ou modifier la carte du paquet avec l’information demandée avant de le renvoyer au client.

• Demandez aux « paquets » de former une file indienne et de parcourir le circuit le plus vite possible ! Quelqu’un peut chronométrer le temps que met tout le monde à traverser et voir qui est le plus rapide.

💡 Astuce ! Pour rendre le parcours plus intéressant, vous pouvez placer des « espions du gouvernement » entre les sauts. Cette ressource de l’EFF explique comment des tiers peuvent intercepter des données entre les sauts. Discutez avec vos participants des données qui sont protégées, et de ce qui est vulnérable et quand.

💡 Astuce ! Si votre groupe est assez grand, saturez le FAI de requêtes vers un serveur en particulier.

💡 Astuce ! Pendant l’activité, vous pouvez poser ces questions aux participants :

Que se passe-t-il à chaque « saut » ? Pensez-vous qu’un paquet réel se déplace sur internet plus vite que vous ?

• Remarque : si vous n’avez pas d’espace physique pour cette activité, les participants peuvent comprendre comment les parties du Web interagissent avec des objets comme des cartes à jouer, des pailles, de la ficelle ou autres.

Optionnel : les adresses IP

[5 min]

• Demandez au groupe combien d’ordinateurs ou d’appareils sont connectés à internet.

• Comment pensez-vous que chaque ordinateur est identifié ou localisé sur le réseau ?

• Discutez de l’idée d’adresse — qu’est-ce qui rend une adresse (postale ou e-mail) utile ?

• Expliquez qu’il est important que l’adresse soit unique : elle désigne une maison, un appartement ou une personne précise ; un message envoyé à cet endroit, ou à cette seule personne.

• Introduisez le concept d’adresse IP : chaque appareil ou ordinateur sur un réseau ou en ligne possède une adresse IP (« Internet Protocol »).

• C’est une manière pratique de décrire l’adresse d’un site — les ordinateurs aiment les chiffres !

• Les adresses IP comportent 4 groupes de chiffres dans une chaîne.

• Si on la tape dans un navigateur, elle se résout en une adresse web lisible par les humains.

Astuce ! Si un ordinateur est disponible, montrez comment la saisie d’une adresse IP mène à un nom de domaine lisible.

Réflexion et retour

[5 min]

• Pour conclure, la personne facilitatrice peut poser des questions de réflexion comme :

• Que se passe-t-il sur internet quand vous tapez une adresse web et appuyez sur Entrée ?

• Quelles sont les « parties » d’internet ?

• Comment de grandes quantités d’informations arrivent-elles par morceaux sur le réseau, même avec une faible bande passante ?

• Quelle est la différence entre internet et le World Wide Web ?

• N’oubliez pas de remercier les participants pour leur participation, leurs idées et leurs intuitions.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Faites ami-ami avec votre navigateur

Compétences : navigation, synthèse, collaboration, communication

Description

Un navigateur internet, aussi appelé navigateur web ou simplement navigateur, est un logiciel que vous utilisez pour accéder à internet et afficher des pages web sur votre ordinateur. Vous pouvez voir votre navigateur comme votre porte d’entrée vers internet. Les participants réfléchiront aux outils qu’ils utilisent pour naviguer sur un site et s’appuieront sur leurs connaissances existantes.

Objectifs d’apprentissage

• Décrire la différence entre un navigateur web et un moteur de recherche

• Localiser les principaux outils d’un navigateur web

• Étiqueter les parties d’une page web

• Naviguer sur un site web

Temps nécessaire

De 30 à 45 minutes selon la taille du groupe.

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Notes autocollantes

• Papier et crayons

• Ordinateur portable avec connexion internet

Compétences d’alphabétisation Web

• Navigation

• Synthèse

Compétences du XXIe siècle

• Collaboration

• Communication

Enter the World Wide Web

Partie I

[10 min]

• Reliez aux connaissances préalables en demandant aux participants :

• Quelle est la différence entre un navigateur web et un moteur de recherche ?

• Comment s’appellent les navigateurs web les plus populaires ?

• Quel est le moteur de recherche le plus populaire ?

• Dissipez les malentendus

• Un navigateur est un logiciel gratuit qui affiche des sites web et permet d’accéder à divers sites et pages sur internet. Vous pouvez télécharger le navigateur de votre choix. Quand vous achetez un ordinateur, il vient en général avec un navigateur déjà installé pour aller en ligne tout de suite. Voyez le navigateur comme la porte d’entrée vers internet.

• Un moteur de recherche, comme Google, Yahoo ou Bing, est aussi un logiciel qui cherche un document donné quand on saisit des mots spécifiques. Quand un utilisateur tape des mots-clés dans une zone de recherche, le moteur utilise des algorithmes pour afficher des résultats correspondant à cette recherche.

• Cherchez et explorez

• Demandez aux participants d’ouvrir l’un des navigateurs de leur ordinateur. C’est bien plus simple si tout le monde ouvre le même navigateur, car les noms et options diffèrent légèrement d’un navigateur à l’autre. Cette leçon s’appuie sur Firefox.

• Expliquez qu’en ouvrant un navigateur, on arrive sur sa page d’accueil, qui est une page web. Les utilisateurs peuvent choisir la page d’accueil de leur navigateur.

• Demandez aux participants de survoler les icônes en haut de l’écran (la barre d’outils) et de noter sur des notes autocollantes les mots qui apparaissent. Ils peuvent aussi cliquer pour voir la fonction. Ils devraient trouver :

• Ouvrir un nouvel onglet

• Fermer l’onglet

• Reculer d’une page

• Avancer d’une page

• Recharger

• Page d’accueil

• Afficher l’historique

• Ouvrir le menu

• Rechercher ou saisir l’adresse

• Recherche

• Barre de défilement

• Demandez aux participants de catégoriser les outils. Quels outils permettent de naviguer sur la page ? Lesquels servent à chercher un site ?

• Demandez d’ouvrir et de fermer de nouveaux onglets. Expliquez les raisons de garder plusieurs onglets ouverts. L’objectif est de lever la confusion entre fermer le navigateur et fermer une page web. Vous voudrez peut-être y revenir quand les participants auront plusieurs pages ouvertes.

• Les participants peuvent écrire les mots de leurs notes autocollantes et dessiner l’icône à côté de chaque mot, ou croquer la page d’accueil du navigateur et y placer les outils.

Activité en ligne : entrez dans le World Wide Web

Partie II

[15min]

• Les participants s’entraîneront à naviguer sur un site en préparation de l’activité de recherche : Détective du Web.

• Demandez quand on utilise un moteur de recherche et quand non. (Si l’on connaît l’adresse web exacte, pas besoin de chercher.)

• Choisissez un site pertinent pour vos participants et demandez-leur de taper l’URL dans la barre d’adresse.

• Discutez des différentes extensions et de ce qu’elles nous disent sur le type d’entreprise ou d’organisation : .com, .org, .edu, .gov, .net. * Vous pouvez aussi parler de http, https et www comme parties de l’URL (Uniform Resource Locator) ou adresse web. Un site contient généralement une collection de pages web.

• Demandez aux participants de nommer ce qu’ils voient sur la page : médias, texte, titres, outils de navigation ou liens vers d’autres pages. Expliquez comment repérer un lien vers une autre page ou ressource. Montrez-leur l’image d’un curseur en forme de main.

• Demandez-leur s’il leur est déjà arrivé d’être sur une page, de cliquer sur des liens vers d’autres pages, et de ne plus réussir à revenir où ils voulaient ?

• Demandez-leur de penser aux outils de navigation en haut de la page et de discuter de leur usage (revenir à la dernière page visitée, avancer pour annuler l’action, recharger pour des informations à jour, et page d’accueil).

• Puis demandez d’utiliser la barre de défilement horizontale en bas de page et la barre latérale pour déplacer la page vers le haut, le bas, la gauche et la droite. (Toutes les pages n’ont pas de barre horizontale.)

• Demandez de fermer le navigateur. Puis donnez une URL et une liste de « trésors » à trouver sur ce site précis. Quelques idées :

• Regardez l’extension de l’URL. Que peut-on déduire du type d’organisation à partir de cette URL ?

• Identifiez les médias de la page d’accueil : quel est le nom et le contenu ?

• Allez à la page X et listez 3 informations de cette page

• Quel navigateur utilisez-vous ?

Réflexion et retour

[5 min]

• La personne facilitatrice demande : en quoi ce que vous avez appris aujourd’hui change-t-il votre façon de penser les recherches sur le Web et leurs résultats ?

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Fête de la recherche

Compétences : recherche, synthèse, évaluation, résolution de problèmes, collaboration, communication

Description

Dans cette discussion/activité hors ligne, les participants s’interrogent sur la recherche web — pourquoi elle est si importante et si difficile. Ils découvrent des logiciels appelés « robots d’indexation » et « moteurs de recherche » qui aident à trouver et fournir des résultats parmi des milliards et des milliards de ressources web. Les participants reçoivent aussi une introduction aux algorithmes et s’exercent à les écrire et les réviser.

Objectifs d’apprentissage

• Nommer les logiciels qui aident à collecter et classer les résultats de recherche.

• Créer un exemple d’algorithme illustrant comment les algorithmes soutiennent les recherches web.

• Créer un index pour un algorithme simple.

Temps nécessaire

De 1 à 1,5 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés

Matériel

• Des collections de 20 à 60 petits objets variés du même type — par exemple des boutons ou des perles de formes, tailles, couleurs, textures et matériaux différents. Il faut une collection par groupe de 2 à 4 participants.

• Un ordinateur/projecteur configuré, ou un autre moyen de montrer de la vidéo en streaming (YouTube), et une connexion internet.

• Un tableau blanc, un tableau noir ou un paperboard pour des notes visibles de tout le groupe.

• Notes autocollantes

Compétences d’alphabétisation Web

• Recherche

• Synthèse

• Évaluation

Compétences du XXIe siècle

• Résolution de problèmes

• Collaboration

• Communication

Introduction

[3-5 min]

• La personne facilitatrice demande à chaque membre du groupe de se présenter et de répondre à une question brise-glace (plat préféré, jeu préféré, à quel muppet ou personnage de dessin animé ressembles-tu le plus).

Astuce ! La question brise-glace aide les apprenants à connaître les autres membres du groupe et à se sentir plus à l’aise pendant la discussion ; elle peut — sans obligation — être liée à l’alphabétisation Web.

Cadrage : chercher sur le Web

[5 min]

• Quelle est la dernière chose que vous avez cherchée sur le web ? Quels outils utilisez-vous pour chercher ? Quand vous cherchez, trouvez-vous souvent ce que vous voulez ? Certaines recherches sont-elles plus faciles que d’autres ?

• La personne facilitatrice relie les réponses à une grande idée.

• Aujourd’hui, le web compte des milliards et des milliards de pages ! Cela fait énormément d’informations et de ressources ; trouver la bonne information dans cette énorme collection de pages interconnectées est le travail d’un ensemble de logiciels.

• Certains de ces programmes font le travail d’explorer le web pour découvrir ce qui s’y trouve, afin de créer un index du web.

Astuce ! Si c’est pertinent, demandez : qu’est-ce qu’un index ? Où en trouve-t-on habituellement et à quoi sert-il ? (Dans les livres, un index est une liste ordonnée du contenu qui aide à trouver des sujets précis dans tout le livre.)

• Expliquez que les participants vont expérimenter la création d’un index (ou liste ordonnée) d’une collection d’objets, ce qui nous aidera à trouver des éléments spécifiques dans cette collection.

Activité hors ligne : soyez le robot d’indexation !

[30 min]

• Cherchez dans une collection.

• Avec la méthode de son choix, la personne facilitatrice répartit les participants en groupes de 2 à 4.

• Chaque groupe reçoit une collection de 20 à 60 petits objets variés — par exemple des boutons, des perles ou des pièces Lego de formes, tailles, couleurs, textures et matériaux différents.

• La personne facilitatrice demande à chaque groupe de trouver tous les boutons ou perles bleus de la collection. Quand ils ont fini, ils lèvent la main. Lancez un minuteur et notez l’heure à laquelle tous les groupes ont terminé. Demandez à chaque groupe d’annoncer le nombre de boutons ou perles bleus trouvés.

Astuce ! S’il reste du temps, essayez une autre recherche, en ajoutant un attribut à la couleur, comme la texture ou la taille.

• Discutez de la tâche

• La personne facilitatrice dit : vous venez de faire une recherche — félicitations, vous êtes tous des moteurs de recherche ! Parlons de comment vous avez fait — qu’avez-vous fait pour trouver tous les objets bleus ? Qu’est-ce qui a aidé ? Était-ce facile ou difficile ?

Astuce ! Si le groupe peine à réfléchir à la tâche, demandez : ont-ils dû secouer ou renverser la collection pour voir ce qu’elle contenait ? Ont-ils dû discuter de ce qui compte comme bleu ? Les grandes collections sont-elles plus difficiles à fouiller ?

• Documentez le processus de recherche.

• Demandez : si nous devions écrire la liste des étapes de cette recherche simple, à quoi ressemblerait-elle ? Faisons-le ensemble — quelles étapes avez-vous suivies ? Des étapes se sont-elles répétées ?

Astuce ! La liste d’étapes pourrait ressembler à ceci :

Étalez la collection pour bien voir. Décidez de ce qui compte comme « bleu » (ou moyen, ou quel que soit le terme de recherche). Sélectionnez un bouton correspondant à la description. Mettez-le de côté. Répétez jusqu’à ce qu’il ne reste plus de boutons bleus. Calculez votre total final. Levez la main pour signaler que vous avez terminé. Annoncez le nombre.

• Une fois cette liste documentée, demandez aux participants — quelqu’un d’autre pourrait-il accomplir cette tâche rien qu’en lisant notre liste ?

• Expliquez que cette liste séquentielle de tâches s’appelle un algorithme. Quand les développeurs écrivent du code, ils écrivent des algorithmes — des listes de tâches que les ordinateurs exécutent.

• Demandez : qu’est-ce qui faciliterait cette tâche ? Y a-t-il quelque chose à faire À L’AVANCE pour accélérer ?

• Créez un index

• Demandez aux participants de trouver un moyen d’ordonner les objets de la collection pour accélérer la recherche — c’est un index ! Offrez des feuilles, des stylos et des notes autocollantes et laissez-les inventer le système.

Astuce ! S’ils semblent bloqués, suggérez — comment regrouper les objets ? Y a-t-il des ressemblances ? Quelles caractéristiques pourrait-on rechercher ?

• Quand ils semblent avoir terminé, donnez-leur une deuxième recherche, différente de la première. Chronométrez le temps que mettent tous les groupes à finir et à annoncer. Notez l’heure — cela devrait être plus rapide pour tous, surtout pour les groupes aux grandes collections.

• Discutez !

• Comment ont-ils résolu le problème ? Quelles approches ont-ils prises ? Étaient-elles identiques ou différentes ?

• Soulignez que le processus d’explorer la collection et de créer cet index est exactement ce que font les logiciels appelés « web crawlers » ou « spiders » — examinant une à une des milliards de pages web et créant un index pour accélérer les recherches.

Astuce ! S’il reste du temps, discutez de l’idée de métadonnées : des informations qui décrivent chaque objet de la collection — « bleu », « carré », « perle », « bouton ».

• Révisez l’algorithme

• Revenez à l’algorithme : en quoi l’index change-t-il les étapes ?

Astuce ! Vous pouvez ici mener une discussion de groupe sur l’algorithme et les ajouts que chaque groupe ferait aux étapes (selon la façon dont il a créé son index). OU (si le temps le permet) demandez aux participants de reprendre l’algorithme de base et d’écrire un nouveau jeu d’étapes adapté à leur collection indexée. Puis les groupes peuvent circuler dans la salle.

• Veillez à souligner que les nouveaux algorithmes diffèrent selon le groupe et la méthode d’indexation. Reliez cela à l’idée que différents moteurs de recherche donnent des résultats différents, selon l’algorithme et l’indexation des sites.

Recadrage

[5-10 min]

• La personne facilitatrice explique que, bien sûr, les pages web ne sont pas des boutons/perles. Qu’est-ce qui diffère ? Faites discuter, ou expliquez ces points :

• Les pages web sont bien plus complexes, pleines d’informations et d’images riches.

• Elles sont toutes interconnectées — reliées entre elles, de sorte que l’une peut renvoyer à une autre — d’une manière que nos boutons ne peuvent pas.

• De plus, il y a des milliards de pages web — c’est une échelle totalement différente de nos petites collections.

• Expliquez que les mêmes principes de l’exercice des boutons s’appliquent aux entreprises de moteurs de recherche comme Google et Yahoo, qui créent des index et utilisent des algorithmes pour produire leurs résultats.

• Montrez cette courte vidéo sur le fonctionnement de la recherche Google https://www.youtube.com/watch?v=BNHR6IQJGZs

• Soulignez que :

• Toutes les pages ne sont pas dans l’index ! Seule une partie du web est disponible, et les pages les plus populaires arrivent souvent en tête de votre recherche.

• L’algorithme est conçu pour donner un bon résultat au chercheur, mais pas toujours le meilleur, et votre résultat peut varier d’un jour à l’autre.

• Les algorithmes sont conçus par des personnes, dans des entreprises comme Google, Microsoft, Yahoo, etc., et ils sont constamment ajustés et modifiés.

• Il existe une pratique appelée Search Engine Optimization (SEO) — ce que font designers, développeurs et créateurs de contenu pour placer leurs pages haut dans les résultats, en tirant parti du fonctionnement de l’algorithme.

Activité en ligne

[5-10 min]

• Demandez aux participants de partager des recherches ou des questions — par exemple, combien de temps pour aller à pied à São Paulo, qu’y a-t-il dans une sauce spéciale, ou combien gagne un vétérinaire par an.

• Faites un remue-méninges et listez différents moteurs de recherche : Bing, Yahoo, Google, etc.

• Attribuez à chaque participant ou groupe une question et un moteur, et demandez de trouver au moins 3 sources d’information différentes.

• Discutez en groupe de ce que les participants ont trouvé.

• Demandez de refaire la même recherche avec un autre moteur, et de comparer les résultats à la première recherche.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Détective du Web

Compétences : évaluation, recherche, navigation, résolution de problèmes, collaboration, communication

Description

Apprenez à démêler le vrai du faux en utilisant le web pour enquêter sur l’existence du Kraken — une énorme et dangereuse créature marine à tentacules — et à détecter la mésinformation et la désinformation. Les participants collaborent pour créer un ensemble de règles qui les guideront dans l’évaluation des sources du web afin de répondre à une question de recherche, et les comparent à d’autres check-lists.

Objectifs d’apprentissage

• Rechercher et évaluer des informations sur le web.

• Créer des critères pour évaluer les informations sur le web.

• Lister d’autres ressources disponibles pour évaluer les informations sur le web.

Temps nécessaire

De 1 à 1,5 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Notes autocollantes

• Paperboard, tableau blanc ou papier

• Crayons, marqueurs

• Ordinateur portable avec connexion internet

Compétences d’alphabétisation Web

• Évaluation

• Recherche

• Navigation

Compétences du XXIe siècle

• Résolution de problèmes

• Collaboration

• Communication

Introduction

[15-20 min]

• Cadrez brièvement et reliez ce sujet à une grande idée.

• Demandez aux participants :

• Cherchez-vous des informations sur le web ? Quelle est la dernière chose que vous avez cherchée ?

• En quoi cette ressource vous aide-t-elle/change-t-elle les choses pour vous ?

• Reliez cette discussion à l’idée que le web est une source riche et complexe de toutes sortes d’informations, venant de sources très différentes.

• Animez une brève discussion sur les sources du web.

• Tout ce que vous lisez ou regardez en ligne est-il vrai ?

• Comment savez-vous quand une information sur internet est fiable ?

• Comment reconnaître quand elle ne l’est pas ?

Astuce ! Discutez avec les participants de l’histoire des fausses nouvelles (fake news) et demandez-leur des exemples passés et présents, et pourquoi cela peut sembler plus présent aujourd’hui (par exemple, les fausses nouvelles ne datent pas d’hier, mais grâce aux réseaux sociaux elles atteignent plus de gens plus vite que les e-mails viraux d’autrefois). Astuce ! Discutez de la différence entre mésinformation (information fausse) et désinformation (information fausse et délibérément destinée à tromper). Soulignez que nous pouvons prêter attention à ce que nous percevons et ressentons en ligne et utiliser ces réactions, en plus d’un ensemble de critères, pour devenir de meilleurs détectives du web. Astuce ! Un remix consiste à parler des stratégies publicitaires, des tendances, etc. — les médias du web sont souvent conçus pour provoquer des émotions spécifiques.

Co-créez une liste de critères

[10 min]

• Créez des critères pour vous guider dans l’évaluation de la fiabilité des informations sur le web.

• Demandez de réfléchir et d’écrire sur des notes autocollantes individuellement, puis de partager avec le groupe.

• La personne facilitatrice doit laisser le groupe les générer, mais peut guider doucement ou compléter avec quelques suggestions : sources, auteurs — parcours, compétences, fraîcheur/date, familiarité du site/de la source, design du site, style d’écriture/orthographe, publicité, autres articles du site, etc.

• Facilitator should let the group generate these, but can gently guide or fill-in with a few suggestions and prompts, such as: sources, authors– backgrounds, capabilities, freshness/date, familiarity of site/source, design of site, writing style/spelling, advertising, other stories on site, etc.

• Essayez de vous accorder sur chaque règle. La liste n’a pas besoin d’être exhaustive — visez six éléments ou plus.

• En cas de controverse, n’éliminez pas les règles ; gardez-les de côté.

• Permettez la discussion des règles et reconnaissez que des critères qui marchent pour certains peuvent ne pas marcher pour d’autres.

• Documentez les règles partagées sur une grande feuille, un tableau ou un paperboard, et affichez-les à la vue de tous.

• Il y aura l’occasion d’ajouter ou de réviser la liste après l’activité.

Rechercher et évaluer les preuves

[20 minutes]

• Répartissez les participants en groupes de 2 ou 3. Expliquez que le défi de chaque groupe est d’examiner les sources suivantes attestant que le Kraken, une créature marine à tentacules de 100 à 120 pieds qui attaque et coule des navires, est réel.

• NOTE : Elles représentent deux ensembles d’histoires : 1-4 sur une forme repérée sur une image Google Earth et 5-8 sur de nouvelles images vidéo sous-marines. La personne facilitatrice peut se limiter à 1-4 ou 5-8, selon les besoins, ou donner à chaque groupe un ensemble différent.

• http://www.mirror.co.uk/news/world-news/legendary-120m-kraken-sea-monster-8215560

• http://www.ufosightingsdaily.com/2016/06/60-meter-giant-squid-found-on-google.html

• http://www.orlandosentinel.com/features/gone-viral/os-thats-not-the-kraken-on-google-earth-its-a-rock-20160621-story.html

• http://www.southernfriedscience.com/did-monster-hunters-find-a-120-meter-long-giant-squid-on-google-maps/

• http://www.npr.org/2013/01/13/169274472/the-kraken-is-real-scientist-films-first-footage-of-a-giant-squid

• http://www.foxnews.com/science/2013/01/24/video-kraken-in-natural-habitat-released.html

• https://www.scientificamerican.com/article/live-giant-squid-filmed-in-deep-ocean/

• https://www.greenprophet.com/2013/01/kraken-sea-monster-video/

• https://en.wikipedia.org/wiki/Kraken

• Les groupes passent 20 minutes à chercher ensemble. La personne facilitatrice cadre l’activité :

• Rappelez aux participants qu’ils ont une question bien précise : « Le Kraken, créature marine à tentacules de 100 à 120 pieds qui attaque et coule des navires, est-il réel ? »

• Écrivez la question et affichez-la dans la salle ; assurez-vous qu’il n’y a aucun doute et qu’elle est claire pour tous.

• Suggérez d’utiliser la question de recherche pour orienter le travail.

• Distribuez des feuilles de score vierges pour suivre l’évaluation de chaque site.

• Expliquez que les participants doivent résumer le contenu de chaque site en quelques points en haut de la feuille — l’idée ou le message de base.

• Demandez de lister :

• les règles convenues (et toute autre qu’ils souhaitent utiliser) dans la colonne 1

• les scores (plus/moins) dans la colonne 2

• notes et commentaires dans la colonne 3 — que remarquez-vous ? À quoi ressemble le site ? Que vous fait ressentir le contenu ?

Astuces ! Encouragez les participants à verbaliser ensemble leurs réflexions et observations pendant qu’ils explorent et notent. Astuces ! Encouragez-les à cliquer sur les sites où ces histoires ont été publiées pour en savoir plus sur la source, l’auteur, les sponsors, etc. Astuces ! Encouragez-les à réfléchir à la chronologie des histoires — quand sont-elles apparues ? Lesquelles sont les plus récentes ? Comment sources et histoires sont-elles liées ?

• Demandez de réfléchir à ce qu’ils ont remarqué/ressenti en regardant les sites. [10-20 minutes]

• Quelque chose vous a-t-il surpris ?

• Y avait-il une différence entre le titre et l’idée principale ?

• Quelles différences avez-vous remarquées d’un site à l’autre ?

• Qu’avez-vous ressenti en lisant ou regardant les sites ? Certains étaient-ils plus amusants/excitants que d’autres ?

• Quels sites semblent les plus fiables ? Lesquels non ? Avez-vous validé les sources en ligne ?

• Proposez-vous de nouvelles règles pour la liste ?

• À qui appartient le site ? Comment découvrir l’objectif du site ? Quand la page a-t-elle été créée ?

• Révisez la liste de règles et discutez au besoin.

• Partagez les résultats de la question de recherche — quelles sont leurs réponses ? En quoi la liste de règles a-t-elle aidé ?

• Conclusion : au vu de ces histoires, on peut dire que le Kraken, créature marine à tentacules de 100 à 120 pieds qui attaque et coule des navires, n’est probablement PAS réel. Dans la première histoire, un îlot rocheux est confondu avec un Kraken. Dans la seconde, la vidéo a filmé un calmar géant, mais bien plus petit et plus farouche que le Kraken que nous cherchons — même s’il a pu inspirer les légendes.

Détecter dans la nature

[15-20 min]

• Expliquez qu’ils ont testé la liste sur un ensemble de ressources choisi — des actualités présélectionnées. Ils peuvent maintenant tester leurs listes sur des sources d’actualité et d’information trouvées « à l’état sauvage ».

• Faites un remue-méninges, ou attribuez une question controversée — tirée de l’actualité ou de la pop culture.

Astuce ! Veillez à ce que la question soit formulée clairement, en se concentrant sur la preuve ou la réfutation d’un fait précis.

• Demandez de faire une recherche web pour trouver 3 ou 4 sources différentes sur cette controverse.

• Demandez d’utiliser le même processus que dans la section précédente pour évaluer l’affirmation.

• Rassemblez le groupe pour partager les résultats. Demandez :

• Certains résultats étaient-ils différents, ou y avait-il consensus ?

• Quelles sources étaient fiables ? Lesquelles avez-vous jugées non fiables ?

• Y a-t-il quelque chose à ajouter ou modifier dans votre liste ?

Vérifiez votre check-list

[6 min]

• Voyons comment votre liste se compare à d’autres listes et processus de vérification des faits.

• Répartissez les participants en groupes de 3 à 4 et demandez d’examiner :

• How to Spot Fake News from FactCheck.org

• 7 Steps to Better Fact Checking from Politifact

• How to Fact-Check the Atlantic from the Atlantic

• Demandez aux participants :

• Comment ces listes se comparent-elles à la vôtre ?

• Qu’avez-vous appris que vous ne saviez pas ?

• Et si quelque chose manquait à ces listes ?

• Comment encourageriez-vous les autres à pratiquer de bonnes techniques de recherche/vérification des faits ?

Astuce ! Expliquez que certaines de ces listes sont faites par et pour des journalistes, qui écrivent et publient l’actualité — avant internet, ils étaient les « gardiens » (gatekeepers) de l’information factuelle. Que signifie être un gardien ? Les utilisateurs actuels des réseaux sociaux — vous, si vous publiez sur les réseaux — sont-ils aussi des « gardiens » potentiels de l’information factuelle ? Astuce ! Si le temps le permet, vous pouvez ajouter l’activité suivante, qui explore comment fabriquer ses propres fausses nouvelles : https://nucleus-network.github.io/missioninfo/activities/fakenews.html#overview

• Expliquez qu’il existe plusieurs sites dédiés à la vérification des faits dans l’actualité, ainsi que sur la pop culture et les légendes urbaines. Politifact.com, FactCheck.org et le Fact Checker Blog du Washington Post couvrent l’actualité. Snopes.com couvre l’actualité et la pop culture.

• Demandez aux participants :

• Ont-ils déjà utilisé des sites comme ceux-ci ?

• Sont-ils susceptibles de les utiliser ?

• Comment évaluer la fiabilité de ces sites ?

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Le design sur le Web

Compétences : design, recherche, navigation, communication, collaboration, résolution de problèmes

Description

Dans cette discussion et activité en ligne, les participants explorent et expérimentent le fonctionnement du design visuel sur le Web et la façon dont les web designers utilisent leurs compétences pour encourager certains comportements. Les participants comparent les éléments visuels et interactifs de différentes pages et plateformes. En binômes, ils racontent et documentent des « parcours utilisateur » à travers un site — un processus que les web designers utilisent réellement pour tester et améliorer des sites.

Objectifs d’apprentissage

• Expliquer comment le design visuel fonctionne sur le web

• Identifier comment les éléments de web design servent à encourager certains comportements

• Critiquer et documenter ses réactions à un site web

Temps nécessaire

De 45 minutes à 1 heure, selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Notes autocollantes

• Crayons, marqueurs

• Ordinateur portable avec connexion internet

Compétences d’alphabétisation Web

• Design

• Recherche

• Navigation

Compétences du XXIe siècle

• Communication

• Collaboration

• Résolution de problèmes

Introduction

[10 min]

La personne facilitatrice introduit l’idée que le web est un espace conçu. Tout ce que vous vivez sur le web résulte d’une décision et d’une intention humaines : * Un bouton ou une barre de recherche à un endroit donné * Un texte d’une certaine taille * Des choix de couleurs * Des images, du texte, etc.

• La personne facilitatrice demande : que signifie concevoir quelque chose ?

• Pensons au design dans le monde physique. Prenons les bâtiments, par exemple (choisissez deux exemples contrastés) :

• maison hantée/bâtiment public/boîte de nuit

• vs maison de campagne douillette/crèche/bibliothèque ?

• Avez-vous fréquenté des espaces comme ceux-ci ? En quoi ces environnements peuvent-ils paraître différents ?

• Quels sentiments différents voulez-vous que les usagers de votre bâtiment éprouvent ?

• Quelles actions différentes voulez-vous que les usagers de votre bâtiment entreprennent ?

• Les designers font des choix pour créer un résultat — une action ou un sentiment chez l’utilisateur. Tous les designers ont des plans et des intentions.

• En tant qu’utilisateur, vous répondez au design par des sentiments et des actions (ou non).

• La personne facilitatrice relie la discussion sur les espaces physiques au Web : comme un espace physique, la plupart des sites sont conçus avec une intention — il y a quelque chose que le designer veut que les utilisateurs fassent.

• Discutez, ou menez une activité penser/binôme/partager sur ces questions :

• Quels sites utilisez-vous le plus souvent ? Chaque participant pense à un site (YouTube, Facebook, Google, Amazon, le site de la bibliothèque, etc.)

• Quel est l’objectif du site ? Que veut son créateur que vous fassiez ? (Acheter des choses, voir des publicités, etc.)

• Qu’y faites-vous ? Que voulez-vous faire ?

• Votre objectif diffère-t-il de celui du designer du site ? Si oui, en quoi ?

• Vous est-il arrivé de visiter un site pour faire une chose et de finir par en faire une autre ? Comment ou pourquoi ?

• Vous est-il arrivé de visiter un site sans réussir à y faire ou trouver quelque chose ?

• La personne facilitatrice explique que meilleur est le design du site, plus vous avez de chances de faire ce que le designer souhaite.

Éléments de design visuel

[5 min]

• Pour beaucoup d’utilisateurs du Web (sauf les personnes malvoyantes, qui utilisent des lecteurs d’écran), les sites ont une forte composante visuelle. Demandez : quels sont des éléments du design visuel ?

Astuce ! Vous pouvez partir d’un exemple, ou créer d’abord une liste ensemble. Quelques éléments possibles :

• Couleur

• Taille

• Forme

• Espace

• Position (alignement, proximité)

• Répétition

• Variété

• Harmonie

• Regardez des exemples — quelle est l’intention du site ? Comment le design est-il utilisé ?

• Pour chaque exemple : que voyez-vous ? Que voyez-vous en premier ? Quels éléments de design visuel sont présents ? Qu’est-ce qui ressort ?

• Deux exemples à comparer :

• maison hantée/bâtiment public/boîte de nuit

• vs maison de campagne douillette/crèche/bibliothèque ?

• Laissez les participants regarder et discuter. Voici ce qu’ils (ou la personne facilitatrice) peuvent mentionner :

• Dans l’exemple de Google :

• Le focus est la barre de recherche — c’est presque la seule chose sur la page.

• Le logo coloré de Google ressort sur le fond blanc.

• Beaucoup d’espace blanc nous aide à nous concentrer.

• Dans l’exemple d’Amazon :

• Tant de choses à voir et à cliquer —

• Certaines sont plus grandes : la pub de l’Echo Dot occupe beaucoup d’espace, elle est donc importante.

• Le bouton pop-up « LOG IN » flotte au-dessus du reste du design et attire l’attention.

• Le bouton « Explore » ressort aussi visuellement.

• La barre de recherche est bien visible et facile à trouver — voyez la loupe jaune.

• Les cercles répétés donnent aux utilisateurs le sentiment de pouvoir choisir parmi de nombreux groupes de produits.

• Les petites images de produits en haut sont ludiques et amusantes ; de taille uniforme, elles donnent l’impression d’être très nombreuses.

Éléments interactifs du design

[5 min]

• Demandez : quels éléments rendent un site interactif ?

• Exemples : liens, formulaires, barres de recherche, boutons « j’aime », boutons « Acheter maintenant », zones de commentaires, zones de mise à jour de statut, listes défilantes, mouse-overs pour les pop-ups

• Regardez quelques exemples et discutez de ce que vous voyez. Demandez : comment les éléments de design visuel (taille, couleur, forme, position) travaillent-ils avec les éléments d’interaction ?

• Les participants peuvent remarquer que les designers utilisent couleur, taille et position pour attirer l’attention vers les boutons qu’ils veulent faire presser, ou une barre de recherche, etc.

Astuce ! En ligne, vous pouvez passer en mode design adaptatif (Outils > Développement web > Vue adaptative), qui montre comment le site apparaît sur différents appareils.

Quels éléments du site disparaissent quand l’écran rétrécit, et lesquels restent ? Voir un site dans ce mode aide à comprendre quels aspects le designer juge les plus importants.

Objectifs de l’utilisateur, buts du site

[5 minutes]

• Considérons les buts qu’un site (ou l’entreprise/organisation qu’il représente) a pour les interactions sur ses pages, comparés aux buts de l’utilisateur. Sélectionnez un site réel comme exemple.

Astuce ! Choisissez des sites courants, comme Amazon.com, YouTube.com, ou des sites très utilisés dans la communauté de votre public. Vous pouvez attribuer les sites ou laisser choisir.

• Demandez :

• Quels objectifs les utilisateurs peuvent-ils avoir vis-à-vis du site ?

• Quels buts le site/l’entreprise/l’organisation peut-il avoir ?

• Essayez de lister trois buts potentiels ou plus de chaque côté. Par exemple :

• YouTube.com peut vouloir encourager les utilisateurs à regarder beaucoup de contenu. Un but secondaire : que les utilisateurs voient et cliquent des publicités. Un troisième : encourager les commentaires sous les vidéos.

• Un utilisateur de YouTube.com peut vouloir regarder une seule vidéo précise. Ou trouver beaucoup de vidéos sur un sujet. Ou téléverser son propre contenu.

• Les objectifs des utilisateurs et du site sont-ils en conflit ? Comment ?

• Que se passe-t-il quand les buts de l’utilisateur et du site s’opposent ?

• Expliquez qu’en documentant leur expérience des sites, les participants peuvent voir comment le design sert les buts du site et ceux des utilisateurs… ou pas !

Enquêtes et parcours

[15 minutes]

• Dans cette activité, les participants forment des binômes et documentent ensemble leurs propres parcours utilisateur sur un site donné. L’objectif est de remarquer comment ils interagissent avec le design du site. Idéalement, chaque binôme dispose d’un ordinateur.

• La personne facilitatrice forme les binômes. Elle peut choisir les sites, ou laisser les participants choisir.

• Demandez d’aller sur le site avec une intention ou un objectif en tête.

• Par exemple : je vais sur Amazon chercher des livres sur les chatons ; je vais chercher un cours d’introduction au HTML sur YouTube.

• Une personne du binôme est l’utilisateur qui navigue en pensant à voix haute/racontant ce qu’il fait : « je vais taper “chatons” dans la barre de recherche » ou « je vais descendre lire ces avis ».

• L’autre membre écoute/documente le parcours. L’auditeur doit remarquer et/ou noter l’expérience de l’utilisateur.

• Par exemple, documenter :

• Quel est le plan ou l’objectif de l’utilisateur ?

• Quelle est la première chose qu’il voit sur le site ? Qu’est-ce qui ressort ?

• Où clique-t-il ?

• Regarde-t-il/écoute-t-il du contenu qu’il ne cherchait pas (pubs, vidéos ou articles suggérés, etc.) ?

• Pourquoi est-ce arrivé ?

• Quelle est l’ambiance du site ? Froide, sympathique, chic, élégante, etc.

• Qu’est-ce qui l’a agacé ? Qu’est-ce qui était amusant ?

• A-t-il gardé son objectif initial, ou s’est-il laissé détourner ?

• À quoi a-t-il passé le plus de temps sur le site ?

• Chaque participant passe 5 à 7 minutes à naviguer comme utilisateur et 5 à 7 minutes à documenter l’expérience de son binôme comme auditeur/preneur de notes.

Astuce ! Version hors ligne : imprimez une page web à annoter. Vous pouvez fournir une page interne et la page d’accueil du site (pour vérifier si la page interne aide vraiment à naviguer le reste du site). En prolongement, les participants peuvent utiliser une feuille blanche pour prototyper une page web qui résout les problèmes repérés sur les impressions.

Réflexion et retour

[5 min]

• La personne facilitatrice mène une brève discussion/réflexion sur les parcours utilisateur.

• Elle explique que les parcours utilisateur sont un outil que les designers utilisent pour tester sites et applications — ils font essayer le site à des utilisateurs et documentent chaque étape pour affiner le design.

• Qu’ont découvert les participants dans l’exercice ?

• Qu’avez-vous remarqué pendant l’activité ? Quoi de nouveau, d’inattendu ?

• Avez-vous perçu que le design visuel ou les éléments d’interaction jouent un rôle dans votre comportement ?

• Avez-vous remarqué une tension entre ce que vous vouliez faire ou obtenir et ce que le design du site vous suggérait de faire ?

• Qu’est-ce que cela vous fait ?

• Pensez-vous remarquer ou faire quelque chose de différent lors de vos prochaines navigations ?

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Balisage de base

Compétences : communication, collaboration, créativité, code, design

Description

Dans cette activité, les participants explorent comment l’information — texte, images — peut être présentée pour être facilement lisible/compréhensible, et comment cela fonctionne sur le web avec les tags HTML. L’activité explore le fonctionnement des navigateurs, la structure des pages web, et la relation entre les tags HTML et le contenu.

Objectifs d’apprentissage

• Décrire comment le code HTML sert à créer des pages web.

• Identifier des tags HTML courants.

• Créer un fichier texte affichable comme page web à l’aide de tags HTML

Temps nécessaire

De 45 minutes à 1 heure, selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Notes autocollantes

• Crayons, marqueurs

• Ordinateur portable avec connexion internet

• Imprimez des cartes de tags pour la TagTag Revolution ou fabriquez les vôtres sur des bouts de papier ; écrivez les « tags » suivants (n’oubliez pas la flèche !) :

• Tags d’ouverture : « <applaudir> → » (aussi chanter, taper du pied, tourner, agiter).

• Tags de fermeture : « </applaudir> ← » (aussi chanter, taper du pied, tourner, agiter).

Compétences d’alphabétisation Web

• Code

• Design

Compétences du XXIe siècle

• Communication

• Collaboration

• Créativité

Introduction

[3 min]

• Révisez les concepts clés, cadrez et reliez ce sujet à une grande idée. Expliquez :

• Internet est un système d’ordinateurs interconnectés, et le world wide web est un système de pages interconnectées qui vivent sur internet.

• Les sites sont des espaces pour accéder à des contenus multimédias, les partager et interagir avec eux.

• Les personnes qui construisent le web — développeurs et designers web — utilisent un langage de codage appelé HyperText Markup Language, ou HTML, pour créer des pages web.

• Quand vous accédez au web, vous utilisez un logiciel appelé navigateur pour afficher les pages.

Astuce ! Demandez qui connaît des exemples de navigateurs web.

• Nous allons explorer aujourd’hui le HTML — plus précisément, comment nous utilisons le HTML pour rendre notre contenu (texte, images, etc.) lisible par les navigateurs et facile à lire et comprendre pour les humains.

Contenu et tags

(5-7 mins)

• Pour cette activité, il vous faut deux supports visuels :

• 1. la une d’un journal montrant images, titres, lignes de texte, texte, paragraphes, colonnes.
• 2. le texte et les images de la une dépouillés de toute mise en forme, dans la même taille de police, sans paragraphes ni colonnes, imprimés sur une seule page. Vous pouvez le faire en accédant à une copie numérique d’un journal papier, comme le New York Times, en sélectionnant tout le contenu, en le collant dans un éditeur de texte et en retirant toute la mise en forme (commande « make plain text »). Un peu d’édition supplémentaire peut être nécessaire. L’objectif est de montrer une une typique à côté du contenu en bloc de texte uniforme et continu.

• Montrez les deux pages ; dites que le contenu est le même sur les deux.

• Discutez ensemble — quelle est la différence ? Que manque-t-il ? Quelle page est la plus attrayante ? La plus intéressante ? La plus facile à lire ? Pourquoi ?

• Discutez de la façon dont les éléments comme les titres, colonnes, lignes de texte, tailles de police différentes et blocs de texte organisent le contenu et guident nos yeux vers l’important.

Astuce ! Gardez une liste des éléments de design qui émergent — vous les relierez aux tags HTML plus loin dans la leçon.

• Concept clé ! Expliquez que c’est ainsi que les web designers utilisent le HyperText Markup Language : pour ajouter de la mise en forme au contenu sur le Web, afin que le navigateur l’affiche de façon lisible et intéressante.

• Les web designers utilisent des « tags » HTML pour dire au navigateur quoi faire du contenu.

• Demandez : qu’est-ce qu’un tag ? Où trouve-t-on des tags ? À quoi servent-ils ?

Astuce ! Si les participants sèchent, expliquez : vous avez des étiquettes sur vos vêtements ou vos bagages, on vous tague sur les réseaux sociaux, on peut taguer un billet de blog… Un tag est une petite information qu’on attache à quelque chose, pour l’identifier ou ajouter des instructions particulières.

• Expliquez : quand les web designers écrivent du HTML, ils prennent des morceaux de contenu et les « balisent » avec des tags pour dire au navigateur comment les afficher. Ils placent un tag au début du contenu (le tag d’ouverture) et un à la fin (le tag de fermeture), pour que le navigateur sache quand commencer et s’arrêter.

Astuce ! Les visuels aident beaucoup ici — écrivez ou projetez un exemple (comme ci-dessous) visible de tous.

• Expliquez les règles du balisage :

• Quand nous voulons baliser un contenu, nous l’entourons d’une paire de mots assortis, chaque mot entouré de chevrons « < > ».

• Voici un tag d’exemple : <title> Taguez le monde </title>

Astuce ! Demandez : dans cet exemple, quel est le titre ?

• Quand les tags sont utilisés en ligne, les chevrons signalent au navigateur qu’il s’agit d’un tag. Le mot ou caractère à l’intérieur donne au navigateur des informations importantes sur ce qu’il contient.

• Vous voyez quelque chose de différent dans la seconde paire de chevrons : </title> — la barre oblique signifie que c’est un tag de FERMETURE, qui indique au navigateur que le balisage est terminé.

• Nous utilisons TOUJOURS des tags d’ouverture et de fermeture autour du contenu.

• À de très rares exceptions près, les tags correspondent TOUJOURS au contenu, comme dans les exemples discutés.

• Annoncez que nous allons maintenant expérimenter le CONCEPT de balisage dans des activités hors ligne avant de voir comment cela fonctionne en ligne.

Hors ligne : Taguez le monde

[10 min]

Astuce ! Si vos participants semblent à l’aise avec le concept d’ouverture et de fermeture des tags (ou si le temps presse), vous pouvez sauter cette partie. S’ils ont besoin de plus de temps, faites l’activité Taguez le monde.

• Introduction : expliquez qu’ils vont s’exercer à fabriquer des tags et à les attribuer à des objets réels de la salle. Distribuez feuilles, marqueurs et ruban adhésif. C’est un exercice pour montrer le CONCEPT du balisage et de l’ouverture/fermeture des tags.

• Ici, dans le monde réel, vous êtes entièrement libres d’inventer vos noms de tags. Plus tard, nous verrons qu’en HTML on utilise un ensemble restreint de noms sur lesquels tout le monde s’accorde. Mais pour l’instant, créez le tag que vous voulez.

Astuce ! Écrivez l’exemple suivant en grand au tableau ou projetez-le. Prenez le temps nécessaire et assurez-vous que tout le monde comprend — c’est important !

• Révisez les règles du balisage :

• Quand nous voulons baliser un contenu, nous l’entourons d’une paire de mots entre chevrons « < > ». Voici un tag d’exemple :

• <title> Taguez le monde </title>

• Nous utilisons TOUJOURS des tags d’ouverture et de fermeture autour du contenu.

• Vous pouvez taguer n’importe quoi dans la salle — créez vos tags et fermez-les !

Astuce ! Pour aider à démarrer, créez un tag d’exemple et placez-le dans la salle — <chaise> </chaise>. Encouragez chacun à s’amuser et à être créatif !

Hors ligne : la Révolution des Tags

[10 min]

• Introduction : expliquez qu’ils vont jouer à une joyeuse ronde musicale pour montrer comment les tags HTML attribuent des instructions au contenu.

Astuce ! Ce jeu marche mieux avec des groupes de plus de 10. Avec un grand groupe, ajoutez des tags ; avec un petit, utilisez-en moins. N’hésitez pas à inventer.

• Étapes :

Disposez les joueurs en cercle, avec assez d’espace pour circuler à l’extérieur du cercle.

Choisissez deux joueurs comme « Programmeurs ». Donnez à l’un le premier tag d’ouverture et à l’autre le tag de fermeture correspondant. Commencez facile, avec <applaudir> et </applaudir>.

Lancez la musique et faites marcher les deux « Programmeurs » autour du cercle pendant que les autres restent immobiles. Qu’ils gardent une petite distance entre eux — ils peuvent démarrer à cinq pas l’un de l’autre.

Quand vous arrêtez la musique, les « Programmeurs » attachent les tags aux membres du cercle les plus proches. Rappelez-vous que les tags doivent envelopper le contenu.

Tous ceux qui se trouvent entre les flèches du tag d’ouverture <applaudir> et du tag de fermeture </applaudir> doivent commencer à applaudir (pas ceux qui portent les tags). Les applaudisseurs continuent d’applaudir jusqu’à la fin du jeu.

Choisissez deux nouveaux tags et donnez-les aux « Programmeurs » (par exemple <chanter> et </chanter>).

Répétez les étapes 3 et 4. Cette fois, quiconque se trouve entre les tags <chanter> devra chanter. Si un joueur est entre les tags <applaudir> et les tags <chanter>, il devra applaudir et chanter.

Continuez avec le reste des tags (et ceux que vous voudrez ajouter) pour créer une fête dansante de tags joyeusement compliquée ! Quand les « Programmeurs » tiennent les derniers tags, demandez-leur de rejoindre le cercle là où ils sont quand la musique s’arrête (au lieu de remettre les tags). Tous ceux entre les tags des « Programmeurs » exécutent les actions.

Une fois tous les tags en jeu, vous pouvez faire bouger les joueurs tagués un par un pour changer qui fait quoi. Cela aide à comprendre comment les tags s’appliquent au contenu et comment ils s’ouvrent et se ferment en HTML.

• Ici, dans le monde réel, liberté totale pour inventer vos noms de tags — plus tard nous verrons qu’en HTML on utilise un ensemble restreint et convenu, qui a du sens pour le contenu web. Pour l’instant, créez ce que vous voulez.

Le balisage en action

[15 min]

• Introduction : nous avons vu à quoi ressemblent les tags et comment ils fonctionnent avec le contenu (ce qu’il y a dedans). Pratiquons maintenant avec de vrais tags du HyperText Markup Language (HTML).

• D’abord, regardons un document HTML simple — devinez quoi — du point de vue d’un designer et développeur web : quand ils construisent des pages, ce sur quoi ils travaillent, c’est du code HTML dans un fichier texte brut.

Astuce ! Ouvrez un document HTML simple dans un éditeur de texte — NotePad sur PC ou TextEdit sur Mac — et montrez-le aussi dans un navigateur. Pointez les tags et montrez ce qu’ils font. Tags de base suggérés : h1, h2, h3, p, a, body. Vous pouvez aussi montrer un document plus complexe (code source du navigateur) pour montrer que toutes les pages web sont du texte et du code interprétés par l’ordinateur.

• Ces tags ont des significations convenues, pour que les développeurs web et les auteurs de navigateurs comprennent la même chose. Ces tags ne fonctionnent que grâce à ces accords — si vous essayez d’utiliser vos tags amusants de « Taguez le monde » ou de la « Révolution des Tags » sur une page web, vous ne verrez rien, hélas.

Astuce ! Si les participants ne voient pas quels types de tags seraient pertinents en HTML, rappelez que HTML signifie « HyperText Markup Language » et que nous attribuons des tags au contenu textuel. Demandez : pourquoi « paragraphe » serait-il un tag HTML et pas « applaudir » ou « chanter » ?

• Quand vous utilisez ces tags, vous écrivez du HTML ! Et quand le navigateur les voit, il transforme votre page d’un bloc de texte ennuyeux en quelque chose d’intéressant et de facile à lire.

• Au balisage ! Faites ajouter des tags à du contenu existant.

• HORS LIGNE : il vous faudra du contenu — une nouvelle amusante ou une biographie, ou autre contenu intéressant, imprimé sur des feuilles 11x7 et découpé en morceaux — paragraphes, titres, liens, etc. Il faudra aussi des notes autocollantes ou du papier pour les tags. Écrivez les tags ou laissez les participants les créer (de la liste seulement). Répartissez en petits groupes avec chacun une collection de textes et de tags.

• EN LIGNE : il vous faudra un fichier texte avec du contenu basique non formaté, du même type. D’abord, faites enregistrer le fichier en .html. Expliquez le rôle des tags <head> et <title>. Puis laissez-les taper leurs tags !

Astuce ! Pour EN LIGNE, créez un fichier texte avec le contenu et faites-le éditer avec l’éditeur LE PLUS BASIQUE — Bloc-notes sur PC ou TextEdit sur Mac — en mode texte brut. Il faudra peut-être expliquer le head et le title.

• Expliquez qu’il faut d’abord entourer tout le contenu des tags body — pour dire au navigateur que tout ce contenu est destiné à l’affichage web !

• Demandez d’organiser le contenu avec les tags. Trouvez les titres les plus importants, découpez les paragraphes, ajoutez des intertitres et repérez ce qui pourrait devenir des hyperliens. Circulez dans la salle et aidez çà et là.

• À la fin de l’exercice, si possible, les participants en ligne et hors ligne devraient voir la page chargée dans un navigateur. Les participants en ligne peuvent enregistrer et ouvrir le fichier .html. Pour les participants hors ligne, la personne facilitatrice devrait, si possible, montrer la page terminée sur un ordinateur et un écran.

• Expliquez que ces fichiers sont encore sur leurs ordinateurs locaux et ne sont visibles que là. Ils n’ont pas encore été mis « en ligne » sur un serveur, où d’autres personnes pourraient les trouver — ils ne sont donc pas sur le web.

Astuce ! Rappelez l’activité Cartographier le Web pour visualiser la connexion de l’ordinateur client. Ils peuvent accéder au contenu des serveurs web, mais les autres ordinateurs du Web ne peuvent pas accéder aux fichiers des clients.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Construire des pages de base

Compétences : composition, code, design, révision, partage, communication, collaboration

Description

Dans cette activité, les utilisateurs créent leur première page web avec un éditeur de texte basique et un navigateur pour afficher le résultat. Ils s’interviewent pour recueillir du contenu personnel (ou fictif) pour une page « À propos », organisent et écrivent le contenu, puis le balisent en HTML. Les utilisateurs peuvent téléverser ces fichiers sur un serveur (si disponible) et voir leur contenu sur le web !

Objectifs d’apprentissage

• Créer une page web simple

• Transfer web page online

Temps nécessaire

De 45 minutes à 1 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés

Matériel

• Ordinateur portable avec connexion internet

Compétences d’alphabétisation Web

• Composition

• Code

• Design

• Révision

• Partage (s’ils téléversent du contenu sur le Web)

Compétences du XXIe siècle

• Communication

• Collaboration

Introduction

[10 min]

Astuce ! Rappelez aux participants leur expérience des tags de la leçon précédente (je recommande de terminer le balisage 101 avant cette activité).

• Expliquez que toute page web visitée est en réalité un fichier HTML, c’est-à-dire un simple fichier texte — un tas de mots — avec du langage de balisage hypertexte ajouté au contenu. HTML est le langage avec lequel nous écrivons les tags.

Astuce ! Au besoin, faites un petit tour guidé du navigateur : barre d’adresse, boutons d’accueil, favoris et historique.

• Ces fichiers contiennent parfois d’autres types de code, comme du javascript ou du php, qui rendent les pages — affichées dans le navigateur — interactives, accrocheuses et dynamiques.

• Les fichiers HTML ne sont que du texte, pas très beaux à voir.

• Le navigateur les prend et les rend lisibles et visuellement plus intéressants, en plongeant dans le design et en récupérant images et vidéos.

• Fichier HTML + navigateur, comme Firefox = UNE PAGE WEB GÉNIALE POUR VOUS (espérons-le).

Astuce ! Pour montrer cette idée, ouvrez une page simple et statique et regardez. Expliquez : voyons ! On peut voir à quoi ressemble une page web en coulisses, avant que le navigateur ne s’en occupe, en explorant « afficher la source ».

• Comme les fichiers HTML ne sont que du texte, on peut les écrire dans un éditeur basique et les afficher dans un navigateur. Si vous avez un navigateur et un éditeur de texte — et presque TOUT LE MONDE en a — vous pouvez construire une page web !

• Vos pages ne seront pas sur le web. Pour cela, il faut prendre le fichier créé et le téléverser sur un serveur afin que les gens puissent y accéder via l’URL ou adresse web.

Astuce ! Rappelez, éventuellement avec un schéma, que les ordinateurs clients (les internautes comme vous) se connectent à internet et accèdent aux pages qui résident sur des serveurs. Les serveurs sont conçus pour « servir » des pages aux utilisateurs. Les pages web sont des fichiers HTML affichés dans un navigateur, d’où leur belle apparence.

• MAIS, pour l’instant, vous pouvez vous entraîner à créer des pages web ici même, sur votre ordinateur. Elles ne seront pas sur un serveur internet, mais vous pourrez créer les fichiers et les afficher dans le navigateur de votre machine.

Astuce ! Vous pouvez pointer le schéma et montrer que vous créez une page sur un ordinateur client, qui ne partage pas de fichiers comme un serveur !

• Pour commencer, il nous faut du CONTENU — car le web, c’est avant tout communiquer et partager informations et idées. Générons du contenu ensemble !

Contenu et narration

[20 min]

Astuce ! La partie suivante est amusante et interactive, idéale pour créer une communauté de classe bienveillante et positive. Mais si le temps manque et que donner aux participants le sentiment de pouvoir exister sur le Web n’est PAS une priorité, vous pouvez fournir un contenu prétapé en .txt et sauter à la section suivante — « Au balisage ».

• Écrivez votre biographie ou votre page « À propos ». Formez des binômes qui s’interviewent sur leurs vies. Comme facilitateur, gardez le temps pour que chacun ait un temps égal pour son histoire.

• Interview : demandez de prendre 5 minutes pour raconter son histoire ou, si l’on ne veut pas partager de choses personnelles, inventer un personnage fictif et raconter son histoire. L’auditeur prend des notes ou enregistre. Invitez à parler de ce qui compte le plus pour soi (ou pour son personnage). Proposez ces questions pour démarrer :

• Quel est ton nom, ton âge, d’autres détails ?

• Où es-tu né ? Où as-tu grandi ? C’était comment ?

• Que fais-tu maintenant ? Comment passes-tu ton temps ? Quelles sont tes activités, lieux, plats, musiques préférés, etc. ?

• Y a-t-il un moment préféré, un moment de fierté qui ressort ?

• Quels sont tes projets et rêves pour l’avenir ?

Astuce ! L’intervieweur peut poser des questions de relance pour plus de détails ou une histoire plus complète. Il peut poser des questions ouvertes comme « pourquoi » sur les motivations, préférences, projets, ou demander des clarifications.

• Révision/édition : chaque participant reprend les notes de son histoire — envisager d’ajouter des détails, penser à ce qui a été laissé de côté.

• Organiser et taper : demandez de taper les histoires dans un éditeur basique, en mode « texte brut » (pas Rich Text). En tapant, ils peuvent structurer l’histoire en début, milieu et fin. Peut-être avec des titres de sections : « Les débuts », « Aujourd’hui », « La suite » — ou d’autres découpages s’ils ont parlé de centres d’intérêt — « Mes chansons préférées », « lieux préférés », etc. Ces sections structureront la bio pour une lecture facile en page web.

• Donnez un titre à votre histoire ! Inventez un titre rapide ou choisissez quelque chose de simple.

• Créez un nouveau dossier sur votre ordinateur et nommez-le « xx-pageweb » avec vos initiales.

• Enregistrez votre histoire dans le dossier avec l’extension .txt. Donnez un nom sans espaces ni ponctuation autre que tirets ou tirets bas, comme « apropos-zm.txt ». C’est la version texte, le contenu brut.

• Enregistrez aussi votre histoire avec l’extension .html au lieu de .txt — ce sera votre version web. Le .html dit au navigateur de chercher du code html dans le fichier. Nom sans espaces ni ponctuation autre que tirets ou tirets bas, comme « apropos-zm.html ».

Get Tagging!

[10 mins]

• Expliquez qu’ils vont baliser leur histoire — la version .html — avec du HTML, pour la rendre affichable dans le navigateur. Expliquez que coder du HTML et penser/écrire du contenu sont deux modes de pensée différents ; il faut toujours avoir le contenu écrit avant de le baliser, plutôt que d’écrire et baliser en même temps.

Astuce ! Une bonne façon d’aider, si vous avez un ordinateur d’instructeur et un projecteur : faites l’activité avec votre propre contenu en même temps que les participants et projetez le résultat pour que tous voient ce que vous faites.

• Commencez le fichier par un tag doctype — l’un des seuls tags sans contenu ni fermeture — un tag solitaire unique, qui rappelle au navigateur que nous écrivons du html :

• Ajoutez les tags <html> et </html> qui enveloppent toute la page — pour que tout l’intérieur puisse être balisé.

• Ensuite, créez une section avec les tags <head>``</head> en haut de la page, avant tout votre contenu. Nous y mettrons un peu de contenu pour le navigateur, invisible sur la page elle-même. C’est le titre de la page, qui :

• définit un titre dans l’onglet du navigateur.

• fournit un titre quand la page est mise en favori.

• affiche un titre dans les résultats des moteurs de recherche.

• Ajoutez ensuite les tags — ils doivent entourer tout le texte de la page.

• Utilisez h1 pour le titre principal de votre page, le titre de votre histoire à l’écran (différent du tag title)

• Utilisez des tags h2 ou h3 pour les titres de sections

• Utilisez des tags p pour les paragraphes.

• N’oubliez pas de fermer vos tags !

• En bonus, ajoutez des liens vers d’autres sites (une page sur votre ville natale, votre équipe, artiste ou musicien préféré, ou une recette favorite). Vous pouvez aussi télécharger et ajouter des images — assurez-vous qu’elles soient dans le dossier « xx-pageweb ».

• Enfin, quand tous vos tags sont ajoutés, enregistrez la page !

• Ouvrez maintenant votre navigateur préféré et allez dans Fichier > Ouvrir un fichier. Naviguez jusqu’à votre dossier et cliquez sur le fichier html créé. À quoi ça ressemble ? Voyez-vous votre contenu mis en forme pour le web ? Votre titre apparaît-il dans l’onglet en haut du navigateur ? Si quelque chose cloche, que s’est-il passé ?

Astuce ! La personne facilitatrice peut dépanner ici — les problèmes courants : tags manquants, surtout de fermeture, fautes de frappe dans les tags, document non enregistré en html, problèmes de noms de fichiers d’images, etc. Circulez pour vérifier les pages et discutez, ou démontrez sur l’exemple projeté ce qui arrive quand on oublie des tags (ne jamais fermer un tag h1 est un excellent moyen de montrer l’importance de fermer les tags).

• Félicitez tout le monde pour les pages créées ! Ce sont maintenant des web designers ! Rappelez que les pages sont encore sur leurs ordinateurs locaux, pas sur le web ! Mais elles sont prêtes à y aller.

• Menez une brève discussion sur le téléversement vers des serveurs, sur l’hébergement web : ce que c’est, comment ça marche, combien ça coûte, ce que font les hébergeurs.

Passez en ligne !

[15 min]

• Si votre institution dispose d’espace serveur, montrez comment utiliser une application de transfert de fichiers pour déposer les pages dans un dossier du serveur. Parlez d’UPLOAD vs DOWNLOAD.

• Discutez de la construction de l’URL ; demandez de déduire leurs propres URL — nom de domaine, dossier de la classe, dossier personnel, nom de la page.

• Quand toutes les pages sont sur le serveur, demandez de pointer les navigateurs vers l’URL pour voir leurs pages. Vous êtes vraiment sur le web ! Youpi !

Astuce ! S’il reste du temps, discutez brièvement de l’hébergement web : ce que c’est, comment ça marche, combien ça coûte, ce que font les hébergeurs.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Applications web et construction avec Thimble

Description

Dans cette activité en ligne, les participants réfléchissent à la façon dont ils aimeraient se représenter sur le web. Ils reçoivent un cours accéléré sur l’outil de développement web Thimble et utilisent les acquis des deux activités précédentes sur le HTML et le balisage pour remixer un modèle en leur propre page web personnelle. Cette leçon revisite les concepts d’hébergement web, de noms de domaine et d’URL.

Objectifs d’apprentissage

• Expliquer la différence entre différentes applications web.

• Créer une page web avec l’application web Thimble.

Temps nécessaire

De 45 minutes à 1 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Ordinateur portable avec connexion internet et possibilité de projeter sur un écran

Compétences d’alphabétisation Web

• Code

• Composition

• Remix

• Révision

• Design

• Partage

• Pratique ouverte

Compétences du XXIe siècle

• Communication

• Collaboration

• Créativité

Introduction

[5-7 min]

• Cadrez l’activité en expliquant que certains sites sont très différents des autres. Certains sont simples ; d’autres plus complexes. On peut classer les sites en deux grandes catégories :

Astuce ! Il est recommandé de terminer d’abord l’activité « Construire des pages de base ».

• 1re catégorie : les sites où l’on accède à des informations statiques.

• Ces sites peuvent peu changer avec le temps.

• En tant qu’utilisateur, vous ne pouvez pas faire grand-chose pour modifier le contenu ou le fonctionnement du site.

• Beaucoup des premières pages web étaient ainsi.

• Demandez : quels sont des exemples de pages statiques ? Pensez à des sites rarement ou jamais mis à jour. Ou à des sites de quelques pages.

Astuce ! Exemples : le site d’un petit restaurant, etc. Ces sites servent surtout à transmettre de l’information.

• 2e catégorie : les sites où, en tant qu’utilisateur, vous pouvez faire quelque chose — produire un résultat ou modifier la page.

• Ce sont des sites qu’on utilise pour faire arriver quelque chose.

• Vous pouvez créer ou partager quelque chose, changer le contenu affiché, ou fournir des informations pour accomplir une tâche.

• Demandez : quels exemples de tels sites ? Quelle est la dernière chose que vous avez faite sur le web ?

Astuce ! Exemples : le site d’une bibliothèque publique où chercher et réserver des livres. Ou tout webmail — Gmail, Yahoo, Hotmail — ou les messageries. Sites d’achat, jeux web, réseaux sociaux, etc. La recherche Google est une application web, Facebook aussi.

• Les sites (ou parties de sites) qui permettent de faire quelque chose sur le web s’appellent des applications web.

• Ces applications sont animées par des programmes (du code) qui permettent à l’ordinateur client (celui avec lequel vous naviguez) de travailler avec le serveur (l’ordinateur où vit le site) pour que quelque chose se produise.

• Beaucoup des petits éléments simples déjà vus peuvent être considérés comme des applications web.

• Les formulaires web qui permettent d’envoyer des informations, par exemple nom et adresse e-mail.

• Les barres de recherche qui renvoient des résultats selon la question ou le terme saisi.

• Demandez qui a utilisé des barres de recherche ou des formulaires web — si oui, ils ont utilisé des applications web !

• Expliquez que les applications web peuvent aussi être bien plus complexes. Thimble est une application web pour créer des pages web. C’est un outil de codage pour écrire du HTML et d’autres langages web ; il publie aussi les pages des participants pour qu’elles soient en ligne.

Astuce ! Si les participants ont déjà fait « Construire des pages de base » (recommandé), rappelez qu’il n’est pas nécessaire d’être en ligne NI d’utiliser une application comme Thimble pour créer des pages. Un simple éditeur de texte suffit pour écrire du HTML, enregistrer ses pages et les afficher dans un navigateur. Ces pages restent hors ligne jusqu’à leur téléversement sur un serveur.

Découvrez Thimble, faites le tour

[5-7 min]

• Pour cette section, projetez votre écran pour que tous voient la visite de Thimble. Idéalement, les participants suivent sur leurs ordinateurs. Travailler en binômes peut aider.

Astuce ! Mieux vaut se connecter/créer un compte pour pouvoir publier. Si certains ne sont pas à l’aise avec la création de compte, ils peuvent jouer avec l’édition HTML dans l’éditeur et voir les résultats changer dans l’aperçu. Ils ne pourront pas publier.

• Allez sur la page d’accueil de Thimble et cliquez sur « Commencer un projet de zéro ». Expliquez que nous avons quitté la page d’accueil et utilisons Thimble comme application web pour faire quelque chose : créer des pages HTML. Et ce, dans le navigateur — plutôt cool !

• Demandez : que voyez-vous ? En quoi cette page diffère-t-elle de l’accueil ? Comment est-elle découpée ? À quoi sert chaque section ou fenêtre ? Quel est le lien entre les sections ? Laissez-les répondre, mais assurez-vous qu’ils comprennent :

• En haut à gauche, une zone permet de renommer le fichier de « projet sans titre » vers un nom qui a du sens.

• À gauche, un espace nommé FICHIERS montre deux noms de fichiers. Ce sont les deux fichiers du projet que l’on peut éditer. On bascule en cliquant sur les noms. Les nouveaux fichiers apparaissent ici.

• Au milieu, l’ÉDITEUR, où l’on voit le code HTML et où on peut l’éditer.

• À droite, l’« APERÇU » — quand on édite le code, on voit comment il s’affichera dans un navigateur — et les changements apparaissent au fil de la frappe !

Astuce ! C’est une fonction sympa : donnez de petites tâches — par exemple changer la taille du titre ou éditer le mot « amazing ».

• Notez que les modifications qui ne respectent pas les règles HTML n’apparaissent pas dans l’aperçu. On vérifie les problèmes dans l’éditeur, où l’erreur ou « bug » est surligné en rouge.

• Observez aussi l’adresse dans la barre du navigateur. Sans connexion, il devrait y avoir, après « https://thimble.mozilla.org/pt-BR/ », « anonymous » puis une barre + suite de lettres et chiffres — un emplacement provisoire sur le serveur de Mozilla où votre session Thimble est stockée temporairement.

• Connecté, l’adresse sera https://thimble.mozilla.org/pt-BR/ + /nomutilisateur + /une courte suite aléatoire de chiffres.

• C’est un emplacement (une URL) créé par l’application pour stocker le travail du participant — c’est l’aperçu du projet.

• On retrouve aussi ses projets en cliquant sur son nom d’utilisateur en haut à droite puis « Mes projets ».

• En haut à droite, un bouton PUBLIER. Si un participant connecté l’actionne, sa page est enregistrée sur les serveurs de Mozilla et devient accessible sur le web. Thimble fournit une adresse différente de celle de l’aperçu. Cela publie l’adresse de votre page, EN DIRECT sur le Web ! N’importe qui, n’importe où, peut voir votre page à cette adresse.

Astuce ! Précisez peut-être que les visiteurs de cette adresse verront seulement la page elle-même, PAS la vue de travail de Thimble avec l’éditeur et les options. Testez et comparez l’adresse publiée et celle de l’aperçu.

Faites vos pages

[15-20 min]

• Pour cette partie, plusieurs options de contenu s’offrent aux facilitateurs.

• Les participants peuvent choisir un projet existant à remixer — Tags courants est parfait pour commencer. Bonne option si le temps manque pour produire du nouveau contenu.

Astuce ! Si vous travaillez avec Tags courants comme projet remixable, signalez l’onglet TUTORIEL, qui apparaît dans l’aperçu. On y trouve de l’aide pour terminer l’activité.

• Ceux qui ont déjà fait « Construire des pages de base » ont déjà une histoire écrite sur eux — ils peuvent l’enrichir puis l’amener dans Thimble.

Astuce ! Si le temps presse, ils peuvent sauter l’ajout de contenu et reprendre la copie existante.

• Demandez d’enrichir leur histoire de vie — remue-méninges et nouvelle section sur leur ville natale, un parent préféré, un souvenir positif, etc. Au choix de la personne facilitatrice.

Astuce ! Assurez-vous qu’ils composent dans leur fichier .txt enregistré, pas directement dans Thimble, et qu’ils ne balisent pas en composant ! Coder et créer sont deux modes de pensée différents — faire les deux à la fois freine le flux créatif ou fait perdre le fil de l’histoire et oublier les tags.

• Demandez de copier-coller le contenu brut dans l’éditeur de Thimble (dans les tags body, bien sûr). Ils peuvent ensuite s’exercer à baliser la page à nouveau (et les nouvelles parties) pour se familiariser avec les tags et le HTML.

• Si les participants n’ont pas fait « Construire des pages de base », ils peuvent générer du contenu ainsi : en binômes, s’interviewer sur leurs vies. Gardez le temps pour l’équité entre histoires.

• Interview : 5 minutes pour raconter son histoire ou, sans envie de partager du personnel, inventer un personnage fictif. L’auditeur prend des notes ou enregistre. Qu’ils parlent de ce qui compte le plus pour eux (ou leur personnage). Questions de départ :

• Nom, âge, autres détails

• Où es-tu né ? Où as-tu grandi ? C’était comment ?

• Que fais-tu maintenant ? Comment passes-tu ton temps ? Activités, lieux, plats, musiques préférés, etc.

• Un moment préféré, une grande fierté qui ressort ?

• Tes projets et rêves pour l’avenir

Astuce ! L’intervieweur peut poser des questions de relance pour plus de détails ou une histoire plus complète. Questions ouvertes sur les motivations, préférences, projets, ou clarifications sur l’histoire.

• Réviser/éditer : chacun reprend les notes de son histoire — envisager d’ajouter des détails, penser à ce qui manque.

• Organiser et taper : taper les histoires dans un éditeur basique, en « texte brut » (pas Rich Text). Structurer en début, milieu et fin. Éventuellement avec des titres : « Les débuts », « Aujourd’hui », « La suite ». Ou autrement — « Mes chansons préférées », « lieux préférés », etc. Ces sections structureront la bio pour une lecture facile en page web.

• Donnez un titre à votre histoire. Un titre rapide, ou quelque chose de simple.

• Créez un dossier « xx-pageweb » avec vos initiales. Enregistrez ce fichier en deux versions.

• Enregistrez votre histoire en .txt. Nom sans espaces ni ponctuation autre que tirets ou tirets bas, comme « apropos-zm.txt ». C’est la version texte, le contenu brut.

• Copiez-collez ce contenu brut dans l’éditeur de Thimble et commencez à baliser.

• Ceux qui créent leurs pages personnelles dans Thimble peuvent y revenir et ajouter du contenu, notamment pour les activités « Playlist du projet » ou « Tous les autocollants » de la section « Participer ».

Conclusion et discussion

[10 min]

• Choisissez l’un des sujets ci-dessous pour clore l’activité :

Partage de code et remix avec Thimble

• S’ils ont travaillé sur leurs propres histoires, présentez les projets remixables et l’onglet Tutoriel, et laissez-les explorer 5 à 10 minutes. S’ils ont remixé un projet existant, discutez de cette expérience. Demandez :

• Qu’est-ce que ça fait de voir le code des autres ? Quoi de nouveau, de surprenant ? Voyez-vous des choses à essayer ?

• Que peut-on apprendre en explorant et remixant des projets avec Thimble ?

• Que ressentiriez-vous si quelqu’un remixait votre projet ?

• Même si une page n’est pas sur Thimble, beaucoup de navigateurs permettent de jeter un œil au code source… Dans Firefox : Outils > Développement web > Code source de la page. Si c’est une application web, le code sera sans doute complexe. Si c’est une page statique, il sera plus lisible.

Avantages et inconvénients de Thimble vs composer hors ligne

Revisitez la différence entre composer et publier avec Thimble OU créer des pages avec éditeur/navigateur et enregistrer sur son ordinateur. Demandez les différences. Par exemple :

• Avec Thimble, vous êtes sur le web immédiatement ! La page est enregistrée sur le serveur de Mozilla. Et les changements se voient en tapant.

• Avec éditeur/navigateur, vous travaillez en local, pas sur le web. Il faut enregistrer et rafraîchir le navigateur pour voir les changements.

• Avec éditeur/navigateur, il faut téléverser vers un serveur pour mettre la page en ligne.

• Il faut une connexion pour utiliser Thimble.

• Pas besoin d’être en ligne pour créer des sites avec navigateur et éditeur basique.

• Thimble est conçu pour apprendre le code, pas pour publier des sites durablement.

• Il y a des limites d’espace dans Thimble. Et l’adresse web…

• En quoi l’URL de votre page Thimble diffère-t-elle de celle de votre blog ou site préféré ? Pour une entreprise, cela conviendrait-il comme adresse web ?

Astuce ! Les participants doivent comprendre que les adresses de projets Thimble sont génériques ; elles n’expriment pas le contenu. Difficiles à retenir. Pour l’adresse de rêve, il faudrait acheter un nom de domaine (superpage.com ou pagegeniale.biz) et payer un hébergement — de l’espace serveur où leurs pages seraient accessibles.

• Thimble est vraiment un outil d’apprentissage — pour tester et expérimenter.

• Le duo éditeur/navigateur est une façon simple de commencer et peut mener loin.

• Pour des sites plus complexes, il existe des applications conçues pour créer et héberger rapidement — voir l’activité « Constructeurs de sites ».

L’évolution du Web

• Expliquez : aux débuts du web, beaucoup de pages étaient statiques. On partageait beaucoup d’information, avec peu d’interaction.

• Montrez un exemple du vieux web avec la Wayback Machine de l’Internet Archive et cherchez le lien du site d’Apple.

• Comparez, par exemple, apple.com en 1996 et apple.com aujourd’hui (ou trouvez vos exemples).

• Quelle est l’expérience sur chaque site ? Quels sont les plus grands changements ?

• À quoi ressemblera le web dans 20 ans selon vous ? Que voudriez-vous pouvoir faire sur le web du futur ?

Astuce ! Soulignez que les mobiles « intelligents » n’existaient pas il y a 20 ans — ce que nous faisons sur le Web peut changer, mais où et comment aussi.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Constructeurs de sites

Compétences : code, composition, design, communication, collaboration, créativité

Description

Dans cette activité, nous présentons aux participants les systèmes — appelés constructeurs de sites ou systèmes de gestion de contenu — que beaucoup de gens (designers, développeurs et novices du web) utilisent pour créer des sites aux nombreuses pages et au contenu fréquemment mis à jour, comme des blogs ou des boutiques. Les participants collectent quelques données et utilisent des exemples analogiques (papier-crayon) pour explorer le fonctionnement des constructeurs web.

Objectifs d’apprentissage

• Définir un constructeur de sites/système de gestion de contenu.

• Identifier quatre éléments de base des outils de création de sites.

• Décrire comment ces éléments fonctionnent pour créer des pages web.

Temps nécessaire

De 45 minutes à 1 heure selon la taille du groupe

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Papier et crayons

• Imprimez la fiche avec les informations suivantes :

• Fiche 1 : Fiche d’animal de compagnie

• Nom de l’animal :

• Lieu :

• Type (chat, chien, etc.) :

• Âge :

• Image :

• Caractéristiques :

• Disponible à l’adoption (oui/non) :

Compétences d’alphabétisation Web

• Code

• Composition

• Design

Compétences du XXIe siècle

• Communication

• Collaboration

• Créativité

Introduction

[2 min]

• Expliquez :

• Aujourd’hui, nous allons parler d’outils logiciels — appelés constructeurs de sites ou systèmes de gestion de contenu — que beaucoup de gens utilisent pour créer des sites.

• Ces outils réunissent HTML et CSS (Cascading Style Sheets, feuilles de style en cascade, utilisées pour les styles visuels des sites) avec d’autres langages de programmation pour accélérer la création de sites.

• Mais d’abord, faisons une activité rapide et amusante de collecte de données. Nous les utiliserons pour modéliser le fonctionnement des constructeurs web.

Activité : collecte de données

[5 min]

• Distribuez des mini-fiches (imprimées 2 par page/découpées pour économiser le papier). Faites-les remplir. Expliquez :

• Inventer les informations ne pose aucun problème.

• Sur la fiche animal, on peut faire un dessin ultra-simple — les bonshommes bâtons sont tout à fait acceptés !

• Le texte de la fiche est ci-dessous. À remixer au besoin.

• Ramassez les fiches et annoncez qu’on y reviendra.

Fiche 1 : Fiche d’animal Nom de l’animal : Lieu : Type (chat, chien, etc.) : Âge : Image : Caractéristiques : Disponible à l’adoption (oui/non) :

Discussion : création de sites

[30 min]

• Expliquez : nous avons vu comment créer une page web basique — prendre du contenu et le baliser en HTML. Ça marche très bien, surtout pour des sites qui changent peu ou de petits sites de 5 ou 6 pages. Demandez :

• Pouvez-vous citer des sites statiques : rarement ou jamais mis à jour ? Ou de quelques pages ? Exemple : un petit restaurant, etc.

• Et si nous avions des informations qui changent tout le temps ? Ou énormément d’informations ? Quels sont les sites qui changent beaucoup ?

• Exemples : météo et actualités, blogs, réseaux sociaux comme Facebook ou Instagram, boutiques.

• Quels types de sites visitons-nous le plus souvent ? Que dit cela d’internet ? (beaucoup de changement, beaucoup d’informations nouvelles).

• Supposons que nous fassions un site aux nombreuses pages — un site qui liste des animaux, où l’on peut parcourir les fiches et voir si l’on veut adopter.

• Demandez : quelles pages faut-il ? (accueil, peut-être une page « à propos », et peut-être une page par animal).

• Découvrons donc les étapes du processus de création et écrivons-les — autrement dit, un algorithme. Disons que nous avons déjà « accueil » et « à propos ». Et nous utiliserons les données d’animaux collectées. Quel algorithme écririons-nous ?

Astuce ! Un exemple d’algorithme pour créer les pages d’animaux :

Ouvrir l’éditeur de texte, enregistrer le nouveau document en .HTML Taper ou coller le contenu de la première fiche Nom de l’animal : Lieu : Image : Âge : Caractéristiques : Disponible à l’adoption (oui/non) : Commentaire : Baliser en HTML Ajouter des styles pour chaque type de donnée en CSS Enregistrer et vérifier dans le navigateur Ouvrir l’éditeur, enregistrer le nouveau document en .HTML Coller le contenu de la fiche suivante Nom : Lieu : Image : *Âge : Caractéristiques : Disponible à l’adoption (oui/non) : Commentaire : Baliser en HTML Ajouter des styles en CSS Enregistrer et vérifier dans le navigateur (Répéter x fois)

• Demandez :

• À quoi ressemble cet algorithme ? Que remarquez-vous ?

• Comment vous sentiriez-vous à l’idée d’ajouter tous les animaux ? Réponses possibles : c’est répétitif, on refait toujours pareil, ennuyeux, ça prendra une éternité.

• Que pourrait-on faire pour améliorer le processus ?

• Expliquez que c’est le défi de tout site — blog, boutique, site d’actualités — faire tous ces changements et nouvelles pages prendrait une éternité !

• Expliquez que développeurs et designers ont créé des outils — certains gratuits et pensés pour les débutants, comme vous — qui rationalisent ces processus, pour que personne n’ait à baliser des dizaines, centaines ou milliers de pages semblables.

• Dans un constructeur web, l’ordinateur fait le plus dur ! Un processus répétitif est un travail parfait pour un logiciel — les ordinateurs font ces tâches bien mieux que les humains, sans se plaindre.

• Ces outils, dans leur forme la plus basique, combinent quatre éléments. Voyons comment ils travaillent ensemble.

• Du contenu stocké dans une base de données

• Des modèles HTML

• Des règles de design CSS

• Des langages de code qui assemblent le tout rapidement (PHP, Python, Ruby, JavaScript).

• Une interface simple pour saisir le contenu.

• Cette interface cache le HTML, le CSS et le code. Parfois c’est du glisser-déposer, ou l’on tape son contenu et fait quelques choix simples. Mais explorons comment les constructeurs travaillent en coulisses, une fois tout entré dans la base.

• Voyons comment ça se fait, pour notre site préféré, sur papier. D’abord, nos 4 ingrédients !

• Le contenu dans la base de données

• Nous découperons nos fiches, car nous voudrons accéder aux données séparément.

• Créez un modèle HTML pour la page d’animal. Laissons des blancs où ira le contenu.

• Voir l’exemple :

• Créez quelques règles de style (différentes pour chats, chiens, lézards).

• Couleur de fond de la page

• Taille et couleur de police

• Déposez quelques instructions de code dans le modèle HTML pour dire à l’ordinateur comment tout assembler. Écrivons-les là où sont les notes bleues, où nous voulons envoyer nos données. C’est comme un texte à trous !

• Si nous étions développeurs sur ordinateur, nous écririons cela dans un langage de programmation ; ici nous écrirons des instructions basiques, du « pseudo-code ». Ce n’est pas le texte d’un vrai langage, mais cela exprime l’intention.

• Quelles sont les instructions ? Écrivons un autre algorithme. Libre à nous, mais voici un exemple :

• Accéder à la fiche d’animal voulue

• Mettre le nom ou le numéro de l’animal dans le titre

• Attribuer la bonne feuille de style

• Mettre le nom de l’animal dans l’en-tête

• Mettre le nom de l’image dans le tag img

• Mettre les caractéristiques dans le paragraphe final

• Écrivez les instructions proposées sur les notes autocollantes

• Maintenant, soyez le code !

• Demandez à un participant d’assembler la page en suivant les instructions des notes — c’est ce que fait le code !

• Quand le navigateur d’un client demande cette page pour un animal donné (par exemple l’animal n° 2), le code du serveur rassemble les informations de la base, attribue la bonne feuille de style et l’envoie à votre navigateur. La page s’affiche automatiquement ! La page de chaque animal n’existe donc pas statiquement : elle est fabriquée à la demande.

• C’est ce qui se passe en coulisses de toute plateforme de gestion de contenu/constructeur web, comme WordPress, SquareSpace ou Wix.

• En tant qu’utilisateur, vous taperiez du contenu dans une interface, choisiriez un modèle et presseriez « publier ». Le code côté serveur et navigateur fait le reste ! Et maintenant vous savez comment ça marche !

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

La sécurité d’abord

Description

Dans ce mélange d’activités en ligne et hors ligne, La sécurité d’abord, la partie 1 montre comment nos activités quotidiennes en ligne peuvent être pistées. Les participants réalisent d’abord un audit de vie privée, au cours duquel ils découvrent comment des tiers peuvent voir leurs activités personnelles. Ils apprennent ce que sont les métadonnées et ce qu’elles peuvent révéler de nous. Enfin, ils prennent conscience des mécanismes à l’œuvre pour pister nos activités en ligne.

Dans la partie 2, les participants suivent les étapes recommandées pour protéger leur vie privée en ligne. Ils apprennent à définir de bons mots de passe, protéger leur navigateur, télécharger des extensions renforçant la confidentialité, adopter de bonnes pratiques Wi-Fi et protéger leurs données personnelles.

Objectifs d’apprentissage

• Identifier les choix de confidentialité que vous faites chaque jour.

• Expliquer comment les cookies et les tiers peuvent vous pister en ligne.

• Identifier trois façons de limiter le pistage dans votre navigateur et de créer de meilleurs mots de passe.

Temps nécessaire

De 1 à 2 heures selon la taille du groupe.

Public cible

Adaptable à des publics de 13 ans et plus, avec des niveaux d’expérience du web variés.

Matériel

• Un ordinateur/projecteur configuré et une connexion internet.

• Un tableau blanc, tableau noir ou paperboard pour des notes visibles de tous.

• Marqueurs, stylos ou crayons.

• Fiches préparées (contenu ci-dessous) au besoin.

• Notes autocollantes

Compétences d’alphabétisation Web

• Protéger

• Rechercher

• Navigation

• Évaluer

• Pratique ouverte

Compétences du XXIe siècle

• Communication

• Résolution de problèmes

Introduction

[10 min]

• Lancez une discussion sur leurs expériences de la vie privée en ligne.

Astuce ! Selon la taille du groupe, ces questions conviennent aux petits groupes ou au groupe entier.

• Quand vous entendez le mot « vie privée », à quoi pensez-vous ? Comment ce concept s’applique-t-il à votre quotidien ?

• Comment ces notions fonctionnent-elles dans le contexte de ce que nous faisons sur le web ?

• La vie privée s’applique-t-elle autant à votre vie hors ligne qu’à votre temps sur le web ? Pourquoi/pourquoi pas ?

• Rappelez que, comme pour tout problème d’ampleur, nous pouvons agir par de nombreux petits pas dont l’effet protecteur s’additionne.

• Demandez : que faites-vous pour protéger votre vie privée ?

Astuce ! Veillez à aborder ces sujets, qui reviendront plus loin :

Modifier ses paramètres de confidentialité Effacer l’historique de navigation Créer des mots de passe forts Activer l’identification à deux facteurs Utiliser des gestionnaires de mots de passe Pratiquer l’hygiène Wi-Fi Activer WPA ou WPA2 sur nos routeurs Éviter le Wi-Fi public Protéger les informations personnelles Savoir repérer le phishing Maintenir les mises à jour de sécurité de nos appareils

Partie I : définir la vie privée

[45 min - 1 heure]

Activité hors ligne : chronologie des traces de données

[20 minutes]

• Annoncez que, dans la prochaine activité, nous ferons un rapide récapitulatif de leur journée.

• Demandez de penser à tout ce qu’ils ont fait, du réveil jusqu’à leur arrivée à cette séance.

Astuce ! Si l’activité a lieu le matin, il peut être plus utile de réfléchir à la veille.

• Un exemple de fiche pour cette activité :

• Ma journée (jusqu’ici)

• Utilisez cette fiche pour lister vos activités du jour. Pour chaque élément, répondez :

• Après cinq minutes de réflexion silencieuse, demandez de partager un peu de leur journée. Rappelez qu’il est normal de garder ses données personnelles privées — la fiche n’est que pour eux !

• Demandez de relire leurs fiches avec ces questions en tête :

Astuce ! Si possible, distribuez un marqueur ou crayon de couleur. Demandez de surligner ou entourer les tâches où la technologie a été utilisée.

• Combien de mes actions du jour incluent de la technologie ?

• Combien ont exigé un site web ?

• Qui peut remarquer la fréquence de mon usage de la technologie pour les tâches du quotidien ?

• Que pourraient-ils découvrir de mes habitudes en ligne ?

• Que pourraient-ils découvrir de l’endroit où je suis dans le monde réel ?

Astuce ! Pendant les partages, discutez des façons dont ces sites pistent leurs activités.

De https://www.internetsociety.org/ : Sites et achats en ligne. Les commerçants et sites d’avis laissent souvent des cookies sur votre système, qui peuvent suivre vos déplacements de site en site, permettant des publicités ciblées montrant des produits récemment consultés. Réseaux sociaux. Tous les +1, retweets et commentaires Facebook (même privés) laissent une trace. Vérifiez les paramètres de confidentialité par défaut de vos comptes et surveillez-les. Les sites introduisent souvent de nouvelles politiques et de nouveaux réglages qui augmentent la visibilité de vos données. Ils comptent parfois sur un simple clic « OK » sans lecture. Téléphones, tablettes ou portables. Certains sites gardent la liste des différents appareils utilisés pour les visiter. Cela peut aider à protéger votre compte, mais il importe de comprendre les informations collectées sur vos habitudes.

• Discussion — demandez :

• Le nombre de tâches où vous avez dépendu de la technologie vous a-t-il surpris ?

• Qui, selon vous, pourrait observer vos habitudes en ligne ?

• Que pourraient apprendre ces entités sur vous ?

• Laquelle de ces informations aimeriez-vous protéger ?

• Annoncez : les informations laissées derrière nous en naviguant forment ce qu’on appelle une « empreinte numérique » ou « ombre numérique ». Votre empreinte inclut les sites visités, les e-mails envoyés et les informations fournies aux services en ligne.

• Regardons le type d’information que vous pouvez laisser dans votre empreinte numérique.

Discussion et activité en ligne : quelles informations peuvent être collectées ?

[10 minutes]

• Expliquez que, si votre empreinte ne contient probablement pas le contenu de vos activités, vos métadonnées, elles, restent derrière vous et sont pistées par toutes sortes d’entités.

• Expliquez que les métadonnées sont, simplement, des données sur les données. Exemple : une image peut inclure des métadonnées décrivant sa taille, sa profondeur de couleur, sa résolution, sa date de création, etc. Autre exemple : les fichiers texte. Sans en voir le contenu, on peut voir la taille, le type, l’auteur et la date d’écriture.

• Demandez : maintenant que nous en savons plus, pensons aux métadonnées d’un e-mail. Disons que vous écrivez à un ami. Des tiers ne verront peut-être pas le contenu. Que peuvent-ils voir selon vous ?

• Expéditeurs

• Destinataires

• Date et heure d’envoi

• Présence ou non de pièces jointes

• Demandez : que pourrait-on apprendre en collectant et analysant ces points de données sur vos communications ?

• Qui sont vos amis et votre famille.

• Avec quels amis vous gardez le plus contact.

• Comment vos amis et votre famille sont reliés entre eux.

• On peut voir ces métadonnées en action avec un outil du MIT appelé Immersion. Regardons cette démo des contacts de Tony Stark : https://immersion.media.mit.edu/demo

• Notez qu’on voit qui sont les « principaux collaborateurs » de Tony.

• On voit quels individus ont reçu des e-mails de groupe ensemble. Ils forment un cluster représentant nos groupes de contacts.

• On peut aussi utiliser le curseur en bas de page pour voir l’évolution des contacts dans le temps.

• Demandez : que remarquez-vous d’autre sur le profil de Tony Stark ?

• Essayez chez vous. Le MIT fournit une connexion sécurisée pour la plupart des messageries : https://immersion.media.mit.edu/

Activité en ligne : utiliser Lightbeam

[15 min]

• Annoncez que nous allons regarder qui pourrait nous pister en ligne.

• Expliquez que nous utiliserons Lightbeam de Mozilla pour voir comment les entreprises utilisent les « cookies », des fichiers spéciaux enregistrés par le navigateur, pour vous suivre en ligne.

• Donnez un aperçu des cookies.

• Un cookie est une petite donnée envoyée par un site et stockée sur l’ordinateur par le navigateur pendant la navigation.

• Ils ont été créés pour aider un site à se souvenir d’informations comme le contenu du panier, l’état de connexion, ou les réponses saisies dans des formulaires.

• Il existe de nombreux types de cookies, que nous verrons dans le Speed Dating de la vie privée.

• Vérifiez que tout le monde utilise Firefox.

• Montrez comment aller dans les extensions Firefox, chercher Lightbeam et cliquer Ajouter à Firefox. (https://addons.mozilla.org/pt-BR/firefox/addon/lightbeam/)

• Circulez pour répondre aux questions individuelles.

Astuce ! Avec un co-facilitateur, c’est une excellente façon d’aider.

• Expliquez qu’il faut cliquer sur l’icône Lightbeam près de la barre de navigation pour voir les données.

• Faites la démonstration en visitant deux ou trois sites appropriés que vous aimez dans un nouvel onglet (par exemple americanas.com.br, youtube.com.br, wikipedia.com). Revenez ensuite à l’onglet Lightbeam et montrez combien de pisteurs vous ont suivi.

• Partagez : plus vous visitez de sites, plus Lightbeam affiche d’autres entreprises et organisations qui vous suivent et pistent vos cookies. Les sites peuvent vous suivre sur le web en observant vos cookies et en voyant où vous les avez récupérés.

• Demandez d’explorer un peu internet pour laisser Lightbeam collecter les informations de pistage tiers.

• Puis : à vous ! Ouvrez un nouvel onglet à côté de Lightbeam. Visitez quatre ou cinq sites appropriés et revenez à l’onglet Lightbeam à chaque nouvelle page. Voyez comme Lightbeam compte les sites qui vous pistent.

• Laissez du temps pour explorer.

• Demandez :

• Qu’avez-vous vu dans Lightbeam qui vous a surpris sur le pistage en ligne ?

• Certains sites visités utilisaient-ils un logiciel de pistage courant ?

• Y a-t-il d’importantes « bonnes » raisons de pister les gens en ligne qui valent une certaine perte de vie privée ?

Offline Activity: Privacy Speed Dating

[20 min]

• Répartissez les participants en groupes de 6 ou plus.

• Distribuez des « biographies » (ci-dessous) de divers dispositifs de pistage tiers.

Pistage Google Analytics : Je travaille pour le propriétaire du site pour voir combien de personnes le visitent (visites et visiteurs uniques, nouveaux et anciens) ou d’où elles viennent. J’aide à comprendre l’expérience d’un client du site. Je suis un cookie persistant, généralement de première partie, posé à votre première visite, et je reste aussi longtemps que le site le décide, en général 18 mois.

Pistage de gestion de session : Je suis un cookie nécessaire au fonctionnement technique du site. Je suis prêt quand vous visitez le site et je disparais quand vous partez. Je suis un cookie transitoire, stocké côté client en mémoire temporaire, pas sur le disque dur. Je veux bien un rendez-vous, mais je ne cherche pas de relation durable et je n’envahirai pas votre vie privée.

Pistage e-commerce : On m’utilise pour la gestion du panier et le « paiement rapide » quand vous achetez sur votre site préféré. Mes cookies stockent des identifiants qui aident le site à vous suivre pendant que vous remplissez votre panier. Tout ce que vous y ajoutez est stocké avec votre identifiant, pour qu’au moment de payer, le site sache ce qu’il contient. Je peux être un cookie de session qui disparaît à votre départ, ou persistant, qui garde vos articles pour votre retour. Sans moi, les achats en ligne seraient bien moins pratiques.

Pistage de localisation : Je suis l’espion dans votre poche. Je suis dans vos ordinateurs, téléphones et tablettes. Comme je vous accompagne partout, je peux enregistrer votre position en permanence, même hors connexion. Je peux révéler non seulement où vous vivez et travaillez, mais aussi où vous allez. Je peux rendre limpides votre routine quotidienne et ses écarts. Je peux aussi servir à déduire vos relations avec d’autres personnes.

Pistage tiers : Je me loge sur votre appareil quand vous visitez un site. Souvent, vous ignorez ma présence. Le site décide combien de mes amis sont invités. J’en ai souvent beaucoup. Nous pouvons être 60 ou plus sur une page. Parfois je suis seul, ou invisible. J’aime pister vos habitudes de navigation et les raconter. Disons que je suis un peu commère. Un de mes métiers est de travailler pour des entreprises qui veulent dresser votre profil : votre âge, où vous vivez, ce que vous lisez, ce qui vous intéresse. Les entreprises pour lesquelles je travaille peuvent empaqueter et vendre ces informations à : des annonceurs, d’autres entreprises ou des gouvernements. Je suis souvent caché, mais quand je travaille pour des entreprises connues, vous pouvez me voir comme un bouton coloré.

*Empreinte du navigateur : J’ai commencé dans la banque pour prévenir la fraude, mais je travaille maintenant partout. Mes amis me racontent des choses sur vous : votre adresse IP, votre historique, la taille de votre écran, votre fuseau horaire, vos plug-ins et votre système d’exploitation. Je rassemble des informations qui, seules, ne semblent pas identifiantes, mais mises ensemble, elles me permettent de vous identifier sur internet et de servir d’alternative aux cookies. Plus votre système est configuré de façon unique, plus il m’est facile de vous identifier. Vous ne me croyez pas ? Essayez Panopticlick. L’EFF me mesure depuis 2010. *

• Demandez de lire la biographie reçue. Chacun adopte la « personnalité » du pisteur de sa carte. Au signal, ils auront deux minutes pour rencontrer les autres.

• Réglez un minuteur sur des intervalles de 2 minutes. Lancez-le et demandez à chacun de trouver un partenaire.

Astuce ! En nombre impair, un trio à la fois est parfaitement acceptable.

• Ils ont deux minutes pour se présenter et se poser les petites questions ci-dessous. Les deux minutes écoulées, on change de partenaire. Continuez jusqu’à ce que tout le monde se soit rencontré.

• Que fais-tu ?

• Comment sont tes amis ?

• Comment nous connectons-nous ?

• Quel âge as-tu ?

• D’où viens-tu ?

• Après dix minutes, rappelez tout le monde en grand groupe.

• Discutez :

• Qu’est-ce qui vous a le plus surpris chez ces pisteurs en ligne ?

• En découvrant un nouveau type de pisteur, voyez-vous qui peut profiter des informations collectées sur vos habitudes ? Le type d’information partagé sur vous vous inquiète-t-il ? Pourquoi ou pourquoi pas ?

• Maintenant que les problèmes sont identifiés, parlons solutions !

Partie II : votre check-list de confidentialité

[45 min - 1 heure]

Activité en ligne : Modifier vos paramètres de confidentialité

[20 minutes]

• Dites aux participants : votre navigateur est votre porte d’entrée vers internet. C’est là que commencent vos démarches pour prendre en main votre vie privée. Faisons aujourd’hui quelques pas pour mettre de l’ordre dans les paramètres de nos navigateurs.

• Dites aux participants : à main levée, indiquez quel navigateur vous utilisez. Nous nous regrouperons selon les navigateurs que nous utilisons habituellement pour voir ce que nous pouvons faire aujourd’hui pour les rendre plus sûrs.

Astuce ! Cette liste suppose que les participants peuvent apporter leur propre appareil. Cette activité peut être adaptée aux contextes où tous les participants utilisent un même navigateur.

Google Chrome Mozilla Firefox Microsoft Internet Explorer Apple Safari

• Maintenant, regroupons-nous pour travailler sur les paramètres de nos navigateurs.

Astuce ! Indiquez les zones de la salle où chaque groupe doit s’asseoir.

• Apprenez directement à partir des ressources en ligne selon vos groupes :

• Google Chrome : https://myshadow.org/how-to-increase-your-privacy-on-chrome

• Mozilla Firefox : https://myshadow.org/how-to-increase-your-privacy-on-firefox

• Microsoft Internet Explorer : https://support.microsoft.com/en-us/help/17479/windows-internet-explorer-11-change-security-privacy-settings

• Apple Safari : https://support.apple.com/guide/safari/privacy-preferences-sfri35610/mac

• Remettez à chaque groupe la Liste de vérification de confidentialité du navigateur ci-dessous. Rappelez aux utilisateurs que, même s’ils voient des conseils de sécurité supplémentaires sur les pages web qui leur ont été attribuées, ils doivent pour l’instant se limiter à la feuille d’exercices, car nous parcourrons les autres étapes en groupe.

Astuce ! Relisez et adaptez cette feuille d’exercices, car les paramètres peuvent changer.

Astuce ! Adaptez cette feuille d’exercices aux contextes où tout le monde utilise le même navigateur, en supprimant la deuxième colonne et en ajustant les tâches au navigateur en question.

• Liste de vérification de confidentialité du navigateur

• Utilisez cette liste pour vous guider dans la mise à jour des paramètres de confidentialité de votre navigateur !

• Discussion : Au bout de 15 minutes, réunissez les participants pour échanger.

• Comment avez-vous vécu le processus d’ajustement des paramètres de votre navigateur ?

• Les instructions que vous avez vues en ligne étaient-elles faciles à suivre ?

• Les paramètres étaient-ils faciles à trouver dans votre navigateur ?

Activité en ligne : Effacer votre historique de navigation

[5 minutes]

• Montrez comment effacer l’historique de navigation dans Google Chrome

• historique →

• afficher l’historique complet →

• effacer les données de navigation →

• sélectionnez depuis le début et cochez : tous les éléments que vous souhaitez effacer →

• Effacer les données de navigation

Astuce ! Choisissez le navigateur que vous préférez. Google Chrome a été retenu pour cette activité parce que c’est le plus utilisé.

Astuce ! Demandez aux participants d’observer attentivement votre démonstration avant d’essayer par eux-mêmes.

• Faites remarquer que nous pouvons cocher la case pour effacer les cookies pendant le nettoyage de nos navigateurs.

• Dites à vos participants : les traqueurs peuvent lire votre historique de navigation. Pour pratiquer une bonne hygiène de confidentialité, il est important d’effacer régulièrement son historique de navigation. Essayez de prendre l’habitude d’effacer votre historique avant de partir chaque jour.

• Partagez avec les participants : dans le cas de Google, même en mode navigation privée, votre historique et vos cookies ne sont supprimés que lorsque vous fermez complètement le navigateur.

• Demandez aux participants d’essayer !

Astuce ! Refaites la démonstration plusieurs fois pendant que les participants s’exercent.

Activité en ligne : Extensions de navigateur

[10 minutes]

• Expliquez qu’il existe un monde grandissant d’extensions de navigateur qui combattent les traqueurs. Aujourd’hui, nous allons en explorer une : Privacy Badger.

• Précisez que Privacy Badger n’est disponible que pour Google Chrome et Mozilla Firefox. Demandez aux participants d’ouvrir l’un de ces deux navigateurs.

• Rendez-vous sur la page web de Privacy Badger : https://www.eff.org/privacybadger

• Dites à vos participants : Privacy Badger est une extension de navigateur qui empêche les annonceurs et autres traqueurs tiers de suivre où vous êtes et quelles pages vous consultez sur le web. Si un annonceur semble vous suivre sur plusieurs sites sans votre permission, Privacy Badger bloque automatiquement le chargement de tout nouveau contenu de cet annonceur dans votre navigateur. Pour l’annonceur, c’est comme si vous aviez soudainement disparu.

• Montrez à vos utilisateurs comment cliquer sur le « bouton d’installation » pour installer Privacy Badger.

Astuce ! Assurez-vous que votre ordinateur n’a pas déjà Privacy Badger installé, en le supprimant de Google Chrome avant cette activité.

• Demandez aux participants de parcourir avec vous les diapositives d’introduction de Privacy Badger. Passez en revue la signification des curseurs de différentes couleurs. Naviguez sur quelques sites adaptés à la communauté pour alimenter Privacy Badger, puis vérifiez quels traqueurs ont été bloqués.

• Montrez comment l’icône de Privacy Badger change de couleur pendant qu’il bloque les traqueurs.

• Demandez aux utilisateurs d’ajouter l’extension Privacy Badger, de naviguer sur quelques pages et d’expérimenter par eux-mêmes !

Activité hors ligne : Créer des mots de passe robustes

[15 minutes]

• Partagez la bande dessinée xkcd ci-dessus avec vos participants. Expliquez que ce qui rend un mot de passe facile à deviner par les machines (et difficile à retenir pour les humains !) est le choix de mots courants, même en remplaçant des lettres par des chiffres.

• Encouragez vos participants à essayer ce générateur de mots de passe. Indiquez-leur qu’ils peuvent aussi le faire hors ligne, en choisissant au hasard quatre mots courants du dictionnaire et en les assemblant.

• Discutez de ce que vous pouvez faire pour vous assurer que les mots sont vraiment aléatoires. Par exemple, vous pourriez essayer nom, verbe, adjectif.

Astuce ! Si vous avez une paire de dés, essayez Diceware. Sa liste de mots comprend 8 000 mots anglais, précédés de nombres à 5 chiffres. Comment ça marche : lancez la paire de dés 5 fois et ajoutez le mot correspondant à votre phrase de passe. Répétez plusieurs fois pour ajouter d’autres mots et renforcer votre mot de passe.

• Menez une discussion avec vos participants.

• Quels mots de passe sont les plus faciles à retenir ? Pourquoi ?

• Lesquels pourraient être les plus faciles à deviner ? Pourquoi ?

• Quels autres conseils auriez-vous pour protéger vos comptes en ligne ?

• Activer l’identification à deux facteurs

• Utiliser des gestionnaires de mots de passe

• Veiller à utiliser des mots de passe différents pour chaque compte.

Astuce ! Il existe de nombreux conseils de confidentialité à partager. Créez un document avec des ressources utiles ou des trucs et astuces. Voici quelques sources à consulter :

Data Privacy Project : https://dataprivacyproject.org/curriculum/ Glassroom : https://theglassroom.org/ Me and My Shadow 8-Day Detox : https://myshadow.org/ Security in a Box : https://tacticaltech.org/projects/security-in-a-box-key-project/ Security Education Companion : https://www.eff.org/deeplinks/2017/11/announcing-security-education-companion Street-Level Surveillance : https://www.eff.org/issues/street-level-surveillance Providence Public Library, Privacy Training Workshop for Library Patrons : https://docs.google.com/presentation/d/1mkGJCHTYKyg2r2yQclRBvp23IfewRHZTMu8j2P0xDdg/edit?usp=sharing Internet Society Your Digital Footprint Matters : https://www.internetsociety.org/tutorials/your-digital-footprint-matters/ Our Data Bodies : https://www.odbproject.org/ Library Freedom Project : https://libraryfreedomproject.org/ San Jose Public Library Virtual Privacy Lab : https://www.sjpl.org/privacy Lebanon Public Library : https://www.leblibrary.com/online-self-defense

Cartes Hacker

[10 minutes]

• Mettons maintenant nos connaissances à l’épreuve !

• Distribuez ce jeu de cartes sur la confidentialité : https://thimbleprojects.org/mozillalearning/308795/

• Dites à vos participants qu’ils pourraient rencontrer un concept que nous n’avons pas abordé en classe. S’ils trouvent une carte dont ils aimeraient discuter, demandez-leur de lever la main.

Astuce ! Si vous préférez garder les questions pour une discussion de groupe à la fin de cette activité, demandez à vos utilisateurs de les noter.

Clôture et réflexion

[5 min]

• Demandez aux participants : qu’avez-vous appris que vous ne saviez pas avant ? Qu’est-ce qui vous a surpris ?

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Toutes les Notes Autocollantes

Description

Dans cette combinaison d’activités hors ligne/en ligne, les participants explorent comment certaines images numériques sont faites de pixels et comment ces images sont structurées et affichées. Ils discutent de ce qu’ils aimeraient communiquer d’autre en ligne et créent leur propre outil de communication visuelle pour le faire : une œuvre de pixel art ou un sticker web. Ils créent d’abord des stickers web en format analogique, puis les recréent avec des outils numériques. Les participants ajoutent leurs stickers à leurs propres sites web (s’ils ont créé des sites lors des activités WRITE) ou essaient de les envoyer par e-mail ou de les publier sur les réseaux sociaux.

Objectifs d’apprentissage

• Définir le terme « pixel ».

• Expliquer comment les bitmaps déterminent la résolution de l’écran.

• Créer des images en pixels en ligne et hors ligne.

Temps nécessaire

45 minutes à 1 heure selon la taille du groupe

Public cible

Peut être adapté à des publics de 13 ans et plus ; avec des niveaux variés d’expérience du web

Matériel

• Ordinateur portable avec connexion internet

• Print out pictures within this activity or pull up on computer/project setup

• Tableau blanc, paperboard ou papier

• Notes autocollantes multicolores

• Crayon ou stylo

• Ruban adhésif

Compétences de littératie web

• Design

• Remixage

• Partage

• Connexion

• Évaluation

Compétences du XXIe siècle

• Communication

• Collaboration

• Créativité

Introduction

[1 min]

• Expliquez : nous allons parler de la façon dont les ordinateurs créent et stockent des images à l’aide de nombreux petits morceaux de couleur, et de la façon dont nous utilisons ces images pour communiquer en ligne. Et nous allons créer des images très simples, en format analogique comme numérique.

Pixels

[5-10 min]

• Demandez aux participants : Qui a déjà entendu le terme « pixel » ? Qu’est-ce qu’un pixel ? Que savez-vous à leur sujet ? Astuce ! Il peut être nécessaire d’expliquer la différence entre le terme informatique et le smartphone Pixel de Google.

• Expliquez : Le terme « pixel » vient des mots anglais Picture Element. C’est le plus petit élément possible, la plus petite unité d’information dans une image numérique.

• Ils apparaissent sur l’écran de l’ordinateur comme des points de lumière blancs ou colorés, ou comme des points éteints qui apparaissent en noir.

• Créer des images avec de nombreux éléments minuscules n’est pas une idée nouvelle ! Regardons et parlons de quelques exemples.

• Demandez aux participants : quelles sont les ressemblances et les différences dans les images suivantes ? Quel est le plus petit élément qui compose chaque image ? (vous pouvez mentionner le mélange de couleurs et les couches de coups de pinceau de l’artiste George Seurat ; Chuck Close utilise des coups de pinceau, mais dans une grille ; le jeu vidéo Space Invaders n’a ni mélange ni couches, et on voit une grille marquée)

Écrans, Bitmaps, Résolution

[5-10 min]

• Demandez aux participants : quand des artistes comme Chuck Close et George Seurat créent une image, sur quoi travaillent-ils ? Quelle est la surface sur laquelle ils travaillent ? (Les réponses peuvent être : papier, toile, bois, murs pour les muralistes, etc.)

• Soulignez que, dans le monde réel, ces supports ont toujours des dimensions mesurables — qu’ils soient minuscules, petits ou grands comme la façade d’un immeuble.

• Quand nous regardons des images numériques : quelle est la surface ? Quel est l’équivalent numérique d’une toile ou d’une feuille de papier ? (Réponses : les écrans de nos moniteurs d’ordinateur, de nos téléphones, de nos ordinateurs portables ou de nos téléviseurs.)

• Soulignez que, comme le papier ou la toile, les écrans ont aussi des dimensions physiques (par exemple, la hauteur et la largeur du smartphone ou de l’écran d’ordinateur).

• De plus, les écrans ont des contraintes numériques. Chaque écran dispose d’un nombre maximal de pixels pour afficher des images. C’est ce qu’on appelle la résolution d’écran. Elle s’exprime en deux dimensions, largeur et hauteur en pixels. Exemples :

• 1280 x 800

• 1024 x 640

• Notez qu’il n’existe pas de mesure officielle fixe pour un pixel. Cela dépend des dimensions physiques de l’écran et de la résolution de l’écran.

• Un panneau publicitaire géant à Times Square peut avoir des pixels de 12 pouces sur 12 pouces, tandis que votre montre connectée aura des pixels de taille microscopique.

• Expliquez aux participants que lorsque nous utilisons des ordinateurs pour créer ou afficher une image faite de nombreux pixels, l’ordinateur utilise une grille — une matrice de pixels, appelée bitmap, pour organiser l’information visuelle.

• Chaque « bit » d’information dans l’image, chaque pixel, a son propre emplacement unique sur la grille ou « carte ».

• Cela vaut pour les photographies numériques comme pour les œuvres d’art numériques ou les images — logos ou illustrations — créées de toutes pièces.

• Voici un exemple, une image de hérisson et un gros plan des pixels qui composent l’œil :

• Comme un écran d’affichage, une image a aussi une résolution — le nombre total de pixels dans l’image entière.

• Nous calculons la résolution d’une image en multipliant la largeur et la hauteur du bitmap.

• Demandez aux participants : qui a entendu le terme « basse résolution » ? Ou « haute résolution » ? Qu’est-ce que cela signifie ? (réponses : basse résolution signifie une image avec moins de pixels, haute résolution signifie une image avec plus de pixels. Plus il y a de pixels dans l’image, plus nous obtenons d’informations et de détails.)

Hors ligne : Pixel Art Analogique

[15-20 min]

• Expliquez aux participants qu’ils vont créer de l’art à base de pixels, mais de manière analogique. Ils créeront une image qu’ils pourront ensuite transformer en format numérique pour l’utiliser sur le web.

• Discutez brièvement de la communication visuelle en ligne : existe-t-il des façons d’utiliser des images pour communiquer avec d’autres personnes en ligne ? (les réponses peuvent être : le bouton J’aime de Facebook, les emojis, les avatars, etc.) Quels sont les exemples ? Comment et que disent ces images ? Y a-t-il quelque chose que vous voulez communiquer mais pour lequel aucune image n’existe encore ? Qu’est-ce que cela pourrait être ? Quel type de communication aimeriez-vous voir plus ou moins en ligne ?

• Expliquez les contraintes de l’activité : comme nous n’avons pas toute la journée, nous utiliserons probablement un bitmap plus petit pour créer une image de basse résolution, quelque chose sans beaucoup de pixels. Voici un exemple familier :

• Pour préparer, vous pouvez attribuer différentes tailles de bitmap à différents groupes ou inviter les groupes à choisir la taille — veulent-ils travailler avec une grille de 5x5 ? Une grille de 10x10 ? Une grille de 25x25 ?

Astuce ! Demandez aux utilisateurs de réfléchir au nombre de pixels nécessaires pour créer une image lisible. Vous pouvez aussi leur demander de faire un peu de mathématiques — de combien de pixels auront-ils besoin pour chaque option ?

• Répartissez les participants en petits groupes (c’est-à-dire 3 ou 4).

• Encouragez les participants, en groupe, à réfléchir à ce qu’ils aimeraient communiquer avec leur image (et, si c’est une option, à la taille de grille sur laquelle ils travaillent).

• Encouragez le « oui » et le brainstorming — accueillez beaucoup d’idées, ne soyez pas trop prompts à écarter.*

• Invitez-les à planifier l’idée sur un tableau blanc, un paperboard ou du papier brouillon.

Astuce ! Le papier quadrillé de cahier peut bien fonctionner ici.

• Demandez aux participants d’utiliser du ruban adhésif pour disposer la grille de pixels.

• Distribuez une grande pile de notes autocollantes multicolores ou de carrés de papier multicolore découpés à chaque groupe. Si vous le souhaitez, vous pouvez leur offrir la possibilité de les réduire à des tailles de pixels plus petites.

• Donnez aux groupes environ 10 minutes pour construire l’œuvre à partir de leurs notes autocollantes ou de leur papier.

• Prenez des photos du produit fini de chaque groupe, au cas où une catastrophe surviendrait sur la table plus tard.

• Obtenez l’attention de tout le groupe et faites en sorte que chacun voie chaque création, pendant que le groupe parle de ce qu’il a fait, de ce qu’il veut communiquer, de son processus et de toute autre idée.

• Pour terminer, interrogez les participants sur le processus :

• Quelle sensation cela a-t-il fait de construire de l’art avec des blocs de couleur au lieu de dessiner ou de peindre sur une page blanche ou une toile en partant de zéro ?

• Quels ont été les défis ?

• Avez-vous été surpris de tout ce que l’on peut communiquer avec des pixels ?

• Comment la résolution est-elle entrée en jeu ? Comment le facteur couleur est-il intervenu ?

En ligne : Pixel Art Numérique

[15-20 min]

• Expliquez aux participants qu’ils utiliseront un outil web pour créer leurs propres versions numériques du pixel art analogique qu’ils viennent de créer. On peut utiliser la technologie pour dessiner et peindre, et pas seulement utiliser sa caméra pour enregistrer.

• Dirigez-les vers https://make8bitart.com/

• Facultatif : discutez du concept de « 8 bits ».

• Montrez comment utiliser le sélecteur de couleurs, comment dessiner sur la toile et comment effacer les pixels dont ils ne veulent pas.

• Montrez comment le choix de la taille du pinceau peut les aider à remplir rapidement de plus grandes zones.

• Montrez comment enregistrer en png. Si les participants sont novices en informatique, sachez qu’ils pourraient avoir besoin d’instructions pas à pas.

• Facultatif : expliquez que le format png permet des pixels transparents, ce qu’un .jpg, un format plus ancien, ne fait pas. Les pixels transparents sont utiles pour un sticker, car il n’y a pas d’arrière-plan dans l’image : elle semble avoir été découpée et placée où vous voulez, comme un sticker de la vraie vie (IRL - In Real Life).

• Donnez aux utilisateurs 5 minutes pour reproduire leurs stickers analogiques — cela ne devrait pas prendre longtemps, puisque les stickers ont déjà été conçus !

• Invitez-les à publier les stickers sur les réseaux sociaux, à les envoyer par e-mail ou à les ajouter à leurs propres sites web.

• S’il y a de l’intérêt, laissez les utilisateurs jouer avec le logiciel et créer de nouveaux stickers.

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?

Crowdsourcing sur le Web

Compétences : Contribuer, Partager, Évaluer, Connecter, Pratique Ouverte, Collaboration, Communication, Résolution de problèmes

Description

Dans cette activité, les participants exploreront comment de nombreux individus peuvent travailler ensemble sur un même projet d’apprentissage ou de découverte, en utilisant le web comme outil de collaboration. Les participants discuteront brièvement de la façon dont le web et d’autres outils numériques ont augmenté la quantité d’informations en ligne, ainsi que les ressources humaines potentielles. Ils exploreront aussi la notion de crowdsourcing et aideront à une étude de recherche en utilisant la plateforme de science citoyenne Zooniverse (ou une autre plateforme — au choix de la personne facilitatrice).

Objectifs d’apprentissage

• Expliquer le terme « crowdsourcing » et comment il contribue à l’information en ligne.

• Collaborer en ligne pour contribuer avec des informations.

Temps nécessaire

45 minutes à 1 heure selon la taille du groupe

Public cible

Peut être adapté à des publics de 13 ans et plus ; avec des niveaux variés d’expérience du web.

Matériel

• Ordinateur portable avec connexion internet.

• Un ordinateur/projecteur configuré pour la démonstration.

• Deux jeux d’environ 50 à 60 images similaires, chacune imprimée sur une carte individuelle (vous pouvez imprimer une grille d’images et les découper). Il peut s’agir de paysages, de photos de personnes, de photos d’animaux ou d’insectes.

Compétences de littératie web

• Contribuer

• Partager

• Évaluer

• Connecter

• Pratique Ouverte

Compétences du XXIe siècle

• Collaboration

• Communication

• Résolution de problèmes

Introduction

[10 min]

• Demandez aux participants : Comment collectons-nous et stockons-nous l’information à l’ère numérique en utilisant le web ? En quoi est-ce différent de ce qui se faisait par le passé ? Par exemple, demandez :

• Qui a déjà utilisé un appareil photo argentique ? Quelle est la différence entre un appareil argentique et un appareil numérique ? (Les appareils numériques vous permettent de prendre et de stocker beaucoup de photos, probablement bien plus qu’avec un appareil argentique.)

• D’autres exemples peuvent être : e-mails vs lettres, tweets ou publications Facebook vs conversations par téléphone ou en personne.

• Parallèlement à la croissance rapide et expansive du web et de l’informatique, nous disposons aussi de nouveaux outils et systèmes numériques (comme les appareils photo numériques et les télescopes, comme les capteurs qui suivent la météo) pour collecter de plus en plus de données sur notre environnement, sur nous.

• Expliquez qu’une grande partie de ces informations est ajoutée ou téléversée sur le web — parfois automatiquement (e-mail en ligne, tweets), parfois par l’auteur ou le propriétaire, où elles sont stockées sur les serveurs et peuvent être consultées/accessibles par toute personne disposant des autorisations.

• Résumez : beaucoup plus d’informations sont faciles à produire et à capturer numériquement. Nous avons plus d’appareils en réseau pour collecter et créer de l’information, et nous pouvons automatiser la collecte et le stockage de tous ces fichiers numériques.

• Demandez aux participants : quels autres types de ressources se trouvent sur le web, en dehors de l’information ? Vous êtes-vous déjà considéré comme une ressource en réseau ? Que pouvez-vous offrir aux autres personnes sur le web ?

Astuce ! Si les participants ont du mal à trouver ce qu’ils offrent, voici quelques façons générales dont les gens peuvent contribuer :

Enseignez quelque chose (le site instructables, les tutoriels YouTube). Aidez à évaluer quelque chose ; donnez votre opinion, commentaire ou avis sur quelque chose (projets de science citoyenne, commentaires plus larges comme des avis). Partagez une idée, une expérience ou une perception (blog, forum communautaire de hobbies, questions médicales, etc). Créez votre propre nouveau contenu (YouTube, SoundCloud). Prêtez la puissance de calcul de votre ordinateur pour aider à faire quelque chose quand vous ne l’utilisez pas (calcul distribué bénévole).

• Il existe une énorme communauté d’utilisateurs du web, des personnes d’origines et d’âges différents, vivant dans des endroits différents partout dans le monde, qui possèdent des compétences, des perceptions ou du temps qu’elles peuvent être disposées à partager. Il y a des milliards d’utilisateurs du web et beaucoup de potentiel.

• Jusqu’au web, il n’y avait pas de moyen facile d’accéder à cette ressource humaine collective, de réunir des personnes pour partager des compétences ou travailler ou apprendre ensemble.

• Aujourd’hui, nous allons examiner quelques façons de collaborer et de travailler avec de nombreuses autres personnes sur le web et d’aider face aux défis et aux possibilités de toute cette information numérique. Mais commençons par une expérience hors ligne pour nous échauffer !

Hors ligne : Crowdsourcing Analogique

[15-20 min]

• Pour cette activité, vous aurez besoin de deux jeux d’environ 50 à 60 images similaires, chacune imprimée sur une carte individuelle (vous pouvez imprimer une grille d’images et les découper). Il peut s’agir de paysages, de photos de personnes, de photos d’animaux ou d’insectes. Les images doivent toutes être similaires, mais avec quelques différences. Voici un exemple :

• Sélectionnez un volontaire ou un duo de volontaires pour être partenaires ou travailleur individuel (pas plus de 2 ici). Fournissez à ce participant ou à ces participants un jeu de cartes.

• Le reste des participants — ils doivent constituer la majorité des personnes de votre session — est votre foule. Répartissez le second jeu d’images à parts égales entre tous ces participants — chacun doit en recevoir 3 ou 4.

• Posez une question sur le jeu d’images — dans l’exemple de la coccinelle, demandez combien de taches il y a sur chacune. Demandez aux travailleurs individuels et aux travailleurs du groupe de faire la tâche et de rassembler leurs données. Donnez à chaque groupe une feuille pour noter les résultats. Demandez aux participants de mettre de côté les images qu’ils ne peuvent pas interpréter.

Astuce ! Les réponses peuvent ne pas être simples pour toutes les images — il peut n’y avoir aucune tache, on peut en voir certaines mais pas toutes sur un insecte en particulier, ou l’identification peut être impossible.

• Le groupe le plus grand terminera probablement la tâche en premier ! Quel que soit le groupe qui termine en premier, demandez-lui d’évaluer ensemble la pile « impossible » — pouvons-nous prendre une décision ensemble — ce doit être un processus de révision rapide.

• Quand l’un des groupes a terminé et évalué toutes les images, arrêtez l’activité pour tous les groupes.

• Demandez aux participants :

• Qu’est-ce que ça fait de réaliser cette tâche ?

• Pourquoi cela a-t-il été plus rapide pour un groupe par rapport aux autres ?

• De quelles compétences particulières avaient-ils besoin pour cette tâche ?

• Quels ont été les défis de chaque groupe ?

• Quelles perceptions le groupe le plus grand avait-il sur les photos « impossibles à identifier » — les autres ont-ils vu ou su quelque chose que la première personne qui a regardé l’image ne savait pas ?

• Expliquez que le groupe le plus grand vient de réaliser une activité de « crowdsourcing » — chacun a fait une petite tâche — évaluer un peu de données — qui a contribué à une tâche plus grande — comprendre toute notre collection de photos. Ce projet a été réalisé plus rapidement par le grand groupe que par la personne seule ou le duo.

• Il existe des tâches plus vastes, en particulier dans le domaine de la recherche scientifique, qui peuvent utiliser la puissance du crowdsourcing en ligne à grande échelle pour évaluer énormément de données, du type de celles collectées à grande échelle, exactement comme nous en avons discuté au début de la session.

• Informez les participants qu’ensuite, ils utiliseront le web pour voir comment ils peuvent participer à de la vraie recherche scientifique en ligne — ils deviendront des scientifiques citoyens ou des chercheurs, dans le cadre d’un effort pour encourager plus de personnes à participer et à faire partie de la découverte scientifique.

En ligne : Zooniverse

[25-30 min]

• Pour cette activité, les participants prendront part à une recherche scientifique en crowdsourcing en utilisant Zooniverse (ou une autre plateforme, selon le choix de la personne facilitatrice). Selon le temps disponible, il y a deux options ici :

• La personne facilitatrice sélectionne un projet à l’avance et guide pas à pas les utilisateurs sur la façon de participer (voir l’exemple ci-dessous) OU

• Les utilisateurs explorent la collection de projets sur Zooniverse et en sélectionnent un (ou plusieurs) qu’ils trouvent le plus intéressant.

• Notez que les utilisateurs n’ont pas besoin de se connecter pour utiliser Zooniverse, même s’ils peuvent le faire s’ils veulent créer un compte.

• Expliquez que Zooniverse est une plateforme en ligne où des chercheurs de tous types peuvent héberger leurs données, pour que les participants puissent les aider.

• Vous n’avez pas besoin de compétences particulières pour aider, juste d’intérêt. Les types de choses que vous pouvez faire pour chaque projet sont différents. Par exemple :

• Vous pouvez regarder une image et marquer un élément ou compter le nombre d’éléments présents. Vous pouvez répondre à des questions sur l’image et évaluer une image selon certaines qualités.

• Vous pouvez transcrire des informations de l’image en format analogique.

• Note in this section about checking and verifiying– that more than one person screens each image or piece of data.

• Démonstration du projet

Astuce ! La personne facilitatrice doit le faire et, si possible, projeter son écran pour que tous les participants puissent voir.

• Accédez à Zooniverse — https://www.zooniverse.org

• Allez sur la page du projet :

• Expliquez aux participants que Zooniverse est une plateforme qui héberge de nombreuses données de recherche que des participants comme vous peuvent aider à classer ou à évaluer, en contribuant à la recherche du monde réel !

• Sélectionnez un projet parmi les options de la page et cliquez pour être conduit à la page du projet. Par exemple, voici la page d’accueil d’un projet appelé Expédition Éléphant.

• Comme tous les projets sont sur la plateforme Zooniverse, l’interface est similaire pour chaque projet.

• Il existe un tutoriel pop-up en plusieurs étapes. Utilisez la touche fléchée pour explorer les étapes.

• Et il y a un espace pour faire le travail de classification.

• Montrez aux participants comment vous pouvez accomplir une seule tâche d’évaluation.

• Soulignez qu’ils peuvent explorer les conversations de la communauté dans « TALK » et en apprendre davantage sur le projet dans « ABOUT ».

• Faites l’activité ! Donnez aux participants 15 à 20 minutes pour contribuer à un ou plusieurs projets sur Zooniverse.

Réflexion et clôture

[5-10 min]

• Posez aux participants quelques questions sur leur expérience et encouragez une discussion. Exemples de questions ci-dessous :

• Qu’est-ce que ça a fait de réaliser cette tâche ? Qu’est-ce qui a été surprenant ? Qu’est-ce qui a été un défi ?

• Avez-vous eu des questions sur la tâche ?

• Pourquoi les chercheurs ont-ils besoin d’une aide comme celle-ci ?

• Pourquoi certaines tâches conviennent-elles mieux aux humains ? Pensez-vous qu’un ordinateur pourrait faire ce travail ?

• Combien d’images/fichiers/vidéos votre projet comptait-il ?

• Combien d’autres personnes ont contribué ?

• Que ressentez-vous à propos de votre contribution ?

Réflexion sur l’expérience d’apprentissage

[5 min]

• Qu’avez-vous aimé dans cette activité ?

• Si vous pouviez enseigner cette activité à un public spécifique, que changeriez-vous dans le processus, la structure ou le contenu pour mieux répondre aux besoins de ce public ?