Mercurial > hg > Papers > 2010 > jsst-shinya

comparison presen/xoxo-s5-intro.html @ 15:b3b5bcbba089

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add slide: presen/index.html
author Ryoma SHINYA <shinya@firefly.cr.ie.u-ryukyu.ac.jp>
date Sat, 11 Sep 2010 23:46:30 +0900
parents
children
comparison
equal deleted inserted replaced
14:bd07b27b2b97 15:b3b5bcbba089
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>S5: An Introduction</title>
8 <!-- metadata -->
9 <meta name="generator" content="S5" />
10 <meta name="version" content="S5 1.1" />
11 <meta name="presdate" content="20050728" />
12 <meta name="author" content="Eric A. Meyer" />
13 <meta name="company" content="Complex Spiral Consulting" />
14 <!-- configuration parameters -->
15 <meta name="defaultView" content="slideshow" />
16 <meta name="controlVis" content="hidden" />
17 <!-- style sheet links -->
18 <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
19 <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
20 <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
21 <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
22 <!-- embedded styles -->
23 <style type="text/css" media="all">
24 .imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
25 #anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
26 #anim img {position: absolute; top: 42px; left: 24px;}
27 img#me01 {top: 0; left: 0;}
28 img#me02 {left: 23px;}
29 img#me04 {top: 44px;}
30 img#me05 {top: 43px;left: 36px;}
31 </style>
32 <!-- S5 JS -->
33 <script src="ui/default/slides.js" type="text/javascript"></script>
34 </head>
35 <body>
36
37 <div class="layout">
38 <div id="controls"><!-- DO NOT EDIT --></div>
39 <div id="currentSlide"><!-- DO NOT EDIT --></div>
40 <div id="header"></div>
41 <div id="footer">
42 <h1>S5 Testbed</h1>
43 <h2>Your computer &#8226; Today's date</h2>
44 </div>
45
46 </div>
47 <ol class="presentation xoxo">
48
49 <li class="slide">
50 <h1>S5: An Introduction</h1>
51 <h3>Eric A. Meyer</h3>
52 <h4><a href="http://www.complexspiral.com/">Complex Spiral Consulting</a></h4>
53 </li>
54
55
56 <li class="slide">
57 <h1>What Is S5?</h1>
58 <ul>
59 <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>
60 <li>One XHTML document provides all of the slide show's content</li>
61 <li>CSS handles the layout and look of the slides</li>
62 <li>JavaScript handles the dynamic aspects of the show</li>
63 <li>That's all there is to it!</li>
64 </ul>
65 </li>
66
67
68 <li class="slide">
69 <h1>Operatic Origins</h1>
70 <ul>
71 <li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/">Opera Show</a>, a projection-mode style sheet technology</li>
72 <li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
73 <li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
74 <li>Highly efficient, but highly browser centric...</li>
75 </ul>
76 </li>
77
78
79 <li class="slide">
80 <h1>Expanding The Field</h1>
81 <ul>
82 <li>When Opera 7.5 for OS X came out, the banner ads persisted in projection mode</li>
83 <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
84 <ul>
85 <li>Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficult</li>
86 <li>Navigation was only linear; no way to jump to an arbitrary slide</li>
87 <li>There was also no facility to "switch off" the slide show styles short of killing all CSS</li>
88 </ul>
89 </li>
90 <li>Motive and opportunity combined to point the way...</li>
91 </ul>
92 </li>
93
94
95 <li class="slide">
96 <h1>Where We Are Now</h1>
97 <ul>
98 <li>S5 builds on Tantek's scripts and ideas, with input and ideas from several other people</li>
99 <li>Each slide is enclosed in a classed element; IDs are dynamically assigned via JavaScript</li>
100 <li>Navigation menu is automatically built at run time</li>
101 <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>
102 <li>S5 can also run slide shows based on <a href="http://microformats.org/wiki/XOXO">XOXO</a></li>
103 </ul>
104 </li>
105
106
107 <li class="slide">
108 <h1>How It Works</h1>
109 <ul>
110 <li>Controls are...
111 <ul>
112 <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>
113 <li>Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right corner, accesskey "Z"</li>
114 <li>Toggle the slide styles: Click on the toggle button (to the left of the arrows), press "t", accesskey "T"</li>
115 </ul>
116 ...<a href="http://meyerweb.com/eric/tools/s5/features.html#controlchart" rel="external">plus more</a>!
117 </li>
118 <li>To invoke the navigation menu: mouse into the lower right corner of the slide (below the navigation arrows)</li>
119 </ul>
120 </li>
121
122
123 <li class="slide">
124 <h1>The Advantages</h1>
125 <ul>
126 <li>With one file, you get a slide show, a printable outline, and a screen presentation</li>
127 <li>Files are incredibly lightweight and compress easily</li>
128 <li>Thanks to being semantic XHTML, slideshow files are also highly accessible</li>
129 <li>New slide themes can be created simply by writing new style sheets</li>
130 <li>Unlike Opera Show, which has all of the above advantages, S5 works in multiple browsers</li>
131 </ul>
132 </li>
133
134
135 <li class="slide">
136 <h1>S5 Default File Structure</h1>
137 <p style="text-align: center;">
138 <img src="pix/s5filemap.png" alt="" title="At a Glance" />
139 </p>
140 </li>
141
142
143 <li class="slide">
144 <h1>S5 Themes</h1>
145 <p style="width: 520px; margin: 0 auto; text-align: center;">
146 <img src="pix/S501.jpg" alt="" title="Default" />
147 <img src="pix/S502.jpg" alt="" title="I18N" />
148 <img src="pix/S503.jpg" alt="" title="Blue" />
149 <img src="pix/S504.jpg" alt="" title="Flower" />
150 (just a sampling)
151 </p>
152 </li>
153
154
155 <li class="slide">
156 <h1>Features New to 1.1</h1>
157 <ul class="incremental">
158 <li>Incremental display of slide content</li>
159 <li>Font scaling based on window size</li>
160 <li>Support for PNG alpha channels in all supporting browsers, including IE/Win</li>
161 <li>Ability to jump to any slide, or skip a number of slides, via keyboard commands</li>
162 </ul>
163 </li>
164
165 <li class="slide">
166 <h1>Incremental Animation</h1>
167 <ul>
168 <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>
169 </ul>
170 <p class="imgcon" id="anim">
171 <img src="pix/mememe01.png" id="me01" alt="" />
172 <img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
173 <img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
174 <img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
175 <img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
176 </p>
177 </li>
178
179 <li class="slide">
180 <h1>Current Limitations</h1>
181 <ul>
182 <li>Only one author can be listed in the metadata</li>
183 <li>Opera falls back to use OperaShow; thus no extras (like the navigation menu or progress indication) are available</li>
184 <li>Images are not scaled along with the text when the window size changes</li>
185 </ul>
186 </li>
187
188
189 <li class="slide">
190 <h1>Open To The Public</h1>
191 <ul>
192 <li>S5 1.1 is released under an explicit Public Domain license</li>
193 <li>Contributors to S5 <strong>must</strong> be willing to accept those terms
194 <ul>
195 <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>
196 <li>On the other hand, anyone can freely use S5 for their own presentations or modify S5 to suit their needs</li>
197 </ul></li>
198 </ul>
199 </li>
200
201
202 <li class="slide">
203 <h1>In Summary</h1>
204 <ul>
205 <li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
206 <li>New themes are just a matter of writing a new style sheet</li>
207 <li>The S5 format is OSF 1.0 and XOXO compatible</li>
208 <li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
209 </ul>
210 </li>
211
212 </ol>
213
214 </body>
215 </html>