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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 69 : Ligne 69 :
=== Dispositif ===
=== Dispositif ===


Faites une page HTML5/CSS qui propose :
Faites une page HTML5/CSS qui propose un dispositif d'apprentissage interactif comprenant :


* au moins une animation de type UI, par exemple pour faciliter l'interactivité/ergonomie de votre dispositif
* au moins deux éléments interactifs (boutons, textinput, ...)
* 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
* au moins une petite animation qui sert concrètement à quelque chose. La fonction ne doit pas être forcément pédagogique, vous pouvez mettre une animation qui sert de manière ergonomique (e.g. permet de mieux déceler un changement, etc.).
* l'animation pédagogique doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage)
* un ''footer'' de la page qui illustre :
** la [https://creativecommons.org/choose/?lang=fr licence creative commons] sous laquelle vous partagez votre dispositif (vous êtes libres de choisir les critères que vous voulez)
** la liste des éléments ''third-party code'' que vous avez utilisés


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


* Le sujet de la page doit être en rapport avec une thématique "MALTT"
* 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)
* Vous devez utiliser '''au moins''' une feuille de style externe (e.g. FontAwesome, W3css, Bootstrap, ...)
** 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
* Vous devez utiliser '''au moins''' une bibliothèque/framework/plugin JavaScript, '''mais pas jQuery''' qui est utilisé dans l'ex5
* Pour l'animation pédagogique utilisez une des [[bibliothèques JavaScript]] de type animation ou dessin proposées dans la liste
* '''Tous les éléments externes que vous utilisez doivent être sur le serveur tecfaetu.unige.ch''' (i.e. pas utilisation des CDN)
** 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 devez ajouter '''au moins''' une petite animation. Vous pouvez faire votre animation avec du CSS ou du JavaScript purs, ou utiliser du ''third-party code'' (qui peut conter comme élément externe des contraintes précédentes)
** Vous pouvez utiliser soit le [[Canvas (HTML5)|Canvas]], soit des éléments [[SVG]] (mais '''pas''' SMIL utilisé pendant l'exercice 2 !)
* Vous devez choisir et ajouter à votre page la licence [https://creativecommons.org/choose/?lang=fr Creative Commons]
* '''L'animation pédagogique doit pouvoir être déclenchée par l'utilisateur''' (e.g. en cliquant sur un bouton)
*# Définissez d'abord les Caractéristiques de la licence
** Vous pouvez, mais ne devez pas, prévoir des contrôles supplémentaires (e.g. reset, passages à un état spécifique, etc.)
*# Ensuite cliquez sur le lien '''Cette partie est optionnelle, mais la remplir ajoutera des métadonnées au HTML suggéré !''' qui se trouve sous le titre Aidez les autres à vous attribuer ! et saisissez les champs que vous voulez/pouvez remplir
* Vous pouvez utiliser du "artwork" externe (mais pas plus que 66%)
*# Choisissez le type d'icone (normale ou compacte) et copiez le code HTML dans votre page
* 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 lister le ''third-party code'' que vous avez utilisé. À minima vous devez fournir le nom et l'URL.
* Vous devez citer les sources !


=== Critères d'évaluation ===
=== Critères d'évaluation ===
Ligne 94 : Ligne 95 :


* Mauvais liens (fichier JavaScript, CSS)
* 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)
* Manque du CSS et/ou de la bibliothèque JavaScript
* Animation pédagogique non-interactive (e.g. se déclenche toute seule au téléchargement de la page)
* Manque de l'animation
* Manque de la licence Creative Commons
* Manque de la liste du ''third-party code''
* Agencement de la page approximatif
* Agencement de la page approximatif


;Bonus
;Bonus


* Animation(s) UI intéressante(s) et instrumentale(s) au dispositif
* Bon choix du ''third-party'' code (i.e. cohérent avec vos objectifs)
* Animation pédagogique interactive (e.g. différents états, reset, cliquer sur un élément animé ouvre du texte, etc.)
* Bonne organisation des fichiers externes et des vos propres fichiers
* Cohésion texte/animation (i.e. agencement de la page)
* Code bien organisé et élégant
* Code bien organisé et élégant
* Design graphique soigné
* Design graphique soigné
* Bonne intégration de l'animation dans le dispositif (i.e. vrai utilité et pas fonction cosmétique/distractive)


=== Rapport ===
=== Rapport ===
Ligne 114 : Ligne 117 :
En particulier pour cet exercice, essayez d'expliquer :
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 des éléments externes que vous avez choisis(pourquoi? vous-ont ils aidés ? difficulté? etc.)
* 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 Wiki ===
Ligne 127 : Ligne 129 :
* Ajouter/améliorer [[Review de ressources pour débuter JavaScript]]
* Ajouter/améliorer [[Review de ressources pour débuter JavaScript]]
* Améliorer/corriger la page [[Animation avec JavaScript]]
* Améliorer/corriger la page [[Animation avec JavaScript]]
* Créer une page/tutoriel [[Animation avec CSS]]
* Améliorer la page/tutoriel [[Animation avec CSS]]
* Améliorer la page [[Canvas (HTML5)]]
* Améliorer la page [[Canvas (HTML5)]]
* Documenter une des [[bibliothèques JavaScript]] pour l'animation/dessin ou en proposer d'autres
* Documenter une des [[bibliothèques JavaScript]] pour l'animation/dessin ou en proposer d'autres
* Améliorer la page [[Les différences entre l'image statique et l'animation quant à l'apprentissage]] (e.g. enlever titres en uppercase...)
* Améliorer la page [[Les différences entre l'image statique et l'animation quant à l'apprentissage]]


=== Délai ===
=== Délai ===


'''Mercredi 1 février 2017 à 08:00'''
''IMPORTANT à définir'''


'''Attention''' :  
'''Attention''' :  

Version du 2 décembre 2017 à 15:43

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 ?

Attention : si vous ne pouvez pas répondre à une ou plusieurs questions, ne changez pas d'élément mais marquez tout simplement que c'est impossible/difficile à comprendre

Projet 6 / Tâche

Dispositif

Faites une page HTML5/CSS qui propose un dispositif d'apprentissage interactif comprenant :

  • au moins deux éléments interactifs (boutons, textinput, ...)
  • au moins une petite animation qui sert concrètement à quelque chose. La fonction ne doit pas être forcément pédagogique, vous pouvez mettre une animation qui sert de manière ergonomique (e.g. permet de mieux déceler un changement, etc.).
  • un footer de la page qui illustre :
    • la licence creative commons sous laquelle vous partagez votre dispositif (vous êtes libres de choisir les critères que vous voulez)
    • la liste des éléments third-party code que vous avez utilisés

Contraintes

  • Le sujet de la page doit être en rapport avec une thématique "MALTT"
  • Vous devez utiliser au moins une feuille de style externe (e.g. FontAwesome, W3css, Bootstrap, ...)
  • Vous devez utiliser au moins une bibliothèque/framework/plugin JavaScript, mais pas jQuery qui est utilisé dans l'ex5
  • Tous les éléments externes que vous utilisez doivent être sur le serveur tecfaetu.unige.ch (i.e. pas utilisation des CDN)
  • Vous devez ajouter au moins une petite animation. Vous pouvez faire votre animation avec du CSS ou du JavaScript purs, ou utiliser du third-party code (qui peut conter comme élément externe des contraintes précédentes)
  • Vous devez choisir et ajouter à votre page la licence Creative Commons
    1. Définissez d'abord les Caractéristiques de la licence
    2. Ensuite cliquez sur le lien Cette partie est optionnelle, mais la remplir ajoutera des métadonnées au HTML suggéré ! qui se trouve sous le titre Aidez les autres à vous attribuer ! et saisissez les champs que vous voulez/pouvez remplir
    3. Choisissez le type d'icone (normale ou compacte) et copiez le code HTML dans votre page
  • Vous devez lister le third-party code que vous avez utilisé. À minima vous devez fournir le nom et l'URL.

Critères d'évaluation

Malus
  • Mauvais liens (fichier JavaScript, CSS)
  • Manque du CSS et/ou de la bibliothèque JavaScript
  • Manque de l'animation
  • Manque de la licence Creative Commons
  • Manque de la liste du third-party code
  • Agencement de la page approximatif
Bonus
  • Bon choix du third-party code (i.e. cohérent avec vos objectifs)
  • Bonne organisation des fichiers externes et des vos propres fichiers
  • Code bien organisé et élégant
  • Design graphique soigné
  • Bonne intégration de l'animation dans le dispositif (i.e. vrai utilité et pas fonction cosmétique/distractive)

Rapport

Faites un rapport selon les guidelines habituelles :

En particulier pour cet exercice, essayez d'expliquer :

  • Dans la section "auto-évaluation" proposez une analyse des éléments externes que vous avez choisis(pourquoi? vous-ont ils aidés ? difficulté? etc.)

Contribution Wiki

Contribution libre comme d'habitude :

Quelques suggestions :

Délai

IMPORTANT à définir'

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=74720 »