Disclaimer

Ce rapport a été créée dans un objectif de mise en abyme, en utilisant les fonctionnalités de Reveal.js pour rendre l'information concise et impactante. Pour revenir à l'exercice 6, l'idée était de transformer un exercice initialement composé de 57 pages dans sa version initiale en une version concise, tout en préservant l'essentiel du contenu narratif du catch.

Malheureusement, une partie du contenu (environ 30 pages) n'a pas été prise en compte à la lecture des consignes, ce qui m'a conduit à tout recommencer. Ce processus m'a poussé à revoir l'organisation et la structure des informations afin de minimiser les redondances et d'assurer une meilleure clarté (objectif réussi selon des cobayes).

Cette présentation se veut non seulement pédagogique mais aussi un échantillon des possibilités de reveal.js en terme de concision, appliqué à un univers riche comme celui du catch.

Cette présentation a pour objectif principal d’enseigner l’univers du catch à travers une approche narrative, en mettant en lumière ses aspects éducatifs et divertissants.

• À quoi ça sert : Offrir un apprentissage via l'introduction à l’univers du catch et à ses récits, tout en expliquant les rôles des personnages et les dynamiques qui animent ce sport-spectacle.
• Public cible : Toute personne, quel que soit son âge ou son niveau de connaissance, intéressée par la narration et le divertissement sportif.

• Cadre d’utilisation : Cette présentation peut être utilisée en contexte éducatif ou pour des fans souhaitant approfondir leur compréhension de cet univers. Elle est également conçue pour être accessible en ligne. De plus, elle peut être réutilisé par d'autres personnes.
• Connaissances préalables : Aucun prérequis nécessaire. L’approche est pensée pour être intuitive et accessible à tous.
• Connaissances à acquérir : Comprendre les concepts clés du catch, tels que les rôles (face et heel), les rivalités, les storylines et les mécanismes narratifs. Identifier comment ces éléments créent une connexion émotionnelle avec le public.

• Inspiration : Cette présentation a été influencé par la passion de ma mère pour ce divertissement et aussi par l'interêt de certains proches de cet univers si unique.

Cette présentation a été pensée pour offrir une expérience fluide, accessible et engageante, tout en respectant les principes pédagogiques. Mon objectif était de structurer le contenu de manière logique, afin que l'apprentissage de l'univers du catch soit à la fois clair et captivant.

• Système de personnalisation : La présentation intègre des fonctionnalités interactives permettant d’ajuster la taille de la police et d’activer un mode dyslexique avec la police Shantell Sans. Ces options ont été conçues pour améliorer l’accessibilité et répondre aux besoins variés des utilisateurs (selon ce site.)

Je tiens profondément à l'inclusion et à la diversité, car elles représentent des valeurs fondamentales qui permettent à chacun de se sentir respecté, écouté et valorisé, quelles que soient ses différences. Promouvoir l'inclusion, c'est créer un environnement où chacun a sa place, où les barrières tombent, et où la richesse des perspectives contribue à bâtir un monde plus juste et solidaire.

Structure logique : La présentation suit une progression claire :

• Introduction aux personnages principaux, leurs rôles et gimmicks.
• Exploration des types de combats et des règles essentielles.
• Focus sur les storylines et leur rôle narratif.
• Présentation d’un glossaire des termes clés.
• "Analyse" des patterns narratifs comme David contre Goliath.

Cette structure permet d’aborder l’univers du catch de manière complète sans risquer de déborder.

Accessibilité

J'ai intégré un système interactif permettant d'ajuster la taille de la police et d'activer un mode adapté aux utilisateurs dyslexiques grâce à l'utilisation de la police Shantell Sans. Ces options garantissent une expérience inclusive, adaptée à un large éventail de profils, en mettant l'accent sur l'accessibilité numérique. Toutefois, ce n'est pas une simple affaire à mettre en oeuvre, mais c'était stimulant de réussir chaque étape. 😊

Interactivités

La présentation se distingue par quatre interactivités principales :

• Une exploration de différents gimmicks via des liens menant à des vidéos officielles de la WWE. J'ai délibérément choisi de ne pas utiliser d'images générées par intelligence artificielle afin de limiter l'impact environnemental, comme discuter lors de la réunion sobriété numérique le 13 décembre 2024.
• Une galerie photo illustrant deux catcheurs emblématiques, accompagnée d'une brève présentation. Bien que j'aurais souhaité inclure une plus grande diversité, mon choix s'est porté sur des catcheurs masculins, reconnaissant toutefois l'importance et le talent des catcheuses dans cet univers.

Interactivités

La présentation se distingue par quatre interactivités principales :

• Une simulation immersive d'une fin de match, mettant en scène une animation dynamique de la ceinture à l'aide de anime.min.js. Initialement, une musique inspirée de Rocky (la musique d'entrée de Kurt Angle) accompagnait cette scène, mais j'ai finalement opté pour une musique libre de droits issue de Pixabay.
• Un exercice interactif avec un feedback positif illimité, conçu pour familiariser les utilisateurs avec le vocabulaire clé du catch, tout en rendant l'apprentissage ludique et engageant. Je ne voyais aucun interêt de faire un feedback négatif, sachant que le but n'est pas de se préparer à un examen, mais d'introduire à un nouvel univers, donc c'est normal de se tromper.

Choix des visuels

Le choix d'images libres de droits a constitué un véritable défi. Certaines d'entre elles ne correspondaient pas pleinement à mes attentes, ce qui m'a conduit à les modifier pour mieux les intégrer à la présentation. Ces ajustements garantissent une cohérence visuelle et pédagogique tout en respectant les licences Creative Commons.

Exemple final

La dernière slide illustre une scène emblématique : le combat de David contre Goliath. Pour souligner cette confrontation, j'ai utilisé GSAP (GreenSock Animation Platform) pour animer les mouvements des deux personnages, avec le plugin de MotionPath. Une interaction subtile permet aux personnages de réagir au passage de la souris, offrant une expérience immersive tout en mettant en valeur le contraste classique entre force brute et ruse.

Tableau des règles

Un tableau synthétique des règles a été intégré pour varier la présentation et apporter une touche plus formelle. Ce format permet de structurer les informations et de les rendre rapidement compréhensibles. De plus, comme ce sont des règles, c'est plus facilement compréhensible de le lire sous forme de tableau.

Documentation interne

La documentation interne et l'organisation dans les feuilles de style et html semblent moins organisées visuellement, mais niveau praticité c'était beaucoup plus simple, j'avais le script directement à côté de ce qui était intéragi.

Bibliothèques utilisées

Les fonctionnalités interactives et dynamiques ont été réalisées à l'aide de bibliothèques reconnues :

• Reveal.js : Pour structurer les slides et permettre une navigation fluide et professionnelle. Utiliser aussi lors de la création du rapport.
• Anime.js : Utilisé pour des animations avancées, notamment l'effet dynamique sur la ceinture dans la simulation de fin de match.

Bibliothèques utilisées

Les fonctionnalités interactives et dynamiques ont été réalisées à l'aide de bibliothèques reconnues :

• GSAP : Employé pour animer la scène de David contre Goliath avec MotionPath. Ses capacités avancées ont permis de rendre la confrontation vivante, ajoutant des mouvements fluides et engageants. Je conseille de tester de passer au-dessus avec la souris, ça simule un combat d'épée.
• Font Shantelle Sans : Police d'écriture utilisée pour la dyslexie, j'ai essayé plusieurs fois de le mettre depuis les fichiers internes, mais cela n'a jamais fonctionner, donc j'ai utiliser un CDN externe. 😔

Points forts

Malgré les contraintes rencontrées, je suis satisfait de certains aspects de ce projet :

• L’accessibilité, grâce à l’intégration de fonctionnalités comme le mode dyslexique avec la police Shantell Sans, et les boutons pour ajuster la taille de la police.
• L’organisation logique et pédagogique des contenus, en passant par les personnages, les combats, les storylines et les règles, avec une structure claire et interactive.
• Les efforts pour respecter les licences Creative Commons et éviter l’utilisation d’images générées par IA, tout en restant fidèle à l’univers du catch.
• Les animations immersives avec Anime.js, notamment la simulation de fin de match qui parvient à recréer une émotion forte malgré des ressources limitées. J'aurai aimé prendre une vidéo internet d'un arbitre à la première personne comme cette vidéo.

Limites

Je dois avouer que je suis déçu de ne pas avoir pu concrétiser l’ensemble de mes idées initiales. Voici les principales limites que j’ai identifiées :

• La réduction drastique des fonctionnalités prévues. Mon idée originale comprenait des éléments immersifs tels qu’un fond interactif représentant un ring (réalisé mais rien n'était avec la license Creatives Commons, j'ai essayé de dessiner, mais bon, le résultat n'était pas concluant), une rampe d’entrée animée avec des particules, et une simulation de match dynamique.
• Le système de "brand split" que je voulais intégrer, basé sur un drag-and-drop simulant un draft, n’a pas pu être réalisé. C’était un concept clé pour explorer l’interactivité liée à la construction des roster (effectif d'une émission), cela a été la premier création, car j'avais pour projet de retracer l'histoire du catch, en particulier la fédération la plus connue, la WWE, mais il y avait peu de catcheurs avec des photos d'eux en Creatives Commons.

Limites

• Le manque de visuels adaptés a limité ma capacité à illustrer pleinement certains concepts, en particulier ceux liés à l’histoire des titres et des émissions. Je ne parle même pas des territoires et les logos de fédérations du passé.
• La fin de la présentation, qui se termine abruptement, aurait mérité une meilleure conclusion ou un récapitulatif pour laisser une impression plus marquante, mais il y avait une limite de slides.

Améliorations possibles

Si je devais améliorer ce projet, voici ce que je changerais ou ajouterais :

• Trouver ou produire davantage de ressources libres de droits spécifiques au catch pour étoffer visuellement les slides.
• Réintégrer des concepts interactifs tels que le drag-and-drop pour le système de draft, ou une simulation de match basée sur des choix, comme dans Twine.
• Optimiser la narration pour qu’elle reste engageante et immersive tout au long de la présentation, avec une fin plus travaillée.
• Explorer des solutions légères pour recréer des animations plus complexes tout en respectant les contraintes écologiques et techniques.

Ressenti général

Ce projet a été une expérience formatrice mais aussi frustrante. J’avais des ambitions élevées, mais les contraintes liées aux ressources Creative Commons et au temps disponible ont limité mes possibilités. Cela dit, je suis fier d’avoir respecté mes valeurs en évitant l’utilisation d’images générées par IA, et d’avoir produit un contenu interactif accessible à tous.

Même si le résultat final ne reflète pas entièrement ma vision initiale, il représente un effort sincère et une volonté de transmettre une passion pour le catch à travers un contenu pédagogique et ludique.

• EduTechWiki - Bibliothèques JavaScript
• EduTechWiki - Reveal.js
• EduTechWiki - Animation avec JavaScript
• EduTechWiki - Animation avec CSS

• Creative Commons
• GitHub - mafritz/slides
• EduTechWiki - Versionnage sémantique

• EduTechWiki - Les différences entre l'image statique et l'animation quant à l'apprentissage
• LibHunt - Catégories de bibliothèques JavaScript
• JSDelivr

ChatGPT - Utilisé en dernier recours en cas de grave pépin (script qui ne fonctionne pas).

Utilisation du logiciel de modification d'image de windows pour rogner et enlever le fond des images s'il y avait.

• Roman Reigns (DeviantArt) - Représentation artistique de Roman Reigns en tant que champion universel.
• John Cena (DeviantArt) - Illustration de John Cena en tenue de 2009.
• World Heavyweight Championship Belt (DeviantArt) - Illustration de la ceinture de champion poids lourd.

Vidéos intégrées en lien, appartenant tous à la WWE

• Daniel Bryan's "Monster" video
• "Stone Cold" Steve Austin vs. The McMahons: WWE Playlist
• Michael Cole has the best reactions
• Ultimate Warrior Entrance Video
• Undertaker makes his entrance: WrestleMania 27
• Triple H's WrestleMania 22 Entrance
• Roman Reigns honors The Bloodline in WrestleMania entrance: WrestleMania XL Sunday highlights
• Seth Rollins cashes in Money in the Bank: WrestleMania 31
• Cena makes shocking WWE Money in the Bank return
• Cody Rhodes makes an electric entrance: Money in the Bank 2023 highlights
• Cody Rhodes makes his entrance with the Winged Eagle WWE Championship