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