Tutoriel impress.js

De EduTech Wiki
Version datée du 31 octobre 2013 à 14:05 par Mfallouji (discussion | contributions) (Explications sur la manière d'utiliser impress.js - continuer ...)
Aller à la navigation Aller à la recherche

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


Premiers pas pour une présentation simple

La squelette de votre page HTML

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
      C'est ici que vous allez insérer les différents slides .....
   </div>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

L'insertion des slides

Maintenant que vous avez créé le corps de votre page HTML, vous allez pouvoir insérer le code pour les différents slides que vous souhaitez afficher dans votre présentation. A noter que tous les slides seront insérer dans le cadre appelé 'impress'.

Le code suivant insère un premier slide appelé 'slide1' 

			<div id="slide1">
        			<p style='width:1000px; font-size:80px;
				text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
    			</div>

Voici à quoi ressemblera le code de notre fichier html: 

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
	<div id="slide1" class="step slide">
            <p font-size:40px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
    	</div>
   </div>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript" src="js/impress.js"></script>
</body>
</html>

Explication du code

  • Votre page html doit être liée à la feuille de style impress-min-presi.css. Ceci est indispensable afin de pouvoir afficher correctement votre présentation. D'autre part vous devez vous assurez que le fichier impress-min-presi.css est accessible à votre page html.
  • Le id du cadre permet de l'identifier. Le script impress.js l'utilise pour faire la transition d'un slide à un autres. Si vous ne mentionnez pas cet identificateur, le script utilisera des identificateurs par défaut. A noter que ces identificateurs peuvent être utilisés pour formater vos slides.
  • Tous les slides doivent avoir 'step' comme valeur pour l'attribut class. Les autres valeurs pour l'attribut class permettent de définir l'aspect qu'on veut donner au slide (ici c'est la valeur slide qui a été choisie), voir point 1.
  • Tout ce qui est à l'intérieur de la balise 'div' sera affiché dans ce premier slide.

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=32002 »