Mercurial > hg > Members > amothic > html

comparison seminar/20110802.html @ 1:23c1131ea61c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add S5
author Daichi TOMA <e085740@ie.u-ryukyu.ac.jp>
date Mon, 01 Aug 2011 15:54:10 +0900
parents
children 667ea58b05d2
comparison
equal deleted inserted replaced
0:5886962e7ba0 1:23c1131ea61c
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 (&raquo;)</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 (&raquo;)</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" />&nbsp;<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" />&nbsp;<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" />&nbsp;<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" />&nbsp;<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>