forked from crcastle/Squeenote
/
index.html
143 lines (120 loc) · 5.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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>
<!-- reference to socket.io js -->
<script type="text/javascript" src="/socket.io/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"><!DOCTYPE html>
<html lang="en">
<head>
<title>My presentation</title>
...
</head>
<body>
<ol>
<li>
Slide 1
</li>
<li>
Slide 2
</li>
</ol>
</body>
</html></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>