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"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
7 <title>SimpleWebSlides</title>
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
15 <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
16 <!-- Load the library -->
17 <script src="../simpleWebSlides.js" type="text/javascript" ></script>
19 <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
21 <!-- Load a custom Theme, the class-element marks this style-sheet
22 a "theme" that can be swtiched dynamicaly -->
23 <link class="sws-theme" rel="stylesheet" title="Web 2.0" href="../themes/webTwoPointO.css" type="text/css" />
24 <link class="sws-theme" rel="alternate stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
25 <link class="sws-theme" rel="alternate stylesheet" title="Default style" href="../themes/default.css" type="text/css" />
27 <!-- Customize some templates and initialize -->
29 <script type="text/x-mathjax-config">
31 tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
35 <script type="text/javascript"
36 src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
39 <script type="text/javascript">
41 // SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
42 // SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
43 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
44 SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
45 SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
47 //Ensures that we load SWS at the very end, after MathJax has
49 MathJax.Hub.Queue(function () {
50 SWS.Presentation.init();
53 // Some utility functions:
54 function set_color(o,c) {
55 var style = o.attr("style");
56 var a = style.split(";");
57 for(var i = 0; i < a.length; i++){
58 if (a[i].indexOf("fill:") >= 0){
63 o.attr("style",a.join(";"));
69 <style type="text/css">
74 -webkit-transform: rotate(-20deg);
75 -moz-transform: rotate(-20deg);
81 <div class="sws-slide sws-cover sws-option-nofooter">
82 <div class="centerbox">
83 <h1>SimpleWebSlides</h1>
84 <h1>An <em>HTML</em><img style="height:28pt"
85 src="HTML5_Badge.svg" alt="5"/>
86 Presentation framework</h1>
87 <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
91 <!-- H1 below is hidden, used for table of content (TODO) -->
94 <div class="sws-slide" >
96 <em>SimpleWebSlides</em> is simple tool that allows
97 you to build funky presentations:
99 <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
100 <li class="sws-pause" >Theme to
101 your <span style='font-size:larger'>❤</span>'s content
102 with <em id="css">C S S</em>!</li>
103 <li class="sws-pause" >Create animations using Javascript & jQuery!</li>
105 <script type="text/javascript">
106 var zoom_title = function (canvas) {
107 var h1 = canvas.find("h1");
108 var old_size = h1.css('font-size');
109 h1.animate({"font-size":"80pt" }, 300)
110 .animate({"font-size":old_size }, 300);
113 SWS.Presentation.registerCallback(3, zoom_title);
117 <div class="sws-slide">
118 <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/Tikz?</h1>
120 <li class="sws-pause">Does not easily support smooth
122 <li class="sws-pause">Hard to program/script </li>
123 <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
124 <li class="sws-pause">Slow compilation times</li>
125 <li class="sws-pause">Difficult to integrate several media
126 (videos, vector graphics, sounds,…)
129 <h1> What's wrong with Powerpoint/Keynote/LibreOffice ?</h1>
130 <span class="sws-pause">Seriously ?</span>
132 <div class="sws-slide">
133 <h1>Can I really use SWS for <i>scientific</i> presentations?</h1>
134 <p class="sws-pause">You sure can:</p>
135 <ul class="sws-pause">
137 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
140 \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
143 <p class="sws-pause"> All this is done
144 using <a href="http://www.mathjax.org">MathJax!</a> and
145 written like this:<br/>
147 \frac{ \Gamma\cup\{x\mapsto t\}\vdash e : s
148 }{ \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
154 <div class="sws-slide">
155 <h1>A simple example</h1>
156 <p class="sws-onframe-1_3">
157 A minimal slide, with no animation looks like this:
159 <div <em>class="sws-slide"</em>>
160 <![CDATA[ <h1> Slide title </h1>
165 <p class="sws-pause">
166 You can also reveal things progressively like this:
169 <p ]]><em>class="sws-pause"</em><![CDATA[> Text 2 (appears afterwards) </p>]]>
172 <p class="sws-pause">
173 You can also set an element to appear on specific frames:
176 <p ]]> <em>class="sws-onframe-1-5_9"</em> <![CDATA[ >
177 Appears on frame 1, 2, 3, 4, 5, and 9 of the current slide
178 (frame numbering starts at 0).
183 <div class="sws-slide">
184 <h1>Scripting your presentation</h1>
186 Of course, you can script your presentation with Javascript!<br/>
187 You just need to add the <code>script</code> element somewhere in
188 the current <code>div</code>
191 <script type="text/javascript">
192 function zoom_title (canvas) {
193 var h1 = canvas.find("h1");
194 var old_size = h1.css('font-size');
195 h1.animate({"font-size":"80pt" }, 300)
196 .animate({"font-size":old_size }, 300);
198 //Call the zoom_title function on the 4th and 7th frame
199 ]]><em>SWS.Presentation.registerCallback("3_6", zoom_title);</em><![CDATA[
202 (That's not a bug, you should keep pressing next, see how many
203 steps there are on this slide)
206 <script type="text/javascript">
207 SWS.Presentation.registerCallback("3_6", zoom_title);
211 <div class="sws-slide">
213 You can manipulate the presentation through
214 the <em><code>SWS.Presentation</code></em> object. For instance:
216 <a onclick="SWS.Presentation.previous();">◀◀◀◀◀</a>
217 <a onclick="SWS.Presentation.next();">▶▶▶▶▶</a>
218 <a onclick="SWS.Presentation.goToSlide(1,2);">Go back in time!</a>
221 <a onclick="SWS.Presentation.previous();SWS.Presentation.refresh();">◀◀◀◀◀</a>
222 <a onclick="SWS.Presentation.next();SWS.Presentation.refresh();">▶▶▶▶▶</a>
223 <a onclick="SWS.Presentation.goToSlide(1,2);">Go
224 back in time!</a> (to the second frame of the first slide)
226 <div class="sws-slide">
227 <h1>Some more fancy stuff</h1>
228 Let's put some <em>inline</em> SVG:
229 <div style="text-align:center;">
231 xmlns:dc="http://purl.org/dc/elements/1.1/"
232 xmlns:cc="http://creativecommons.org/ns#"
233 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
234 xmlns:svg="http://www.w3.org/2000/svg"
235 xmlns="http://www.w3.org/2000/svg"
236 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
237 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
242 inkscape:version="0.48.3.1 r9886"
243 sodipodi:docname="lights.svg">
249 bordercolor="#666666"
251 inkscape:pageopacity="0.0"
252 inkscape:pageshadow="2"
254 inkscape:cx="38.9935"
255 inkscape:cy="56.441072"
256 inkscape:document-units="px"
257 inkscape:current-layer="layer1"
262 fit-margin-bottom="0"
263 inkscape:window-width="1627"
264 inkscape:window-height="1026"
265 inkscape:window-x="1077"
266 inkscape:window-y="24"
267 inkscape:window-maximized="1">
274 snapvisiblegridlinesonly="true"
275 originx="-82.348214px"
276 originy="-877.32807px" />
277 </sodipodi:namedview>
283 <dc:format>image/svg+xml</dc:format>
285 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
291 inkscape:label="Layer 1"
292 inkscape:groupmode="layer"
294 transform="translate(-82.348214,-4.6814313)">
297 transform="matrix(1.5714286,0,0,1.5714286,-48.571431,-4.2069617)">
305 style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
307 transform="translate(132.5,-20)"
308 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"
311 sodipodi:cy="44.862183"
314 style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
315 sodipodi:type="arc" />
317 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"
320 sodipodi:cy="44.862183"
323 style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
325 transform="translate(132.5,15)" />
327 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"
330 sodipodi:cy="44.862183"
333 style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
335 transform="translate(132.5,50)" />
340 Of course we can animate it with some javascript!
341 <script type="text/javascript">
342 SWS.Presentation.registerCallback(0, function(o){
343 set_color(o.find("#topdisk"), "#000a1a");
345 SWS.Presentation.registerCallback(1, function(o){
346 set_color(o.find("#topdisk"), "#ff0000");
347 set_color(o.find("#middledisk"), "#000a1a");
349 SWS.Presentation.registerCallback(2, function(o){
350 set_color(o.find("#middledisk"), "#ffa500");
351 set_color(o.find("#bottomdisk"), "#000a1a");
353 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
355 SWS.Presentation.registerCallback(3, function(o){
356 set_color(o.find("#bottomdisk"), "#00ff00");
357 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
362 <div class="sws-slide">
363 <h1>Totally customizable</h1>
365 BTW did you see how I changed the transition effect for the
368 <script type="text/javascript">
369 SWS.Presentation.registerCallback("1", zoom_title);