S5 Integration

slides in Instiki

Jacques Distler

University of Texas at Austin

S5

S5 is an open-source presentation package, written by Eric Meyer.
Andrea Censi included some basic S5 support in Maruku, his Ruby Markdown implementation.
My role was to
- make it compatible¹ with real XHTML
- integrate it into Instiki
Driven by Maruku and itex2MML, it’s trivial to include equations, inline SVG graphics, etc.

This consisted, mainly, of fixing the Javascript to use DOM-scripting, instead of innerHTML.
↩

Composing a presentation

An S5 presentation is simply a Wiki page, at the top of which is some metadata:

 author: Jacques Distler
 company: University of Texas at Austin
 title: S5 Integration
 subtitle: slides in Instiki
 slide_theme: nautilus
 slide_footer: Released to the Internets
 slide_subfooter: March 1, 2007

 :category: S5-slideshow

The :category: S5-slideshow is essential. It tells Instiki that this page is an S5 slideshow. Any page in this category has an extra “S5” view, in addition to the “TeX” and “Print” views. The other metadata fields are optional. If you omit author: ..., the name of the person who last edited the page is used. If you omit title: ..., the name of the page is used.

Composing …

After that metadata, comes a series of slides

 My Slideshow
 ==============

 First Slide Title
 -----------------

 * First point
 * Second point

 Second Slide Title
 ------------------

 * Another boring bullet point.

etc.

Of course, you don’t have to use bullet points. You can use any Markdown (or XHTML) markup you wish.

Features

Mathematics, either inline $(\frac{\sin (π x)}{π x})$ or block

(1) $\int_{∞}^{∞} e^{- x^{2}} d x = \sqrt{π}$ \int_{\infty}^{\infty}e^{-x^2} \mathrm{d}x = \sqrt{\pi}

are fully supported. You just type standard itex, and equations like (1) just appear.
Incremental display is supported.
Notes are allowed, but there isn’t (yet) a native Maruku syntax for entering them. Horror of horrors! You need to type a little XHTML markup to get them.

You have to type

 <div markdown="1" class="notes">
   These are my notes for this slide.
 </div>

Usually, these optional notes contain the gory details and complicated equations, like $E = m c^{2}$ , too messy to be presented in the main thread of the talk.

Features II

To get incremental display, use Maruku’s metadata syntax

Place a {: .incremental .show-first} or {: .incremental} to get incremental display.
- This even works with nested lists.
Yes, all of S5’s other features are there, too.
Of course, it doesn’t have all the garish visual effects of Apple’s Keynote.
If you can’t do without garish, tacky, visual effects, there’s always SVG.

It does have Themes, though. That’s something, isn’t it?

Besides, do you really want to animate

(2)

i ℏ \frac{\partial}{\partial t} ψ = H ψ

Features III

Instiki has support for S5 Themes. Themes are stored in the public/s5/themes directory. There are 6 supplied themes:

"default"

"nautilus" by Eric Meyer

"blue" by Martin Hense

"flower" by Martin Hense

"pixel" by Martin Hense

"i18n" by Eric Meyer

Choose a theme using the

 slide_theme: NameOfTheme

directive in the metadata for your slideshow.

Features IV

Graph from BaBar

Of course, you can throw in images, like the one at right.

You can, equally well, use inline SVG (at left and below).

K^{0} {\bar{K}}^{0}

Mixing

Features V

And tables are easy to construct, using itex and Maruku’s extended Markdown table syntax:

$j$	$0$	$1$	$2$	$3$	$4$	$5$	$6$	$7$	$8$
$C ℓ_{j}^{-}$	$ℝ$	$ℂ$	$ℍ$	$ℍ \oplus ℍ$	$ℍ (2)$	$ℂ (4)$	$ℝ (8)$	$ℝ (8) \oplus ℝ (8)$	$ℝ (16)$
$C ℓ_{j}^{+}$	$ℝ$	$ℝ \oplus ℝ$	$ℝ (2)$	$ℂ (2)$	$ℍ (2)$	$ℍ (2) \oplus ℍ (2)$	$ℍ (4)$	$ℂ (8)$	$ℝ (16)$

Go wild!

If you haven’t already done so, check out the slide controls at the lower right of this slide. Click on ≣ to bring up the slide notes (in a separate window). Run through the slide show, perusing the notes.

Look at the regular XHTML view of this slide show (click on the “Edit” link to see the source). Then head on over to the S5 site to learn more about using S5.