Apps

Learn to use the Deck.js web presentation framework

Ryan Boudreaux shows you how to get started with the Desktop.js presentation framework for web-based slide shows.

Several months ago I presented a quick demonstration on converting presentation files to a web-ready slideshow using JavaScript. Today, I am going to review the presentation framework Deck.js, which provides a spectrum of design options from simple HTML coding to techy APIs, or a combination of both.

What is Deck.js?

Deck.js is the creation of Caleb Troughton, who developed the jQuery presentation framework over the course of several months during the fall of 2011. It is available as an open source GPL download with updates on GitHub. The framework's sole purpose is for building HTML presentations. Slides are basic HTML and include premade themes and templates to get you started with making a slide deck within minutes with little knowledge of HTML. Or, if you have an enhanced skill set you can make custom decks with the API exposed by the core module and extensions. And then, there is the best of both worlds, where you can take a little of each, tweak a theme, hack an extension, or write your own.

Figure A

Deck.js considerations

  • HTML, API, or the best of both worlds: Start out with the very basic HTML or incorporate a full suite of APIs that you can add in yourself.
  • Deck.core module keeps track of slide states.
  • CSS defines what the slides look like and how to transition between them.
  • Extensions use core events and methods to add extras, allowing presenter authors the freedom to add their content.

Making a slide deck with Deck.js

The download comes with an introductory index.html which gives you a great starting place to study, and eventually modify presentations for your own use. The first slide in the introductory presentation HTML is displayed as displayed in Chrome 21.0.1 in Figure B below.

Figure B

Write slides

Slide content is simple HTML with a class of slide. The HTML code snippets I will use as examples below were taken from the introduction index.html that comes with the Deck.js download; each section with a class that equals "slide" represents a new slide in the deck.

<!-- Begin slides -->
<section class="slide" id="title-slide">
      <h1>Getting Started with deck.js</h1>
</section>
<section class="slide" id="how-to-overview">
  <h2>How to Make a Deck</h2>
   <ol>
      <li>
         <h3>Write Slides</h3>
           <p>Slide content is simple HTML.</p>
      </li>
      <li>
         <h3>Choose Themes</h3>
            <p>One for slide styles and one for deck transitions.</p>
      </li>
      <li>
         <h3>Include Extensions</h3>
            <p>Add extra functionality to your deck, or leave it stripped down.</p>
      </li>
    </ol>
</section>

Choose themes

One theme is selected for slide styles and another theme for deck transitions. Style themes customize the colors, typography, and layout of slide content, and are called from the theme style sheet as shown in the introduction html code snippet below:

<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" href="../themes/style/web-2.0.css">

Other style options that come with the download include the Swiss style (swiss.css) and the neon style (neon.css).

Transition themes define the transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. The style sheet is called as shown in the introduction html snippet below:

<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" href="../themes/transition/horizontal-slide.css">

Other transition options included with the download are the vertical slide (vertical-slide.css) and fade slide (fade.css).

These style sheets make great starting points to create and modify you own styles, which in fact, are encouraged by the author.

Changing the introduction HTML to the neon style theme updates the look and feel of the demonstration page, as shown in Figure C (Chrome 21.0.1).

Figure C

Now, let's change the transition theme to vertical and notice how the arrows have moved from the left and right sides to the top right and now point up and down, as shown displayed in Figure D below.

Figure D

Include extensions

Add extra functionality to your deck, or leave it stripped down. The "Core" directory gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

  • deck.goto: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.
  • deck.hash: Enables internal linking within slides, deep linking to individual slides, and updates the address bar and a permalink anchor with each slide change.
  • deck.menu: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between views.
  • deck.navigation: Adds clickable left and right buttons for the less keyboard inclined.
  • deck.status: Adds a page number indicator. (current/total)
  • Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.

Nested slides

The extensions slide has a few steps for demonstration purposes, and to create sub-steps in slides, just nest them as a class of slide within an ordered or unordered list, as shown in the example HTML code snippet below:

<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>
The live introduction html demonstration is showing page 9 as Figure E:

Did you notice that the style had changed in the last figure? I updated the style theme to call the Swiss theme (swiss.css).

Other elements

Images are quite easy to add into a slide, as demonstrated below in the HTML snippet and Figure F:
<section class="slide" id="elements-images">
      <h2>Other Elements: Images</h2>
      <img src="http://placekitten.com/600/375" alt="Kitties">
      <pre><code>&lt;img src=&quot;http://placekitten.com/600/375&quot; alt=&quot;Kitties&quot;&gt;</code></pre>
</section>

Add block quotes easily, just as you would in any HTML document. An example is shown in Figure G:

Video embeds include any videos using embed codes from your favorite online video service or with an HTML5 video element. Demonstration HTML code is shown in the snippet below:

<section class="slide" id="elements-videos">
   <h2>Other Elements: Video Embeds</h2>
      <p>Embed videos from your favorite online video service or with an HTML5 video&nbsp;element.</p>
   <iframe width="640" height="480" src="http://www.youtube.com/embed/udRnhctmPOI" frameborder="0" allowfullscreen></iframe>
   <pre><code>&lt;iframe width=&quot;640&quot; height=&quot;480&quot; src=&quot;http://www.youtube.com/embed/udRnhctmPOI&quot; frameborder=&quot;0&quot; allowfullscreen&gt; &lt;/iframe&gt;</code></pre>
</section>
For this example, I updated the embedded code for the demonstration index.html file and incorporated a video from a recent Roger Waters "The Wall" Tour concert date. The modified demonstration page is shown in Figure H:

Deck.core Module

The deck.core module provides all the basic functionality for creating and moving through a deck. It applies and removes classes to indicate the state of the deck and its slides, allowing CSS to take care of the visual representation of each state. It also provides methods for interacting with the deck, as well as basic key bindings for going to the next and previous slides. Separate extension modules provide more functionality using the API provided by core.

Ready to learn more?

If you want to learn about making your own themes, extending deck.js, and more, then check out the documentation at the URL (http://imakewebthings.com/deck.js/docs/).

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks