The rectangle behind you

Examples of benefits of using HTML for slides

In no particular order:

I can embed/iframe other sites (external or my own) and play with them as I’m speaking.

Embedding a cool website to illustrate canvas capabilities

A slide embedding three different Google doodles

Embedding the excellent 20 Things I Learned… into one of the slides

I can have interactive slides, which help me illustrate examples by e.g. moving a slider around, typing into an input field, or clicking on things.

An interactive example of “grunge typography”

A simple interactive example

An illustration of the innards of one of Google doodles

I can have custom transitions and effects unavailable anywhere else. For example, for a talk about Pac-Man, I built in all sorts of analogue effects mimicking old CRTs.

A custom transition illustrating Google doodle creative process, prepared for an SXSW 2011 talk

A custom transition illustrating the graphic capabilities of ZX Spectrum

I can build in all sorts of big bombastic slides… and little delightful moments no one knows about but me.

I can build in continuity between slides — for example, if I type in something or change on one slide (especially as a result of audience participation), I can have the same thing come back over and over again later.

Speaking of typing in, I can also wire in pre-determined strings to type.

This is something I learned from WarGames — in this 1983 movie most of the actors were unfamiliar with computers and QWERTY keyboards, so the creators rigged the machines so that the actors could slam any key, and the correct next letter would show up on the screen.

My educated guess is that familiarity with QWERTY is at least slightly better today, but juggling concurrent talking and typing might still be difficult. Why not build yourself a little helper to make sure you simply can’t screw up?

I can use similar code to have secret keyboard shortcuts that allow me to make my slides as interactive as I want them to.

If I show any code, I can use a number of JavaScript libraries to have syntax highlighting for free, without awkward screenshotting of text.

I can build in skippable slides, or extra bonus slides if I need to.

I can have all sorts of other backups built in, for example showing a pre-recorded video if the live server is not working at the moment (and the audience wouldn’t ever know that was even an option).

My presentation deck can be connected to a server, and I can have people helping me with the slides by voting on them with their devices.

I can use Node.js and have my talks be controlled from my phone, or many phones/tablets together, or even a Nintendo Power Glove (well, technically, iPod Touch attached to one).

I can have a confidant in the audience magically putting up the right one out of thousands of pictures while my team is talking.

I can trick people into believing my talk runs on Internet Explorer 6, in 2012. (Oh, yes.)

I can have multiple browsers helping each other out through Node.js (for example, Safari running the presentation since its animations are smoother, but Chrome helping out with accelerometer data that Safari can’t access on its own). Watch below for the glorious moment where the computer falls to the ground:

I can build a system where people can follow along with the slides, and be able to tweet screenshots or save them for future reference, instead of being forced to awkwardly take photos of a slide in front of them.

If the venue has multiple screens, I can connect different computers to them, have them talk to one another, and display one big slide across all of them, creating a big surface. (Caveat: I have only tried it briefly. Awaiting another opportunity.)

Lastly, my presentations can have their own consoles, which I can bring up when I press [~] (tilde). Come on. That’s pretty fucking bad-ass. A presentation deck with its own console:

Because everyone knows anything automatically becomes so much more awesome with a console.

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)