Vidéo explicative:
Mes premiers pas avec ScratchJr

1. Liens

• Vidéo explicative: Mes premiers pas avec ScratchJr
• Moyen d'enseignement, Décodage Cycle 1 Scénario 4 · SI · 3e-4e · Programmer avec ScratchJr

2. Objectifs

Ce dispositif vise à permettre aux élèves du cycle 1 (3-4H) de découvrir progressivement l'environnement de ScratchJr. Grâce à une vidéo guidée et segmentée, les élèves peuvent entrer de manière autonome dans ce programme de programmation visuelle. Ils apprennent à identifier les différentes zones de l'interface, ainsi qu'à comprendre et utiliser les principales fonctions disponibles: déplacements, changement de décor, ajout de personnages et blocs de parole. Ce support permet ainsi une première initiation à la programmation en suivant un rythme individuel en manipulant les éléments essentiels de ScratchJr de façon simple et intuitive.

3. Design

Design du dispositif et choix pédagogiques:
La vidéo a été conçue pour permettre aux élèves du cycle 1 (3-4H) de découvrir ScratchJr de manière progressive, ludique et autonome. Le choix d'une approche guidée, segmentée et visuellement très simple vise à faciliter l'appropriation de l'outil sans surcharge cognitive, tout en respectant les capacités attentionnelles des jeunes élèves.
Le design général suit une logique de pas à pas, avec une progression linéaire:

1. Découverte de l'interface
2. Déplacements du personnage
3. Changement de décor
4. Ajout d'un nouveau personnage
5. Blocs de parole
6. Mini-défi final

Cette progression évite de présenter trop d'informations simultanément et permet aux élèves de comprendre chaque fonctionnalité avant de passer à la suivante. Afin de maintenir l'attention et de renforcer la motivation, un personnage animé de style kawaii sert de mascotte et introduit la vidéo de manière chaleureuse et engageante. Ce choix renforce l'identification et donne une tonalité ludique adaptée aux jeunes enfants. Sur le plan du design multimédia: La vidéo respecte plusieurs principes de l'apprentissage multimédia de Mayer (cohérence, segmentation, signalisation, personnalisation ,non-redondance). Les recommandations de Jamet et Maier viennent compléter cette approche en insistant sur la gestion de la charge cognitive, notamment l'évitement de la redondance texte/voix. Dans ce dispositif, les sous-titres jouent un rôle essentiel: ils ne répètent pas la narration orale, mais apportent des informations concises qui rendent explicites certains éléments implicites de l'écran (ex. nom du bloc, couleur, action attendue). Ils permettent ainsi d'orienter l'attention des élèves débutants vers les éléments pertinents, de soutenir la compréhension de l'interface et d'éviter la surcharge cognitive. Les mots-clés servent de repères visuels stables alors que les gestes à l'écran sont temporaires.

• Principe de non-redondance: la narration orale n'est pas répétée sous forme de texte dans les sous-titres. Ces derniers contiennent uniquement des mots-clés (ex: blocs bleus, avancer, décor), évitant ainsi la surcharge liée à la double modalité texte/voix.
• Principe de signalisation: les mots-clés sous-titrés et les mouvements lents du curseur attirent l'attention de l'élève sur les éléments importants de l'interface. Le choix d'utiliser uniquement des mots-clés dans les sous-titres répond également aux besoins spécifiques du public cible (élèves de 3-4H). A cet âge, la lecture est encore en développement: des textes courts et isolés sont plus accessibles, évitent la surcharge cognitive et permettent aux élèves de se concentrer sur l'action à l'écran plutôt que sur la lecture en continu.
• Principe de segmentation: la vidéo est découpée en petites séquences cohérentes afin que l'élève construise progressivement sa compréhension.
• Principe de cohérence: seuls les éléments nécessaires à la tâche d'apprentissage sont présentés. Aucun élément décoratif ou distrayant n'est ajouté.
• Principe de personnalisation: la voix off adopte un ton simple et proche des enfants pour favoriser l'engagement.

L'ensemble de ces choix de design vise à offrir une expérience d'apprentissage multimédia adaptée aux élèves débutant la programmation, tout en soutenant leur autonomie dans la découverte de ScratchJr. Sous la vidéo, plusieurs boutons permettent à l’élève de naviguer directement vers des moments clés (déplacements, décor, texte, ajout de personnage, disparition). Cette navigation par “chapitres” soutient l’autonomie, permet de revoir une partie spécifique en cas de besoin et s’inscrit dans une logique de segmentation (Mayer), en donnant à l’apprenant un contrôle partiel sur le rythme de son apprentissage.

Valeur ajoutée de la vidéo dans le dispositif

La vidéo apporte une valeur ajoutée essentielle au dispositif. En montrant les manipulations directement à l'écran, elle permet aux élèves de visualiser concrètement les actions à effectuer dans ScratchJr: cliquer, glisser, changer de décor, ajouter un personnage, etc. Cette démonstration dynamique est particulièrement adaptée aux élèves de 3-4H, encore en début d'apprentissage de la lecture, pour qui une explication textuelle serait difficilement accessible.
La vidéo soutient ainsi l'autonomie: l'élève peut suivre tranquillement le rythme, observer les gestes, imiter, mettre sur pause et revoir une partie si nécessaire. Elle rend l'entrée dans ScratchJr plus intuitive, plus sécurisante et plus engageante qu'un support statique.

Intérêt des éléments interactifs comparé à une vidéo normale

Les éléments interactifs transforment la vidéo en véritable dispositif pédagogique actif. Les boutons permettent à l'élève de naviguer directement vers une partie précise (déplacements, décor, texte, nouveau personnage...), ce qui favorise l'autonomie et permet de revoir une notion sans devoir chercher dans toute la vidéo. Ce contrôle du rythme s'inscrit dans les principes de segmentation et de gestion de la charge cognitive (Mayer). L'évènement automatique (pause + question) introduit un moment de réflexion guidée. Il attire l'attention sur un point clé, oblige l'élève à traiter l'information avant de continuer et renforce la compréhension, contrairement à une vidéo classique qui reste passive. Ces ajouts contribuent donc à une meilleure focalisation, une navigation plus efficace, un apprentissage actif et une meilleure mémorisation.

4. Production

La production de ce dispositif a mobilisé différentes technologies afin de créer une vidéo pédagogique interactive intégrée dans une page web. L'ensemble repose sur des outils simples, accessibles et adaptés à un contexte scolaire.
Technologies utilisées:

• HTML5 : structure de la page web, intégration de la vidéo et des sous-titres VTT.
• CSS : mise en page, choix typographies, marges, alignements, mise en valeur des zones interactives.
• JavaScript : création des deux éléments interactifs exigés dans le cadre de l'exercice (bouton menant à un moment précis de la vidéo et événement automatique déclenché à un instant donné).
• QuickTime Player (macOS): enregistrement de l'écran pour capturer les démonstrations dans ScratchJr.
• Canva : montage vidéo, ajout de l'introduction animée, transitions, titres et export en un seul fichier vidéo.
• Adobe Express - Animate from Audio : création du personnage animé (chat style kawaii) synchronisé à ma voix pour l'introduction.
• Fichier vidéo : format .webm selon compatibilité HTML5
• Fichier .vtt : pour les sous-titres (mots-clés, non-redondants avec la narration orale).
• Fichier index.html : structure générale du dispositif.
• Fichier style.css : mise en forme visuelle.
• Fichier script.js : gestion des interactions vidéo.

Méthodologie: La réalisation de ce dispositif a suivi une méthodologie en plusieurs étapes afin de respecter la logique pédagogique de l'apprentissage multimédia et de garantir une expérience adaptée aux élèves du cycle 1.

Analyse des besoins

• Déterminer les compétences visées: découverte de ScratchJr, compréhension de l'interface, utilisation de blocs de base.
• Identifier le public: élèves de 3-4H, lecteurs débutants, nécessité d'un contenu simple, illustré, avec narration courte.

Scénarisation pédagogique

• Découpage de la vidéo en séquences courtes (principe de segmentation - Mayer)
• Ordre logique: introduction, interface, déplacements, décor, texte, nouveau personnage, mini défi final.
• Création d'une mascotte (chat kawaii) pour renforcer l'engagement et l'identification.

Captation vidéo

• Enregistrement de l'écran via QuickTime Player.
• Réalisation d'une démonstration pas à pas dans ScratchJr
• Respect des principes de signalisation: mouvements de curseur lents, gestes simples.

Montage

• Assemblage de toutes les séquences dans Canva.
• Ajout d'une introduction animée crée avec Adobe Express.
• Insertion de transition douces, de zooms lents si nécessaire, sans éléments décoratifs inutiles (principes de cohérence - Mayer).

Conception des sous-titres

• Création d'un fichier .vtt contenant uniquement des mots-clés.
• Pas de doublon avec la narration, respect du principe de non-redondance (Mayer, Jamet & Maier).

Intégration web

• Création du fichier index.html avec vidéo et sous-titres.
• Stylisation avec style.css.
• Programmation des interactions: un bouton qui amène à un moment précis de la vidéo. Un évènement automatique déclenché par la vidéo (pause + questions).

Tests et validation

• Vérification du fonctionnement des sous-titres (attention aux limitations locales).
• Tests sur différents navigateurs.
• Ajustements de minutage dans le fichier VTT.
• Vérification de la fluidité pédagogique.

5. Auto-évaluation

La partie montage vidéo et capture de mon écran ne m'a pas posé de difficulté particulière: j'étais déjà à l'aise avec ces outils et j'ai pris beaucoup de plaisir à concevoir une vidéo destinée à mes élèves. Ce projet m'a permis de mettre en pratique la théorie de la redondance et des principes de design multimédia, en veillant à proposer un dispositif sobre, clair et réellement au service des objectifs pédagogiques, sans tomber dans le "too much".
Au fil de l'exercice, j'ai constaté que je gagnais en aisance dans la programmation HTML5: je vais plus vite, je commence à développer des réflexes et je comprends mieux la logique générale de la structure de la page. Je perçois également beaucoup mieux le rôle des fichiers JavaScript et la manière dont ils interagissent avec HTML5, notamment pour gérer les boutons et les évènements liés à la vidéo. Je me suis aussi nettement améliorée dans la gestion des chemins de fichiers, qui constituait un point de difficulté lors des exercices précédents.
Le CSS reste l'aspect avec lequel je me sens le moins sûre de moi, même si je progresse petit à petit. Le fait de travailler avec un deuxième écran m'a beaucoup aidée, en me permettant de voir en direct le rendu de mes modifications. Je suis très satisfaite du résultat final: mes élèves ont pu utiliser le dispositif de manière autonome et s'initier à ScratchJr sans appréhension. La vidéo et la page web ont également servi de support à mes collègues, qui ont pu découvrir le programme dans un contexte rassurant et guidé.

6. Bibliographie

EduTechWiki - STIC I - exercice 4
EduTechWiki - Vidéographie
Programme ScratchJr
AdobeExpress - Mise en voix d'un personnage
Convertisseur - Fichier webm

7. Ressources

La réalisation de ce dispositif s'est appuyée sur plusieurs ressources numériques complémentaires. L'illustration du chat "enseignant" en style kawaii a été générée avec l'aide de ChatGPT (OpenAI), puis ajustée par mes soins dans Canva afin de correspondre à l'univers graphique du projet. Les démonstrations en vidéo ont été réalisées directement dans l'application ScratchJr, dont j'ai filmé l'interface pour proposer une découverte authentique et fidèle de l'environnement. J'ai également utilisé Adobe Express - Animate from Audio pour créer un personnage animé synchronisé à ma voix, ce qui permet d'introduire la vidéo de manière chaleureuse et engageante pour les élèves du cycle 1. L'intelligence artificielle m'a également aidée à mieux comprendre les liens logiques entre les différents blocs de programmation de ScratchJr, ce qui m'a permis d'expliquer leurs effets de manière claire et cohérente dans ma narration. Enfin, les ressources théoriques d'EduTechWiki (TECFA, Université de Genève) m'ont servi de support pour approfondir l'interactivité en JavaScript, la compréhension du DOM et les principes pédagogiques liés à la conception de matériel multimédia.