Introduction
What is it?
SimpleWebSlides is simple tool that allows
you to build funky presentations:
- Write your presentations in (X)HTML5!
- 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,…)
What's wrong with Powerpoint/Keynote/LibreOffice ?
Seriously ?
Can I really use SWS for scientific presentations?
You sure can:
- Exhibit A: $$
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
$$
- Exihbit B: $$
\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:
<div class="sws-slide">
Slide title
Hello world!
]]>
You can also reveal things progressively like this:
Text 1
class="sws-pause" Text 2 (appears afterwards)
]]>
You can also set an element to appear on specific frames:
Text1
class="sws-onframe-1-5_9"
Appears on frame 1, 2, 3, 4, 5, and 9 of the current slide
(frame numbering starts at 0).
]]>
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
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);]]>
(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>
Let's try it:
◀◀◀◀◀
▶▶▶▶▶
Go
back in time! (to the second frame of the first slide)
Some more fancy stuff
Let's put some
inline SVG:
Of course we can animate it with some javascript!
Totally customizable
BTW did you see how I changed the transition effect for the
previous slide ?
Presentation framework