|
252
|
1 |
<?xml version="1.0" encoding="utf-8"?>
|
|
|
2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
3 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
4 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">
|
|
|
5 |
<head>
|
|
|
6 |
<meta name="generator" content=
|
|
|
7 |
"HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org" />
|
|
|
8 |
<title>HTML Slidy</title>
|
|
|
9 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
10 |
<meta name="copyright" content=
|
|
|
11 |
"Copyright © 2005 W3C (MIT, ERCIM, Keio)" />
|
|
|
12 |
<meta name="font-size-adjustment" content="-2" />
|
|
|
13 |
<link rel="stylesheet" href="slidy.css" type="text/css"
|
|
|
14 |
media="screen, projection, print" />
|
|
|
15 |
<link rel="stylesheet" href="w3c-blue.css" type="text/css"
|
|
|
16 |
media="screen, projection, print" />
|
|
|
17 |
<script src="slidy.js" type="text/javascript">
|
|
|
18 |
</script>
|
|
|
19 |
</head>
|
|
|
20 |
<body>
|
|
|
21 |
<div class="background"><img alt="" id="head-icon"
|
|
|
22 |
src="icon-blue.png" /><object id="head-logo"
|
|
|
23 |
data="w3c-logo-blue.svg" type="image/svg+xml"
|
|
|
24 |
title="W3C logo"><a href="http://www.w3.org/"><img
|
|
|
25 |
alt="W3C logo" id="head-logo-fallback"
|
|
|
26 |
src="w3c-logo-blue.gif" /></a></object></div>
|
|
|
27 |
|
|
|
28 |
<div class="background slanty">
|
|
|
29 |
<img src="w3c-logo-slanted.jpg" alt="slanted W3C logo" />
|
|
|
30 |
</div>
|
|
|
31 |
<div class="slide cover title">
|
|
|
32 |
<!-- hidden style graphics to ensure they are saved with other content -->
|
|
|
33 |
<img class="hidden" src="../Slidy/bullet.png" alt="" />
|
|
|
34 |
<img class="hidden" src="../Slidy/fold.gif" alt="" />
|
|
|
35 |
<img class="hidden" src="../Slidy/unfold.gif" alt="" />
|
|
|
36 |
<img class="hidden" src="../Slidy/fold-dim.gif" alt="" />
|
|
|
37 |
<img class="hidden" src="../Slidy/nofold-dim.gif" alt="" />
|
|
|
38 |
<img class="hidden" src="../Slidy/unfold-dim.gif" alt="" />
|
|
|
39 |
<img class="hidden" src="../Slidy/bullet-fold.gif" alt="" />
|
|
|
40 |
<img class="hidden" src="../Slidy/bullet-unfold.gif" alt="" />
|
|
|
41 |
<img class="hidden" src="../Slidy/bullet-fold-dim.gif" alt="" />
|
|
|
42 |
<img class="hidden" src="../Slidy/bullet-nofold-dim.gif" alt="" />
|
|
|
43 |
<img class="hidden" src="../Slidy/bullet-unfold-dim.gif" alt="" />
|
|
|
44 |
|
|
|
45 |
<img src="keys.jpg" alt=
|
|
|
46 |
"Cover page images (keys)" class="cover" /><br clear="all" />
|
|
|
47 |
<h1>HTML Slidy: Slide Shows in XHTML</h1>
|
|
|
48 |
|
|
|
49 |
<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
|
|
|
50 |
<<a href="mailto:dsr@w3.org">dsr@w3.org</a>><br />
|
|
|
51 |
<br />
|
|
|
52 |
<br />
|
|
|
53 |
<br />
|
|
|
54 |
<br /><em>Hit the space bar for next slide</em></p>
|
|
|
55 |
</div>
|
|
|
56 |
|
|
|
57 |
<div class="slide">
|
|
|
58 |
<h1>Slide Shows in XHTML</h1>
|
|
|
59 |
|
|
|
60 |
<ul>
|
|
|
61 |
<li>You can now create accessible slide shows with ease</li>
|
|
|
62 |
|
|
|
63 |
<li>Works across browsers and is operated like PowerPoint
|
|
|
64 |
|
|
|
65 |
<ul>
|
|
|
66 |
<li>Advance to next slide with mouse click or space bar</li>
|
|
|
67 |
|
|
|
68 |
<li>Move forward/backward between slides with Cursor Left,
|
|
|
69 |
Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
|
|
|
70 |
keys</li>
|
|
|
71 |
|
|
|
72 |
<li><strong>Home</strong> key for first slide, <strong>End</strong>
|
|
|
73 |
key for last slide</li>
|
|
|
74 |
|
|
|
75 |
<li>The "<strong>C</strong>" key for an automatically generated
|
|
|
76 |
table of contents (or click on "contents" on the toolbar)</li>
|
|
|
77 |
|
|
|
78 |
<li>Function <strong>F11</strong> to go full screen and back</li>
|
|
|
79 |
|
|
|
80 |
<li>The "<strong>F</strong>" key toggles the display of the footer</li>
|
|
|
81 |
|
|
|
82 |
<li>The "<strong>A</strong>" key toggles display of current vs all slides
|
|
|
83 |
|
|
|
84 |
<ul>
|
|
|
85 |
<li>Use the "A" key when you want to view or print all slides</li>
|
|
|
86 |
|
|
|
87 |
<li>Try it now to see how to include notes for handouts (this is
|
|
|
88 |
explained in the notes following this slide)</li>
|
|
|
89 |
</ul>
|
|
|
90 |
</li>
|
|
|
91 |
|
|
|
92 |
<li>Font sizes automatically adapt to browser window size
|
|
|
93 |
|
|
|
94 |
<ul>
|
|
|
95 |
<li>use <strong>S</strong> and <strong>B</strong> keys for
|
|
|
96 |
manual control (or < and >, or the <strong>-</strong> and
|
|
|
97 |
<strong>+</strong> keys on the number pad</li>
|
|
|
98 |
<li>See also the <a href="#(13)">use of the meta element for
|
|
|
99 |
adjusting the default Slidy behavior</a></li>
|
|
|
100 |
</ul>
|
|
|
101 |
</li>
|
|
|
102 |
|
|
|
103 |
<li>Switching off JavaScript reveals all slides</li>
|
|
|
104 |
</ul>
|
|
|
105 |
</li>
|
|
|
106 |
|
|
|
107 |
<li><em>Now move to next slide to see how it works</em></li>
|
|
|
108 |
</ul>
|
|
|
109 |
|
|
|
110 |
<p class="copyright"><a rel="Copyright" href=
|
|
|
111 |
"http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" shape=
|
|
|
112 |
"rect">Copyright</a> © 2005-2006 <a href="/"><acronym title=
|
|
|
113 |
"World Wide Web Consortium">W3C</acronym></a> <sup>®</sup>
|
|
|
114 |
(<a href="http://www.csail.mit.edu/"><acronym title=
|
|
|
115 |
"Massachusetts Institute of Technology">MIT</acronym></a>, <a href=
|
|
|
116 |
"http://www.ercim.org/"><acronym title=
|
|
|
117 |
"European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
|
118 |
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights
|
|
|
119 |
Reserved.</p>
|
|
|
120 |
</div>
|
|
|
121 |
|
|
|
122 |
<div class="handout">
|
|
|
123 |
<p>For handouts, its often useful to include extra notes using a
|
|
|
124 |
div element with class="handout" following each slide, as in:</p>
|
|
|
125 |
|
|
|
126 |
<pre>
|
|
|
127 |
<div class="slide">
|
|
|
128 |
<em>... your slide content ...</em>
|
|
|
129 |
</div>
|
|
|
130 |
|
|
|
131 |
<div class="handout">
|
|
|
132 |
<em>... stuff that only appears in the handouts ...</em>
|
|
|
133 |
</div>
|
|
|
134 |
</pre>
|
|
|
135 |
</div>
|
|
|
136 |
|
|
|
137 |
<div class="slide">
|
|
|
138 |
<h1>What you need to do</h1>
|
|
|
139 |
|
|
|
140 |
<ul>
|
|
|
141 |
<li>Each presentation is a single XHTML file</li>
|
|
|
142 |
|
|
|
143 |
<li>Each slide is enclosed in <em><div class="slide"> ...
|
|
|
144 |
</div></em>
|
|
|
145 |
|
|
|
146 |
<ul>
|
|
|
147 |
<li>The div element will be created automatically for h1
|
|
|
148 |
elements that are direct children of the body element.</li>
|
|
|
149 |
</ul>
|
|
|
150 |
|
|
|
151 |
</li>
|
|
|
152 |
|
|
|
153 |
<li>Use regular markup within each slide</li>
|
|
|
154 |
|
|
|
155 |
<li>The document head includes two links:
|
|
|
156 |
<ul>
|
|
|
157 |
<li>The slide show style sheet:
|
|
|
158 |
<a href=
|
|
|
159 |
"http://www.w3.org/Talks/Tools/Slidy/slidy.css">http://www.w3.org/Talks/Tools/Slidy/slidy.css</a></li>
|
|
|
160 |
|
|
|
161 |
<li>The slide show script: <a href=
|
|
|
162 |
"http://www.w3.org/Talks/Tools/Slidy/slidy.js">http://www.w3.org/Talks/Tools/Slidy/slidy.js</a></li>
|
|
|
163 |
|
|
|
164 |
<li>Or you can link to the compressed version of the script which is about
|
|
|
165 |
one seventh the size, see <a href=
|
|
|
166 |
"http://www.w3.org/Talks/Tools/Slidy/slidy.js.gz">http://www.w3.org/Talks/Tools/Slidy/slidy.js.gz</a></li>
|
|
|
167 |
<li>If you are using XHTML, remember to use </script> and
|
|
|
168 |
</style> as per <a
|
|
|
169 |
href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li>
|
|
|
170 |
</ul>
|
|
|
171 |
</li>
|
|
|
172 |
</ul>
|
|
|
173 |
|
|
|
174 |
<pre>
|
|
|
175 |
<?xml version="1.0" encoding="utf-8"?>
|
|
|
176 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
|
177 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
178 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
|
179 |
<head>
|
|
|
180 |
<title>Slide Shows in XHTML</title>
|
|
|
181 |
<meta name="copyright"
|
|
|
182 |
content="Copyright &#169; 2005 your copyright notice" />
|
|
|
183 |
<link rel="stylesheet" type="text/css" media="screen, projection, print"
|
|
|
184 |
href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" />
|
|
|
185 |
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
|
|
|
186 |
type="text/javascript"></script>
|
|
|
187 |
<style type="text/css">
|
|
|
188 |
<!-- your custom style rules -->
|
|
|
189 |
</style>
|
|
|
190 |
</head>
|
|
|
191 |
<body>
|
|
|
192 |
... your slides marked up in XHTML ...
|
|
|
193 |
</body>
|
|
|
194 |
</html>
|
|
|
195 |
</pre>
|
|
|
196 |
</div>
|
|
|
197 |
|
|
|
198 |
<div class="slide">
|
|
|
199 |
<h1>To get the W3C Blue Style</h1>
|
|
|
200 |
|
|
|
201 |
<p>The head element should include the following link to the style
|
|
|
202 |
sheet:</p>
|
|
|
203 |
|
|
|
204 |
<pre>
|
|
|
205 |
<link rel="stylesheet" type="text/css" media="screen, projection, print"
|
|
|
206 |
href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css" />
|
|
|
207 |
</pre>
|
|
|
208 |
|
|
|
209 |
<p>The body element's content should start with the following
|
|
|
210 |
markup:</p>
|
|
|
211 |
|
|
|
212 |
<pre>
|
|
|
213 |
<div class="background">
|
|
|
214 |
<img id="head-icon" alt="graphic with four colored squares"
|
|
|
215 |
src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" />
|
|
|
216 |
<object id="head-logo" title="W3C logo" type="image/svg+xml"
|
|
|
217 |
data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.svg"><img
|
|
|
218 |
src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif"
|
|
|
219 |
alt="W3C logo" id="head-logo-fallback" /></object>
|
|
|
220 |
</div>
|
|
|
221 |
</pre>
|
|
|
222 |
|
|
|
223 |
<p>This adds the logos on the top left and right corners of the
|
|
|
224 |
slide.</p>
|
|
|
225 |
|
|
|
226 |
<p>You are of course welcome to create your own slide designs.
|
|
|
227 |
You can provide different styles and backgrounds for
|
|
|
228 |
different slides (more details later).</p>
|
|
|
229 |
|
|
|
230 |
<p>Use the <em>meta element</em> with <em>name="copyright"</em>
|
|
|
231 |
for use in the slide show footer:</p>
|
|
|
232 |
|
|
|
233 |
<pre>
|
|
|
234 |
<meta name="copyright"
|
|
|
235 |
content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
|
|
|
236 |
</pre>
|
|
|
237 |
</div>
|
|
|
238 |
|
|
|
239 |
<div class="slide">
|
|
|
240 |
<h1>To use it off-line</h1>
|
|
|
241 |
|
|
|
242 |
<ul>
|
|
|
243 |
<li>You can download <a href="slidy.zip">slidy.zip</a> and unzip
|
|
|
244 |
it to create a Slidy directory on your machine</li>
|
|
|
245 |
|
|
|
246 |
<li>If you have cvs access to the W3C site you can check out the Slidy
|
|
|
247 |
directory</li>
|
|
|
248 |
|
|
|
249 |
<li>Remember to periodically check for updates</li>
|
|
|
250 |
|
|
|
251 |
<li>You then have two choices:
|
|
|
252 |
|
|
|
253 |
<ol>
|
|
|
254 |
<li>Use relative URIs depending on your local setup to access the
|
|
|
255 |
appropriate files. Use the same directory structure as on the W3C
|
|
|
256 |
server, ie, ".../2005/Talks/...".</li>
|
|
|
257 |
|
|
|
258 |
<li>Run a Web server on your machine so that the directory above
|
|
|
259 |
can be accessed via <code>http://localhost/Talks/Tools/Slidy</code>
|
|
|
260 |
and use the URIs of the form "/Talks/Tools/Slidy/slidy.css",
|
|
|
261 |
"/Talks/Tools/Slidy/slidy.js".</li>
|
|
|
262 |
</ol></li>
|
|
|
263 |
|
|
|
264 |
<li>In both cases you can then publish your files on the W3C server
|
|
|
265 |
unchanged.</li>
|
|
|
266 |
|
|
|
267 |
<li><strong>NOTE</strong> Internet Explorer on Windows XP now disables
|
|
|
268 |
scripting for web pages loaded directly from the local file system,
|
|
|
269 |
a work around is to use another browser, e.g. Firefox or Opera</li>
|
|
|
270 |
|
|
|
271 |
<li>Please feel free to create your own designs, and help us to build
|
|
|
272 |
a gallery of Slidy styles.</li>
|
|
|
273 |
|
|
|
274 |
<li>Here is a <a href="template.html">variant</a>
|
|
|
275 |
on the W3C Blue style.</li>
|
|
|
276 |
|
|
|
277 |
<li>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006)
|
|
|
278 |
uses a notebook themed style</li>
|
|
|
279 |
</ul>
|
|
|
280 |
</div>
|
|
|
281 |
|
|
|
282 |
<div class="slide slanty">
|
|
|
283 |
<h1>Generate a Title Page</h1>
|
|
|
284 |
|
|
|
285 |
<p>If you want a separate title page with the W3C blue style, the
|
|
|
286 |
first slide should be as follows:</p>
|
|
|
287 |
|
|
|
288 |
<pre>
|
|
|
289 |
<div class="slide cover">
|
|
|
290 |
<img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg"
|
|
|
291 |
alt="Cover page images (keys)" class="cover" />
|
|
|
292 |
<br clear="all" />
|
|
|
293 |
<h1>HTML Slidy: Slide Shows in XHTML</h1>
|
|
|
294 |
<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a>
|
|
|
295 |
<a href="mailto:dsr@w3.org">dsr@w3.org</a></p>
|
|
|
296 |
</div>
|
|
|
297 |
</pre>
|
|
|
298 |
|
|
|
299 |
<p>The <a
|
|
|
300 |
href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css">w3c-blue.css</a>
|
|
|
301 |
style sheet looks for the classes "slide" and "cover" on div
|
|
|
302 |
and img elements using the CSS selector <em>div.slide.cover</em></p>
|
|
|
303 |
|
|
|
304 |
<p>This technique can be used to assign your slides to different
|
|
|
305 |
classes with a different appearence for each such class.</p>
|
|
|
306 |
|
|
|
307 |
<p>Slidy also allows you to use different background markup for
|
|
|
308 |
different slides, based upon shared class names, as in "foo" below.
|
|
|
309 |
Backgrounds without additional class names are always shown except
|
|
|
310 |
when the slide isn't transparent. You may need to tweak your
|
|
|
311 |
custom style sheet.</p>
|
|
|
312 |
|
|
|
313 |
<pre>
|
|
|
314 |
<div class="background foo">
|
|
|
315 |
... background content ...
|
|
|
316 |
<div>
|
|
|
317 |
|
|
|
318 |
...
|
|
|
319 |
|
|
|
320 |
<div class="slide foo">
|
|
|
321 |
... slide content ...
|
|
|
322 |
<div>
|
|
|
323 |
</pre>
|
|
|
324 |
</div>
|
|
|
325 |
|
|
|
326 |
<div class="slide">
|
|
|
327 |
<h1>Incremental display of slide contents</h1>
|
|
|
328 |
|
|
|
329 |
<p>For incremental display, use class="incremental", for
|
|
|
330 |
instance:</p>
|
|
|
331 |
|
|
|
332 |
<ul class="incremental">
|
|
|
333 |
<li>First bullet point</li>
|
|
|
334 |
|
|
|
335 |
<li>Second bullet point</li>
|
|
|
336 |
|
|
|
337 |
<li>Third bullet point</li>
|
|
|
338 |
</ul>
|
|
|
339 |
|
|
|
340 |
<p class="incremental">which is marked up as follows:</p>
|
|
|
341 |
|
|
|
342 |
<pre class="incremental">
|
|
|
343 |
<ul class="incremental">
|
|
|
344 |
<li>First bullet point</li>
|
|
|
345 |
<li>Second bullet point</li>
|
|
|
346 |
<li>Third bullet point</li>
|
|
|
347 |
</ul>
|
|
|
348 |
|
|
|
349 |
<p class="incremental">which is marked up as follows:</p>
|
|
|
350 |
|
|
|
351 |
<pre class="incremental">
|
|
|
352 |
...
|
|
|
353 |
</pre>
|
|
|
354 |
</pre>
|
|
|
355 |
|
|
|
356 |
<div class="footnote">
|
|
|
357 |
<p>An element is incrementally revealed if its parent element has
|
|
|
358 |
class="incremental" or if itself has that attribute. Text nodes are
|
|
|
359 |
not elements and are revealed when their parent element is revealed.
|
|
|
360 |
You can use class="incremental" on any element except for <br />.
|
|
|
361 |
Use class="non-incremental" to override the effect of setting the
|
|
|
362 |
parent element's class to incremental.</p>
|
|
|
363 |
|
|
|
364 |
<p>Note: you will see a red asterisk on the left of the toolbar
|
|
|
365 |
when there is still something more to reveal.</p>
|
|
|
366 |
</div>
|
|
|
367 |
</div>
|
|
|
368 |
|
|
|
369 |
<div class="slide">
|
|
|
370 |
<h1>Create outline lists with hidden content</h1>
|
|
|
371 |
|
|
|
372 |
<p>You can make your bullet points or numbered list items
|
|
|
373 |
into outlines that you can expand or collapse</p>
|
|
|
374 |
|
|
|
375 |
<ul class="outline">
|
|
|
376 |
<li>Just add <em>class="outline"</em> to the ul or ol
|
|
|
377 |
element. Click on this list item for more details.
|
|
|
378 |
|
|
|
379 |
<ul>
|
|
|
380 |
<li>The Slidy script will then treat the list
|
|
|
381 |
as an outline list.</li>
|
|
|
382 |
<li>Clicking on outline list items will expand/collapse
|
|
|
383 |
block-level elements within that list item.</li>
|
|
|
384 |
<li>Click on the above to make this list item
|
|
|
385 |
collapse again.</li>
|
|
|
386 |
</ul>
|
|
|
387 |
</li>
|
|
|
388 |
<li>Users will then see expand/collapse icons as appropriate
|
|
|
389 |
and may click anywhere on the list item to change its state.
|
|
|
390 |
This particular list item can't be expanded or collapsed.</li>
|
|
|
391 |
<li class="expand">Add class="expand" to any li elements that
|
|
|
392 |
you want to start in an expanded state.
|
|
|
393 |
|
|
|
394 |
<ul>
|
|
|
395 |
<li>By default Slidy hides all the block level elements within the
|
|
|
396 |
outline list items unless you have specified class="expand".</li>
|
|
|
397 |
<li>Such pre-expanded items can be collapsed by clicking on them.</li>
|
|
|
398 |
</ul>
|
|
|
399 |
</li>
|
|
|
400 |
<li>Note expand/collapse icon highlighting requires browser
|
|
|
401 |
support for :hover which isn't supported by IE6.
|
|
|
402 |
|
|
|
403 |
<ul>
|
|
|
404 |
<li>Microsoft says it will be supported by IE7 along with
|
|
|
405 |
many fixes for other CSS woes in IE6.</li>
|
|
|
406 |
</ul>
|
|
|
407 |
</li>
|
|
|
408 |
</ul>
|
|
|
409 |
|
|
|
410 |
<pre>
|
|
|
411 |
<ol class='outline'>
|
|
|
412 |
<!-- topic 1 starts collapsed -->
|
|
|
413 |
<li>Topic 1
|
|
|
414 |
<ol>
|
|
|
415 |
<li>subtopic a</li>
|
|
|
416 |
<li>subtopic b</li>
|
|
|
417 |
</ol>
|
|
|
418 |
</li>
|
|
|
419 |
<!-- topic 2 starts expanded -->
|
|
|
420 |
<li class="expand">Topic 2
|
|
|
421 |
<ol>
|
|
|
422 |
<li>subtopic c</li>
|
|
|
423 |
<li>subtopic d</li>
|
|
|
424 |
</ol>
|
|
|
425 |
</li>
|
|
|
426 |
</ol>
|
|
|
427 |
</pre>
|
|
|
428 |
</div>
|
|
|
429 |
|
|
|
430 |
<!-- useful info at http://www.howtocreate.co.uk/wrongWithIE/ -->
|
|
|
431 |
<div class="slide">
|
|
|
432 |
<h1>Make your images scale with the browser window size</h1>
|
|
|
433 |
|
|
|
434 |
<p>For adaptive layout, use percentage widths on images, together
|
|
|
435 |
with CSS positioning:</p>
|
|
|
436 |
|
|
|
437 |
<ul>
|
|
|
438 |
<li>CSS positioning is simpler and more reliable than using
|
|
|
439 |
tables</li>
|
|
|
440 |
</ul>
|
|
|
441 |
|
|
|
442 |
<pre>
|
|
|
443 |
<div class="slide">
|
|
|
444 |
<h1>Analysts - "Open standards programming will become
|
|
|
445 |
mainstream, focused around VoiceXML"</h1>
|
|
|
446 |
<!-- use CSS positioning and scaling for adaptive layout -->
|
|
|
447 |
<img src="trends.png" width="50%" style="float:left"
|
|
|
448 |
alt="projected growth of VoiceXML" />
|
|
|
449 |
|
|
|
450 |
<blockquote style="float:right;width: 35%">
|
|
|
451 |
VoiceXML will dominate the voice environment, due to its
|
|
|
452 |
flexibility and eventual multimodal capabilities
|
|
|
453 |
</blockquote><br clear="all" />
|
|
|
454 |
|
|
|
455 |
<p style="text-align:center">Source Data Monitor, March
|
|
|
456 |
2004</p>
|
|
|
457 |
</div>
|
|
|
458 |
</pre>
|
|
|
459 |
|
|
|
460 |
<p>To work around a CSS rendering bug in IE relating
|
|
|
461 |
to margins, you can set display:inline on floated elements.</p>
|
|
|
462 |
</div>
|
|
|
463 |
|
|
|
464 |
<div class="slide">
|
|
|
465 |
<h1>Incremental display of layered images</h1>
|
|
|
466 |
|
|
|
467 |
<p>These can be marked up using CSS relative positioning, e.g.</p>
|
|
|
468 |
|
|
|
469 |
<pre>
|
|
|
470 |
<div class="incremental"
|
|
|
471 |
style="margin-left: 4em; position: relative">
|
|
|
472 |
<img src="face1.gif" alt="face"
|
|
|
473 |
style="position: static; vertical-align: bottom"/>
|
|
|
474 |
<img src="face2.gif" alt="eyes"
|
|
|
475 |
style="position: absolute; left: 0; top: 0" />
|
|
|
476 |
<img src="face3.gif" alt="nose"
|
|
|
477 |
style="position: absolute; left: 0; top: 0" />
|
|
|
478 |
<img src="face4.gif" alt="mouth"
|
|
|
479 |
style="position: absolute; left: 0; top: 0" />
|
|
|
480 |
</div>
|
|
|
481 |
</pre>
|
|
|
482 |
|
|
|
483 |
<p style="font-size: smaller;">You should also use transparent GIF
|
|
|
484 |
images to avoid the IE/Win bug for alpha channel in PNG. A fix is
|
|
|
485 |
expected in IE 7. A <a href=
|
|
|
486 |
"http://www.skyzyx.com/scripts/sleight.php">work around</a> is
|
|
|
487 |
available on skyzyx.com. My thanks to <a href=
|
|
|
488 |
"http://www.webstandards.org/act/acid2/">ACID2</a> for the
|
|
|
489 |
graphics.</p>
|
|
|
490 |
|
|
|
491 |
<div class="incremental" style=
|
|
|
492 |
"margin-left: 4em; position: relative;"><img src="face1.gif" alt=
|
|
|
493 |
"face" style="position: static; vertical-align: bottom;" />
|
|
|
494 |
<img src="face2.gif" alt="eyes" style=
|
|
|
495 |
"position: absolute; left: 0pt; top: 0pt;" /> <img src="face3.gif"
|
|
|
496 |
alt="nose" style="position: absolute; left: 0pt; top: 0pt;" />
|
|
|
497 |
<img src="face4.gif" alt="mouth" style=
|
|
|
498 |
"position: absolute; left: 0pt; top: 0pt;" /></div>
|
|
|
499 |
</div>
|
|
|
500 |
|
|
|
501 |
<div class="slide">
|
|
|
502 |
<h1>Include SVG Content</h1>
|
|
|
503 |
|
|
|
504 |
<p>Inclusion of SVG content can be done using the object element,
|
|
|
505 |
for example:</p>
|
|
|
506 |
|
|
|
507 |
<div style="text-align: center;"><object data="example.svg" type=
|
|
|
508 |
"image/svg+xml" title="Indian Office logo" height="10%" width=
|
|
|
509 |
"50%"><img src="example.png" alt="Indian Office logo" width=
|
|
|
510 |
"50%" /></object></div>
|
|
|
511 |
|
|
|
512 |
<p>has been achieved by:</p>
|
|
|
513 |
|
|
|
514 |
<pre>
|
|
|
515 |
<object data="example.svg" type="image/svg+xml"
|
|
|
516 |
width="50%" height="10%" title="Indian Office logo">
|
|
|
517 |
<img src="example.png" width="50%"
|
|
|
518 |
alt="Indian Office logo" />
|
|
|
519 |
</object>
|
|
|
520 |
</pre>
|
|
|
521 |
|
|
|
522 |
<p>This ensures that the enclosed png is displayed when the browser
|
|
|
523 |
has no plugin installed or can't display SVG directly. Providing
|
|
|
524 |
such a fall back is very important! Don't forget the alt text for
|
|
|
525 |
people who can't see the image.</p>
|
|
|
526 |
|
|
|
527 |
<p>However, there are caveats, see the next slide!</p>
|
|
|
528 |
</div>
|
|
|
529 |
|
|
|
530 |
<div class="slide">
|
|
|
531 |
<h1>Caveats with SVG+object</h1>
|
|
|
532 |
|
|
|
533 |
<p>Adobe has recently withdrawn support for its SVG Viewer, so you are
|
|
|
534 |
recommended to consider <a
|
|
|
535 |
href="http://wiki.svg.org/Viewer_Implementations">alternatives</a>.
|
|
|
536 |
If you still using the Adobe SVG viewer you should be aware of bugs
|
|
|
537 |
when using the it with IE, Namely:</p>
|
|
|
538 |
|
|
|
539 |
<ul>
|
|
|
540 |
<li>Recent patches to Internet Explorer mean that the Adobe SVG Viewer
|
|
|
541 |
version 3.03 no longer works with IE6. You are therefore recommended
|
|
|
542 |
to uninstall version 3.03 and instead install <a
|
|
|
543 |
href="http://www.adobe.com/svg/viewer/install/beta.html">Adobe SVG Viewer
|
|
|
544 |
6.0 preview</a> if this is available to to you.</li>
|
|
|
545 |
|
|
|
546 |
<li>IE6 makes a <em>copy</em> of the SVG file on the local disc
|
|
|
547 |
when displaying it; but doesn't pass the original URI to the plugin</li>
|
|
|
548 |
|
|
|
549 |
<li>As a result relative references from within the SVG to external
|
|
|
550 |
resources (scripts, CSS, images, other SVG) will break.</li>
|
|
|
551 |
|
|
|
552 |
<li>The work around is to use absolute references within your SVG.</li>
|
|
|
553 |
|
|
|
554 |
<li>This problem doesn't effect Mozilla/Firefox. I don't know if
|
|
|
555 |
this was fixed for IE7.</li>
|
|
|
556 |
|
|
|
557 |
<li>On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
|
|
|
558 |
property, and if used on backgrounds will always show through other
|
|
|
559 |
content</li>
|
|
|
560 |
</ul>
|
|
|
561 |
|
|
|
562 |
<p>Recent versions of Firefox include native support for SVG, but there
|
|
|
563 |
is a bug with Firefox in which the wrong SVG image will sometimes be
|
|
|
564 |
shown when the page is reloaded. This is due to be fixed in Firefox 3.0.</p>
|
|
|
565 |
|
|
|
566 |
<p>Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't
|
|
|
567 |
support external style sheets or style elements within SVG. The work
|
|
|
568 |
around is to set the properties via style attributes on the
|
|
|
569 |
corresponding elements. In principle, browsers should honor the
|
|
|
570 |
version attribute and fall back to the alternative within the object
|
|
|
571 |
element if they don't support the version used by a given SVG file.</p>
|
|
|
572 |
|
|
|
573 |
<p><em>Are there any tools for downgrading SVG to SVG Tiny?</em></p>
|
|
|
574 |
</div>
|
|
|
575 |
|
|
|
576 |
<div class="slide">
|
|
|
577 |
<h1>Additional Remarks</h1>
|
|
|
578 |
|
|
|
579 |
<ul>
|
|
|
580 |
<li>Slides are auto-numbered on the slide show footer</li>
|
|
|
581 |
|
|
|
582 |
<li>You can link into the <a href="#(2)">middle</a> of a slide
|
|
|
583 |
show:
|
|
|
584 |
|
|
|
585 |
<ul>
|
|
|
586 |
<li>It works out which slide you want and hides the rest</li>
|
|
|
587 |
|
|
|
588 |
<li>You can even link between slides in the same slide show</li>
|
|
|
589 |
|
|
|
590 |
<li>Individual sides can be addressed with the syntax #(<em>slide
|
|
|
591 |
number</em>),<br />
|
|
|
592 |
e.g. slide 3 of this presentation is: <a href=
|
|
|
593 |
"#(3)">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
|
|
|
594 |
<ul>
|
|
|
595 |
<li>Previous versions of Slidy used square brackets, which will
|
|
|
596 |
also work.</li>
|
|
|
597 |
</ul></li>
|
|
|
598 |
<li>Note that the browser's back/forward buttons may not work as
|
|
|
599 |
you might expect due to browser problems.</li>
|
|
|
600 |
</ul>
|
|
|
601 |
</li>
|
|
|
602 |
|
|
|
603 |
<li>Adding "title" to the list of classes for div elements that serve
|
|
|
604 |
as title pages will render the corresponding entry in the table of
|
|
|
605 |
contents in bold italic text (press "C" now for an example)</li>
|
|
|
606 |
|
|
|
607 |
<li>If your slides have more content than normal, use a <em>meta
|
|
|
608 |
element</em> to request a smaller font
|
|
|
609 |
|
|
|
610 |
<ul>
|
|
|
611 |
<li>the following requests fonts to be one step smaller than
|
|
|
612 |
the Slidy default for the current window width, and positive
|
|
|
613 |
integers will make the fonts correspondingly larger</li>
|
|
|
614 |
</ul>
|
|
|
615 |
|
|
|
616 |
<pre>
|
|
|
617 |
<meta name="font-size-adjustment" content="-1" />
|
|
|
618 |
</pre>
|
|
|
619 |
|
|
|
620 |
<ul>
|
|
|
621 |
<li>Slidy uses JavaScript to dynamically set the font size on the
|
|
|
622 |
body element, but it is okay to specify relative font changes on
|
|
|
623 |
other elements within your own style sheet.</li>
|
|
|
624 |
</ul>
|
|
|
625 |
</li>
|
|
|
626 |
|
|
|
627 |
<li>You are encouraged to ensure your markup is valid. <a href=
|
|
|
628 |
"http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a> can be used
|
|
|
629 |
to find and correct common markup problems</li>
|
|
|
630 |
|
|
|
631 |
<li>The slide show script and style sheet can be used freely under
|
|
|
632 |
W3C's <a href=
|
|
|
633 |
"http://www.w3.org/Consortium/Legal/copyright-software">software
|
|
|
634 |
licensing</a> and <a href=
|
|
|
635 |
"http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
|
636 |
use</a> policies</li>
|
|
|
637 |
<li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
|
|
|
638 |
I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
|
|
|
639 |
on Slidy
|
|
|
640 |
(<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
|
|
|
641 |
</ul>
|
|
|
642 |
</div>
|
|
|
643 |
|
|
|
644 |
<div class="slide">
|
|
|
645 |
<h1>Localization</h1>
|
|
|
646 |
|
|
|
647 |
<p>Slidy now includes support for localization</p>
|
|
|
648 |
|
|
|
649 |
<ul>
|
|
|
650 |
<li>The tool bar is localized according to the language of the presentation</li>
|
|
|
651 |
<li>This is taken from the xml:lang or lang attributes on the html element</li>
|
|
|
652 |
<li>The <a href="http://www.w3.org/Talks/Tools/Slidy/help.html">help file</a> is
|
|
|
653 |
selected based upon your browser's language preferences</li>
|
|
|
654 |
<li>As of 17th March 2006, the languages supported are: English, Spanish and
|
|
|
655 |
Dutch</li>
|
|
|
656 |
<li>If you would like to contribute localizations for other languages, please
|
|
|
657 |
get in touch with Dave Raggett <dsr@w3.org></li>
|
|
|
658 |
<li>The following illustrates what was used for Spanish</li>
|
|
|
659 |
</ul>
|
|
|
660 |
<pre>
|
|
|
661 |
// for each language there is an associative array
|
|
|
662 |
var strings_es = {
|
|
|
663 |
"slide":"pág.",
|
|
|
664 |
"help?":"Ayuda",
|
|
|
665 |
"contents?":"Índice",
|
|
|
666 |
"table of contents":"tabla de contenidos",
|
|
|
667 |
"Table of Contents":"Tabla de Contenidos",
|
|
|
668 |
"restart presentation":"Reiniciar presentación",
|
|
|
669 |
"restart?":"Inicio"
|
|
|
670 |
};
|
|
|
671 |
strings_es[helpText] =
|
|
|
672 |
"Utilice el ratón, barra espaciadora, teclas Izda/Dhca, " +
|
|
|
673 |
"o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.";
|
|
|
674 |
</pre>
|
|
|
675 |
</div>
|
|
|
676 |
|
|
|
677 |
<div class="slide">
|
|
|
678 |
<h1>Future Plans</h1>
|
|
|
679 |
|
|
|
680 |
<p>Recent additions have included a table of contents, and a way to
|
|
|
681 |
hide and reveal content in the spirit of outline lists. Further
|
|
|
682 |
work is anticipated on the following:</p>
|
|
|
683 |
|
|
|
684 |
<ul>
|
|
|
685 |
<li>Collecting a gallery of good looking slide themes
|
|
|
686 |
<ul>
|
|
|
687 |
<li>Opportunities for graphics designers!</li>
|
|
|
688 |
</ul>
|
|
|
689 |
</li>
|
|
|
690 |
<li>Getting SVG Tiny to work on IE without need for SVG plugin
|
|
|
691 |
<ul>
|
|
|
692 |
<li>Using scripts to dynamically convert SVG Tiny to VML</li>
|
|
|
693 |
</ul>
|
|
|
694 |
</li>
|
|
|
695 |
<li>Alpha version of wysiwyg slide editor (see <a
|
|
|
696 |
href="editor/editor-screenshot1.png">screenshot</a>)
|
|
|
697 |
<ul>
|
|
|
698 |
<li>Using contentEditable when available, otherwise
|
|
|
699 |
falling back to textarea and plain text conventions</li>
|
|
|
700 |
<li>Using XMLHttpRequest to dynamically reflect changes to server</li>
|
|
|
701 |
</ul>
|
|
|
702 |
</li>
|
|
|
703 |
<li>Mechanism for remotely driving Slidy as part of distributed meetings
|
|
|
704 |
<ul>
|
|
|
705 |
<li>Using XMLHttpRequest to listen for navigation commands</li>
|
|
|
706 |
<li>Using VoIP for accompanying audio and teleconferencing</li>
|
|
|
707 |
<li>Synchronizing recorded spoken presentation with currently viewed slide</li>
|
|
|
708 |
</ul>
|
|
|
709 |
</li>
|
|
|
710 |
<li>Filters from PowerPoint and Open Office
|
|
|
711 |
<ul>
|
|
|
712 |
<li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
|
|
|
713 |
</ul>
|
|
|
714 |
</li>
|
|
|
715 |
</ul>
|
|
|
716 |
|
|
|
717 |
<p>If you have comments, suggestions for improvements, or would
|
|
|
718 |
like to volunteer your help with further work on Slidy,
|
|
|
719 |
please contact <a href=
|
|
|
720 |
"http://www.w3.org/People/Raggett/">Dave Raggett</a> <<a href=
|
|
|
721 |
"mailto:dsr@w3.org">dsr@w3.org</a>></p>
|
|
|
722 |
</div>
|
|
|
723 |
|
|
|
724 |
<div class="slide">
|
|
|
725 |
<h1>Acknowledgements</h1>
|
|
|
726 |
|
|
|
727 |
<ul>
|
|
|
728 |
<li>My thanks to everyone who sent in bug reports and feature
|
|
|
729 |
requests</li>
|
|
|
730 |
<li>Opera Software for implementing CSS @media projection and
|
|
|
731 |
promoting the idea of using the Web for presentations with
|
|
|
732 |
<a href="http://www.opera.com/support/tutorials/operashow/">Opera
|
|
|
733 |
Show</a></li>
|
|
|
734 |
<li><a href="http://tantek.com/">Tantek Çelik</a> for his
|
|
|
735 |
pioneering work on applying JavaScript for slide presentations on
|
|
|
736 |
other browsers</li>
|
|
|
737 |
<li>Eric Meyer for taking this further with the excellent <a
|
|
|
738 |
href="http://www.meyerweb.com/eric/tools/s5/s5-intro.html">S5</a></li>
|
|
|
739 |
<li>W3C's <a href="http://dev.w3.org/cvsweb/slidemaker/">slidemaker
|
|
|
740 |
tool</a>, which uses a perl script to split an html file up into
|
|
|
741 |
one file per slide with navigation buttons</li>
|
|
|
742 |
<li>Early versions of <a href="http://www.w3.org/People/Raggett/tidy/">HTML
|
|
|
743 |
Tidy</a> which supported a means to create presentations via splitting
|
|
|
744 |
html files on h2 elements</li>
|
|
|
745 |
<li>Many sites with advice on JavaScript work arounds for browser
|
|
|
746 |
variations</li>
|
|
|
747 |
<li>Microsoft for pioneering contentEditable and XMLHTTP which
|
|
|
748 |
both provide tremendous opportunities for Web applications</li>
|
|
|
749 |
<li>Microsoft Office which provided the impetus for creating
|
|
|
750 |
Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
|
|
|
751 |
</ul>
|
|
|
752 |
|
|
|
753 |
<p class="smaller"><strong>Note</strong> that while Slidy and
|
|
|
754 |
S5 were developed independently, both support the use of the
|
|
|
755 |
class values "slide" and "handout" for div elements. Slidy doesn't
|
|
|
756 |
support the "layout" class featured in S5 and Opera Show, but
|
|
|
757 |
instead provides a more flexible alternative with the "background"
|
|
|
758 |
class, which enables different backgrounds on different slides.</p>
|
|
|
759 |
</div>
|
|
|
760 |
|
|
|
761 |
<div class="slide">
|
|
|
762 |
<h1>Acknowledgements</h1>
|
|
|
763 |
|
|
|
764 |
<p>The following people have contributed localizations:</p>
|
|
|
765 |
|
|
|
766 |
<ul>
|
|
|
767 |
<li>Emmanuelle Gutiérrez y Restrepo, Spanish</li>
|
|
|
768 |
<li>Ruud Steltenpool, Dutch</li>
|
|
|
769 |
<li>Beat Vontobel, German</li>
|
|
|
770 |
<li>Krzysztof Kotowicz, Polish</li>
|
|
|
771 |
<li>Tamas Horvath, Hungarian</li>
|
|
|
772 |
<li>Creso Moraes, Brazilian Portuguese</li>
|
|
|
773 |
<li>Giuseppe Scollo, Italian</li>
|
|
|
774 |
<li>Konstantinos Koukopoulos, Greek</li>
|
|
|
775 |
<li>Yoshikazu Sawa (澤 義和), Japanese</li>
|
|
|
776 |
</ul>
|
|
|
777 |
|
|
|
778 |
<p>The following people have contributed bug reports:</p>
|
|
|
779 |
|
|
|
780 |
<ul>
|
|
|
781 |
<li>Ivan Herman</li>
|
|
|
782 |
<li>Steve Bratt</li>
|
|
|
783 |
<li>Peter Patel-Schneider</li>
|
|
|
784 |
<li>Matthew Coller</li>
|
|
|
785 |
<li>Rune Heggtveit</li>
|
|
|
786 |
<li>Gopal Venkatesan</li>
|
|
|
787 |
</ul>
|
|
|
788 |
|
|
|
789 |
<p>Douglas Crockford for <a
|
|
|
790 |
href="http://www.crockford.com/javascript/jsmin.html">jsmin</a>
|
|
|
791 |
which was used to minify the script before compressing it with gzip.</p>
|
|
|
792 |
</div>
|
|
|
793 |
</body>
|
|
|
794 |
</html>
|