@@ -68,19 +100,276 @@
you to build funky presentations:
Write your presentations in (X)HTML5!
-
Theme to your â¤'s content with CSS!
-
Create animations using Javascript & jQuery!
+
Theme to
+ your â¤'s content
+ with C S S!
+
Create animations using Javascript & jQuery!
+
+
+
+
+
What's wrong with Beamer/LATEX/Tikz?
+
+
Does not easily support smooth
+ animations
+
Hard to program/script
+
Using modern fonts and UTF-8 is a nightmare
+
Slow compilation times
+
Difficult to integrate several media
+ (videos, vector graphics, sounds,â¦)
+
+
But wait! I'm loosing all those nicely
+ rendered mathematical formulæ!
+
You mean like this one* ?
+ $$
+ 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
+ $$
+
+
or that one* ?
+
+ $$
+ \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
+ $$
+
+
*: All this is done
+ using MathJax! and
+ written like this:
+
+ \frac{
+ \Gamma\cup\{x\mapsto t\}\vdash e : s
+ }{
+ \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
+ }
+
+
+
+
A simple example
+
+ A minimal slide, with no animation looks like this:
+
+ You can also reveal things progressively like this:
+
+ <p> Text 1</p>
+ <p class="sws-pause">
+ Text 2 (appears afterwards)
+ </p>
+
+
+
+ You can also set an element to appear on specific frames:
+
+ <p> Text 1</p>
+ <p class="sws-onframe-1-5_9">
+ Appears on frame 2, 3, 4, 5, 6 and 10 of the current slide
+ (frame numbering starts at 0).
+ </p>
+
+
+
+
+
Scripting your presentation
+
+ Of course, you can script your presentation with Javascript!
+ You just need to add the script element somewhere in
+ the current div
+
+<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
+ SWS.Presentation.registerCallback("3_6", zoom_title);
+<script>
+
+ (That's not a bug, you should keep pressing next, see how many
+ steps there are on this slide)
+
+
+
+
+
+
+
SWS API
+ You can manipulate the presentation through
+ the SWS.Presentation object. For instance:
+
+ <a onclick="SWS.Presentation.previous();">âââââ</a>
+ <a onclick="SWS.Presentation.next();">â¶â¶â¶â¶â¶</a>
+ <a onclick="SWS.Presentation.goToSlide(1,2);">Go back in time!</a>
+
+ src="HTML5_Badge.svg" alt="5"/>
Presentation framework