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