« STIC:STIC I - exercice 5 (Aegir) » : différence entre les versions
Aucun résumé des modifications |
(Archivage de la page) |
||
(19 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
{{ | {{stic archive}} | ||
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | <categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | ||
Ligne 6 : | Ligne 5 : | ||
== Introduction == | == 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. | Cet exercice continue la découverte de l'interactivité avec [[JavaScript]] avec l'introduction du glisser-déposer (''drag&drop'' en anglais). Pour ce faire, les bibliothèques [[JQuery]] et [[JQuery UI]] seront abordées. | ||
=== Connaissances/compétences envisagées === | === Connaissances/compétences envisagées === | ||
Ligne 34 : | Ligne 33 : | ||
===Programme=== | ===Programme=== | ||
* 14:00 - 14:30 : | * 14:00 - 14:20 : Activité individuelle sur la présentation interactive (voir plus bas) | ||
* 14:20 - 14:30 : Renvoie présentation ensemble | |||
* 14:30 - 15:30 : drag&drop avec [[jQuery]] et [[jQuery UI]] | * 14:30 - 15:30 : drag&drop avec [[jQuery]] et [[jQuery UI]] | ||
* 16:00 - 17:00 : debriefing sur le cours STIC I | * 16:00 - 17:00 : debriefing sur le cours STIC I | ||
Ligne 42 : | Ligne 42 : | ||
==== Présentation ==== | ==== Présentation ==== | ||
{{ Goblock | | Rappel application [https://tecfa.unige.ch/perso/mafritz/teaching/stic-1/apps/number-sorting-game/ ''Number Sorting Games''] avec 3 modalités interactives différentes : | ||
* [https://tecfa.unige.ch/perso/mafritz/teaching/stic-1/apps/number-sorting-game/write-response.html Saisie au clavier] | |||
* [https://tecfa.unige.ch/perso/mafritz/teaching/stic-1/apps/number-sorting-game/point-and-click.html Point-and-click] | |||
* [https://tecfa.unige.ch/perso/mafritz/teaching/stic-1/apps/number-sorting-game/drag-and-drop.html '''Drag-and-drop'''] | |||
Présentation général sur la technique du glisser-déposer : | |||
{{ Goblock | [https://mafritz.ch/slides/fr/glisser-deposer/#/ Slides interactives sur le glisser-déposer] }} | |||
==== Synthèse des points principaux ==== | ==== Synthèse des points principaux ==== | ||
* Évolution Graphical User Interfaces (GUI) dans le temps | * Évolution Graphical User Interfaces (GUI) dans le temps | ||
** Logiciels desktop vs. Web | ** Logiciels desktop vs. Web : les interfaces graphiques des logiciels ont évolué à partir des années 1960 environ et elles ont fait rapidement des progrès sur le plan des actions (plus lent au niveau ''esthétique''). En revanche, les pages web qui sont apparues au début des années 1990 n'avaient que du texte et des liens hypertextuels. Au niveau de l'interface graphique il y a donc eu un ''retour en arrière''. Avec les années et surtout l'idée du web 2.0 dans les années 2000, les pages web aussi ont commencé à avoir des interfaces graphiques complexes, au point qu'il n'y a pratiquement plus de différence entre interfaces graphiques logiciels et pages/applications web. | ||
** Activité drag&drop vraiment intuitive ? | ** Activité drag&drop vraiment intuitive ? En dépit du fait que la glisser-déposer soit très répandu dans plusieurs types de logiciels ou applications web, son utilisabilité a fait l'objet de nombreuses recherches. En effet, l'action en elle-même n'est parfois pas très évidente ou coéhrente. Par exemple, dans un gestionnaire de fichier, le fait de glisser-déposer un fichier depuis un dossier à un autre peut entraîner l'action de '''bouger''' le fichier ou de le '''copier''' selon certains conditions du dossier de départ ou de destination. L'action en elle-même ne permet pas de distinguer donc si on copie ou on bouge le fichier. Autre exemple : pendant un certain temps, quand on utilisait encore souvent des CD/DVD, sur les dispositifs Apple on pouvait glisser-déposer le CD sur la corbeille pour l’éjecter, mais pour certains utilisateurs cette action était en peu effrayante car ils pensaient de détruire les fichiers du support ! | ||
* La notion de [https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances '''affordance'''] | * La notion de [https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances '''affordance'''] | ||
** En général | ** En général | ||
Ligne 62 : | Ligne 70 : | ||
**:* W is the width of the target measured along the axis of motion. | **:* 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é''' | ** Résumé : '''plus grand est la distance et plus petit le target, plus grande la difficulté''' | ||
* Implications visuo-spatiales | * Implications ergonomiques et visuo-spatiales | ||
** Bien signaler la possibilité du glisser-déposer et indiquer clairement le résultat attendu ou des éventuels erreurs | |||
** Nécessite de motricité fine (à ne pas sous-estimer en fonction du public cible) | ** Nécessite de motricité fine (à ne pas sous-estimer en fonction du public cible) | ||
** | * Trois applications pédagogiques possibles (non mutuellement exclusives) : | ||
* | *# Relation item-conteneur (e.g. classer les éléments par catégorie) | ||
*# Degré d'approximation spatial (e.g. placer un élément ''le plus proche possible'' à sa position ''correcte'') | |||
*# Correspondance visuo-spatiale relative et/ou absolue (e.g. placer des éléments sur une carte géographique) | |||
=== JQuery === | === JQuery === | ||
* Utilisation de base, voir [[jQuery]] | * Utilisation de base, voir [[jQuery]] ou [[Questionnaire avec jQuery]] | ||
* Petits exemples: | * Petits exemples: | ||
** [http://codepen.io/mafritz/pen/YpaGQr Compteur] --> voir la différence avec exemple en [http://codepen.io/mafritz/pen/NNmgqG "vanilla JavaScript"] | ** [http://codepen.io/mafritz/pen/YpaGQr Compteur] --> voir la différence avec exemple en [http://codepen.io/mafritz/pen/NNmgqG "vanilla JavaScript"] | ||
Ligne 77 : | Ligne 87 : | ||
** [http://codepen.io/mafritz/pen/LbdqVe Enchaînement des manipulations] | ** [http://codepen.io/mafritz/pen/LbdqVe Enchaînement des manipulations] | ||
** Avancé : [http://codepen.io/mafritz/pen/qqoaGV Utilisation avec l'API de EduTechWiki] | ** Avancé : [http://codepen.io/mafritz/pen/qqoaGV Utilisation avec l'API de EduTechWiki] | ||
=== JQuery UI === | === JQuery UI === | ||
Ligne 93 : | Ligne 102 : | ||
À voir particulièrement : | À voir particulièrement : | ||
* [https://maltt-stic.github.io/stic-1-jquery-ui/ex03-drag-simple/ Drag simple] ( | * [https://maltt-stic.github.io/stic-1-jquery-ui/ex03-drag-simple/ Drag simple] (ex03): comment appliquer facilement le comportement draggable à un élément | ||
* [https://maltt-stic.github.io/stic-1-jquery-ui/ex04-drag-with-options/ Drag avec options] ( | * [https://maltt-stic.github.io/stic-1-jquery-ui/ex04-drag-with-options/ Drag avec options] (ex04) : fournir des options au comportement draggable, par exemple pour limite l'axe de mouvement ou modifier le type de curseur pour signaler l'affordance | ||
* [https://maltt-stic.github.io/stic-1-jquery-ui/ex05-drop-basic/ Drop basic] ( | * [https://maltt-stic.github.io/stic-1-jquery-ui/ex05-drop-basic/ Drop basic] (ex05) : comment appliquer le comportement droppable à un élément, et accepter seulement certains élément draggable | ||
==== Exemples de référence technique ==== | ==== Exemples de référence technique ==== | ||
Application sur nations/continents. '''Voir exemple | Application sur nations/continents. '''Voir exemple 06 pour le code''' : | ||
* {{ Goblock | [https://maltt-stic.github.io/stic-1-jquery-ui/ex06-countries-continents-example/ jQuery UI - application drag and drop sans code supplémentaire] }} | * {{ Goblock | [https://maltt-stic.github.io/stic-1-jquery-ui/ex06-countries-continents-example/ jQuery UI - application drag and drop sans code supplémentaire] }} | ||
Ligne 240 : | Ligne 249 : | ||
## Adaptez le code HTML et JavaScript pour ajouter le mécanisme de contrôle comme pour les autres conteneurs/continents | ## Adaptez le code HTML et JavaScript pour ajouter le mécanisme de contrôle comme pour les autres conteneurs/continents | ||
'''Faites attention à modifier le code dans le script, pas le code affiché à l'intérieur de la balise <nowiki><pre>...</pre></nowiki> que vous pouvez d'ailleurs effacer si cela vous gêne.''' | {{ bloc important | '''Faites attention à modifier le code dans le script, pas le code affiché à l'intérieur de la balise <nowiki><pre>...</pre></nowiki> que vous pouvez d'ailleurs effacer si cela vous gêne.''' }} | ||
== Projet 5 / Tâche == | == Projet 5 / Tâche == | ||
Ligne 265 : | Ligne 274 : | ||
* Le sujet de l'application doit être en rapport avec une thématique "MALTT" | * Le sujet de l'application doit être en rapport avec une thématique "MALTT" | ||
* Vous pouvez reprendre le code des exemples proposés dans le matériel pédagogique '''à condition de le modifier de manière substantielle''' (e.g. ne pas se limiter à changer les labels des items et des conteneurs) | * Vous pouvez reprendre le code des exemples proposés dans le matériel pédagogique '''à condition de le modifier de manière substantielle''' (e.g. ne pas se limiter à changer les labels des items et des conteneurs). En particulier : | ||
** Vous devez déclencher '''au moins une fonction''' depuis votre configuration de la méthode .draggable() ou .droppable(), par exemple : | |||
** <source lang="JavaScript"> | |||
$(".vos-elements-glissables").draggable({ | |||
..., | |||
drag: function(event, ui) { | |||
// Faire quelque chose d'utile au niveau pédagogique ou ergonomique | |||
} | |||
}) | |||
$(".votre-target").droppable({ | |||
..., | |||
drop: function (event, ui) { | |||
// Faire quelque chose d'utile au niveau pédagogique ou ergonomique | |||
} | |||
}) | |||
</source> | |||
* 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 ou directement sur la page du dispositif lui-même, par exemple à travers une manipulation du DOM qui cache/affiche le texte. | * 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 ou directement sur la page du dispositif lui-même, par exemple à travers une manipulation du DOM qui cache/affiche le texte. | ||
* Vous pouvez utiliser des éléments graphiques externes (e.g. SVG) et/ou du code JavaScript/JQuery fabriqué par d'autres, mais vous devez citer la source et vérifier les droits. | * Vous pouvez utiliser des éléments graphiques externes (e.g. SVG) et/ou du code JavaScript/JQuery fabriqué par d'autres, mais vous devez citer la source et vérifier les droits. | ||
Ligne 333 : | Ligne 358 : | ||
* Améliorer/refaire/effacer/incorporer ailleur la page [[Evénements JQuery]] | * Améliorer/refaire/effacer/incorporer ailleur la page [[Evénements JQuery]] | ||
* Améliorer/refaire la page [[Drag and drop javascript]] (voir exercice alternatif) | * Améliorer/refaire la page [[Drag and drop javascript]] (voir exercice alternatif) | ||
* Améliorer la page [[Flexbox]] | * Améliorer la page [[Flexbox]] | ||
=== Délai === | === Délai === | ||
{{ bloc important | ''' | {{ bloc important | '''Mercredi 20 janvier à 21h00''' }} | ||
== Liens == | == Liens == |
Dernière version du 14 septembre 2021 à 16:18
Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)
Introduction
Cet exercice continue la découverte de l'interactivité avec JavaScript avec l'introduction du glisser-déposer (drag&drop en anglais). 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 :
- : 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:20 : Activité individuelle sur la présentation interactive (voir plus bas)
- 14:20 - 14:30 : Renvoie présentation ensemble
- 14:30 - 15:30 : drag&drop avec jQuery et jQuery UI
- 16:00 - 17:00 : debriefing sur le cours STIC I
Introduction au drag&drop
Présentation
Rappel application Number Sorting Games avec 3 modalités interactives différentes :
Présentation général sur la technique du glisser-déposer :
Synthèse des points principaux
- Évolution Graphical User Interfaces (GUI) dans le temps
- Logiciels desktop vs. Web : les interfaces graphiques des logiciels ont évolué à partir des années 1960 environ et elles ont fait rapidement des progrès sur le plan des actions (plus lent au niveau esthétique). En revanche, les pages web qui sont apparues au début des années 1990 n'avaient que du texte et des liens hypertextuels. Au niveau de l'interface graphique il y a donc eu un retour en arrière. Avec les années et surtout l'idée du web 2.0 dans les années 2000, les pages web aussi ont commencé à avoir des interfaces graphiques complexes, au point qu'il n'y a pratiquement plus de différence entre interfaces graphiques logiciels et pages/applications web.
- Activité drag&drop vraiment intuitive ? En dépit du fait que la glisser-déposer soit très répandu dans plusieurs types de logiciels ou applications web, son utilisabilité a fait l'objet de nombreuses recherches. En effet, l'action en elle-même n'est parfois pas très évidente ou coéhrente. Par exemple, dans un gestionnaire de fichier, le fait de glisser-déposer un fichier depuis un dossier à un autre peut entraîner l'action de bouger le fichier ou de le copier selon certains conditions du dossier de départ ou de destination. L'action en elle-même ne permet pas de distinguer donc si on copie ou on bouge le fichier. Autre exemple : pendant un certain temps, quand on utilisait encore souvent des CD/DVD, sur les dispositifs Apple on pouvait glisser-déposer le CD sur la corbeille pour l’éjecter, mais pour certains utilisateurs cette action était en peu effrayante car ils pensaient de détruire les fichiers du support !
- 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)
- En général
- 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
-
- 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 ergonomiques et visuo-spatiales
- Bien signaler la possibilité du glisser-déposer et indiquer clairement le résultat attendu ou des éventuels erreurs
- Nécessite de motricité fine (à ne pas sous-estimer en fonction du public cible)
- Trois applications pédagogiques possibles (non mutuellement exclusives) :
- Relation item-conteneur (e.g. classer les éléments par catégorie)
- Degré d'approximation spatial (e.g. placer un élément le plus proche possible à sa position correcte)
- Correspondance visuo-spatiale relative et/ou absolue (e.g. placer des éléments sur une carte géographique)
JQuery
- Utilisation de base, voir jQuery ou Questionnaire avec 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
JQuery UI
- Page de référence
- En particulier La séction sur le drag&drop
Exemples (code + liens)
Le code des exemples est disponibles :
- pour le download
- pour tester
À voir particulièrement :
- Drag simple (ex03): comment appliquer facilement le comportement draggable à un élément
- Drag avec options (ex04) : fournir des options au comportement draggable, par exemple pour limite l'axe de mouvement ou modifier le type de curseur pour signaler l'affordance
- Drop basic (ex05) : comment appliquer le comportement droppable à un élément, et accepter seulement certains élément draggable
Exemples de référence technique
Application sur nations/continents. Voir exemple 06 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 "out of the box"
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>
<script>
$(".item").draggable({
revert: "invalid",
cursor: "move"
});</pre
>
<pre>
$(".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></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>
Petit exercice
Adaptez l'exemple de référence du point précédent de la manière suivante :
- Ajoutez deux nations pour qu'elles puissent être placées dans les conteneurs correspondants (seulement HTML)
- Complexifiez l'exercice avec un conteneur supplémentaire :
- Insérez deux items draggable avec des noms de villes ou régions ou autre (tout sauf le nom d'un pays)
- Insérez un conteneur droppable labellisé "Pas un pays"
- Adaptez le code HTML et JavaScript pour ajouter le mécanisme de contrôle comme pour les autres conteneurs/continents
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.
- : aspects théoriques et pratiques, lecture commune avec exercice 6, niveau des bibliothèques à calibrer en fonction de vos besoins et intérêts
- : aspects pratiques, lecture conseillée pour se familiariser avec la syntaxe
- : 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 reprendre le code des exemples proposés dans le matériel pédagogique à condition de le modifier de manière substantielle (e.g. ne pas se limiter à changer les labels des items et des conteneurs). En particulier :
- Vous devez déclencher au moins une fonction depuis votre configuration de la méthode .draggable() ou .droppable(), par exemple :
$(".vos-elements-glissables").draggable({ ..., drag: function(event, ui) { // Faire quelque chose d'utile au niveau pédagogique ou ergonomique } }) $(".votre-target").droppable({ ..., drop: function (event, ui) { // Faire quelque chose d'utile au niveau pédagogique ou ergonomique } })
- 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 ou directement sur la page du dispositif lui-même, par exemple à travers une manipulation du DOM qui cache/affiche le texte.
- Vous pouvez utiliser des éléments graphiques externes (e.g. SVG) et/ou du code JavaScript/JQuery fabriqué par d'autres, mais vous devez citer la source et vérifier les droits.
- Vous ne pouvez pas combiner sur la même page les exercices 5 et 6
- Mais vous pouvez utiliser le même sujet (e.g. mini-site avec deux pages)
Conseils
Pour un exercice très bien fait et original vous pouvez considérer les éléments suivants :
- Vous pouvez rendre presque tout type d'élément "draggable" (e.g. images, audio, vidéos, ...)
- Attention : très probablement vous ne pouvez pas faire du drag&drop à l'intérieur d'un élément SVG, mais vous pouvez trainer des éléments SVG séparés. Même principe pour un SVG en tant que target "droppable", à la limite vous pouvez construire un "wrapper" HTML autour :
<div class="draggable-element"><svg ...></div>
)
- Attention : très probablement vous ne pouvez pas faire du drag&drop à l'intérieur d'un élément SVG, mais vous pouvez trainer des éléments SVG séparés. Même principe pour un SVG en tant que target "droppable", à la limite vous pouvez construire un "wrapper" HTML autour :
- Pensez à une scénarisation qui exploite les dimensions visuo-spatiales du drag&drop
- Pour faciliter l'agencement des items draggable et/ou des zones droppable vous pouvez vous appuyer sur Flexbox
- Voir également la page Flexbox sur ce Wiki (à améliorer)
Exercice alternatif
Si vous n'aimez pas la snytaxe jQuery/jQuery UI ou vous voulez essayer quelque chose de différente vous pouvez :
- Utilisez l'API JavaScript de base pour le Drag&Drop (i.e. pas de bibliothèque externe réquise). 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.
- Utilisez (et documenter) une autre bibliothèque JavaScript, par exemple :
- InteractJS (pas testé par l'équipe STIC)
- DraggableJS (pas testé par l'équipe STIC)
- Autres...
Critères d'évaluation
- Malus
- Mauvais liens (fichier JavaScript, CSS)
- Agencement des éléments "draggable" et de la zone "droppable" approximatif (e.g. trop distant)
- Action de drag&drop pas signalée, difficile à comprendre
- Zones "droppables" trop petites en fonction de la taille et/ou du nombre des éléments "droppable" à placer
- Bonus
- Application concrète des critères d'affordance et loi de Fitts
- É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 :
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 pour la période selon les guidelines habituelles :
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)
- Améliorer la page Flexbox
Délai
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.