diff options
Diffstat (limited to 'stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html')
| -rwxr-xr-x | stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html | 201 |
1 files changed, 0 insertions, 201 deletions
diff --git a/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html b/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html deleted file mode 100755 index 4ca9fbcd7..000000000 --- a/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html +++ /dev/null @@ -1,201 +0,0 @@ -<!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> - -<ol class="xoxo presentation"> - -<li 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> -</li> - - -<li 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> - -</li> - - -<li 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> - -</li> - - -<li 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> -</li> - - -<li 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> -</li> - - -<li 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> -</li> - - -<li class="slide"> -<h1>S5 Default File Structure</h1> -<p style="text-align: center;"> -<img src="pix/s5filemap.png" alt="" title="At a Glance" /> -</p> -</li> - - -<li 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> -</li> - - -<li 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> -</li> - - -<li 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> -</li> - - -<li 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> -</li> - -</ol> - -</body> -</html> |