Mercurial > hg > nodescore

comparison www/p/index.html @ 43:7f0485e0d0ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
updates via ljubljana
author tzara <rc-web@kiben.net>
date Sat, 08 Sep 2012 08:25:19 +0000
parents 49c94f63b8b0
children 8fc7155aa3ac
comparison
equal deleted inserted replaced
42:49c94f63b8b0 43:7f0485e0d0ff
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 3
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 6
7 <title>nodescore</title> 7 <title>nodescore</title>
8 8
9 <meta name="nodescore" content="bla"> 9 <meta name="nodescore" content="nodescore">
10 <meta name="author" content="Rob Canning"> 10 <meta name="author" content="Rob Canning">
11 11
12 <meta name="apple-mobile-web-app-capable" content="yes" /> 12 <meta name="apple-mobile-web-app-capable" content="yes" />
13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
14 14
15 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 15 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
16 16
17 <link rel="stylesheet" href="css/main.css"> 17 <link rel="stylesheet" href="css/main.css">
18 <link rel="stylesheet" href="css/theme/default.css" id="theme"> 18 <link rel="stylesheet" href="css/theme/sky.css" id="theme">
19 19
20 <!-- For syntax highlighting --> 20 <!-- For syntax highlighting -->
21 <link rel="stylesheet" href="lib/css/zenburn.css"> 21 <link rel="stylesheet" href="lib/css/zenburn.css">
22 22
23 <script> 23 <script>
30 <![endif]--> 30 <![endif]-->
31 </head> 31 </head>
32 32
33 <body> 33 <body>
34 34
35 <div class="reveal"> 35 <div class="reveal">
36 36
37 <!-- Used to fade in a background when a specific slide state is reached --> 37 <!-- Used to fade in a background when a specific slide state is reached -->
38 <div class="state-background"></div> 38 <div class="state-background"></div>
39 39
40 <!-- Any section element inside of this container is displayed as a slide --> 40 <!-- Any section element inside of this container is displayed as a slide -->
41 <div class="slides"> 41 <div class="slides">
42 <section> 42 <section>
43 <h1>ICMC 2012</h1> 43
44 <h3>REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT</h3> 44 <h3>REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT</h3>
45 <p> 45 <p>
46 46
47 <i><small>- <a href="http://rob.kiben.net">http://rob.kiben.net</a> <a href="rob@kiben.net">rob@kiben.net</a> -</small></i> 47 <i><small>- <a href="http://rob.kiben.net">http://rob.kiben.net</a> <a href="rob@kiben.net">rob@kiben.net</a> -</small></i>
48 </p> 48 </p>
49 </section> 49 </section>
50 50
51 <section> 51 <section>
52 <h2>NODESCORE</h2> 52 <h2>NODESCORE</h2>
53 <p> 53 <p>
54 NodeScore is a web based framework to facilitate networked telematic ensemble performance. 54 NodeScore is a web based framework to facilitate networked ensemble performance.
55 </p> 55 </p>
56 56 <ul>
57 <aside class="notes"> 57 <li>Scores assembled in HTML5</li>
58 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server. 58 <li>Musicians displays controled remotely</li>
59 </aside> 59 <li>Not all-in-one solution - Modular Approach</li>
60 </section> 60 <li>Runs alongside other streams: media, OSC automation etc.</li>
61 61 </ul>
62 <!-- Example of nested vertical slides --> 62
63 <section> 63 <aside class="notes">
64 <section> 64 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
65 <h2>Vertical Slides</h2> 65 </aside>
66 <p> 66 </section>
67 Slides can be nested inside of other slides, 67
68 try pressing <a href="#/2/1">down</a>. 68
69 </p> 69 <section>
70 <a href="#/2/1" class="image"> 70 <h2>NODESCORE</h2>
71 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> 71 <p>
72 </a> 72
73 </section> 73 </p>
74 <section> 74
75 <h2>Basement Level 1</h2> 75
76 <p>Press down or up to navigate.</p> 76 <img width="250" height="250" src="images/directed.png" alt="BreakDOM game screenshot">
77 </section> 77
78 <section> 78 <img width="250" height="250" src="images/democracy.png" alt="BreakDOM game screenshot">
79 <h2>Basement Level 2</h2> 79
80 <p>Cornify</p> 80 <aside class="notes">
81 <a class="test" href="http://cornify.com"> 81 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
82 <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> 82 </aside>
83 </a> 83 </section>
84 </section> 84
85 <section> 85
86 <h2>Basement Level 3</h2> 86
87 <p>That's it, time to go back up.</p> 87 <section>
88 <a href="#/2" class="image"> 88 <h2>Standards Complient</h2>
89 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> 89
90 </a> 90 <img width="300" src="images/tim.jpg" alt="BreakDOM game screenshot">
91 </section> 91
92 </section> 92 <ul>
93 93 <li>HTML5</li>
94 <section> 94 <li>CSS3</li>
95 <h2>Holistic Overview</h2> 95 <li>(JAVASCRIPT)</li>
96 <p> 96 <li>WEBSOCKETS</li>
97 Press <strong>ESC</strong> to enter the slide overview! 97 </ul>
98 </p> 98 <br><br>
99 </section> 99 <p>
100 100 Open Source - No Plugins <br>(Flash, Flex, Shockwave, Java)
101 <section> 101 </p>
102 <h2>Works in Mobile Safari</h2> 102 </section>
103 <p> 103
104 Try it out! You can swipe through the slides pinch your way to the overview. 104 <section>
105 </p> 105 <h2>WEBSOCKETS</h2>
106 </section> 106
107 107 <p>
108 <section> 108 Server Push Technology<br>
109 <h2>Marvelous Unordered List</h2> 109 </p>
110 <ul> 110 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
111 <li>No order here</li> 111 <img width="250" height="250" src="images/websockets.png" alt="BreakDOM game screenshot">
112 <li>Or here</li> 112 </a>
113 <li>Or here</li> 113 <ul>
114 <li>Or here</li> 114 <li>More efficient than AJAX/Comet Programming</li>
115 </ul> 115 <li>Persistant bidirectional TCP socket</li>
116 </section> 116 <li>REQUEST/RESPONSE handshakes elimintated</li>
117 117 </ul>
118 <section> 118
119 <h2>Fantastic Ordered List</h2> 119
120 <ol> 120
121 <li>One is smaller than...</li> 121 <aside class="notes">
122 <li>Two is smaller than...</li> 122 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
123 <li>Three!</li> 123 </aside>
124 </ol> 124 </section>
125 </section> 125
126 126
127 <section data-markdown> 127 <section>
128 ## Markdown support 128 <h2>HTTP://SOCKET.IO</h2>
129 129
130 For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). 130 <p>Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.</p>
131 131 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
132 <pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt; 132 <img height="250" src="images/socketio.png" alt="BreakDOM game screenshot">
133 ## Markdown support 133 </a>
134 134
135 For those of you who like that sort of thing. 135 <aside class="notes">
136 Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). 136 <p>Racket/PHP Alternative</p>
137 &lt;/section&gt; 137 </aside>
138 </code></pre> 138 </section>
139 </section> 139
140 140
141 <section> 141
142 <h2>Transition Styles</h2> 142 <section>
143 <p> 143 <h2>Serverside Javascript</h2>
144 You can select from different transitions, like: <br> 144 <h3>NodeJS Server</h3>
145 <a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a> - 145 <pre><code contenteditable>var sio = require('socket.io')
146 <a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a> - 146 , http = require('http'), fs = require('fs'), static = require('node-static');
147 <a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a> - 147
148 <a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a> 148 var clientFiles = new static.Server('./www');
149 </p> 149 var httpServer = http.createServer(
150 </section> 150 function(request, response) {
151 151 request.addListener('end', function () {
152 <section> 152 clientFiles.serve(request, response);
153 <h2>Themes</h2> 153 process.setMaxListeners(0);
154 <p> 154 });
155 Reveal.js comes with a few themes built in: <br> 155 }); httpServer.listen(8889);
156 <a href="http://lab.hakim.se/reveal-js/?theme=sky">Sky</a> - 156
157 <a href="http://lab.hakim.se/reveal-js/?theme=beige">Beige</a> - 157 var io = sio.listen(httpServer);
158 <a href="http://lab.hakim.se/reveal-js/?theme=simple">Simple</a> - 158 io.set('log level', 1); // reduce logging
159 <a href="http://lab.hakim.se/reveal-js/">Default</a> 159 io.sockets.on('connection', function (socket) {</code></pre>
160 </p> 160
161 <p> 161 </section>
162 <small> 162
163 * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>. 163 <section>
164 </small> 164 <h2>Client Plumbing</h2>
165 </p> 165
166 </section> 166 // load the sockets lib
167 167 <pre><code contenteditable>&lt;script src="/socket.io/socket.io.js"&gt &lt;/script&gt
168 <section> 168 </code></pre>
169 <section data-state="alert"> 169 // connect to socket
170 <h2>Global State</h2> 170 <pre><code contenteditable>
171 <p> 171 var socket = io.connect();
172 Set <code>data-state="something"</code> on a slide and <code>"something"</code> 172 </code></pre>
173 will be added as a class to the document element when the slide is open. This lets you 173
174 apply broader style changes, like switching the background. 174 //send something down the pipe
175 </p> 175 <pre><code contenteditable>
176 <a href="#/7/1" class="image"> 176 function startChr() { socket.emit("startChr") } </code></pre>
177 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> 177 </section>
178 </a> 178
179 </section> 179 <section>
180 <section data-state="blackout"> 180 <h2>CLIENT->SERVER->CLIENT</h2>
181 <h2>"blackout"</h2> 181 Chronometer on server pushes -> client
182 <a href="#/7/2" class="image"> 182 <pre><code contenteditable>// instruction from "director" client executed on server
183 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> 183 socket.on('startChr', function () { startChr();});
184 </a> 184 function startChr() { if (chronstate !== 1) {
185 </section> 185 chronstate = 1; chronometer();} }
186 <section data-state="soothe"> 186 ---snip---
187 <h2>"soothe"</h2> 187 setTimeout(function(){chronometer()}, 100);
188 <a href="#/7/0" class="image"> 188 socket.broadcast.emit('chronFromServer', chron)
189 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> 189 socket.emit('chronFromServer', chron)
190 </a> 190 ---snip---
191 </section> 191 // update chron value on the clients in line with server
192 </section> 192 socket.on("chronFromServer", function(chron) {
193 193 $("div#client_chronometer").text(chron);
194 <section data-state="customevent"> 194 }); </code></pre>
195 <h2>Custom Events</h2> 195
196 <p> 196 </section>
197 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. 197
198 </p> 198 <section>
199 <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() { 199 <h2>NODESCORE: INFO PANEL</h2>
200 console.log( '"customevent" has fired' ); 200 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
201 } ); 201 <img width="800" src="images/nodescore-infopanel.png" alt="screenshot">
202 </code></pre> 202 </a>
203 </section> 203
204 204 <p>
205 <section> 205 </p>
206 <h2>Clever Quotes</h2> 206 </section>
207 <p> 207
208 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> 208 <section>
209 The nice thing about standards is that there are so many to choose from</q> and block: 209 <h2>NODESCORE: CHAT PANEL</h2>
210 </p> 210 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
211 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> 211 <img width="800" src="images/nodescore-chat.png" alt="screenshot">
212 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would 212 </a>
213 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. 213
214 </blockquote> 214 <p>
215 </section> 215 </p>
216 216 </section>
217 <section> 217
218 <h2>Pretty Code</h2> 218 <section>
219 <pre><code contenteditable> 219 <h2>NODESCORE: NEXUS7 CSS</h2>
220 function linkify( selector ) { 220 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
221 if( supports3DTransforms ) { 221 <img width="800" src="images/nodescore-nexus.png" alt="screenshot">
222 222 </a>
223 var nodes = document.querySelectorAll( selector ); 223
224 224 <p>
225 for( var i = 0, len = nodes.length; i &lt; len; i++ ) { 225 </p>
226 var node = nodes[i]; 226 </section>
227 227
228 if( !node.className ) ) { 228
229 node.className += ' roll'; 229 <section>
230 } 230 <h2>Future Work</h2>
231 }; 231 <p>the TODO list...</p>
232 } 232 <ol>
233 } 233 <li class="fragment"><stron>trials room->field->world</strong></li>
234 </code></pre> 234 <li class="fragment"><em>Animated SVG, WebGL, <code>&lt;audio&gt;,&lt;video&gt;</em></code></li>
235 <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> 235
236 </section> 236 <li class="fragment">
237 237 <code>stop coding start composing</code><br>
238 <section> 238 </li>
239 <h2>Intergalactic Interconnections</h2> 239
240 <p> 240 </ol>
241 You can link between slides internally, 241 </section>
242 <a href="#/2/3">like this</a>. 242
243 </p> 243
244 </section> 244
245 245 </ul>
246 <section> 246 </section>
247 <h2>Fragmented Views</h2> 247
248 <p>Hit the next arrow...</p> 248 <section>
249 <p class="fragment">... to step through ...</p> 249 <h2>links</h2>
250 <ol> 250 <a href="http://nodescore.kiben.net/p/">This Presentation: http://nodescore.kiben.net/p/</a><br><br>
251 <li class="fragment"><code>any type</code></li> 251
252 <li class="fragment"><em>of view</em></li> 252 <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a><br><br>
253 <li class="fragment"><strong>fragments</strong></li> 253
254 </ol> 254 <a href="http://nodescore.kiben.net/p/canning_netscores_shortpaper-2012.pdf">ICMC2012 Paper</a><br><br>
255 </section> 255 <a href="http://gitorious.org/nodescore">Source Code on Gitorious</a><br><br>
256 256
257 <section> 257 <a href="mailto:rc-web@kiben.net">rc-web@kiben.net</a><br><br>
258 <h2>Spectacular image!</h2> 258 <a href="http://uk.linkedin.com/pub/rob-canning/35/9b5/481">
259 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank"> 259 <img src="http://www.linkedin.com/img/webpromo/btn_liprofile_blue_80x15.png" width="80" height="15" border="0" alt="View Rob Canning's profile on LinkedIn">
260 <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot"> 260 </a><br><br>
261 </a> 261
262 </section> 262
263 263 </section>
264 <section> 264 </div>
265 <h2>Export to PDF</h2> 265
266 <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p> 266 <!-- The navigational controls UI -->
267 <iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe> 267 <aside class="controls">
268 <script> 268 <a class="left" href="#">&#x25C4;</a>
269 document.getElementById('slideshare').attributeName = 'allowfullscreen'; 269 <a class="right" href="#">&#x25BA;</a>
270 </script> 270 <a class="up" href="#">&#x25B2;</a>
271 </section> 271 <a class="down" href="#">&#x25BC;</a>
272 272 </aside>
273 <section> 273
274 <h2>Stellar Links</h2> 274 <!-- Presentation progress bar -->
275 <ul> 275 <div class="progress"><span></span></div>
276 <li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li> 276
277 <li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li> 277 </div>
278 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li> 278
279 </ul> 279 <script src="lib/js/head.min.js"></script>
280 </section> 280 <script src="js/reveal.min.js"></script>
281 281
282 <section> 282 <script>
283 <h1>THE END</h1> 283
284 <h3>BY Hakim El Hattab / hakim.se</h3> 284 // Full list of configuration options available here:
285 </section> 285 // https://github.com/hakimel/reveal.js#configuration
286 </div> 286 Reveal.initialize({
287 287 controls: true,
288 <!-- The navigational controls UI --> 288 progress: true,
289 <aside class="controls"> 289 history: true,
290 <a class="left" href="#">&#x25C4;</a> 290
291 <a class="right" href="#">&#x25BA;</a> 291 theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
292 <a class="up" href="#">&#x25B2;</a> 292 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
293 <a class="down" href="#">&#x25BC;</a> 293
294 </aside> 294 // Optional libraries used to extend on reveal.js
295 295 dependencies: [
296 <!-- Presentation progress bar --> 296 { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
297 <div class="progress"><span></span></div> 297 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
298 298 { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
299 </div> 299 { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
300 300 { src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
301 <script src="lib/js/head.min.js"></script> 301 { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
302 <script src="js/reveal.min.js"></script> 302 ]
303 303 });
304 <script> 304
305 305 </script>
306 // Full list of configuration options available here: 306
307 // https://github.com/hakimel/reveal.js#configuration
308 Reveal.initialize({
309 controls: true,
310 progress: true,
311 history: true,
312
313 theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
314 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
315
316 // Optional libraries used to extend on reveal.js
317 dependencies: [
318 { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
319 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
320 { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
321 { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
322 { src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
323 { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
324 ]
325 });
326
327 </script>
328
329 </body> 307 </body>
330 </html> 308 </html>