L'objectif a été ici de comprendre les bases de fonctionnement du langage de programmation javascript, ainsi que son intégration dans une page HTML 5, en réalisant une "flashcard" portant sur un sujet de notre choix, facilitant l'apprentissage des informations que l'on souhaite partager.
J'ai souhaité orienter mon travail sur les casques de réalité virtuelle car j'estime que c'est un outil qui va gagner en importance les années à venir, notamment dans le domaine de l'apprentissage. Ayant étudié par le passé l'approche incarnée de la cognition, cet outil technologique m'a semblé encore plus pertinent lorsque couplé à une pratique pédagogique.
J'ai, comme pour le premier exercice, souhaité développer une interface de lecture agréable, reprenant un "design graphique" actuel, minimaliste avec un code couleur cohérent.
J'ai moi-même réalisé l'image en svg via Illustrator. Je me suis inspiré de chartes infographiques libre de droit pour construire la structure de base, puis des références présentées dans la bibliographie pour y inclure les étiquettes.
La structure du code de la flashcard a été reproduite à la main à partir du cours disponible sur le Wiki : Premiers pas avec Javascript.
Je me suis aidé du cours "l'interactivité avec Javascript" disponible sur Edutech Wiki pour comprendre plus en profondeur comment le code JS pouvait communiquer avec le code HTML.
Enfin, afin que la flashcard puisse avoir du sens, j'ai rajouté en description, dans un bloc à part, des indications sur quelques unes des étiquettes utilisées. Je n'ai souhaité présenter plus en détail que les étiquettes qui, à mon sens, le nécessitaient, ou pouvaient porter à confusion.
L'image utilisée dans le header est libre de droit et ne requiert aucune attribution, mais j'ai quand même souhaité redirigé l'image vers le site ou j'ai pu la récupérer afin de créditer l'auteur.
N'y connaissant rien au langage JS, que ce soit à sa syntaxe ou à ses potentiels d'utilisation, ce fut une réelle découverte. J'ai cependant besoin de comprendre plus en profondeur quelles sont les possibilités permises par ce langage (qui semble très vaste).
Je pense avoir besoin de plus d'exercices à réaliser afin de me sentir confortable, à l'aise, avec les bases du langage.
J'ai également essayé de m'améliorer dans ma compréhension du code HTML/CSS, et j'ai essayé de travailler également ma capacité à rendre le contenu produit plus esthétique. La mise en forme (bien qu'à priori secondaire), me semble importante dans le processus de lecture / d'apprentissage.
J'ai appris à utiliser le "display : flex" dans le code CSS. J'avais beaucoup de mal à avoir un code clair et fonctionnel sur mes précédentes productions lorsque je souhaitais mettre deux "div" côte à côte. Maintenant je me sens plus capable d'agencer un site internet avec cette fonctionnalité CSS.
J'ai essentiellement utilisé les ressources indiquées sur edutechwiki pour réaliser l'ensemble des travaux de cet exercice 1. En complément j'ai réalisé un bon nombre de recherche personnelles pour tenter de mettre en pratique mes idées concernant le code CSS, notamment via OpenClassRooms qui m'a beaucoup aidé.
W3C School m'a également aidé à me perfectionner dans la compréhension de la syntaxe et de la structure de mon code.
Enfin, Code combat m'a permis de procéder à une introduction du langage JS de manière interactive et assez intéressante. Ce fut un premier pas nécessaire qui m'a permis de pousser mes recherches en lisant les articles disponibles sur EduTEchWiki.
EduTechWiki : Premiers pas avec JS
EduTechWiki : interactivité avec JS.
w3schools : Tutoriel HTML
Code Combat : Learn to code through the power of play
Glitch Studio : A model for understanding the virtual reality experience