Objectif

L’objectif de ces flashcards est d’accompagner les étudiants de la prochaine volée dans le cadre du cours STIC du MALTT. Chaque flashcard est conçue sous la forme d’un mini-tutoriel explicatif, présentant notamment la manière d’ajouter un bouton permettant de déclencher de la musique en HTML5. Le public cible est donc constitué des étudiants de la prochaine volée souhaitant intégrer cette fonctionnalité lors de la création de leur page personnelle dans le cadre de l’exercice 1 du cours STIC. Mes flashcards visent une compétence précise qui est la lecture du code. Souvent, les gens copient-collent le code de quelqu'un d'autre ; mes flashcards expliquent chaque élément dans les balises afin que les étudiants sachent ce que font ces éléments.

Design

Mon dispositif permet de résoudre la problématique de l’implémentation d’un bouton déclenchant une musique en HTML5, en structurant l’information de manière progressive. La première carte présente la problématique sous la forme d’une question générale et fournit, au verso, uniquement le code correspondant à l’implémentation, sans explication détaillée. Cela permet à l’étudiant de visualiser directement le résultat, tout en soulignant qu’il est possible de copier-coller le code sans nécessairement comprendre son fonctionnement.

La deuxième carte a une finalité pédagogique : elle présente la première étape de l’implémentation, à savoir l’intégration de la musique. Lorsque l’étudiant retourne cette carte, il obtient une explication détaillée de chaque élément de la balise et de sa fonction. La troisième carte suit le même principe pour les étapes suivantes. Cette progression encourage les étudiants à comprendre les actions qu’ils réalisent et le rôle de chaque élément, plutôt que de se contenter de reproduire le code.

Par ailleurs, le dispositif peut être utilisé dans le cadre d’une activité pratique. Les étudiants peuvent implémenter un bouton déclenchant une musique en suivant exactement les étapes présentées dans les cartes. Un petit questionnaire à choix multiples (QCM) peut ensuite être proposé pour évaluer leur compréhension de l’ordre d’exécution et de la signification des éléments des balises, consolidant ainsi les connaissances acquises.

Production

Concernant la partie de production, j'ai pris une image SVG (sans copyright) du site Freepik et j'ai modifié les couleurs et ajouté du texte à l'intérieur. L'image originale est celle qui est dans les cartes par défaut, mais sans écriture.

Auto-évaluation

Je suis particulièrement satisfait du rendu visuel de mes cartes. La dimension créative me tient à cœur.

En général, j'ai trouvé cet exercice plus simple que l’exercice 1 au niveau de la partie HTML, car je maîtrisais déjà les compétences demandées. Au début, lorsque j'ai lu les consignes, j'ai été un peu inquiet, craignant que la tâche soit complexe. Cependant, j'ai rapidement compris que les images devaient être externes et qu'il fallait utiliser des unités relatives au viewport. Cela m'a rappelé ce que j'avais déjà mis en pratique dans l'exercice 1 pour rendre mon site responsive, en évitant les valeurs en pixels. J'ai également utilisé @media afin d'adapter la page aux différentes tailles d'écran. La partie CSS dans les exercices 1 et 2 était la partie la plus difficile, car je voulais un rendu qui me plaisait et c'était très long. À chaque étape que je faisais, un nouveau problème apparaissait. Par exemple, pour les flashcards, je voulais une rotation en 3D pour mes cartes, mais il ne suffisait pas de faire seulement transform: rotateY(180deg); car de nouveaux problèmes apparaissaient, comme le fait que les cartes se séparaient et n'étaient pas superposées. Il fallait donc mettre inner-card en relative pour qu'il devienne la référence pour les cartes face et back, et ces deux cartes devaient être en absolute pour qu'elles soient superposées l'une sur l'autre. Le problème ne s'arrêtait pas là, car la rotation 3D doit se faire autour du centre de inner-card. Cependant, quand j'appuyais sur le bouton pour faire la rotation, j'avais le contenu des deux cartes en même temps. J'ai donc dû chercher comment cacher l'arrière d'une carte avec backface-visibility: hidden;. Quand je croyais que tous les problèmes étaient finis, un nouveau apparaissait : maintenant, lorsque j'appuyais sur le bouton, la carte se déclenchait à cause du comportement par défaut du bouton. J'ai donc dû chercher la solution et j'ai cru que le problème était dans le CSS, alors qu'il était dans le JavaScript, où il fallait ajouter : icon.addEventListener('click', e => { e.preventDefault(); // Empêche le comportement par défaut e.stopPropagation(); // Empêche que le clic se propage aux parents }); Sans ces deux changements, mes cartes changeaient de position et effectuaient une rotation collective. En ce qui concerne l'interactivité des cartes et des autres éléments de la page, je possédais déjà une expérience avec le format « box », en jouant sur les propriétés box-shadow, padding et margin. Toutefois, appliquer ces principes aux flashcards avec JavaScript constituait une nouveauté pour moi, que j'ai beaucoup appréciée,mais cela n'était pas facile car j'ai du utiliser des nouveaux éléments dans le css comme parexemple transform: rotateY(180deg);ou encore backface-visibility: hidden; comme cité auparavant. Par ailleurs, j'ai appris, grâce à la vidéo tutoriel que vous avez mise à disposition, qu'il est possible de réaliser l'intégralité du projet directement dans le fichier HTML, sans créer de fichier CSS séparé. J'étais également déjà à l'aise avec les balises div, donc je n'ai pas eu beaucoup de difficulté. La difficulté était plutôt dans la version mobile qui ne s'adaptait pas bien. J'ai passé beaucoup d'heures pour pouvoir l'adapter et je n'ai pas encore le résultat que je souhaite. Grâce à cette initiation à JavaScript, j'ai pu également apprendre de mon côté des fonctionnalités intéressantes, et donc j'ai ajouté du JavaScript dans ma page portfolio.

Je réfléchis à faire beaucoup de flashcards pour la prochaine volée et les placer quelque part dans mon portfolio dans une section tutoriels.

Bibliographie et sources

J’ai utilisé ChatGPT afin de convertir les pixels en valeurs souples comme les em, vh, etc., et pour réorganiser mon code. Je l’ai également utilisé pour obtenir des astuces et des suggestions en JavaScript, mais je n’ai pas vraiment suivi ses recommandations, car il était parfois difficile de comprendre sa démarche et des fois son aide n'est pas cohérante et appliquable. Il m’a aussi aidé pour l’adaptation de ma page sur la version mobile en repérant les erreurs que j’avais commises. Par exemple, j’avais adapté ma page pour mobile, mais mes boîtes ne s’ajustaient pas correctement. ChatGPT m’a alors expliqué que c’était à cause de l’utilisation de la position fixed (ce sont des astuces simples, mais parfois, avec la fatigue, on peut passer à côté). Quelques jours après avoir terminé les flashcards, j'ai voulu expliquer à quelqu'un comment j'avais créé les cartes rotatives et interactives simultanément. J'ai eu du mal à lui expliquer, car je n'avais pas commenté mon code, et certaines lignes me semblaient désormais incompréhensibles, ayant été ajoutées après le visionnage de vidéos YouTube. J'ai donc demandé à ChatGPT de me fournir une version commentée de mon code, sans en modifier le contenu.

Les backgrounds animés et les musiques sont tirés de ce site, sans copyright.

Tous les icônes proviennent de ce site, également sans copyright.

Formation suivie pour apprendre à créer mes pages, complétée par d’autres tutoriels plus courts sur YouTube. Je précise que ce même YouTubeur a fait une formation complète pour JavaScript et j'ai regardé pas mal d'heures, mais je ne l'ai pas terminée complètement.

Les images SVG sont tirées de ce site avec l'autorisation de les utiliser.