Squeenote is a browser-based presentation engine built for people who are used to presenting to a sea of people's foreheads poking out, barely visible, from behind aluminium rectangles with glowing Apple logos.
Squeenote lets you author presentations in simple HTML5, and lets your audience follow you as you move through your slides. If you've got clickables or other interactive content in your slides, your audience can play around in the comfort of their own browser while you talk.
Audience members can opt to sit back and watch (Squeenote clients can automatically follow the presenter as she changes slides), or go off-track and explore the presentation in their own time, rejoining the rest of the audience whenever they choose.
Squeenote presentations can be uploaded to a static file server for archival.
To watch a presentation about squeenote:
- Install Node.js (Squeenote is built for v0.94)
- git clone git://github.com/danski/Squeenote.git
- cd Squeenote
- node squeenote.node.js
- Open your browser to http://127.0.0.1:8080
Enabling presenter mode keeps the Squeenote Server synched to your slide so that client users can follow your position in the presentation. To enable presenter mode, open Squeenote in your browser and press the equals key (=). Enter your presenter password and hit return.
The Squeenote Node.js app supports several command line flags:
node squeenote.node.js -f mypresentation.html -p presenterpassword -P port
The default file is "index.html", the default password is "ishouldhavesetapassword" and the default port is 8080.
Squeenote is built to be modular. There are several required components and several replaceable ones:
- squeenote.Server is the Squeenote Node.js application.
- squeenote.Device is the Javascript class responsible for identifying mobile client devices such as the iPhone and iPad.
- squeenote.Presentation Is the Javascript class used to control the state of the presentation and maintain sync with the server.
- squeenote.UI is responsible for drawing client and presenter controls into the markup. It subscribes to events from squeenote.Presentation in order to keep the user informed, and emits several events in turn from its various clickables.
- squeenote-default is the provided presentation theme. It's in /public/squeenote-default, and you can customise it, copy it and mangle it to your heart's content. The theme is responsible for slide change animations and document formatting, and as such listens to events from squeenote.Presentation in order to apply animations on slide change. The default theme consists of a single CSS file and a single JS file, both located in this folder.
Squeenote's markup is extremely simple. Simply include an <ol /> tag directly inside the body, and Squeenote will treat all the <li /> elements within it as individual slides. Squeenote includes a default theme which provides some basic styling and animations. Feel free to open them up (in /public/squeenote-default), or copy them to a new folder and create a new theme. Here's an example HTML presentation with one slide:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Squeenote</title>
<!-- Common dependencies -->
<script type="text/javascript" src="/public/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/public/common/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/public/common/js/jqtouch.min.js"></script>
<script type="text/javascript" src="/public/common/js/socket.io.js"></script>
<!-- Squeenote core -->
<script type="text/javascript" src="/public/common/js/squeenote.device.js"></script>
<script type="text/javascript" src="/public/common/js/squeenote.presentation.js"></script>
<script type="text/javascript" src="/public/common/js/squeenote.ui.js"></script>
<link rel="stylesheet" href="/public/common/css/controls.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- Boot Squeenote -->
<script type="text/javascript">
$(document).ready(function() {
squeenote.Device = new squeenote.Device();
squeenote.Presentation = new squeenote.Presentation();
})
$(document).bind("presentationLoaded.squeenote", function(event, presentation) {
squeenote.UI = new squeenote.UI(presentation);
});
</script>
<!-- Theme files -->
<script type="text/javascript" src="/public/squeenote-default/theme.js"></script>
<link rel="stylesheet" href="/public/squeenote-default/theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<ol>
<li>
<h1>Squeenote</h1>
<h3>A way for nerds to present to other nerds</h3>
<p>Press ← or → on the keyboard to move between slides, or use the buttons at the top right.</p>
<p><a href="http://github.com/danski/squeenote">http://github.com/danski/squeenote</a></p>
</li>
</ol>
</body>
</html>
Squeenote by Dan Glegg is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License.
Based on a work at github.com.
