Liens
Objectifs
L’objectif pédagogique de cette présentation est d’aider l’apprenant·e à comprendre ce qu’est une illusion d’optique, pourquoi elle existe, et comment elle peut être expliquée par différents mécanismes (lumière, interprétation du cerveau, fonctionnement de l’œil). La progression est guidée : une définition, une typologie, puis plusieurs exemples concrets.
La présentation a été pensée comme une expérience en autonomie : l’apprenant·e observe, se questionne, puis reçoit une explication. Par exemple, l’illusion de Müller-Lyer est présentée sous forme de question, suivie d’une diapositive de révélation. Un mini-quiz vient ensuite vérifier la compréhension, avec un feedback immédiat.
D’un point de vue technique, l’exercice m’a permis d’apprendre à créer une présentation HTML interactive avec Reveal.js, à structurer des slides de manière propre, et à intégrer une bibliothèque externe (Animate.css) ainsi qu’une animation déclenchée via JavaScript.
Design
J’ai conservé une identité visuelle minimaliste et cohérente avec le reste de mon portfolio : fond clair, typographie lisible, cartes blanches, ombres légères, bords arrondis et couleurs pastel. L’objectif est de rester sobre pour ne pas distraire l’apprenant·e et mettre en valeur les images d’illusions.
Chaque slide suit une logique de lecture simple : un titre clair, une image ou un élément visuel central, puis une explication courte. Les espacements ont été ajustés pour limiter la surcharge et garder les éléments bien centrés, afin que l’attention reste focalisée sur le contenu essentiel.
Les éléments de mise en page (cards, pills, textes pastel) servent à hiérarchiser l’information et à rendre la progression plus agréable, tout en restant cohérente entre les diapositives.
Production
J’ai commencé par définir le thème (les illusions d’optique) et la structure pédagogique : introduction, définition, typologie, exemples, quiz, conclusion et crédits/licence. Ensuite, j’ai intégré Reveal.js en local et créé la structure HTML avec une slide par section.
Pour les médias, j’ai sélectionné des images d’illusions adaptées (Müller-Lyer, grille d’Hermann) et construit une logique “question → explication”. J’ai également ajouté une illusion de mouvement sous forme d’un motif statique, afin de montrer comment la perception peut “créer” un mouvement à partir de contrastes.
Enfin, j’ai ajouté un mini-quiz interactif (boutons cliquables + feedback) avec JavaScript, et une animation sur une slide de transition déclenchée via animate.js en ajoutant dynamiquement des classes de la bibliothèque Animate.css lors de l’arrivée sur la slide.
Aspects techniques et contraintes de l’exercice
La présentation respecte les contraintes : elle contient moins de 20 slides, sert un objectif d’apprentissage, et utilise Reveal.js. J’ai également utilisé une feuille de style CSS dédiée pour le design et la mise en page.
Une bibliothèque externe a été ajoutée : Animate.css. Elle est chargée en local (sans CDN), dans le dossier vendor.
L’animation est déclenchée via JavaScript avec les événements de Reveal.js afin de synchroniser l’effet avec l’apparition d’une slide.
Le mini-quiz constitue un élément interactif computationnel : le script détecte le bouton cliqué, vérifie si la réponse est correcte, puis affiche un feedback adapté en modifiant le DOM (texte + classes CSS).
Auto-évaluation
Cet exercice m’a permis de mieux comprendre la logique de Reveal.js : structure en sections, navigation, organisation des slides, et intégration de scripts. J’ai aussi appris à ajuster une mise en page pour éviter les problèmes de proportions (images trop grandes, texte masqué) en utilisant des contraintes CSS (max-height, centrage, cartes).
La principale difficulté a été la gestion des balises HTML et de la structure : un simple <section> mal fermé peut faire
“déborder” du contenu sur toutes les slides. Cela m’a appris à vérifier la hiérarchie des éléments et à tester progressivement.
Je suis satisfaite du rendu final : la présentation est claire, cohérente, interactive et guidée. Si je devais l’améliorer, je pourrais ajouter une progression plus poussée (ex. plusieurs questions, niveaux ou exemples supplémentaires) et renforcer encore la rétroaction pédagogique (exemples d’application dans la vie quotidienne).
Third-party code
- Reveal.js — https://github.com/hakimel/reveal.js
- Animate.css — https://github.com/animate-css/animate.css
Les bibliothèques sont chargées localement (pas de CDN), conformément aux recommandations.
Licence
Cette présentation est partagée sous licence Creative Commons CC BY 4.0 (Attribution). La réutilisation et la modification sont autorisées à condition de citer l’autrice.
Référence : https://creativecommons.org/licenses/by/4.0/
Ressources
- Documentation Reveal.js (structure, options, événements) — via dépôt GitHub ci-dessus
- Documentation Animate.css (classes d’animation) — via dépôt GitHub ci-dessus
- Supports du cours / consignes STIC I (MALTT, UNIGE)
- Ressources visuelles : images d’illusions sélectionnées et intégrées dans le dossier
img - Intelligence artificielle : utilisée ponctuellement pour clarifier du code, corriger des erreurs de structure et améliorer la mise en page