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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
<!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>S5: An Introduction</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="20050728" />
<meta name="author" content="Eric A. Meyer" />
<meta name="company" content="Complex Spiral Consulting" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- embedded styles -->
<style type="text/css" media="all">
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}
img#me04 {top: 44px;}
img#me05 {top: 43px;left: 36px;}
</style>
<!-- S5 JS -->
<script src="ui/default/slides.js" type="text/javascript"></script>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>S5 Testbed</h1>
<h2>Your computer • Today's date</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>S5: An Introduction</h1>
<h3>Eric A. Meyer</h3>
<h4><a href="http://www.complexspiral.com/">Complex Spiral Consulting</a></h4>
</div>
<div class="slide">
<h1>What Is S5?</h1>
<ul>
<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li>
<li>One XHTML document provides all of the slide show's content</li>
<li>CSS handles the layout and look of the slides</li>
<li>JavaScript handles the dynamic aspects of the show</li>
<li>That's all there is to it!</li>
</ul>
</div>
<div class="slide">
<h1>Operatic Origins</h1>
<ul>
<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/">Opera Show</a>, a projection-mode style sheet technology</li>
<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
<li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
<li>Highly efficient, but highly browser centric...</li>
</ul>
</div>
<div class="slide">
<h1>Expanding The Field</h1>
<ul>
<li>When Opera 7.5 for OS X came out, the banner ads persisted in projection mode</li>
<li><a href="http://tantek.com/" rel="friend colleague met">Tantek Çelik</a> created a JavaScript-driven slide show technique that worked on multiple browsers
<ul>
<li>Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficult</li>
<li>Navigation was only linear; no way to jump to an arbitrary slide</li>
<li>There was also no facility to "switch off" the slide show styles short of killing all CSS</li>
</ul>
</li>
<li>Motive and opportunity combined to point the way...</li>
</ul>
</div>
<div class="slide">
<h1>Where We Are Now</h1>
<ul>
<li>S5 builds on Tantek's scripts and ideas, with input and ideas from several other people</li>
<li>Each slide is enclosed in a classed element; IDs are dynamically assigned via JavaScript</li>
<li>Navigation menu is automatically built at run time</li>
<li>The S5 format is compatible with <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">Opera Show Format 1.0</a>, making it easy to move slides between the two formats as needed</li>
<li>S5 can also run slide shows based on <a href="http://microformats.org/wiki/XOXO">XOXO</a></li>
</ul>
</div>
<div class="slide">
<h1>How It Works</h1>
<ul>
<li>Controls are...
<ul>
<li>Next slide: Space bar, return, right arrow, down arrow, page down, click anywhere in slide that isn't in the control area (lower right corner), click "arrow" in lower right corner, accesskey "X"</li>
<li>Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right corner, accesskey "Z"</li>
<li>Toggle the slide styles: Click on the toggle button (to the left of the arrows), press "t", accesskey "T"</li>
</ul>
...<a href="http://meyerweb.com/eric/tools/s5/features.html#controlchart" rel="external">plus more</a>!
</li>
<li>To invoke the navigation menu: mouse into the lower right corner of the slide (below the navigation arrows)</li>
</ul>
</div>
<div class="slide">
<h1>The Advantages</h1>
<ul>
<li>With one file, you get a slide show, a printable outline, and a screen presentation</li>
<li>Files are incredibly lightweight and compress easily</li>
<li>Thanks to being semantic XHTML, slideshow files are also highly accessible</li>
<li>New slide themes can be created simply by writing new style sheets</li>
<li>Unlike Opera Show, which has all of the above advantages, S5 works in multiple browsers</li>
</ul>
</div>
<div class="slide">
<h1>S5 Default File Structure</h1>
<p style="text-align: center;">
<img src="pix/s5filemap.png" alt="" title="At a Glance" />
</p>
</div>
<div class="slide">
<h1>S5 Themes</h1>
<p style="width: 520px; margin: 0 auto; text-align: center;">
<img src="pix/S501.jpg" alt="" title="Default" />
<img src="pix/S502.jpg" alt="" title="I18N" />
<img src="pix/S503.jpg" alt="" title="Blue" />
<img src="pix/S504.jpg" alt="" title="Flower" />
(just a sampling)
</p>
</div>
<div class="slide">
<h1>Features New to 1.1</h1>
<ul class="incremental">
<li>Incremental display of slide content</li>
<li>Font scaling based on window size</li>
<li>Support for PNG alpha channels in all supporting browsers, including IE/Win</li>
<li>Ability to jump to any slide, or skip a number of slides, via keyboard commands</li>
</ul>
</div>
<div class="slide">
<h1>Incremental Animation</h1>
<ul>
<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li>
</ul>
<p class="imgcon" id="anim">
<img src="pix/mememe01.png" id="me01" alt="" />
<img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
<img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
<img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
<img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
</p>
</div>
<div class="slide">
<h1>Current Limitations</h1>
<ul>
<li>Only one author can be listed in the metadata</li>
<li>Opera falls back to use OperaShow; thus no extras (like the navigation menu or progress indication) are available</li>
<li>Images are not scaled along with the text when the window size changes</li>
</ul>
</div>
<div class="slide">
<h1>Open To The Public</h1>
<ul>
<li>S5 1.1 is released under an explicit Public Domain license</li>
<li>Contributors to S5 <strong>must</strong> be willing to accept those terms
<ul>
<li>In other words: if you submit a contribution, you are agreeing to abide by and place your contributions into the Public Domain along with S5</li>
<li>On the other hand, anyone can freely use S5 for their own presentations or modify S5 to suit their needs</li>
</ul></li>
</ul>
</div>
<div class="slide">
<h1>In Summary</h1>
<ul>
<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
<li>New themes are just a matter of writing a new style sheet</li>
<li>The S5 format is OSF 1.0 and XOXO compatible</li>
<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
</ul>
</div>
</div>
</body>
</html>
|
