Fév
16

Des slides qui ont de la gueule, avec impress.js !

Comme je vous l’avais dit lorsque je vous ai présenté nos vœux 2012, j’ai découvert récemment un outil qui va vous permettre d’en mettre plein la vue à votre auditoire lors de votre prochaine présentation.

Bye bye le vieux Powerpoint des familles, et place aux technos modernes : HTML5, CSS3 et JavaScript.Les générateurs de présentation en JavaScript, ça n’est pas tout nouveau, je vous l’accorde. On connaissait déjà des outils comme deck.js ou landslide, mais celui que je vais vous présenter a un petit quelque chose en plus. Il s’agit de impress.js (admirez la démo, vous serez bluffés).

L’idée derrière impress.js est bien sûr, comme pour les autres frameworks de ce type, de créer un diaporama d’écrans en HTML, CSS et JS, accessible et navigable directement via une page web.

Là où impress.js se distingue des autres, c’est par les possibilités presque artistiques qu’il offre. Contrairement aux outils classiques (Powerpoint inclus), il vous faudra avoir une vue d’ensemble de votre présentation, puisque vous travaillez sur une grande scène dans laquelle vous allez devoir disposer vos pages. Globalement, vous devrez considérer que vous déplacez une caméra sur cette scène (la navigation entre slides s’effectue en indiquant le déplacement sur 3 axes x, y et z par rapport à la diapo précédente). La difficulté réside dans le fait que vous devrez probablement passer pas mal de temps à disposer ces pages afin que le résultat ne soit pas trop laid au final (je parle d’expérience).

Là où l’outil est vraiment top, c’est qu’il génère des transitions très sympas (en JS) en fonction du déplacement que vous imposez à la « caméra ».

Bilan de l’utilisation de cet outil

Points positifs :

  • transitions JS/CSS3 sympa,
  • possibilités vraiment étendues de création pour les personnes douées d’un peu de talent,
  • effet disruptif par rapport aux présentations traditionnelles : résultats garantis auprès de vos auditeurs

Points négatifs :

  • repose sur des technologies qui ne sont pas disponibles dans tous les navigateurs,
  • performances décevantes dans certains navigateurs, même quand les fonctionnalités sont supportées (dès que vous ajoutez un certain nombre de diapos, les perfs chutent drastiquement). Si vous contrôlez votre environnement, je vous conseille d’utiliser Safari (testé sous Windows et Mac, j’ai obtenu de meilleurs résultats avec lui par rapport à Chrome et Firefox,
  • peut rapidement donner le tournis si vous abusez des effets de zoom ou de rotation

Au final, c’est un outil vraiment novateur et propice à la création (il a été développé par un designer) qui conviendra pour des présentations assez courtes (performances).

Je terminerai en citant le développeur :

if you want to build great presentation take a pencil and piece of paper. And turn off the computer.

Tout le secret est là : le talent…

La source est dispo ici : https://github.com/bartaz/impress.js (explorez la page, vous trouverez aussi des démos).

 



Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes