presentation(s)
-->
<div class="presentation">
<div class="slide">
<h1>Presenting with S5</h1>
<h3>A. Eliëns</h3>
<h4><a href="http://create.eliens.net">Creative Technology</a></h4>
</div>
<div class="slide">
<h1>What Is S5?</h1>
adapted from a presentation by Eric Meyer
<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>
<li> download it via <a href=sub-tutorial-web-3.html>tutorial 3</a>
or directly from <a href=http://meyerweb.com/eric/tools/s5>tools/s5</a></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="lib-present-slide-s5-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="lib-present-slide-s5-pix-S501.jpg" alt="" title="Default" /> <img src="lib-present-slide-s5-pix-S502.jpg" alt="" title="I18N" />
<img src="lib-present-slide-s5-pix-S503.jpg" alt="" title="Blue" /> <img src="lib-present-slide-s5-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="lib-present-slide-s5-pix-mememe01.png" id="me01" alt="" /> <img src="lib-present-slide-s5-pix-mememe02.png" alt="" id="me02" class="incremental" />
<img src="lib-present-slide-s5-pix-mememe03.png" alt="" id="me03" class="incremental" /> <img src="lib-present-slide-s5-pix-mememe04.png" alt="" id="me04" class="incremental" />
<img src="lib-present-slide-s5-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>
<!--