Upgrading to more impressive presentations: impress.js

hingo's picture

In terms of using an open source desktop, Sun releasing OpenOffice some 15 (?) years ago was an important milestone, comparable to Mozilla finally managing to produce a working browser in Firefox. It provided essentially feature parity with Microsoft office, and most importantly, decent compatibility with Microsoft's own proprietary file formats.

I've used OpenOffice, and now LibreOffice, for lots of non-trivial tasks, including writing a complete book. Sure, the UI toolkit was stuck in the 90's, and Sun wasn't really a good steward in pushing the code base into this century, but it did work.

However, the PowerPoint counterpart of the suite, OpenOffice Impress quite frankly always sucked. Initially this wasn't such a big problem, because PowerPoint sucked just as much. 8 years go when I worked at MySQL, it was a bit of a pain that graphics wouldn't be positioned correctly when I opened a PowerPoint presentation, but I would spend 30-60 minutes moving them back into position, and I had a useable presentation.

When the LibreOffice project took over, I had high hopes that the project would be rejuvenated and a decade of stagnation would be over. Unfortunately, years later, I must finally conclude that this didn't happen as far as presentations are concerned. My colleagues now use Keynote, and even PowerPoint has made meaningful improvements in the last 15 years, such as supporting shadows, rounded corners, tinting and transparency of images. Meanwhile, LibreOffice Impress has stood completely still, or possibly regressed. It still only supports a hard coded color palette, I have to enhance my images in Gimp before importing them, and there's essentially zero support for creating my own layouts/templates.

In my work I speak at a lot of conferences, MongoDB meetups and to customers. I also have a minor in multimedia, so I now what a nice presentation looks like. Last year about this time, I decided I had had enough. At the very least, I needed a tool where I can pick my own colors, dammit. Well, also templating is a must. Actually, I wanted to find the tool that allows me to produce absolutely stunning presentations, so that I could positively stand out compared to other speakers!

My first instinct of course was to look closely at Calligra's presentation module from KDE. Much like LibreOffice, I had read from blogs that this project was now in new hands and rejuvenated. For sure, as it uses standard KDE UI components, it does have a color picker that can support arbitrary colors. But it soon ended there. I couldn't find a way to create any new templates whatsoever. The helpful people on the mailing list responded that it isn't supported yet, but since both support the OpenDocument file format, I could use LibreOffice to create an template, then use the template in Calligra. Little did they know, that was the precise reason I was fleeing from LibreOffice.

At this point I decided, perhaps it was time to think a bit outside the box. I had seen some people use various JavaScript based presentation frameworks, that display nice "slides" in a browser. Open source, standards compliant and platform independent for sure... And it turns out that browsers nowadays are a really powerful technology for presenting stunning graphics and nice typesetting. With the arrival of web fonts and CSS3, even a simple professionally made .css file can outdo most PowerPoint presentations.

After some poking around, I've settled on a really cool 3D presentation framework: impress.js. If you've seen Prezi, it's somewhat inspired by that, except it is fully HTML+CSS, no flash. Also it does 3D effects, which are standard part of CSS3.

To really enjoy what it can do, you'd better open these sample presentations in a separate browser tab (or even make it full screen!):

Official impress.js demo - by Bartek Szopka, the creator of impress.js

"Classic Slides" with impress.js - a demo by me that can hopefully serve as a nice template to your first, simple presentation

Real world impress.js presentations I've done at Oscon, etc...

I've used impress.js now for some presentations throughout the year, and am really happy with it. I've also taken upon myself to contribute and improve this project. It has actually has been rather stagnant for a couple of years. That is to say, the core impress.js functionality is actually rather complete and really powerful, but users have been requesting some usability enhancements.

The links above already lead to my fork, which already contains some of those enhancements. Most importantly, it contains a proposal for a plugin API, which will allow new functionality to be added without bloating the core rendering library which is already doing what it's supposed to be doing really well. Unfortunately, despite attempts from all of us, the process of actually getting those enhancements into the official impress repo is not quite working out yet. But I do feel good about it in the sense that Bartek has been responsive and provided some guidance on his vision for the plugin api, and I believe I've been able to capture that quite well. (His original code already included some hints about the right direction to venture into.)

In my next blog posts, I will be writing more about how to create cool presentations in impress.js, and about the enhancements I've made.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Allowed HTML tags: <h1> <h2> <h3> <h4> <p> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <sup> <div> <blockquote> <pre> <img>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically. (Better URL filter.)

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.