Personal tools
You are here: Home Members rea SLUG howto How to make an S5 Presentation
Document Actions

How to make an S5 Presentation

by Robert Anderson last modified 2006-01-09 21:39

This is a really cool way to make slides by generating standard HTML that can be presented a page at a time using CSS.

S5 Presentation

What does S5 stand for
A Simple Standards-Based Slide Show System

Now you can see why the call it S5.

Why

Features:

  • a slide show
  • a web version of the slides for later reference
  • works everywhere
  • very little markup (especially when used with "Structured Text"

Downside:

  • Doesn't work with Konqueror
  • Likely to have trouble on the Mac too

How to make an S5 Presentation slideshow

  1. Create a single HTML content file with <H1> headers at the start of each page.
  2. If it's located here you just need to click the "S5 presentation" button at the top (to the far right the documents tittle).
  3. View it anyplace with CSS.

An example using Plone's "Structed Text" format

  1. Make a new "page" in your "my folder" area.
  2. Give it a "Title" and "Description".
  3. In the "Body Text" choose "Text Format" of Structured Text
  4. Enter the following in the "Body Text" area:
        slide1
    
          * Idea
    
            1. step one
    
            2. step two
    
        slide2
    
          Something else
    
  5. Save it out.

The next two slides are the "Body Text" above.

slide1

  • Idea
    1. step one
    2. step two

slide2

Something else

The same slides in HTML

In HTML it would look like this:

    <H1>slide1</H1>
    <UL><LI> Idea
    <OL>
      <LI>step one
      <LI>step two
    </OL></UL>
    <H1>slide2</H1>
      something else

The idea and credits goto

The original S5 Presentation idea
Came from CSS guru Eric Meyers. See this site for generic non-plone use of the CSS S5 Presentation trick.
The PloneS5 hooks
From Andy McKay, Enfold Systems

Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: