Modèles de présentations HTML5 pour remplacer PowerPoint

Suite à mon track sur la supervision lors de la première journée de SophiaConf 2012, j'ai eu pas mal de question par mail sur le logiciel utilisé pour concevoir mon support. J'ai en fait utilisé une présentation 100% HTML5 basée sur l'outil Impress.js, lui même inspiré de Prezi. Je ne trouve que des avantages à ce type de présentation. En effet, en mettant de coté le dynamisme et l'aspect "fun", on manipule un format standard, lisible sur n'importe quel navigateur digne de ce nom (je dois avouer que Impress.js, fonctionne beoucoup plus fluidement sur Chromium que sur Firefox).

Nous allons dans ce billet découvrir un panel de solutions équivalentes permettant, moyennant une bonne connaissance du langage HTML et de CSS, de concevoir des présentations originales sans avoir à installer aucun logiciel sur votre machine mis à part un éditeur de texte et un navigateur Web. Bref une solution 100% libre, basée sur des standards !

Les commentaires sont bien sûr là pour compléter cette liste et nous faire partager vos expériences sur le sujet !

Impress.js

Démonstration

GitHub

C'est par cet outil que j'ai découvert les alternative possible à la grande maladie des entreprises du 21em siècle: PowerPoint.

L'exemple fourni sur le GitHub permet de bâtir simplement un jeu de slide. Pour être un peu plus original, il faudra aller éditer le fichier CSS. Impress.js s'occupe de tout le reste: transition entre les slides, vu d'ensemble des slides, animations. C'est un projet perpétuellement en évolution, à surveiller sur GitHub.

Personnellement, j'ai "forké" le projet sur mon espace GitHub, puis je génère une branche par présentation. Cela me permet d'avoir toujours les présentations sous le coude. A noter GitHTML, l’excellente extension à Chrome/Chromium , qui vous permet de visualiser directement vos fichiers HTML  et donc votre présentation à partir de GitHub.

Deck.js

Démonstration

GitHub

Projet débuté en mars 2011, il propose une alternative sérieuse à Impress.js. Moins "fun", les présentations générés sont cependant claires et je trouve le code HTML plus propre.

Html5Rocks

Démonstration

Distribué sous licence Apache 2.0, ce jeu de slides est initialement conçu pour présenter les nouveautés du langage HTML5. Sa structure peut permettre de bâtir simplement votre propre présentation avec en prime des exemples de fonctions HTML5 déjà toutes faites.

Html5Slides par Google

Démonstration

Google Code

Difficile de faire un billet sur un tel sujet sans parler de Google qui y va de son modèle de présentation compatible HTML5. Pas de surprise ici. C'est simple et sobre avec un code HTML facilement compréhensible, même pour un béotien. A noter que le modèle est sous licence Apache 2.0.

Reveal.js

 

Démonstration

GitHub

Bien que présenté comme un modèle CSS de présentation 3D, Reveal.js est plus un modèle HTML permettant de faire des présentations sous la forme de matrice en deux dimensions. On peut, si on le souhaite et si la présentation a été faite pour, se déplacer en haut, en bas, à gauche et à droite pour passer d'un slide à l'autre. Ce mode de navigation, un peu perturbant n'est pas forcement adapté pour un track mais plutôt pour un présentation "à tiroirs".

Shower

Démonstration

GitHub

Ce modèle de présentation permet de faire rapidement une présentation au format HTML5. On peut noter la possibilité de voir les miniatures des slides avant de commencer la présentation. Les transitions sont simples et rapides. On dispose également de fonctions intéressantes pour, par exemple adapter les images automatiquement à la taille de l'écran ce qui peut être sympa pour une présentation basée sur des photos.

RoboDeck

Démonstration

GitHub

Le principal intérêt de ce modèle de présentation est que si la présentation est disponible en ligne alors il est possible de synchroniser les visiteurs sur le slide en cours. Pour cela, le serveur sur lequel les slides sont hebergés va envoyer (via Web Socket) les informations NEXT et PREV. Je trouve par contre les présentations pas très sexy... A suivre quand même pour des présentations massivement en ligne.

Slides par Brian Cavalier

Démonstration

GitHub

Sur ce modèle, les transitions se font par un très agréable fondu enchaîné. J'aime beoucoup le CSS par défaut qui est sobre et clair. A réserver à des présentations sérieuses.

Slides par Brian Cavalier

Démonstration

GitHub

Comme le précédent modèle, les transitions se font par un très agréable fondu enchaîné, mais la comparaison s'arrête là. Ici on est dans un style de présentation plus "fun" et très bien adapté aux développeurs (avec notamment le syntax highlight). A bookmarker !

Pour conclure

De nos jours et en mettant à part les présentations qui doivent passer entre les mains de personnes sachant uniquement utiliser PowerPoint, je ne comprends pas que l'on utilise pas plus se genre de modèle de présentation. En effet, elles n'ont que des avantages: simple à éditer (avec un éditeur de texte), facilement transportable sur une clés USB ou l'on peut ajouter une version Chromium ou Firefox portable et avec nativement une mise en ligne optimisée (c'est du HTML :) !). Alors ciao PPT et bonjour HTML.

Et vous chers lecteurs vous en êtes ou avec la cure de désintoxication de PowerPoint ?

D'autres modèles à nous conseiller ?

  • http://twitter.com/gmazoyer Guillaume Mazoyer

    LaTeX + Beamer FTW \o/

  • Adrien

    Seul problème avec ces solutions : les télécommandes deviennent inutilisables.

    Mais c’est le seul point noir.

    • http://www.nicolargo.com nicolargo

      Si la télécommande est capable de simuler l’appuie sur les touches espace, flèche gauche ou droite alors cela fonctionnera sans problème…

      • http://blog.m0le.net Nono

        Et avec quelques petites bidouilles, c’est très facile (et bien entendu faisable).

  • http://valentin.villenave.net vvillenave

    Excellente initiative ! Il est grand temps de voir disparaître cette horreur qu’est PowerPoint !

  • http://www.monitoring-fr.org David GUENAULT

    on pourra également citer sozi, qui permet de créer des présentation similaire à prezi. C’est un plugin pour inkscape et vous n’avez alors qu’à dessiner votre présentation. Le résultat est donc en svg et peut être jouer dans les navigateurs récents.

    voir une démo : http://sozi.baierouge.fr/wiki/fr:bienvenue

  • erdnaxeli

    Je plussoie latex + beamer. Toutes ces présentations sont très jolies, mais devoir lancer mon navigateur pour lire une présentation … comment dire …

    • http://www.nicolargo.com nicolargo

      Quel est la différence avec le fait de lancer un lecteur PDF ???

      • http://twitter.com/erdnaxeli Alexandre Morignot

        Mon lecteur de pdf est beaucoup plus léger, ne charge pas 15 onglets au démarrage (ce que je demande à mon navigateur), ne va pas m’afficher des notifications email, etc etc.
        Mon navigateur n’est pas fait pour ça, mon lecteur de pdf oui.

        • http://www.nicolargo.com nicolargo

          C’est sur, je comprend ton point de vu. D’un autre coté mon navigateur Web est toujours lancé sur ma bécane et pour les présentations en public je la charge dans un fenêtre de navigation privée pour ne pas être pollué par les notifications…

      • ade

        Peut-être la fiabilité / reproductibilité du résultat (alors que la pres HTML ne fonctionnera bien qu’avec une configuration / version de navigateur dûment testée et validée => plus difficile de transmettre la présentation à un tiers ou de la lire sur une machine qui n’est pas la sienne).

  • MisterT

    Intéressant article, comme toujours…

    Pour ma part, je génère au moins 2-3 présentations par semaine, qu’il me faut partager avec des destinataires (le plus souvent par mail ou via un dépôt sur un site web de partage de fichiers).

    Toutes ces solutions HTML sont bien jolies, mais, pour l’instant, je ne me vois pas les utiliser, faute de solution de “composition” pratique… Franchement, vous avez vu l’interface de PowerPoint/Impress ? Elle est loin d’être parfaite, mais pour créer des slides, c’est vraiment beaucoup plus efficace que ce qui est proposé par les solutions ci-dessus !

    Alors, un PowerPoint/Impress, basé sur un template, et exporté en PDF, ca me paraît beaucoup plus simple, non ?

    Qu’en pensez-vous ?

    • https://www.jaguenaud.org/wordpress Capello

      Moi ce qui m’énerve avec Powerpoint ou son équivalent libreoffice, c’est que pour avoir un début de dessin, et avoir la page suivante avec le même contenue plus un peu d’info, c’est une catastrophe. Il faut copier/coller… Je préfère la solution LaTeX/Beamer en plus, c’est utilisable en gestion de conf.

  • zanko

    Il y a aussi awwation, qui s’inspire aussi de Prezi, se base sur SVG et fourni un éditeur graphique de présentations (qui pour le moment n’a pas encore la capacité de réouvrir les présentations sauvegardées mais ça semble prévu).

  • Pingback: Autres outils | Pearltrees

  • fred

    Wow !!! Le rendu final est excellent… mais
    idem je ne me vois pas conseiller l’outil a nos chers “management guys” déjà qu’on rame pour leur expliquer comment un pc fonctionne, comment un smartphone fonctionne mais là… du code… c’est mission impossible

  • http://www.fotopoto.fr Gabriel

    Article très intéressant, cela nous montre le “futur” des présentations, et ça fait du bien de voir du mouvement avec de beaux résultats. Pour le moment ce n’est pas à la portée de tout le monde, mais cela ne saurait tarder :) j’ai testé impress.js le résultat est vraiment bluffant :D

  • Cyriel

    Le problème commence à l’école, on nous bourre le crane avec PowerPoint pour faire les premiers exposés…

    C’est toujours d’actualité, Je viens de passer mon BTS il y à quelques semaines, au milieu d’une multitude de PowerPoint j’ai présenté ma soutenance de projet (supervision des réseaux) sur Prezi, avec un petit script j’ai pu faire fonctionner une télécommande, c’était parfait et j’ai gagné un beau 20/20.

    L’avantage certain c’est qu’il n’y a pas besoin de rentrer dans du code, pour des utilisateurs non avertis c’est toujours un plus.

    En tous cas encore un sujet intéressant comme d’habitude.

    • http://www.nicolargo.com nicolargo

      Peux tu diffuser ta présentation ? Je pense que le sujet peut intéresser certains lecteurs (dont moi :)).

  • Pingback: nbenyounes (nadyabb2) | Pearltrees

  • waat

    Moi je trouve que ça fait enfin un vent de nouveauté dans le domaine des présentations plus de 10 ans de ppt c’est long :D .
    Après écrire de code html je comprends que ce n’est pas à la portée de tout le monde mais je pense que les éditeurs WYSIWYG tarderons pas ( DeckJs le fait déja il me semble ).
    J’ai fait ma soutenance de master avec ImpressJs devant un jury constitué de profs et de professionnels et ça n’a pas plus au pro.
    J’avais aussi utilisé avant Inkscape avec les plugins Sozi ou jessyInk et je trouve que c’est plus souple en terme possibilitées grave à l’aspect “Dessin” mais du cou plus long à produire. mais c’est cool ça tourne aussi dans un navigateur :D ( SVG + js )

  • Pingback: Nicolargo : Modèles de présentations HTML5 pour remplacer PowerPoint | Actualités de l'open source | Scoop.it

  • krem

    j’avais testé prezi, version free.
    l’auditoire/les “spectateurs” n’ont pas aimé : ça leur donnait le tournis. Ils trouvaient ça fatiguant…

  • krem

    en fait avec Prezi (et ses copains) j’ai du coup eu l’impression que je me faisais plus plaisir à moi, que ça n’était plaisant pour ceux qui suivaient la présentation :-(

    • http://www.nicolargo.com nicolargo

      C’est un risque avec ce genre d’outil. Il faut, je pense, adapté sa présentation à l’auditoire et ne pas essayer d’en mettre “plein la vue”. On peut très bien rester sobre, comme pour une présentation classique PPT avec ces mêmes outils.

  • Pingback: Modèles de présentations HTML5 pour remplacer PowerPoint | PRESENTATION D'ENTREPRISE - PRESENTATION POWERPOINT - PRESENTATION DE VENTE | Scoop.it

  • http://blog.adminrezo.fr Nicolive

    J’ai essayé impress.js qui m’a occupé un certain temps.
    Je vais regarder les autres outils que Nicolargo tu présentes.
    J’utilise beaucoup les présentations pour le boulot mais PPT n’est pas adapté.

    • Alain_111

      Le problème est le même avec Prezi ou Powerpoint : si on utilise trop d’effets de transitions compliquées, de rotation et de déplacements dans tous les sens, forcément, ça va saouler les spectateurs. C’est pas parce que dans PREZI on peut “faire tourner la scène” dans tous les sens qu’il faut le faire à tout bout de champ…
      Ce problème n’est pas lié à l’outil mais à l’utilisation qu’on en fait, et ce sera pareil pour les autres outils présentés sur cette page.
      Tout est directement lié à la personne qui conçoit la présentation et c’est bien là toute la difficulté : être capable de concevoir une présentation qui saura capter l’attention et ne pas ennuyer (avec un PowerPoint soporifique) ou fatiguer (avec des tourbilons incessants dans Prezi).
      Et ça ne s’improvise pas…

      • http://www.nicolargo.com nicolargo

        +1 :)

  • Pierre

    Merci pour cet article que j’ai vu passer sur le Planet Libre !

    J’ai passé ma soutenance de fin d’études il y a quelques années en utilisant S5, je ne savais pas qu’il y avait autant de choix aujourd’hui pour faire de belles présentations en HTML !

    Le problème de ce genre de présentation, c’est que c’est basé sur plusieurs fichiers, donc c’est compliqué à échanger avec des collègues ou des clients ; dans mon cas, je ne peux pas publier mes présentations en ligne, donc il faudrait envoyer par e-mail un fichier zip contenant tous les fichiers (html, css, js, images) au client qui devrait le décompresser pour pouvoir y avoir accès… Dans ce cas, un seul fichier est plus pratique.

    Et puis il y a évidemment beaucoup d’éducation à faire du côté de l’auditoire. Mes clients attendent d’un Powerpoint un support qu’ils pourront imprimer et utiliser par la suite comme une doc à part entière ! On est bien loin du rôle d’une présentation, mais c’est la triste vérité…

  • Pingback: Nono’s Vrac 76 « m0le'o'blog

  • http://www.overware.fr reneca

    Pour quelqu’un qui maitrise bien le CSS3 je pense qu’établir un modèle esthétique est tout à fait réalisable.
    C’est vrai que faire une présentation en code est impossible pour des novices.
    Mais personnellement je trouve sa très intéressant car on peut mettre des choses dynamiques grâce a html5, que l’on ne pourrai pas faire avec PPT.
    De plus la solution est excellente du fait de la portabilité du diaporama.

  • http://cdrc.fr cdrc

    Il y a aussi Landslide, un script python qui permet de générer le support HTML5 à partir de contenus en markdown. https://github.com/adamzap/landslide/
    Je l’ai utilisé pour faire quelques supports, c’est assez agréable de ne s’occuper que du contenu une fois que le css est fait.

  • http://www.divarvel.fr Clément

    La meilleure solution pour moi c’est de faire les slides en markdown / rst, puis de transformer en html ou en beamer avec Pandoc.

    Pour le template HTML, j’aime assez DZSlides https://github.com/paulrouget/dzslides qui est clean et qui propose des presenter tools très pratiques

  • Pingback: Visto nel Web – 35 « Ok, panico

  • Pingback: Présentation HTML5 : template de la Google I/O 2012 | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité

  • Pingback: Modèles de présentations HTML5 pour remplacer PowerPoint | Develle | Scoop.it

  • mw

    Je suis d’accord avec Alain_111. Le principal problème de powerpoint est la personne qui présente. Qu’importe les effets d’animation ou la facilité de partage si le contenu est indigeste. Mais toute nouvelle avancée dans ce domaine si particulier est toujours bienvenu.

  • JPZ

    Cela fait un bon nombre de solutions très intéressantes. Pour ma part j’en ai trouver une autre encore : timesheet.js (http://wam.inrialpes.fr/timesheets/).
    Elle me parait être assez facile à utiliser et les résultats sont satisfaisants.
    Malheureusement, il manque un éditeur wysiwyg permettant de passer de diapo en diapo.
    Je n’en ai pas encore trouvé.
    Cela sera nécessaire pour l’ensemble des personnes qui sont rétissantes aux lignes de codes.

  • http://aquemy.com Alexandre Quemy

    Merci beaucoup pour cette liste très complète.
    J’ai eu une présentation avec Decks.js il n’y a pas longtemps et j’ai été très séduit.

    De plus, cela me permettra de faire épouser facilement une présentation à une charte graphique. Centraliser toutes mes présentations sur mon site personnel, avec sa charte graphique, et pouvoir l’utiliser ailleurs, en changeant simplement la charte graphique (par exemple en utilisant celle de mon école ou du boulot).

  • Pingback: Présentations et partage | Pearltrees

  • Pingback: Prof geek | Pearltrees

  • http://cmoabel.free.fr abel

    Je suis tombé par hasard sur l’article. C’est bien d’avoir fait le tour des solutions possibles autre que Powerpoint. J’ai de mon côté aussi chercher une solution innovante pour faire sa présentation il y a quelques temps et j’ai trouvé ajax-s que j’ai adapté et du coup proposé avec un éditeur wysiwyg. Pour ceux qui seraient curieux voici le lien : http://cmoabel.free.fr/onlyclic.htm
    Have fun !

  • http://blog.info16.fr bartounet

    Merci pour cet article
    Je ne suis pas du tout développeurs penses tu que n’importe qui peut s’en sortir
    Par contre ce dock.JS il est inclus dans les pages ?? Ce n’est pas un moteur a installer sur un serveur comme node.JS ?

  • http://www.open-elearning.com Ghis

    Merci Nicolargo pour cette présentation.

    On a aussi les suites éditoriales SCENARI (licences libres) qui permettent de faire des diapos hmtl. Faut pas mettre les mains dans le code, mais prendre en mains les softs. C’est selon le principe WYSIWYM et non WYSIWYG. Exemple : http://scenari-platform.org/projects/optim/fr/pres/co/

  • http://www.open-elearning.com Ghis

    Pour découvrir les chaînes éditoriales SCENARI, on celle-ci qui dédiée à cet effet : http://scenari-platform.org/projects/scenari/fr/pres/co/essayer.html

  • Pingback: stephfayard | Pearltrees

  • Pingback: tonionicolazzi | Pearltrees

  • Cindy

    Merci pour ces infos :) je recommande également EWC Presenter qui est très pratique pour réaliser de belles présentations et infographies rapidement sans connaissance particuliere en codage.