« STIC:STIC I - exercice 6 (Xerneas) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{stic12}} {{En construction}} <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-colo... »)
 
Aucun résumé des modifications
Ligne 5 : Ligne 5 :
== Introduction ==
== Introduction ==


Cet exercice introduit le concept d'animation principalement d'un point de vue technique : quels sont les mécanismes qui permettent d'animer des éléments dans une page web.  
Cet exercice introduit le concept de code ré-utilisable dans le développement web en s'appuyant sur du ''third-party code'', c'est-à-dire des éléments (bibliothèques, frameworks, plugins) qui sont conçus pour aider le développeur à obtenir plus facilement, et plus vite, le résultat souhaité.


=== Connaissances/compétences envisagées ===
=== Connaissances/compétences envisagées ===
Ligne 11 : Ligne 11 :
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :


* Savoir définir une animation d'un point de vue technique
* Comprendre l'utilité et l'intentionnalité du ''third-party code'', mais également les limites
** Comprendre le mécanisme de rendering/redrawing d'un navigateur web
* Savoir incorporer et utiliser du code ré-utilisable à travers des feuilles de styles CSS ou des bibliothèques JavaScript externes
** Connaître le principe de frame rate et sa conséquence sur (a) la perception des utilisateur; (b) les ressources hardware du navigateur
* Identifier les critères pour juger de la qualité/maintenabilité/fiabilité d'éléments externes
* Savoir identifier et choisir parmi trois grands types d'animation pour le web (UI Animation, Draw Animation, 3D Animation)
** Présence/qualité de la documentation
* Réflechir sur les enjeux pédagogiques des animations
** [[Versionnage sémantique]] et compatibilité entre versions
* Évaluer différentes bibliothèques JavaScript par rapport à leurs finalités et choisir en fonction des objectifs du dispositif
** Licence/Droits d'utilisation
* Savoir distinguer entre un framework, une bibliothèque et un plugin (et savoir aussi que les différences ne sont souvent pas très nettes)
* Comprendre le concept de ''dependency'', par exemple lorsqu'un plugin nécessité la présence d'une bibliothèque
* Ajouter des petites animations à une page web


=== Prérequis ===
=== Prérequis ===
Lectures conseillées :
* [[Animation avec JavaScript]] (seulement chapitre 2, sans code, lecture de quelques minutes)


Prérequis techniques :
Prérequis techniques :
Ligne 33 : Ligne 32 :
=== Programme ===
=== Programme ===


Voir [[STIC:STIC I - exercice 5 (Wall-e)| Exercice 5]] (programme en commun)
* 09:00 - 10:00 Présentation + Activité de recherche/évaluation d'une bibliothèque JavaScript
 
* 10:00 - 10:30 Démo incorporation de ''third-party code'' dans un projet
=== Techniques d'animation de base ===
* -- Pause --
 
* 11:00 - 12:30 Démo/Workshop avec différentes exemples de code réutilisable (CSS + JavaScript)
; Animations liées au temps :
 
* <code>setInterval()</code> ou <code>setTimeout()</code>
* Le principe de frame rate
* Exemple : http://codepen.io/mafritz/pen/zKrkLB
 
; Animation avec fonction dédiée :
 
* <code>requestAnimationFrame()</code>
* Fonction récursive
* Exemple : http://codepen.io/mafritz/pen/XjyRBV
 
===UI Animation===
 
==== CSS Animation ====
 
Utilisation de classes CSS avec le décorateur <code>@keyframes</code> from ... to :
 
<source lang="CSS">
/* The animation code */
@keyframes example {
  from {
    background-color: red;
    margin-left: 0px;
    color: #FFF;
  }
  to {
    background-color: yellow;
    margin-left: 600px;
    color: #000;
  }
}
 
div {
  width: 300px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
  line-height: 200px;
  text-align: center;
  font-size: 2em;
  color: #FFF;
  border: 1px solid #000;
}
/* The element to apply the animation to */
 
div.animation {
  animation-name: example;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
</source>
 
Exemple : http://codepen.io/mafritz/pen/ammyxN
 
==== CSS transition ====
 
Possibilité d'utiliser de manière dynamique des transitions entre états d'un élément (e.g. un bouton) :
 
<source lang="CSS">
button#add {
  background-color: #006699;
  color: #FFF;
  padding: 15px 20px;
  border: 1px solid #999;
  font-size: 1.1em;
  transition: background-color 0.3s ease-out;
}
 
button#add:hover {
  background-color: darkorange;
}
 
button#add:active {
  background-color: black;
}
</source>
 
Exemple : http://codepen.io/mafritz/pen/NNmgqG
 
==== VelocityJS ====
 
Pour des animations UI plus complexes, il existe des bibliothèques JavaScript qui mettent à disposition des méthodes pour animer les éléments du DOM, comme par exemple [http://velocityjs.org/ VelocityJS].
 
Pour utiliser cette bibliothèque :
 
# Inclure jQuery
#* Download du fichier
#* Utilisation du lien CDN https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
# Inclure le fichier de la bibliothèque VelocityJS
#* Download du fichier
#* Utilisation du lien CDN https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.js
 
Exemple de code :
 
<source lang="JavaScript">
$("#box")
    .velocity(
      //Define the properties to change
      {
        rotateX: 180,
        rotateY: 180,
        rotateZ: 180,
        marginLeft: 400,
        backgroundColor: "#FF0000"
      },
      //Define the duration
      4000,
      //Define the type of effect
      "spring"
    );
</source>
 
Exemple : http://codepen.io/mafritz/pen/gwkvEJ
 
=== Draw Animation ===
==== HTML5 Canvas ====
 
HTML5 met à disposition une API pour dessiner à l'intérieur d'un élément appelé '''canvas''' qui possède une balise avec le même nom.
 
<source lang="HTML5">
<canvas id="monCanvas" width="800" height="400">
    Message pour les navigateurs ne supportant pas encore canvas.
</canvas>
</source>
 
De plus, HTML5 met directement à disposition des moyens pour manipuler cet élément (i.e de "dessiner") à travers JavaScript :
 
<source lang="JavaScript">
//Identify the canvas
var canv = document.querySelector("#monCanvas");
 
//Create a context to draw
var ctx = canv.getContext("2d");
 
//Use the api to draw
ctx.fillStyle = "darkorange";
ctx.fillRect(40, 40, 100, 100);
 
//Other shape
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(450, 50);
ctx.lineTo(450, 250);
ctx.closePath();
ctx.fillStyle = "darkgreen";
ctx.fill();
ctx.stroke();
</source>
 
Exemple : http://codepen.io/mafritz/pen/bBdxmv
 
==== p5.js ====
L'API de base pour dessiner dans un élément de type canvas n'est pas très pratique. Pour cette raison, il existe plusieurs bibliothèques JavaScript qui essaient d'en faciliter l'usage, comme par exemple [https://p5js.org/ p5.js].
 
Pour utiliser p5.js il faut :
 
* Inclure le script principale dans votre page ([https://p5js.org/download/ Download])
* Inclure événtuellement d'autres fichiers pour des éléments supplémentaires (e.g. interaction avec le DOM, Sound, etc.)
* En alternative vous pouvez utiliser également un lien à une CDN : https://cdnjs.com/libraries/p5.js
 
Dans son cadre d'utilisation le plus simple, pour utiliser p5.js il suffit de créer deux fonctions :
 
# Une fonction <code>setup()</code> qui détermine les propriétés du canvas
# Une fonction <code>draw()</code> qui redessine la scène à chaque requestAnimationFrame()
 
Pour créer un effet d'animation, il suffit donc de modifier des propriétés dans la fonction <code>draw()</code>. Voici un exemple tout simple :
 
<source lang="JavaScript">
function setup() {
  createCanvas(480, 480);
  frameRate(60);
}
 
var radius = 0;
 
function draw() {
  radius++;
  if (radius > 480) {
    radius = 0;
  }
  ellipse(240, 240, radius, radius);
}
</source>
 
* Exemple : http://codepen.io/mafritz/pen/NRZYdR
 
Les fonctions <code>setup()</code> et <code>draw()</code> sont appelées automatiquement au chargement de la page et ne peuvent pas être incluses par exemple dans un eventListener pour des raisons de scope. Pour déclencher une animation de type p5.js avec un événement du DOM, il faut donc utiliser des stratégies alternatives. Par exemple, on peut utiliser une structure de contrôle pour commencer à modifier la propriété à changer pour déterminer l'animation seulement si une condition est vraie. À ce moment, on peut tout simplement créer une condition qui est fausse au départ (i.e. chargement de la page) et qui devient vraie seulement lorsqu'on clique sur un bouton. Voici l'exemple :
 
<source lang="JavaScript">
function setup() {
  //Include the canvas in an element of the page
  var myCanvas = createCanvas(480, 480);
  myCanvas.parent("container");
  frameRate(60);
}
 
var radius = 0;
//Set an initial var to undefined (that is, it equals false in a if statement)
var started;
 
function draw() {
  //check if the variable is true, and it is not by default
  if(started) {
      radius++;
  }
  if (radius > 480) {
    radius = 0;
  }
  ellipse(240, 240, radius, radius);
}
 
//Start the animation
document.querySelector("button").addEventListener("click", function () {
  //switch the variable at every click (if it true to false, if it is false to true)
  started = !started;
})
</source>
 
Exemple : http://codepen.io/mafritz/pen/NbqmKp
 
Par rapport à l'exemple précédent nous avons :
 
# Ajouté le canvas créé dans la fonction <code>setup()</code> à un endroit précis dans la page (une balise div avec id="container")
# Ajouté une variable qui détermine si l'animation est active/désactive (var = started). Cette variable est undefined au début, ce qui équivaut à <code>false</code> dans une structure de contrôle
# Ajouté une structure de contrôle dans la fonction <code>draw()</code> qui augmente le radius seulment si la variable started est vraie
# Ajouté un bouton avec un gestionnaire d'événement. Le gestionnaire d'événement fait une chose très simple :
#* Si la variable started est vraie, elle devient fausse
#* Si la variable started est fausse, elle devient vraie


Une autre alternative plus complexe, mais également plus puissante, consiste à modifier la fonction <code>draw()</code> à l'intérieur du eventListener. Il faut juste se souvenir que cette fonction existe dans le global scope, il ne faudra donc pas mettre <code>var</code> devant, car on veut modifier la fonction qui existe déjà.
=== Présentation + Activité de recherche/évaluation d'une bibliothèque JavaScript ===


<source lang="JavaScript">
Présentation du contenu :
function setup() {
  //Include the canvas in an element of the page
  var myCanvas = createCanvas(480, 480);
  myCanvas.parent("container");
  frameRate(60);
}


function draw() {
* {{Goblock|Mettre le lien!}}
  //Nothing in here...
}


//Draw an ellipse
==== Activité ====
document.querySelector("#ellipseBtn").addEventListener("click", function() {
  var radius = 0;
  //Redefine draw here
  draw = function() {
    radius++;
    if (radius > 480) {
      radius = 0;
    }
    ellipse(240, 240, radius, radius);
  }
})


//Draw a rectangle
# Pointer sur le site {{Goblock|[https://www.javascripting.com/ JavaScripting.com]}}
document.querySelector("#rectBtn").addEventListener("click", function() {
# Choisir une thématique/technique du menu à gauche qui pourrait vous intéresser ou qui aurait pu vous servir pour les exercices 3 et 4 (e.g. Animation, Images, User Interface, ...)
  var len = 0;
# Choisir un élément de la liste qui vous inspire (évitez de choisir quelque chose que vous connaissez déjà !)
  //Redefine draw here
# Une fois l'élément choisi, essayer de répondre aux critères suivants (vous pouvez noter vos réponses dans un fichier de texte, pas besoin de partager après) :
  draw = function() {
#* Nom et développeur de l'élément, ainsi que l'URL
    len++;
#* Quel est (ou quels sont) les objectifs ? Qu'est-ce que cela permet de faire ?
    if (len > 480) {
#** Vous qualifieriez cela comme une bibliothèque, un framework ou un plugin ?
      len = 0;
#* Quelle est la licence associée ? Qu'est-ce que cela vous permet de faire/pas faire ?
    }
#* Évaluer la qualité de la documentation et du support.
    rect(240 - len / 2, 240 - len / 2, len, len);
#** Sous quelle forme se présente la documentation ? Site, Wiki, page GitHub, ...
  }
#** Est-ce qu'il y a un support technique ? Forum, groupe Slack, communauté StackOverflow, ...
})
#* Identifier les ''dependencies''
</source>
#** Combien de fichier sont nécessaire ? Quel types de fichiers ? Seulement JS ou aussi CSS, SVG, Fonts, ...
#** L'élément dépend-t-il d'une autre bibliothèque/framework/...
#* Identifier la version actuelle (voir [[Versionnage sémantique]]) et évaluez si :
#** Elle a été mise à jour de récent ?
#** Est-ce qu'il y a eu des mises à jours régulières ?


Exemple : http://codepen.io/mafritz/pen/oYjzqg


== Projet 6 / Tâche ==
== Projet 6 / Tâche ==

Version du 2 décembre 2017 à 14:58

Cette page fait partie des cours STIC I et STIC II

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

STIC

Introduction

Cet exercice introduit le concept de code ré-utilisable dans le développement web en s'appuyant sur du third-party code, c'est-à-dire des éléments (bibliothèques, frameworks, plugins) qui sont conçus pour aider le développeur à obtenir plus facilement, et plus vite, le résultat souhaité.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Comprendre l'utilité et l'intentionnalité du third-party code, mais également les limites
  • Savoir incorporer et utiliser du code ré-utilisable à travers des feuilles de styles CSS ou des bibliothèques JavaScript externes
  • Identifier les critères pour juger de la qualité/maintenabilité/fiabilité d'éléments externes
    • Présence/qualité de la documentation
    • Versionnage sémantique et compatibilité entre versions
    • Licence/Droits d'utilisation
  • Savoir distinguer entre un framework, une bibliothèque et un plugin (et savoir aussi que les différences ne sont souvent pas très nettes)
  • Comprendre le concept de dependency, par exemple lorsqu'un plugin nécessité la présence d'une bibliothèque
  • Ajouter des petites animations à une page web

Prérequis

Prérequis techniques :

  • Connaissances de base de HTML/CSS/JavaScript
  • Savoir incorporer des fichiers externes JS/CSS en respectant les chemins !

Activité en salle de classe

Programme

  • 09:00 - 10:00 Présentation + Activité de recherche/évaluation d'une bibliothèque JavaScript
  • 10:00 - 10:30 Démo incorporation de third-party code dans un projet
  • -- Pause --
  • 11:00 - 12:30 Démo/Workshop avec différentes exemples de code réutilisable (CSS + JavaScript)

Présentation + Activité de recherche/évaluation d'une bibliothèque JavaScript

Présentation du contenu :

  • Mettre le lien!

Activité

  1. Pointer sur le site
    JavaScripting.com
  2. Choisir une thématique/technique du menu à gauche qui pourrait vous intéresser ou qui aurait pu vous servir pour les exercices 3 et 4 (e.g. Animation, Images, User Interface, ...)
  3. Choisir un élément de la liste qui vous inspire (évitez de choisir quelque chose que vous connaissez déjà !)
  4. Une fois l'élément choisi, essayer de répondre aux critères suivants (vous pouvez noter vos réponses dans un fichier de texte, pas besoin de partager après) :
    • Nom et développeur de l'élément, ainsi que l'URL
    • Quel est (ou quels sont) les objectifs ? Qu'est-ce que cela permet de faire ?
      • Vous qualifieriez cela comme une bibliothèque, un framework ou un plugin ?
    • Quelle est la licence associée ? Qu'est-ce que cela vous permet de faire/pas faire ?
    • Évaluer la qualité de la documentation et du support.
      • Sous quelle forme se présente la documentation ? Site, Wiki, page GitHub, ...
      • Est-ce qu'il y a un support technique ? Forum, groupe Slack, communauté StackOverflow, ...
    • Identifier les dependencies
      • Combien de fichier sont nécessaire ? Quel types de fichiers ? Seulement JS ou aussi CSS, SVG, Fonts, ...
      • L'élément dépend-t-il d'une autre bibliothèque/framework/...
    • Identifier la version actuelle (voir Versionnage sémantique) et évaluez si :
      • Elle a été mise à jour de récent ?
      • Est-ce qu'il y a eu des mises à jours régulières ?


Projet 6 / Tâche

Dispositif

Faites une page HTML5/CSS qui propose :

  • au moins une animation de type UI, par exemple pour faciliter l'interactivité/ergonomie de votre dispositif
  • au moins une (simple) animation à finalité pédagogique, par exemple montrer un phénomène ou une suite d'événements, qui est déclenchée par l'utilisateur
  • l'animation pédagogique doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage)

Contraintes

  • Le sujet de la page doit être en rapport avec une thématique "MALTT"
  • Pour l'animation UI vous pouvez choisir entre une animation/transition CSS, du "vanilla" JavaScript ou un bibliothèque (e.g. VelocityJS)
    • L'animation UI peut être tout simplement un effet sur un bouton, un slideshow d'image, un effet graphique, etc. - il ne faut pas chercher trop loin
  • Pour l'animation pédagogique utilisez une des bibliothèques JavaScript de type animation ou dessin proposées dans la liste
    • Si vous en utilisez une autre non dans la liste, merci de l'ajouter à la page si elle respecte les critères mentionnés
    • Vous pouvez utiliser soit le Canvas, soit des éléments SVG (mais pas SMIL utilisé pendant l'exercice 2 !)
  • L'animation pédagogique doit pouvoir être déclenchée par l'utilisateur (e.g. en cliquant sur un bouton)
    • Vous pouvez, mais ne devez pas, prévoir des contrôles supplémentaires (e.g. reset, passages à un état spécifique, etc.)
  • Vous pouvez utiliser du "artwork" externe (mais pas plus que 66%)
  • Vous pouvez utiliser et/ou adapter du code fabriqué par d'autres (e.g. exemples dans la documentation des bibliothèques), mais vous devez le citer et vérifier les droits.
  • Vous devez citer les sources !

Critères d'évaluation

Malus
  • Mauvais liens (fichier JavaScript, CSS)
  • Manque de l'effet animé pour l'animation UI (e.g. passé d'une couleur à une autre sans états intermédiaires)
  • Animation pédagogique non-interactive (e.g. se déclenche toute seule au téléchargement de la page)
  • Agencement de la page approximatif
Bonus
  • Animation(s) UI intéressante(s) et instrumentale(s) au dispositif
  • Animation pédagogique interactive (e.g. différents états, reset, cliquer sur un élément animé ouvre du texte, etc.)
  • Cohésion texte/animation (i.e. agencement de la page)
  • Code bien organisé et élégant
  • Design graphique soigné

Rapport

Faites un rapport selon les guidelines habituelles :

En particulier pour cet exercice, essayez d'expliquer :

  • En quoi l'animation soutient-elle l'objectif d'apprentissage ?
  • Dans la section "auto-évaluation" proposez une analyse de la bibliothèque que vous avez choisie (pourquoi? elle vous a aidé? difficulté? etc.)

Contribution Wiki

Contribution libre comme d'habitude :

Quelques suggestions :

Délai

Mercredi 1 février 2017 à 08:00

Attention :

  • il faut qu'on transmette les notes au secrétariat, donc cette date n'est pas négociable et si vous ne rendez pas votre exercice dans le délai, nous allons noter avec un 0.
  • si vous voulez éviter un 0, vous devez nous communiquer avant ce délai par email (M. Schneider + Mattia et Stéphane) que vous allez rendre vos exercices pour la session de rattrapage en août/septembre

Liens

Théoriques

Techniques

Bibliographie

  • Head, V. (2016). Designing Interface Animation. Meaningful Motion for User Experience. Brooklyn, NY: Rosenfeld Media
  • McCarthy, L., Reas, C., Fry, B. (2016). Make: Getting Started with p5.js. San Francisco, CA: Maker Media
  • Tversky, B., Morrison, J. B., & Betrancourt, M. (2002). Animation: can it facilitate?. International journal of human-computer studies, 57(4), 247-262.
  • Bétrancourt, M. (2005). The animation and interactivity principles, in R. E. Mayer (ed.) The Cambridge Handbook of Multimedia Learning, 287-296. Cambridge: Cambridge University Press.

Aide

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

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