Tensin

Lassé des innombrables bugs d’OpenOffice et des incompatibilités avec les fichiers PowerPoint qui me font vite perdre trop de temps pour de simples problèmes de mises à pages (mhh les puces sous OpenOffice qui réagissent n’importe comment …), j’ai trouvé quelques alternatives plutôt pas mal.

Dans mon cahier de charges de la solution alternative à PowerPoint :

• simplicité de la solution (simplicité d’utilisation, simplicité d’installation) ;
• portabilité (doit pouvoir fonctionner sur plusieurs plateformes) ;
• capacité à publier de différente manière la présentation : sous forme de slideshows bien sûr (projection au vidéo-projecteur), mais aussi en version papier voir faciliter la publication HTML au sein d’un site ;
• génération automatique de la table des matières (parce que je trouve aberrant de perdre du temps sur çà en rédigeant un .ppt) ;
• navigation intelligente (notamment lorsqu’il y a des animations - par ex. des puces qui apparaissent de manière incrémentale, pouvoir passer à l’animation suivante bien sûr mais aussi directement passer au slide suivant) ;

J’ai trouvé plusieurs outils, détaillés ci-dessous, qui respectent presque tous la même philosophie : un moteur HTML (ou XHTML, ou XML) avec un peu de JavaScript pour gérer l’aspect slideshow.

• HTML Slidy ;
• S5, son add-on de rendu visuel Presentacular, et le fork S5 Reloaded ;
• Slideous (le meilleur choix selon moi, voir plus loin) ;
• AJAX-S ;
• Enfin, Impress!ive (anciennement KeyJNote), qui est le seul à avoir une autre philosophie ;

HTML Slidy

La norme du W3C, très similaire à S5 dont on sent d’ailleurs l’inspiration ; pas mal du tout, mais n’a pas l’air très répandu au final.

Lien : http://www.w3.org/2005/03/slideshow.html

S5

Sans doute le projet le plus répandu sur cette philosophie et au final le plus actif (avec ses add-ons et ses dérivés). Le principe est le même que HTML Slidy, une page HTML et du Javascript pour en gérer l’affichage. Le projet originel n’est plus maintenu.

Un add-on intéessant à S5 est : Presentacular, qui améliore l’affichage, avec grâce à l’introduction de la librairie JavaScript Spetacular quelques effets (déplacement de blocs de texte, “vibration” de ligne de texte, etc.), qui peuvent être utile dans certains cas (mais sont totalement superflus à mes yeux).

Voici un exemple en ligne avec Presentacular. Et ici un tutorial très complet sur S5 + Presentacular (sur Framasoft).

Lien : http://meyerweb.com/eric/tools/s5/structure-min.html

S5 Reloaded.

Comme le projet S5 n’est plus actif, d’autres bonnes volontés se sont manifestées pour enrichir ce projet open-source avec des fonctionnalités supplémentaires, c’est ainsi qu’est né S5 Reloaded, qui est donc une reprise et un enrichissement du projet S5. Pour quelqu’un qui voudrait partir sur S5, c’est bien sûr sur cette version qu’il faut aller.

Les nouveautés sont essentiellement :

• gestion du multimédia (audio via des MP3, fichiers vectoriels SVG, fichiers flash) ;
• gestion d’un fondu entre les pages ;
• meilleure gestion des éléments graphiques type images (redimensionnement automatique) ;
• gestion de l’autoplay (= déroulement automatique des slides) ;
• pannel de navigation en bas qui apparaît lorsque l’on déplace la souris en bas de l’écran avec des fonctions de navigation type DVD (pause, next, etc.) ;

La rançon de ses fonctionnalités est qu’il y a plus de fichiers à inclure / gérer (même si çà reste très facile), une feuille de style spécifique pour Opera, etc.

Un exemple en ligne et la page de download.

Au final S5 / S5 Reloaded est une solution intéressante mais :

• Le changement de slide est mal fichu quand il y a des puces qui s’affiche de manière itérative : impossible de passer au slide suivant sans faire défiler toutes les puces : il aurait été mieux que ESPACE et FLECHE BAS fassent apparaître les puces et PAGE DOWN ou FLECHE DROITE amène au slide suivant par ex. ;
• Il n’y a pas de navigation par vignettes (difficile à faire vu le principe de S5) ;

Lien : http://www.netzgesta.de/S5/reloaded/

Slideous

Slideous a été réécrit après la publication de S5 et d’HTML Slidy. Il en reprend les grands principes mais apporte plusieurs fonctions de navigations intéressantes qui m’intéressent bigrement :

• génération automatique de la table des matières à partir des titres des différents slides ;
• status bar très complète ;
• navigation intelligente au sein des slides : quand il y a des éléments comme des puces qui s’affichent un par un, il est toujours possible de passer directement au slide suivant (indispensable quand en fin de présentation on veut naviguer dans les slides pour en remontrer un) ;

De plus Slideous est particulièrement simple niveau intégration (autant que HTML Slidy, et plus que S5 Reloaded) : il y a juste un fichier .css et un fichier .js à intégrer dans le HTML de présentation.

Un exemple de page toute simple affichée (ici sur Google Chrome) :

Un exemple de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Réunion</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="auteur" /> 
    <meta name="date" content="date" /> 
    <meta name="autoincrement" content="true" /> 
    <link rel="stylesheet" type="text/css" href="ui/slideous.css" /> 
    <script src="ui/slideous.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- statusbar -->
    <div id="statusbar">
      <span style="float:right;">
        <span style="margin-right:4em;font-weight:bold;"><span id="slideidx"></span> of {$slidecount}</span>
        <button id="prevslidebutton" title="previous slide">&laquo;</button>
        <button id="previtembutton" title="previous item">&lsaquo;</button>
        <button id="nextitembutton" title="next item">&rsaquo;</button>
        <button id="nextslidebutton" title="next slide">&raquo;</button>
        <button id="incfontbutton" title="content">A+</button>
        <button id="decfontbutton" title="first slide">A-</button>
        <select id="tocbox" size="1"><option></option></select>
      </span>
      <span id="eos">&frac12;</span>
      <span title="{$location}, {$date}">{$title}, {$author}</span>
    </div>

    <!-- slides -->
    <div class="slide">
      <h1>Introduction</h1>
    </div>

    <div class="slide">
      <h1>Table des matières</h1>
      <ul id="toc" class="incremental"><li></li></ul>
    </div>

    <div class="slide">
      <h1>Slide 1</h1>
    </div>
  </body>
</html>

En gros tout le début ne change pas (sauf l’auteur, etc.), et il suffit d’écrire des blocs div pour chaque slide, et c’est tout. Je trouve çà plutôt simple et rapide (copié / collé facilités, changement de thème via la CSS, etc.).

Lien : http://goessner.net/articles/slideous/slideous.html

AJAX-S

Je n’ai pas beaucoup creusé cette version parce que Slideous me convient bien, mais un des intérêts d’AJAX-S est qu’il fonctionne en XML pur, donc il n’est pas nécessaire d’écrire du HTML. Sinon il est à l’usage et sur le principe relativement semblable aux autres.

Lien : http://robertnyman.com/ajax-s/

Impress!ve

Il s’agit d’un moteur de rendu de fichiers .pdf avec plusieurs fonctionnalités sympas, notamment la surbrillance à la souris, la navigation au sein des diapos par vignettes et l’enchaînement automatique des slides.

Le principe est simple : il faut générer un .pdf d’une manière quelconque (Word, OpenOffice, etc.), et Impressi!ve se charge d’en faire l’affichage en mode présentation, pour un rendu très agréable (la surbrillance t les vignettes notamment).

Si ce mode de publication peut paraître simple, en pratique j’y trouve des inconvénients :

• La génération du .pdf peut être laborieuse : il faut un outil “annexe” à Impress!ve ;
• Impress!ve est basé sur Python avec plusieurs dépendances système, et du coup c’est assez laborieux à installer (personnellement j’ai laissé tomber après 30 minutes à cause de l’installation de tous ces modules pytons un peu compliquée sur mon poste SuSE bridé) ;

Lien : http://impressive.sourceforge.net/

Matrice de comparaison.

	Impress!ve	HTML &Tidy	S5	S5 &Reloaded	Slideous	AJAXS
Projet vivant
Communauté active
Installation simple
Table des matières automatique
Navigation intelligente
Fonctions de navigations avancées
Navigation par vignette
Facilité de publication externe
Séparation fond/forme

Conclusion.

Pour conclure, tous les projets ont leurs avantages et leurs inconvénients. S5 (via S5 Reloaded) est le plus actif et a la meilleure gestion multimédia, HTML Slidy a pour lui le côté standard du W3C mais est resté plutôt confidentiel, Impress!ve a des fonctionnalités de navigation très sympas que n’ont pas les autres, AJAX-S a la meilleure séparation fond / forme puisqu’il n’est pas nécessaire de faire du HTML …

Du coup, au final, même s’il ne présente pas d’avancées majeures face aux autres, le choix le plus intéressant reste clairement pour moi Slideous, peu d’inconvénients, et couverture de quasiment toutes les fonctionnalités dont j’ai besoin.

Enfin, pratiquement toutes ces solutions reste du Javascript et c’est bien dommage - je n’aime vraiment pas le Javascript, techniquement j’aurais préféré un autre mécanisme … mais je suis néanmoins plutôt content du résultat final : une fois le système en place, c’est publiable à différents endroits (y compris sur un site généré par Maven par ex.).

Annexes.

Une présentation en anglais de KeyJNote et S5.

En complément, même si je n’ai pas exploré cette piste, une autre alternative serait de passer par un document LaTeX : à partir d’un document source LaTeX, il est possible de générer du .pdf et du .html et il existe des extensions pour la présentation (notamment TexPoint et Beamer).

Il y a bien sûr d’autres alternatives plus dans la même logique que PowerPoint, voir par exemple ce comparatif “11 alternatives pour se passer de Powerpoint”.