URL: https://linuxfr.org/users/medspx/journaux/faire-un-diaporama-comment%C3%A9-en-html5 Title: Faire un diaporama commenté en HTML5 Authors: Médéric RIBREUX Date: 2010年02月20日T19:07:11+01:00 Tags: fosdem, rmll et openoffice Score: 29 Hello, je viens de découvrir [une nouvelle manière de faire des "screencasts" en HTML5](http://www.toolness.com/wp/?p=772). Par screencasts, j'entends des présentations commentées. Jusqu'à présent, on pouvait les réaliser avec du Flash (par exemple avec wink) avec les problèmes que ça pose (pas libre, plugin indispensable) ou plus "universellement" avec une simple vidéo. On pouvait aussi déposer un simple fichier odp qui a l'inconvénient principal de nécessiter OpenOffice (qui est parfois lourd à lancer pour juste afficher 10 slides) ou un fichier PDF qui a l'inconvénient de de ne pas permettre des commentaires sonores. Mais grâce à HTML5, on peut faire autrement et plus léger avec du support de sous-titres et en multi-langues. En effet, un screencast n'est autre qu'une sorte de diaporama avec du son et des sous-titres. Avec HTML5, et la balise audio, il est possible d'ajouter des pistes sonores. Les slides peuvent être de simples images ou encore plus simple, du contenu HTML. Mieux, comme le reste de la page, on peut utiliser CSS pour styler la présentation. Un peu de javascript pour gérer le couplage son et affichage ainsi que les sous-titres et on obtient [quelquechose qui ressemble à ça](http://labs.toolness.com/ff-herdict-preso/). Si vous observez le code source, vous verrez que c'est assez simple à coder: - les slides sont des éléments div qui s'affichent au bon moment avec javascript. - les sous-titres sont gérés également dans un élément div. - la piste audio est une simple balise audio. On pourrait se dire que la gestion du truc avec Javascript impose un grosse bibliothèque compliquée pour faire tourner le bousin... et bien que nenni ! [Le code Javascript](http://hg.toolness.com/ff-herdict-preso/file/blog-post/js/ff-herdict-preso.js#l37) tient dans une centaine de lignes. Je trouve que c'est assez intéressant. En effet, on pourrait imaginer des présentations de tout bord réalisées de cette manière pour tous les évènements et les conférences qui gravitent dans l'univers du libre (Fosdem, RMLL, DebConf, etc...). Les avantages sont nombreux: - piste sonore: l'exposé est commenté, on pourrait prendre la piste audio enregistrée lors de la conférence. - sous-titres: impeccable pour lire en silence ou pour récupérer une traduction texte du contenu audio - multi-langues: si des contributeurs désirent traduire la piste son ou les sous-titres, c'est possible de l'intégrer. - la présentation est sans doute plus légère que son équivalent en vidéo ou en Flash car le seul élément volumineux est le son. - un simple navigateur web suffit (enfin un qui supporte la balise audio): pas besoin d'ouvrir un programme externe. Mieux, on peut regarder le source pour voir comment c'est fait. - la demande en ressource CPU est globalement limitée au décodage du son. A priori, c'est moins gourmand qu'une vidéo complète. - On peut avoir du contenu HD (super affichage du texte sur l'écran avec des polices antialiasées): pas besoin de consacrer du CPU à afficher un simple texte même avec des grosses images au lieu de faire une vidéo qui affiche un contenu statique. - Ca marche avec des codecs libres. L'inconvénient de cette technique c'est que ça reste artisanal pour le moment: il n'y a pas d'outils dédiés et tout se fait à la main. Par exemple, la gestion du son demande un sacré temps de préparation: l'enregistrement doit être de bonne qualité et surtout, il faut se tapper la synchronisation des diapos et des sous-titres à la main ce qui est fastidieux. Cet inconvénient peut sans doute être levé facilement avec des outils adaptés. On pourrait imaginer un export "latex2presentation_HTML" ou carrément OpenOffice vers présentation_HTML. Ou encore quelquechose pour gérer la partie son. A l'avenir, je trouve que cette technique mérite d'être expérimentée et améliorée.

AltStyle によって変換されたページ (->オリジナル) /