doc/demo.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4 >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>SimpleWebSlides</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  18
  19     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
  20           media="all" />
  21     <!-- Load a custom Theme, the class-element marks this style-sheet
  22       a "theme" that can be swtiched dynamicaly -->
  23     <link class="sws-theme" rel="stylesheet"  title="Web 2.0"  href="../themes/webTwoPointO.css" type="text/css" />
  24     <link class="sws-theme" rel="alternate stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  25     <link class="sws-theme" rel="alternate stylesheet"  title="Default style"  href="../themes/default.css" type="text/css" />
  26
  27     <!-- Customize some templates and initialize -->
  28
  29     <script type="text/x-mathjax-config">
  30       MathJax.Hub.Config({
  31       tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  32       });
  33     </script>
  34
  35     <script type="text/javascript"
  36             src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
  37     </script>
  38
  39     <script type="text/javascript">
  40
  41 //      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
  42 //      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
  43       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  44       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  45       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  46
  47       //Ensures that we load SWS at the very end, after MathJax has
  48       //been initialized
  49       MathJax.Hub.Queue(function () {
  50              SWS.Presentation.init();
  51       });
  52
  53 // Some utility functions:
  54 function set_color(o,c) {
  55 var style = o.attr("style");
  56 var a = style.split(";");
  57 for(var i = 0; i &lt; a.length; i++){
  58 if (a[i].indexOf("fill:") &gt;= 0){
  59 a[i] = "fill: " + c;
  60 break;
  61 };
  62 };
  63 o.attr("style",a.join(";"));
  64
  65 };
  66
  67     </script>
  68
  69     <style type="text/css">
  70       #css {
  71       display:inline-block;
  72       font-size: larger;
  73       font-weight: bolder;
  74       -webkit-transform: rotate(-20deg);
  75       -moz-transform: rotate(-20deg);
  76       }
  77     </style>
  78   </head>
  79   <body>
  80
  81     <div class="sws-slide sws-cover sws-option-nofooter">
  82       <div class="centerbox">
  83         <h1>SimpleWebSlides</h1>
  84         <h1>An <em>HTML</em><img style="height:28pt"
  85              src="HTML5_Badge.svg" alt="5"/>
  86           Presentation framework</h1>
  87         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
  88       </div>
  89     </div>
  90
  91     <!-- H1 below is hidden, used for table of content (TODO) -->
  92     <h1>Introduction</h1>
  93
  94     <div class="sws-slide" >
  95       <h1>What is it?</h1>
  96       <em>SimpleWebSlides</em> is simple tool that allows
  97       you to build funky presentations:
  98       <ul>
  99         <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
 100         <li class="sws-pause" >Theme to
 101         your <span style='font-size:larger'>❤</span>'s content
 102         with <em id="css">C S S</em>!</li>
 103         <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
 104       </ul>
 105         <script type="text/javascript">
 106           var zoom_title = function (canvas) {
 107           var h1 = canvas.find("h1");
 108           var old_size = h1.css('font-size');
 109           h1.animate({"font-size":"80pt" }, 300)
 110           .animate({"font-size":old_size }, 300);
 111           };
 112
 113           SWS.Presentation.registerCallback(3, zoom_title);
 114         </script>
 115     </div>
 116
 117     <div class="sws-slide">
 118       <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/Tikz?</h1>
 119       <ul>
 120         <li class="sws-pause">Does not easily support smooth
 121         animations</li>
 122         <li class="sws-pause">Hard to program/script </li>
 123         <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
 124         <li class="sws-pause">Slow compilation times</li>
 125         <li class="sws-pause">Difficult to integrate several media
 126           (videos, vector graphics, sounds,…)
 127         </li>
 128       </ul>
 129       <h1> What's wrong with Powerpoint/Keynote/LibreOffice ?</h1>
 130       <span class="sws-pause">Seriously ?</span>
 131     </div>
 132     <div class="sws-slide">
 133       <h1>Can I really use SWS for <i>scientific</i> presentations?</h1>
 134       <p  class="sws-pause">You sure can:</p>
 135       <ul class="sws-pause">
 136        <li> Exhibit A: $$
 137         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
 138         $$</li>
 139        <li>Exihbit B: $$
 140         \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
 141         $$</li>
 142       </ul>
 143       <p class="sws-pause"> All this is done
 144         using <a href="http://www.mathjax.org">MathJax!</a> and
 145         written like this:<br/>
 146 <pre><code>
 147     \frac{ \Gamma\cup\{x\mapsto t\}\vdash e : s
 148     }{  \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
 149     }
 150 </code></pre>
 151 </p>
 152     </div>
 153
 154 <div class="sws-slide">
 155   <h1>A simple example</h1>
 156   <p class="sws-onframe-1_3">
 157     A minimal slide, with no animation looks like this:
 158     <code>
 159       &lt;div <em>class="sws-slide"</em>&gt;
 160       <![CDATA[ <h1> Slide title </h1>
 161                Hello world!
 162                </div> ]]>
 163                         </code>
 164   </p>
 165   <p class="sws-pause">
 166     You can also reveal things progressively like this:
 167     <code><![CDATA[
 168       <p> Text 1 </p>
 169       <p ]]><em>class="sws-pause"</em><![CDATA[> Text 2 (appears afterwards) </p>]]>
 170     </code>
 171   </p>
 172   <p class="sws-pause">
 173     You can also set an element to appear on specific frames:
 174     <code><![CDATA[
 175      <p>Text1</p>
 176      <p ]]> <em>class="sws-onframe-1-5_9"</em> <![CDATA[ >
 177       Appears on frame 1, 2, 3, 4, 5, and 9 of the current slide
 178       (frame numbering starts at 0).
 179      </p> ]]>
 180     </code>
 181   </p>
 182 </div>
 183 <div class="sws-slide">
 184   <h1>Scripting your presentation</h1>
 185   <p>
 186     Of course, you can script your presentation with Javascript!<br/>
 187     You just need to add the <code>script</code> element somewhere in
 188     the current <code>div</code>
 189     <code>
 190 <![CDATA[
 191  <script type="text/javascript">
 192     function zoom_title (canvas) {
 193         var h1 = canvas.find("h1");
 194         var old_size = h1.css('font-size');
 195             h1.animate({"font-size":"80pt" }, 300)
 196                .animate({"font-size":old_size }, 300);
 197     };
 198     //Call the zoom_title function on the 4th and 7th frame
 199     ]]><em>SWS.Presentation.registerCallback("3_6", zoom_title);</em><![CDATA[
 200 </script>]]>
 201 </code>
 202     (That's not a bug, you should keep pressing next, see how many
 203     steps there are on this slide)
 204   </p>
 205
 206 <script type="text/javascript">
 207   SWS.Presentation.registerCallback("3_6", zoom_title);
 208 </script>
 209
 210 </div>
 211 <div class="sws-slide">
 212   <h1>SWS API</h1>
 213   You can manipulate the presentation through
 214   the <em><code>SWS.Presentation</code></em> object. For instance:
 215   <code><pre>
 216       &lt;a onclick="SWS.Presentation.previous();"&gt;◀◀◀◀◀&lt;/a&gt;
 217       &lt;a onclick="SWS.Presentation.next();"&gt;▶▶▶▶▶&lt;/a&gt;
 218       &lt;a onclick="SWS.Presentation.goToSlide(1,2);"&gt;Go back in time!&lt;/a&gt;
 219 </pre></code>
 220   Let's try it:
 221   <a onclick="SWS.Presentation.previous();SWS.Presentation.refresh();">◀◀◀◀◀</a>
 222   <a onclick="SWS.Presentation.next();SWS.Presentation.refresh();">▶▶▶▶▶</a>
 223   <a onclick="SWS.Presentation.goToSlide(1,2);">Go
 224     back in time!</a> (to the second frame of the first slide)
 225 </div>
 226 <div class="sws-slide">
 227   <h1>Some more fancy stuff</h1>
 228 Let's put some <em>inline</em> SVG:
 229 <div style="text-align:center;">
 230 <svg
 231    xmlns:dc="http://purl.org/dc/elements/1.1/"
 232    xmlns:cc="http://creativecommons.org/ns#"
 233    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 234    xmlns:svg="http://www.w3.org/2000/svg"
 235    xmlns="http://www.w3.org/2000/svg"
 236    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 237    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 238    width="68.160713"
 239    height="170.35268"
 240    id="svg2"
 241    version="1.1"
 242    inkscape:version="0.48.3.1 r9886"
 243    sodipodi:docname="lights.svg">
 244   <defs
 245      id="defs4" />
 246   <sodipodi:namedview
 247      id="base"
 248      pagecolor="#ffffff"
 249      bordercolor="#666666"
 250      borderopacity="1.0"
 251      inkscape:pageopacity="0.0"
 252      inkscape:pageshadow="2"
 253      inkscape:zoom="5.6"
 254      inkscape:cx="38.9935"
 255      inkscape:cy="56.441072"
 256      inkscape:document-units="px"
 257      inkscape:current-layer="layer1"
 258      showgrid="true"
 259      fit-margin-top="0"
 260      fit-margin-left="0"
 261      fit-margin-right="0"
 262      fit-margin-bottom="0"
 263      inkscape:window-width="1627"
 264      inkscape:window-height="1026"
 265      inkscape:window-x="1077"
 266      inkscape:window-y="24"
 267      inkscape:window-maximized="1">
 268     <inkscape:grid
 269        type="xygrid"
 270        id="grid2985"
 271        empspacing="5"
 272        visible="true"
 273        enabled="true"
 274        snapvisiblegridlinesonly="true"
 275        originx="-82.348214px"
 276        originy="-877.32807px" />
 277   </sodipodi:namedview>
 278   <metadata
 279      id="metadata7">
 280     <rdf:RDF>
 281       <cc:Work
 282          rdf:about="">
 283         <dc:format>image/svg+xml</dc:format>
 284         <dc:type
 285            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 286         <dc:title />
 287       </cc:Work>
 288     </rdf:RDF>
 289   </metadata>
 290   <g
 291      inkscape:label="Layer 1"
 292      inkscape:groupmode="layer"
 293      id="layer1"
 294      transform="translate(-82.348214,-4.6814313)">
 295     <g
 296        id="g3014"
 297        transform="matrix(1.5714286,0,0,1.5714286,-48.571431,-4.2069617)">
 298       <rect
 299          ry="10"
 300          y="7.3621826"
 301          x="85"
 302          height="105"
 303          width="40"
 304          id="rect2989"
 305          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
 306       <path
 307          transform="translate(132.5,-20)"
 308          d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
 309          sodipodi:ry="12.5"
 310          sodipodi:rx="12.5"
 311          sodipodi:cy="44.862183"
 312          sodipodi:cx="-27.5"
 313          id="topdisk"
 314          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
 315          sodipodi:type="arc" />
 316       <path
 317          d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
 318          sodipodi:ry="12.5"
 319          sodipodi:rx="12.5"
 320          sodipodi:cy="44.862183"
 321          sodipodi:cx="-27.5"
 322          id="middledisk"
 323          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
 324          sodipodi:type="arc"
 325          transform="translate(132.5,15)" />
 326       <path
 327          d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
 328          sodipodi:ry="12.5"
 329          sodipodi:rx="12.5"
 330          sodipodi:cy="44.862183"
 331          sodipodi:cx="-27.5"
 332          id="bottomdisk"
 333          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
 334          sodipodi:type="arc"
 335          transform="translate(132.5,50)" />
 336     </g>
 337   </g>
 338 </svg>
 339 </div>
 340 Of course we can animate it with some javascript!
 341 <script type="text/javascript">
 342   SWS.Presentation.registerCallback(0, function(o){
 343   set_color(o.find("#topdisk"), "#000a1a");
 344   });
 345   SWS.Presentation.registerCallback(1, function(o){
 346   set_color(o.find("#topdisk"), "#ff0000");
 347   set_color(o.find("#middledisk"), "#000a1a");
 348   });
 349   SWS.Presentation.registerCallback(2, function(o){
 350   set_color(o.find("#middledisk"), "#ffa500");
 351   set_color(o.find("#bottomdisk"), "#000a1a");
 352 /**/
 353   SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
 354   });
 355   SWS.Presentation.registerCallback(3, function(o){
 356   set_color(o.find("#bottomdisk"), "#00ff00");
 357   SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
 358 /* */
 359   });
 360 </script>
 361 </div>
 362 <div class="sws-slide">
 363   <h1>Totally customizable</h1>
 364   <p>
 365     BTW did you see how I changed the transition effect for the
 366     previous slide ?
 367   </p>
 368   <script type="text/javascript">
 369     SWS.Presentation.registerCallback("1", zoom_title);
 370   </script>
 371 </div>
 372
 373   </body>
 374 </html>