STIC:STIC I - exercice 3 (Utopia)

De EduTech Wiki
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

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 »