deck.js, JavaScript – Faire une présentation avec deck.js
Tout le monde connait powerpoint ou keynote. Compte tenu du fait que le partage d’information et la communication étaient déjà prégnants dans le monde du travail, il va sans qu’avec la mobilité et l’impératif toujours renouvelé de documenter, synthétiser puis partager imposent progressivement de changer le format de la sacro-sainte présentation. La présentation devient un petit module en soit, facilement modifiable, multi-plateformes, chargeable en local ou sur le Cloud à l’aide de n’importe quel navigateur moderne.
C’est ainsi que l’on voit donc fleurir de très nombreux frameworks Javascript, HTML5, CSS, qui rivalisent dans l’art de la présentation, si tant est que cela soit un art !
Cet article ne sera consacré en fait qu’à un seul des 2 frameworks retenus au départ à savoir : deck.js. On laisse de coté à tort REVEAL.JS de l’excellent Hakim El Hattab, bien connu pour ses animations HTML5, CSS3. Ce framework sera sans doute l’objet d’un article futur. Ce framework a quand même du potentiel !
Source : http://lab.hakim.se/reveal-js/#/
Pour se donner aussi une idée du potentiel de Deck.js, voici un excellent lien qui montre en action ce framework de presentation Deck.js.
Source : http://imakewebthings.com/deck.js/introduction/
La forme au détriment du fond
C’est une évidence qu’un logiciel de présentation dissimule parfois l’indigence de la réflexion sous des effets de manche mais pas toujours, il faut aussi en convenir. Il existe même un livre plutôt caustique sur la question nommée “La Pensée PowerPoint, enquête sur ce logiciel qui rend stupide” de Franck Frommer.
Que vous passiez sous un framework ne change rien, vous n’échapperez pas à ce travers. Vous pouvez en plus de vous former à ce framework, vous imprégniez du code “bushido” de la présentation de feu Steve Jobs. Voici 2 videos, présentant quelques morceaux de choix du grand Steve, le shogun de la prez minimaliste !
Modifier l’apparence de la présentation
La première que l’on souhaite généralement faire, toujours la forme sur le fond…
Un certain nombre de thème vous sont livrés. En changeant l’url vers la css, vous changez l’apparence de votre présentation : web-2.0.css, neon.css, swiss.css. On choisit swiss.css
<!-- Style theme. More available in /themes/style/ or create your own. --> <link rel="stylesheet" media="screen" href="themes/style/swiss.css"> |
On peut aussi changer la transition générale entre les slides. Il est possible de choisir un glissement vertical (vertical-slide.css), horizontal (horizontal-slide.css) ou bien le fade (fade.css).
<!-- Transition theme. More available in /themes/transition/ or create your own. --> <link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css"> |
Dans l’URL, boilerplate_5.html#css-transition, vous accédez via l’URL aux événements d’affichage au sein des slides.
<p class="slide" id="css-transition">…and how to transition between them.</p> |
Le premier slide avec le motif suisse (swiss.css)
Une exemple de bullet point indispensable à toute bonne présentation.
Un slide avec l’affiche de <pre>...</pre>
Le fichier source
On est parti du fichier de base qui a été légèrement modifié boilerplate_5.html disponible sur la démonstration de Deck.js sur http://imakewebthings.com/deck.js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=1024, user-scalable=no">
<title>Using deck.js for Prez</title>
<!-- Required stylesheet -->
<link rel="stylesheet" media="screen" href="core/deck.core.css">
<!-- Extension CSS files go here. Remove or add as needed. -->
<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">
<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/style/swiss.css">
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">
<!-- Basic black and white print styles -->
<link rel="stylesheet" media="print" href="core/print.css">
<!-- Required Modernizr file -->
<script src="modernizr.custom.js"></script>
</head>
<body>
<div class="deck-container">
<!-- Begin slides. Just make elements with a class of slide. -->
<section class="slide">
<h1>Using Deck.js</h1>
</section>
<section class="slide deck-next" id="sample">
<hgroup>
<h2>Vivamus sed quam leo.</h2>
</hgroup>
<pre>Duis luctus leo in porttitor sollicitudin. Nullam ut urna lectus. Integer ac commodo dui. Duis luctus leo in porttitor sollicitudin. Nullam ut urna lectus.</pre>
<h2>Nullam ut urna lectus.</h2>
<div class="sample-content">
<p class="slide" id="slides-html">Slides are basic HTML.</p>
<p class="slide" id="slide-states">The <a href="./docs/#deck-core">deck.core</a> module keeps track of slide states</span> <span class="slide" id="deck-states">and deck states</span><span class="slide" id="css-role">, leaving CSS to define what each state look like…</span></p>
<p class="slide" id="css-transition">…and how to transition between them.</p>
<p class="slide" id="extensions"><a href="./introduction/#extensions">Extensions</a> use core <a href="./docs/#deck-core-events">events</a> and <a href="./docs/#deck-core-methods">methods</a> to add goodies<span class="slide" id="add-what-you-want">, giving presenters the freedom to add what they want</span><span class="slide" id="leave-stuff-out"> and leave out what they don’t.</span></p>
</div>
</section>
<section class="slide">
<h2>Slide 3</h2>
<ul>
<li class="slide" id="extensions-bullet-1">
<strong>bullet point 1</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec pharetra sapien. Morbi dignissim massa justo, nec ultrices lacus hendrerit ac.
</li>
<li class="slide" id="extensions-bullet-2">
<strong>bullet point 2</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec pharetra sapien. Morbi dignissim massa justo, nec ultrices lacus hendrerit ac.
</li>
<li class="slide" id="extensions-bullet-3">
<strong>bullet point 3</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec pharetra sapien. Morbi dignissim massa justo, nec ultrices lacus hendrerit ac.
</li>
</ul>
</section>
<section class="slide" id="nested">
<h2>Nested Slides</h2>
<p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
<pre><code><section class="slide">
<h2>Extensions</h2>
<p>Core gives you basic slide functionality...</p>
<ul>
<li class="slide">
<h3>deck.goto</h3>
<p>Adds a shortcut key to jump to any slide number...</p>
</li>
<li class="slide">...</li>
<li class="slide">...</li>
<li class="slide">...</li>
</ul>
</section></code></pre>
</section>
<!-- End slides. -->
<!-- Begin extension snippets. Add or remove as needed. -->
<!-- deck.navigation snippet -->
<div aria-role="navigation">
<a href="#" class="deck-prev-link" title="Previous"><</a>
<a href="#" class="deck-next-link" title="Next">></a>
</div>
<!-- deck.status snippet -->
<p class="deck-status" aria-role="status">
<span class="deck-status-current"></span>
|
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- End extension snippets. -->
</div>
<!-- Required JS files. -->
<script src="jquery.min.js"></script>
<script src="core/deck.core.js"></script>
<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>
<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html> |
En savoir plus
- HTML Slides With Deck.js and Extensions
http://home.heeere.com/tech-deckjs-ext.html - deck.js » Modern HTML Presentations
http://imakewebthings.com/deck.js/#int - La documentation de deck.js
http://imakewebthings.com/deck.js/docs/ - reveal.js – The HTML Presentation Framework
http://lab.hakim.se/reveal-js/#/ - Un bestof de 12 12 javascript & html5 presentation frameworks
http://codecall.net/2014/02/07/best-javascript-html5-presentation-frameworks/ - Logiciel de présentation | Outils de présentation en ligne | Prezi
https://prezi.com/ - Un exemple parmi d’autres basé sur deck.js
https://github.com/silviapfeiffer/lca_2014_webrtc - Roundup of HTML-Based Slide Deck Toolkits
http://www.impressivewebs.com/html-slidedeck-toolkits/ - HTML5 Showcase for Web Developers: The Wow and the How
http://www.htmlfivewow.com/ - L’autre framework reveal.js
https://github.com/hakimel/reveal.js/ - Theme Builder for Deck.js
https://github.com/twitwi/deck.js-theme-builder
