When a developer demos their software, especially at a hackathon, it’s best to “do it live.” For longer form presentations, a slide deck is generally the tool of choice, either using Keynote or PowerPoint. Having attended hundreds, if not thousands, of technical talks and hackathon presentations in the past few years, I can tell you definitively, even a small dash of interactivity goes a long way towards keeping the audience engaged. Of course, a slick presentation is not necessary, but it doesn’t hurt either, especially if it does not cost a great deal of time to create.

In this post, we’ll use the best interactive presentation tools available today to create a beautiful and interactive presentation in minutes. In fact, in just over four minutes, as you can see in this screencast (also embedded below). You can also clone my GitHub repo to get started.

Technology note

I have tested this project on a Macbook Pro Retina, running OS X Mavericks 10.9.2 with Node.js v0.10.26 installed using Chrome Version 34.0.1847.11 beta as the slide viewer. The instructions for getting the project running and setup on your machine are at GitHub. If you test with configurations other than what I have described, I would appreciate your feedback.

Reveal.js brings the presentation in-browser

Reveal.js, according to its author, Hakim El Hattab, “is a framework for easily creating beautiful presentations using HTML.” I agree. If you need some convincing, go take a look at the live demo.

In this project, we will run Reveal.js within the express, a Node.js web application framework. I suggest you take a moment to read through the Reveal.js documentation to get familiar with the various options, they are quite impressive.

We will also make use of the Leap Motion Controller and Highlight.js Reveal.js plugins for the slide navigation and code syntax highlighting.

Leap Motion gives your hand waves meaning

Using the Leap Motion Controller with the Reveal.js Leap Motion plugin we can control our presentation with simple hand waves. For example, point 1 or 2 fingers at your screen to simulate a laser pointer. Swipe your hand left/right/up/down to navigate through the slides. Raise both hands upward to enter/exit overview mode. Now, all your hand waving will actually have a practical effect.

SendGrid’s Inbound Parse Webhook adds audience interactivity

The SendGrid Inbound Parse Webhook takes an incoming email, parses it into a JSON object, then posts it to your endpoint. w00t! We will use this feature to allow for interactive near-realtime voting. During your presentation, live of course, you will ask your audience to send an email to a pre-configured email address with their vote in the subject line.

This software will then store the vote in a database and update your presentation right before your speechless audience’s eyes, using Highcharts.js to create the magical chart. The code that parses the incoming email, stores the result in a MySQL database, and then emails your audience is located in the app.get function.

Google Glass becomes a teleprompter

Using the Mirror API, we can post text to our Google Glass timeline. Every time we change a slide, we will grab the notes from that slide and push them to our Google Glass timeline, effectively creating a teleprompter that is synced with our slide notes.

To get this part of our project going, you will need to go through the process of creating an Glassware application on App Engine to obtain your Glass credentials. These credentials tell this app where to post the notes to.

See it in action

The above video shows each step in action as I piece together these different technologies into the ultimate interactive presentation.

The truly ultimate presentation will be the one you create and I’d love to hear about what you make with these tools. Please take a moment to share your creations with us! As always, we appreciate your feedback and are always open to ideas towards improvement.

Happy Hacking!

References

The following are resources that I used to craft this post and references that should help take your presentation game to the next level:

Elmer Thomas is SendGrid’s Hacker in Residence. His mission is to help SendGrid live up to its slogan: “Email Delivery. Simplified” by improving the lives of developers, both internally and externally. Follow his exploits on Twitter and GitHub. This post originally appeared on the SendGrid blog.