STIC:STIC I - exercice 3 (Drakkar)

Cette page fait partie des cours STIC I et STIC II

STIC

Archives STIC

Chantier STIC

Initiation à la pensée computationnelle avec JavaScript

Productions STIC

Ressources STIC

STIC:Contribution Wiki

STIC:Rapport STIC I et II

STIC:STIC I (Edda)

STIC:STIC I - Atelier technique 2

STIC:STIC I - exercice 1 (Drakkar)

STIC:STIC I - exercice 1 (Edda)

STIC:STIC I - exercice 2 (Edda)

STIC:STIC I - exercice 3 (Edda)

STIC:STIC I - exercice 4 (Edda)

STIC:STIC I - exercice 5 (Edda)

STIC:STIC I - exercice 6 (Edda)

STIC:STIC III

STIC:STIC III (2022)

STIC:STIC III (2022)/Exploration des Problématiques Liées aux Ponts et Détails

STIC:STIC IV

Introduction

Cet exercice introduit le développement de page/application web interactives avec JavaScript.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

• Consolider les bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.) en relation avec l'automatisation à travers une solution algorithmique
• Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques
• S'initier au design d'interfaces utilisateur en technologie éducative
• Savoir reconnaître et créer des interactions à travers la combinaison d'événements déclencheurs, de gestionnaire d'événement, de manipulation du DOM
• Lier des événements interactifs à des processus d'apprentissage des utilisateurs
• Sensibilisation au guidage et à l'expérience utilisateur lors des changements dynamiques à l'interface

Prérequis

Contenu à maîtriser

• Introduction à la programmation
• Premiers pas avec JavaScript

Lectures conseillées pour se préparer au cours en présence

• Computation avec JavaScript, sections 1 à 3
• Interactivité avec JavaScript, sections 1 à 3

La lecture complète et la maîtrise des contenus est prévue pour la période à distance.

Logiciels utilisés pendant l'activité en salle de classe :

• Brackets / Visual studio code
• Outils de développement Google Chrome

Activité en salle de classe

JavaScript côté-client

JavaScript côté-client, c'est-à-dire l'utilisation la plus répandue de JavaScript, se réfère à l'utilisation de JavaScript dans les pages web. Ce mécanisme est rendu possible grâce à la présence d'un interprète JavaScript dans le navigateur web :

• Présentation "Interactivité avec JavaScript"

Extension d'une application sur la lecture vue en P1

Pendant le cours en présentiel en P1, nous avons vu brièvement deux applications concernant l'apprentissage de la lecture :

• esrever
   : entraînement de la voie d'assemblage (construction des mots à travers le déchiffrage des lettres)

• Mot clignotant
   : entraînement de la voie d'adressage (reconnaissance des mots par leur "forme")

Activité pratique par groupes

Désignez une codeuse ou un codeur par groupe de 3/4 personnes et essayez d'effectuer les tâches suivantes en discutant le code ensemble.

Préparation

1. Téléchargez le code des applications MALTT-STIC/stic-1-app-examples
2. Concentrez-vous sur l'application Mot clignotant dans le dossier 02-blink
3. Ouvrez le fichier assets/js/app.js  :

   /**
    * Code pour construire une simple application interactive qui affiche aléatoirement un mot à l'envers depuis une liste
    */
   
   //Liste de mots
   var wordList = [
     "maison",
     "chien",
     "chat",
     "avion",
     "lettre",
     "marionette",
     "chaise",
     "école",
     "mathématique",
     "livre",
     "français",
     "géographie",
     "cahier",
     "stylo"
   ];
   
   //Fonction pour récupérer un mot aléatoire
   function getRandomWord() {
     var randomIndex = Math.floor(Math.random() * wordList.length);
     return wordList[randomIndex];
   }
   
   //Ajouter le gestionnaire d'événement au bouton
   document.querySelector("#randomWordBtn").addEventListener("click", function () {
     //Sélectionner un mot aléatoire
     var randomWord = getRandomWord();
   
     //Associr le mot aléatoire au placeholder
     var targetWord = document.querySelector("#targetWord");
     targetWord.textContent = randomWord;
   
     //Afficher le mot s'il est caché
     var wordContainer = document.querySelector(".showWord");
     wordContainer.style.display = "block";
   
   
     //Démarrer un timer qui cache le mot après 200ms
     setTimeout(function () {
       wordContainer.style.display = "none";
     }, 200)
   });
   

Tâches

Suivez les instructions pour modifier l'application de la manière correspondante. NB certaines tâches vont écraser ce que vous avez fait à l'étape précédente. Les tâches vont dans un ordre de difficulté croissante et c'est normal si vous n'arrivez pas à toutes les faire. Testez l'application pour contrôler que tout marche correctement. Ouvrez toujours la console JavaScript pour détecter des éventuels erreurs.

1. Ajoutez 3 nouveaux mots à la liste (déjà fait en P1 normalement)

2. Modifiez le code afin que le mot s'affiche pour 500ms au lieu que 200ms

3. Modifiez le code afin que le mot s'affiche pour une durée proportionnelle à la longueur du mot, par exemple 40ms pour chaque lettre

   Hint : il vous faudra chercher une manière de connaître la longueur d'une suite de caractères. Voir par exemple Méthodes utiles pour les chaînes de caractères sur MDN.

4. Modifiez l'application afin que l'utilisateur puisse déterminer la durée d'affichage du mot

   Ajouter le code mis en évidence dans le fichier index.html. Ceci ajoute un champ de texte après le paragraphe Cliquer sur le bouton pour afficher... afin que l'utilisateur puisse déterminer le nombre de milliseconds, fixé à 200 initialement et que vous avez changé avec 500 à l'étape précédente.

   <p>
        Cliquer sur le bouton pour afficher un mot pour une durée limitée de
        temps.
   </p>
   <p>
        <input
           type="number"
           value="200"
           id="showTime"
           style="width:100px; font-size: 2rem; text-align: right;"
         />
         ms
   </p>
   

   Ensuite modifier le code dans app.js pour que la valeur du champ de texte soit utilisée pour déterminer la durée d'affichage du mot

   Hint : voir Identifier un élément de input et sa valeur si vous êtes bloqués

5. Modifiez l'application afin d'éviter que le même mot ne s'affiche deux fois de suite

   Hint : il existe plusieurs manières pour obtenir ce résultat

   Si vous n'y arrivez pas avec le code, essayez au moins de penser à la logique qui pourrait vous permettre d'obtenir le résultat souhaité

Activité

À choix, vous pouvez suivre des exemples progressifs ou vous lancez avec des exemples/challenges/solutions comme pour les autres workshops :

• Répliquer/terminer les 4 tâches de l'application Mot clignotant
• Suivre les exemples de la page Interactivité avec JavaScript (lecture obligatoire pour travail à distance)
• Télécharger les fichiers du workshop JavaScript client side

Interactivité avec JavaScript

L'accès (même si limité) que JavaScript a sur le DOM de la page web permet d'intégrer des comportements interactifs aux pages web. Cela se traduit par le changement programmé de la structure du DOM à travers les instructions qui ont été téléchargées à travers le(s) fichier(s) JavaScript contenu(s) dans la page.

Entraînez une lecture selective basée sur le code :

1. Lisez d'abord le bout de code correspondant
2. Si vous le comprenez (vraiment !) passez à l'étape suivante
3. Si non, lisez les explications

Suivre les exemples étape par étape de la page :

• Interactivité avec JavaScript

L'exemple 4.1 Bouton reprend en grand partie le concept de base déjà vu en Premiers pas avec JavaScript, mais les expliquent de manière plus approfondie. Si vous trouvez cela trop simple, commencez déjà avec 4.2 Plusieurs boutons.

Tous les exemples illustrés dans cette page sont disponibles dans un repository de GitHub :

• Index avec la liste de tous les exemples
  pour voir/essayer les pages dans votre navigateur.

• Repository MALTT-STIC/stic-1-interaction-with-js
  pour télécharger les fichiers ou voir le code source complet.

Workshop JavaScript côté-client

Workshop sur JavaScript côté-client :

• MALTT-STIC/stic-1-javascript-client-side

Design d'Interface Utilisateur (UI)

L'interactivité prévoit la nécessité de manier des éléments à l'interface utilisateur (UI), c'est-à-dire qu'il ne faut pas simplement penser en terme d'architecture de l'information (e.g. comment afficher un texte, une image, ...), mais également en termes de flux d'interaction (e.g. que se passe-t-il quand je fais X ?).

Le design d'interface est un sujet qui sera abordé plus spécifiquement dans le domaine ERGO, mais il peut être utile d'avoir déjà quelques repères pour vos exercices.

Principes de design visuel

Il existe des philosophies ou des principes de design qui essayent de maximiser l'utilisabilité des interfaces. Dans le contexte introductif de ce cours vous pouvez vous référez par exemple aux principes du design visuel, plus particulièrement à l'acronyme CRAP :

• Contraste : distinction des éléments du background/foreground grâce à l'utilisation du contraste clair/foncé
• Répétition : le système visuel humain apprécie les régularités, les patterns qui se répètent pour créer une uniformité
• Alignement : la recherche d'information est facilité si les éléments sont placés en fonction de guides du regard (e.g. c'est plus facile de lire un long texte aligné à gauche que centré)
• Proximité : le système visuel a la tendance à traiter des éléments proche spatialement comme entraînant une relation sémantique plus étroite par rapport aux éléments éloignés

Les principes CRAP

Utilisation de CSS atomiques

Il existe des framework ou feuille de style CSS déjà codés qui ont basés sur un principe d'atomisation des classes CSS. Ce principe consiste à créer des micro-classes CSS, chacune exécutant une tâche assez restreinte (e.g. centrer, colorer, appliquer une bordure, ...) ou représentant une composante (e.g. un bouton). Voici un exemple fictif qui montre la logique :

<div class="bg-dark text-white text-center border">
  <p class="margin-top-small text-big">
    Pour obtenir une nouvelle série d'icônes pour créer une histoire, cliquez sur le bouton
  </p>
  <button class="btn btn-big btn-orange">Obtenir les icônes</button>
</div>

Des framework CSS qui appliquent la logiques sont les suivants :

• Bootstrap
• W3.CSS
• Tailwind CSS

Nous verrons le third party code dans l'exercice 6 de STIC I, donc ce n'est pas une contrainte formelle de cette exercice, mais si vous vous sentez assez à l'aise, vous pouvez déjà vous lancer !

Utiliser SVG comme UI

Il est également possible d'utiliser un ou plusieurs éléments SVG pour créer une interface utilisateur plus complexe ou graphique par rapport aux boites de HTML5.

SVG avec JavaScript

Synthèse des principes de base de l'interactivité avec JavaScript

Trois caractéristiques d'une application interactive qui utilise une interface utilisateur.

• Faire le trait d'union entre l'Introduction à la programmation et Interactivité avec JavaScript
• Interactivité = inputs générés par les utilisateurs
• Fonctionnement de JavaScript côté-client : l'utilisateur télécharge les instructions avec le contenu de la page
  • JavaScript a accès à la page grâce à l'objet global window et au DOM grâce à l'objet window.document
  • Tout élément d'une page peut être rendu interactif avec la même démarche :
    1. Identifier l'élément parmi tous les éléments
    2. Lui appliquer un gestionnaire d'événements
    3. Appliquer à l'intérieur du gestionnaire une règle qui génère une modification

    

    Structure d'une interaction, adaptation de What is a microinteraction de Saffer (2014)

• Possibilité d'animer le DOM (Animation avec JavaScript)
• Accès à travers le navigateur à d'autres API (e.g. Canvas (HTML5), Géolocalisation, Webcam, ...)
  • Lien avec exercice 4 : HTML5 audio et video
• Importance du guidage pour suggérer les interactions attendues par l'application et orienter l'attention au(x) bon(s) endroit(s)
  • « Tout le monde sait ce qu’est l’attention. C’est la prise de possession par l’esprit, sous forme claire et vive, de l’un parmi ce qui semble plusieurs objets ou trains de pensée simultanément possibles. La focalisation, la concentration de la conscience, participent de son essence. Elle implique un retrait de certaines choses afin de traiter efficacement les autres (…) » (William James, Principes de psychologie, 1890, p.404).

À retenir :

L'interactivité avec JavaScript consiste dans le changement programmé du DOM à travers les instructions contenues dans un ou plusieurs scripts. Ces changements se reflètent dans la mise à jour de l'interface utilisateur affichée par le navigateur.

Projet 3 / Tâche

Voici de suite la description détaillée de la tâche et le matériel de support à votre disposition pour compléter l'exercice pendant la période à distance.

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

• Interactivité avec JavaScript
   : aspects théoriques et pratiques, lecture commune avec exercice 4, niveau des exemples à calibrer en fonction de vos besoins et intérêts. Cette page est associé à la référence Tutoriel JavaScript côté client dont la consultation peut être également utile.

• Computation avec JavaScript
   : aspects théoriques et pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts. Cette page est associée à la référence Tutoriel JavaScript de base dont la consultation peut être également utile.

Tutoriels vidéos d'accompagnement à cet exercice (accès UNIGE nécessaire) :

• Tutoriel vidéo "Rendre un élément HTML5 interactif avec JavaScript"

• Tutoriel vidéo "Créer une application interactive sur les noms des couleurs"

Dispositif

Imaginez un design pédagogique interactif dans lequel l'utilisateur puisse déterminer des modifications par rapport au contenu initial.

• Créez une page HTML5/CSS qui contient des éléments interactifs (e.g. click, mouseover, etc.)
• Ajoutez une ou plusieurs manipulations du DOM suite à un événement (e.g. afficher un feedback, remplacer une image, etc.)
• Le tout doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage !)

Vous pouvez adapter/revisiter tous les exemples disponibles dans le matériel de support, voir également :

• SVG avec JavaScript

si vous voulez rendre un dessin SVG interactif en continuité avec l'exercice 2. Mais ne répétez pas simplement le principe de la Flash card !

Contraintes

• Contenu de la page selon vos envies, mais en rapport avec une thématique MALTT
• Vous devez inclure un fichier JavaScript externe
• Vous devez créer au moins une action interactive déclenchée par l'utilisateur qui modifie le contenu de la page en modifiant le DOM
  • C'est-à-dire gestionnaire d'événement + règle de comportement + feedback à l'interface
  • Pas de drag&drop (on le verra en P3)
• Votre code doit contenir au moins l'une de ces caractéristiques (à choix) :
  • Une structure de contrôle de type if... else...
  • La génération d'un élément aléatoire
  • L'utilisation d'une boucle for..., while, ou forEach
• Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif
• Vous pouvez vous appuyer sur des exemples vus en cours ou disponibles dans le matériel pédagogique, mais il faudra au moins adapter le code JavaScript (pas simplement changer/adapter le contenu HTML)
• Vous ne pouvez pas combiner sur la même page les exercices 3 et 4
  • Mais vous pouvez utiliser le même sujet (e.g. mini-site avec deux pages)

Conseils

Voici quelques conseils pour cet exercice :

• Ne vous lancez pas tout de suite dans votre projet d'application. Essayez d'abord des exemples, donnez-vous un petit objectif atteignable (e.g. faire marcher un bouton) et gagnez confiance dans la compréhension du code.
• Commentez votre code, pas seulement/forcément en fonction de ce que le code fait, mais surtout pour la raison (quelle est l'intention du code ?)
• Référez vous aux concepts constitutifs de la pensée computationnelle, Par exemple, utilisez console.log("...") pour décomposer votre code et identifier la source du problème. Imaginez d'avoir un bouton qui déclenche une fonction quelconque. Vous cliquez sur le bouton et ça ne marche pas. Votre problème peut-être :
  1. Le gestionnaire d'événement associé au bouton ne marche pas
  2. La fonction déclenchée ne marche pas

var myBtn = document.getElementById("clickMe");
//Gestionnaire d'événement
myBtn.addEventListener(function () {
  //Mettez ici un console.log pour être sûr que votre événement est déclenché
  console.log("Le bouton clickMe marche!");
  //Puis votre fonction quelconque
  doSomething();
});

//Définissez votre fonction
function doSomething() {
  //Mettez ici un console.log pour être sûr que la fonction est invoquée
  console.log("doSomething a été invoquée!");
  //suite de votre code...
}

Avec ce type de décomposition vous pouvez savoir si le problème est dans le gestionnaire d'événement ou dans la fonction.

Pour les plus ambitieux

En général, si vous maîtrisiez bien JavaScript, concentrez-vous sur les aspects interactifs/ergonomiques/pédagogiques de l'application : il ne suffit pas de savoir coder pour créer un bon dispositif !

Critères d'évaluation

Malus

• Mauvais liens (fichier JavaScript, CSS)
• Copier/coller d'un snippet de code présenté au cours ou tiré d'internet sans aucune modification
• Agencement de la page approximatif
• Interactions pas claires/pas bien indiquées

Bonus

• Code bien organisé et "élégant"
• Documentation du code (raisonnable : pas plus de commentaires que de code...)
• Utilisation de techniques de programmation (cycles, structure de contrôle, etc.)
• Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...)
• Design graphique soigné (e.g. bonne utilisation CSS)
• Pour une très bonne note : l'application peut être "réutilisable" (e.g. génération aléatoire, bouton "start again", etc.)
  • Essayez d'aller au-delà de "poser une seule question et donner un feedback juste/faux"
  • Dans l'idéale, cherchez d'exploiter la capacité de l'ordinateur à faire des choses automatiquement

Rapport

Faites un rapport selon les guidelines habituelles :

• voir STIC:Rapport STIC I et II

En particulier pour cet exercice, essayez d'expliquer :

• En quoi les interactions que vous avez créées soutiennent les objectifs de votre dispositif ?
• Illustrez brièvement les interactions prévues/attendues et expliquez leur sens

Contribution Wiki

Contribution libre comme d'habitude :

• STIC:Contribution Wiki

Si vous créez un dispositif qui aborde un sujet traité dans une page EduTechWiki, vous pouvez ajouter le lien à la fin de la page, par exemple dans une section Ressources.

Délai

Dimanche 26 novembre, 21:00

Ressources

Théoriques

• Introduction à la programmation
• Pensée computationnelle
• Algorithme
• JavaScript
• Computation avec JavaScript
• Interactivité avec JavaScript

Techniques

Exemples

• Collection de simples exemples sur Codepen.io

Références de base

• Tutoriel JavaScript de base
• Tutoriel JavaScript côté client
• SVG avec JavaScript
• Review de ressources pour débuter JavaScript
• JavaScript sur Mozilla Developer Network (ressources pour plusieurs niveaux)
• Tutoriel JavaScript sur W3schools
• JavaScript and HTML DOM reference on W3Schools
• Il existe des dizaines de tutos sur le web et des livres mais attention : contrôlez qu'il s'agit de ressources récentes, si non il y a le risque de suivre des pratiques obsolètes.

Références plus avancées

• Animation avec JavaScript
• Canvas (HTML5) - API pour déssiner
• Géolocalisation sur MDN ou W3Schools
• Speech Recognition (very experimental)
• Vidéo sur le fonctionnement des événements en JavaScript par Philip Roberts (en anglais, environ 25min.)

Bibliographie

Livres pour débutants/intermédiares avec aussi de la théorie (free on the web/pay printable version)

• Haverbeke, M. (2018). Eloquent JavaScript. A modern Introduction to Programming. Third Edition. San Francisco, CA: No Starch Press. Accès libre depuis internet: http://eloquentjavascript.net/
• Simpson, K. (2015). You Don’t Know JS: Up & Going. O’Reilly Media. Accès libre à la version non editée de toute la série de livres https://github.com/getify/You-Dont-Know-JS

Livre sur les microinteractions (pas de code)

• Saffer, D. (2014). Microinteractions. Designing with details. Sebastopol, CA: O’Reilly Media.

Livres sur informatique/codage (pas de code)

• Denning, P. J., & Martell, C. H. (2015). Great Principles of Computing. Cambridge, MA: MIT press.
• Petzold, C. (2000). Code. The Hidden Language of Computer Hardware and Software. Redmond, WA: Microsoft Press.

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.