topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-slide-s5-intro.htm / htm



  <!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="lib-present-slide-s5-ui-default-slides.css" type="text/css" media="projection" id="slideProj" />
  <link rel="stylesheet" href="lib-present-slide-s5-ui-default-outline.css" type="text/css" media="screen" id="outlineStyle" />
  <link rel="stylesheet" href="lib-present-slide-s5-ui-default-print.css" type="text/css" media="print" id="slidePrint" />
  <link rel="stylesheet" href="lib-present-slide-s5-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="lib-present-slide-s5-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 &#8226; 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 &Ccedil;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>
  
  </div>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 21/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.