<!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.2a2" />
<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 Testbed</h1>
<h3>Eric A. Meyer</h3>
<h4><a href="http://www.complexspiral.com/" rel="external">Complex Spiral Consulting</a></h4>
<div class="handout"></div>
</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! (<a href="#slide10">skip to summary</a>; demonstrates links internal to the slide show)</li>
</ul>
<div class="notes">
<ul>
<li>I have notes here!</li>
<li>Keen.</li>
<li>Remember to tell people that notes are a new feature in 1.2</li>
</ul>
</div>
</div>
<div class="slide">
<h1>Operatic Origins</h1>
<ul>
<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external">Opera Show</a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</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 class="notes">
<ul>
<li>S5 and OperaShow diverged greatly in S5 1.1</li>
<li>S5 1.2 should (we hope) bring them into harmony once more</li>
</ul>
</div>
</div>
<div class="slide">
<h1>Incremental Display</h1>
<ul class="incremental show-first">
<li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li>
<li>Bullet points are revealed one by one
<ul class="incremental">
<li>All based on class name of <code>inc</code></li>
<li>Lists can be classed to make items appear individually</li>
<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
</ul>
</li>
<li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
</ul>
</div>
<div class="slide">
<h1>Incremental Display II</h1>
<ul class="incremental">
<li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li>
<li>Bullet points are revealed one by one
<ul>
<li>All based on class name of <code>incremental</code></li>
<li>Lists can be classed to make items appear individually</li>
<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
</ul>
</li>
<li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
<li>Now to move on to other test slides!</li>
</ul>
</div>
<div class="slide">
<h1>PNG Alpha Tests</h1>
<div style="width: 400px; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/bg-shade.png" alt="" title="A translucent image" />
</div>
<div style="width: 100%; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/bg-shade.png" alt="" title="A translucent image" />
</div>
</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 class="imgcon">
<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" />
(one way of presenting multiple graphics)
</p>
</div>
<div class="slide">
<h1>Incremental S5 Themes</h1>
<p class="imgcon">
<img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
<img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
<img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
<img src="pix/S504.jpg" alt="" title="Flower" class="incremental" />
(one by one!)
</p>
</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>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>The S5 format is OSF 1.0 compatible</li>
<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
</ul>
</div>
</div>
</body>
</html>
| # | Change | User | Description | Committed | |
|---|---|---|---|---|---|
| #1 | 12728 | eedwards |
Upgrade ANT doc build infrastructure to assemble PDFs: - remove non-namespaced DocBook source and add namespaced DocBook source. - add Apache FOP 1.1 - copy fonts, images, XSL into _build, establishing new asset structure. The original structure remains until all guides using it can be upgraded, and several other issues can be resolved. - updated build.xml to allow for per-target build properties. - upgraded the P4SAG to use the new infrastructure. - tweaked admonition presentation in PDFs to remove admonition graphics, and resemble closely the presentation used in the new HTML layout, including the same colors. With these changes, building PDFs involves using a shell, navigating into the guide's directory (just P4SAG for now), and executing "ant pdf". Issues still to be resolved: - PDF generation encounters several warnings about missing fonts (bold versions of Symbol and ZapfDingbats), and a couple of locations where the page content exceeds the defined content area. - Due to issues within Apache FOP, PDF generation emits a substantial amount of output that is not easily suppressed without losing important warning information. - Apache FOP's interface to ANT does not expose a way to set the font base directory. The current configuration does work under Mac OSX, but further testing on Windows will need to be done to determine if the relative paths defined continue to work. The workaround is for Windows users to customize the fop-config.xml to provide absolute system paths to the required fonts. - HTML generation needs further browser testing, and exhibits broken navigation on iOS browsers within the TOC sidebar. - A number of PDF and HTML presentation tweaks still need to be made, for example: sidebars, gui* DocBook tags, whitespace, section separation, etc. |