Tutoriel impress.js

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Impress.js est une technologie de présentation qui s'appuie sur les transformations et transitions CSS3. Selon Bartek Szopka, le créateur. l'idée lui est venue quand il jouait avec les transformations CSS. Prezi.com a inspiré le design.

L'utilisateur doit coder en HTMLet adapter la feuille de style CSS à ses besoins.-

Voir: en:Impress.js

Exemple

Regardez d'abord test.html (y compris le source!)

Notre code CSS définit cinq types de "steps" (traduit par "item"):

• slide: Transparents
• normal: item normal (pas de look de type "slide")
• note: petites notes
• thoughts: grandes pensées exprimées avec une seule phrase
• picture: images avec une petite légende

Chaque type est associé à une classe CSS qui redéfinit le style de certaines balises HTML

 <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
  ....
  </div>
  <div id="slide3" class="step note" data-x="200" data-y="-1100" data-scale="0.2">
    <p>One <b>bold</b> idea</p>
  </div>

Liste de balises HTML stylés:

• h1, ul, ol, li, p, q, big, b

	slide	normal	note	thoughts	picture
h1	Very large and up	Very large	no	no	no
ul,ol,li	yes	yes	no	no	no
p	yes	yes	no	very large	small (use for captions)
q	yes	yes	no	very large	rotated, red and 500px down (adjust if needed)
big	yes	yes	yes	yes	no
b	yes	yes	yes	yes	no

A la fin de votre code HTML, n'oubliez pas:

  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
  </div>
</html>

Fichiers

• Directory: http://tecfa.unige.ch/guides/impress.js/impress-demo-1/
• test.html
• impress.js
• impress-min-presi.css

Liens

Official

• Impress.js homepage
• impress.js tutorials and other learning resources (links)
• Examples and demos (links)
• Source code It's the documentation

Example code using in this page

• http://tecfa.unige.ch/guides/impress.js

Tutorials

• How To Use Impress.Js, Posted on January 4, 2012
• No More Powerpoint I Have Impress.js, Paulund, Updated: March 31st, 2013

CSS transformation (on which impress.js is based)

• CSS transforms tutorial (this wiki)
• CSS Transforms Level 1, W3C working draft
• CSS transform documentation at mozilla.org.
• Browser compatibility table at mozilla.org

Books

• Rakhitha Nimesh Ratnayake (2013), Building Impressive Presentations with impress.js, Packt Publishers, ISBN 1849696489