Des transparents dans le navigateur
Le but de ce document est de documenter comment faire des transparents présentables dans tout navigateur, faciles à créer et à éditer.
Introduction
Faire des transparents en HTML, c’est assez pénible, comparé à la facilité de faire des transparents en Powerpoint (quand on a l’habitude…).
Il n’y a pas d’éditeur HTML WYSIWYG, encore moins pour faire des transparents.
Pour faire des transparents en HTML, il faut utiliser un package JS comme Reveal.js, WebSlides, S5, Slidy, Slideous… Ces packages demandent un peu d’apprentissage et sont tous différents en terme de capacité.
Méthode proposée
Je vous propose d’utiliser la méthode suivante pour faire vos transparents:
- utiliser du markdown pour écrire les transparents, à ceci près que pour moi, les titres sont aussi des lignes qui commencent par # ou ## ou ###
- chaque titre principal démarre un transparent
- l’outil pandoc permet de traduire votre markdown en HTML en utilisant le package Reveal.js
Prérequis
Avant de pouvoir jouer avec cet exemple, il vous faut installer pandoc sur votre machine.
Ensuite, il vous faut un modèle de transparents comme celui-ci: c’est une coquille vide dans laquelle pandoc viendra insérer les transparents traduits de markdown.
Ce modèle dépend d’un fichier style.css et du fait que vous allez installer Reveal.js dans un dossier ../reveal3
, c’est à dire un dossier “frère” du dossier courant.
L’exemple
L’exemple est ce fichier même.
Un petit tableau:
a | b | c |
---|---|---|
xxxxxxx | yy yyy yy | zz zz zzzz zzz zz zz zz |
Une image:
La commande pour créer les transparents
pandoc transparents.md -o transp.html -t revealjs -f gfm --template=modele.html --no-highlight --metadata=title:transparents
pandoc
c’est la commandetransparents.md
est le fichier d’entrée en markdown-o transp.html
est le fichier produit par pandoc-t revealjs
instruit pandoc d’utiliser reveal.js pour construire les transparents-f gfm
instruit pandoc d’utiliser un dialecte GitHub pour le markdown (ma préférence)--template=modele.html
instruit pandoc d’utiliser un fichier modele.html qui doit contenir un modèle de transparents HTML avec reveal.js. J’utilise celui-ci, à adapter à votre cas.--no-highlight
(optionnel) supprime certaines fioritures de pandoc--metadata=title:transparents
pour que le html produit ait un titre