« 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
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic12}}
 
<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 41 : Ligne 41 :
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 ==
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'''
<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 ==


* [[Tutoriel JavaScript de base]]
* [[Tutoriel JavaScript de base]]

Version du 6 novembre 2014 à 21:03

Cette page fait partie des cours STIC I et STIC II

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

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

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 

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

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