impress.js et Hovercraft

dimanche, 4 janvier 2015

Faire des slides n'amuse personne... et moi le premier. Je déteste écrire des diapos et pire encore faire en sorte que ça ait l'air joli.

Il y a quelques temps, Vincent m'a parlé d'impress.js. Cet outil permet en effet de réaliser une présentation en HTML5/CSS3/JS en incluant des effets plutot sympas. Vous trouverez sur son blog un article à propos d'impress.js.

Voilà qui semble prometteur mais un problème subsiste : la présentation doit être écrite en HMTL... certes, on aime pas faire des slides, mais taper du HTML n'a rien de particulièrement excitant...

Après une courte recherche, j'ai déniché Hovercraft. Cet outil écrit en python présente un intéret majeur : il vous permet d'écrire vos slides en ReST puis de les transformer en une page impress.js.

Voyons comment ça tourne sous le capot.

Installation

Rien de plus simple :

sudo apt-get install libxml2-dev libxslt1-dev
sudo pip install hovercraft

Basics

Rien de bien compliqué : vous commencez par donner un titre, déterminer la durée des transistions (en millisecondes) et éventuellement un CSS via quelques directives :

:title: Votre titre
:data-transition-duration: 1500
:css: presentation.css

Ensuite, vous passez aux slides en eux mêmes :

  • les transitions sont indiqués par 4 tirets seuls sur une ligne (avec une ligne blanche avant et après);
  • suivent les éventuelles directives de position pour le slide;
  • enfin, le texte du slide lui même.

Par exemple :

----

:data-x: 500
:data-y: 42

Premier Slide
=============

Et mon texte ici

----

:data-rotate-z: r90

Second slide
============

Et la suite du texte

La présentation ne doit pas finir sur une transition

Directives de position

Les directives sont décrites dans la doc.

Il existe notament les suivantes pour positioner le slide ::

:data-x:
:data-y:
:data-z:

Ainsi que celles ci qui permettent de faire tourner la vue autour d'un axe (en degrés) ::

:data-rotate-x:
:data-rotate-y:
:data-rotate-z:

Et :data-scale: qui permet les effets de zoom.

On peut les utiliser suivies d'un nombre. Les coordonnées spécifiées sont absolue, sauf si le nombre (positif ou négatif) est précédé d'un r.

Directives ReST

D'après ce que j'ai vu, toutes les directives ReST sont reconnues y compris ::

.. code:: lang

    sourcecode

Pour le code source coloré (via pygments).

Compilation

Pour compiler :

$ hovercraft fichier.rst repertoire_cible/

Si le répertoire n'existe pas, il sera créé. Vous y trouverez divers dossiers et fichiers externes ainsi qu'un index.html. Ouvrez le pour accéder à la présentation elle-même.

Style

Il peut être intéressant de rajouter un peu de CSS à la présentation pour passer du morne N&B par défaut à quelque chose de plus agréable.

La directive :css: à placer au début permet cela, ainsi que le flag -c CSSFILE ou --css CSSFILE d'Hovercraft.

Par exemple, un fichier comme celui ci permet un style plus sombre et doux que le style de base :

@font-face {
    font-family: "Armata";
    src: url(../fonts/Armata-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Bitter";
    src: url(../fonts/Bitter-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "BitterItalic";
    src: url(../fonts/Bitter-Italic.ttf) format("truetype");
}

@font-face {
    font-family: "BitterBold";
    src: url(../fonts/Bitter-Bold.ttf) format("truetype");
}

body {
    background: #14282C;
    color: #60959F;
    font-family: "Armata";
    font-size: 1.5em;
}

h1 {
    font-family: "BitterBold";
    text-italic: none;
    font-size: 2em;
}

h2 {
    font-family: "Bitter";
}

blockquote {
    font-family: "BitterItalic";
}

a, em {
    color: #91C5CF;
    text-decoration: none;
    font-weight: bold;
}

Il faut savoir que d'autres feuilles de style sont aussi inclues (notament pour la console de présentation, nous y reviendrons).

Style sur un slide particulier

Pour disposer d'un id spécifique à un slide, il suffit d'ajouter en début de slide (juste après la transition précédente) la directive suivante :

:id: id_voulu

L'id sera ajouté à la compilation et vous pourrez l'utiliser dans le CSS.

Fichier externes

Il est possible de lier des fichiers externes (css, images ou autres) par diverses directives :

:css: path/to/css

.. ou

.. image:: path/to/image.jpg

Si les chemins vers ces fichiers sont relatifs alors il seront copiés dans la TARGET_DIR à la compilation, le chemin spécifié sera conservé dans le index.html généré.

Notes

Il est possible d'ajouter des notes de présentation qui seront affichées dans la console (on y revient).

Ces notes sont ajoutées via :

.. note::

    Texte de la note
    sur
    plusieurs lignes
    au besoin :)

Extras

Quelques trucs en plus qu'il peut être bon de connaitre.

Templates

Hovercraft accède l'argument -t ou --template qui attend un fichier .cfg qui servira de template de configuration. Un exemple pour ce fichier (tiré de la documentation) :

[hovercraft]
template = template.xsl

css = css/screen.css
      css/impressConsole.css

css-print = css/print.css

js-header = js/dateinput.js

js-body = js/impress.js
          js/impressConsole.js
          js/hovercraft.js

resource = images/back.png
           images/forward.png
           images/up.png
           images/down.png

Ce fichier permet notament de chaner le .xls qui contrôle la mise en page. De ce côté, le plus simple reste la modification du fichier par défaut : hovercraft/templates/default/template.xsl.

Plus d'infos ici.

Console de présentation

Hovercraft inclus à la présentation finale une console (impressConsole.js) qui permet de contrôler la présentation. Celle-ci comprend :

  • le slide en cours,
  • le slide suivant,
  • une horloge,
  • un timer (remis à zéro en cliquant dessus),
  • des liens pour le changement de slide en avant ou en arrière (les flèches et la barre espace marchent aussi),
  • les notes concernant le slide en cours.

J'essaierais de modifier un peu cette console pour qu'elle soit plus agréable qu'elle ne l'est actuellement.

Options en lignes de commange

Voilà pour finir 3 options qui peuvent s'avérer utiles :

  • -a ou --auto-console force l'affichage de la console dès le début (utile pour répèter),
  • -s ou --skip-help désactive l'affichage de l'aide,
  • -n ou --skip-notes désactive l'inclusion des notes de présentation

Conclusion

Hovercraft et impress.js forment un tandem prometteur et efficace quand on veut créer des diaporamas sans s'encombrer d'une GUI ni manger du LaTeX.

Il est à noter que toutes les possibilitées d'impress.js ne sont pas transcrites dans Hovercraft (la doc d'impress.js est dans le code source de la page de présentation, ce qui la rend pas sympa à lire...).

Certaines choses sont probablement à améliorer mais c'est déjà un excellent début.

EDIT : il existe aussi slid.es. Merci à @fblain pour l'info