STIC:STIC I - exercice 5 (Xerneas)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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.

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 - 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

JQuery UI

  • Démo / étudier les exemples drag and drop dans le tutoriel JQuery UI

Hands on

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>
<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>
</p>
<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 :

Délai

Mercredi 31 janvier à 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

Liens

Théoriques

Techniques

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.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_5_(Xerneas)&oldid=74941 »