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
  17     <!-- Initialize the library -->
  18     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
  19           media="all" />
  20     <script src="../simpleWebSlides.js" type="text/javascript" >
  21     </script>
  22
  23     <!-- Load a custom Theme -->
  24     <link rel="stylesheet"  title="Web 2.0"
  25           href="../themes/webTwoPointO.css"
  26           type="text/css" />
  27
  28     <!-- Customize some templates and initialize -->
  29     <script type="text/javascript">
  30 /*
  31       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
  32       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  33 */
  34       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
  35       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  36       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  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     <!-- H1 below is hidden, used for table of content (TODO) -->
  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 class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
  76         <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
  77       </ul>
  78         <script type="text/javascript">
  79           var zoom_title = function (canvas) {
  80           var h1 = canvas.find("h1");
  81           var old_size = h1.css('font-size');
  82           h1.animate({"font-size":"80pt" }, 300)
  83           .animate({"font-size":old_size }, 300);
  84           };
  85           SWS.Presentation.registerCallback(6, zoom_title);
  86         </script>
  87     </div>
  88
  89     <div class="sws-slide">
  90       <h1>What's wrong with Beamer/LateX/Tikz?</h1>
  91       <ul>
  92         <li class="sws-pause">Does not easily support smooth
  93         animations</li>
  94         <li class="sws-pause">Hard to program/script </li>
  95         <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
  96         <li class="sws-pause">Slow compilation times</li>
  97         <li class="sws-pause">Difficult to integrate several media
  98           (videos, vector graphics, sounds,…)
  99         </li>
 100       </ul>
 101
 102     </div>
 103
 104   </body>
 105 </html>