If you combine S5 with XOXO you get a format you can use to build simple slideshows for the internet and that makes sense to microformats parsers. S5 is a simple slideshow system with many features that can pull the data for slides right out of an XOXO block. To use S5 you will have to download the JavaScript and CSS files from the homepage and then build a page with slide content that links in these files. While there is a quite adequate S5-with-XOXO reference, the format will be summarised here for completeness.
Notes
S5 documents must be DOCTYPE XHTML 1.0 Strict, and there are certain <meta> tags that are required. See the specification for more details.
Meta Data
Meta data in S5 is encapsulated in a set of <meta> tags. This means that the data will not be available to XOXO-only processors. The page <title> must be the title of the presentation and the <meta name=”version” content=”S5 1.1″ /> element is also required, along with the tags to include the JavaScript and basic CSS.
There is also a controls/header/footer section that must be present first in the <body> tag before the XOXO data. The code for this section follows:
<div id=”controls”><!– DO NOT EDIT –></div>
<div id=”currentSlide”><!– DO NOT EDIT –></div>
<div id=”header”>
SLIDESHOW HEADER
</div>
<div id=”footer”>
SLIDESHOW FOOTER
</div>
Where SLIDESHOW HEADER and SLIDESHOW FOOTER are the contents for the header and footer of the slideshow, respectively.
Classes
In order for the S5 code to interface with your data properly the class ‘presentation’ must be present on the main <ol> or <ul> tag. The class ‘xoxo’ is also reccomended in accordance with the XOXO specification.
Nodes
Each root node in the XOXO tree for the slides must have the class ‘slide’. The direct contents of the node (along with any XHTML markup) are considered to be the text (/images etc.) of the slide. If the first element in the node is an <h1> element the contents of that tag are considred the title of the slide. Subnodes are rendered as points in the presentation. If the <ul> or <ol> root tag for the subpoints has the class ‘incremental’ the points will be introduced one at a time. Additionally a <div> element of class ‘handout’ will not be rendered on-screen but only when the presentation is printed.