diff options
| author | Matthew Burgess <matthew@linuxfromscratch.org> | 2013-10-08 20:03:29 +0000 |
|---|---|---|
| committer | Matthew Burgess <matthew@linuxfromscratch.org> | 2013-10-08 20:03:29 +0000 |
| commit | 15c7d39533a1eb1da0748011f3378fd0f02ed14d (patch) | |
| tree | a7ed12df60c5ffd4d00a570804c51470bfb8b0f5 /stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html | |
| parent | 09a35dd7178070f01a7961d2ded39e11ba2aac83 (diff) | |
Update stylesheets to docbook-xsl-1.78.1.
git-svn-id: http://svn.linuxfromscratch.org/LFS/trunk/BOOK@10355 4aa44e1e-78dd-0310-a6d2-fbcd4c07a689
Diffstat (limited to 'stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html')
| -rwxr-xr-x | stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html | 911 |
1 files changed, 911 insertions, 0 deletions
diff --git a/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html b/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html new file mode 100755 index 000000000..69f72f635 --- /dev/null +++ b/stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/slidy/Overview.html @@ -0,0 +1,911 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html lang="en-US"> +<head> +<meta name="generator" content= +"HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org" /> +<title>HTML Slidy</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta name="copyright" content= +"Copyright © 2005-2010 W3C (MIT, ERCIM, Keio)" /> +<meta name="duration" content="5" /> +<meta name="font-size-adjustment" content="-2" /> +<link rel="stylesheet" href="styles/slidy.css" type="text/css" /> +<link rel="stylesheet" href="styles/w3c-blue.css" type="text/css" /> +<script src="scripts/slidy.js" charset="utf-8" type="text/javascript"> +</script> +</head> +<body> +<div class="background"><img alt="" id="head-icon" +src="graphics/icon-blue.png" /><object id="head-logo" +data="graphics/w3c-logo-white.svg" type="image/svg+xml" +title="W3C logo"><a href="http://www.w3.org/"><img +alt="W3C logo" id="head-logo-fallback" +src="graphics/w3c-logo-white.gif" /></a></object></div> + +<div class="background slanty"> +<img src="graphics/w3c-logo-slanted.jpg" alt="slanted W3C logo" /> +</div> +<div class="slide cover title"> + <!-- hidden style graphics to ensure they are saved with other content --> + <img class="hidden" src="graphics/bullet.png" alt="" /> + <img class="hidden" src="graphics/fold.gif" alt="" /> + <img class="hidden" src="graphics/unfold.gif" alt="" /> + <img class="hidden" src="graphics/fold-dim.gif" alt="" /> + <img class="hidden" src="graphics/nofold-dim.gif" alt="" /> + <img class="hidden" src="graphics/unfold-dim.gif" alt="" /> + <img class="hidden" src="graphics/bullet-fold.gif" alt="" /> + <img class="hidden" src="graphics/bullet-unfold.gif" alt="" /> + <img class="hidden" src="graphics/bullet-fold-dim.gif" alt="" /> + <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt="" /> + <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt="" /> + +<img src="graphics/keys2.jpg" alt="Cover page images (keys)" + class="cover" /><br clear="all" /> +<h1>HTML Slidy: Slide Shows in HTML and XHTML</h1> + +<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>, +<<a href="mailto:dsr@w3.org">dsr@w3.org</a>><br /> +<br /> +<br /> +<br /> +<br /><em>Hit the space bar or swipe left for next slide</em></p> +</div> + +<div class="slide"> +<h1>Slide Shows in HTML and 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, space bar or swipe left</li> + +<li>Move forward/backward between slides with Cursor Left, +Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong> +keys, or swipe left or right</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 or +swipe up or down</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>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 < and >, or the <strong>-</strong> and +<strong>+</strong> keys on the number pad</li> +<li>Use CSS to set a relative font size on a given slide to make +the content bigger or smaller than on other slides</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-2010 <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="handout"> +<p>For handouts, its often useful to include extra notes using a +div element with class="handout" following each slide, as in:</p> + +<pre> +<div class="slide"> + <em>... your slide content ...</em> +</div> + +<div class="handout"> + <em>... stuff that only appears in the handouts ...</em> +</div> +</pre> +</div> + +<div class="slide"> +<h1>What you need to do</h1> + +<ul> +<li>Each presentation is a single XHTML file</li> + +<li>Each slide is enclosed in <em><div class="slide"> ... +</div></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/Slidy2/styles/slidy.css">http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css</a></li> + +<li>The slide show script: <a href= +"http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js">http://www.w3.org/Talks/Tools/Slidy2/scripts/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/Slidy2/scripts/slidy.js.gz">http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz</a></li> +<li>If you are using XHTML, remember to use </script> and +</style> as per <a +href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li> +</ul> +</li> +</ul> + +<pre> +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> +<head> + <title>Slide Shows in XHTML</title> + <meta name="copyright" + content="Copyright &#169; 2005 your copyright notice" /> + <link rel="stylesheet" type="text/css" media="screen, projection, print" + href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" /> + <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js" + charset="utf-8" type="text/javascript"></script> + <style type="text/css"> + <!-- your custom style rules --> + </style> +</head> +<body> + ... your slides marked up in XHTML ... +</body> +</html> +</pre> +</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> +<link rel="stylesheet" type="text/css" media="screen, projection, print" + href="http://www.w3.org/Talks/Tools/Slidy2/styles/w3c-blue.css" /> +</pre> + +<p>The body element's content should start with the following +markup:</p> + +<pre> +<div class="background"> + <img id="head-icon" alt="graphic with four colored squares" + src="http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png" /> + <object id="head-logo" title="W3C logo" type="image/svg+xml" + data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img + src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif" + alt="W3C logo" id="head-logo-fallback" /></object> +</div> +</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> +<meta name="copyright" +content="Copyright &#169; 2005-2009 W3C (MIT, ERCIM, Keio)" /> +</pre> +</div> + +<div class="slide"> +<h1>Upgrading from previous versions of Slidy</h1> + +<ul> +<li>This uses a new version of the HTML Slidy script</li> +<li>It is designed to work better with other scripts, +e.g. for UI controls within your slides +<ul> +<li>Only adds one global name "w3c_slidy"</li> +<li>Doesn't interfere with other scripts that set event handers +such as onload on body element</li> +</ul> +</li> +<li>Works for slides delivered as text/html and application/xhtml+xml</li> +<li>New presentation timer feature</li> +<li>Initial prompt on first slide to help newcomers to Slidy</li> +<li>Better support for styling slides and printing them</li> +<li>Requires additional style rules, so new script won't work +with old presentations without changes to their style sheets +<ul> +<li>See <a href="styles/slidy.css">slidy.css</a>, and +<a href="styles/w3c-blue.css">w3c-blue.css</a></li> +</ul> +</li> +<li>But old presentations will work unchanged as they refer to +the old script!</li> +</ul> +</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/Slidy2</code> +and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css", +"/Talks/Tools/Slidy2/scripts/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>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006) +uses a notebook themed style</li> +</ul> +</div> + +<div class="slide"> +<h1>Timing Your Presentation</h1> + +<ul> +<li>Sometimes it is handy to know just how much time you have to +left to finish your presentation</li> +<li>To get this feature, add the following markup to the +content of the head element, replacing 5 by the duration +of your presentation in minutes +<pre><meta name="duration" content="5" /></pre> +</li> +<li>The time left in minutes and seconds is shown in the footer +next to the slide number</li> +<li>The clock starts to run when you move away from the first slide</li> +<li>Moving back to the first slide pauses the clock</li> +</ul> + + +</div> + +<div class="slide slanty"> +<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> +<div class="slide cover"> + <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg" + alt="Cover page images (keys)" class="cover" /> + <br clear="all" /> + <h1>HTML Slidy: Slide Shows in XHTML</h1> + <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a> + <a href="mailto:dsr@w3.org">dsr@w3.org</a></p> +</div> +</pre> + +<p>The <a +href="http://www.w3.org/Talks/Tools/Slidy2/graphics/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> +<div class="background foo"> + ... background content ... +<div> + +... + +<div class="slide foo"> + ... slide content ... +<div> +</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"> +<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"> + ... +</pre> +</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 <br />. +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> +<ol class='outline'> + <!-- topic 1 starts collapsed --> + <li>Topic 1 + <ol> + <li>subtopic a</li> + <li>subtopic b</li> + </ol> + </li> + <!-- topic 2 starts expanded --> + <li class="expand">Topic 2 + <ol> + <li>subtopic c</li> + <li>subtopic d</li> + </ol> + </li> +</ol> +</pre> +</div> + +<!-- useful info at http://www.howtocreate.co.uk/wrongWithIE/ --> +<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> +<div class="slide"> + <h1>Analysts - "Open standards programming will become + mainstream, focused around VoiceXML"</h1> + <!-- use CSS positioning and scaling for adaptive layout --> + <img src="trends.png" width="50%" style="float:left" + alt="projected growth of VoiceXML" /> + + <blockquote style="float:right;width: 35%"> + VoiceXML will dominate the voice environment, due to its + flexibility and eventual multimodal capabilities + </blockquote><br clear="all" /> + + <p style="text-align:center">Source Data Monitor, March + 2004</p> +</div> +</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> +<div class="incremental" + style="margin-left: 4em; position: relative"> + <img src="graphics/face1.gif" alt="face" + style="position: static; vertical-align: bottom"/> + <img src="graphics/face2.gif" alt="eyes" + style="position: absolute; left: 0; top: 0" /> + <img src="graphics/face3.gif" alt="nose" + style="position: absolute; left: 0; top: 0" /> + <img src="graphics/face4.gif" alt="mouth" + style="position: absolute; left: 0; top: 0" /> +</div> +</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="graphics/face1.gif" alt= +"face" style="position: static; vertical-align: bottom;" /> +<img src="graphics/face2.gif" alt="eyes" style= +"position: absolute; left: 0pt; top: 0pt;" /> <img src="graphics/face3.gif" +alt="nose" style="position: absolute; left: 0pt; top: 0pt;" /> +<img src="graphics/face4.gif" alt="mouth" style= +"position: absolute; left: 0pt; top: 0pt;" /></div> +</div> + +<div class="slide"> +<h1>How to center content vertically and horizontally</h1> +<div class="vbox"></div> +<div class="hbox"> +<p>Within the div element for your slide:</p> +<pre> +<div class="vbox"></div> +<div class="hbox"> +Place the content here +</div> +</pre> +<p>and style it with the following:</p> +<pre> +div.vbox { + float: left; + height: 40%; width: 50%; + margin-top: -220px; +} +div.hbox { + width:60%; margin-top: 0; + margin-left:auto; margin-right:auto; + height: 60%; + border:1px solid silver; + background:#F0F0F0; + overflow:auto; + text-align:left; + clear:both; +} +</pre> + +<p>The above styling is included in <a href="styles/w3c-blue.css">w3c-blue.css</a>, +which is designed to be used with <a href="styles/slidy.css">slidy.css</a>, but you +are encouraged to develop your own style sheet with your own look and feel.</p> +</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="graphics/example.svg" type= +"image/svg+xml" title="Indian Office logo" height="10%" width= +"50%"><img src="graphics/example.png" alt="Indian Office logo" width= +"50%" /></object></div> + +<p>has been achieved by:</p> + +<pre> +<object data="graphics/example.svg" type="image/svg+xml" + width="50%" height="10%" title="Indian Office logo"> + <img src="graphics/example.png" width="50%" + alt="Indian Office logo" /> +</object> +</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>Most modern browsers generally support SVG SVG Tiny 1.1 or better +natively without the need for a plugin</li> + +<li>If you need to use Internet Explorer you are advised to upgrade +to IE9 which includes native support for SVG.</li> + +<li>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>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> +</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="#(2)">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= +"#(3)">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> +<meta name="font-size-adjustment" content="-1" /> +</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, e.g.</li> +</ul> +<pre>div.slide.large { font-size: 200% }</pre> +</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 and automatic translation</h1> + +<p>Slidy now includes support for localization</p> + + "es":this.strings_es, + "ca":this.strings_ca, + "cs":this.strings_cs, + "nl":this.strings_nl, + "de":this.strings_de, + "pl":this.strings_pl, + "fr":this.strings_fr, + "hu":this.strings_hu, + "it":this.strings_it, + "el":this.strings_el, + "jp":this.strings_ja, + "zh":this.strings_zh, + "ru":this.strings_ru, + "sv":this.strings_sv + +<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/Slidy2/help/help.html">help file</a> is +selected based upon your browser's language preferences</li> +<li>As of 29th July 2010, the languages supported are: English, +Spanish, Catalonian, Czech, Dutch, German, Polish, French, +Hungarian, Italian, Greek, Japanese, Chinese, Russian and +Swedish</li> +<li>If you would like to contribute localizations for other languages, +please get in touch with Dave Raggett <dsr@w3.org></li> +<li>The following illustrates what was used for Spanish</li> +</ul> +<pre> +// for each language there is an associative array + 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" + }, + help_es: + "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " + + "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.", +</pre> + +<p><strong>Note:</strong> Slidy now works with <a +href="http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.w3.org%2FTalks%2FTools%2FSlidy2%2F&sl=en&tl=fr&history_state0=">current slides translated into French</a>. Use +right mouse button to open frame without Google header. To disable +automatic translation of the content of particular elements add +<code>class="notranslate"</code>, see <a href="http://googlewebmastercentral.blogspot.com/2008/10/helping-you-break-language-barrier.html">breaking the language barrier</a>.</p> +</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. The +script has been rewritten to make it easier to combine with other +scripts, e.g. for UI controls, and support swipes for navigation on +touch screen devices. 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>Bob Ferris has worked on <a +href="https://github.com/zazi/slidy_tud/blob/master/README.md">a +number of UI extensions</a> which could be incorporated into the +W3C slidy script.</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> +<li>Note that IE9 introduces native SVG support, so it may +no longer be worth working on SVG to VML for rendering of SVG</li> +</ul> +</li> +<li>Pre-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> <<a href= +"mailto:dsr@w3.org">dsr@w3.org</a>></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> + +<div class="slide"> +<h1>Acknowledgements</h1> + +<p>The following people have contributed localizations:</p> + +<ul> +<li>Emmanuelle Gutiérrez y Restrepo, Spanish</li> +<li>Joan V. Baz, Catalan</li> +<li>Jakub Vrána, Czech</li> +<li>Ruud Steltenpool, Dutch</li> +<li>Beat Vontobel, German</li> +<li>Krzysztof Kotowicz, Polish</li> +<li>Tamas Horvath, Hungarian</li> +<li>Creso Moraes, Brazilian Portuguese</li> +<li>Giuseppe Scollo, Italian</li> +<li>Konstantinos Koukopoulos, Greek</li> +<li>Yoshikazu Sawa (澤 義和), Japanese</li> +<li>Shelley Shyan, Chinese</li> +<li>Andrew Pantyukhin, Russian</li> +<li>Saasha Metsärantala, Swedish</li> +</ul> + +<p>The following people have contributed bug reports:</p> + +<ul> +<li>Ivan Herman</li> +<li>Steve Bratt</li> +<li>Peter Patel-Schneider</li> +<li>Matthew Coller</li> +<li>Rune Heggtveit</li> +<li>Gopal Venkatesan</li> +<li>Cay Horstmann</li> +<li>Schuyler Duveen</li> +<li>Matteo Nannini</li> +<li>Ralph Swick</li> +<li>Jakub Vrána</li> +<li>Philip Bolt</li> +<li>Jon Frost</li> +<li>Jonathan Chetwynd</li> +<li>Nicolas Frisby</li> +</ul> + +<p>Douglas Crockford for <a +href="http://www.crockford.com/javascript/jsmin.html">jsmin</a> +which was used to minify the script before compressing it with gzip.</p> +</div> +</body> +</html> |