« Tutoriel impress.js » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 80 : Ligne 80 :


; CSS transformation (on which impress.js is based)
; CSS transformation (on which impress.js is based)
* [[CSS transforms tutorial]] (this wiki)
* [[:en:CSS transforms tutorial]]  
* [http://dev.w3.org/csswg/css-transforms/#transform CSS Transforms Level 1], W3C working draft
* [http://dev.w3.org/csswg/css-transforms/#transform CSS Transforms Level 1], W3C working draft
* [https://developer.mozilla.org/en/CSS/transform CSS transform] documentation at mozilla.org.
* [https://developer.mozilla.org/en/CSS/transform CSS transform] documentation at mozilla.org.

Version du 25 septembre 2013 à 17:11

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

Liens

Official
Example code using in this page
Tutorials
CSS transformation (on which impress.js is based)
Books
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_impress.js&oldid=29712 »