Instiki
S5

Slide Shows in Instiki

S5 is an open-source presentation software package using HTML and Javascript to drive the presentation. An S5 slide show is an HTML document adhering to a very particular format.

We can do that here in Instiki. But, since Maruku supports a modification of the Markdown input semantics for generating S5 documents, we can do it in a particularly nice way.

Notoriously, S5 does not work with real XHTML, because the Javascript was not created in an XHTML-safe fashion. This has been fixed in my distribution.

Getting Started

Here’s the Markdown input for a very simple S5 slide show.

author: Me
company: My Company
title: My First Slide Show
subtitle: slides in Instiki
slide_theme: flower
slide_footer: Look at me, Momma!
slide_subfooter: March 1, 2007

:category: S5-slideshow

My First Slide Show
===================

My First Slide

* My first bullet point
* My second bullet point

My Second Slide

* People are starting to get antsy.

Conclusions

1. Don't bore them.
2. *Do* use Instiki+S5.

The :category: S5-slideshow header is crucial. This tells Instiki that this Wiki page is actually an S5 slide show. At the bottom of the page, you will find a link to an “S5” View, in addition to the usual “Print” and “TeX” Views.

The other metadata headers are optional. If you omit the author: header, the name of the last person to edit the page is used. If you omit the title: header, the page name is used.

Aside from the way it treats headers to demarcate the slides, you can use all the regular features of itex2MML and Maruku’s extended Markdown syntax in your slides. You can even embed inline SVG.

Themes

The

slide_theme: [NameOfTheme]

line determines the style for the slideshow. If you omit it, you get the default theme.

Themes are stored in the public/s5/themes/ directory. Choose one of the supplied themes:

default
"default"
nautilus
"nautilus" by Eric Meyer
blue
"blue" by Martin Hense
flower
"flower" by Martin Hense
pixel
"pixel" by Martin Hense
i18n
"i18n" by Eric Meyer

or create your own by copying one of the existing ones, and modifying the pretty.css CSS file.

Slide Notes

If you have dual screen support, you can put your slide notes on one screen, while displaying the slide show itself on the other screen.

Slide notes are delimited by

 +-- {: .notes}
    These are my notes for this slide.
    We can include equations, like $E = m c^2$, too.
 =--

The notes page tracks the main slide show (displaying the notes for the current slide and the next), and contains both “elapsed-time” and “time-remaining” clocks.

Example

Here’s a sample slide show, illustrating how it all works. Check out the source, to see how it’s done.

Full Screen Support

Of course, when you actually show your slideshow, you want to display it in full screen mode.

On most platforms, hitting F11 in Firefox takes you into full screen mode.

That doesn’t work in MacOSX. The best solution (at present) is to use Camino1. Install megazoomer2, and you can switch to full screen mode in any Cocoa Application by hitting -return.

This leaves you with the browser chrome still visible. For slide show purposes, you’d like to hide that as well.

  • In Firefox, the Autohide extension allows you to customize what’s visible in full screen mode. For example, you can autohide all toolbars when F11 is pressed so that they reappear only when the mouse is moved to the top of the screen.

  • In Camino, you can hide the Bookmark bar and the Toolbar, leaving just the narrow Status bar at the bottom of the screen. Pretty darned close to full screen!

At least in Firefox and Camino, you need to reload the page ( -R or ctrl -R, depending on your OS), when you toggle between normal and full-screen mode.

Other Browsers

Safari
Safari’s DOM support is rather broken in real XHTML. So it took some doing to get S5 slideshows to work as real XHTML in Safari. Fortunately, it seems to work now. This means that, while there’s no MathML (of course), at least inline SVG works.
Opera
As with Eric Meyer’s version, S5 slideshows only work in Opera’s full-screen mode. There’s no MathML (of course), but inline SVG does work.

  1. Unfortunately, Javascript in Camino 1.6.6 is ridiculously slow. S5 is unusable on anything less than a dual-processor G5. And there are a number of serious glitches in its MathML support. These are fixed in Camino 2.0.

  2. Requires SIMBL or PlugSuit (MacOSX 10.5 or earlier).