Typos.

[hacks/simpleWebSlides.git] / doc / demo.xhtml

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index c028779..0e5c813 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -38,9 +38,9 @@
     </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.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;
@@ -127,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');
@@ -198,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>
@@ -367,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>