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:

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.

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.

At least in Firefox, 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

Also supports native MathML and inline SVG.

Opera

As with Eric Meyer’s version, S5 slideshows only work in Opera’s full-screen mode. There’s no native MathML (of course). But inline SVG works and MathJax does an OK job rendering most MathML.

Chrome/Chromium

The slideshow feature is fully supported in Google Chrome. There’s no native MathML (of course). But inline SVG works and MathJax does an OK job rendering most MathML.