« STIC:STIC I - exercice 3 (Utopia) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
 
(9 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{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>
== Enoncée du Projet 3 ==
== Enoncée du Projet 3 ==
Ligne 15 : Ligne 15 :
Imaginez un design pédagogique qui nécessite une animation ....
Imaginez un design pédagogique qui nécessite une animation ....


* Créez une page HTML5 qui contient au moins un graphisme animé
* Créez une page HTML5 qui contient au moins un graphisme animé avec la bibliothèque "Greensocks"
* Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
* Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)
Il faut également contribuer au wiki (comme pour tous les exercices)


=== Outil ===
=== Outil ===
Ligne 43 : Ligne 45 :


== Activité en salle de classe ==
== Activité en salle de classe ==
Discussion:
* Que peut-on animer ?
* Comment utiliser l'animation dans l'éducation ?
* Comment rendre une animation plus interactive ?


Tâche:
Tâche:
Ligne 50 : Ligne 57 :
Ce type d'exemple est expliqué dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]
Ce type d'exemple est expliqué dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]


'''Chablon de base'''
'''Chablon de base manipuler un élément HTML'''
<source lang="JavaScript">
<source lang="JavaScript">
<!DOCTYPE html>
<!DOCTYPE html>
Ligne 110 : Ligne 117 :
== Liens ==
== Liens ==


=== Technique ===
; JavaScript
* [[Tutoriel JavaScript de base]]
* [[Tutoriel JavaScript de base]]
* Il existe des dizaines de tutos sur le web et des livres
; GSAP
* [[Tutoriel GreenSock GSAP]]
* [http://www.grafikart.fr/tutoriels/javascript/greensock-animation-platform-415 Tutoriel vidéo Javascript : Créer des animations complexes avec GSAP.js] Bien fait, mais nécessite un peu de JQUERY, voir les articles [[JQuery]] et éventuellement [[JQuery UI]]
; Autre
* [[Flash CS4 - Principes de l'animation]] (décrit brièvement quelques types d'animation en Flash, aussi valable pour d'autres formats)
=== Théorie ===
* [[Les différences entre l'image statique et l'animation quant à l'apprentissage]]
* [[Animation et image statique]]

Dernière version du 26 octobre 2015 à 15:25

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

STIC

Enoncée du Projet 3

Ce projet vous permet:

  • d'apprendre quelques notions de JavaScript
  • de vous familiariser avec l'utilisation d'une bibliothèque d'animation en JavaScript
  • d'apprendre quelques concepts d'animation

Ce projet est similaire au projet 2. La technologie est différente. Ceci dit, vous pouvez tout à fait réutiliser des dessins SVG

Tâche

Imaginez un design pédagogique qui nécessite une animation ....

  • Créez une page HTML5 qui contient au moins un graphisme animé avec la bibliothèque "Greensocks"
  • Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
  • Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)

Il faut également contribuer au wiki (comme pour tous les exercices)

Outil

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit soit contenir un élément animé et au moins un élément interactif (par exemple un bouton)
  • La page doit être bien formée et valide.
  • Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML et dans le rapport.

Le rapport:

  • Titre, auteur et date
  • Liens vers le résultat (fichier HTML) et indiquez avec quelle configuration on peut voir votre contenu.
  • Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos objectifs d'apprentissage....)
  • Discussion du design
  • La production: bref résumé de la démarche
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

Emplacement du rapport avec les liens vers le dispositif html/svg: 

/etu-maltt/utopia/<login>/stic-1/ex3/

Activité en salle de classe

Discussion:

  • Que peut-on animer ?
  • Comment utiliser l'animation dans l'éducation ?
  • Comment rendre une animation plus interactive ?

Tâche:

  • Faire fonctionner le code ci-dessous
  • Ajouter une animation "Greensock"

Ce type d'exemple est expliqué dans en:DHTML et en:Javascript tutorial - basics

Chablon de base manipuler un élément HTML 

<!DOCTYPE html>

<html>
   <head>
      <title>Object Model</title>
      <script type = "text/javascript">
         // Une fois que Windows est chargé, la fonction start est appelée
         window.onload = start;
         // Définition de la fonction start
         function start() 
         {
            var my_para = document.getElementById("p1");
            alert( "Paragraph contents : " + my_para.innerHTML );
         }
      </script>
   </head>

   <body>
      <p id = "p1">Welcome to our Web page!</p>
   </body>
</html>

Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript 

<!DOCTYPE html>
<html>
   <head>
      <title>Event handling</title>
      <script type = "text/javascript">
         window.onload = start;
         // var my_para_button  ="";

	 function start()  {
	   // put an event handler on the div box
	   var my_para_button = document.getElementById("box");
	   my_para_button = addEventListener("click", modifyText);
         }

	 function modifyText() {
	   // get the box
	   var my_content = document.getElementById("content");
	   my_content.innerHTML = "That was so good";
	 }
      </script>
   </head>

   <body>
      <div id="box">
         <p style="background-color:yellow" id="content">CLICK ME !</p>
      </div>
   </body>
</html>

Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html

Liens

Technique

JavaScript
GSAP
Autre

Théorie

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