Changeset 4927

Timestamp:

05/13/08 09:06:04 (5 months ago)

Author:

jayfresh

Message:

SlidyTiddly:first working version - tried out on http://www.w3.org/Talks/Tools/Slidy/

Location:

Trunk/contributors/JonathanLister/verticals/SlidyTiddly

Files:

• Slidy/slidytest.html (modified) (2 diffs)
• plugins/DomDragLib.js (added)
• plugins/ListOrderingPlugin.js (added)
• plugins/ListOrderingPlugin.js.meta (added)
• plugins/SlidyAdaptorPlugin.js (modified) (1 diff)
• plugins/SlidyAdaptorPlugin.js.meta (modified) (1 diff)
• plugins/split.recipe (modified) (1 diff)
• tiddlers/Content.tiddler (modified) (1 diff)
• tiddlers/DefaultTiddlers.tiddler (modified) (1 diff)
• tiddlers/Drag_n_Drop_Slideshow.tiddler (added)
• tiddlers/MainMenu.tiddler (modified) (1 diff)
• tiddlers/coverslidetemplate.tiddler (modified) (1 diff)
• tiddlers/pagetemplate.tiddler (modified) (1 diff)
• tiddlers/slidetemplate.tiddler (modified) (1 diff)
• tiddlers/split.recipe (modified) (2 diffs)

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

@@ -9 +9 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="copyright" content=
-"Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
+"Copyright © 2005 W3C (MIT, ERCIM, Keio)" />
 <meta name="font-size-adjustment" content=
 "-2" />
@@ -47 +47 @@
 <img src="keys.jpg" alt=
 "Cover page images (keys)" class="cover" /><br clear="all" />
-<h1>My special presentation with Saq</h1>
-hello!
+<h1>HTML Slidy: Slide Shows in XHTML</h1>
+
+
+<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
+&lt;<a href="mailto:dsr@w3.org">dsr@w3.org</a>&gt;<br>
+<br>
+<br>
+<br>
+<br><em>Hit the space bar for next slide</em></p>
+
 </div>
 <div class="slide">
-<h1>second test slide</h1>
-hey hey</div><div class="slide">
-<h1>test slide</h1>
-<ul><li> this is a bullet</li><li> so's this!</li></ul><br>blah blah blah</div>
-<!-- templateTiddlers template:slidetemplate filter:"{{store.getTiddlerText(foo)}}" -->
+<h1>What you need to do</h1>
+
+
+<ul>
+<li>Each presentation is a single XHTML file</li>
+
+<li>Each slide is enclosed in <em>&lt;div class="slide"&gt; ...
+&lt;/div&gt;</em>
+
+<ul>
+<li>The div element will be created automatically for h1
+elements that are direct children of the body element.</li>
+</ul>
+
+</li>
+
+<li>Use regular markup within each slide</li>
+
+<li>The document head includes two links:
+<ul>
+<li>The slide show style sheet:
+<a href="http://www.w3.org/Talks/Tools/Slidy/slidy.css">http://www.w3.org/Talks/Tools/Slidy/slidy.css</a></li>
+
+<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>
+
+<li>Or you can link to the compressed version of the script which is about
+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>
+<li>If you are using XHTML, remember to use &lt;/script&gt; and
+&lt;/style&gt; as per <a href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li>
+</ul>
+</li>
+</ul>
+
+<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; 
+&lt;head&gt; 
+  &lt;title&gt;Slide Shows in XHTML&lt;/title&gt; 
+  &lt;meta name="copyright" 
+   content="Copyright &amp;#169; 2005 your copyright notice" /&gt; 
+  &lt;link rel="stylesheet" type="text/css" media="screen, projection, print" 
+   href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" /&gt; 
+  &lt;script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" 
+   charset="utf-8" type="text/javascript"&gt;&lt;/script&gt; 
+  &lt;style type="text/css"&gt; 
+    &lt;!-- your custom style rules --&gt; 
+  &lt;/style&gt; 
+&lt;/head&gt;
+&lt;body&gt;
+   ... your slides marked up in XHTML ...
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div><div class="slide">
+<h1>Slide Shows in XHTML</h1>
+
+
+<ul>
+<li>You can now create accessible slide shows with ease</li>
+
+<li>Works across browsers and is operated like PowerPoint
+
+<ul>
+<li>Advance to next slide with mouse click or space bar</li>
+
+<li>Move forward/backward between slides with Cursor Left,
+Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
+keys</li>
+
+<li><strong>Home</strong> key for first slide, <strong>End</strong>
+ key for last slide</li>
+
+<li>The "<strong>C</strong>" key for an automatically generated
+table of contents (or click on "contents" on the toolbar)</li>
+
+<li>Function <strong>F11</strong> to go full screen and back</li>
+
+<li>The "<strong>F</strong>" key toggles the display of the footer</li>
+
+<li>The "<strong>A</strong>" key toggles display of current vs all slides
+
+<ul>
+<li>Use the "A" key when you want to view or print all slides</li>
+
+<li>Try it now to see how to include notes for handouts (this is
+explained in the notes following this slide)</li>
+</ul>
+</li>
+
+<li>Font sizes automatically adapt to browser window size
+
+<ul>
+<li>use <strong>S</strong> and <strong>B</strong> keys for
+manual control (or &lt; and &gt;, or the <strong>-</strong> and
+<strong>+</strong> keys on the number pad</li>
+<li>See also the <a href="#%2813%29">use of the meta element for
+adjusting the default Slidy behavior</a></li>
+</ul>
+</li>
+
+<li>Switching off JavaScript reveals all slides</li>
+</ul>
+</li>
+
+<li><em>Now move to next slide to see how it works</em></li>
+</ul>
+
+<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>
+(<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>,
+<a href="http://www.keio.ac.jp/">Keio</a>), All Rights
+Reserved.</p>
+</div><div class="slide">
+<h1>To get the W3C Blue Style</h1>
+
+
+<p>The head element should include the following link to the style
+sheet:</p>
+
+<pre>&lt;link rel="stylesheet" type="text/css" media="screen, projection, print"
+ href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css" /&gt; 
+</pre>
+
+<p>The body element's content should start with the following
+markup:</p>
+
+<pre>&lt;div class="background"&gt; 
+  &lt;img id="head-icon" alt="graphic with four colored squares"
+    src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" /&gt; 
+  &lt;object id="head-logo" title="W3C logo" type="image/svg+xml"
+    data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.svg"&gt;&lt;img
+   src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif" 
+   alt="W3C logo" id="head-logo-fallback" /&gt;&lt;/object&gt;
+&lt;/div&gt; 
+</pre>
+
+<p>This adds the logos on the top left and right corners of the
+slide.</p>
+
+<p>You are of course welcome to create your own slide designs.
+You can provide different styles and backgrounds for
+different slides (more details later).</p>
+
+<p>Use the <em>meta element</em> with <em>name="copyright"</em>
+for use in the slide show footer:</p>
+
+<pre>&lt;meta name="copyright" 
+content="Copyright &amp;#169; 2005 W3C (MIT, ERCIM, Keio)" /&gt; 
+</pre>
+</div><div class="slide">
+<h1>To use it off-line</h1>
+
+
+<ul>
+<li>You can download <a href="slidy.zip">slidy.zip</a> and unzip
+it to create a Slidy directory on your machine</li>
+
+<li>If you have cvs access to the W3C site you can check out the Slidy
+directory</li>
+
+<li>Remember to periodically check for updates</li>
+
+<li>You then have two choices:
+
+<ol>
+<li>Use relative URIs depending on your local setup to access the
+appropriate files. Use the same directory structure as on the W3C
+server, ie, ".../2005/Talks/...".</li>
+
+<li>Run a Web server on your machine so that the directory above
+can be accessed via <code>http://localhost/Talks/Tools/Slidy</code>
+and use the URIs of the form "/Talks/Tools/Slidy/slidy.css",
+"/Talks/Tools/Slidy/slidy.js".</li>
+</ol></li>
+
+<li>In both cases you can then publish your files on the W3C server
+unchanged.</li>
+
+<li><strong>NOTE</strong> Internet Explorer on Windows XP now disables
+scripting for web pages loaded directly from the local file system,
+a work around is to use another browser, e.g. Firefox or Opera</li>
+
+<li>Please feel free to create your own designs, and help us to build
+a gallery of Slidy styles.</li>
+
+<li>Here is a <a href="template.html">variant</a>
+on the W3C Blue style.</li>
+
+<li>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006)
+uses a notebook themed style</li>
+</ul>
+</div><div class="slide">
+<h1>Generate a Title Page</h1>
+
+
+<p>If you want a separate title page with the W3C blue style, the
+first slide should be as follows:</p>
+
+<pre>&lt;div class="slide cover"&gt; 
+ &lt;img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg" 
+  alt="Cover page images (keys)" class="cover" /&gt; 
+ &lt;br clear="all" /&gt;            
+ &lt;h1&gt;HTML Slidy: Slide Shows in XHTML&lt;/h1&gt; 
+ &lt;p&gt;&lt;a href="http://www.w3.org/People/Raggett/"&gt;Dave Raggett,&lt;/a&gt; 
+ &lt;a href="mailto:dsr@w3.org"&gt;dsr@w3.org&lt;/a&gt;&lt;/p&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p>The <a href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css">w3c-blue.css</a> 
+style sheet looks for the classes "slide" and "cover" on div
+and img elements using the CSS selector <em>div.slide.cover</em></p>
+
+<p>This technique can be used to assign your slides to different
+classes with a different appearence for each such class.</p>
+
+<p>Slidy also allows you to use different background markup for
+different slides, based upon shared class names, as in "foo" below.
+Backgrounds without additional class names are always shown except
+when the slide isn't transparent. You may need to tweak your
+custom style sheet.</p>
+
+<pre>&lt;div class="background foo"&gt;
+   ... background content ...
+&lt;div&gt;
+
+...
+
+&lt;div class="slide foo"&gt;
+   ... slide content ...
+&lt;div&gt;
+</pre>
+</div><div class="slide">
+<h1>Incremental display of slide contents</h1>
+
+
+<p>For incremental display, use class="incremental", for
+instance:</p>
+
+<ul class="incremental">
+<li>First bullet point</li>
+
+<li>Second bullet point</li>
+
+<li>Third bullet point</li>
+</ul>
+
+<p class="incremental">which is marked up as follows:</p>
+
+<pre class="incremental">&lt;ul class="incremental"&gt; 
+  &lt;li&gt;First bullet point&lt;/li&gt; 
+  &lt;li&gt;Second bullet point&lt;/li&gt; 
+  &lt;li&gt;Third bullet point&lt;/li&gt; 
+&lt;/ul&gt; 
+ 
+&lt;p class="incremental"&gt;which is marked up as follows:&lt;/p&gt; 
+ 
+&lt;pre class="incremental"&gt; 
+ ... 
+&lt;/pre&gt; 
+</pre>
+
+<div class="footnote">
+<p>An element is incrementally revealed if its parent element has
+class="incremental" or if itself has that attribute. Text nodes are
+not elements and are revealed when their parent element is revealed.
+You can use class="incremental" on any element except for &lt;br /&gt;.
+Use class="non-incremental" to override the effect of setting the
+parent element's class to incremental.</p>
+
+<p>Note: you will see a red asterisk on the left of the toolbar
+when there is still something more to reveal.</p>
+</div>
+</div><div class="slide">
+<h1>Create outline lists with hidden content</h1>
+
+
+<p>You can make your bullet points or numbered list items
+into outlines that you can expand or collapse</p>
+
+<ul class="outline">
+<li>Just add <em>class="outline"</em> to the ul or ol
+element. Click on this list item for more details.
+
+<ul>
+<li>The Slidy script will then treat the list
+as an outline list.</li>
+<li>Clicking on outline list items will expand/collapse
+block-level elements within that list item.</li>
+<li>Click on the above to make this list item
+collapse again.</li>
+</ul>
+</li>
+<li>Users will then see expand/collapse icons as appropriate
+and may click anywhere on the list item to change its state.
+This particular list item can't be expanded or collapsed.</li>
+<li class="expand">Add class="expand" to any li elements that
+you want to start in an expanded state.
+
+<ul>
+<li>By default Slidy hides all the block level elements within the
+outline list items unless you have specified class="expand".</li>
+<li>Such pre-expanded items can be collapsed by clicking on them.</li>
+</ul>
+</li>
+<li>Note expand/collapse icon highlighting requires browser
+support for :hover which isn't supported by IE6.
+
+<ul>
+<li>Microsoft says it will be supported by IE7 along with 
+many fixes for other CSS woes in IE6.</li>
+</ul>
+</li>
+</ul>
+
+<pre>&lt;ol class='outline'&gt;
+  &lt;!-- topic 1 starts collapsed --&gt;
+  &lt;li&gt;Topic 1
+    &lt;ol&gt;
+        &lt;li&gt;subtopic a&lt;/li&gt;
+        &lt;li&gt;subtopic b&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;!-- topic 2 starts expanded --&gt;
+  &lt;li class="expand"&gt;Topic 2
+    &lt;ol&gt;
+        &lt;li&gt;subtopic c&lt;/li&gt;
+        &lt;li&gt;subtopic d&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+</div><div class="slide">
+<h1>Make your images scale with the browser window size</h1>
+
+
+<p>For adaptive layout, use percentage widths on images, together
+with CSS positioning:</p>
+
+<ul>
+<li>CSS positioning is simpler and more reliable than using
+tables</li>
+</ul>
+
+<pre>&lt;div class="slide"&gt; 
+  &lt;h1&gt;Analysts - "Open standards programming will become 
+  mainstream, focused around VoiceXML"&lt;/h1&gt; 
+  &lt;!-- use CSS positioning and scaling for adaptive layout --&gt; 
+  &lt;img src="trends.png" width="50%" style="float:left" 
+   alt="projected growth of VoiceXML" /&gt; 
+
+  &lt;blockquote style="float:right;width: 35%"&gt; 
+    VoiceXML will dominate the voice environment, due to its 
+    flexibility and eventual multimodal capabilities 
+  &lt;/blockquote&gt;&lt;br clear="all" /&gt; 
+ 
+  &lt;p style="text-align:center"&gt;Source Data Monitor, March 
+  2004&lt;/p&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p>To work around a CSS rendering bug in IE relating
+to margins, you can set display:inline on floated elements.</p>
+</div><div class="slide">
+<h1>Incremental display of layered images</h1>
+
+
+<p>These can be marked up using CSS relative positioning, e.g.</p>
+
+<pre>&lt;div class="incremental" 
+ style="margin-left: 4em; position: relative"&gt; 
+  &lt;img src="face1.gif" alt="face" 
+   style="position: static; vertical-align: bottom"/&gt; 
+  &lt;img src="face2.gif" alt="eyes" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+  &lt;img src="face3.gif" alt="nose" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+  &lt;img src="face4.gif" alt="mouth" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p style="font-size: smaller;">You should also use transparent GIF
+images to avoid the IE/Win bug for alpha channel in PNG. A fix is
+expected in IE 7. A <a href="http://www.skyzyx.com/scripts/sleight.php">work around</a> is
+available on skyzyx.com. My thanks to <a href="http://www.webstandards.org/act/acid2/">ACID2</a> for the
+graphics.</p>
+
+<div class="incremental" style="margin-left: 4em; position: relative;"><img src="face1.gif" alt="face" style="position: static; vertical-align: bottom;">
+<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;">
+<img src="face4.gif" alt="mouth" style="position: absolute; left: 0pt; top: 0pt;"></div>
+</div><div class="slide">
+<h1>Include SVG Content</h1>
+
+
+<p>Inclusion of SVG content can be done using the object element,
+for example:</p>
+
+<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>
+
+<p>has been achieved by:</p>
+
+<pre>&lt;object data="example.svg" type="image/svg+xml" 
+  width="50%" height="10%" title="Indian Office logo"&gt; 
+    &lt;img src="example.png" width="50%" 
+          alt="Indian Office logo" /&gt; 
+&lt;/object&gt; 
+</pre>
+
+<p>This ensures that the enclosed png is displayed when the browser
+has no plugin installed or can't display SVG directly. Providing
+such a fall back is very important! Don't forget the alt text for
+people who can't see the image.</p>
+
+<p>However, there are caveats, see the next slide!</p>
+</div><div class="slide">
+<h1>Caveats with SVG+object</h1>
+
+
+<p>Adobe has recently withdrawn support for its SVG Viewer, so you are
+recommended to consider <a href="http://wiki.svg.org/Viewer_Implementations">alternatives</a>.
+If you still using the Adobe SVG viewer you should be aware of bugs
+when using the it with IE, Namely:</p>
+
+<ul>
+<li>Recent patches to Internet Explorer mean that the Adobe SVG Viewer
+version 3.03 no longer works with IE6. You are therefore recommended
+to uninstall version 3.03 and instead install <a href="http://www.adobe.com/svg/viewer/install/beta.html">Adobe SVG Viewer
+6.0 preview</a> if this is available to to you.</li>
+
+<li>IE6 makes a <em>copy</em> of the SVG file on the local disc
+when displaying it; but doesn't pass the original URI to the plugin</li>
+
+<li>As a result relative references from within the SVG to external
+resources (scripts, CSS, images, other SVG) will break.</li>
+
+<li>The work around is to use absolute references within your SVG.</li>
+
+<li>This problem doesn't effect Mozilla/Firefox. I don't know if
+this was fixed for IE7.</li>
+
+<li>On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
+property, and if used on backgrounds will always show through other
+content</li>
+</ul>
+
+<p>Recent versions of Firefox include native support for SVG, but there
+is a bug with Firefox in which the wrong SVG image will sometimes be
+shown when the page is reloaded. This is due to be fixed in Firefox 3.0.</p>
+
+<p>Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't
+support external style sheets or style elements within SVG. The work
+around is to set the properties via style attributes on the
+corresponding elements. In principle, browsers should honor the
+version attribute and fall back to the alternative within the object
+element if they don't support the version used by a given SVG file.</p>
+
+<p><em>Are there any tools for downgrading SVG to SVG Tiny?</em></p>
+</div><div class="slide">
+<h1>Additional Remarks</h1>
+
+
+<ul>
+<li>Slides are auto-numbered on the slide show footer</li>
+
+<li>You can link into the <a href="#%282%29">middle</a> of a slide
+show:
+
+<ul>
+<li>It works out which slide you want and hides the rest</li>
+
+<li>You can even link between slides in the same slide show</li>
+
+<li>Individual sides can be addressed with the syntax #(<em>slide
+number</em>),<br>
+e.g. slide 3 of this presentation is: <a href="#%283%29">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
+<ul>
+<li>Previous versions of Slidy used square brackets, which will
+also work.</li>
+</ul></li>
+<li>Note that the browser's back/forward buttons may not work as
+you might expect due to browser problems.</li>
+</ul>
+</li>
+
+<li>Adding "title" to the list of classes for div elements that serve
+as title pages will render the corresponding entry in the table of
+contents in bold italic text (press "C" now for an example)</li>
+
+<li>If your slides have more content than normal, use a <em>meta
+element</em> to request a smaller font
+
+<ul>
+<li>the following requests fonts to be one step smaller than
+the Slidy default for the current window width, and positive
+integers will make the fonts correspondingly larger</li>
+</ul>
+
+<pre>&lt;meta name="font-size-adjustment" content="-1" /&gt; 
+</pre>
+
+<ul>
+<li>Slidy uses JavaScript to dynamically set the font size on the
+body element, but it is okay to specify relative font changes on
+other elements within your own style sheet.</li>
+</ul>
+</li>
+
+<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
+to find and correct common markup problems</li>
+
+<li>The slide show script and style sheet can be used freely under
+W3C's <a href="http://www.w3.org/Consortium/Legal/copyright-software">software
+licensing</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
+use</a> policies</li>
+<li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
+I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
+on Slidy
+(<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
+</ul>
+</div><div class="slide">
+<h1>Localization</h1>
+
+
+<p>Slidy now includes support for localization</p>
+
+<ul>
+<li>The tool bar is localized according to the language of the presentation</li>
+<li>This is taken from the xml:lang or lang attributes on the html element</li>
+<li>The <a href="http://www.w3.org/Talks/Tools/Slidy/help.html">help file</a> is
+selected based upon your browser's language preferences</li>
+<li>As of 17th March 2006, the languages supported are: English, Spanish and
+Dutch</li>
+<li>If you would like to contribute localizations for other languages, please
+get in touch with Dave Raggett &lt;dsr@w3.org&gt;</li>
+<li>The following illustrates what was used for Spanish</li>
+</ul>
+<pre>// for each language there is an associative array
+var strings_es = {
+  "slide":"pág.",
+  "help?":"Ayuda",
+  "contents?":"Índice",
+  "table of contents":"tabla de contenidos",
+  "Table of Contents":"Tabla de Contenidos",
+  "restart presentation":"Reiniciar presentación",
+  "restart?":"Inicio"
+   };
+strings_es[helpText] =
+    "Utilice el ratón, barra espaciadora, teclas Izda/Dhca, " +
+    "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.";
+</pre>
+</div><div class="slide">
+<h1>Future Plans</h1>
+
+
+<p>Recent additions have included a table of contents, and a way to
+hide and reveal content in the spirit of outline lists. Further
+work is anticipated on the following:</p>
+
+<ul>
+<li>Collecting a gallery of good looking slide themes
+<ul>
+<li>Opportunities for graphics designers!</li>
+</ul>
+</li>
+<li>Getting SVG Tiny to work on IE without need for SVG plugin
+<ul>
+<li>Using scripts to dynamically convert SVG Tiny to VML</li>
+</ul>
+</li>
+<li>Alpha version of wysiwyg slide editor (see <a href="editor/editor-screenshot1.png">screenshot</a>)
+<ul>
+<li>Using contentEditable when available, otherwise
+falling back to textarea and plain text conventions</li>
+<li>Using XMLHttpRequest to dynamically reflect changes to server</li>
+</ul>
+</li>
+<li>Mechanism for remotely driving Slidy as part of distributed meetings
+<ul>
+<li>Using XMLHttpRequest to listen for navigation commands</li>
+<li>Using VoIP for accompanying audio and teleconferencing</li>
+<li>Synchronizing recorded spoken presentation with currently viewed slide</li>
+</ul>
+</li>
+<li>Filters from PowerPoint and Open Office
+<ul>
+<li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
+</ul>
+</li>
+</ul>
+
+<p>If you have comments, suggestions for improvements, or would
+like to volunteer your help with further work on Slidy,
+please contact <a href="http://www.w3.org/People/Raggett/">Dave Raggett</a> &lt;<a href="mailto:dsr@w3.org">dsr@w3.org</a>&gt;</p>
+</div><div class="slide">
+<h1>Acknowledgements</h1>
+
+
+<ul>
+<li>My thanks to everyone who sent in bug reports and feature
+requests</li>
+<li>Opera Software for implementing CSS @media projection and
+promoting the idea of using the Web for presentations with
+<a href="http://www.opera.com/support/tutorials/operashow/">Opera
+Show</a></li>
+<li><a href="http://tantek.com/">Tantek Çelik</a> for his
+pioneering work on applying JavaScript for slide presentations on
+other browsers</li>
+<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>
+<li>W3C's <a href="http://dev.w3.org/cvsweb/slidemaker/">slidemaker
+tool</a>, which uses a perl script to split an html file up into
+one file per slide with navigation buttons</li>
+<li>Early versions of <a href="http://www.w3.org/People/Raggett/tidy/">HTML
+Tidy</a> which supported a means to create presentations via splitting
+html files on h2 elements</li>
+<li>Many sites with advice on JavaScript work arounds for browser
+variations</li>
+<li>Microsoft for pioneering contentEditable and XMLHTTP which
+both provide tremendous opportunities for Web applications</li>
+<li>Microsoft Office which provided the impetus for creating
+Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
+</ul>
+
+<p class="smaller"><strong>Note</strong> that while Slidy and
+S5 were developed independently, both support the use of the
+class values "slide" and "handout" for div elements. Slidy doesn't
+support the "layout" class featured in S5 and Opera Show, but
+instead provides a more flexible alternative with the "background"
+class, which enables different backgrounds on different slides.</p>
+</div>
 <!-- END AUTO-GENERATION OF SLIDES-->
-
 
 

Trunk/contributors/JonathanLister/verticals/SlidyTiddly/plugins/SlidyAdaptorPlugin.js

@@ -191 +191 @@
         if(slidy) {
                 slidy = slidy.replace(/\r+/mg,"");
-                var regex_div = /<div([^>]*)>(.|\n)*?<\/div>/mg;
-                var regex_class = new RegExp("class=['|\"]([\\w ]+)['|\"]","mg");
-                var regex_meta = /<meta ((?:name|content) *= *[\"][^\"]*[\"](?: *))+ \/>/mg;
-                var regex_meta_inner = new RegExp("(\\w*) *= *['|\"](.*?)['|\"]","mg");
+                
+                // convert slide div's to tiddlers
+                var e = createTiddlyElement(null,"div");
+                e.innerHTML = slidy;
+                var divs = e.getElementsByTagName("div");
+                var div;
+                for(var i=0;i<divs.length;i++) {
+                        div = divs[i];
+                        if(div.className.indexOf("slide")!=-1) {
+                                var title = div.getElementsByTagName("h1")[0];
+                                title = title.textContent || title.innerText; // FF | IE
+                                var text = div.innerHTML.substring(div.innerHTML.indexOf("</h1>")+5);
+                                var t = new Tiddler(title);
+                                t.text = text;
+                                t.tags = ["slide"];
+                                if(div.className.indexOf("cover")!=-1) {
+                                        t.tags.push("cover");
+                                }
+                                tiddlers.push(t);
+                        }
+                }
+                
+                // add contents tiddler
+                t = new Tiddler("SlidyContents");
+                text = [];
+                for(i=0;i<tiddlers.length;i++) {
+                         text.push("[["+tiddlers[i].title+"]]");
+                }
+                t.text = text.join("\n");
+                tiddlers.push(t);
+                
+                // convert meta tags to tiddlers
+                var metas = e.getElementsByTagName("meta");
                 var meta_names = [
                         "copyright",
                         "font-size-adjustment"
                 ];
-                var regex_slide = "";
-                // convert slide div's to tiddlers
-                var div_match = slidy.match(regex_div);
-                var length = div_match ? div_match.length : 0;
-                for(var i=0;i<length;i++) {
-                        var div = div_match[i];
-                        var inner_match = regex_class.exec(div);
-                        if(inner_match) {
-&