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

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{stic12}} Probablement un animation utilisant la bibliothèque GSAP »)
 
mAucun résumé des modifications
 
(13 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 ==


Probablement un animation utilisant la bibliothèque [[Tutoriel GreenSock GSAP|GSAP]]
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 ===
 
* [[Tutoriel GreenSock GSAP|GSAP]]
 
=== 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'''
<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 ==
 
=== Technique ===
 
; JavaScript
* [[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 à 16: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 »