STIC:STIC I - exercice 6 (Volt)

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncé de l'exercice 6

Cet exercice vous permet:

• L'application des concepts de la programmation avec JavaScript dans une application desktop
• L'introduction à un langage de programmation qui intéragit avec le système
• Les opérations de base sur les fichiers de manière automatisée (lecture, écriture, ...)
• Créer des interactions/manipulations qui "durent" dans le temps (i.e. ne disparaissent pas une fois fermée la fenêtre du browser)
• Approfondir la connaissance d'une approche évenementiel/asynchone

Tâche

Imaginez un design pédagogique qui peut être implementé sous forme de (simple!) logiciel desktop. Le logiciel doit au moins présenter :

• Une interface graphique HTML + CSS qui prévoit au moins un élément interactif (bouton, form, ...)
• Cet élément interactif doit impliquer une opération sur le système, par exemple :
  • Écrire le résultat d'une interaction dans un fichier
  • Lire des donnes depuis un fichier et faire quelque chose d'intéressant
  • Lire des données depuis le web et faire quelque chose d'intéressant

Il faut également contribuer au wiki (comme pour tous les exercices)

Outil

• Editeur de programmation
• Node.js installé sur votre ordinateur
• Le module Electron de Node.js

Contraintes

Contraintes du logiciel à développer

• Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
• Le logiciel doit avoir une interface HTML + CSS
• Tous les fichiers liés à l'interface (CSS, JS, images, etc.) doivent être en local (pas de bibliothèques sur CDN http://...)
• L'interface doit présenter au moins un élément interactif (click d'un bouton, formulaire, etc.)
• L'action de l'utilisateur doit enchaîner une (simple!) opération de système
  • Lire/Écrire un fichier
  • Récupérer information du web et les sauvegarder dans un fichier
  • ...
• L'opération doit "laisser des traces" lors de l'utilisation suivante du logiciel (i.e. ne pas disparaître quand le logiciel est fermé)
• 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

Rapport (as usual)

Emplacement du rapport avec liens au logiciel (voir plus bas) :

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

Logiciel

Vous avez deux alternatives :

1. Zipper les fichiers de votre logiciel SANS le dossier "node_modules" et insérer le lien au fichier .zip dans votre rapport
2. Utiliser votre account GitHub (créé lors de l'Atelier Webmaster). Dans ce cas également IGNORER le dossier "node_modules". Insérer le lien au répositoire dans votre rapport.

Délai

• à déterminer !!!

Autre exercice de la même période

• Exercice 5

Activité en salle de classe

Programme

• 09:00 - 09:30 : ...
• 09:30 - 10:30 : ...
• -- pause --
• 11:00 - 11:45 : ...
• 11:45 - 12:30 : ...

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 :

Autres possibilités

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

Liens

Technique

JavaScript

• Introduction à la programmation
• JavaScript
• Tutoriel JavaScript de base
• Il existe des dizaines de tutos sur le web et des livres