J'achète ce magazine ! Version PapierVersion PDF

Avoir un aperçu | Commander le numéro

par Yann Morère

De nos jours, on est bien obligé de se rendre compte que tout est Web ou dans le Web : les applications, les services, vos données... Maintenant, nous allons utiliser les langages du Web que sont JavaScript, HTML5 et CSS3 à travers impress.js pour créer des présentations qui utilisent zoom, translations et rotations dans un espace 3D.

1. Introduction

L'auteur d'impress.js ne s'en cache pas [1]https://github.com/bartaz/impress.js : " il s'agit d'un framework pour réaliser des présentations basées sur la puissance des transitions et transformations de CSS3 et inspiré par prezi.com ". Un peu plus loin, ce programmeur qui ne manque pas d'humour visiblement, nous dit que " c'est une (mal)heureuse coïncidence que l'outil de présentation LibreOffice/OpenOffice se nomme Impress ".

Prezi a maintenant acquis une bonne notoriété. Il s'agit d'un outil en ligne qui permet de réaliser des présentations attractives à base de zoom. Le service est doté de nombreuses fonctionnalités et possède une interface web pour la création de la présentation. Au final, vous obtenez une animation Flash en ligne ou téléchargeable. Même si le service proposé est d'une très bonne qualité, il pose de nombreux soucis aux adeptes des logiciels libres : les fichiers produits sont en Flash et vos données sont sur le site Prezi.com.

Je vous propose donc d'utiliser un outil, ou plutôt une série de classes JavaScript qui va vous permettre de réaliser le même type de présentation, mais sans Flash et en ayant le contrôle de vos données. Cependant, il y a un revers... Même s'il existe des interfaces web pour générer la présentation, ces dernières sont au stade de développement et ne permettent pas de tirer partie de toutes les fonctionnalités offertes par impress.js. Il vous faudra donc produire du code HTML et CSS pour arriver à vos fins.

Il est aussi tout à fait possible de s'inspirer d'une présentation déjà réalisée disponible à l'adresse [2]https://github.com/bartaz/impress.js/wiki/Examples-and-demos pour ensuite la modifier à votre convenance. C'est ce que nous allons faire pour produire la présentation suivante [3].http://morere.eu/mypresentation J'ai utilisé comme point de départ la présentation sur Node.js disponible à l'adresse [4]http://introtonode.herokuapp.com.

2. Présentation traditionnelle / présentation type Prezi

On peut alors se poser la question : pourquoi vouloir passer d'une présentation traditionnelle de type Impress/PowerPoint à une présentation de type Prezi/Impress.js ? Voici quelques éléments de réponse :

• En bon geek, on veut toujours utiliser les dernières technologies disponibles ;
• On aime HTML, CSS et JavaScript (je n'y crois pas trop !) ;
• On veut déployer ses qualités artistiques dans l'espace plutôt que dans un plan ;
• On désire dynamiser son document de présentation ;
• On veut en mettre plein la vue à ses collaborateurs ;
• On ne veut pas utiliser la même chose que le reste du monde/le commun des mortels.

Le premier et l’antépénultième points ont guidé mon choix de l'utilisation d'impress.js ;-). Mais il y a aussi des inconvénients :

• Le choix du navigateur est important, car tous ne supportent pas les dernières fonctionnalités de ce type de framework. Lors de mes tests, j'ai utilisé la version stable la plus à jour de Chrome qui supporte l'ensemble des effets. La dernière version de Firefox supportent quasiment tous les effets. Il faudra oublier Iceweasel et Chromium d'une Debian stable, qui n'en supportent aucun.
• Des performances qui peuvent être décevantes dans certains navigateurs, même quand les fonctionnalités sont supportées ;