STIC:STIC I - exercice 6 (Volt)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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

En gros on vous demande un exercice similaire à l'exercice 3 plus une simple opération sur le système comme par exemple :

  • Écrire les scores obtenus à un quiz dans un fichier et permettre à l'utilisateur de consulter les anciens résultat
  • Permettre à l'utilisateur d'ajouter des informations dans le temps et les présenter de manière intéressante (e.g. ajouter les notes dans un cours et afficher la moyenne)
  • Créer un petit jeu contre l'ordinateur (e.g. jeu de dés pour insegner mathématique) qui tienne trace du score (e.g. vous avez gagne 12 match sur 25)
  • Créer du matériel expérimental simple qui sauvegarde les résultats pour analyse statistique (e.g. temps réactions à une image sauvegardé dans fichier .csv)
  • Créer un logiciel de traitement de texte/écriture qui possède déjà des fichiers utiles (e.g. fichiers .txt avec des morceaux d'histoire à compléter)
Contraintes minimales du logiciel à développer (keep it simple and safe !!)
  • 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 (faites attention à ce que vous faites) :
  • 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.
Contraintes maximales (keep it reasonable !!)
  • Si vous utilisez des modules externes, utilisez des modules "self-sustaining" (e.g. pas besoin d'installer mysql ou autre technologie), le logiciel doit pouvoir s'utiliser "out of the box"

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

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 :

Contributions de "base"/minimalistes

Orthographe des pages suivantes (plus d'erreurs que d'habitude car peu de temps pour écrire...) :

Contributions "intermédiaire"

Ligne de commande

Page/Tutoriel sur la ligne de commande :

  • Page générale avec quelques informations de base
  • Page dédiée à PowerShell (Windows)
  • Page dédiée à Terminal (Mac + Linux)
Node.js
  • Trouver des BONNES ressources online pour débutant (pas facile!) avec déjà version Node 4.x ou 5.x, pas de 0.x à mettre dans la section "Liens" de Node.js
  • Créer page/tutoriel sur Bower pour gérér les bibliothèques CSS/JS frontend
HTTP
  • Créer une page qui explique le fonctionnement du protocol HTTP (client/server et réponse/requête) de manière aussi conceptuelle, pas seulement technique (déjà ailleurs)
  • Améliorer graphiquement les deux cartes conceptuelles sur le cycle requête/réponse dans la page Express.js

Contributions avancées

Git et/ou GitHub
  • Création d'une ou deux pages pour Git et GitHub (à évaluer si séparés ou ensemble)
  • Créer une page/tutoriel sur le formatage Markdown utilisé dans les fichiers textuels de GitHub
Node.js

Pour ce qui veulent aller plus loin (si temps et intérêt) :

  • Trouver et documenter un module intéressant
  • Créer et documenter un module intéressant
Autre technologies avancées

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

Pour aller plus loin

Bibliographie

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