diapositives/Slidy/template.html
author viric@mandarina
Sun, 14 Dec 2008 20:00:34 +0000
changeset 252 d3a405d0742f
permissions -rw-r--r--
Diapositives, primera entrada

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Slidy template for W3C Blue2 Style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
<meta name="font-size-adjustment" content="-1" />
<link rel="stylesheet" href="../Slidy/w3c-blue2.css"
 type="text/css" media="screen, projection, print" />
<script src="../Slidy/slidy.js" type="text/javascript">
</script>
</head>
<body>
<!-- this defines the slide background -->

<div class="background">
  <div class="header">
  <!-- sized and colored via CSS -->
  </div>
  <!-- hidden style graphics to ensure they are saved with other content -->
  <img class="hidden" src="../Slidy/bullet.png" alt="" />
  <img class="hidden" src="../Slidy/fold.bmp" alt="" />
  <img class="hidden" src="../Slidy/unfold.bmp" alt="" />
  <img class="hidden" src="../Slidy/fold-dim.bmp" alt="" />
  <img class="hidden" src="../Slidy/nofold-dim.bmp" alt="" />
  <img class="hidden" src="../Slidy/unfold-dim.bmp" alt="" />
  <img class="hidden" src="../Slidy/bullet-fold.gif" alt="" />
  <img class="hidden" src="../Slidy/bullet-unfold.gif" alt="" />
  <img class="hidden" src="../Slidy/bullet-fold-dim.gif" alt="" />
  <img class="hidden" src="../Slidy/bullet-nofold-dim.gif" alt="" />
  <img class="hidden" src="../Slidy/bullet-unfold-dim.gif" alt="" />

  <div class="footer">
  <object id="w3c-logo"
  data="../Slidy/w3c-logo-blue.svg" type="image/svg+xml"
  title="W3C logo"><a href="http://www.w3.org/"><img
  alt="W3C logo" id="w3c-logo-fallback"
  src="../Slidy/w3c-logo-blue.gif" /></a></object>

  <!-- modify the following text as appropriate -->
  Presentation Name<br />
  Event, Location, Month Year
  </div>
</div>

<div class="slide cover">
<div class="header">
<h1>Slidy template for W3C Blue2 Style</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;</p>
</div>
<img src="../Slidy/keys.jpg" class="cover"
alt="W3C as letters on 3 plastic buttons from a keyboard" />
<h2>Event, Location, Month Year</h2>
</div>

<div class="slide">
<h1>W3C Blue2 Style I - Document Structure</h1>

<p class="subhead">To get the W3C Blue2 Style:</p>

<p>The xhtml file should match the following template, but
please modify the content of the title element as appropriate
for your presentation. The relative links below assume
that your presentation is in a directory like
/2005/Talks/your-slide-dir and should be modified as needed,
or you can use absolute links, as generated by comma slidy.</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Slidy template for W3C Meetings&lt;/title>
&lt;meta name="copyright" content="Copyright &amp;#169; 2005 W3C (MIT, ERCIM, Keio)" /&gt;
&lt;link rel="stylesheet" href="../Slidy/w3c-blue2.css" type="text/css"
media="screen, projection, print" /&gt;
&lt;script src="../Slidy/slidy.js" type="text/javascript"&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  ... background, cover slide ...
  &lt;div class="slide"&gt;
    &lt;h1&gt;Introduction&lt;/h1&gt;
    ... slide content ...
  &lt;/div&gt;
  ... other slides ...
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<div class="slide">
<h1>W3C Blue2 Style II - Background and Cover</h1>

<p class="subhead">To get the slide background and cover page:</p>

<p>The body element's content should start with the following
markup, but please modify the heading and contact details
as appropriate:</p>

<pre>
&lt;div class="background"&gt;
  &lt;div class="header"&gt; &lt;/div&gt;
  &lt;img src="../Slidy/bullet.png" alt="hidden bullet" /&gt;
  &lt;div class="footer"&gt;
    &lt;object id="w3c-logo"
    data="../Slidy/w3c-logo-blue.svg" type="image/svg+xml"
    title="W3C logo"&gt;&lt;a href="http://www.w3.org/"&gt;&lt;img
    alt="W3C logo" id="w3c-logo-fallback"
    src="../Slidy/w3c-logo-blue.gif" /&gt;&lt;/a&gt;&lt;/object&gt;
    &lt;!-- modify the following text as appropriate --&gt;
    Presentation Name&lt;br /&gt;
    Event, Location, Month Year
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="slide cover"&gt;
  &lt;div class="header"&gt;
    &lt;h1&gt;Slidy template for W3C Blue2 Style&lt;/h1&gt;
    &lt;p&gt;&lt;a href="http://www.w3.org/People/Raggett/"&gt;Dave Raggett&lt;/a&gt;,
    &amp;lt;&lt;a href="mailto:dsr@w3.org"&gt;dsr@w3.org&lt;/a&gt;&amp;gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;img src="../Slidy/keys.jpg" class="cover"
  alt="W3C as letters on 3 plastic buttons from a keyboard" /&gt;
&lt;/div&gt;
</pre>
</div>

<div class="slide">
<h1>Further information</h1>

<ul>
<li>Avoid placing too much content on each slide, no one will remember
it all, and it will overflow the slide design.</li>
<li>For further guidance on slide markup see the <a 
href="http://www.w3.org/Talks/Tools/Slidy">Slidy pages</a></li>
<li>If you want to print all the slides, press the "A" key to toggle
to the "all slides view" then use the browser's print function in the
normal way.</li>
<li>The comma slidy tool can be used with all.htm files in the old
W3C slide format, for example:
<pre>http://www.w3.org/2005/Talks/0605-sb-acintroduction/all.htm,slidy</pre>
</li>
<li>You are advised to save the output from the tool to a different
location and make it available Public, Members only or Team restricted
as appropriate.</li>
<li>If you want to view slides offline, be careful to save the slides
with all of the content (see browser's <em>Save As</em> function, and
<em>"Web Page, complete"</em> for the save as type).</li>
<li>Firefox users may want the <a
href="http://extensionroom.mozdev.org/more-info/autohide">autohide</a>
extension to hide the toolbars when entering full screen with F11</li>
<li>If you get stuck then <a href="http://www.w3.org/Team/Raggett/">Dave
Raggett</a> should be able to help.</li>
</ul>
</div>

<div class="slide">
<h1>Using SVG for great looking graphics</h1>

<ul>
<li>If you want to include graphics in SVG, you should stick to SVG
Tiny to increase the chance of people seeing it on whatever browser
they are using. Always, provide a fallback as a JPEG, PNG or GIF.</li>
<li>The use of SVG may result in users being prompted to install
a plugin. The Adobe SVG plugin is reasonably effective, but an
alternative may be to switch to a browser with native SVG support.</li>
<li>Some versions of browsers implement SVG in a brittle way that
may cause the browser to crash. If this happens to you, please
consider switching to a different version. Alternatively, you could
strip out the object tag and just use the img element</li>
<li>The W3C logo in the footer uses SVG for jaggy free scaling
via the markup for the slide background, see <a href="#(3)">slide 3</a></li>
<li>Firefox users on Windows should install the <a
href="http://plugindoc.mozdev.org/windows.html">Adobe SVG Viewer 6.0</a>,
or <a href="http://www.mozilla.org/">install Firefox 1.5</a> which
has native SVG support.</li>
</ul>
</div>

</body>
</html>