Je suis disponible, embauchez moi ! Consultez mon CV
Créer une présentation HTML5 portable avec Node.js Inliner
vendredi 25 novembre 2011 à 18:50 | Dev
J'en ai marre des présentations avec PowerPoint. Je réalise mes présentations avec Chrome et html5. Mais quid de la portabilité, comment avoir tous les fichiers javascript, css, images, html, dans un seul fichier html ? La solution Node.js et Inliner !
SlideShow HTML5
Réaliser une présentation HTML5 est d'une grande simplicité, mais le seul problème est la portabilité d'une machine à l'autre. La présentation est composée de plusieurs fichiers, qu'il faut déplacer d'une machine à l'autre ! L'idéal est de n'avoir qu'un fichier unique, comme avec PowerPoint :)
Explication
C'est là qu'interviennent node.js et l'outil Inliner. Ils permettent de "compresser" en un fichier unique html, l'ensemble de votre présentation. Pour les fichiers javascript ou css, une simple concaténation de fichiers est réalisée. Les images sont encodées sous la forme d'URI Base64 dans le fichier html final !
Utilisation de Node.js et Inliner
Les prérequis :
- Installer Inliner avec la commande
npm -g install inliner
- Avoir sur sa machine un serveur web que l'on fait pointer vers sa présentation multi-fichiers
- Lancer ma commande :
inliner --verbose --nocompress http://localhost/ > slideshow.html
- Afficher votre fichier slideshow.html
- Transporter-le sur une autre machine :)
Ooooo ... Magique ! Mon slideshow.html ou slideshow.html.
A propos de Vincent RABAH
Je suis DSI depuis 10 ans. Spécialiste en systèmes d'information et réseaux.
Expert en management, GreenIT et virtualisation de serveurs. Vous pouvez consulter l'ensemble de mon parcours.
I do speak English even if my blog is written in French ... Feel free to leave comments, I'll answer you !
- RSS avec NodeJS Socket.IO et Express
- Real-time log monitoring avec Node.js et Log.io
- Gestion des plugins VIM
- Documentation sur Node.js
- Node.js v0.6.0 est sorti
- Un SlideShow 3D avec HTML5 et CSS3
- Rewrite rules Nginx
- Utiliser Twitter Stream avec Ruby
- Twitter Stream avec NodeJS Socket.IO et Express
- Up and Running with Node.js
Vous pouvez lire également :
Partagez cet article :
J'ai également trouvé ceci, et je me suis dit que ça devrait vous intéresser. Beaucoup plus simple que de lancer un serveur ! :)
https://chrome.google.com/webstore/detail/mpiodijhokgodhhofbcjdecpffjipkle
Bonjour,
Merci pour l'astuce !
Reveal.js a l'air génial, mais j'ai du mal à comprendre comment l'aside est pris en compte, c'est par défaut ?
Ah tient oui les images sont encodées en base64 dans le fichier, j'avais mal lu, faudra que je teste un jour.
Par contre petit bémol : la présentation semble avoir quelques problèmes sous firefox (mais aucun sous chrome)
Bonjour Mart-e ,
Pour les images ont a aussi le choix ! Il faut réaliser la présentation comme d'habitude :
- fichier html
- fichier css
- fichier javascript
- fichiers d'images
Ensuite Inliner, compile l'ensemble en 1 SEUL fichier ... La magie est là ! Je ne vous ai livré que le fichier résultant de cette compilation, qui au départ comportait 9 fichiers différents dans une arborescence !
A+
Nico, je réalise mes présentations en trouvant des idées ou templates sur Internet, je les recode ou modifie ensuite avec vi ;)
Par contre j'imagine que pour les images, il y a pas le choix, il faut les mettre à coté...
PS: le site hébergeant la présentation semble down...
Merci Vincent pour cette belle découverte !
Je vais essayer d'éliminer petit à petit PowerPoint de ma vie (pas facile) et cet outil me sera utile.
Petit question, tu codes directement tes présentations HTML5 dans un éditeur de texte ou tu utilises un éditeur WYSIWYG HTML5 ?