Présentation Web Synchronisée

Encadrants : 

Occurrences : 

2019

Nombre d'étudiants minimum: 

2

Nombre d'étudiants maximum: 

3

Nombre d'instances : 

2

Le but de ce projet est de faire un système de présentation multiécran synchronisé pour divers types de contenu simple: transparents, video. Un serveur sert les fichiers nécessaires aux présentations et gère leur synchronisation entre les divers écrans.

Scénario

Je donne un cours en B551. J'ai mon Mac et mon téléphone. Les transparents ont été faits en markdown et traduits en HTML5+CSS+JS. Pendant le cours, je marche dans toute la classe et je me sers de mon téléphone pour faire avancer les transparents et pour pointer. Il y a une seconde présentation avec juste mes notes, qui est sur une fenêtre non projetée sur mon écran. Cette seconde présentation est synchronisée avec les transparents projetés.

Certain.e.s étudiant.e.s ont leur ordi avec eux et regardent les transparents sur leur écran. Leur présentation est synchronisée avec la mienne, ou pas, à leur choix. Les étudiant.e.s peuvent prendre des notes dans une fenêtre et des pointeurs sur le transparent courant sont insérés automatiquement dans les notes pendant la présentation.

J'ai une video d'un professeur qui était en séjour sabbatique chez nous l'an dernier. Je démarre cette video dont le temps pilote mes transparents. Quand je pause la video pour faire un commentaire puis redémarre, les transparents restent synchro avec la video. Les élèves, sur leur ordi, peuvent toujours voir transparents et/ou video, par défaut synchros.

Une question est posée sur un transparent précédent. En revenant sur ce transparent, la video est automatiquement positionnée sur le temps correspondant au transparent.

Je vois le nombre d'élèves connectés.

Elements à implémenter

La liste est volontairement longue, nous ferons des choix. La synchronisation dont il est question est une synchronisation "ponctuelle"

  1. MORE 1: présentations
    1. le serveur MORE, c'est à dire le serveur de synchronisation
    2. les fonctionalités de synchro
      1. une présentation MORE codée à la main et présentant une partie des fonctionalités de synchro
      2. une bibliothèque JS modulaire offrant des fonctionalités de synchro de base
    3. un outil d'enregistrement d'une présentation HTML5
    4. Contenus de test: présentations (transparents et notes), app de commande
  2. MORE 2: système multi-prof
    1. format de manifeste déclarant une liste de cours par prof
    2. serveur MORE 2
    3. bibliothèque MORE 2
    4. enregistrement multi-prof
  3. MORE 3: la video comme une présentation
    1. manifeste pour une video dont le temps pilote des transparents d'une autre présentation
    2. serveur MORE 3
    3. bibliothèque MORE 3
    4. enregistrement MORE 3 qui fonctionnera sur une simple video et créera l'emballage HTML5 nécessaire
    5. Contenus de test
  4. MORE 4: vous proposerez une extension qui vous semble pertinente

Technologies à mettre en oeuvre

Le serveur peut être en node.js/npm ou en python/pip. Toute bibliothèque npm ou pip libre est utilisable.

Sur les clients, tout doit être fait dans un navigateur:

  • n'importe quel navigateur sur un ordi, Chrome, Firefox, Safari, Edge
  • Safari sur iOS
  • et Chrome sur Android

De toute façon, il faut apprendre JavaScript, qui est nécessaire dans le navigateur. Sur le serveur, selon l'option choisie, ce sera JS ou python. Il faut aussi apprendre:

  • HTML5, de base et l'objet video
  • CSS de base pour les styles
  • WebSocket pour la communication entre les pages et le serveur (dans les deux sens).

Nous utiliserons une méthodologie agile, avec des cycles d'un ou deux jours. A chaque fin de cycle, nous décidons ensemble des tâches incluses dans le prochain cycle.