14 avril 2022

crédits photo : Hakim El Hattab

Powerpoint c'est bien mais...

Quand on veut réaliser un support pour une présentation sous forme de diapositives, on commence toujours par la définition de son contenu. On s'interroge sur les idées essentielles que l'on veut mettre en avant, puis on structure ces idées sous la forme d'un plan, et enfin on détaille chaque élément de ce plan en une ou plusieurs diapositives.

La plupart du temps, on aimerait pouvoir écrire ce contenu sans s'intéresser particulièrement à sa mise en forme finale, ou encore mieux, se concentrer sur le contenu et laisser à quelque chose d'autre le soin de le présenter correctement et lisiblement à l'écran.

J'ai longtemps réalisé toutes mes présentations avec Powerpoint, mais avec le temps et le nombre de présentations à réaliser augmentant, j'ai cherché un outil me permettant d'aller plus vite. Un tel outil doit être capable d'automatiser autant que possible la mise en forme du contenu des diapositives, laissant à l'auteur la responsabilité d'en définir le fond.

Soyons clair, un outil informatique qui serait capable d'analyser un texte et de le présenter de façon entièrement automatisée selon les intentions de son auteur n'existe pas encore. L'outil doit donc être aidé par des marqueurs que l'auteur va placer judicieusement dans son texte.

Ces dernières années, une syntaxe pensée pour cela a été adoptée par un nombre croissant d'utilisateurs : le Markdown. Cette syntaxe permet d'écrire du texte en restant le plus proche possible d'une écriture naturelle, tout en permettant d'y injecter des caractères spéciaux dont le but est d'indiquer la mise en forme souhaitée ou d'inclure des éléments externes comme des images ou des vidéos. Le Mardown utilise donc le même principe que le HTML ou LaTeX, mais en privilégiant la simplicité ce qui permet très vite d'être à l'aise avec cette syntaxe. Pour ne rien vous cacher, les textes de ce blog sont rédigés en Markdown. Attention cette simplicité se paie par des possibilités de mises en forme plus restreintes, il n'est pas question de dire qu'on peut remplacer LaTeX par du Markdown !

Un simple éditeur de texte suffit pour écrire du Markdown, mais pour l'afficher il faut des outils qui soient capable de l'interpréter. Il en existe désormais un grand nombre, comme par exemple Typora, Joplin, Text, StackEdit et des dizaines d'autres. Ces outils permettent aussi de convertir un texte en Markdown vers d'autres formats, en particulier du PDF. À ce propos citons aussi l'outil Pandoc véritable couteau suisse de la conversion entre documents de format différents.

Les outils cités ci-dessus sont pensés pour réaliser des documents ou des notes. D'autres visent la réalisation de présentations. C'est le cas par exemple de Marp ou de reveal.js. J'ai personnellement adopté ce dernier. Je vous présente dans ce post ce qu'il faut savoir pour démarrer, avec en particulier :

• L'installation logicielle nécessaire pour réaliser une présentation avec reveal.js
• Les principaux éléments pour concevoir une présentation avec ce logiciel.
• Le placement sous git de vos présentations de façon à pouvoir gérer l'évolution de leurs versions et leur éventuelle conception collaborative.
• La publication et l'hébergement de vos présentations sur les GitLab Pages pour qu'elles soient aussi accessibles en ligne.

reveal.js, un outil pour réaliser des présentations écrites en Markdown ou en HTML

Reveal.js est un outil conçu par Hakim El Hattab qui présente un contenu écrit en Markdown sous la forme d'une page web structurée en plusieurs diapositives plein écran.

L'intérêt de cet outil réside dans le fait que :

• La définition du contenu est simplifiée car elle se fait en mode texte en Markdown.
• La rendu se fait sous la forme d'un page web et est donc visualisable par n'importe quel navigateur
• Le zoom du contenu s'adapte à la taille de l'écran ce qui convient à une projection sur grand écran mais aussi à la consultation sur mobile.
• On peut facilement obtenir un rendu en PDF si besoin.
• Pour les cas nécessitant un plus grand contrôle du rendu, on peut utiliser du HTML/CSS mélangé au Markdown.

Un exemple valant mieux qu'un long discours (ou qu'un long post 😄), le site officiel présente une démonstration de présentation écrite en reveal.js. Je vous recommande vivement de la regarder si vous voulez avoir une idée des possibilités de ce framework.

Installation

La documentation officielle donne plusieurs façons d'installer reveal mais je vous en propose une autre, qui présente l'avantage de pouvoir regrouper vos présentations en un seul projet tout en pouvant les paramétrer individuellement, et qui vous permettra d'automatiser le placement de vos présentations en ligne en utilisant les GitLab Pages.

Clonez le projet Git disponible ici pour avoir une base vous permettant de créer votre première présentation rapidement. Pour cela vous devez avoir installé Git sur votre machine.

git clone https://gitlab.com/nicolassinger/reveal-starter.git

Ce projet contient un exemple de présentation. Vous pouvez l'ouvrir avec n'importe quel éditeur mais vous gagnerez en confort en utilisant un IDE spécialisé pour le web comme Visual Studio Code ou WebStorm.

Pour visualiser la présentation, ouvrez un terminal en vous plaçant à la racine du projet :

• Exécutez la commande npm install
• Lancer le serveur web local avec la commande http-server
• Cliquez sur un des liens proposés pour visualiser le sommaire des présentations (c'est le fichier index.html situé à la racine du projet). Un lien vous mène à la présentation initiale.

Conception d'une première présentation

Le dossier presentations du projet contient un sous-dossier par présentation. Vous y trouvez un exemple de présentation dont vous pouvez faire une copie ou que vous pouvez modifier directement. Son point d'entrée est le fichier index.html (voir ci-dessous) qui permet de paramétrer les propriétés de votre présentation (nom, auteur, etc.) et éventuellement de modifier certains de ses paramètres (par exemple la largeur et la hauteur de l'écran afin de définir son ratio).

En plus de ces paramètres, ce fichier charge les plugins reveal dont on a besoin et définit le style qui sera utilisé pour colorer les parties de code informatique de votre présentation. Reveal utilise pour cela la bibliothèque Javascript highlightjs. Dans la présentation de départ on utilise la coloration de github mais si vous voulez ajouter des styles supplémentaires, vous pouvez les télécharger à partir de cette adresse, les placer dans le dossier styles de votre projet, et les référencer à partir du fichier index.html de votre présentation.

Enfin le fichier ìndex.html inclut le fichier custom.css qui contient des définitions de style spécifiques à votre présentation. Voici le contenu initial du fichier index.html:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Jetpack Compose</title>
    <meta name="description" content="Cours sur Jetpack Compose">
    <meta name="author" content="Nicolas.Singer@gmail.com">
    <link rel="stylesheet" href="../../node_modules/reveal.js/dist/reset.css">
    <link rel="stylesheet" href="../../node_modules/reveal.js/dist/reveal.css">
    <link rel="stylesheet"
        href="../../node_modules/reveal.js/dist/theme/white.css" id="theme">
    <link rel="stylesheet" href="../../styles/github.css" id="highlight-theme">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section data-markdown="slides.md"
             data-background-image="backgrounds/compose.png"
             data-background-size="10%"
             data-background-position="top right"
             data-separator="---"
             data-separator-vertical="^vvv"
             data-separator-notes="^Note:"
             data-charset="UTF-8">
        </section>
      </div>
    </div>
    <script src="../../node_modules/reveal.js/dist/reveal.js"></script>
    <script src="../../node_modules/reveal.js/plugin/zoom/zoom.js"></script>
    <script src="../../node_modules/reveal.js/plugin/notes/notes.js"></script>
    <script src="../../node_modules/reveal.js/plugin/search/search.js"></script>
    <script src="../../node_modules/reveal.js/plugin/markdown/markdown.js"></script>
    <script src="../../node_modules/reveal.js/plugin/highlight/highlight.js"></script>
  </body>
</html>

Le reste de la présentation s'écrit au format markdown et se trouve dans le fichier slides.md. Les différentes diapositives sont séparées les unes des autres par trois tirets à la suite ---. Pour le reste c'est du Markdown classique. Par exemple voici comment on peut définir le premier slide :

# Ma première présentation

Nicolas Singer

Nicolas.Singer@gmail.com
---

et voici le rendu obtenu

On peut mélanger du HTML avec le Markdown ce qui permet d'exprimer des choses impossibles à faire en Markdown comme changer la taille de la police. On peut aussi utiliser un commentaire à la forme spéciale pour préciser la classe CSS d'un élément Markdown :

# Markdown avec HTML

Ce paragraphe contient des parties écrites
<span style="font-size: small;">en plus petits caractères</span>.

Celui-là utilise une classe définie dans `custom.css`
pour s'aligner à gauche.
<!-- .element: class="left" -->
---

On peut bien entendu insérer des liens, des images, des vidéos, des extraits de code informatique automatiquement mis en valeur. Si vous ne connaissez pas bien le Markdown vous pouvez consulter sa documentation de référence disponible ici.

Cela devrait vous suffire pour démarrer et créer une première présentation. Pour aller plus loin et concevoir des animations, des notes de présentation, ou des diapositives imbriquées, référez-vous à la documentation officielle.

Publication sur les GitLab Pages

Rendez-vous sur le site de GitLab et créez un nouveau projet vide, en prenant soin de décocher la case Initialize Repository with a README.

Pour attacher votre projet de présentation au projet GitLab, exécutez les instructions suivantes:

git add .
git commit -m "Commit initial de ma présentation"
git remote rename origin old-origin
git remote add origin <url de votre projet GitLab>
git push -u origin --all

Rechargez la page du projet chez GitLab, vous devez apercevoir une icône signifiant que GitLab est en train d'exécuter le processus contenu dans le fichier .gitlab-ci.yml. C'est ce processus qui publie les pages du projet dans les Gitlab Pages.

Au bout de quelques minutes, le pipeline se termine et en rechargeant la page, l'icône a dû passer au vert.

Si l'icône n'est pas verte vous pouvez cliquer dessus pour voir ce qui n'a pas fonctionné, sinon le sommaire de vos présentations est disponible sur votre espace GitLab Page avec un URL au format :

https://username.gitlab.io/projet/presentation

username étant à remplacer par votre nom utilisateur GitLab et projet par le nom du projet GitLab.

Conclusion

Reveal.js est un framework pour la conception de présentations web. Il permet de créer rapidement des diapositives en laissant l'auteur spécifier son contenu en mode texte. Il est particulièrement performant pour réaliser des présentations techniques dans lesquelles on peut être amené à présenter des extraits de code. Le fait d'être en mode texte permet de collaborer facilement entre auteurs d'un même document surtout si on utilise un système de gestion de versions comme Git. Le rendu de la présentation étant une page web statique on peut facilement l'héberger en ligne comme nous l'avons vu par exemple avec les GitLab Pages.

Terminons en remerciant l'auteur de ce framework Hakim El Hattab et ses contributeurs pour l'avoir mis à disposition de la communauté. Hakkim propose aussi une version payante de reveal.js qui permet de concevoir ses présentations graphiquement, directement en ligne. On peut l'utiliser gratuitement pour créer cinq présentations et ainsi tester son intérêt.