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" content="text/html;charset=utf-8"/>
  10     <meta name="copyright"
  11           content="Copyright &#169; 2013 Kim Nguyễn" />
  12
  13     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
  14           media="all" />
  15     <!-- allows to switch themes in firefox -->
  16
  17     <link rel="stylesheet" title="Default" href="../themes/default.css"
  18           type="text/css" />
  19     <link rel="alternate stylesheet"  title="Web 2.0"
  20           href="../themes/webTwoPointO.css"
  21           type="text/css" />
  22
  23     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  24     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  25     <!-- Customize some templates and initialize -->
  26     <script type="text/javascript">
  27
  28       SWS.Presentation.setTemplate('sws-slide-change',
  29       SWS.Effects.slideChangeVerticalSlide);
  30
  31       SWS.Presentation.setTemplate('sws-object-deactivate',
  32       SWS.Effects.objectDeactivateFadeOut);
  33
  34       SWS.Presentation.setTemplate('sws-object-activate',
  35       SWS.Effects.objectActivateFadeIn);
  36
  37
  38       SWS.Presentation.init();
  39
  40     </script>
  41     <style type="text/css">
  42       #css {
  43       display:inline-block;
  44       font-size: larger;
  45       font-weight: bolder;
  46       -webkit-transform: rotate(-20deg);
  47       -moz-transform: rotate(-20deg);
  48       }
  49     </style>
  50   </head>
  51   <body>
  52
  53     <div class="sws-slide sws-cover sws-option-nofooter">
  54       <div class="centerbox">
  55         <h1>SimpleWebSlides</h1>
  56         <h1>An <em>HTML</em><img style="height:28pt"
  57              src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
  58           Presentation framework</h1>
  59         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
  60       </div>
  61     </div>
  62
  63
  64     <h1>Introduction</h1>
  65
  66     <div class="sws-slide" >
  67       <h1>What is it?</h1>
  68       <em>SimpleWebSlides</em> is simple tool that allows
  69       you to build funky presentations:
  70       <ul>
  71         <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
  72         <li class="sws-pause" >Theme to
  73         your <span style='font-size:larger'>❤</span>'s content
  74         with <em id="css">C S S</em>!</li>
  75         <li  id="foo" class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
  76         <script type="text/javascript">
  77           var zoom_title = function (canvas) {
  78           var h1 = canvas.find("h1");
  79           var old_size = h1.css('font-size');
  80           h1.animate({"font-size":"100pt" }, 300)
  81           .animate({"font-size":old_size }, 300);
  82           };
  83           SWS.Presentation.registerCallback(3, zoom_title);
  84         </script>
  85       </ul>
  86     </div>
  87
  88     <div class="sws-slide">
  89       <h1>What's wrong with Beamer/LateX/Tikz?</h1>
  90       <ul>
  91         <li class="sws-pause">Does not easily support smooth
  92         animations</li>
  93         <li class="sws-pause">Hard to program/script </li>
  94         <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
  95         <li class="sws-pause">Slow compilation times</li>
  96         <li class="sws-pause">Difficult to integrate several media
  97           (videos, vector graphics, sounds,…)
  98         </li>
  99         <script type="text/javascript">
 100           SWS.Presentation.registerCallback(2, zoom_title);
 101           SWS.Presentation.registerCallback(3, zoom_title);
 102           SWS.Presentation.registerCallback("slide", zoom_title);
 103         </script>
 104
 105         <![CDATA[    ANCDE        ]]>
 106       </ul>
 107
 108     </div>
 109
 110   </body>
 111 </html>