Connecter le réseau

Objectif de l’atelier

Créer son premier site Web et s’initier au HTML

Compétences / Savoirs

- Être capable de créer un site Web simple avec des images et des liens
- Connaître quelques balises HTML
- Comprendre l’importance des liens hypertextes

Durée de l’atelier

2h

Tranche d’âge recommandée

12-14 ans

Nombre d’enfants

10 enfants en atelier périscolaire le mercredi après-midi

Matériel nécessaire

- 10 ordinateurs si possible, sinon 5 ordinateurs avec les enfants en binôme
- 1 connexion Internet pour chaque ordinateur
- 1 vidéo-projecteur
- Projet exemple sur Thimble “site dont vous êtes le héros”

Durée

Séquence

5 min

Introduction (règles, consignes…)

- Installer les enfants de manière à ce qu’ils soient en situation d’écoute et d’échange (pas devant les ordinateurs allumés).
- Introduire la séance : « Savez-vous ce qu’est le web ? Pourquoi appelle-t-on ça le web ? Pourquoi appelle-t-on ça une toile et quel rapport avec les araignées ? ».
- Laisser les enfants échanger entre eux, en relançant avec des questions si besoin, mais sans nécessairement trancher avec des réponses précises.
- Expliquer qu’ils vont devoir créer un site Web… en 2 heures !

20 min

Activité 1 : Découverte de Thimble et création de comptes

- Demander aux enfants de s’installer sur les ordinateurs, d’aller sur Thimble et de créer un compte. Les accompagner dans les étapes de création du compte si nécessaire.
- Explorer l’interface d’édition avec eux : à quoi servent les différentes parties ? Leur faire modifier quelques éléments et voir les changements dans l’aperçu en temps réel.
- Expliquer rapidement le fonctionnement du HTML (“quand on ouvre une balise, il faut la refermer”) et montrer le système d’auto-complétion de Thimble.

20 min

Activité 2 : Mettre des images, faire des liens

- Montrer comment mettre des images sur une page Web. Les laisser tester.
- Montrer comment faire un lien hypertexte. Les laisser tester.
- Poser un défi : mettre une image cliquable qui renvoie vers un site particulier (ou une page interne au site).

60 min

 Activité 3 : Le site dont vous êtes le héros

- Demander à présent d’ouvrir un nouveau projet, et expliquer que l’objectif, pour l’heure qui suit, est de créer un “site dont vous êtes le héros”.
- Montrer un exemple déjà fait.
- Laisser les enfants créer librement leur site. Leur montrer, si besoin, quelques balises supplémentaires au fur et à mesure (<audio>, <br />, <hr />, ... ).
- Si les enfants avancent très vite, les inciter à chercher sur Internet d’autres balises HTML qui pourront être utiles, voire quelques lignes simples de CSS pour ajouter de la couleur par exemple. Sinon, leur faire publier leurs sites, et imposer un nouveau défi : les sites de chacun doivent renvoyer de manière cohérente vers les sites des autres par le biais de liens hypertextes.

Support : Projet exemple “site dont vous êtes le héros”

15 min

Conclusion (récapituler, partager, ouvrir…)

- « La séance est passée très vite ! » : prendre quand même le temps de publier les projets, de les projeter (ou de les montrer) et de les commenter (de manière bienveillante !).
- Permettre aux enfants d’exprimer ce qu’ils ont pensé de l’atelier, de poser des questions, etc.
- Leur expliquer ce qu’ils vont faire pendant la séance suivante, le cas échéant :)

Points positifs

Points négatifs

Remarques

Objectif de l’atelier

Faire communiquer des machines entre elles par le biais de ScratchX

Compétences / Savoirs

- Comprendre ce qu’est un protocole de communication
Savoir utiliser ScratchX/Mesh pour envoyer et recevoir des messages d’autres ordinateurs
- Savoir créer un protocole de communication avec ScratchX/Mesh
- Être capable de travailler de manière collaborative

Durée de l’atelier

1h30

Tranche d’âge recommandée

9-10 ans

Nombre d’enfants / prérequis

15 enfants qui connaissent déjà un peu Scratch

Matériel nécessaire

Au moins 8 ordinateurs connectés à internet

Durée

Séquence

15 min

Introduction (règles, consignes…)

- Installer les enfants de manière à ce qu’ils soient en situation d’écoute et d’échange (pas devant les ordinateurs allumés).
- Introduire la séance : « Vous ne le savez sans doute pas, mais pour communiquer, les machines ont besoin d’un protocole : est-ce que quelqu’un sait ce qu’est un protocole ? Par exemple un protocole diplomatique ? ».
- Laisser les enfants échanger entre eux, en relançant avec des questions si besoin, mais sans nécessairement trancher avec des réponses précises.
- Expliquer qu’un protocole, c’est comme des règles de politesse : on n’aborde pas une personne sans lui avoir dit “bonjour” avant. Si on lui demande une faveur, on doit terminer par “s’il-vous-plaît” et “merci”. Quand on la quitte, il faut dire “au revoir”.

60 min

Activité 1 : Faire communiquer des machines avec ScratchX

- Expliquer qu’il va falloir inventer ces “règles de politesse” avec ScratchX et Mesh. Faire une démonstration avec deux ordinateurs : l’un envoie “bonjour”, et lorsque l’autre reçoit “bonjour”, il effectue une action (jouer un son, faire bouger un personnage…)
- Laisser les enfants expérimenter et se mettre d’accord sur des protocoles pour faire interagir leurs machines.
- Une fois que tout le monde a bien compris le fonctionnement de Mesh, proposer de faire une “réaction en chaîne” : un programme est lancé (en appuyant sur une touche ou sur le drapeau vert par exemple), et sans intervention humaine, il faut que chacun des autres ordinateurs effectue une action (simultanée ou non). Il est donc nécessaire que tous les enfants décident ensemble du résultat final.
- Si les enfants sont allés très vite, leur proposer un défi plus difficile, comme faire en sorte qu’un des ordinateurs soit le chef d’orchestre, et que les autres ne puissent jouer que s’ils reçoivent le bon signal. Sinon, leur proposer d’explorer les autres extensions de ScratchX pour les intégrer dans le programme collectif.

15 min

Conclusion (récapituler, partager, ouvrir…)

- Faire une démonstration pour l’ensemble du groupe, et pour voir si ça fonctionne…
- Permettre aux enfants d’exprimer ce qu’ils ont pensé de l’atelier, de poser des questions, etc.
- Leur expliquer ce qu’ils vont faire pendant la séance suivante, le cas échéant :)

Points positifs

Points négatifs

Remarques