<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="sws-aspect-16-9"
+>
<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 -->
+ <script src="../simpleWebSlides.js" type="text/javascript" >
+ </script>
<link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
media="all" />
- <!-- allows to switch themes in firefox -->
-
- <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" />
+ <!-- Customize some templates and initialize -->
- <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+ <script type="text/x-mathjax-config">
+ MathJax.Hub.Config({
+ tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
+ });
+ </script>
+
+ <script type="text/javascript"
+ src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
+ </script>
+
+ <script type="text/javascript">
+/*
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide; */
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+
+
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+ MathJax.Hub.Queue(function () {
+ SWS.Presentation.init();
+ });
+
+// Some utility functions:
+function set_color(o,c) {
+var style = o.attr("style");
+var a = style.split(";");
+for(var i = 0; i < a.length; i++){
+if (a[i].indexOf("fill:") >= 0){
+a[i] = "fill: " + c;
+break;
+};
+};
+o.attr("style",a.join(";"));
+
+};
+
+ </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 class="centerbox">
<h1>SimpleWebSlides</h1>
<h1>An <em>HTML</em><img style="height:28pt"
- src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
+ src="HTML5_Badge.svg" alt="5"/>
Presentation framework</h1>
<a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
</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>
+ </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(3, zoom_title);
</script>
+ </div>
+
+ <div class="sws-slide">
+ <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/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>
+ <p class="sws-pause">But wait! I'm loosing all those nicely
+ rendered mathematical formulæ!</p>
+ <p class="sws-pause"> You mean like this one<sup>*</sup> ?
+ $$
+ 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
+ $$
+ </p>
+ <p class="sws-pause">or that one<sup>*</sup> ?
+
+ $$
+ \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
+ $$
+ </p>
+ <p class="sws-pause">*: All this is done
+ using <a href="http://www.mathjax.org">MathJax!</a> and
+ written like this:<br/>
+<pre><code>
+ \frac{
+ \Gamma\cup\{x\mapsto t\}\vdash e : s
+ }{
+ \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
+ }
+</code></pre>
+</p>
</div>
+ <div class="sws-slide">
+ <h1>A simple example</h1>
+ <p class="sws-onframe-1_3">
+ A minimal slide, with no animation looks like this:
+<pre><code>
+ <div <em>class="sws-slide"</em>>
+ <h1>Slide title</h1>
+ Hello world!
+ </div>
+</code></pre>
+</p>
+<p class="sws-pause">
+ You can also reveal things progressively like this:
+ <pre><code>
+ <p> Text 1</p>
+ <p <em>class="sws-pause"</em>>
+ Text 2 (appears afterwards)
+ </p>
+ </code></pre>
+</p>
+<p class="sws-pause">
+ You can also set an element to appear on specific frames:
+ <pre><code>
+ <p> Text 1</p>
+ <p <em>class="sws-onframe-1-5_9"</em>>
+ Appears on frame 2, 3, 4, 5, 6 and 10 of the current slide
+ (frame numbering starts at 0).
+ </p>
+ </code></pre>
+</p>
+ </div>
+<div class="sws-slide">
+ <h1>Scripting your presentation</h1>
+ <p>
+ Of course, you can script your presentation with Javascript!<br/>
+ You just need to add the <code>script</code> element somewhere in
+ the current <code>div</code>
+ <pre><code>
+<script type="text/javascript">
+ function zoom_title (canvas) {
+ var h1 = canvas.find("h1");
+ var old_size = h1.css('font-size');
+ h1.animate({"font-size":"80pt" }, 300)
+ .animate({"font-size":old_size }, 300);
+ };
+ //Call the zoom_title function on the 4th and 7th frame
+ <em>SWS.Presentation.registerCallback("3_6", zoom_title);</em>
+<script>
+</code></pre>
+ (That's not a bug, you should keep pressing next, see how many
+ steps there are on this slide)
+ </p>
+
+<script type="text/javascript">
+ SWS.Presentation.registerCallback("4_7", zoom_title);
+</script>
+
+</div>
+<div class="sws-slide">
+ <h1>SWS API</h1>
+ You can manipulate the presentation through
+ the <em><code>SWS.Presentation</code></em> object. For instance:
+ <code><pre>
+ <a onclick="SWS.Presentation.previous();">◀◀◀◀◀</a>
+ <a onclick="SWS.Presentation.next();">▶▶▶▶▶</a>
+ <a onclick="SWS.Presentation.goToSlide(1,2);">Go back in time!</a>
+</pre></code>
+ Let's try it:
+ <a onclick="SWS.Presentation.previous();SWS.Presentation.refresh();">◀◀◀◀◀</a>
+ <a onclick="SWS.Presentation.next();SWS.Presentation.refresh();">▶▶▶▶▶</a>
+ <a onclick="SWS.Presentation.goToSlide(1,2);">Go
+ back in time!</a> (to the second frame of the first slide)
+</div>
+<div class="sws-slide">
+ <h1>Some more fancy stuff</h1>
+Let's put some <em>inline</em> SVG:
+<div style="text-align:center;">
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="68.160713"
+ height="170.35268"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.3.1 r9886"
+ sodipodi:docname="lights.svg">
+ <defs
+ id="defs4" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="5.6"
+ inkscape:cx="38.9935"
+ inkscape:cy="56.441072"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="1627"
+ inkscape:window-height="1026"
+ inkscape:window-x="1077"
+ inkscape:window-y="24"
+ inkscape:window-maximized="1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2985"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true"
+ originx="-82.348214px"
+ originy="-877.32807px" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-82.348214,-4.6814313)">
+ <g
+ id="g3014"
+ transform="matrix(1.5714286,0,0,1.5714286,-48.571431,-4.2069617)">
+ <rect
+ ry="10"
+ y="7.3621826"
+ x="85"
+ height="105"
+ width="40"
+ id="rect2989"
+ style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ <path
+ transform="translate(132.5,-20)"
+ 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"
+ sodipodi:ry="12.5"
+ sodipodi:rx="12.5"
+ sodipodi:cy="44.862183"
+ sodipodi:cx="-27.5"
+ id="topdisk"
+ style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ sodipodi:type="arc" />
+ <path
+ 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"
+ sodipodi:ry="12.5"
+ sodipodi:rx="12.5"
+ sodipodi:cy="44.862183"
+ sodipodi:cx="-27.5"
+ id="middledisk"
+ style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ sodipodi:type="arc"
+ transform="translate(132.5,15)" />
+ <path
+ 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"
+ sodipodi:ry="12.5"
+ sodipodi:rx="12.5"
+ sodipodi:cy="44.862183"
+ sodipodi:cx="-27.5"
+ id="bottomdisk"
+ style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ sodipodi:type="arc"
+ transform="translate(132.5,50)" />
+ </g>
+ </g>
+</svg>
+</div>
+Of course we can animate it with some javascript!
+<script type="text/javascript">
+ SWS.Presentation.registerCallback(0, function(o){
+ set_color(o.find("#topdisk"), "#000a1a");
+ });
+ SWS.Presentation.registerCallback(1, function(o){
+ set_color(o.find("#topdisk"), "#ff0000");
+ set_color(o.find("#middledisk"), "#000a1a");
+ });
+ SWS.Presentation.registerCallback(2, function(o){
+ set_color(o.find("#middledisk"), "#ffa500");
+ set_color(o.find("#bottomdisk"), "#000a1a");
+/**/
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ });
+ SWS.Presentation.registerCallback(3, function(o){
+ set_color(o.find("#bottomdisk"), "#00ff00");
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+/* */
+ });
+</script>
+</div>
+<div class="sws-slide">
+ <h1>Totally customizable</h1>
+ <p>
+ BTW did you see how I changed the transition effect for the
+ previous slide ?
+ </p>
+</div>
</body>
</html>