STIC:STIC I - exercice 3 (Volt)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

► STIC

1 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

1.1 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)

1.2 Outil

  • Editeur de programmation

1.3 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.

1.4 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

1.5 Autre exercice de la même période

2 Activité en salle de classe

2.1 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

2.1.1 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)

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

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

2.1.4 Transfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

2.2 Squelette HTML5

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



</body>
</html>

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

3.1 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...

3.2 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

3.3 Contributions avancées

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

3.4 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.)

4 Liens

4.1 Technique

JavaScript

4.2 Pour aller plus loin

Canvas HTML5
GSAP

Voir éventuellement d'autres Bibliothèques JavaScript

Autre

4.3 Théorie

4.4 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=62528 »