Circular Slides Generator

Version imprimable

16/03/2016, 08h56
Pamputt

Circular Slides Generator

Bonjour, j'ai découvert impress.js il y a peu car je voudrais me lancer dans les présentations HTML qui ont l'air énormément plus portables que celles réalisées avec Microsoft Powerpoint. Bref, l'exemple fourni de base avec impress.js est très riche et même en peu trop pour moi qui n'ai que quelques bases en HTML. Par ailleurs, je cherche quelque chose de plus sobre tout en étant sympa. Je suis donc tombé sur Circular Slides Generator, qui propose quelque chose de très sympa à mon goût (une présentation en cercle). Le problème c'est que je ne comprends pas grand chose à comment ça marche.
Dans l'ordre j'ai téléchargé l'archive sur github mais le problème c'est que quand je lance index.html, je n'obtiens pas du tout le même résultat que sur la page du projet ; en gros la présentation a sauté et cliquer sur le bouton « Generate » ne fait rien.
J'imagine que ce n'est pas très compliqué pour quelqu'un qui connait bien le HTML mais j'avoue être un peu perdu. D'après ce que je comprend, index.html sert à générer le code HTML et on a plus qu'à remplacer Slide XX par le contenu que l'on veut. Donc premier problème, le index.html récupéré dans l'archive ne fonctionne pas comme je viens de le dire et deuxième problème ; même si je passe par le site du projet et que je génère du code, le copier-coller dans un fichier texte puis le faire interpréter par firefox (après avoir changer le chemin de impress.js vers un impress.js placé dans le même dossier) ne me donne pas de présentation en cercle ; j'ai simplement toutes les « diapos » les unes en dessous des autres comme des vulgaires pages d'un traitement de texte. Bref, je dois vraiment rater quelque chose.
Donc si quelqu'un peut m'éclairer sur le fonctionnement de ce projet, je lui en serais très reconnaissant.
Merci d'avance
16/03/2016, 09h04
SpaceFrog

Tu es sur que le fichier js se charge ?
Regarde en console du navigateur (touche F12)
onglet réseau ...

As tu un erreur en console ?

En effet, il semble que impress.js ne se lance pas.
Avec la console du navigateur, onglet Réseau, je vois uniquement le message

Citation:

* Effectuez une requête ou Rechargez la page pour voir des informations détaillées concernant l'activité réseau.
* Cliquez sur le bouton (icone en forme d'horloge) pour lancer l'analyse des performances.

Comme précisé précédemment le fichier impress.js se trouve dans le même dossier que mon fichier test.html donc voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Circular Slides - impress.js</title>
<style>
body {
  background-image: url(circular-slides-generator-gh-pages/static/img/noise.png);
}
.step {
    position: relative;
    padding: 40px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;
}
.slide {
  display: block;
  width: 800px;
  height: 600px;
  padding: 120px 60px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  color: rgb(102, 102, 102);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
  font-family: 'Open Sans', Arial, sans-serif;
}
.credits, .credits h2 {
  padding-top: 0;
}
</style>
</head>
<body>
<div id="impress">
<div class="step slide" data-x="-400" data-y="-300" data-rotate="0" data-scale="1.1156249999999999"><q>My Slides</q></div>
<div class="step slide" data-x="875" data-y="-299" data-rotate="0" data-scale="1"><q>Slide 1</q></div>
<div class="step slide" data-x="631" data-y="449" data-rotate="36" data-scale="1"><q>Slide 2</q></div>
<div class="step slide" data-x="-6" data-y="912" data-rotate="72" data-scale="1"><q>Slide 3</q></div>
<div class="step slide" data-x="-793" data-y="912" data-rotate="108" data-scale="1"><q>Slide 4</q></div>
<div class="step slide" data-x="-1431" data-y="449" data-rotate="144" data-scale="1"><q>Slide 5</q></div>
<div class="step slide" data-x="-1675" data-y="-300" data-rotate="180" data-scale="1"><q>Slide 6</q></div>
<div class="step slide" data-x="-1431" data-y="-1049" data-rotate="216" data-scale="1"><q>Slide 7</q></div>
<div class="step slide" data-x="-793" data-y="-1512" data-rotate="252" data-scale="1"><q>Slide 8</q></div>
<div class="step slide" data-x="-6" data-y="-1512" data-rotate="288" data-scale="1"><q>Slide 9</q></div>
<div class="step slide credits" data-x="631" data-y="-1049" data-rotate="324" data-scale="1">
    <h2>Credits</h2>
    <ul>
      <li>
        <a href="http://bartaz.github.io/impress.js" target="_blank">impress.js</a> - Bartek Szopka
      </li>
      <li>
        <a href="http://wmh.github.io/circular-slides-generator" target="_blank">Circular Slides Generator</a> - Hunter Wu
      </li>
    </ul>
  </div>
<div class="step" data-x="0" data-y="0" data-scale="6"></div>
</div>
<script src="impress.js"></script>
</body>
</html>

Le fichier impress.js est récupéré depuis le github du projet