Rapport exercice 6 - Chiara Sirna - 30 janvier 2017

Lien

Animation de type UI avec objectifs pédagogiques

Objectifs

La page vise à présenter les étapes qu'il faut suivre pour créer une redaction d'un essai argumentatif à l'examen officiel du certificat de connaissance de la langue française (DELF B 2). Elle pourrait donc être destinée à un public cible d'élèves du lycée qui doivent se soumettre à l'examen en question. En cliquant sur les boutons présents sur la page, l'utilisateur peut visualiser les trois étapes fondametales, c'est-à-dire l'analyse, l'elaboration du plan et la redaction finale. Un petit résumé schématique du contenu à développer dans chacune des trois parties est présent aussi.

Design

Au niveau de design il y a trois éléments à considerer:

les images
les boutons
la division de la page

L'image insérée dans l'header renvoie à la tâche à rèaliser, c'est-à-dire celle de l'écriture. Par contre, l'image choisie pour la partie à droite de la page (aside) sert à évoquer l'objectif à atteindre, donc l'examenh final DELF B2.

Pour ce qui concerne les boutons, j'ai modifié le design de base avec une feuille de style css, en changeant les proprietés background-color, paddind, border radius, border color, etc...

Quant au choix de diviser la page en deux parties, section et aside, je pense qu'il aide à mieux organiser le contenu. La partie à gauche est celle dédiée au contenu à répresenter et aux interactions des utilisateurs, tandis que celle à droite a simplement un rôle de support: elle sert plutôt à rappeler la tâche à accomplir.

Production

Pour la création de cette page il y a plusiuers connaissances à mettre en place : du code HTML5, JavaScript (dans les versions des bibliotèques JQuery UI et Velovity.js), du code CSS et, enfin, la géstion des fichiers et/ou dossiers externes à insérer respectant les bons chemins pour faire les liens qu'il faut.
Je préfère encore travailler sur trois fichiers separés (.html, .css,.js) car j'ai l'impression que ça me permet de mieux visualiser les différents fonctions à gérer.
Pour ce qui concerne les "manipulations" du .css j'ai utilisé surtout celles qui me permettaient d'avoir des éléments graphiquement plus appréciables dans ma page (voir les boutons modifiés par rapport à ceux de base, l'insertion d'un header et un aside assez correspondants entre eux au niveau de dimensions ou, encore, le positionnement de certaines images.

Pour ce qui concerne par contre plus strictement les "animations", j'ai utilisé le langage de la bibliotéque JQuery UI et le fonctions prévues dans la bibliotèque Velocity.js, surtout opacity, loop et scale. Ces fonctions soutiennent à mon avis les objectifs d'apprentissage proposés par la page: en effet elles permettent de mettre en évidence d'abord le contenu à insérer dans les étapes en question et, après, un schéma des éléments fondamentaux qui caractérisent le contenu même. Lorsque l'utilisateur ouvre la page, le contenu est caché. Il se visualise seulement en cliquant sur les boutons, après une intervention directe donc de l'utilisateur même.

Auto-évaluation

Avant de me lancer dans l'activité j'ai essayé de procéder par grades, comme d'habitude:

d'abord j'ai lu, refait et étudié les exercises qu'on avait vu en class
je suis révenue plusieurs fois sur le materiel et sur les pages EdutechWiki que les professeurs nous avaient mis à disposition
J'ai l'impression d'être en train d'améliorer au niveau d'autonomie dans les phases de recherche, gestion et interprétation des ressources à informatiques. J'ai pu noter que je continue à améiliorér aussi au niveau de comprehénsion du codage. De toute façon il reste encore beaucoup de travail à faire. Je me rends compte que j'arrive à appliquer les règles d'une architecture qui commence a prendre sens mais, cela dit, ça prend toujours beaucoup de temps en termes d'application et réalisation. De toute façon, si je fais une confrontation avec les travaux précedents, je peux certainement affirmer que j'arrive maintenant à mieux visualiser les choses à faire et les étapes à suivre avant même de me lancer dans la réalisation de l'activité concrète.
j'ai choisi d'utiliser la bibliotèque Velocity.js car elle proposait les fonctions que je voulais insérer dans ma page, surtout celles de opacity, scale et loop. De toute façon j'ai trouvé que l'organisation de la page officiel de Velocity n'était pas particulierement ergonomique, mais plutôt confuse. J'ai eu du mal à identifier les fonctions dont j'avais besoin. Par exemple, il n'y avait pas toujours de demo disponibles pour toutes les animations possibles. Donc plusieurs fois j'ai du lire tout le texte descriptif pour comprendre si il était quelque chose d'intéressant pour ma page ou pas. J'imagine que en termes de temps cela m'a coûté beaucoup.

Bibliographie

Je n'ai pas utilisé de livres pour cet exercice.