1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Minimal S5 Structure</title>
<style type="text/css" media="all">
pre {padding: 1em 0.2em; border: 1px dotted gray; border-width: 1px 0;}
</style>
</head>
<body id="www-meyerweb-com" class="tools">
<h2>Minimal S5 Structure</h2>
<p>
This document provides the details of the S5 presentation file format based on the <a href="http://microformats.org/wiki/xoxo">XOXO microformat</a>. This will first present the minimum required structure, and then discuss optional bits of markup.
</p>
<h3>The Bare Minimum</h3>
<p>
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.
</p>
<pre>
<!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><i>[slide show title]</i></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><i>[slide title]</i></h1>
</li>
</ol>
</body>
</html>
</pre>
<h4>The first lines</h4>
<p>
The first lines of an S5 presentation file <strong>must</strong> contain an XHTML 1.0 Strict DOCTYPE declaration and a properly namespaced <code>html</code> element. These are both <strong>required</strong>. 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.
</p>
<p>
Because of the compatibility problems present in IE6/Win, the XML prolog should <strong>not</strong> be placed at the top of the document.
</p>
<h4>The <code>head</code> element</h4>
<p>
In addition to the title of the slide show, the <code>head</code> element <strong>must</strong> contain a <code>meta</code> element that describes the file format. This is OSF 1.0 compatible.
</p>
<p>
The <code>head</code> element also <strong>must</strong> contain the <code>link</code> elements and <code>script</code> 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.
</p>
<p>
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.
</p>
<h4>The <code>body</code>'s beginning</h4>
<p>
At the very beginning of the <code>body</code> is the "layout" <code>div</code>. This is the same structure found in OSF 1.0, and can accept the same elements. S5 adds the markup shown above, which <strong>must</strong> be included in the document. The "controls" <code>div</code> 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" <code>div</code>s <strong>must</strong> be included as well. Authors are free to add markup and content to the "header" and "footer" <code>div</code>s, but not to remove them entirely.
</p>
<h4>The presentation</h4>
<p>
In keeping with XOXO, all of the slides are contained within a "presentation" <code>ol</code>. It begins immediately after the close of the "layout" <code>div</code> and contains one or more slides.
</p>
<p>
Every slide in the presentation file <strong>must</strong> be enclosed in an <code>li</code> with a <code>class</code> containing the word <code>slide</code> in its value. While a slide <code>li</code> can be given an <code>id</code>, the value will be overwritten by the S5 JavaScript routines. Thus in S5, <code>id</code> attributes on slide <code>li</code>s are discouraged.
</p>
<p>
The title of a slide should be contained by an <code>h1</code> 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.
</p>
</body>
</html>
|
