Faire ses présentations dans un navigateur web

Jusqu’ici, j’utilisais pour mes présentations LaTeX beamer. En effet, je trouve plusieurs avantages à celui-ci :

  • Qualité Latex
  • Langage déjà connu
  • Format interopérable (pdf)
  • Facilité de l’intégration de mathématiques (l’écriture est lisible, le résultat de qualité) : indispensable pour moi
  • Customisation possible avec Tikz (même si je l’utilise assez peu au final pour mes slides)

Cependant, latex beamer a un inconvénient, c’est celui de son format lorsqu’on veut avoir des  choses un peu plus exotiques (animation, video…). Bien sûr, intégrer une vidéo dans un pdf est possible mais ça reste de la bidouille, de l’arnaque. Qui plus est, une technique pourra très bien fonctionner avec un lecteur (au hasard adobe acroread) mais pas avec un autre (evince, okular…). Cette situation ne me satisfait donc que partiellement.

Html/CSS

L’idée est d’utiliser du html afin de produire notre présentation (je préviens de suite que je suis très loin d’?tre éclairé à ce sujet). J’ai déjà assisté à des conférences où une telle technologie était utilisée (ubuntu party…) et c’est Loïc Dachary qui m’a poussé à me repencher au problème. Une solution toute faite existe : DZslides. La licence de ce modèle est très permissive : WTF Public License. Autrement dit, on pourra mettre les présentations sous n’importe quelle licence. L’écriture des transparents ne déroutera pas le latex beamer-ophile. Dans un grand fichier, il suffit d’écrire les pages les unes à la suite des autres dans des balises

<section>
blabla
</section>

Les règles classiques de l’html s’appliquent alors. Une fois la page ouverte dans le navigateur, on se déplace avec les flèches du clavier ou avec une télécommande… classique.

On pensera à changer ce bout de code (ligne commentée + ma nouvelle ligne)

<!– <link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’> –>
<link href=’oswald-style.css’ rel=’stylesheet’>

dans le cas où on ne dispose pas de connexion internet lors de la présentation. Le fichier oswald-style.css contient la contenu de l’url, tout simplement.

Intégration de vidéo

L’intégration d’une vidéo se fait sans encombre grâce à l’html5 :

<video width=”400″ height=”222″ controls=”controls” preload>
<source src=”video.ogv” type=”video/ogg” />
</video>

Ceci devrait suffire.

Intégration des graphiques et images générés par Latex

Ceux qui me suivent un peu savent que j’utilise latex à la fois pour les figures (tikz ou chemfig) et pour les graphiques (gnuplot avec le sortie tikz). Des petits codes et des makefiles me permettent de sortir directement à partir des sources, les fichiers utilisables : pdf, eps (lorsque je dois échanger avec des gens utilisant latex et non pdflatex) et un tex avec la bibliothèque standalone.

Pour intégrer nos images, il va falloir un autre format. Je travaille avec latex tout du long de ma chaine de production de contenu afin d’ssurer une bonne qualité. Ainsi, je vais continuer en ce sens en produisant un fichier vectoriel svg. J’utilise pour cela l’utilitaire pdf2svg empaqueté chez debian et archlinux (et sans doute ailleurs).

Pour insérer dans la page, on utilise la balise embed.

Et les maths dans tous ça ?

Il faut maintenant réussir à écrire des mathématiques. Passer par un fichier contenant la formule est une technique fréquemment utilisée par les gens utilisant des logiciels comme Libreoffice. Ceci ne me satisfait par car il me faudrait ajouter une étape lors de ma production, la génération de l’image à partir du code Latex. On (François, tu te reconnaîtra) m’a parlé de mathml : c’est un langage xml permettant d’avoir un rendu d’équation. Très bien, mais ajouter à la main des portions de code mathml ne rend pas la solution meilleure à mes yeux et mathml est trop abscons pour que je le tape directement. Il existe des “convertisseurs” latex-mathml, mais on retombe sur le point pénalisant précédent. En poursuivant mes recherches sur cette piste, j’ai rouvé mathjax, un code javascript publié sous licence Apache v2 (les sponsors et partenaires sont de qualité : AMS, Elsevier, APS…).

Après avoir récupéré les fichiers, il suffit de mettre par ex dans le header :

<script type=”text/javascript” src=”mathjax/MathJax.js?config=TeX-AMS_HTML”></script>

Divers configurations existent… Je vous renvoie à la doc qui est très très bien faite, il y a même des démos en vidéo. Le texte doit se trouver dans des balises <p> </p> :

<p>
\\begin{align}
\\dot{x} & = \\sigma(y-x) \\\\
\\dot{y} & = \\rho x – y – xz \\\\
\\dot{z} & = -\\beta z + xy
\\end{align}
</p>

On peut utiliser les $ aussi. J’ai pour l’instant un problème avec les $ simples, mais aucun avec $$. Je remplace mes $ simples par \\( et \\).

Voilà, je pense qu’avec ces divers éléments, la production d’une présentation de qualité et alternative à Latex beamer est possible. Pas encore testé, mais pour remplacer dzslides, on pourra se tourner vers le projet html5rocks pour les slides, le code peut être récupéré avec un wget ou directement sur le dépôt mecurial du projet. Il présente quelques fonctionnalités sympathiques comme l’intégration de notes, le zoom, le changement de thème…


Vus : 2407
Publié par François : 67