Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
142 lines (119 sloc) 5.14 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Squeenote</title>
<!-- Apple mobile device handling -->
<meta name="viewport" content="user-scalable=no, width=device-width">
<!-- 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/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">
<link media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"
href="/public/squeenote-default/theme.ext.ipad.css" type="text/css" rel="stylesheet">
<link media="only screen and (max-device-width: 480px)"
href="/public/squeenote-default/theme.ext.iphone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<ol>
<li>
<h1>Squeenote</h1>
<h3>A way for nerds to present to other nerds</h3>
<p><a href="http://github.com/danski/squeenote">http://github.com/danski/squeenote</a></p>
</li>
<li>
<h2>For audiences like this.</h2>
<img class="photo" src="http://farm1.static.flickr.com/182/380186134_b74e5c70d6.jpg" />
</li>
<li>
<h1>Presenter Follow</h1>
<h3>Squeenote keeps everyone's view on the presentation in sync.</h3>
<p>If you're in the audience, you can browse the presentation as you please and rejoin the presenter whenever you like. It works using HTML5 websockets and the souls of the damned.</p>
</li>
<li>
<h2>Presentation == a web page.</h2>
<p>A Squeenote presentation is just an ordered list. Each item in the list is a slide.</p>
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;title&gt;My presentation&lt;/title&gt;
...
&lt;/head&gt;
&lt;body&gt;
&lt;ol&gt;
&lt;li&gt;
Slide 1
&lt;/li&gt;
&lt;li&gt;
Slide 2
&lt;/li&gt;
&lt;/ol&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</li>
<li>
<h2>Modular == Themeable</h2>
<ul>
<li>Squeenote's opinionated (but simple) markup lets you apply your own styles and transitions.</li>
<li>Default theme uses CSS3 transitions for animation.</li>
<li>Squeenote publishes events that you can use for transitions and styling.</li>
<li>Since a presentation is just an HTML file, themes are just CSS and Javascript.</li>
</ul>
</li>
<li>
<h2>Modular == Hackable</h2>
<ul>
<li>Squeenote's classes are replaceable on a per-presentation basis.</li>
<li><pre>squeenote.Server</pre> is the <a href="http://nodejs.org">Node.js</a> application.</li>
<li><pre>squeenote.Presentation</pre> maintains the server connection and dispatches all control events.</li>
<li><pre>squeenote.UI</pre> renders the control bar and dispatches all interaction events.</li>
<li><pre>squeenote.Device</pre> provides support for identifying touch devices.</li>
</ul>
</li>
<li>
<h2>Designed for microdeployment</h2>
<ul>
<li><pre>squeenote.Server</pre> is intended to be deployed for a short time while you give your presentation.</li>
<li>Run it locally over venue wifi for a small crowd...</li>
<li>... or deploy it remotely, include a video/audio stream in your presentation file, and deliver your whole presentation over the web.</li>
</ul>
</li>
<li>
<h2>Designed for archival</h2>
<ul>
<li>All CSS, Javascript and other assets use paths that are safe for delivery as static files.</li>
<li>Upload your presentation to any static server and Squeenote will run in "presenter offline" mode.</li>
</ul>
</li>
<li>
<h2>Open-source soup</h2>
<ul>
<li>Squeenote Server uses <a href="http://nodejs.org">Node.js</a> and <a href="http://socket.io/">Socket.io</a></li>
<li>Squeenote UI uses <a href="http://jquery.com">jQuery</a></li>
<li>Squeenote Client uses <a href="http://socket.io/">Socket.io</a> for server connectivity</li>
</ul>
</li>
<li>
<h2>You will ask questions now.</h2>
<img class="middle" src="http://gaia.sunn.de/tmp/hypnotoad.gif">
</li>
</ol>
</body>
</html>