STIC:STIC I - exercice 3 (Volt)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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

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 : trasnfert 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 :

Trasfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

Contributions Wiki

C'est la première année qu'on aborde "sérieusement" JavaScript en STIC I, par conséquence les ressources wiki disponibles à présent sont limitées et créées en peu de temps, il manque par conséquent une structure des pages. Voici quelques conseils pour les contributions :

Contributions de "base"/minimalistes

Pas mal de fautes de français (désolé!) et concepts peu/pas clairs!

Introduction à la programmation
  • Modifications/corrections (surtout ortographe! ;))
JavasScript
  • Tutoriel JavaScript de base se limiter à modifications/corrections car la page est déjà très lourde, si jamais créer une nouvelle page qui explique mieux une certaine partie du Tutoriel de base
  • JavaScript modifications/corrections mais la page devrait rester plutôt conceptuelle, pas trop de code
  • Liens JavaScript contrôler liens (actualité, qualité) : ajouter, effacer, reorganiser...

Contributions "intermédiaire"

HTML5
  • Ajouter une partie sur les nouveaux inputs pour les formulaires (range, date, etc.)
  • Expliquer intérêts des API
CSS3
  • Créer une page CSS3 avec animations sans et avec JavaScript
Tutoriel SVG dynamique avec DOM
  • Mettre à jour (refaire?) la page avec notions de manipulation du DOM avec JavaScript
Codepen.io
  • Créer page/tutoriel sur Codepen.io

Contributions avancés

Bibliothèques JavaScript
  • Créer tutoriel pour une bibliothèque
  • Améliorer tutoriels existants
  • Proposer nouvelles bibliothèques

Autres possibilités

  • Poursuivre pages créé en P1
  • Pages plus théoriques sur animations
  • Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)

Liens

Technique

JavaScript

Pour aller plus loin

GSAP

Voir événtuellement d'autres Bibliothèques JavaScript

Autre

Théorie

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