Ma page HTML5 avec graphisme SVG
Cet exercice avait pour objectif principal la création d'un support de cours au moyen d'une page web avec une animation.
Effectivement, j'ai créé un exercice afin d'animer mes cours de mise en page d'une lettre commerciale destinés à un public d'adultes, apprenants de deux formations distinctes : CFC Employés de commerce et Diplôme de secrétaires médicales (Ifage).
Cet exercice propose une révision de cours sur les dix éléments constitutifs d'une lettre. Après parcourir les éléments présents sur cette page web, les participants seront capables d'énumérer les 10 blocs de texte constituant une lettre standard et d'en indiquer l'ordre de parution, l'emplacement et la taille approximative de chaque bloc.
Etant conçu en tant qu'exercice de révision, il est prévu pour le deuxième cours sur ce thème, au début du cours, en mode présentiel. La première expérience concrète avec ce projet aura lieu le mardi 8 novembre prochain.
Au niveau pédagogique, cette page web est constituée d'un bloc de texte contenant des titres en tant qu'énoncé et notamment une liste à puces décrivant les étapes de l'exercice à réaliser.
En dessous de ce bloc de texte, on trouve une esquisse de page contenant des rectangles blancs représentant les blocs de texte qui figurent dans une lettre, selon les normes suisses.
En ce qui concerne le design de l'interface, la partie graphique a été entièrement conçue avec des commandes SVG : les dimensions et les couleurs des rectangles, l'espacement entre les rectangles, les textes indiquant le contenu de chaque rectangle. Deux animations ont été conçues pour des moments différents de travail avec cet outil :
La première animation, la parution en douceur de chaque bloc de texte, vise à attirer le regard de l'apprenant sur l'élément lettre, de le surprendre et éventuellement de le divertir. Bref, l'objectif est d'entraîner une motivation favorable pour effectuer l'exercice.
La deuxième animation, soit le texte descriptif à l'intérieur de chaque rectangle, a pour but de réviser le contenu appris sur les éléments constitutifs d'une lettre.
Cet exercice est composé de trois parties : le texte d'introduction, le dessin en soi et l'animation. Les difficultés vécues (et pour certaines surmontées) se résument à :
Schéma de calculs du positionnement des blocs de texte
Je mentionne maintenant une autre difficulté que je n'ai pas su résoudre : lorsqu'on ouvre cette page web on aperçoit les plusieurs lignes de texte et un petit morceau de l'esquisse de la lettre. J'aurai aimé que la lettre soit rendue entièrment visible d'un coup. Peut-être pourrais-je le faire en créant une nouvelle page. Pour l'instant, toutefois, je ne sais pas encore créer de nouvelles pages pour un site web. A suivre.
Je suis particulièrment satisfaite de ma performance dans cet exercice, car je reeconnaîs mes grosses lacunes dans cette matière. Pour cet exercice, j'ai pu trouver plus rapidement les moyens de surmonter mes difficultés que pour l'exercice précédent. J'ai même osé ajouter quelques paramètres à ma feuille de style CSS ! Je me sens rassurée d'avoir pu réaliser l'exercice pédagogique presque comme je l'avais conçu au départ.
Idéalment, je devrais préparer les cours STIC à l'avance à la maison, avant les cours en présentiel. Cela m'aiderait à suivre le rythme soutenu de cette matière. Ce sera mon but d'apprentissage dans cette matière pour la période 2.
Tutoriel SVG de w3schools qui démarre vraiment depuis la base. Il m'a beaucoup aidée à comprendre et à tester le fonctionnement de ce système et les codes pour générer des images.
Un wiki excellent d'O'Reilly sans lequel je n'aurais pas pu faire les animations.
Rien à signaler.
Pour la réalisation de ce travail, j'ai parcouru plusieurs pages d'Edutechwiki et ai corrigé diverses fautes d'orthographe ou de syntaxe sur les textes que j'ai rencontrés.
A vrai dire, mon niveau basique de connaissance dans cette matière ne me permet pas de contribuer plus largement avec la création d'articles ou de paragraphes ou la modification de contenu dans le wiki. Pour ne pas dire que je n'ai point collaboré, j'ai ajouté une remarque sur le fait qu'un des sites dont on avait le lien n'existait plus. Je suis désolée de cet état de faits, dont la personne qui en souffre le plus c'est moi-même. Mais... enfin, quel type de conribution wiki je pourrais faire à mon niveau ? J'ai examiné avec attention la liste contenue dans le point y référent à Edutechwiki sur les rapports (Contribution wiki), mais je réitère que je n'ai pas le niveau de connaissance requis pour modifier un texte écrit par d'autres personnes, à part retrouver quelques fautes d'orthogrphe ou de syntaxe.
Rien à signaler.
Cette fois-ci, je n'ai pas eu de problème particulier. Je commence à avoir de l'habitude avec le texte et l'éditeur, je crois.
Le travail a été effectué en 30 minutes. Un travail de "manutention" est toujours plus rapide que celui d'initiation.
Les liens proposés dans la documentation de l'exercice.
Les liens proposés dans le document.
Rien à signaler.