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

Workshop Codepen.io :

  • Présentation Codepen.io
  • Fork et travail sur les exemples

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 l'intituler des boutons et du contenu HTML modifié)

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.

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"
  • 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éez 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=62643 »