« STIC:STIC I - exercice 3 (Volt) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 102 : Ligne 102 :
* Exemples Codepen.io :
* Exemples Codepen.io :
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/VvxwMa Événements liés à la souris]
** [http://codepen.io/mafritz/pen/NGzpEo Événements liés à la souris]
** [http://codepen.io/mafritz/pen/OyZJvx L'éléments this dans le DOM]
** [http://codepen.io/mafritz/pen/OyZJvx L'éléments this dans le DOM]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]

Version du 16 novembre 2015 à 02:24

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncé de l'exercice 3

Cet exercice vous permet:

  • d'apprendre quelques notions de JavaScript et de la programmation en général
  • comprendre la logique de la programmation DOM et des gestionnaires 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 un élément 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 propres objectifs d'apprentissage....)
  • Discussion du design
  • La production: bref résumé de la démarche
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

A rendre

Emplacement du rapport avec les liens vers le dispositif html/svg: 

/etu-maltt/volt/<login>/stic-1/ex3/

Délai

  • lundi 24h une semaine avant le début de la période 3

Autre exercice de la même période

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 :

Squelette HTML5

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>



</body>
</html>

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 orthographe! ;))
JavaScript
  • 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, réorganiser...

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ées

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

Autres possibilités

  • Poursuivre page créée 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 éventuellement d'autres Bibliothèques JavaScript

Autre

Théorie

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.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_3_(Volt)&oldid=50874 »