STIC:STIC I - exercice 3 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Cet exercice introduit la sensibilisation à la programmation avec JavaScript. Les concepts fondamentaux de la programmation seront abordés, et ensuite appliqués à l'interactivité des pages web.

Connaissances/compétences envisagées

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

  • Connaître les bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.)
  • Identifier des mécanismes de Input/Output et les rapporter à des actions de l'utilisateur, du système, etc.
  • Reconnaître un gestionnaire d'événements et le type d'événement déclencheur
  • Connaître les bases de la syntaxe JavaScript (fondamnteaux du langage)
  • Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques
  • Savoir créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM

Prérequis

Lectures conseillées (sans code !!!) :

Logiciels utilsés pendant l'activité en salle de classe :

  • Brackets
  • Outils de développement Google Chrome

Activité en salle de classe

Programme

  • 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
  • 09:30 - 10:30 : introduction à la syntaxe de JavaScript
  • -- pause --
  • 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
  • 11:45 - 12:30 : transfert de connaissances, JavaScript avec CSS3 et SVG

Présentation de JavaScript

Brève mise en contexte de JavaScript dans le développement web :

  • Développement frontend et backend
  • Importance de l'environnement
  • JavaScript côté client

Slides présentation (format PDF)

Introduction à la syntaxe de JavaScript

Survol des éléments fondamentaux du langage :

  • Syntaxe
  • Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)

Références :

JavaScript et le DOM

Interaction de JavaScript avec le navigateur web :

  • L'objet global window
  • Inclure JavaScript dans une page HTML
  • Manipulation du DOM
  • Gestionnaire d'événements

Principe de base :

  1. Idéntifier un élément dans le DOM
  2. Lui appliquer un gestionnaire d'événement
  3. Créer une fonction qui :
    1. Identifie les éléments à modifier suite à l'événement
    2. Applique les modifications et met à jour le DOM

Workshop Codepen.io :

Ces exemples (et plus) sont disponibles également ici http://codepen.io/collection/XgkejK/

Références :

Transfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

Projet 3 / Tâche

Dispositif

Imaginez un design pédagogique interactif dans lequel l'utilisateur puisse déterminer des modifications par rapport au contenu initial.

  • Créez une page HTML5/CSS qui contient des éléments interactifs (e.g. click, mouseover, etc.)
  • Ajoutez une ou plusieurs manipulations du DOM suite à un événement (e.g. afficher un feedback, remplacer une image, etc.)
  • Le tout doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage !)

Contraintes

  • Contenu de la page selon vos envie, mais en rapport avec une thématique MALTT
  • Vous devez inclure un fichier JavaScript externe et évitez du code JavaScript dans les attributs (e.g. onclick="...")
  • La page doit contenir au moins deux éléments interactifs (e.g. bouton, zone de texte modifiable, ...)
  • Vous devez créer au moins une manipulation du DOM qui modifie le contenu de la page sans actualiser la page ou pointer vers une autre lien
  • Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif
  • Vous pouvez utiliser des bouts du code depuis les examples en cours, mais il faudra au moins adapter le code JavaScript (pas simplement changer/adapter le contenu HTML)

Pour les plus ambitieux

  • Vous pouvez essayer l'une des Bibliothèques JavaScript listés ou en proposer une autre.
  • Vous pouvez utiliser jQuery (mais pas jQuery UI qu'on verra en P3) à condition que vous ayez compris les principes du "vanilla" JavaScript.

Si vous matrisiez bien JavaScript, concentrez-vous sur les aspects interactifs/ergonomiques/pédagogiques de l'application : il ne suffit pas de savoir coder pour créer un bon dispositif !

Critères d'évaluation

Malus
  • Mauvais liens (fichier JavaScript, CSS)
  • Utilisation de JavaScript dans les attributs HTML
  • Copier/coller d'un snippet de code présenté au cours ou tiré d'internet sans aucune modification
  • Agencement de la page approximatif
  • Interaction pas claires/pas bien indiquées
Bonus
  • Code bien organisé et "élégant"
  • Documentation du code (raisonnable : pas plus de commentaires que de code...)
  • Utilisation de techniques de programmation (cycles, structure de contrôle, etc.)
  • Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...)
  • Design graphique soigné (e.g. bonne utilisation CSS)
  • Organisation du contenu

Rapport

Faites un rapport selon les guidelines habituelles :

En particulier pour cet exercice, essayez d'expliquer :

  • En quoi les interactions que vous avez créées soutiennent vos objectifs d'apprentissage/d'utilisation

Contribution Wiki

Contribution libre comme d'habitude :

Quelques suggestions :

Délai

Lundi 08:59 avant la semaine des cours présentiels P3

Liens

Technique

JavaScript

Bibliographie

Livre recommandé pour débutants
  • JavaScript for Kids (Pas forcément pour enfants, pas super drôle, mais bien écrit). La version e-ebook ne coûte pas très cher et elle est partageable.
Livres pour débutants/intermédiares avec aussi de la théorie (free on the web/pay printable version)
  • Haverbeke, M. (2015). Eloquent JavaScript. A modern Introduction to Programming. Second Edition. San Francisco, CA: No Starch Press. Accès libre depuis internet: http://eloquentjavascript.net/
  • Simpson, K. (2015). You Don’t Know JS: Up & Going. O’Reilly Media. Accès libre à la version non editée de toute la série de livres https://github.com/getify/You-Dont-Know-JS
Livre sur les microinteractions (pas de code)
  • Saffer, D. (2014). Microinteractions. Designing with details. Sebastopol, CA: O’Reilly Media.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_3_(Wall-e)&oldid=62670 »