Différences entre les versions de « STIC:STIC I - exercice 5 (Utopia) »

De EduTech Wiki
Aller à la navigation Aller à la recherche
m
m (Annulation des modifications 52044 de Daniel K. Schneider (discussion))
 
(24 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
  
{{stic12}}
+
{{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 7 : Ligne 7 :
  
 
* Apprendre à créer des applications de type "drag and drop" avec JQuery
 
* Apprendre à créer des applications de type "drag and drop" avec JQuery
 +
* La notion "d'application" JavaScript.
  
 
== En salle de clase ==
 
== En salle de clase ==
  
* Etudier les exemples drag and drop dans le tutoriel [[JQuery_UI#Drag_and_drop_avec_jQuery_UI JQuery UI]]
+
=== Feedback ex 3 / 4 ===
  
 +
* Entre très bon, ok, à améliorer et rien ...
 +
* Pas assez de partage de ressources (une grande partie des exercices consiste à trouver des ressources appropriées)
 +
* Pas de questions !!
 +
* Page travail (respecter le XML !) Il faudrait notamment utiliser la balise ''exercice'' pour chaque exercice....
 +
* Livres JavaScript ? (démos)
 +
* A vos risques et périls:  http://it-ebooks.info
 +
 +
=== Rappel JavaScript ===
 +
 +
'''DOM, popups et simple manipulation de contenus'''
 +
* Dossier = http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-3-alert.html 1-3-alert.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-4-prompt-confirm.html 1-4-prompt-confirm.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-5-prompt-confirm-write.html 1-5-prompt-confirm-write.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-6-dom-change-modern.html 1-6-dom-change-modern.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-7-dom-change-button-modern.html 1-7-dom-change-button-modern.html]
 +
 +
'''Les formulaires HTML''' (pour info)
 +
* [http://tecfa.unige.ch/guides/js/ex/coap/week-3/1-demo-html-form-els.html 1-demo-html-form-els.html]
 +
 +
'''Information sur le navigateur'''
 +
* [http://tecfa.unige.ch/guides/js/ex/dom-intro/navigator-props.html navigator-props.html]
 +
 +
'''Manipulation de CSS'''
 +
* [http://tecfa.unige.ch/guides/js/ex/dhtml/change-background-style.html change-background-style.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/dhtml/change-style-3.html change-style-3.html] (Attributs CSS dans le DOM, attention à la syntaxe)
 +
* [http://tecfa.unige.ch/guides/js/ex/dhtml/get-elements-by-classname.html http://tecfa.unige.ch/guides/js/ex/dhtml/get-elements-by-classname.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/dhtml/move-object1.html move-object1.html]
 +
* [http://tecfa.unige.ch/guides/js/ex/dhtml/dynamicposition.html dynamicposition.html]
 +
 +
'''Rediriger une page avec JavaScript'''
 +
window.location = "http://tecfa.unige.ch";
 +
 +
=== JQuery UI ===
 +
* Etudier les exemples drag and drop dans le tutoriel [[JQuery_UI#Drag_and_drop_avec_jQuery_UI|JQuery UI]]
 +
* [http://jqueryui.com/download/ Télécharger une config. de JQuery UI], ensuite dezipper.
 +
* [http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/jquery-ui/ex6_drag_and_drop_no_code.html Exemple moyen] (Pays/Continents). Il suffit de copier/coller la page dans le répértoire ''jquery-ui-1.11.2.custom'' et il marchera
 +
 +
Une version raccourcie de cet exemple simple est ci-dessous:
 +
<source lang="javascript">
 +
<!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>
 +
 +
</source>
 +
 +
== Projet 5 ==
  
 
=== Tâche ===
 
=== Tâche ===
Ligne 17 : Ligne 152 :
 
'''Deadline''': Minuit, jeudi 29 janvier 2014
 
'''Deadline''': Minuit, jeudi 29 janvier 2014
  
(1) Faites une application JavaScript/JQuery qui implémente un "drag and drop"
+
(1) Faites une application JavaScript/JQuery qui implémente une application pédagogique "drag and drop" que vous avez conçue vous-même.
  
* Vous pouvez (mais ne devez pas) reprendre le code des exemples discuté en cours. Par contre il faut implémenter une page HTML d'entrée, une (ou plusieurs pages pour le jeu) et une page fin.  
+
* 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).
  
 
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"
Ligne 38 : Ligne 173 :
  
 
* Vous pouvez utiliser du "artwork" externe (mais pas plus que 66 %)
 
* 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 !
 
* Vous devez citer les sources !
  
Ligne 52 : Ligne 188 :
 
* Auto-évaluation
 
* Auto-évaluation
 
* Références
 
* Références
* Un lien vers le dispositif Flash (source)
+
* Un lien vers le dispositif  
* Un lien vers le dispositif Flash (swf et/ou HTML)
 
 
* Un lien vers vos contributions wiki ou alternativement un résumé en une phrase ''plus'' un lien vers votre home page wiki. Il faut que l'on sache ce qu'il faut compter pour chaque exercice sans jouer aux détectives.
 
* Un lien vers vos contributions wiki ou alternativement un résumé en une phrase ''plus'' un lien vers votre home page wiki. Il faut que l'on sache ce qu'il faut compter pour chaque exercice sans jouer aux détectives.
  
 
'''N'oubliez pas la contribution wiki obligatoire'''
 
'''N'oubliez pas la contribution wiki obligatoire'''
  
== Evaluation ==
+
=== Evaluation ===
 +
 
 +
Voir la grille dans Moodle (pareille pour tous les projets)
 +
 
 +
== Documentation et aide ==
 +
 
 +
=== Documentation ===
 +
 
 +
Pour apprendre un peu de JavaScript, lisez:
 +
* [[JavaScript]], une introduction "douce" à JavaScript
 +
* [[Tutoriel JavaScript de base]]
 +
 
 +
Pour JQuery, lisez:
 +
* [[JQuery]]
 +
* [[JQuery UI]] et notamment la partie [[JQuery_UI#Drag_and_drop_avec_jQuery_UI|Drag and drop avec jQuery UI]]
  
Voir la grille dans Moodle
+
Pour les démos
 +
* [[:en:DHTML]]
  
== Aide ==
+
Sinon, il existe littéralement des centaines de sites qui vous permettent d'apprendre du JavaScript.
 +
* [https://developer.mozilla.org/fr/docs/Web/JavaScript MDN] est réputé être un bon site pour les gens ayant déjà qqs. notions de base en informatique. La versions [https://developer.mozilla.org/en-US/docs/Web/JavaScript anglaise] est mieux développée.
 +
* [http://www.w3schools.com/js/default.asp W3Schools] ou [http://www.codecademy.com/ CodeAcademy] peuvent être conseillés aux débutant(e)s
 +
* Voir [[Liens JavaScript]] pour plus ...
  
Utilisez la page discussion de '''cette page''' pour poser des questions.
+
=== Aide ===
  
Pour insérer un nouveau titre, utilisez simplement le "+".
+
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.
 
'''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.

Version actuelle datée du 10 décembre 2015 à 19:15

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

1 Objectifs

  • Apprendre à créer des applications de type "drag and drop" avec JQuery
  • La notion "d'application" JavaScript.

2 En salle de clase

2.1 Feedback ex 3 / 4

  • Entre très bon, ok, à améliorer et rien ...
  • Pas assez de partage de ressources (une grande partie des exercices consiste à trouver des ressources appropriées)
  • Pas de questions !!
  • Page travail (respecter le XML !) Il faudrait notamment utiliser la balise exercice pour chaque exercice....
  • Livres JavaScript ? (démos)
  • A vos risques et périls: http://it-ebooks.info

2.2 Rappel JavaScript

DOM, popups et simple manipulation de contenus

Les formulaires HTML (pour info)

Information sur le navigateur

Manipulation de CSS

Rediriger une page avec JavaScript

window.location = "http://tecfa.unige.ch";

2.3 JQuery UI

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>

3 Projet 5

3.1 Tâche

Deadline: Minuit, jeudi 29 janvier 2014

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

  • 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).

Le sujet de l'application doit être en rapport avec une thématique "MALTT"

(2a) Documentez brièvement votre code HTML/JavaScript en insérant les informations suivantes en haut du code JavScript ou HTML (c-a-d à un endroit stratégique approprié que tout le monde peut repérer)

  • Auteur
  • Date
  • Objectifs et utilisation (soyez très courts)
  • Crédits (si nécessaire, par exemple pour images et clip art réutilisé)

(2b) Documentez également les passages difficiles du code JavaScript

(3) Participez au wiki selon les instructions donnés dans le programme du cours.

(4) Faites un rapport (voir aussi ci-dessous)

3.2 Ressources externes

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

3.3 A rendre

Le dispositif (code source et swf) est à mettre en ligne avec un petit rapport qui se trouvera ici:

/etu-maltt/______/____/stic-1/ex5

Cette page de rapport doit inclure:

  • Auteur et date
  • Objectifs, ce que le dispositif est censé faire.
  • Pas de longue explication de la production, mais un petit (!) résumé des étapes.
  • Difficultés
  • Auto-évaluation
  • Références
  • Un lien vers le dispositif
  • Un lien vers vos contributions wiki ou alternativement un résumé en une phrase plus un lien vers votre home page wiki. Il faut que l'on sache ce qu'il faut compter pour chaque exercice sans jouer aux détectives.

N'oubliez pas la contribution wiki obligatoire

3.4 Evaluation

Voir la grille dans Moodle (pareille pour tous les projets)

4 Documentation et aide

4.1 Documentation

Pour apprendre un peu de JavaScript, lisez:

Pour JQuery, lisez:

Pour les démos

Sinon, il existe littéralement des centaines de sites qui vous permettent d'apprendre du JavaScript.

  • MDN est réputé être un bon site pour les gens ayant déjà qqs. notions de base en informatique. La versions anglaise est mieux développée.
  • W3Schools ou CodeAcademy peuvent être conseillés aux débutant(e)s
  • Voir Liens JavaScript pour plus ...

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