ndw · tkg · Aug 11, 2011 · Aug 11, 2011 · Aug 11, 2011 · Aug 14, 2011
diff --git a/README.md b/README.md
@@ -1,18 +1,15 @@
-* Version: 0.9
-* Author: Norman Walsh
-* Date: 10 August 2011
+* Version: 0.1
+* Author: Tony Graham, based on CSS by Norman Walsh
+* Date: 11 August 2011
 
-# XML Summer School 2011 Slide Template
+# XML Summer School 2011 S5 Slide Template
 
 This project contains a skeletal project that provides the XML Summer
-School "look and feel" from web sources.
+School "look and feel" as a S5 theme.
 
-## HTML support
+See 's5slides.html' for sample.
 
-For authoring in HTML, see `src/slides.xml`
+Run 'style/s5slides.xsl' on 'src/slides.xml' to remake 's5slides.html'.
 
-## DocBook support
-
-For authoring in DocBook, see `src/dbslides.xml`
-
-You'll probably also have to ask Norm some questions.
+S5 itself is explicitly released into the Public Domain.  See
+http://meyerweb.com/eric/tools/s5/faq.html
diff --git a/css/slides.css b/css/slides.css
@@ -162,21 +162,20 @@ pre {
     padding: 10px;
 }
 
-.xml {
+pre.xml {
     background-color: #E6E6E6;
 }
 
-.xslt {
+pre.xslt {
     background-color: #FFFDCE;
 }
 
-.schema {
+pre.schema {
     background-color: #E5E7FE;
 }
 
-.other {
+pre.other {
     background-color: #C7FFFF;
-    color: #9E0000;
 }
 
 .xml .pi {
@@ -225,4 +224,3 @@ pre .var,
 pre .param {
     color: black;
 }
-
diff --git a/s5slides.html b/s5slides.html
@@ -0,0 +1,72 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Presentation title</title>
+  <meta name="version" content="S5 1.1" /><meta name="defaultView" content="slideshow" /><meta name="controlVis" content="hidden" /><link rel="stylesheet" href="ui/xmlss/slides.css" type="text/css" media="projection" id="slideProj" /><link rel="stylesheet" href="ui/xmlss/outline.css" type="text/css" media="screen" id="outlineStyle" /><link rel="stylesheet" href="ui/xmlss/print.css" type="text/css" media="print" id="slidePrint" /><link rel="stylesheet" href="ui/xmlss/opera.css" type="text/css" media="projection" id="operaFix" /><script src="ui/xmlss/slides.js" type="text/javascript"></script></head>
+  <body><div class="layout"><div id="controls"></div><div id="currentSlide"></div><div id="header"></div><div id="footer"><div class="license">Licensed under a Creative Commons Attribution-
+  <br />Noncommercial-Share Alike 3.0 Unported License</div><div class="content">www.xmlsummerschool.com</div></div></div><div class="presentation"><div class="slide"><div class="top"><h1>Presentation title</h1><h2>Xx September 2011</h2></div><h2 class="subtitle">Class title</h2><div class="author"><div class="name">Wile E. Coyote</div><div class="affiliation">Acme Corporation</div></div></div><div class="slide"><h1>Template Notes</h1><div class="slidecontent"><ul>
+        <li>This document demonstrates the slide deck.</li>
+        <li>You could write it by hand.</li>
+        <li>But I generate it from <code>src/slides.xml</code> with <code>style/slides.xsl</code>.</li>
+        <li>This presentation is designed to work at a resolution of 1024x768.</li>
+        <li>There are graphics for a 1280x1024 version, but I haven't crafted the CSS yet.</li>
+      </ul><p>The bits:</p><ul>
+        <li><code>slides.html</code> is this file.</li>
+        <li><code>css/slides.css</code> controls presentation.
+        <ul>
+          <li>Note that the foil/page/header/body/footer nesting is designed to make the footer
+          float to the bottom of the page. Changing the order or nesting of those divs may cause
+          problems.</li>
+        </ul>
+        </li>
+        <li><code>js/slides.js</code> controls the interactivity.</li>
+        <li>Suggestions for improvement most welcome.</li>
+      </ul></div></div><div class="slide"><h1>Learning Objectives</h1><div class="slidecontent"><p>Summary of the class</p><ol>
+        <li>Understand…</li>
+        <li>Learn…</li>
+        <li>Review…</li>
+      </ol></div></div><div class="slide"><h1>Contents</h1><div class="slidecontent"><p>Lecture</p><ol>
+        <li> </li>
+        <li> </li>
+        <li> </li>
+        <li> </li>
+        <li> </li>
+        <li> </li>
+      </ol><p>Tutorial Session</p><ol start="7">
+        <li> </li>
+        <li> </li>
+      </ol></div></div><div class="slide"><h1>XML Sample Code</h1><div class="slidecontent"><ul>
+        <li>Format for XML sample code</li>
+      </ul><pre class="xml">
+<span class="pi">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+<span class="el">&lt;document&gt;</span>
+  <span class="el">&lt;element <span class="att">attribute=</span><span class="attval">"value"</span>&gt;</span>
+    Content and an entity <span class="ent">&amp;gt;</span> - greater than.
+  <span class="el">&lt;/element&gt;</span>
+<span class="el">&lt;/document&gt;</span></pre></div></div><div class="slide"><h1>Schema Sample Code</h1><div class="slidecontent"><ul>
+        <li>Format for schema sample code (of any type)</li>
+      </ul><pre class="xml schema">
+<span class="pi">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+<span class="el">&lt;xs:schema <span class="att">xmlns:xs=</span><span class="attval">"http://www.w3.org/2001/XMLSchema"</span>&gt;</span>
+  <span class="el">&lt;xs:element <span class="att">name=</span><span class="attval">"element"</span> <span class="att">type=</span><span class="attval">"xs:string"</span>/&gt;</span>
+<span class="el">&lt;/xs:schema&gt;</span></pre></div></div><div class="slide"><h1>XSLT Sample Code</h1><div class="slidecontent"><ul>
+        <li>Format for XSLT sample code</li>
+      </ul><pre class="xml xslt">
+<span class="pi">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+<span class="xslt">&lt;xsl:stylesheet <span class="att">xmlns:xsl=</span><span class="attval">"http://www.w3.org/1999/XSL/Transform"</span>
+    <span class="att">xmlns:xs=</span><span class="attval">"http://www.w3.org/2001/XMLSchema"</span> <span class="att">version=</span><span class="attval">"2.0"</span>&gt;</span>
+<span class="el">&lt;html&gt;</span>
+    <span class="xslt">&lt;xsl:template <span class="att">match=</span><span class="attval">"element"</span>&gt;</span>
+        <span class="el">&lt;p&gt;</span>Found your XML element<span class="el">&lt;/p&gt;</span>
+        <span class="xslt">&lt;xsl:apply-templates/&gt;</span>
+    <span class="xslt">&lt;/xsl:template&gt;</span>
+<span class="el">&lt;/html&gt;</span>
+<span class="xslt">&lt;/xsl:stylesheet&gt;</span></pre></div></div><div class="slide"><h1>Other Sample Code</h1><div class="slidecontent"><ul>
+        <li>Format for other sample code (not XML, Schema or XSLT — e.g. XSL-FO, XQuery, Java</li>
+      </ul><pre class="other">function <span class="func">AC_AddExtension</span>(<span class="param">src</span>, <span class="param">ext</span>)
+{
+  <span class="kw">if</span> (<span class="func">src.indexOf</span>(<span class="str">'?'</span>) != <span class="const">-1</span>)
+    <span class="kw">return</span> <span class="func">src.replace</span>(<span class="re">/\?/</span>, <span class="var">ext</span>+<span class="str">'?'</span>);
+  <span class="kw">else</span>
+    <span class="kw">return</span> <span class="var">src</span> + <span class="var">ext</span>;
+}</pre></div></div></div></body>
+</html>
diff --git a/slides.html b/slides.html
@@ -1,7 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Presentation title</title>
-  <link rel="stylesheet" type="text/css" href="css/slides.css" /><script type="text/javascript" language="javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/slides.js"></script></head>
+  <link rel="stylesheet/less" type="text/css" href="css/slides.css" /><script type="text/javascript" language="javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/slides.js"></script><script src="js/less.js" type="text/javascript"></script></head>
   <body><div class="foil titlefoil"><div class="page"><div class="header"><h1>Presentation title</h1><h2>Xx September 2011</h2></div><div class="body"><h1>Class title</h1><h2>Wile E. Coyote</h2><h2>Acme Corporation</h2></div></div><div class="footer"><div class="license">Licensed under a Creative Commons Attribution-
   <br />Noncommercial-Share Alike 3.0 Unported License</div><div class="content">www.xmlsummerschool.com</div></div></div><div class="foil"><div class="page"><div class="header"><h1>Template Notes</h1></div><div class="body"><ul>
         <li>This document demonstrates the slide deck.</li>
@@ -77,4 +77,4 @@
 }</pre></div></div><div class="footer"><div class="license">Licensed under a Creative Commons Attribution-
   <br />Noncommercial-Share Alike 3.0 Unported License</div><div class="content">www.xmlsummerschool.com</div><div class="foilnumber">Slide 7</div></div></div><div class="foil" id="toc"><div class="page"><div class="header"><h1>Table of contents</h1></div><div class="body"><ul><li><span onclick="javascript:goto(1)">Template Notes</span></li><li><span onclick="javascript:goto(2)">Learning Objectives</span></li><li><span onclick="javascript:goto(3)">Contents</span></li><li><span onclick="javascript:goto(4)">XML Sample Code</span></li><li><span onclick="javascript:goto(5)">Schema Sample Code</span></li><li><span onclick="javascript:goto(6)">XSLT Sample Code</span></li><li><span onclick="javascript:goto(7)">Other Sample Code</span></li></ul></div></div><div class="footer"><div class="license">Licensed under a Creative Commons Attribution-
   <br />Noncommercial-Share Alike 3.0 Unported License</div><div class="content">www.xmlsummerschool.com</div></div></div></body>
-</html>
+</html>
diff --git a/style/s5slides.xsl b/style/s5slides.xsl
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Converts Norm's XHTML slide markup to S5-style XHTML. -->
+<!-- Author: Tony Graham -->
+<xsl:stylesheet
+    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    exclude-result-prefixes="html"
+    version="2.0">
+
+<xsl:import href="slides.xsl" />
+
+<xsl:strip-space elements="html:div html:body"/>
+
+<xsl:variable name="license" as="element()">
+  <div class="license">Licensed under a Creative Commons Attribution-
+  <br/>Noncommercial-Share Alike 3.0 Unported License</div>
+</xsl:variable>
+
+<xsl:variable name="footer-text" as="element()">
+  <div class="content">www.xmlsummerschool.com</div>
+</xsl:variable>
+
+<xsl:template match="html:head">
+  <xsl:copy>
+    <xsl:copy-of select="@*"/>
+    <xsl:apply-templates/>
+    <meta name="version" content="S5 1.1" />
+    <meta name="defaultView" content="slideshow" />
+    <meta name="controlVis" content="hidden" />
+    <link
+	rel="stylesheet" href="ui/xmlss/slides.css"
+	type="text/css" media="projection"
+	id="slideProj" />
+    <link rel="stylesheet" href="ui/xmlss/outline.css"
+	  type="text/css" media="screen"
+	  id="outlineStyle" />
+    <link rel="stylesheet" href="ui/xmlss/print.css"
+	  type="text/css" media="print"
+	  id="slidePrint" />
+    <link rel="stylesheet" href="ui/xmlss/opera.css"
+	  type="text/css" media="projection"
+	  id="operaFix" />
+    <script src="ui/xmlss/slides.js" type="text/javascript"></script>
+  </xsl:copy>
+</xsl:template>
+
+<xsl:template match="html:body">
+  <xsl:copy>
+    <xsl:copy-of select="@*"/>
+    <div class="layout">
+      <div id="controls"></div>
+      <div id="currentSlide"></div>
+      <div id="header"></div>
+      <div id="footer">
+	<xsl:sequence select="($license, $footer-text)"/>
+      </div>
+    </div>
+    <div class="presentation">
+      <xsl:apply-templates />
+    </div>
+  </xsl:copy>
+</xsl:template>
+
+<xsl:template match="html:body/html:div[contains(@class, 'titlefoil')]" priority="200">
+  <xsl:copy>
+    <xsl:copy-of select="@*"/>
+    <xsl:attribute name="class" select="'slide'" />
+    <div class="top">
+      <xsl:copy-of select="html:div[@class eq 'header']/*" />
+    </div>
+    <h2 class="subtitle">
+      <xsl:apply-templates
+	  select="html:div[@class eq 'body']/html:h1/node()" />
+    </h2>
+    <div class="author">
+      <div class="name">
+      <xsl:apply-templates
+	  select="html:div[@class eq 'body']/html:h2[1]/node()" />
+    </div>
+      <div class="affiliation">
+      <xsl:apply-templates
+	  select="html:div[@class eq 'body']/html:h2[2]/node()" />
+    </div>
+    </div>
+  </xsl:copy>
+</xsl:template>
+
+<xsl:template match="html:body/html:div" priority="100">
+  <xsl:copy>
+    <xsl:copy-of select="@*"/>
+    <xsl:attribute name="class" select="'slide'" />
+    <xsl:apply-templates select="html:h1"/>
+    <div class="slidecontent">
+      <xsl:apply-templates select="*[not(self::html:h1)]"/>
+    </div>
+  </xsl:copy>
+</xsl:template>
+
+</xsl:stylesheet>
diff --git a/ui/xmlss/1280x1024.png b/ui/xmlss/1280x1024.png
diff --git a/ui/xmlss/blank.gif b/ui/xmlss/blank.gif
diff --git a/ui/xmlss/bodybg.gif b/ui/xmlss/bodybg.gif
diff --git a/ui/xmlss/cc-1024.png b/ui/xmlss/cc-1024.png
diff --git a/ui/xmlss/cc-1280.png b/ui/xmlss/cc-1280.png
diff --git a/ui/xmlss/framing.css b/ui/xmlss/framing.css
@@ -0,0 +1,23 @@
+/* The following styles size, place, and layer the slide components.
+   Edit these if you want to change the overall slide layout.
+   The commented lines can be uncommented (and modified, if necessary) 
+    to help you with the rearrangement process. */
+
+/* target = 1024x768 */
+
+div#header, div#footer, .slide {width: 100%; top: 0; left: 0;}
+div#header {top: 0; height: 3em; z-index: 1;}
+div#footer {top: auto; bottom: 0; height: 2.5em; z-index: -5;}
+.slide {top: 0; width: 92%; padding: 3.5em 4% 4%; z-index: 2;  list-style: none;}
+div#controls {left: 50%; bottom: 0; width: 50%; z-index: 100;}
+div#controls form {position: absolute; bottom: 0; right: 0; width: 100%;
+  margin: 0;}
+#currentSlide {position: absolute; width: 10%; left: 45%; bottom: 1em; z-index: 10;}
+html>body #currentSlide {position: fixed;}
+
+/*
+div#header {background: #FCC;}
+div#footer {background: #CCF;}
+div#controls {background: #BBD;}
+div#currentSlide {background: #FFC;}
+*/
diff --git a/ui/xmlss/iepngfix.htc b/ui/xmlss/iepngfix.htc
@@ -0,0 +1,42 @@
+<public:component>
+<public:attach event="onpropertychange" onevent="doFix()" />
+
+<script>
+
+// IE5.5+ PNG Alpha Fix v1.0 by Angus Turnbull http://www.twinhelix.com
+// Free usage permitted as long as this notice remains intact.
+
+// This must be a path to a blank image. That's all the configuration you need here.
+var blankImg = 'ui/default/blank.gif';
+
+var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
+
+function filt(s, m) {
+ if (filters[f]) {
+  filters[f].enabled = s ? true : false;
+  if (s) with (filters[f]) { src = s; sizingMethod = m }
+ } else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
+}
+
+function doFix() {
+ if ((parseFloat(navigator.userAgent.match(/MSIE (\S+)/)[1]) < 5.5) ||
+  (event && !/(background|src)/.test(event.propertyName))) return;
+
+ if (tagName == 'IMG') {
+  if ((/\.png$/i).test(src)) {
+   filt(src, 'image');  // was 'scale'
+   src = blankImg;
+  } else if (src.indexOf(blankImg) < 0) filt();
+ } else if (style.backgroundImage) {
+  if (style.backgroundImage.match(/^url[("']+(.*\.png)[)"']+$/i)) {
+   var s = RegExp.$1;
+   style.backgroundImage = '';
+   filt(s, 'crop');
+  } else filt();
+ }
+}
+
+doFix();
+
+</script>
+</public:component>
diff --git a/ui/xmlss/opera.css b/ui/xmlss/opera.css
@@ -0,0 +1,7 @@
+/* DO NOT CHANGE THESE unless you really want to break Opera Show */
+.slide {
+	visibility: visible !important;
+	position: static !important;
+	page-break-before: always;
+}
+#slide0 {page-break-before: avoid;}
diff --git a/ui/xmlss/outline.css b/ui/xmlss/outline.css
@@ -0,0 +1,15 @@
+/* don't change this unless you want the layout stuff to show up in the outline view! */
+
+.layout div, #footer *, #controlForm * {display: none;}
+#footer, #controls, #controlForm, #navLinks, #toggle {
+  display: block; visibility: visible; margin: 0; padding: 0;}
+#toggle {float: right; padding: 0.5em;}
+html>body #toggle {position: fixed; top: 0; right: 0;}
+
+/* making the outline look pretty-ish */
+
+#slide0 h1, #slide0 h2, #slide0 h3, #slide0 h4 {border: none; margin: 0;}
+#slide0 h1 {padding-top: 1.5em;}
+.slide h1 {margin: 1.5em 0 0; padding-top: 0.25em;
+  border-top: 1px solid #888; border-bottom: 1px solid #AAA;}
+#toggle {border: 1px solid; border-width: 0 0 1px 1px; background: #FFF;}