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

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{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</ca... »)
 
mAucun résumé des modifications
Ligne 5 : Ligne 5 :
Ce projet vous permet:
Ce projet vous permet:


* d'apprendre quelques notions de JavaScript
* d'apprendre quelques notions de JavaScript et de la programmation en générale
* de vous familiariser avec l'utilisation d'une bibliothèque d'animation en JavaScript
* comprendre la logique de la programmation DOM et des gestionnaire d'événements
* d'apprendre quelques concepts d'animation
* d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG
 
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 ===


Imaginez un design pédagogique qui nécessite une animation ....
Imaginez un design pédagogique qui nécessite des interactions suivies d'une animation ....


* Créez une page HTML5 qui contient au moins un graphisme animé avec la bibliothèque "Greensocks"
* Créez une page HTML5 qui contient au moins deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
* Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
* Ajoutez au moins un élément de changement de contenu suite à une interaction.
* Ajoutez au moins éléments d'animation suite à une interaction
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)


Ligne 23 : Ligne 22 :
=== Outil ===
=== Outil ===


* [[Tutoriel GreenSock GSAP|GSAP]]
* Editeur de programmation


=== Contraintes ===
=== Contraintes ===


* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
* 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 soit contenir au moins 2 éléments interactifs (par exemple des boutons), une zone de texte modifiable, une animation.
* La page doit être bien formée et valide.
* 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.
* 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.
Ligne 45 : Ligne 44 :


== 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:
* Faire fonctionner le code ci-dessous
* Faire fonctionner le code ci-dessous
* Ajouter une animation "Greensock"
* Y apporter des modifications


Ce type d'exemple est expliqué dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]
Ce type d'exemple est expliqué [Tutoriel JavaScript de base[]]


'''Chablon de base manipuler un élément HTML'''
'''Chablon de base manipuler un élément HTML'''
Ligne 61 : Ligne 55 :
<!DOCTYPE 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>
</source>
</source>


Version du 26 octobre 2015 à 15:38

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 et de la programmation en générale
  • comprendre la logique de la programmation DOM et des gestionnaire d'événements
  • d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG

Tâche

Imaginez un design pédagogique qui nécessite des interactions suivies d'une animation ....

  • Créez une page HTML5 qui contient au moins deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
  • Ajoutez au moins un élément de changement de contenu suite à une interaction.
  • Ajoutez au moins éléments d'animation suite à une interaction
  • Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)

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

Outil

  • Editeur de programmation

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit soit contenir au moins 2 éléments interactifs (par exemple des boutons), une zone de texte modifiable, une animation.
  • 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
  • Y apporter des modifications

Ce type d'exemple est expliqué [Tutoriel JavaScript de base[]]

Chablon de base manipuler un élément HTML 

<!DOCTYPE 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_(Volt)&oldid=49269 »