X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=doc%2Fdemo.xhtml;h=77510ae0efe014a9f0bc38197ec38b80c911e966;hb=2bb4eb6ce055a1c5c5e587c9102f09078b185dbf;hp=7955f1dbd40d1795fb94a92fd189a00ea59c3835;hpb=84940d8f7c885110f6ce355ba467dba4f71d7f4d;p=hacks%2FsimpleWebSlides.git

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 7955f1d..77510ae 100644
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -2,7 +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">
+<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
     <title>SimpleWebSlides</title>
 
@@ -13,17 +13,17 @@
 
     <!-- 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 -->
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <script src="../simpleWebSlides.js" type="text/javascript" >
-    </script>
+    <!-- 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="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
+    <link class="sws-theme" rel="alternate stylesheet"  title="Default style"  href="../themes/default.css" type="text/css" />
 
-    <!-- Load a custom Theme -->
-    <link rel="stylesheet"  title="Web 2.0"
-          href="../themes/webTwoPointO.css"
-          type="text/css" />
     <!-- Customize some templates and initialize -->
 
     <script type="text/x-mathjax-config">
@@ -37,11 +37,10 @@
     </script>
 
     <script type="text/javascript">
-/*
-      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+
+//      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.slideChangeHorizontalSlide;
       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
@@ -83,7 +82,7 @@ o.attr("style",a.join(";"));
       <div class="centerbox">
         <h1>SimpleWebSlides</h1>
         <h1>An <em>HTML</em><img style="height:28pt"
-             src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
+             src="HTML5_Badge.svg" alt="5"/>
           Presentation framework</h1>
         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
       </div>
@@ -116,7 +115,7 @@ o.attr("style",a.join(";"));
     </div>
 
     <div class="sws-slide">
-      <h1>What's wrong with Beamer/LateX/Tikz?</h1>
+      <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/Tikz?</h1>
       <ul>
         <li class="sws-pause">Does not easily support smooth
         animations</li>
@@ -127,70 +126,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');
@@ -198,14 +196,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>
@@ -350,11 +349,25 @@ Of course we can animate it with some javascript!
   SWS.Presentation.registerCallback(2, function(o){
   set_color(o.find("#middledisk"), "#ffa500");
   set_color(o.find("#bottomdisk"), "#000a1a");
+/**/
+  SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
   });
   SWS.Presentation.registerCallback(3, function(o){
   set_color(o.find("#bottomdisk"), "#00ff00");
+  SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+/* */
   });
 </script>
+</div>
+<div class="sws-slide">
+  <h1>Totally customizable</h1>
+  <p>
+    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>
