After giving my talk at braziljs last year (and having lots of trouble to finish my presentation on time), I promised myself I would try to find easier ways to get my presentations done.

Mostly, my presentations consist of minimum text, lots of images, and a multitude of slides, so I thought on evaluating other tools instead of sticking to keynote.

My next talk would be at devinsampa, a brazilian geeky conference, a perfect place to try something new just for the sake of trying.

investigation

Since I was working a lot on Ruby/Rails systems, my first idea was to find something that leveraged my day-to-day tools. Then I remembered an amazing presentation named pure RSpec John @l4rk gave at Scottish Ruby Conference 2010, which used a different tool for generating HTML slides.

Then I found showoff - a very simple presentation tool with lots of nifty features, like slide transitions, a cool JSON-based presentation descriptor, and much more. Unfortunately, as uncle ben says, with great power comes great responsibility, showoff had ruby as its dependency, ruling out my idea of having a 100% standalone presentation.

Reading showoff documentation, I’ve found it was written inspired on other tools, like S5, Slidy and Slidedown, which didn’t look that attractive to me at that time.

discovery

In late May, 2011, I’ve found deck.js, a very beautiful HTML+javascript presentation system, with a modular architecture comprised of several plugins. It was the perfect fit for what I wanted to do.

What impressed me more about deck.js was that its documentation were built on itself! Why not have a presentation on how to create presentations?

construction

I started making my presentation using it, and started to feel awkward of using pure HTML to do it. I used vim export to HTML function to get syntax highlighting, and pasted the code inside my HTML presentation. I’ve done less than 30% of my presentation and was thinking already on how could I improve this clumsy and tedious workflow.

markdown based

The first thing I did to improve it was combining deck.js with showdown.js, for having my slides generated from a simple markdown-based format.

Borrowing from showoff, I’ve used the same !SLIDE separator, but having homogeneous transitions on all slides and dismissing the JSON presentation descriptor.

highlighting

Next step was to remove the dependency on an external tool for syntax highlighting. Markdown has a nice syntax for code blocks, so it was just a matter of putting highlight.js to filter all pre > code elements through it.

final results

Here you can see the first presentation using this set of tools. Unfortunately, due to my laziness, I’ve forgot to include the deck.navigation plugin, which helps mobile users a lot.

future?

Recently, I’ve found a new tool, inspired by the labyrinthitis-triggering prezi - but without using adobe flash, just plain old HTML5*.

impress.js has a lot of potential on making a breakthrough on how presentations are made today, and on helping push the web forward, as it uses all the new fancy CSS3 transforms and transitions. The downside is that, like it’s oldest cousin prezi, you have an infinite canvas, which roughly speaking, needs to work with absolute coordinates the majority of time.

The final result is awesome, but it really takes a considerable time fiddling with x, y, z and rotation html5 data-attributes.

The sad part is that, currently, impress.js doesn’t support mobile clients at all - yet.

crazy closing thoughts

What if we used some of the maze-generation algorithms to automate the impress.js presentation creation? Versions like the recursive backtracker, combined with a seedable PRNG like the traditional Mersenne Twister algorithm could yield interesting results, having a random-like appearance that can easily yield the same results, given you provide the same seed.

$(function(){
    var m = new MersenneTwister(2);
    var maxOffset = 1000;
    var root = $("<div></div>").attr("id", "impress");
    for(var i = 0; i < 10; i++){
        var slide = $("<div></div>")
            .attr("data-x", m.nextInt(maxOffset))
            .attr("data-y", m.nextInt(maxOffset))
            .attr("data-z", m.nextInt(maxOffset))
            .attr("data-rotate-x", m.nextInt(maxOffset/10))
            .attr("data-rotate-y", m.nextInt(maxOffset/10))
            .attr("data-scale", m.nextInt(10))
            .append($("<h1>slide" + i + "</h1>"))
            .addClass("step");
        root.append(slide)
    }
    $("body").append(root);
    impress();
});

Take a look on the result of this crazy experiment - beware - might trigger dizziness, not fully tested yet :P

You can download the sources and give it a try!

It even has a pleasant effect on generating talk visualizations (click on the image to navigate on an experimental talk visualization)

What do you think about it?

---

Recently, I’ve joined JBoss to work on the AeroGear team!

* this POH5 acronym was coined by the fine folks of my team.