ShowOff Presentation Software

ShowOff is a Sinatra web app that reads simple configuration files for a presentation. It is sort of like a Keynote web app engine - think S5 + Slidedown. I am using it to do all my talks in 2010, because I have a deep hatred in my heart for Keynote and yet it is by far the best in the field.

The idea is that you setup your markdown slide files in section subdirectories and then startup the showoff server in that directory. It will read in your showoff.json file for which sections go in which order and then will give you a URL to present from.

It can:

show simple text
show images
show syntax highlighted code
bullets with incremental advancing
re-enact command line interactions
call up a menu of sections/slides at any time to jump around
execute javascript or ruby live and display results
do simple transitions (instant, fade, slide in)
show a pre-show slideshow while you wait to start

It might will can:

show a timer - elapsed / remaining
perform simple animations of images moving between keyframes
show syncronized, hidden notes on another browser (like an iphone)
show audience questions / comments (twitter or direct)
let audience members go back / catch up as you talk
let audience members vote on sections (?)
broadcast itself on Bonjour
let audience members download slides, code samples or other supplementary material
let you write on the slide with your mouse, madden-style via canvas

Some of the nice things are that you can easily version control it, you can easily move sections between presentations, and you can rearrange or remove sections easily.

Usage

ShowOff is meant to be run in a ShowOff formatted repository - that means that it has a showoff.json file and a number of sections (subdirectories) with markdown files for the slides you're presenting.

$ gem install showoff
$ git clone (showoff-repo)
$ cd (showoff-repo)
$ showoff serve

If you run 'showoff' in the example subdirectory of ShowOff itself, it will show an example presentation, so you can see what it's like.

Slide Format

You can break your slides up into sections of however many subdirectories deep you need. ShowOff will recursively check all the directories mentioned in your showoff.json file for any markdown files (.md). Each markdown file can have any number of slides in it, separating each slide with the '!SLIDE' keyword and optional slide styles.

For example, if you run 'showoff create my_new_pres' it will create a new starter presentation for you with one .md file at one/slide.md which will have the following contents:

!SLIDE

# My Presentation #

!SLIDE bullets incremental transition=fade

# Bullet Points #

* first point
* second point
* third point

That represents two slides, the first contains just a large title, and the second is faded into view showing the title and three bullets that are then incrementally shown. In order for ShowOff to see those slides, your showoff.json file needs to look something like this:

[
  {"section":"one"}
]

If you have multiple sections in your talk, you can make this json array include all the sections you want to show in which order you want to show them.

If you want to keep the ability to emit an HTML document from your Markdown source file -- say, for a TextMate preview or a GitHub rendering -- you can use angle brackets around the !SLIDE keyword and styles, e.g.

<!SLIDE bullets incremental transition=fade>

Some useful styles for each slide are:

center - centers images on a slide
full-page - allows an image to take up the whole slide
bullets - sizes and separates bullets properly (fits up to 5, generally)
smbullets - sizes and separates more bullets (smaller, closer together)
subsection - creates a different background for titles
command - monospaces h1 title slides
commandline - for pasted commandline sections (needs leading '$' for commands, then output on subsequent lines)
code - monospaces everything on the slide
incremental - can be used with 'bullets' and 'commandline' styles, will incrementally update elements on arrow key rather than switch slides
small - make all slide text 80%
smaller - make all slide text 70%
execute - on js highlighted code slides, you can click on the code to execute it and display the results on the slide

Check out the example directory included to see examples of most of these.

Transitions can be supplied through the use of transition=tname on the !SLIDE definition, where tname is one of the following supported transitions:

blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none (this is the default)
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

The transitions are provided by jQuery Cycle plugin. See http://www.malsup.com/jquery/cycle/browser.html to view the effects and http://www.malsup.com/jquery/cycle/adv2.html for how to add custom effects.

You can manage the presentation with the following keys:

space, cursor right: next slide
cursor left: previous slide
d: debug mode
c: table of contents (vi)
f: toggle footer
z: toggle help
p: toggle preshow

Preshow

If you want to show a slideshow while you wait to speak, you can run a preshow. Add a _preshow directory to your project (I use a symlink, so I don't have to add all the images into Git), put a bunch of images in the _preshow directory and optionally add a preshow.+json+ file that provides descriptions for any of the images. If you then press 'p' at the beginning of your presentation, it will prompt you for a number of minutes until you start. Then it will count down the time until then, flipping through your pictures to entertain the audience in the meantime. Press 'p' again to stop, or wait until the timer runs out.

Custom JavaScript

To insert custom JavaScript into your presentation you can either place it into a file (with extension .js) into the root directory of your presentation or you can embed a