472982b3a10b72bc679d32deee348d654a102921
[hacks/simpleWebSlides.git] / 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       class="sws-aspect-16-9"
7 >
8   <head>
9     <title>SimpleWebSlides</title>
10
11     <meta http-equiv="Content-Type"
12           content="text/html; charset=utf-8" />
13     <meta name="copyright"
14           content="Copyright &#169; 2013 Kim Nguyễn" />
15
16     <!-- Load jQuery -->
17     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
18
19     <!-- Initialize the library -->
20     <script src="../simpleWebSlides.js" type="text/javascript" >
21     </script>
22     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
23           media="all" />
24     <!-- Load a custom Theme -->
25     <link rel="stylesheet"  title="Web 2.0"
26           href="../themes/webTwoPointO.css"
27           type="text/css" />
28     <!-- Customize some templates and initialize -->
29
30     <script type="text/x-mathjax-config">
31       MathJax.Hub.Config({
32       tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
33       });
34     </script>
35
36     <script type="text/javascript"
37             src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
38     </script>
39
40     <script type="text/javascript">
41 /*
42       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
43       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide; */
44       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
45
46
47       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
48       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
49
50       //Ensures that we load SWS at the very end, after MathJax has
51       //been initialized
52       MathJax.Hub.Queue(function () {
53              SWS.Presentation.init();
54       });
55
56 // Some utility functions:
57 function set_color(o,c) {
58 var style = o.attr("style");
59 var a = style.split(";");
60 for(var i = 0; i &lt; a.length; i++){
61 if (a[i].indexOf("fill:") &gt;= 0){
62 a[i] = "fill: " + c;
63 break;
64 };
65 };
66 o.attr("style",a.join(";"));
67
68 };
69
70     </script>
71
72     <style type="text/css">
73       #css {
74       display:inline-block;
75       font-size: larger;
76       font-weight: bolder;
77       -webkit-transform: rotate(-20deg);
78       -moz-transform: rotate(-20deg);
79       }
80     </style>
81   </head>
82   <body>
83
84     <div class="sws-slide sws-cover sws-option-nofooter">
85       <div class="centerbox">
86         <h1>SimpleWebSlides</h1>
87         <h1>An <em>HTML</em><img style="height:28pt"
88              src="HTML5_Badge.svg" alt="5"/>
89           Presentation framework</h1>
90         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
91       </div>
92     </div>
93
94     <!-- H1 below is hidden, used for table of content (TODO) -->
95     <h1>Introduction</h1>
96
97     <div class="sws-slide" >
98       <h1>What is it?</h1>
99       <em>SimpleWebSlides</em> is simple tool that allows
100       you to build funky presentations:
101       <ul>
102         <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
103         <li class="sws-pause" >Theme to
104         your <span style='font-size:larger'>❤</span>'s content
105         with <em id="css">C S S</em>!</li>
106         <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
107       </ul>
108         <script type="text/javascript">
109           var zoom_title = function (canvas) {
110           var h1 = canvas.find("h1");
111           var old_size = h1.css('font-size');
112           h1.animate({"font-size":"80pt" }, 300)
113           .animate({"font-size":old_size }, 300);
114           };
115
116           SWS.Presentation.registerCallback(3, zoom_title);
117         </script>
118     </div>
119
120     <div class="sws-slide">
121       <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/Tikz?</h1>
122       <ul>
123         <li class="sws-pause">Does not easily support smooth
124         animations</li>
125         <li class="sws-pause">Hard to program/script </li>
126         <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
127         <li class="sws-pause">Slow compilation times</li>
128         <li class="sws-pause">Difficult to integrate several media
129           (videos, vector graphics, sounds,…)
130         </li>
131       </ul>
132       <p  class="sws-pause">But wait! I'm loosing all those nicely
133       rendered mathematical formulæ!</p>
134       <p class="sws-pause"> You mean like this one<sup>*</sup> ?
135         $$
136         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
137         $$
138       </p>
139       <p class="sws-pause">or that one<sup>*</sup> ?
140
141         $$
142         \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
143         $$
144       </p>
145       <p class="sws-pause">*: All this is done
146         using <a href="http://www.mathjax.org">MathJax!</a> and
147         written like this:<br/>
148 <pre><code>
149     \frac{
150           \Gamma\cup\{x\mapsto t\}\vdash e : s
151     }{
152           \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
153     }
154 </code></pre>
155 </p>
156     </div>
157     <div class="sws-slide">
158       <h1>A simple example</h1>
159       <p class="sws-onframe-1_3">
160       A minimal slide, with no animation looks like this:
161 <pre><code>
162      &lt;div <em>class="sws-slide"</em>&gt;
163           &lt;h1&gt;Slide title&lt;/h1&gt;
164              Hello world!
165      &lt;/div&gt;
166 </code></pre>
167 </p>
168 <p class="sws-pause">
169   You can also reveal things progressively like this:
170   <pre><code>
171       &lt;p&gt; Text 1&lt;/p&gt;
172       &lt;p <em>class="sws-pause"</em>&gt;
173       Text 2 (appears afterwards)
174       &lt;/p&gt;
175   </code></pre>
176 </p>
177 <p class="sws-pause">
178   You can also set an element to appear on specific frames:
179   <pre><code>
180       &lt;p&gt; Text 1&lt;/p&gt;
181       &lt;p <em>class="sws-onframe-1-5_9"</em>&gt;
182       Appears on frame 2, 3, 4, 5, 6 and 10 of the current slide
183       (frame numbering starts at 0).
184       &lt;/p&gt;
185   </code></pre>
186 </p>
187     </div>
188 <div class="sws-slide">
189   <h1>Scripting your presentation</h1>
190   <p>
191     Of course, you can script your presentation with Javascript!<br/>
192     You just need to add the <code>script</code> element somewhere in
193     the current <code>div</code>
194     <pre><code>
195 &lt;script type="text/javascript"&gt;
196     function zoom_title (canvas) {
197         var h1 = canvas.find("h1");
198         var old_size = h1.css('font-size');
199             h1.animate({"font-size":"80pt" }, 300)
200                .animate({"font-size":old_size }, 300);
201     };
202     //Call the zoom_title function on the 4th and 7th frame
203     <em>SWS.Presentation.registerCallback("3_6", zoom_title);</em>
204 &lt;script&gt;
205 </code></pre>
206     (That's not a bug, you should keep pressing next, see how many
207     steps there are on this slide)
208   </p>
209
210 <script type="text/javascript">
211   SWS.Presentation.registerCallback("4_7", zoom_title);
212 </script>
213
214 </div>
215 <div class="sws-slide">
216   <h1>SWS API</h1>
217   You can manipulate the presentation through
218   the <em><code>SWS.Presentation</code></em> object. For instance:
219   <code><pre>
220       &lt;a onclick="SWS.Presentation.previous();"&gt;◀◀◀◀◀&lt;/a&gt;
221       &lt;a onclick="SWS.Presentation.next();"&gt;▶▶▶▶▶&lt;/a&gt;
222       &lt;a onclick="SWS.Presentation.goToSlide(1,2);"&gt;Go back in time!&lt;/a&gt;
223 </pre></code>
224   Let's try it:
225   <a onclick="SWS.Presentation.previous();SWS.Presentation.refresh();">◀◀◀◀◀</a>
226   <a onclick="SWS.Presentation.next();SWS.Presentation.refresh();">▶▶▶▶▶</a>
227   <a onclick="SWS.Presentation.goToSlide(1,2);">Go
228     back in time!</a> (to the second frame of the first slide)
229 </div>
230 <div class="sws-slide">
231   <h1>Some more fancy stuff</h1>
232 Let's put some <em>inline</em> SVG:
233 <div style="text-align:center;">
234 <svg
235    xmlns:dc="http://purl.org/dc/elements/1.1/"
236    xmlns:cc="http://creativecommons.org/ns#"
237    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
238    xmlns:svg="http://www.w3.org/2000/svg"
239    xmlns="http://www.w3.org/2000/svg"
240    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
241    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
242    width="68.160713"
243    height="170.35268"
244    id="svg2"
245    version="1.1"
246    inkscape:version="0.48.3.1 r9886"
247    sodipodi:docname="lights.svg">
248   <defs
249      id="defs4" />
250   <sodipodi:namedview
251      id="base"
252      pagecolor="#ffffff"
253      bordercolor="#666666"
254      borderopacity="1.0"
255      inkscape:pageopacity="0.0"
256      inkscape:pageshadow="2"
257      inkscape:zoom="5.6"
258      inkscape:cx="38.9935"
259      inkscape:cy="56.441072"
260      inkscape:document-units="px"
261      inkscape:current-layer="layer1"
262      showgrid="true"
263      fit-margin-top="0"
264      fit-margin-left="0"
265      fit-margin-right="0"
266      fit-margin-bottom="0"
267      inkscape:window-width="1627"
268      inkscape:window-height="1026"
269      inkscape:window-x="1077"
270      inkscape:window-y="24"
271      inkscape:window-maximized="1">
272     <inkscape:grid
273        type="xygrid"
274        id="grid2985"
275        empspacing="5"
276        visible="true"
277        enabled="true"
278        snapvisiblegridlinesonly="true"
279        originx="-82.348214px"
280        originy="-877.32807px" />
281   </sodipodi:namedview>
282   <metadata
283      id="metadata7">
284     <rdf:RDF>
285       <cc:Work
286          rdf:about="">
287         <dc:format>image/svg+xml</dc:format>
288         <dc:type
289            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
290         <dc:title />
291       </cc:Work>
292     </rdf:RDF>
293   </metadata>
294   <g
295      inkscape:label="Layer 1"
296      inkscape:groupmode="layer"
297      id="layer1"
298      transform="translate(-82.348214,-4.6814313)">
299     <g
300        id="g3014"
301        transform="matrix(1.5714286,0,0,1.5714286,-48.571431,-4.2069617)">
302       <rect
303          ry="10"
304          y="7.3621826"
305          x="85"
306          height="105"
307          width="40"
308          id="rect2989"
309          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
310       <path
311          transform="translate(132.5,-20)"
312          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"
313          sodipodi:ry="12.5"
314          sodipodi:rx="12.5"
315          sodipodi:cy="44.862183"
316          sodipodi:cx="-27.5"
317          id="topdisk"
318          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
319          sodipodi:type="arc" />
320       <path
321          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"
322          sodipodi:ry="12.5"
323          sodipodi:rx="12.5"
324          sodipodi:cy="44.862183"
325          sodipodi:cx="-27.5"
326          id="middledisk"
327          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
328          sodipodi:type="arc"
329          transform="translate(132.5,15)" />
330       <path
331          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"
332          sodipodi:ry="12.5"
333          sodipodi:rx="12.5"
334          sodipodi:cy="44.862183"
335          sodipodi:cx="-27.5"
336          id="bottomdisk"
337          style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
338          sodipodi:type="arc"
339          transform="translate(132.5,50)" />
340     </g>
341   </g>
342 </svg>
343 </div>
344 Of course we can animate it with some javascript!
345 <script type="text/javascript">
346   SWS.Presentation.registerCallback(0, function(o){
347   set_color(o.find("#topdisk"), "#000a1a");
348   });
349   SWS.Presentation.registerCallback(1, function(o){
350   set_color(o.find("#topdisk"), "#ff0000");
351   set_color(o.find("#middledisk"), "#000a1a");
352   });
353   SWS.Presentation.registerCallback(2, function(o){
354   set_color(o.find("#middledisk"), "#ffa500");
355   set_color(o.find("#bottomdisk"), "#000a1a");
356 /**/
357   SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
358   });
359   SWS.Presentation.registerCallback(3, function(o){
360   set_color(o.find("#bottomdisk"), "#00ff00");
361   SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
362 /* */
363   });
364 </script>
365 </div>
366 <div class="sws-slide">
367   <h1>Totally customizable</h1>
368   <p>
369     BTW did you see how I changed the transition effect for the
370     previous slide ?
371   </p>
372 </div>
373
374   </body>
375 </html>