X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=doc%2Fdemo.xhtml;h=0e5c8134ff136114ce58c6c8c568f5d8f20c2484;hb=77dee1505afc9d0791bcd9d29c4d6fb207be2d7c;hp=472982b3a10b72bc679d32deee348d654a102921;hpb=3c70fc13da0c911d97e8712343b6dfaffd42588f;p=hacks%2FsimpleWebSlides.git

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 472982b..0e5c813 100644
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -2,9 +2,7 @@
 <!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"
-      class="sws-aspect-16-9"
->
+<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
     <title>SimpleWebSlides</title>
 
@@ -15,16 +13,18 @@
 
     <!-- Load jQuery -->
     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+    <!-- Load the library -->
+    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
 
-    <!-- Initialize the library -->
-    <script src="../simpleWebSlides.js" type="text/javascript" >
-    </script>
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <!-- Load a custom Theme -->
-    <link rel="stylesheet"  title="Web 2.0"
-          href="../themes/webTwoPointO.css"
-          type="text/css" />
+    <!-- Load a custom Theme, the class-element marks this style-sheet
+      a "theme" that can be swtiched dynamicaly -->
+    <link class="sws-theme" rel="stylesheet"  title="Web 2.0"
+          href="../themes/webTwoPointO.css" type="text/css" />
+    <link class="sws-theme" rel="alternate stylesheet"  title="Default style"
+          href="../themes/default.css" type="text/css" />
+
     <!-- Customize some templates and initialize -->
 
     <script type="text/x-mathjax-config">
@@ -38,12 +38,10 @@
     </script>
 
     <script type="text/javascript">
-/*
-      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
-      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide; */
-      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
-
 
+//      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+//      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide; 
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
@@ -129,70 +127,69 @@ o.attr("style",a.join(";"));
           (videos, vector graphics, sounds,â¦)
         </li>
       </ul>
-      <p  class="sws-pause">But wait! I'm loosing all those nicely
-      rendered mathematical formulÃ¦!</p>
-      <p class="sws-pause"> You mean like this one<sup>*</sup> ?
-        $$
+      <h1> What's wrong with Powerpoint/Keynote/LibreOffice ?</h1>
+      <span class="sws-pause">Seriously ?</span>
+    </div>
+    <div class="sws-slide">
+      <h1>Can I really use SWS for <i>scientific</i> presentations?</h1>
+      <p  class="sws-pause">You sure can:</p>
+      <ul class="sws-pause">
+       <li> Exhibit A: $$
         F_n = \frac{1}{\sqrt{5}}\cdot\left(\frac{1+\sqrt{5}}{2}\right)^n-\frac{1}{\sqrt{5}}\cdot\left(\frac{1-\sqrt{5}}{2}\right)^n
-        $$
-      </p>
-      <p class="sws-pause">or that one<sup>*</sup> ?
-
-        $$
+        $$</li>
+       <li>Exihbit B: $$
         \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
-        $$
-      </p>
-      <p class="sws-pause">*: All this is done
+        $$</li>
+      </ul>
+      <p class="sws-pause"> All this is done
         using <a href="http://www.mathjax.org">MathJax!</a> and
         written like this:<br/>
 <pre><code>
-    \frac{
-          \Gamma\cup\{x\mapsto t\}\vdash e : s
-    }{
-          \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
+    \frac{ \Gamma\cup\{x\mapsto t\}\vdash e : s
+    }{  \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
     }
 </code></pre>
 </p>
     </div>
-    <div class="sws-slide">
-      <h1>A simple example</h1>
-      <p class="sws-onframe-1_3">
-      A minimal slide, with no animation looks like this:
-<pre><code>
-     &lt;div <em>class="sws-slide"</em>&gt;
-          &lt;h1&gt;Slide title&lt;/h1&gt;
-             Hello world!
-     &lt;/div&gt;
-</code></pre>
-</p>
-<p class="sws-pause">
-  You can also reveal things progressively like this:
-  <pre><code>
-      &lt;p&gt; Text 1&lt;/p&gt;
-      &lt;p <em>class="sws-pause"</em>&gt;
-      Text 2 (appears afterwards)
-      &lt;/p&gt;
-  </code></pre>
-</p>
-<p class="sws-pause">
-  You can also set an element to appear on specific frames:
-  <pre><code>
-      &lt;p&gt; Text 1&lt;/p&gt;
-      &lt;p <em>class="sws-onframe-1-5_9"</em>&gt;
-      Appears on frame 2, 3, 4, 5, 6 and 10 of the current slide
+
+<div class="sws-slide">
+  <h1>A simple example</h1>
+  <p class="sws-onframe-1_3">
+    A minimal slide, with no animation looks like this:
+    <code>
+      &lt;div <em>class="sws-slide"</em>&gt;
+      <![CDATA[ <h1> Slide title </h1>
+               Hello world!
+               </div> ]]>
+                        </code>
+  </p>
+  <p class="sws-pause">
+    You can also reveal things progressively like this:
+    <code><![CDATA[
+      <p> Text 1 </p>
+      <p ]]><em>class="sws-pause"</em><![CDATA[> Text 2 (appears afterwards) </p>]]>
+    </code>
+  </p>
+  <p class="sws-pause">
+    You can also set an element to appear on specific frames:
+    <code><![CDATA[
+     <p>Text1</p>
+     <p ]]> <em>class="sws-onframe-1-5_9"</em> <![CDATA[ >
+      Appears on frame 1, 2, 3, 4, 5, and 9 of the current slide
       (frame numbering starts at 0).
-      &lt;/p&gt;
-  </code></pre>
-</p>
-    </div>
+     </p> ]]>
+    </code>
+  </p>
+</div>
 <div class="sws-slide">
   <h1>Scripting your presentation</h1>
   <p>
     Of course, you can script your presentation with Javascript!<br/>
     You just need to add the <code>script</code> element somewhere in
     the current <code>div</code>
-    <pre><code>
-&lt;script type="text/javascript"&gt;
+    <code>
+<![CDATA[
+ <script type="text/javascript">
     function zoom_title (canvas) {
         var h1 = canvas.find("h1");
         var old_size = h1.css('font-size');
@@ -200,15 +197,15 @@ o.attr("style",a.join(";"));
                .animate({"font-size":old_size }, 300);
     };
     //Call the zoom_title function on the 4th and 7th frame
-    <em>SWS.Presentation.registerCallback("3_6", zoom_title);</em>
-&lt;script&gt;
-</code></pre>
+    ]]><em>SWS.Presentation.registerCallback("3_6", zoom_title);</em><![CDATA[
+</script>]]>
+</code>
     (That's not a bug, you should keep pressing next, see how many
     steps there are on this slide)
   </p>
 
 <script type="text/javascript">
-  SWS.Presentation.registerCallback("4_7", zoom_title);
+  SWS.Presentation.registerCallback("3_6", zoom_title);
 </script>
 
 </div>
@@ -369,6 +366,9 @@ Of course we can animate it with some javascript!
     BTW did you see how I changed the transition effect for the
     previous slide ?
   </p>
+  <script type="text/javascript">
+    SWS.Presentation.registerCallback("1", zoom_title);
+  </script>
 </div>
 
   </body>
