Browse Source

Ajout des infos pour l'écran du présentateur (et les notes)

master
jlecour 1 year ago
parent
commit
0c30774200
1 changed files with 36 additions and 1 deletions
  1. +36
    -1
      HowtoReveal.js.md

+ 36
- 1
HowtoReveal.js.md View File

@@ -1,4 +1,6 @@
# Howto reveal.js
---
title: Howto Reveal.js
...

## Pour faire des slides verticaux, il suffit d'englober plusieurs sections dans une même section :

@@ -111,3 +113,36 @@ Si vous avez Chromium sur votre machine, assurez-vous que le fichier /css/print/
### Alternative en utilisant NodeJS

Débrouillez vous pour obtenir un nodejs et npm suffisamment récent puis suivre la procédure officielle : https://github.com/astefanutti/decktape#install (non testé).

## Écran du présentateur

À l'instar des logiciels de présentation traditionnels, Reveal.js permet d'avoir un « écran du présentateur ». Il est affiché sur un écran choisi lorsqu'on dispose d'au moins 2 écrans. Par exemple l'écran de votre ordinateur portable, posé sur le pupitre, alors que le vidéo-projecteur diffuse la vue normale de la présentation.

Pour disposer de l'écran du présentateur et que les 2 pages web soient synchronisées, il faut qu'elles dialoguent avec un serveur web dédié à cette synchronisation. Il s'agit d'une application en Node.js que l'on peut installer avec un simple `# npm install` depuis l'emplacement où se trouve le fichier `index.html`. Si vous ne disposez pas de Node.js sur votre poste, voici notre [Howto Node.js](/HowtoNodeJS).

Une fois les paquets Node installés, il faut lancer l'application : `# npm start`. Cela va démarrer un processus en premier plan, qui indiquera à quelle adresse on peut se connecter pour consulter la présentation. Dans la plupart des cas, il va même ouvrir l'URL dans votre navigateur par défaut.

Il faut ensuite ouvrir la page de l'écran du présentateur avec la touche `s` depuis la page de la présentation. Un nouvel onglet (ou nouvelle fenêtre) s'ouvre. Vous pouvez alors disposer vos fenêtres comme bon vous semble entre vos multiples écrans. Il vous faudra probablement ne pas activer la recopie vidéo entre vos écrans, afin d'avoir un affichage différent sur chacun d'entre eux.

Quelques caractéristiques de l'écran du présentateur :
* le bouton "Layout" permet de changer de disposition dans la page ;
* le chronomètre peut être réinitialisé en cliquant dessus ;
* les commandes de défilement (clavier, souris ou « cliqueur ») fonctionnent quelle que soit la fenêtre qui a le focus.
* pour visualiser les notes, il faut une syntaxe particulière dans les sections.

### Notes du présentateur

Il faut ajouter une balise `<aside class="notes">` dans la `<section>` voulue :

~~~.html
<section>
<h2>Mon titre</h2>
<p>mon contenu</p>

<aside class="notes">
Il n'y a <b>que</b> le présentateur qui verra ces notes.
</aside>
</section>
~~~

Chaque diapositive peut alors avoir ses propres notes. On peut y mettre du code HTML, mais le style des notes est difficilement personnalisable.

Loading…
Cancel
Save