« 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
 
(10 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>
== Enoncée du Projet 3 ==
== Enoncée du Projet 3 ==


Ligne 9 : Ligne 9 :
* d'apprendre quelques concepts d'animation
* d'apprendre quelques concepts d'animation


Ce projet est similaire au projet 2. La technologie est différente.
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 ===
=== Tâche ===
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 41 : Ligne 43 :
Emplacement du rapport avec les liens vers le dispositif html/svg:
Emplacement du rapport avec les liens vers le dispositif html/svg:
  /etu-maltt/utopia/<login>/stic-1/ex3/
  /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'''
<source lang="JavaScript">
<!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>
</source>
'''Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript'''
<source lang="JavaScript">
<!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>
Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html


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