1
0

index-xoxo.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>S5: An Introduction</title>
  6. <!-- metadata -->
  7. <meta name="generator" content="S5" />
  8. <meta name="version" content="S5 1.2a2" />
  9. <meta name="author" content="Eric A. Meyer" />
  10. <meta name="company" content="Complex Spiral Consulting" />
  11. <!-- configuration parameters -->
  12. <meta name="defaultView" content="slideshow" />
  13. <meta name="controlVis" content="hidden" />
  14. <!-- style sheet links -->
  15. <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
  16. <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
  17. <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
  18. <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
  19. <!-- embedded styles -->
  20. <style type="text/css" media="all">
  21. .imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
  22. #anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
  23. #anim img {position: absolute; top: 42px; left: 24px;}
  24. img#me01 {top: 0; left: 0;}
  25. img#me02 {left: 23px;}
  26. img#me04 {top: 44px;}
  27. img#me05 {top: 43px;left: 36px;}
  28. </style>
  29. <!-- S5 JS -->
  30. <script src="ui/default/slides.js" type="text/javascript"></script>
  31. </head>
  32. <body>
  33. <div class="layout">
  34. <div id="controls"><!-- DO NOT EDIT --></div>
  35. <div id="currentSlide"><!-- DO NOT EDIT --></div>
  36. <div id="header"></div>
  37. <div id="footer">
  38. <h1>S5 Testbed</h1>
  39. <h2>Your computer &#8226; Today's date</h2>
  40. </div>
  41. </div>
  42. <ol class="xoxo presentation">
  43. <li class="slide">
  44. <h1>S5 Testbed</h1>
  45. <h3>Eric A. Meyer</h3>
  46. <h4><a href="http://www.complexspiral.com/" rel="external">Complex Spiral Consulting</a></h4>
  47. <div class="handout"></div>
  48. </li>
  49. <li class="slide">
  50. <h1>What Is S5?</h1>
  51. <ul>
  52. <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>
  53. <li>One XHTML document provides all of the slide show's content</li>
  54. <li>CSS handles the layout and look of the slides</li>
  55. <li>JavaScript handles the dynamic aspects of the show</li>
  56. <li>That's all there is to it! (<a href="#slide10">skip to summary</a>; demonstrates links internal to the slide show)</li>
  57. </ul>
  58. <div class="notes">
  59. <ul>
  60. <li>I have notes here!</li>
  61. <li>Keen.</li>
  62. <li>Remember to tell people that notes are a new feature in 1.2</li>
  63. </ul>
  64. </div>
  65. </li>
  66. <li class="slide">
  67. <h1>Operatic Origins</h1>
  68. <ul>
  69. <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>
  70. <li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
  71. <li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
  72. <li>Highly efficient, but highly browser centric...</li>
  73. </ul>
  74. <div class="notes">
  75. <ul>
  76. <li>S5 and OperaShow diverged greatly in S5 1.1</li>
  77. <li>S5 1.2 should (we hope) bring them into harmony once more</li>
  78. </ul>
  79. </div>
  80. </li>
  81. <li class="slide">
  82. <h1>Incremental Display</h1>
  83. <ul class="incremental show-first">
  84. <li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
  85. <li>Bullet points are revealed one by one
  86. <ul class="incremental">
  87. <li>All based on class name of <code>inc</code></li>
  88. <li>Lists can be classed to make items appear individually</li>
  89. <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>
  90. </ul>
  91. </li>
  92. <li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
  93. </ul>
  94. </li>
  95. <li class="slide">
  96. <h1>Incremental Display II</h1>
  97. <ul class="incremental">
  98. <li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
  99. <li>Bullet points are revealed one by one
  100. <ul>
  101. <li>All based on class name of <code>incremental</code></li>
  102. <li>Lists can be classed to make items appear individually</li>
  103. <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>
  104. </ul>
  105. </li>
  106. <li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
  107. <li>Now to move on to other test slides!</li>
  108. </ul>
  109. </li>
  110. <li class="slide">
  111. <h1>PNG Alpha Tests</h1>
  112. <div style="width: 400px; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
  113. <p>DIV with PNG background followed by foreground PNG</p>
  114. <img src="ui/bg-shade.png" alt="" title="A translucent image" />
  115. </div>
  116. <div style="width: 100%; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
  117. <p>DIV with PNG background followed by foreground PNG</p>
  118. <img src="ui/bg-shade.png" alt="" title="A translucent image" />
  119. </div>
  120. </li>
  121. <li class="slide">
  122. <h1>S5 Default File Structure</h1>
  123. <p style="text-align: center;">
  124. <img src="pix/s5filemap.png" alt="" title="At a Glance" />
  125. </p>
  126. </li>
  127. <li class="slide">
  128. <h1>S5 Themes</h1>
  129. <p class="imgcon">
  130. <img src="pix/S501.jpg" alt="" title="Default" />
  131. <img src="pix/S502.jpg" alt="" title="I18N" />
  132. <img src="pix/S503.jpg" alt="" title="Blue" />
  133. <img src="pix/S504.jpg" alt="" title="Flower" />
  134. (one way of presenting multiple graphics)
  135. </p>
  136. </li>
  137. <li class="slide">
  138. <h1>Incremental S5 Themes</h1>
  139. <p class="imgcon">
  140. <img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
  141. <img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
  142. <img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
  143. <img src="pix/S504.jpg" alt="" title="Flower" class="incremental" />
  144. (one by one!)
  145. </p>
  146. </li>
  147. <li class="slide">
  148. <h1>Incremental Animation</h1>
  149. <ul>
  150. <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>
  151. </ul>
  152. <p class="imgcon" id="anim">
  153. <img src="pix/mememe01.png" id="me01" alt="" />
  154. <img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
  155. <img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
  156. <img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
  157. <img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
  158. </p>
  159. </li>
  160. <li class="slide">
  161. <h1>In Summary</h1>
  162. <ul>
  163. <li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
  164. <li>The S5 format is OSF 1.0 compatible</li>
  165. <li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
  166. </ul>
  167. </li>
  168. </ol>
  169. </body>
  170. </html>