1 - Liens
2 - Objectifs
L'objectif de cette page est de proposer une activité de découverte sur les arbres les plus courants en Suisse. Le principal public cible est constitué d'apprenants âgés d'environ 13 à 17 ans, mais cette activité pourrait être également utilisée par des personnes plus âgées qui seraient intéressées par le sujet. Cependant, cette application ne convient pas aux enfants, car elle contient beaucoup de texte, des termes techniques et demande, à mon sens, une certaine compétence dans le traitement et compréhension d'informations.
Cette application peut être utilisée individuellement ou en classe. En effet, il existe en Suisse des formations, comme par exemple "Forestier-bûcheron" qui demande aux étudiants de connaître les arbres, leurs caractéristiques et même leur nom latin. Dans ce cas, le professeur pourrait par exemple montrer les images dans un premier temps et demander ce que les étudiants savent sur chaque arbre avant de leur demander de lire les explications.
3 - Design
Lorsque l'utilisateur arrive sur la page, il voit le titre et la partie introductive est introduite grâce à Typed.js. Celui-ci a été utilisé pour attirer l'attention des utilisateurs. En effet, en mettant un texte "basique", l'utilisateur pourrait simplement l'ignorer et directement se diriger vers les images ou même le quiz à la fin. C'est aussi pour cette raison que j'ai décidé d'ajouter un bouton, pour que les images ne soient pas affichées directement et que l'utilisateur ne soit pas distrait par celles-ci dès l'ouverture de la page.
Lorsque l'utilisateur clique sur "Afficher les images", la page principale est affichée. J'utilise à nouveau Typed.js pour les instructions et explique comment l'utilisateur doit procéder pour l'utilisation de la page.
Concernant les images, j'ai utilisé Imagehover afin de permettre à l'utilisateur d'en apprendre plus sur chaque arbre en passant la souris sur l'image. Le fait de devoir venir avec la souris dessus accentue le regard de l'utilisateur sur l'image, ce qui peut aider pour la mémorisation visuelle de l'arbre. Comme mentionné plus haut, certaines formations demandent aux étudiants d'apprendre les noms latins des arbres. C'est pour cette raison que j'ai décidé de les mettre en avant avec un texte de plus grande taille. Finalement, j'ai choisi des images des feuilles des arbres, car comme l'explique le site oficiel de l'état de Vaud, la manière "la plus facile pour déterminer un arbre, c'est d'observer ses feuilles et ses caractéristiques". (Site Officiel Etat de Vaud
En dessous des images, l'utilisateur retrouve un petit quiz avec 4 petites questions. L'avantage de ce quiz, est qu'il donne un feedback immédiat qui reste affiché pendant 3 secondes et qui disparaît une fois les 3 secondes écoulées. Ainsi, l'utilisateur est libre de réessayer directement la question, de voir s'il la réussit ou pas sans devoir recharger la page ou devoir répondre à toutes les questions avant de recevoir un feedback.
Finalement pour le footer, j'ai simplement suivi les consignes dans la page EdutechWiki pour l'exercice 6
4 - Production
Phase de lecture et de réflexion sur l'exercice
Tout d'abord, j'ai commencé par la lecture de la page Wiki de l'exercice 6, j'ai fait beaucoup de recherches sur les possibilités que j'avais pour l'exercice. Etant donné l'ampleur de nos possibilités, j'ai perdu beaucoup de temps à essayer de trouver un sujet, mais aussi sur quel type de third part code j'allais utiliser. Lorsque le sujet a été décidé, j'ai commencé à faire des recherches sur plusieurs sites suisses parlant des arbres les plus répandus en Suisse et j'ai essayé d'en chosir les plus "intéressants"
Phase de création
J'ai d'abord créé ma page HTML avec les images et le quiz. Une fois cette partie faite, j'ai commencé à ajouter les codes de Imagehover et typed.js. Cette partie m'a pris un peu de temps, car j'avais un problème d'emplacement. Ensuite, j'ai créé mes fichiers CSS et JS où j'ai écrit mon code JavaScript, Typed et où j'ai repris mon code utilisé pour l'exercice 3 avec "style.display". Une fois que j'ai vu que mon code fonctionnait, j'ai finalisé les ajustements de mon CSS. Finalement pour le footer, j'ai simplement suivi les consignes dans la page EdutechWiki pour l'exercice 6, et comme d'habitude j'ai repris le même style CSS que j'ai utilisé pour la plupart de mes exercices jusqu'à présent.
5 - Auto-évaluation
Il s'agit d'un exercice qui m'a demandé une certaine refléxion à propos du sujet. J'aurai aimé avoir plus de temps pour créer une page plus complète, avec par exemple plus d'arbres et questions, mais aussi en ajoutant une carte de la suite avec les placement des arbres.
6 - Bibliographie
Liée à la programmation
- W3Schools - Pour le CSS, code pour le quiz
- Imagehover - Pour le CSS des images
- Typed.js - Pour le texte qui s'écrit au fur et à mesure
Liée au contenu
- Etat de Vaud, Inventaire forestier national, La clé forestière - Recherche d'information sur les arbres
- Orientation.ch - Recherche d'information sur la formation de forestier-bûcheron