STIC:STIC I - exercice 5 (Yoshi)

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Cet exercice continue la découverte de l'interactivité avec JavaScript avec l'introduction du drag&drop. Pour ce faire, les bibliothèques JQuery et JQuery UI seront abordées.

Connaissances/compétences envisagées

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

• Comprendre le fonctionnement de JQuery par rapport au "vanilla" JavaScript
• Savoir consulter et utiliser une API différente/supplémentaire par rapport au langage de base
• Comprendre les enjeux techniques (et quelques aspects théoriques) du drag&drop
  • Savoir identifier et rendre un élément "draggable"
  • Savoir identifier et rendre une zone "droppable"
  • Savoir relier le drag&drop à la logique d'une application
• Réfléchir aux avantages/désavantages en termes pédagogiques d'une interaction drag&drop par rapport à d'autres interactions possibles

Prérequis

Lectures conseillées :

• JQuery : se familiariser avec la syntaxe de base --> $("..")

Prérequis techniques :

• Connaissances de base de HTML/CSS/JavaScript
• Savoir incorporer des fichiers externes JS/CSS en respectant les chemins !

Activité en salle de classe

Programme

• 14:00 - 14:30 : Introduction au drag&drop
• 14:30 - 15:30 : drag&drop avec jQuery et jQuery UI
• 16:00 - 17:00 : debriefing sur le cours STIC I / questions techniques pour le cours BASES

Introduction au drag&drop

• Évolution Graphical User Interfaces (GUI) dans le temps
  • Logiciels desktop vs. Web
  • Activité drag&drop vraiment intuitive ?
• La notion de affordance
  • En général

    « The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment » Gibson (1979, p. 127)

  • En UX

    « Relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used » Norman (2013, p. 11)

• La loi de Fitts
  • Définition : « This scientific law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. » (Wikipedia)
  • Formule souvent utilisée en UX sous le nom de loi de Shannon

    ${\text{ID}}=\log _{2}{\Bigg (}{\frac {D}{W}}+1{\Bigg )}$

    • ID is the index of difficulty.
    • D is the distance from the starting point to the center of the target.
    • W is the width of the target measured along the axis of motion.

  • Résumé : plus grand est la distance et plus petit le target, plus grande la difficulté
• Implications visuo-spatiales
  • Nécessite de motricité fine (à ne pas sous-estimer en fonction du public cible)
  • Notion d'approximation (e.g. placer les planètes à la distance correcte depuis le soleil vs. illustrer simplement l'ordre)

JQuery

• Utilisation de base, voir jQuery
• Petits exemples:
  • Compteur --> voir la différence avec exemple en "vanilla JavaScript"
  • Utilisation avec une liste de noeuds
  • Utilisation avec un formulaire
  • Enchaînement des manipulations
  • Avancé : Utilisation avec l'API de EduTechWiki
  • Avancé : Exemple QCM complexe (avec Tutoriel) --> à transformer éventuellement en page Wiki comme contribution

JQuery UI

• Page de référence
  JQuery UI
  • En particulier La séction sur le drag&drop

Exemples (code + liens)

Le code des exemples est disponibles :

• Repository MALTT-STIC/stic-1-jquery-ui
  pour le download
• Liste des exemples
  pour tester

Exemples de référence

jQuery UI - application drag and drop sans code supplémentaire

 : application sur nations/continents. Voir exemple 07 pour le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      jQuery Ui Exemple : application drag and drop sans code supplémentaire
    </title>
    <!-- Le fichier CSS -->
    <link
      rel="stylesheet"
      href="../assets/vendor/jquery-ui/jquery-ui.min.css"
    />
    <style>
      .item {
        float: left;
        width: 150px;
        border: 1px solid #999;
        background-color: #f9f6d0;
        padding: 10px 15px;
        font-weight: bold;
        font-size: 16px;
        margin-right: 20px;
        margin-bottom: 50px;
      }

      .clear {
        clear: both;
        overflow: hidden;
      }

      .container {
        float: left;
        width: 200px;
        height: 250px;
        border: 1px solid #999;
        background-color: #def8fc;
        padding: 10px 15px;
        margin-right: 20px;
      }
    </style>
  </head>

  <body>
    <h1>jQuery UI - application drag and drop sans code supplémentaire</h1>
    <p>
      Ce petit jeu concernant la géographie est développé exclusivement à l'aide
      des méthodes, options et événements disponibles &quot;out of the box&quot;
      avec jQuery UI, c'est-à-dire qu'il n'a pas fallu écrire du code JavaScript
      spécifique.
    </p>
    <p><strong>Trainer les pays dans le continent correspondant.</strong></p>
    <div class="item amerique">Bolivie</div>
    <div class="item afrique">Côte d'Ivoire</div>
    <div class="item europe">Grèce</div>
    <div class="item asie">Thailande</div>
    <div class="item amerique">Canada</div>
    <div class="item asie">Inde</div>
    <div class="item oceanie">Nouvelle Zelande</div>
    <div class="item afrique">Tanzanie</div>
    <div class="item europe">Moldavie</div>
    <div class="item oceanie">Australie</div>
    <div class="clear"></div>
    <div class="container afrique-container"><h2>Afrique</h2></div>
    <div class="container amerique-container"><h2>Amérique</h2></div>
    <div class="container asie-container"><h2>Asie</h2></div>
    <div class="container europe-container"><h2>Europe</h2></div>
    <div class="container oceanie-container"><h2>Oceanie</h2></div>
    <div class="clear"></div>
    <p>Voici le code pour cet exemple :</p>
    <pre>
&lt;script&gt;
$(&quot;.item&quot;).draggable({
   revert: &quot;invalid&quot;,
   cursor: &quot;move&quot;
});</pre
    >
    <pre>
$(&quot;.afrique-container&quot;).droppable({
   accept: &quot;.afrique&quot;
});
$(&quot;.amerique-container&quot;).droppable({
   accept: &quot;.amerique&quot;
});
$(&quot;.asie-container&quot;).droppable({
   accept: &quot;.asie&quot;
});
$(&quot;.europe-container&quot;).droppable({
   accept: &quot;.europe&quot;
});
$(&quot;.oceanie-container&quot;).droppable({
   accept: &quot;.oceanie&quot;
});
&lt;/script&gt;</pre
    >
    <hr />
    <p><a href="https://tecfa.unige.ch/perso/mafritz/">MAF</a> (29.11.2018)</p>
    <!-- Les fichiers JavaScript dans l'ordre suivant -->
    <script src="../assets/vendor/jquery-ui/external/jquery/jquery.js"></script>
    <script src="../assets/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script>
      $(".item").draggable({
        revert: "invalid",
        cursor: "move"
      });

      $(".afrique-container").droppable({
        accept: ".afrique"
      });
      $(".amerique-container").droppable({
        accept: ".amerique"
      });
      $(".asie-container").droppable({
        accept: ".asie"
      });
      $(".europe-container").droppable({
        accept: ".europe"
      });
      $(".oceanie-container").droppable({
        accept: ".oceanie"
      });
    </script>
  </body>
</html>

Il s'agit d'un exemple de référence technique ! D'un point de vue pédagogique, ce type d'application n'exploite pas vraiment le drag&drop

Projet 5 / 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.

• Bibliothèques JavaScript
   : aspects théoriques et pratiques, lecture commune avec exercice 6, niveau des bibliothèques à calibrer en fonction de vos besoins et intérêts
• jQuery
   : aspects pratiques, lecture conseillée pour se familiariser avec la syntaxe
• jQuery UI
   : aspects pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts

Dispositif

Faites une application JavaScript/JQuery qui implémente une application pédagogique "drag and drop" que vous avez conçue vous-même.

• Créez une page HTML5/CSS qui contient plusieurs éléments "draggable"
• Ajoutez à la page une ou plusieurs zones "droppable"
• L'action du drag&drop doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage !)

Contraintes

• Le sujet de l'application doit être en rapport avec une thématique "MALTT"
• Vous pouvez (mais ne devez pas) reprendre le code des exemples discuté en cours.
• Il faut veiller à bien introduire l'utilisateur à la tâche. Cela peut se faire avec une page d'entrée qui explique le contexte et donne éventuellement une petite aide (mais cette dernière peut aussi se placer dans la page pour le "jeu"). Note: Il est possible d'utiliser une seule page HTML (à condition que ses éléments changent, plus difficile à implémenter).
• Vous pouvez utiliser du "artwork" externe (mais pas plus que 66 %)
• Vous pouvez utiliser et/ou adapter du code JavaScript/JQuery fabriqué par d'autres, mais vous devez le citer et vérifier les droits.
• Vous devez citer les sources !

Exercice alternatif

Utilisez l'API JavaScript au lieu de jQuery/jQuery UI. Dans ce cas il faudra également documenter l'API et améliorer la page Drag and drop javascript créée par un étudiant l'année passée.

Critères d'évaluation

Malus

• Mauvais liens (fichier JavaScript, CSS)
• Utilisation de JavaScript dans les attributs HTML
• Agencement des éléments "draggable" et de la zone "droppable" approximatif (e.g. trop distant)
• Action de drag&drop pas signalée, difficile à comprendre

Bonus

• Éléments "draggable" facile à reconnaître et de taille convenable
• Zone(s) "draggable" facile à identifier et de taille convenable
• Distance entre drag et drop réduite par un bon agencement de la page
• Indications pertinentes sur les modalités d'utilisation (mais pas trop de texte!)
• Code bien organisé et élégant
• Design graphique soigné
• Organisation du contenu

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 drag&drop que vous avez créées soutiennent vos objectifs d'apprentissage/d'utilisation

Contribution Wiki

Contribution libre comme d'habitude :

• STIC:Rapport STIC I et II#Contribution_Wiki

Quelques suggestions :

• Ajouter/améliorer Review de ressources pour débuter JavaScript
• Améliorer les pages JQuery et JQuery UI
• Améliorer/refaire/effacer/incorporer ailleur la page Evénements JQuery
• Améliorer/refaire la page Drag and drop javascript (voir exercice alternatif)
• Transformer ce tutoriel en page Wiki

Délai

À contrôler : Jeudi 1 février à 09:00

Attention :

• il faut qu'on transmet les notes au secrétariat, donc cette date n'est pas négociable et si vous ne rendez pas votre exercice dans le délai, nous allons noter avec un 0.
• si vous voulez éviter un 0, vous devez nous communiquer avant ce délai par email (M. Schneider + Mattia et Stéphane) que vous allez rendre vos exercices pour la session de rattrapage en août/septembre (voir le règlement du cours pour plus d'infos)

Liens

Théoriques

• Fitts' law in The Glossary of Human Computer Interaction
• Affordances in The Encyclopedia of Human-Computer Interaction, 2nd Ed.

Techniques

• Tutoriel JavaScript de base et Tutoriel JavaScript côté client
• JQuery et JQuery UI
• Tutoriel jQuery sur W3schools
• API jQuery
• API jQuery UI

Bibliographie

• Norman, D. A. (2013). The Design of Everyday Things. New York, NY: Basic Books.
• Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston, MA: Houghton Mifflin Harcourt

Aide

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.

Journée de Support Libre

Le jeudi de la semaine après la semaine des cours en présence M1 (i.e. celle où vous avez STIC le vendredi), une Journée de Support Libre et organisée pour vous aider, entre autre, à progresser avec vos exercice STIC. La présence d'au moins un assistant/moniteur spécifiquement pour STIC est garantie de 10h à 12h s'il y a assez d'étudiants qui ont manifesté leur présence.

• voir Journée de Support Libre pour plus d'informations et pour annoncer votre présence à la journée