Journal Faire un diaporama commenté en HTML5

Posté par Médéric RIBREUX (site web personnel) le 20 février 2010 à 19:07.

Étiquettes :

fév.

2010

Hello,

je viens de découvrir une nouvelle manière de faire des "screencasts" en HTML5. 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.

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 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.

# + Sozi

Posté par Octabrain le 20 février 2010 à 20:52. Évalué à 6.

à combiner avec Sozi [https://linuxfr.org/~llumeao/29133.html]
(tiens c'est amusant, google intercepte tous les clics de résultats depuis une recherche, sans être loggé ni rien... pour le vérifier, cherchez n'importe quoi, cliquez droit sur n'importe quel résultat, choisissez "copier le lien", et collez quelque part pour voir (ne vous faites pas avoir par la barre de statut, ils utilisent un "truc" pour cacher la vraie url))
- [^] # Re: + Sozi
  
  Posté par MrLapinot (site web personnel) le 20 février 2010 à 21:53. Évalué à 3.
  
  C'est vrai, mais bizarrement pas quand je lance mes recherche depuis le champ "recherche" de firefox, uniquement quand on passe par leur page d'accueil. Et c'est du 100% javascript, leur page, ils génèrent tout dynamiquement.
- [^] # Re: + Sozi
  
  Posté par ribwund le 20 février 2010 à 22:24. Évalué à 3.
  
  Ils font pas ça systematiquement, c'est random.
  - [^] # Re: + Sozi
    
    Posté par Fabimaru (site web personnel) le 22 février 2010 à 10:54. Évalué à 2.
    
    Chez moi c'est systématique (avant ça le faisait de temps en temps). Et très chiant. Ca veut dire que pour copier l'adresse il faut cliquer sur le lien, puis copier depuis la barre d'adresse. Pas très pratique. Peut-être que je devrais activer NoScript sur google...
    - [^] # Re: + Sozi
      
      Posté par Nopenope le 22 février 2010 à 13:16. Évalué à 1.
      
      Ou ne plus utiliser google :)
      (cf ixquick, il y avait un journal dessus il y a pas si longtemps, ou si tu tiens vraiment aux résultats de google, tu as Scroogle.org)
# Commentaires audios dans un PDF

Posté par saintamand le 20 février 2010 à 21:00. Évalué à 5.

ou un fichier PDF qui a l'inconvénient de de ne pas permettre des commentaires sonores.

Au contraire, dans un PDF on peut inclure des fichiers audios, vidéos et même des d'objets en 3D. Les heureux utilisateurs de LaTeX peuvent utiliser la package movie15.
- [^] # Re: Commentaires audios dans un PDF
  
  Posté par Octabrain le 20 février 2010 à 21:02. Évalué à -1.
  
  Déjà qu'on met de plus en plus n'importe quoi dans le navigateur, maintenant dans les pdf ? Génial...
  - [^] # Re: Commentaires audios dans un PDF
    
    Posté par Mais qui suis-je ? :) le 20 février 2010 à 22:49. Évalué à 2.
    
    N'importe quoi dans les PDF c'est pas nouveau !
    Il a bien 15 ans j'ai installé mon premier acrobat reader avec un CD-ROM reçu de canal satélite, pas encore question d'internet mais juste une collection de logiciel et toute l'interface était un fichier PDF
    Oui c'était déjà lourd à l'époque
# S5

Posté par JGO le 20 février 2010 à 23:23. Évalué à 3.

A voir aussi, S5, A Simple Standards-Based Slide Show System.

http://meyerweb.com/eric/tools/s5/s5-intro.html (déplacez la souris en bas à droite de l'écran pour faire apparaitre le menu ou appuyez sur espace pour passer au suivant)

Pas de son, mais tout simplement en CSS 2 avec un peu de javascript.
- [^] # Re: S5
  
  Posté par Bruno Michel (site web personnel) le 21 février 2010 à 02:59. Évalué à 3.
  
  Dans le même style, il existe showoff [http://github.com/schacon/showoff], qui a pour gros avantage que l'on écrit ses slides avec la syntaxe Markdown. On peut ensuite les personnaliser avec du CSS et du JS.
  - [^] # Re: S5
    
    Posté par ribwund le 21 février 2010 à 03:05. Évalué à 4.
    
    Y'a aussi JessyInk [http://jessyink.googlecode.com] qui est un plugin pour inkscape qui sort un svg+javascript. En plus ça commence à avoir les fonctionnalités pour faire comme prezi.com, il manque plus que un éditeur dédié, inkscape c'est limite trop puissant pour ça.
  - [^] # Re: S5
    
    Posté par boulde le 22 février 2010 à 01:16. Évalué à 2.
    
    il y a aussi des outils pour générer du S5: reStructuredText, Pandoc ...
- [^] # Re: S5
  
  Posté par vladislav askiparek le 21 février 2010 à 10:11. Évalué à 2.
  
  Et cette solution à l'avantage de fonctionner avec tous les navigateurs, et pas seulement FF.
  - [^] # Re: S5
    
    Posté par M le 21 février 2010 à 11:54. Évalué à 3.
    
    Tout les navigateur supportant HTML5!
    
    Et puis quand on a pas de javascript activé le truc se dégrade très mal : on a le droit a une page blanche.
    - [^] # Re: S5
      
      Posté par Infernal Quack (site web personnel) le 21 février 2010 à 13:56. Évalué à 2.
      
      Il n'y a pas besoin de HTML5 pour S5 contrairement au premier lien de l'article qui utilise la balise audio de HTML5 mais pourtant sert sa page en HTML4 ce qui est Mal(tm)(c) !
      L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire
    - [^] # Re: S5
      
      Posté par jyes le 21 février 2010 à 15:53. Évalué à 5.
      
      Au contraire, je trouve que ça se dégrade très bien. Comme tout est en CSS chargée par le javascript, si tu désactives javascript tu vois tout le document de manière linéaire avec ses titres et ses explications et tu peux même faire apparaître les notes de diapo.
      
      Ce n'est pas un état mal dégradé que tu vois, mais l'information au complet sur fond blanc. Si dès que tu vois du blanc tu trouve ça affreux, tu peux toujours ajouter une CSS au document par défaut qui sera chargée même sans javascript.
      
      Une démonstration sur un cas concret (qui fait ma pub en plus) :
      https://net.pouill.eu/~jyes/techweb/cours/part1.html
      
      Regarde le texte qui apparaît quand tu désactives javacsript (ou quand tu utilises le bouton « Ø » de la présentation qui sert justement à ça avec javascript activé).
# css media presentation

Posté par Infernal Quack (site web personnel) le 21 février 2010 à 12:54. Évalué à 7.

Ce qu'il faut c'est que les navigateurs supportent le media CSS "presentation" comme le fait déjà Opera.

Cela éviterait les hacks en Javascript.
L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire
- [^] # Re: css media presentation
  
  Posté par Philippe Ivaldi (site web personnel) le 21 février 2010 à 18:30. Évalué à 1.
  
  +1
  
  Le principe est très intéressant, il me fait penser à la classe Beamer de LaTeX.
  En revanche, j'ai testé les exemples donnés à l'adresse [http://www.w3.org/TR/css3-preslev/] et aucun ne fonctionnent. Que ce soit avec Firefox, Google-chrome ou encore Opera.
  Pour Opera, puisque tu semples dire que c'est supporté, voici la version avec laquelle j'ai testé :
  Version : 10.10
  Build : 4742
  Platform : Linux
  System : i686, 2.6.32-trunk-686
  Qt library : 3.3.8b
  
  Enfin le problème avec la synchronisation de l'audio reste entier… En html5 peut-être ?
  - [^] # Re: css media presentation
    
    Posté par BohwaZ (site web personnel, Mastodon) le 22 février 2010 à 00:21. Évalué à 1.
    
    Il faut appuyer sur F11 pour passer en mode présentation.
    
    http://dev.opera.com/articles/view/html-css-slideshows/
    
    C'est dispo depuis... Opera 4. Et les autres brouteurs ? Il broutent l'herbe en regardant passer le TGV, comme d'hab (cf. SVG/SMIL, CSS, etc.) ^^
    
    FullerScreen ne gère pas bien du tout ça, notamment pas de gestion de page-break donc pas possible de défiler dans les slides ! Pour un truc de présentation c'est pas ça quoi.
    
    J'arrive pas à comprendre comment un truc standard comme ça qui est fixe depuis des années n'est jamais implémenté par tous les brouteurs. Ils ont eu le temps quand même ?!
    
    Bref : faut pas faire du JS pour un truc qu'on peut faire en CSS. Et pour HTML5 j'attends impatiemment de voir le jour ou ce truc pourri deviendra réellement un standard où sont consultés les gens qui vont l'utiliser. Parce que là on a un dictateur à vie qui gère le truc comme il l'entends en envoyant bouler toute personne qui n'est pas d'accord. Il faut le virer et vite.
    « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)
- [^] # Re: css media presentation
  
  Posté par Bruno Michel (site web personnel) le 21 février 2010 à 19:54. Évalué à 2.
  
  Pour firefox, il y avait l'extension FullerScreen [https://addons.mozilla.org/en-US/firefox/addon/4650], mais elle ne semble plus maintenue.
# Outil permettant d'enregistrer le son et de synchroniser les pages

Posté par Nicolas Brodu le 23 février 2010 à 02:18. Évalué à 3.

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.

Eh bien, il se trouve que j'ai écrit précisément un tel outil: [http://www.encours.org]. Il a même été nominé récemment aux étoiles du libre :)

Pour l'instant je génère des vidéos complètes en Ogg/Theora, affichées en HTML 5 + fallback pour les malheureux qui ne le lisent pas. Exemple de résultat en vidéo:[http://www.encours.org/presentations/causalityML100211MD/rep(...)] L'affichage est un peu rudimentaire, mais ma TODO list est plus longue que mon temps disponible...

La vidéo elle-même est générée à partir des évènements de transition des pages, qui sont enregistrés de façon synchrone avec le son. Ce qui répond au commentaire cité ci-dessus : rien n'empêche de générer un slideshow avec juste la piste son au lieu d'une vidéo.

Resterait plus qu'à extraire les titres des pages du PDF pour générer automatiquement un index, puis un simple « document.getElementById(element_video).currentTime=moment_choisi » et le tour est joué (je déjà appliqué cette technique dans d'autres projets) : en cliquant sur un lien de l'index, on positionne automatiquement la video/son au bon endroit. Du style de ce qu'on peux voir sur les videos de l'excellent [http://videolectures.net/] (même si uniquement en Anglais et pas en HTML5).

Avis aux amateurs :)
- [^] # Re: Outil permettant d'enregistrer le son et de synchroniser les pages
  
  Posté par Infernal Quack (site web personnel) le 23 février 2010 à 17:14. Évalué à 1.
  
  Petites remarques sur ton exemple :
  - Penses à ajouter le DOCTYPE du document
  - Positionnes ta balise video dans des balises autorisées. Voir le graphique sur http://www.whatwg.org/specs/web-apps/current-work/#dfnReturn(...) : Un embedded element doit être dans un Phrasing element. Avec une DTD ou un XSD ça sert plus clair mais je n'en ai pas trouvé pour HTML 5 :(
  L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire
# slideshow de la muerte

Posté par highleaf le 23 février 2010 à 12:27. Évalué à -5.

C'est vrai que l'idée est intéressante, mais je vois mal mon assistante se taper du html, du css et du javascript pour me faire une présentation, elle ne sait déjà pas écrire en français.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.