<head>
<title>SimpleWebSlides</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
<meta name="copyright"
content="Copyright © 2013 Kim Nguyễn" />
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+
+ <!-- Initialize the library -->
<link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
media="all" />
- <!-- allows to switch themes in firefox -->
+ <script src="../simpleWebSlides.js" type="text/javascript" >
+ </script>
- <link rel="stylesheet" title="Default" href="../themes/default.css"
- type="text/css" />
- <link rel="alternate stylesheet" title="Web 2.0"
+ <!-- Load a custom Theme -->
+ <link rel="stylesheet" title="Web 2.0"
href="../themes/webTwoPointO.css"
type="text/css" />
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+ <!-- Customize some templates and initialize -->
+ <script type="text/javascript">
+/*
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+*/
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ SWS.Presentation.init();
+
+ </script>
+ <style type="text/css">
+ #css {
+ display:inline-block;
+ font-size: larger;
+ font-weight: bolder;
+ -webkit-transform: rotate(-20deg);
+ -moz-transform: rotate(-20deg);
+ }
+ </style>
</head>
<body>
</div>
</div>
-
+ <!-- H1 below is hidden, used for table of content (TODO) -->
<h1>Introduction</h1>
<div class="sws-slide" >
<h1>What is it?</h1>
- <em>SimpleWebSlides</em> is an HTML5 framework that allows
- you to build presentation slides:
+ <em>SimpleWebSlides</em> is simple tool that allows
+ you to build funky presentations:
<ul>
- <li class="sws-pause" >Write your slides in HTML5!</li>
- <li class="sws-pause" >Theme your slides with <em>CSS</em>!</li>
- <li class="sws-pause" >Script your slides with Javascript!</li>
+ <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
+ <li class="sws-pause" >Theme to
+ your <span style='font-size:larger'>❤</span>'s content
+ with <em id="css">C S S</em>!</li>
+ <li class="sws-pause" >Create animations using Javascript & jQuery!</li>
+ <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
+ </ul>
<script type="text/javascript">
- SimpleWebSlides.registerCustom(3, function (canvas) {
+ var zoom_title = function (canvas) {
var h1 = canvas.find("h1");
- var old_color = h1.css('color');
var old_size = h1.css('font-size');
- h1.animate({"font-size":"100pt" }, 500);
- h1.animate({"font-size":old_size }, 500);
- });
+ h1.animate({"font-size":"80pt" }, 300)
+ .animate({"font-size":old_size }, 300);
+ };
+ SWS.Presentation.registerCallback(6, zoom_title);
</script>
+ </div>
+
+ <div class="sws-slide">
+ <h1>What's wrong with Beamer/LateX/Tikz?</h1>
+ <ul>
+ <li class="sws-pause">Does not easily support smooth
+ animations</li>
+ <li class="sws-pause">Hard to program/script </li>
+ <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
+ <li class="sws-pause">Slow compilation times</li>
+ <li class="sws-pause">Difficult to integrate several media
+ (videos, vector graphics, sounds,…)
+ </li>
</ul>
+
</div>
</body>
projects / hacks / simpleWebSlides.git / blobdiff