Minimal S5+XOXO Structure
This document provides the details of the S5 presentation file format based on the XOXO microformat. This will first present the minimum required structure, and then discuss optional bits of markup.
The Bare Minimum
What follows is an example of the absolute minimum markup required to be considered a valid S5 file. The italicized text indicates technically optional but strongly recommended content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[slide show title]</title> <meta name="version" content="S5 1.1" /> <link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" /> <link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" /> <script src="ui/slides.js" type="text/javascript"></script> </head> <body> <div class="layout"> <div id="currentSlide"></div> <div id="header"></div> <div id="footer"> <div id="controls"></div> </div> </div> <ol class="presentation xoxo"> <li class="slide"> <h1>[slide title]</h1> </li> </ol> </body> </html>
The first lines
The first lines of an S5 presentation file must contain an XHTML 1.0 Strict DOCTYPE declaration and a properly namespaced html element. These are both required. Although the S5 CSS and JavaScript is compatible with any well-formed HTML or XHTML document, XHTML 1.0 Strict was originally chosen in order to be compatible with OSF 1.0.
Because of the compatibility problems present in IE6/Win, the XML prolog should not be placed at the top of the document.
The head element
In addition to the title of the slide show, the head element must contain a meta element that describes the file format. This is OSF 1.0 compatible.
The head element also must contain the link elements and script element shown. The JavaScript file is what drives the labelling of slides, the transition from slide to slide, the creation of the navigation menu, and more. The CSS files, on the other hand, are required to set things so that the JS will work, and also to make the slides look pretty.
As of S5 1.1, CSS and JavaScript should not be embedded into the document. It is expected that a future version of S5 will change to allow embedded style sheets and scripts.
The body's beginning
At the very beginning of the body is the "layout" div. This is the same structure found in OSF 1.0, and can accept the same elements. S5 adds the markup shown above, which must be included in the document. The "controls" div is where the slide show navigation controls appear, and "currentSlide" is the spot where the "slide X of Y" information appears. The "header" and "footer" divs must be included as well. Authors are free to add markup and content to the "header" and "footer" divs, but not to remove them entirely.
The presentation
In keeping with XOXO, all of the slides are contained within a "presentation" ol. It begins immediately after the close of the "layout" div and contains one or more slides.
Every slide in the presentation file must be enclosed in an li with a class containing the word slide in its value. While a slide li can be given an id, the value will be overwritten by the S5 JavaScript routines. Thus in S5, id attributes on slide lis are discouraged.
The title of a slide should be contained by an h1 element, as in OSF 1.0. In S5, authors are strongly encouraged to have a slide title element, even if its content is empty. This will help keep the navigation menu working as expected. The markup of content for each slide is up to the individual author. Blank slides are certainly permitted, although would seem to be sort of useless.