MORE : multiprésentation multiécran synchronisées

Encadrants : 

Occurrences : 

2018

Nombre d'étudiants minimum: 

2

Nombre d'étudiants maximum: 

3

Nombre d'instances : 

2

Domaines: 

Introduction

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 de contenu sert les fichiers nécessaires aux présentations et gère leur synchronisation entre les divers écrans.

Scénario coeur

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.

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.

Scenario 2

Chaque écran s’enregistre auprès du serveur. Ce qui est affiché sur un écran peut être décidé soit par un utilisateur interactif de l’écran, soit par le serveur. Une application de gestion des écrans peut être ouverte pour ouvrir une application multiprésentation et envoyer des éléments de l’appli sur les écrans disponibles, voire déplacer une présentation d’un écran à un autre.

Dans une réunion avec 4 ordinateurs portables, le présentateur peut envoyer des éléments sur un des autres écrans, et l’y laisser pendant qu’il continue avec un autre élément, pour pouvoir y revenir au besoin.

Elements à implémenter

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

MORE 1: présentations

  • le serveur MORE, c’est à dire
    • le serveur pour les contenus
    • le serveur de synchronisation
  • les fonctionalités de synchro
    • une présentation MORE codée à la main et présentant une partie des fonctionalités de synchro
    • une bibliothèque JS modulaire offrant des fonctionalités de synchro de base
  • un outil d’import pour transformer automatiquement à une présentation
  • HTML5 avec les bons prerequis en une présentation MORE
  • Contenus de test: présentations (transparents et notes), app de commande

MORE 2: multi présentation, une présentation peut en driver une autre

  • format de manifeste déclarant une multiprésentation
  • serveur MORE 2
  • bibliothèque MORE 2
  • import MORE 2 distinguant la création d’une nouvelle app MORE
  • de son enrichissement avec une autre présentation et de l’edition
  • des liens temporels entre présentation
  • Contenus de test

MORE 3: la video comme une présentation

  • manifeste MORE 3
  • serveur MORE 3
  • bibliothèque MORE 3
  • import MORE 3 qui fonctionnera sur une simple video et créera l’emballage
  • HTML5 nécessaire
  • Contenus de test

MORE 4: migration des présentations d’écran en écran

  • serveur MORE 4
  • bibliothèque MORE 4
  • application de gestion des applications MORE 4 (format peut etre identique
  • à MORE 3)

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. À chaque fin de cycle, nous décidons ensemble des tâches incluses dans le
prochain cycle.

Des contenus de test et une documentation seront produits avec le code. Une réflexion sera menée sur la possibilité d’un test automatique.