Presentations: Impress.js

Impress.js

In the continuous effort of improving presentations and (even more) presentation style I’ve stumbled a while ago over impress.js, Aside from deck.js it’s another tool to write nifty presentations without to worry to much about how it looks. Well, strictly speaking it’s not fully true, because you need to have an idea how it have too look…

impress.js is more focussed on the presentation style than deck.js and makes more use of HTML and CSS functionalities of the supported browsers (FF, Safari, Chrome). The result is a sligthly better looking presentation as with other tools. On the back side you need to have an idea what you are planning to to.

Creating your presentation is basically a two step thing here:

  1. Find out what you want to present and how it should be arranged.

  2. Code it.

Yeah, yeah, I know. You’ll tell me it’s so much easier in Powerp*, but I disagree.

That’s one more step than other presentation tools require, but they also have a different aim and purpose. And if you still think MS Powerpoint is a good presentation program, then there’s probably nothing that can help you anyway.

You should check out the Demo to get an overview about what is possible.

Installation

The installation is quite easy: Git will take care of everything and get you the latest copy on your harddrive:

$ git clone https://github.com/bartaz/impress.js.git

Done.

That will give you the necessary files on your harddrive:

$ cd impress.js.github.com/
$ ls -1
apple-touch-icon.png
css
favicon.png
index.html
js
README.md
$

Usage

Every new tool needs some learning. If you don’t need learning, then you end up with an Iphone where you basically can’t do anything else beside what’s already defined for you. Or wait: are you still reading there though you like PP? My bad…

In order to use impress.js you really should read the index.html and go through the examples mentioned and explained in there. It will take you a while, but as soon as you’ve wrapped your head around it and you feel comfortable, let me get you back to the ground: There’s a commented CSS file as well, which is just waiting for you to read!

After that you’re done. And by now you probably can do whatever you want to with impress.js.

But to give you a quick overview:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <title>Presentation title</title>
   <link href="css/impress-demo.css" rel="stylesheet" />
    <link rel="shortcut icon" href="favicon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">

    <div id="slide1" class="step slide" data-x="0" data-y="0">
    <span>Here the content of the first slide....</span>
    </div>

    <div id="slide2" class="step slide" data-x="0" data-y="1500">
    <span>... and here the content of the second slide.</span>
    </div>

</div>
</body>
</html>

There’s a whole bunch of parameters that can influence the layout and behaviour of the presentation.

  • data-x: Positioning of the element on the x-scale in pixel. Default: 0.

  • data-y: Positioning of the element on the y-scale in pixel. Default: 0.

  • data-z: Positioning on the element on the z-scale in pixel (yes, that means it’s 3D). Default: 0.

  • id: Unique identifier of an element. You can use this in an URL to directly jump to an element.

  • data-scale: Relative Size of an element in comparison to other elements. Default 1.

  • data-rotate: Rotation of the position of an element in degree. The rotation is always relative to the initial orientation of the slide, not to the previous element. Default: 0.

  • data-rotate-x: Rotation of an element along the x-axis. (again: turning 3D). Default 0.

  • data-rotate-y: Rotation of an element along the y-axis. Default: 0.

  • data-rotate-z: Rotation of an element along the z-axis. This is an alias to data-rotate.

Presentation style

If you really make your way through the_source you’ll find in the last paragraph a tip, that probably is more worth than all other common presentation tips you can get:

Oh, you’ve already cloned the code from GitHub? You have it open in text editor? Stop right there! That’s not how you create awesome presentations. This is only a code. Implementation of the idea that first needs to grow in your mind. So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.

—https://github.com/bartaz/impress.js/blob/master/index.html

This I could sign right away. Forging the presentation in code is the easiest and quickest task of having a presentation. The work you have to do in advance is far more important and builds the foundation of a good and understandable presentation.

Within the source you’ll also get a hint to read a book called Presentation Zen, I’ll do this right away now.