1 Liens
Le dispositif se compose des éléments suivants :
- Une page html avec une application pédagogique “drag and drop”
- Ce Rapport
2 Objectifs
Dans cette section, je vais décrire les objectifs de ma présentation HTML et des fonctionnalités interactives associées. Ces objectifs visent à clarifier la finalité de notre dispositif et à fournir un contexte pour son utilisation. Voici les principaux objectifs de notre présentation. Cette présentation vise à m’aider à enseigner les concepts de syllabes courtes et longues en arabe, en mettant en évidence l’importance des voyelles et de leur association avec les accents. Cette présentation vise à m’aider à enseigner les concepts de syllabes courtes et longues en arabe, en mettant en évidence l’importance des voyelles et de leur association avec les accents. Mon public cible comprend les apprenants de la langue arabe, en particulier ceux qui souhaitent comprendre la différence entre les syllabes courtes et longues. Les enseignants de l’arabe peuvent également trouver cette présentation utile pour leurs élèves. Cette présentation peut être utilisée dans divers contextes éducatifs, tels que des cours en présentiel, des cours en ligne, des sessions d’auto-apprentissage ou comme ressource de référence accessible en ligne.
Aucune connaissance préalable de la langue arabe n’est nécessaire. La présentation est conçue pour les débutants, et les concepts sont expliqués de manière simple et accessible. A l’issue de cette présentation, l’apprenant devrait être capable de reconnaître les voyelles de base de l’alphabet arabe, de comprendre comment les voyelles prolongent une syllabe en arabe, de différencier les syllabes courtes des syllabes longues, et d’appliquer ces connaissances pour améliorer sa prononciation des mots en arabe. Mes objectifs visent à fournir une ressource éducative précieuse pour mes étudiants en tant qu’enseignant de l’arabe. Cette présentation a été conçue pour renforcer leur compréhension de la prononciation et de la structure des mots dans cette langue.
3 Design
Le design de notre présentation HTML a été soigneusement conçu pour favoriser l’apprentissage et faciliter la compréhension des concepts liés aux syllabes courtes et longues en arabe. Voici une description du design à la fois au niveau pédagogique et de l’interface :
La structuration en diapositives permet de diviser la présentation en diapositives distinctes, chaque diapositive traitant un aspect spécifique des syllabes courtes et longues en arabe. Cette structuration facilite la progression logique de l’apprentissage, en présentant progressivement des concepts plus avancés.
Chaque diapositive combine des éléments visuels, tels que des lettres arabes, des accents et des vidéos, avec des explications textuelles. Cette approche multimodale vise stimuler l’apprenant en l’engageant dans le dispositif. Ainsi, cette présentation intègre des éléments interactifs, tels qu’un quiz basé sur des audios et une activités de glisser-déposer, grâce auxquelles l’apprenant peut tester ces connaissances nouvellement acquises, de renforcer sa compréhension et mettre en pratique les apprentissages exposé dans la première moitié de la présentation.
La navigation à travers les diapositives est intuitive grâce à l’utilisation de flèches, de boutons et de signets de temps pour la vidéo. Cela permet aux utilisateurs de revenir en arrière ou de sauter en avant selon leurs besoins. Ceci est en grande partie du code provenant de la bibliothèque reveal.js.
L’interface est épurée et lisible, avec une mise en page claire et des couleurs contrastantes pour améliorer la lisibilité du texte. Les polices de caractères ont été choisies pour leur facilité de lecture. La police du texte en arabe à été agrandies pour plus de visibilité et une meilleure reconnaissance des lettre, accents et mot de la part de l’apprenant. Ceci vise à éviter de causer une surcharge cognitive et de diverger l’attention de l’utilisateur vers des élément non pertinnant d’un point de vu pédagogique mais aussi de garantire une experience utilisateur cofortable et agréable à l’oeil.
Pour finir, l’ activité interactive impliquant des audios fournis un feedback immédiat aux utilisateurs, les informant de la précision de ses réponses. Cela favorise l’apprentissage actif en permettant aux utilisateurs de corriger leurs erreurs.
4 Production
Pour la création de mon dispositif éducatif, j’ai suivi les étapes suivantes :
1. Choix de la plateforme de présentation :
J’ai décidé d’utiliser le framework Reveal.js, qui offre une structure solide pour développer des présentations HTML interactives. Cette plateforme m’a permis de créer des diapositives et d’intégrer des fonctionnalités interactives.
2. Conception des diapositives :
J’ai élaboré mes diapositives en utilisant le modèle fourni en cours. Chaque diapositive a été personnalisée pour aborder des aspects spécifiques des syllabes courtes et longues en arabe. J’ai intégré des éléments visuels, des vidéos et des activités interactives pour rendre le contenu informatif et captivant.
3. Intégration d’éléments interactifs :
Pour les activités de glisser-déposer, j’ai adapté mon dispositif en utilisant du code jQuery (third party code). Cette étape m’a permis de créer des exercices interactifs où les utilisateurs peuvent classer des mots en fonction de leur syllabe (courte ou longue). Il a fallu une compréhension approfondie de la manipulation des éléments DOM avec jQuery. Cette activité est une réadaptation du dispositif que j’ai crée pour l’exercice 5.
4. Tests et résolution de problèmes :
J’ai effectué des tests pour m’assurer que toutes les fonctionnalités fonctionnaient correctement. J’ai résolu les problèmes rencontrés, en particulier ceux liés à la compatibilité entre les navigateurs.
6. Documentation et partage :
J’ai créé une documentation pour guider les utilisateurs dans l’utilisation de mon dispositif. J’ai également partagé la présentation en ligne pour un accès libre.
7. Possibilités d’adaptation :
Mon dispositif offre des opportunités d’adaptation en permettant l’ajout de nouvelles diapositives pour aborder d’autres aspects de la langue arabe. Il peut également servir de modèle pour d’autres sujets éducatifs. En suivant ces étapes, j’ai réussi à développer une présentation interactive basée sur Reveal.js et à intégrer des activités interactive dont un exercice glisser-déposer en utilisant jQuery. Le processus de développement a été enrichissant, et j’ai surmonté certains défis techniques pour offrir une ressource éducative interactive et instructive.
5 Auto-évaluation
Bien que fonctionnel et util pour les objectifs déclarés, le dispositif pour l’instant pourrait être amélioré de plusieurs manières. L’exercice de drag and drop gagnerait en richesse pédagogique s’il pouvait fournire des feedback.
Sur le plan technique il est possible que le code contiennen des redondnace et pourrait être alégé et amélioré pour une meilleure performance. L’utilisation de plusiqueres bibliothèque n’a pas été facile pour l’organisation du code java ce qui à été qun défis pour moi.
6 Bibliographie
Pas de bibliographie pour cet exercice.
7 Ressources
- Chat gpt comme outil pour aider à corriger les erreures de code et autres problème de codage
- exercices précédents (code réadapté)