Navigation

← Previous Changeset
Next Changeset →

Changeset 4928

Timestamp:

13/05/08 17:25:59 (2 months ago)

Author:

jayfresh

Message:

SlidyTiddly?: changes to content and tweak to reorderTiddlerList so it handles an empty target tiddler

Files:

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

Trunk/contributors/JonathanLister/verticals/SlidyTiddly/Slidy/slidytest.html

r4927	r4928
9	9	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10	10	<meta name="copyright" content=
11		"Copyright Â© 200~~5 W3C (MIT, ERCIM, Keio)~~" />
	11	"Copyright Â© 2006 Dave Raggett" />
12	12	<meta name="font-size-adjustment" content=
13		"-2" />
	13	"1" />
14	14	<link rel="stylesheet" href="slidy.css" type="text/css"
15	15	media="screen, projection, print" />
16		<link rel="stylesheet" href="~~w3c-blue~~.css" type="text/css" media="screen, projection, print" />
	16	<link rel="stylesheet" href="notebook.css" type="text/css" media="screen, projection, print" />
17	17	<script src="slidy.js" charset="utf-8" type="text/javascript">
18	18	</script>
…	…
47	47	<img src="keys.jpg" alt=
48	48	"Cover page images (keys)" class="cover" /><br clear="all" />
49		<h1>HTML Slidy: Slide Shows in XHTML</h1>
50
51
52		<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
53		<<a href="mailto:dsr@w3.org">dsr@w3.org</a>><br>
54		<br>
55		<br>
56		<br>
57		<br><em>Hit the space bar for next slide</em></p>
	49	<h1>Web of Applications</h1>
	50
	51	<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>
	52	<<a href="mailto:dsr@w3.org">dsr@w3.org</a>></p>
	53	</div>
	54	<img src="sky.jpg" class="cover" alt="wispy clouds in a blue sky">
	55	<h2>Google, Mountain View<br>
	56	1st February 2006</h2>
58	57
59	58	</div>
60	59	<div class="slide">
61		<h1>What you need to do</h1>
62
63
64		<ul>
65		<li>Each presentation is a single XHTML file</li>
66
67		<li>Each slide is enclosed in <em><div class="slide"> ...
68		</div></em>
69
70		<ul>
71		<li>The div element will be created automatically for h1
72		elements that are direct children of the body element.</li>
73		</ul>
74
75		</li>
76
77		<li>Use regular markup within each slide</li>
78
79		<li>The document head includes two links:
80		<ul>
81		<li>The slide show style sheet:
82		<a href="http://www.w3.org/Talks/Tools/Slidy/slidy.css">http://www.w3.org/Talks/Tools/Slidy/slidy.css</a></li>
83
84		<li>The slide show script: <a href="http://www.w3.org/Talks/Tools/Slidy/slidy.js">http://www.w3.org/Talks/Tools/Slidy/slidy.js</a></li>
85
86		<li>Or you can link to the compressed version of the script which is about
87		one seventh the size, see <a href="http://www.w3.org/Talks/Tools/Slidy/slidy.js.gz">http://www.w3.org/Talks/Tools/Slidy/slidy.js.gz</a></li>
88		<li>If you are using XHTML, remember to use </script> and
89		</style> as per <a href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li>
90		</ul>
91		</li>
92		</ul>
93
94		<pre><?xml version="1.0" encoding="utf-8"?>
95		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
96		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
97		<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
98		<head>
99		<title>Slide Shows in XHTML</title>
100		<meta name="copyright"
101		content="Copyright &#169; 2005 your copyright notice" />
102		<link rel="stylesheet" type="text/css" media="screen, projection, print"
103		href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" />
104		<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
105		charset="utf-8" type="text/javascript"></script>
106		<style type="text/css">
107		<!-- your custom style rules -->
108		</style>
109		</head>
110		<body>
111		... your slides marked up in XHTML ...
112		</body>
113		</html>
	60	<h1>Outline of today's talk</h1>
	61
	62	<ul>
	63	<li>The Ubiquitous Web</li>
	64	<li>Speech Enabling Web Pages</li>
	65	<li>Web Presentations</li>
	66	<li>Web Meetings</li>
	67	<li>Business Opportunities</li>
	68	<li>Concluding Remarks</li>
	69	</ul>
	70	</div><div class="slide">
	71	<h1>The Ubiquitous Web</h1>
	72
	73	<div class="extract">
	74	<p><strong>Ubiquitous</strong>. [adj]</p>
	75
	76	<ol>
	77	<li>(seemingly) present<br>
	78	everywhere simultaneously.</li>
	79	<li>often encountered<br>
	80	[Latin ubique everywhere]</li>
	81	</ol>
	82	<p><em>Oxford English Dictionary</em></p>
	83	</div>
	84	</div><div class="slide">
	85	<h1>Ubiquitous Computing</h1>
	86
	87	<div class="extract">
	88	<p>Ubiquitous computing represents a powerful shift in
	89	computation, where people live, work, and play in a
	90	seamlessly interweaving computing environment.
	91	Ubiquitous computing postulates a world where people
	92	are surrounded by computing devices and a computing
	93	infrastructure that supports us in everything we do.</p>
	94
	95	<p><em>Mark Weiser, The Computer of the 21st Century,
	96	Scientific American, Sept 1991.</em></p>
	97	</div>
	98	</div><div class="slide">
	99	<h1>Ubiquitous Web</h1>
	100
	101	<div class="extract">
	102	<p>The Ubiquitous Web seeks to broaden the capabilities of
	103	browsers to enable new kinds of web applications, particularly
	104	those involving coordination with other devices. Some examples
	105	include connecting a camera phone to a nearby printer, using a
	106	cell phone to give a business presentation with a wireless
	107	projector, and viewing your mailbox while listening to your
	108	messages.</p>
	109	</div>
	110	</div><div class="slide">
	111	<h1>W3C Ubiquitous Web Workshop</h1>
	112
	113
	114	<p>Tokyo, March 2006, driven by widespread interest
	115	in Web Applications and the potential to go further.</p>
	116
	117	<ul>
	118	<li>To explore the vision of the Web as a distributed
	119	applications platform that works across a wide range of
	120	devices in areas such as offices, home networks, mobile,
	121	automotive, aviation, etc. with the potential for
	122	increasing the range and reducing the cost of developing
	123	and deploying such applications.</li>
	124
	125	<li>To explain how current W3C work fits into this vision,
	126	e.g. work on Web Application API's, Delivery Context
	127	Interfaces, Device Descriptions, Multimodal Architecture,
	128	etc.</li>
	129
	130	<li>To identify and prioritize additional areas which
	131	would benefit from standardization, in particular, the
	132	integration of sessions and device coordination into web
	133	applications, as a means to enable the benefits described
	134	in the <a href="http://www.w3.org/2005/10/ubiweb-workshop-cfp.html">Call
	135	for Participation</a>.</li>
	136	</ul>
	137	</div><div class="slide">
	138	<h1>Current Work</h1>
	139
	140
	141	<ul>
	142	<li>Web APIs Working Group aims to standardize established
	143	Web scripting interfaces e.g. Window object and XMLHTTPRequest</li>
	144	<li>Delivery Context Interfaces (DCI) model user preferences,
	145	device capabilities and environmental conditions as a hierarchy
	146	of DOM nodes
	147	<ul>
	148	<li>This is intended to enable applications to dynamically adapt
	149	to the context, and to provide access to a wide range of
	150	services</li>
	151	<li>We have the framework and now the challenge is to work
	152	together to build this out</li>
	153	</ul>
	154	</li>
	155	<li>Multimodal Architecture and Interfaces describes a way to
	156	loosely couple user interface components to interaction managers
	157	via DOM events</li>
	158	<li>The IETF Widex Working Group is developing protocols for
	159	exchanging DOM events and DOM updates between applications
	160	and remote user interfaces</li>
	161	</ul>
	162	</div><div class="slide">
	163	<h1>IETF Widex Working Group</h1>
	164
	165
	166	<p>Developing a protocol for remote user interfaces based
	167	upon the Model-View-Controller paradigm, where the UI is
	168	expressed in terms of an XML DOM and the protocol is
	169	independent of the markup language.</p>
	170	<!--
	171	<p><img src="widex.gif" alt="diagram of server and renderer"
	172	style="text-align:center" /></p>
	173	-->
	174	<pre style="border: medium none ; margin-left: 10%; font-size: 60%;">+-----------------------------+ +---------------+
	175	\| Widex Server \| \| Widex Renderer\|
	176	\| +-------+ .............. \| \| +-----------+ \|
	177	\| \| \| . .--------------->\| \| \|
	178	\| \| \| . View . \| Updates \| \| \| \|
	179	\| \| \| . (Virtual) .<---------------\| \| \|
	180	\| \| \| .............. \| \| \| View \| \|
	181	\| \| Model \| \| \| \| \| \|
	182	\| \| \| +------------+ \| \| \| \| \|
	183	\| \| \| \| \|<---------------\| (XML DOM) \| \|
	184	\| \| \| \| Controller \| \| Events \| \| \| \|
	185	\| \| \| \| \|--------------->\| \| \|
	186	\| +-------+ +------------+ \| \| +-----------+ \|
	187	+-----------------------------+ +---------------+
114	188	</pre>
115		</div><div class="slide">
116		<h1>Slide Shows in XHTML</h1>
117
118
119		<ul>
120		<li>You can now create accessible slide shows with ease</li>
121
122		<li>Works across browsers and is operated like PowerPoint
123
124		<ul>
125		<li>Advance to next slide with mouse click or space bar</li>
126
127		<li>Move forward/backward between slides with Cursor Left,
128		Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
129		keys</li>
130
131		<li><strong>Home</strong> key for first slide, <strong>End</strong>
132		key for last slide</li>
133
134		<li>The "<strong>C</strong>" key for an automatically generated
135		table of contents (or click on "contents" on the toolbar)</li>
136
137		<li>Function <strong>F11</strong> to go full screen and back</li>
138
139		<li>The "<strong>F</strong>" key toggles the display of the footer</li>
140
141		<li>The "<strong>A</strong>" key toggles display of current vs all slides
142
143		<ul>
144		<li>Use the "A" key when you want to view or print all slides</li>
145
146		<li>Try it now to see how to include notes for handouts (this is
147		explained in the notes following this slide)</li>
148		</ul>
149		</li>
150
151		<li>Font sizes automatically adapt to browser window size
152
153		<ul>
154		<li>use <strong>S</strong> and <strong>B</strong> keys for
155		manual control (or < and >, or the <strong>-</strong> and
156		<strong>+</strong> keys on the number pad</li>
157		<li>See also the <a href="#%2813%29">use of the meta element for
158		adjusting the default Slidy behavior</a></li>
159		</ul>
160		</li>
161
162		<li>Switching off JavaScript reveals all slides</li>
163		</ul>
164		</li>
165
166		<li><em>Now move to next slide to see how it works</em></li>
167		</ul>
168
169		<p class="copyright"><a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" shape="rect">Copyright</a> Â© 2005-2006 <a href="/"><acronym title="World Wide Web Consortium">W3C</acronym></a> <sup>Â®</sup>
170		(<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
171		<a href="http://www.keio.ac.jp/">Keio</a>), All Rights
172		Reserved.</p>
173		</div><div class="slide">
174		<h1>To get the W3C Blue Style</h1>
175
176
177		<p>The head element should include the following link to the style
178		sheet:</p>
179
180		<pre><link rel="stylesheet" type="text/css" media="screen, projection, print"
181		href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css" />
	189
	190	<p class="smaller">See draft-ietf-widex-requirements-00.txt,
	191	V. Stirbu (Nokia) and D. Raggett (W3C/Canon),
	192	January 12th, 2006</p>
	193
	194	<p class="smaller">Note: at the request of OMA and several W3C
	195	members, W3C has started work on a solution for streaming updates
	196	for SVG documents that will also work with other XML languages.
	197	Streaming introduces timing related requirements, and the W3C
	198	and IETF groups will coordinate their work on this.</p>
	199	</div><div class="slide">
	200	<h1>What's missing or can be improved upon?</h1>
	201
	202	<ul>
	203	<li>Managing resources within temporary or persistent
	204	sessions
	205	<ul>
	206	<li>work arounds exist using cookies and embedding session
	207	information within URIs, but a more flexible framework is
	208	needed especially for resources and bindings that last
	209	beyond individual Web pages</li>
	210	</ul>
	211	</li>
	212	<li>Extending device capabilities via network resources
	213	<ul>
	214	<li>e.g. printers, projectors, speech synthesis and recognition,
	215	natural language translation, geographic location, etc.</li>
	216	<li>need a way to discover such resources and bind them into
	217	the current session</li>
	218	</ul>
	219	</li>
	220	<li>Support for applications involving multiple devices
	221	<ul>
	222	<li>with the means to pass events between devices</li>
	223	</ul></li>
	224	<li>URIs for naming devces, services and sessions
	225	<ul>
	226	<li>enabling the use of rich metadata (the Semantic
	227	Web) for resource discovery, acting across different kinds of
	228	networks, and leveraging the distributed nature of the Web</li>
	229	</ul>
	230	</li>
	231	</ul>
	232	</div><div class="slide">
	233	<h1>Exposing Device Coordination to the Web</h1>
	234
	235
	236	<ul>
	237	<li>Registering what services a device provides
	238	<ul>
	239	<li>How to describe services</li>
	240	</ul>
	241	</li>
	242	<li>Discovering what services are available
	243	<ul>
	244	<li>Could be local or remote</li>
	245	<li>May be physically nearby, but on different networks</li>
	246
	247	</ul>
	248	</li>
	249	<li>Binding to a service</li>
	250	<li>Using a service</li>
	251	<li>Relinquishing a service</li>
	252	<li>How to expose existing device coordination frameworks
	253	to Web applications?
	254	<ul>
	255	<li>UPnP, WSD, Jini, Salutation, ...</li>
	256	</ul>
	257	</li>
	258	</ul>
	259	</div><div class="slide">
	260	<h1>The DOM and Distributed Services</h1>
	261
	262
	263	<ul>
	264	<li>Web application identifies need for a service
	265	<ul>
	266	<li>e.g. speech synthesis and recognition</li>
	267
	268	</ul>
	269	</li>
	270	<li>It discovers and binds the service</li>
	271	<li>This exposes the service to the local DOM but hides
	272	the details of how it is implemented
	273	<ul>
	274	<li>Local interface can be described in IDL
	275	and exploited via markup or scripting</li>
	276	</ul>
	277	</li>
	278	<li>For a remote speech engine, the local interface acts
	279	as a proxy for the speech engine</li>
	280	<li>The implementation could make use of Web Services,
	281	or other protocols</li>
	282	</ul>
	283	</div><div class="slide">
	284	<h1>Options for adding speech capabilities</h1>
	285
	286	<ul>
	287	<li>Handling speech modality in the network
	288	<ul>
	289	<li>Loose coupling of modality interfaces
	290	<ul>
	291	<li>e.g. XHTML locally with VoiceXML in the network,
	292	with CCXML for high level flow control</li>
	293	</ul>
	294	</li>
	295	</ul>
	296	</li>
	297	<li>Handling speech modality in the browser
	298	<ul>
	299	<li>Embedded vs networked speech
	300	<ul>
	301	<li>latency, quality, vocabulary, network, battery, etc.</li>
	302	</ul>
	303	</li>
	304	<li>Plugin vs local speech proxy</li>
	305	<li>Standard scripting interface?</li>
	306	</ul>
	307	</li>
	308	</ul>
	309	</div><div class="slide">
	310	<h1>Latency</h1>
	311
	312	<ul>
	313	<li>Simple commands with visual actions
	314	<ul>
	315	<li>up, down, select, . . .
	316	<ul>
	317	<li>Feels slow if delay is much greater than 100mS</li>
	318	</ul>
	319	</li>
	320	</ul>
	321	</li>
	322	<li>Dialogue turn hand over
	323	<ul>
	324	<li>When user stops talking (or pauses)</li>
	325	<li>When application stops talking (or pauses)</li>
	326	</ul>
	327	</li>
	328	<li>Seizing the turn (aka <em>barge-in</em>)
	329	<ul>
	330	<li>User or application talks over the other party</li>
	331	</ul>
	332	</li>
	333	<li>Network delays are not as bad as they seem</li>
	334	</ul>
	335	</div><div class="slide">
	336	<h1>Using AJAX to add speech</h1>
	337
	338	<ul>
	339	<li>AJAX = JavaScript access to HTTP
	340	<ul>
	341	<li>XMLHttp request object</li>
	342	<li>Supported by most modern Web browsers</li>
	343	</ul>
	344	</li>
	345	<li>Local HTTP server handles device audio
	346	<ul>
	347	<li>ALSA on Linux, and winmm.dll on Windows</li>
	348	<li>Open source speech codec for compression</li>
	349	</ul>
	350	</li>
	351	<li>Remote HTTP server provides speech services
	352	<ul>
	353	<li>ASR with audio in HTTP request,
	354	and EMMA in HTTP response</li>
	355	<li>TTS with text or SSML in HTTP request,
	356	and audio in HTTP response</li>
	357	</ul>
	358	</li>
	359	</ul>
	360	</div><div class="slide">
	361	<h1>HTTP for Speech Services</h1>
	362
	363	<ul>
	364	<li>Speech Synthesis
	365	<ul>
	366	<li>http://localhost:8888/say?text="good afternoon"</li>
	367	<li>http://localhost:8888/say?uri=<ssml file></li>
	368	</ul>
	369	</li>
	370	<li>Speech recognition
	371	<ul>
	372	<li>http://localhost:8888/hear?uri=<srgs file></li>
	373	<li>Additional parameters for
	374	<ul>
	375	<li>Listening on multiple grammars</li>
	376	<li>Single result vs sequence of results</li>
	377	<li>Time out parameters</li>
	378	</ul>
	379	</li>
	380	<li>Additional command for pre-loading grammars</li>
	381	</ul>
	382	</li>
	383	</ul>
	384	</div><div class="slide">
	385	<h1>Application to ordering Pizza</h1>
	386
	387
	388	<p style="margin-top: 6em;">You get to choose number, type, size
	389	and extra toppings!</p>
	390
	391	<p style="margin-top: 4em;">
	392	<img src="pepperoni.gif" alt="pepperoni pizza" width="23%">
	393	<img src="founders.gif" alt="founders pizza" width="23%">
	394	<img src="chickenvegy.gif" alt="chicken pizza" width="23%">
	395	<img src="works.gif" alt="all the works pizza" width="23%">
	396	</p>
	397	</div><div class="slide">
	398	<h1>SRGS + SISR â EMMA</h1>
	399
	400	<ul>
	401	<li>Use W3C Recommendations for speech
	402	grammars and semantic interpretation</li>
	403	</ul>
	404	<pre> <rule id="order">
	405	<tag>var index=0; out.pizza = new Array();</tag>
	406	<item repeat="0-1"><ruleref uri="#start"/></item>
	407	<item>
	408	<ruleref uri="#pizza"/>
	409	<tag>out.pizza[index]=$pizza; index+=1;</tag>
	410	</item>
	411	<item repeat="0-">
	412	<item><token>and</token></item>
	413	<item>
	414	<ruleref uri="#pizza"/>
	415	<tag>out.pizza[index]=$pizza; index+=1;</tag>
	416	</item>
	417	</item>
	418	<item repeat="0-1"><ruleref uri="#stop"/></item>
	419	</rule>
182	420	</pre>
183
184		<p>The body element's content should start with the following
185		markup:</p>
186
187		<pre><div class="background">
188		<img id="head-icon" alt="graphic with four colored squares"
189		src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" />
190		<object id="head-logo" title="W3C logo" type="image/svg+xml"
191		data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.svg"><img
192		src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif"
193		alt="W3C logo" id="head-logo-fallback" /></object>
194		</div>
	421	</div><div class="slide">
	422	<h1>Pizza Grammar</h1>
	423
	424	<p style="color: blue; text-align: center; margin-top: 2em;">I would like
	425	four small cheese pizzas with olives and peppers</p>
	426	<pre>[<start>] [<number>] [<size>] <type> (pizza \| pizzas) [with <extras>] [<stop>]
	427
	428	<start> ::= I want \| I would like \| I'll have \| I'd like \| I'd love \| Give me
	429	<stop> :: thanks \| please \| if you please
	430	<number> ::= a \| one \| two \| ... \| nine
	431	<size> ::= small \| medium \| large
	432	<type> ::= cheese \| pepperoni \| sausage
	433	<extras> ::= <topping> [[and] <topping>]*
	434	<topping> ::= mushroom \| olives \| onions \| peppers \| tomatoes
	435
	436	<emma:interpretation>
	437	<pizza>
	438	<size>small</size>
	439	<number>4</number>
	440	<type>cheese</type>
	441	<topping>olives</topping>
	442	<topping>peppers</topping>
	443	</pizza>
	444	</emma:interpretation>
195	445	</pre>
196
197		<p>This adds the logos on the top left and right corners of the
198		slide.</p>
199
200		<p>You are of course welcome to create your own slide designs.
201		You can provide different styles and backgrounds for
202		different slides (more details later).</p>
203
204		<p>Use the <em>meta element</em> with <em>name="copyright"</em>
205		for use in the slide show footer:</p>
206
207		<pre><meta name="copyright"
208		content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
209		</pre>
210		</div><div class="slide">
211		<h1>To use it off-line</h1>
212
213
214		<ul>
215		<li>You can download <a href="slidy.zip">slidy.zip</a> and unzip
216		it to create a Slidy directory on your machine</li>
217
218		<li>If you have cvs access to the W3C site you can check out the Slidy
219		directory</li>
220
221		<li>Remember to periodically check for updates</li>
222
223		<li>You then have two choices:
224
225		<ol>
226		<li>Use relative URIs depending on your local setup to access the
227		appropriate files. Use the same directory structure as on the W3C
228		server, ie, ".../2005/Talks/...".</li>
229
230		<li>Run a Web server on your machine so that the directory above
231		can be accessed via <code>http://localhost/Talks/Tools/Slidy</code>
232		and use the URIs of the form "/Talks/Tools/Slidy/slidy.css",
233		"/Talks/Tools/Slidy/slidy.js".</li>
234		</ol></li>
235
236		<li>In both cases you can then publish your files on the W3C server
237		unchanged.</li>
238
239		<li><strong>NOTE</strong> Internet Explorer on Windows XP now disables
240		scripting for web pages loaded directly from the local file system,
241		a work around is to use another browser, e.g. Firefox or Opera</li>
242
243		<li>Please feel free to create your own designs, and help us to build
244		a gallery of Slidy styles.</li>
245
246		<li>Here is a <a href="template.html">variant</a>
247		on the W3C Blue style.</li>
248
249		<li>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006)
250		uses a notebook themed style</li>
251		</ul>
252		</div><div class="slide">
253		<h1>Generate a Title Page</h1>
254
255
256		<p>If you want a separate title page with the W3C blue style, the
257		first slide should be as follows:</p>
258
259		<pre><div class="slide cover">
260		<img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg"
261		alt="Cover page images (keys)" class="cover" />
262		<br clear="all" />
263		<h1>HTML Slidy: Slide Shows in XHTML</h1>
264		<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a>
265		<a href="mailto:dsr@w3.org">dsr@w3.org</a></p>
266		</div>
267		</pre>
268
269		<p>The <a href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css">w3c-blue.css</a>
270		style sheet looks for the classes "slide" and "cover" on div
271		and img elements using the CSS selector <em>div.slide.cover</em></p>
272
273		<p>This technique can be used to assign your slides to different
274		classes with a different appearence for each such class.</p>
275
276		<p>Slidy also allows you to use different background markup for
277		different slides, based upon shared class names, as in "foo" below.
278		Backgrounds without additional class names are always shown except
279		when the slide isn't transparent. You may need to tweak your
280		custom style sheet.</p>
281
282		<pre><div class="background foo">
283		... background content ...
284		<div>
285
286		...
287
288		<div class="slide foo">
289		... slide content ...
290		<div>
291		</pre>
	446	</div><div class="slide">
	447	<h1>Application to Ordering Pizza</h1>
	448
	449	<ul>
	450	<li>Implemented in XHTML+CSS+JavaScript</li>
	451	<li>Supports compound utterances
	452	<ul>
	453	<li>Faster than filling out forms via GUI</li>
	454	<li>But requires flexible dialogue to work around
	455	inevitable misunderstandings</li>
	456	</ul>
	457	</li>
	458	<li>DIY solution for describing behavior
	459	<ul>
	460	<li>Combination of scripting and markup</li>
	461	<li>Markup interpreted via JavaScript</li>
	462	<li>Can be made to work across browsers</li>
	463	<li>Experimentation before standardization</li>
	464	</ul>
	465	</li>
	466	</ul>
	467	</div><div class="slide">
	468	<h1>Modeling Behavior</h1>
	469
	470	<ul>
	471	<li>Scripted handlers for XHTML events, e.g.
	472	onload, onmouseover, onfocus, onchange</li>
	473	<li>Asynchronous callbacks for HTTP responses
	474	<ul>
	475	<li>Used to handle results of speech recognition</li>
	476	<li>Initiated via calls to XMLHTTP request</li>
	477	</ul>
	478	</li>
	479	<li>Asynchronous timers (setTimeout)</li>
	480	<li>Use of custom markup
	481	<ul>
	482	<li>Application state, dialogue goals and history</li>
	483	<li>Event driven state transition rules</li>
	484	</ul>
	485	</li>
	486	<li>Behavior can be modelled at a higher level server-side</li>
	487	</ul>
	488	</div><div class="slide">
	489	<h1>Logging</h1>
	490
	491	<ul>
	492	<li>Usability is based upon real world experience
	493	<ul>
	494	<li>That means you need to collect lots of data</li>
	495	</ul>
	496	</li>
	497	<li>Log dialogues and audio for later analysis
	498	<ul>
	499	<li>Speech server log's ASR, TTS requests</li>
	500	<li>AJAX used for logging dialogue state
	501	<ul>
	502	<li>Including changes via visual modality</li>
	503	</ul>
	504	</li>
	505	<li>Application assigned session identifier
	506	<ul>
	507	<li>Used to associate log entries for same session</li>
	508	<li>Must be sent as part of all server requests</li>
	509	</ul>
	510	</li>
	511	</ul>
	512	</li>
	513	</ul>
	514	</div><div class="slide">
	515	<h1>Remarks</h1>
	516
	517	<ul>
	518	<li>Complex utterances are more natural but require
	519	a more flexible approach for effective dialogues</li>
	520	<li>Exposing speech to Web pages via JavaScript offers
	521	flexibility for rolling your own solutions whilst
	522	remaining inter-operable across browsers</li>
	523	<li>Open questions include
	524	<ul>
	525	<li>Whether to access speech via a plugin, or via
	526	AJAX and a locally installed HTTP server?</li>
	527	<li>Whether to pass audio within HTTP or to use a
	528	concurrent RTP-based stream?</li>
	529	</ul>
	530	</li>
	531	<li>There is an opportunity for a standard speech object
	532	that abstracts away from embedded vs networked speech</li>
	533	</ul>
	534	</div><div class="slide">
	535	<h1>Web Presentations</h1>
	536
	537	<ul>
	538	<li>Web-based alternative to PowerPoint
	539	<ul>
	540	<li>No more need for large email attachments
	541	<ul>
	542	<li>Just include the link to your slides</li>
	543	</ul>
	544	</li>
	545	<li>Create and update your slides in your web browser</li>
	546	</ul>
	547	</li>
	548	<li><a href="http://www.w3.org/Talks/Tools/Slidy/">HTML Slidy</a>
	549	uses XHTML, CSS and JavaScript
	550	<ul>
	551	<li>Each slide marked up in a div element with class="slide"</li>
	552	<li>Font size automatically adapts to window size</li>
	553	<li>Incremental revealing of slide contents</li>
	554	<li>Different backgrounds for different slides</li>
	555	<li>Outline lists for extra details</li>
	556	<li>Automatically created table of contents</li>
	557	<li>Slidy style sheets and script available as Open Source</li>
	558	</ul>
	559	</li>
	560	</ul>
292	561	</div><div class="slide">
293	562	<h1>Incremental display of slide contents</h1>
…	…
312	581	<li>Third bullet point</li>
313	582	</ul>
314
315		~~<p class="incremental">which is marked up as follows:</p>~~
316
317		~~<pre class="incremental">~~
318		~~...~~
319		~~</pre>~~
320	583	</pre>
321	584
322		<div class="footnote">
323		<p>An element is incrementally revealed if its parent element has
324		class="incremental" or if itself has that attribute. Text nodes are
325		not elements and are revealed when their parent element is revealed.
326		You can use class="incremental" on any element except for <br />.
327		Use class="non-incremental" to override the effect of setting the
328		parent element's class to incremental.</p>
329
330		<p>Note: you will see a red asterisk on the left of the toolbar
331		when there is still something more to reveal.</p>
332		</div>
333		</div><div class="slide">
334		<h1>Create outline lists with hidden content</h1>
335
336
337		<p>You can make your bullet points or numbered list items
338		into outlines that you can expand or collapse</p>
339
340		<ul class="outline">
341		<li>Just add <em>class="outline"</em> to the ul or ol
342		element. Click on this list item for more details.
343
344		<ul>
345		<li>The Slidy script will then treat the list
346		as an outline list.</li>
347		<li>Clicking on outline list items will expand/collapse
348		block-level elements within that list item.</li>
349		<li>Click on the above to make this list item
350		collapse again.</li>
351		</ul>
352		</li>
353		<li>Users will then see expand/collapse icons as appropriate
354		and may click anywhere on the list item to change its state.
355		This particular list item can't be expanded or collapsed.</li>
356		<li class="expand">Add class="expand" to any li elements that
357		you want to start in an expanded state.
358
359		<ul>
360		<li>By default Slidy hides all the block level elements within the
361		outline list items unless you have specified class="expand".</li>
362		<li>Such pre-expanded items can be collapsed by clicking on them.</li>
363		</ul>
364		</li>
365		<li>Note expand/collapse icon highlighting requires browser
366		support for :hover which isn't supported by IE6.
367
368		<ul>
369		<li>Microsoft says it will be supported by IE7 along with
370		many fixes for other CSS woes in IE6.</li>
371		</ul>
372		</li>
373		</ul>
374
375		<pre><ol class='outline'>
376		<!-- topic 1 starts collapsed -->
377		<li>Topic 1
378		<ol>
379		<li>subtopic a</li>
380		<li>subtopic b</li>
381		</ol>
382		</li>
383		<!-- topic 2 starts expanded -->
384		<li class="expand">Topic 2
385		<ol>
386		<li>subtopic c</li>
387		<li>subtopic d</li>
388		</ol>
389		</li>
390		</ol>
391		</pre>
392		</div><div class="slide">
393		<h1>Make your images scale with the browser window size</h1>
394
395
396		<p>For adaptive layout, use percentage widths on images, together
397		with CSS positioning:</p>
398
399		<ul>
400		<li>CSS positioning is simpler and more reliable than using
401		tables</li>
402		</ul>
403
404		<pre><div class="slide">
405		<h1>Analysts - "Open standards programming will become
406		mainstream, focused around VoiceXML"</h1>
407		<!-- use CSS positioning and scaling for adaptive layout -->
408		<img src="trends.png" width="50%" style="float:left"
409		alt="projected growth of VoiceXML" />
410
411		<blockquote style="float:right;width: 35%">
412		VoiceXML will dominate the voice environment, due to its
413		flexibility and eventual multimodal capabilities
414		</blockquote><br clear="all" />
415
416		<p style="text-align:center">Source Data Monitor, March
417		2004</p>
418		</div>
419		</pre>
420
421		<p>To work around a CSS rendering bug in IE relating
422		to margins, you can set display:inline on floated elements.</p>
	585	<p class="small">You can also set class="incremental" or
	586	"non-incremental" on individual elements (except for
	587	<br />)</p>
423	588	</div><div class="slide">
424	589	<h1>Incremental display of layered images</h1>
…	…
428	593
429	594	<pre><div class="incremental"
430		style="margin-left: 4em; position: relative">
	595	style="margin-left: 10em; position: relative">
431	596	<img src="face1.gif" alt="face"
432	597	style="position: static; vertical-align: bottom"/>
…	…
440	605	</pre>
441	606
442		<p style="font-size: smaller;">You should also use transparent GIF
443		images to avoid the IE/Win bug for alpha channel in PNG. A fix is
444		expected in IE 7. A <a href="http://www.skyzyx.com/scripts/sleight.php">work around</a> is
445		available on skyzyx.com. My thanks to <a href="http://www.webstandards.org/act/acid2/">ACID2</a> for the
446		graphics.</p>
447
448		<div class="incremental" style="margin-left: 4em; position: relative;"><img src="face1.gif" alt="face" style="position: static; vertical-align: bottom;">
	607	<div class="incremental" style="margin-left: 35%; position: relative;"><img src="face1.gif" alt="face" style="position: static; vertical-align: bottom;">
449	608	<img src="face2.gif" alt="eyes" style="position: absolute; left: 0pt; top: 0pt;"> <img src="face3.gif" alt="nose" style="position: absolute; left: 0pt; top: 0pt;">
450	609	<img src="face4.gif" alt="mouth" style="position: absolute; left: 0pt; top: 0pt;"></div>
451	610	</div><div class="slide">
452		<h1>Include SVG Content</h1>
453
454
455		<p>Inclusion of SVG content can be done using the object element,
456		for example:</p>
457
458		<div style="text-align: center;"><object data="example.svg" type="image/svg+xml" title="Indian Office logo" height="10%" width="50%"><img src="example.png" alt="Indian Office logo" width="50%"></object></div>
459
460		<p>has been achieved by:</p>
461
462		<pre><object data="example.svg" type="image/svg+xml"
463		width="50%" height="10%" title="Indian Office logo">
464		<img src="example.png" width="50%"
465		alt="Indian Office logo" />
466		</object>
467		</pre>
468
469		<p>This ensures that the enclosed png is displayed when the browser
470		has no plugin installed or can't display SVG directly. Providing
471		such a fall back is very important! Don't forget the alt text for
472		people who can't see the image.</p>
473
474		<p>However, there are caveats, see the next slide!</p>
475		</div><div class="slide">
476		<h1>Caveats with SVG+object</h1>
477
478
479		<p>Adobe has recently withdrawn support for its SVG Viewer, so you are
480		recommended to consider <a href="http://wiki.svg.org/Viewer_Implementations">alternatives</a>.
481		If you still using the Adobe SVG viewer you should be aware of bugs
482		when using the it with IE, Namely:</p>
483
484		<ul>
485		<li>Recent patches to Internet Explorer mean that the Adobe SVG Viewer
486		version 3.03 no longer works with IE6. You are therefore recommended
487		to uninstall version 3.03 and instead install <a href="http://www.adobe.com/svg/viewer/install/beta.html">Adobe SVG Viewer
488		6.0 preview</a> if this is available to to you.</li>
489
490		<li>IE6 makes a <em>copy</em> of the SVG file on the local disc
491		when displaying it; but doesn't pass the original URI to the plugin</li>
492
493		<li>As a result relative references from within the SVG to external
494		resources (scripts, CSS, images, other SVG) will break.</li>
495
496		<li>The work around is to use absolute references within your SVG.</li>
497
498		<li>This problem doesn't effect Mozilla/Firefox. I don't know if
499		this was fixed for IE7.</li>
500
501		<li>On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
502		property, and if used on backgrounds will always show through other
503		content</li>
504		</ul>
505
506		<p>Recent versions of Firefox include native support for SVG, but there
507		is a bug with Firefox in which the wrong SVG image will sometimes be
508		shown when the page is reloaded. This is due to be fixed in Firefox 3.0.</p>
509
510		<p>Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't
511		support external style sheets or style elements within SVG. The work
512		around is to set the properties via style attributes on the
513		corresponding elements. In principle, browsers should honor the
514		version attribute and fall back to the alternative within the object
515		element if they don't support the version used by a given SVG file.</p>
516
517		<p><em>Are there any tools for downgrading SVG to SVG Tiny?</em></p>
518		</div><div class="slide">
519		<h1>Additional Remarks</h1>
520
521
522		<ul>
523		<li>Slides are auto-numbered on the slide show footer</li>
524
525		<li>You can link into the <a href="#%282%29">middle</a> of a slide
526		show:
527
528		<ul>
529		<li>It works out which slide you want and hides the rest</li>
530
531		<li>You can even link between slides in the same slide show</li>
532
533		<li>Individual sides can be addressed with the syntax #(<em>slide
534		number</em>),<br>
535		e.g. slide 3 of this presentation is: <a href="#%283%29">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
536		<ul>
537		<li>Previous versions of Slidy used square brackets, which will
538		also work.</li>
539		</ul></li>
540		<li>Note that the browser's back/forward buttons may not work as
541		you might expect due to browser problems.</li>
542		</ul>
543		</li>
544
545		<li>Adding "title" to the list of classes for div elements that serve
546		as title pages will render the corresponding entry in the table of
547		contents in bold italic text (press "C" now for an example)</li>
548
549		<li>If your slides have more content than normal, use a <em>meta
550		element</em> to request a smaller font
551
552		<ul>
553		<li>the following requests fonts to be one step smaller than
554		the Slidy default for the current window width, and positive
555		integers will make the fonts correspondingly larger</li>
556		</ul>
557
558		<pre><meta name="font-size-adjustment" content="-1" />
559		</pre>
560
561		<ul>
562		<li>Slidy uses JavaScript to dynamically set the font size on the
563		body element, but it is okay to specify relative font changes on
564		other elements within your own style sheet.</li>
565		</ul>
566		</li>
567
568		<li>You are encouraged to ensure your markup is valid. <a href="http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a> can be used
569		to find and correct common markup problems</li>
570
571		<li>The slide show script and style sheet can be used freely under
572		W3C's <a href="http://www.w3.org/Consortium/Legal/copyright-software">software
573		licensing</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
574		use</a> policies</li>
575		<li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
576		I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
577		on Slidy
578		(<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
579		</ul>
580		</div><div class="slide">
581		<h1>Localization</h1>
582
583
584		<p>Slidy now includes support for localization</p>
585
586		<ul>
587		<li>The tool bar is localized according to the language of the presentation</li>
588		<li>This is taken from the xml:lang or lang attributes on the html element</li>
589		<li>The <a href="http://www.w3.org/Talks/Tools/Slidy/help.html">help file</a> is
590		selected based upon your browser's language preferences</li>
591		<li>As of 17th March 2006, the languages supported are: English, Spanish and
592		Dutch</li>
593		<li>If you would like to contribute localizations for other languages, please
594		get in touch with Dave Raggett <dsr@w3.org></li>
595		<li>The following illustrates what was used for Spanish</li>
596		</ul>
597		<pre>// for each language there is an associative array
598		var strings_es = {
599		"slide":"pÃ¡g.",
600		"help?":"Ayuda",
601		"contents?":"Ãndice",
602		"table of contents":"tabla de contenidos",
603		"Table of Contents":"Tabla de Contenidos",
604		"restart presentation":"Reiniciar presentaciÃ³n",
605		"restart?":"Inicio"
606		};
607		strings_es[helpText] =
608		"Utilice el ratÃ³n, barra espaciadora, teclas Izda/Dhca, " +
609		"o Re pÃ¡g y Av pÃ¡g. Use S y B para cambiar el tamaÃ±o de fuente.";
610		</pre>
	611	<h1>Create outline lists with hidden content</h1>
	612
	613
	614	<p>You can make your bullet points or numbered list items
	615	into outlines that you can expand or collapse</p>
	616
	617	<ul class="outline">
	618	<li>Just add <em>class="outline"</em> to the ul or ol
	619	element. Click on this list item for more details.
	620
	621	<ul>
	622	<li>The Slidy script will then treat the list
	623	as an outline list.</li>
	624	<li>Clicking on outline list items will expand/collapse
	625	block-level elements within that list item.</li>
	626	<li>Click on the above to make this list item
	627	collapse again.</li>
	628	</ul>
	629	</li>
	630	<li>Users will then see expand/collapse icons as appropriate
	631	and may click anywhere on the list item to change its state.
	632	This particular list item can't be expanded or collapsed.</li>
	633	<li class="expand">Add class="expand" to any li elements that
	634	you want to start in an expanded state.
	635
	636	<ul>
	637	<li>By default Slidy hides all the block level elements within the
	638	outline list items unless you have specified class="expand".</li>
	639	<li>Such pre-expanded items can be collapsed by clicking on them.</li>
	640	</ul>
	641	</li>
	642	</ul>
611	643	</div><div class="slide">
612	644	<h1>Future Plans</h1>
…	…
617	649	work is anticipated on the following:</p>
618	650
619		<ul>
	651	<ul class="incremental">
620	652	<li>Collecting a gallery of good looking slide themes
621	653	<ul>
…	…
626	658	<ul>
627	659	<li>Using scripts to dynamically convert SVG Tiny to VML</li>
628		</ul>
629		</li>
630		<li>Alpha version of wysiwyg slide editor (see <a href="editor/editor-screenshot1.png">screenshot</a>)
631		<ul>
632		<li>Using contentEditable when available, otherwise
633		falling back to textarea and plain text conventions</li>
634		<li>Using XMLHttpRequest to dynamically reflect changes to server</li>
635		</ul>
636		</li>
637		<li>Mechanism for remotely driving Slidy as part of distributed meetings
638		<ul>
639		<li>Using XMLHttpRequest to listen for navigation commands</li>
640		<li>Using VoIP for accompanying audio and teleconferencing</li>
641		<li>Synchronizing recorded spoken presentation with currently viewed slide</li>
642		</ul>
643		</li>
644		<li>Filters from PowerPoint and Open Office
645		<ul>
646		<li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
647		</ul>
648		</li>
649		</ul>
650
651		<p>If you have comments, suggestions for improvements, or would
652		like to volunteer your help with further work on Slidy,
653		please contact <a href="http://www.w3.org/People/Raggett/">Dave Raggett</a> <<a href="mailto:dsr@w3.org">dsr@w3.org</a>></p>
654		</div><div class="slide">
655		<h1>Acknowledgements</h1>
656
657
658		<ul>
659		<li>My thanks to everyone who sent in bug reports and feature
660		requests</li>
661		<li>Opera Software for implementing CSS @media projection and
662		promoting the idea of using the Web for presentations with
663		<a href="http://www.opera.com/support/tutorials/operashow/">Opera
664		Show</a></li>
665		<li><a href="http://tantek.com/">Tantek Ãelik</a> for his
666		pioneering work on applying JavaScript for slide presentations on
667		other browsers</li>
668		<li>Eric Meyer for taking this further with the excellent <a href="http://www.meyerweb.com/eric/tools/s5/s5-intro.html">S5</a></li>
669		<li>W3C's <a href="http://dev.w3.org/cvsweb/slidemaker/">slidemaker
670		tool</a>, which uses a perl script to split an html file up into
671		one file per slide with navigation buttons</li>
672		<li>Early versions of <a href="http://www.w3.org/People/Raggett/tidy/">HTML
673		Tidy</a> which supported a means to create presentations via splitting
674		html files on h2 elements</li>
675		<li>Many sites with advice on JavaScript work arounds for browser
676		variations</li>
677		<li>Microsoft for pioneering contentEditable and XMLHTTP which
678		both provide tremendous opportunities for Web applications</li>
679		<li>Microsoft Office which provided the impetus for creating
680		Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
681		</ul>
682
683		<p class="smaller"><strong>Note</strong> that while Slidy and
684		S5 were developed independently, both support the use of the
685		class values "slide" and "handout" for div elements. Slidy doesn't
686		support the "layout" class featured in S5 and Opera Show, but
687		instead provides a more flexible alternative with the "background"
688		class, which enables different backgrounds on different slides.</p>
	660	<li>Or via conversion to Macromedia Flash</li>
	661	</ul>
	662	</li>
	663	<li>Tweaks for working with IE7 when that becomes available</li>
	664	<li>Richer styling for incrementally revealed content</li>
	665	</ul>
	666	</div><div class="s

TiddlyWiki.org

Navigation

Changeset 4928

Legend:

Trunk/contributors/JonathanLister/verticals/SlidyTiddly/Slidy/slidytest.html