« STIC:STIC I - exercice 5 (Xerneas) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Délai) |
mAucun résumé des modifications |
||
| (2 versions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{ | {{stic archive}} | ||
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | ||
| Ligne 100 : | Ligne 100 : | ||
du code JavaScript spécifique. </p> | du code JavaScript spécifique. </p> | ||
<p><strong>Trainer les pays dans le continent correspondant.</strong></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 afrique">Côte d Ivoire</div> | ||
<div class="item europe">Grèce</div> | <div class="item europe">Grèce</div> | ||
| Ligne 110 : | Ligne 110 : | ||
<div class="item europe">Moldavie</div> | <div class="item europe">Moldavie</div> | ||
<div class="item oceanie">Australie</div> | <div class="item oceanie">Australie</div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
<div class="container afrique-container"><h2>Afrique</h2></div> | <div class="container afrique-container"><h2>Afrique</h2></div> | ||
| Ligne 217 : | Ligne 217 : | ||
=== Délai === | === Délai === | ||
''' | '''Jeudi 1 février à 09:00''' | ||
'''Attention''' : | '''Attention''' : | ||
Dernière version du 20 septembre 2018 à 16:17
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 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 - 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
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
- Démo / étudier les exemples drag and drop dans le tutoriel JQuery UI
Hands on
- Télécharger une config. de JQuery UI, ensuite dezipper dans un dossier approprié.
- Enregistrez une copy du HTML de jQuery UI - application drag and drop sans code supplémentaire (Exemple de difficulté moyenne). N'enregistrez pas la page complète !
- Il suffit de bouger la page dans le dossier jquery-ui-1.11.2.custom et elle marchera. Le dossier contient déjà la bibliothèque JQuery (dans le dossier external).
Une version raccourcie de cet exemple simple est ci-dessous:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Ui Exemple : application drag and drop sans code supplémentaire</title>
<link rel="stylesheet" type="text/css" href="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 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>
<hr>
<p><a href="http://tecfaetu.unige.ch/perso/maltt/fritz0/">MAF</a> (23.08.2014)</p>
<script src="external/jquery/jquery.js"></script>
<script src="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>
Projet 5 / Tâche
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 :
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 :
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
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
Feedback intermédiaire
Vous pouvez demander un feedback intermédiaire sur votre travail à travers la page discussion de cet exercice (voir Aide plus bas) au plus tard 2 semaines avant le 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
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.
Séminaire de codage
Le lundi après la semaine des cours en présence (i.e. le lundi suivant le cours STIC du vendredi), un séminaire de codage est organisé par TECFA.