Rapport de Florent Dupertuis sur l'exercice 2 de la période 1 du cours STIC I

23/10/2020


1. Liens

Liens vers le livrable de l'exercice 2 :

2. Objectifs

L'objectif de mon dispositif est de permettre aux utilisateurs de développer des connaissances sur le langage HTML5, en apprenant à reconnaître les principales parties d'une ligne de code en HTML5. Il s'agissait donc de proposer une activité d'apprentissage par répétition permettant aux utilisateurs de mémoriser quelques mots techniques décrivant une ligne de code.

Le public-cible correspond aux individus de tout âge n'ayant aucune connaissance technique dans l'écriture en langage HTML5 et souhaitant s'initier à ce domaine. Même s'il est possible de créer des lignes de code de manière totalement procédurale sans maîtriser la terminologie propre à ces lignes, il est à mon avis important de la connaître pour comprendre et donner du sens à ce qu'on fait. Ceci est d'autant plus vrai que, sans ces connaissances, les utilisateurs seront rapidement en difficulté par la suite lorsqu'ils voudront créer des pages web plus complexes.

Ce dispositif est en libre accès sur internet et il est conçu pour être utilisé de manière autonome. Il pourrait éventuellement être montré aux étudiants du MALTT au tout début de leur cursus.

3. Design

Le dispositif est très simple : une ligne de code est affichée, avec différentes parties représentées en différentes couleurs. En cliquant sur le bouton "Montrer les mots", l'utilisateur peut visualiser comment se nomme chaque partie colorée de la ligne de code.

C'est à l'utilisateur de choisir comment il souhaite tirer profit de l'activité. Par exemple, il peut décider de simplement recopier les contenus, ou de les apprendre par coeur en utilisant plusieurs fois la fonction "cacher/montrer les mots" et en se lançant le défi personnel d'afficher le moins de fois possible les réponses (raison pour laquelle j'ai décidé de conserver le mécanisme du compteur).

Cependant, cette petite activité cherche aussi à éveiller la curiosité de l'utilisateur, en l'amenant à se demander pourquoi telle partie de la ligne de code est nommée par tel terme, notamment les parties en vert et en rouge : pourquoi le "nom de la balise" correspond à plusieurs parties de la ligne ? Pourquoi le "nom" et la "valeur de l'attribut" apparaissent à l'intérieur du "nom de la balise"? Etc. Il est donc attendu des utilisateurs qu'ils approfondissent leurs connaissances en allant chercher des informations complémentaires ailleurs que sur la page du dispositif.

On peut donc dire que le design épuré de cette activité simple escompte un effet indirect qu'on peut considérer comme un objetif secondaire du dispositif.

4. Production

Voici les principales étapes de mon travail :

  1. Premiers pas avec JavaScript
  2. J'ai commencé à lire les aspects théoriques sur la programmation et la pensée computationnelle, sans vraiment donner du sens à ce que je lisais. J'ai donc rapidement commencé à suivre le tutoriel premiers pas avec JavaScript qui m'a permis de mieux comprendre les contenus et leur articulation.

  3. Choix du projet
  4. J'ai repensé à la présentation d'HTML5 durant la première séance du cours STIC I durant laquelle j'avais fait une capture d'écran du passage expliquant les termes techniques d'une ligne de code. J'ai donc repris cet exemple en essayant d'améliorer un peu son apparence (principalement la distinction entre les couleurs).

  5. Production de deux versions d'une image en format SVG
  6. J'ai utilisé le logiciel Inkscape pour répliquer l'image, ce qui m'a permis d'en découvrir quelques fonctions, mais pas suffisamment pour me convaincre de l'utilité de ce genre de logiciel (à titre personnel et selon mes besoins actuels bien entendu). Il m'a par exemple fallu beaucoup de temps pour réussir à tracer une simple ligne puis la transformer en flèche.

    Version initiale de l'image : Image originale.png

    Version répliquée de l'image : Image répliquée.svg

  7. Création des fichiers
  8. Comme il s'agissait en grande partie de répliquer des lignes de code existantes, la création des fichiers a impliqué principalement de faire des expérimentations pour modifier l'apparence de contenu, tout en permettant de mieux comprendre l'emboîtement entre les fichiers.

5. Auto-évaluation

Les efforts à fournir pour cet exercice ont été moins importants que pour l'exercice précédent (exercice 1 période 1). Le fait d'expérimenter différents paramètrages de la page de mon dispositif en "jouant" avec les contenus des lignes de code a été plutôt ludique. Je suis satisfait du résultat car je pense qu'il correspond à ce que je souhaitais réaliser, même si son potentiel pédagogique reste très limité.

6. Bibliographie

Aucune référence utilisée pour cet exercice.

7. Ressources