Mercurial > hg > nodescore

annotate 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
rev   line source
rc-web@42 1 <!doctype html>
rc-web@42 2 <html lang="en">
rc-web@43 3
rc-web@42 4 <head>
rc-web@42 5 <meta charset="utf-8">
rc-web@42 6
rc-web@42 7 <title>nodescore</title>
rc-web@42 8
rc-web@43 9 <meta name="nodescore" content="nodescore">
rc-web@42 10 <meta name="author" content="Rob Canning">
rc-web@42 11
rc-web@42 12 <meta name="apple-mobile-web-app-capable" content="yes" />
rc-web@42 13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
rc-web@42 14
rc-web@42 15 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
rc-web@42 16
rc-web@42 17 <link rel="stylesheet" href="css/main.css">
rc-web@43 18 <link rel="stylesheet" href="css/theme/sky.css" id="theme">
rc-web@42 19
rc-web@42 20 <!-- For syntax highlighting -->
rc-web@42 21 <link rel="stylesheet" href="lib/css/zenburn.css">
rc-web@42 22
rc-web@42 23 <script>
rc-web@42 24 // If the query includes 'print-pdf' we'll use the PDF print sheet
rc-web@42 25 document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
rc-web@42 26 </script>
rc-web@42 27
rc-web@42 28 <!--[if lt IE 9]>
rc-web@42 29 <script src="lib/js/html5shiv.js"></script>
rc-web@42 30 <![endif]-->
rc-web@42 31 </head>
rc-web@42 32
rc-web@42 33 <body>
rc-web@42 34
rc-web@43 35 <div class="reveal">
rc-web@43 36
rc-web@43 37 <!-- Used to fade in a background when a specific slide state is reached -->
rc-web@43 38 <div class="state-background"></div>
rc-web@43 39
rc-web@43 40 <!-- Any section element inside of this container is displayed as a slide -->
rc-web@43 41 <div class="slides">
rc-web@43 42 <section>
rc-web@43 43
rc-web@43 44 <h3>REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT</h3>
rc-web@43 45 <p>
rc-web@43 46
rc-web@43 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>
rc-web@43 48 </p>
rc-web@43 49 </section>
rc-web@43 50
rc-web@43 51 <section>
rc-web@43 52 <h2>NODESCORE</h2>
rc-web@43 53 <p>
rc-web@43 54 NodeScore is a web based framework to facilitate networked ensemble performance.
rc-web@43 55 </p>
rc-web@43 56 <ul>
rc-web@43 57 <li>Scores assembled in HTML5</li>
rc-web@43 58 <li>Musicians displays controled remotely</li>
rc-web@43 59 <li>Not all-in-one solution - Modular Approach</li>
rc-web@43 60 <li>Runs alongside other streams: media, OSC automation etc.</li>
rc-web@43 61 </ul>
rc-web@42 62
rc-web@43 63 <aside class="notes">
rc-web@43 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.
rc-web@43 65 </aside>
rc-web@43 66 </section>
rc-web@42 67
rc-web@42 68
rc-web@43 69 <section>
rc-web@43 70 <h2>NODESCORE</h2>
rc-web@43 71 <p>
rc-web@42 72
rc-web@43 73 </p>
rc-web@42 74
rc-web@42 75
rc-web@43 76 <img width="250" height="250" src="images/directed.png" alt="BreakDOM game screenshot">
rc-web@43 77
rc-web@43 78 <img width="250" height="250" src="images/democracy.png" alt="BreakDOM game screenshot">
rc-web@43 79
rc-web@43 80 <aside class="notes">
rc-web@43 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.
rc-web@43 82 </aside>
rc-web@43 83 </section>
rc-web@42 84
rc-web@42 85
rc-web@43 86
rc-web@43 87 <section>
rc-web@43 88 <h2>Standards Complient</h2>
rc-web@42 89
rc-web@43 90 <img width="300" src="images/tim.jpg" alt="BreakDOM game screenshot">
rc-web@42 91
rc-web@43 92 <ul>
rc-web@43 93 <li>HTML5</li>
rc-web@43 94 <li>CSS3</li>
rc-web@43 95 <li>(JAVASCRIPT)</li>
rc-web@43 96 <li>WEBSOCKETS</li>
rc-web@43 97 </ul>
rc-web@43 98 <br><br>
rc-web@43 99 <p>
rc-web@43 100 Open Source - No Plugins <br>(Flash, Flex, Shockwave, Java)
rc-web@43 101 </p>
rc-web@43 102 </section>
rc-web@43 103
rc-web@43 104 <section>
rc-web@43 105 <h2>WEBSOCKETS</h2>
rc-web@43 106
rc-web@43 107 <p>
rc-web@43 108 Server Push Technology<br>
rc-web@43 109 </p>
rc-web@43 110 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 111 <img width="250" height="250" src="images/websockets.png" alt="BreakDOM game screenshot">
rc-web@43 112 </a>
rc-web@43 113 <ul>
rc-web@43 114 <li>More efficient than AJAX/Comet Programming</li>
rc-web@43 115 <li>Persistant bidirectional TCP socket</li>
rc-web@43 116 <li>REQUEST/RESPONSE handshakes elimintated</li>
rc-web@43 117 </ul>
rc-web@43 118
rc-web@42 119
rc-web@42 120
rc-web@43 121 <aside class="notes">
rc-web@43 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.
rc-web@43 123 </aside>
rc-web@43 124 </section>
rc-web@42 125
rc-web@42 126
rc-web@43 127 <section>
rc-web@43 128 <h2>HTTP://SOCKET.IO</h2>
rc-web@42 129
rc-web@43 130 <p>Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.</p>
rc-web@43 131 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 132 <img height="250" src="images/socketio.png" alt="BreakDOM game screenshot">
rc-web@43 133 </a>
rc-web@42 134
rc-web@43 135 <aside class="notes">
rc-web@43 136 <p>Racket/PHP Alternative</p>
rc-web@43 137 </aside>
rc-web@43 138 </section>
rc-web@42 139
rc-web@42 140
rc-web@42 141
rc-web@43 142 <section>
rc-web@43 143 <h2>Serverside Javascript</h2>
rc-web@43 144 <h3>NodeJS Server</h3>
rc-web@43 145 <pre><code contenteditable>var sio = require('socket.io')
rc-web@43 146 , http = require('http'), fs = require('fs'), static = require('node-static');
rc-web@42 147
rc-web@43 148 var clientFiles = new static.Server('./www');
rc-web@43 149 var httpServer = http.createServer(
rc-web@43 150 function(request, response) {
rc-web@43 151 request.addListener('end', function () {
rc-web@43 152 clientFiles.serve(request, response);
rc-web@43 153 process.setMaxListeners(0);
rc-web@43 154 });
rc-web@43 155 }); httpServer.listen(8889);
rc-web@42 156
rc-web@43 157 var io = sio.listen(httpServer);
rc-web@43 158 io.set('log level', 1); // reduce logging
rc-web@43 159 io.sockets.on('connection', function (socket) {</code></pre>
rc-web@43 160
rc-web@43 161 </section>
rc-web@43 162
rc-web@43 163 <section>
rc-web@43 164 <h2>Client Plumbing</h2>
rc-web@43 165
rc-web@43 166 // load the sockets lib
rc-web@43 167 <pre><code contenteditable>&lt;script src="/socket.io/socket.io.js"&gt &lt;/script&gt
rc-web@43 168 </code></pre>
rc-web@43 169 // connect to socket
rc-web@43 170 <pre><code contenteditable>
rc-web@43 171 var socket = io.connect();
rc-web@43 172 </code></pre>
rc-web@43 173
rc-web@43 174 //send something down the pipe
rc-web@43 175 <pre><code contenteditable>
rc-web@43 176 function startChr() { socket.emit("startChr") } </code></pre>
rc-web@43 177 </section>
rc-web@43 178
rc-web@43 179 <section>
rc-web@43 180 <h2>CLIENT->SERVER->CLIENT</h2>
rc-web@43 181 Chronometer on server pushes -> client
rc-web@43 182 <pre><code contenteditable>// instruction from "director" client executed on server
rc-web@43 183 socket.on('startChr', function () { startChr();});
rc-web@43 184 function startChr() { if (chronstate !== 1) {
rc-web@43 185 chronstate = 1; chronometer();} }
rc-web@43 186 ---snip---
rc-web@43 187 setTimeout(function(){chronometer()}, 100);
rc-web@43 188 socket.broadcast.emit('chronFromServer', chron)
rc-web@43 189 socket.emit('chronFromServer', chron)
rc-web@43 190 ---snip---
rc-web@43 191 // update chron value on the clients in line with server
rc-web@43 192 socket.on("chronFromServer", function(chron) {
rc-web@43 193 $("div#client_chronometer").text(chron);
rc-web@43 194 }); </code></pre>
rc-web@43 195
rc-web@43 196 </section>
rc-web@43 197
rc-web@43 198 <section>
rc-web@43 199 <h2>NODESCORE: INFO PANEL</h2>
rc-web@43 200 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 201 <img width="800" src="images/nodescore-infopanel.png" alt="screenshot">
rc-web@43 202 </a>
rc-web@43 203
rc-web@43 204 <p>
rc-web@43 205 </p>
rc-web@43 206 </section>
rc-web@43 207
rc-web@43 208 <section>
rc-web@43 209 <h2>NODESCORE: CHAT PANEL</h2>
rc-web@43 210 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 211 <img width="800" src="images/nodescore-chat.png" alt="screenshot">
rc-web@43 212 </a>
rc-web@43 213
rc-web@43 214 <p>
rc-web@43 215 </p>
rc-web@43 216 </section>
rc-web@43 217
rc-web@43 218 <section>
rc-web@43 219 <h2>NODESCORE: NEXUS7 CSS</h2>
rc-web@43 220 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@43 221 <img width="800" src="images/nodescore-nexus.png" alt="screenshot">
rc-web@43 222 </a>
rc-web@43 223
rc-web@43 224 <p>
rc-web@43 225 </p>
rc-web@43 226 </section>
rc-web@43 227
rc-web@43 228
rc-web@43 229 <section>
rc-web@43 230 <h2>Future Work</h2>
rc-web@43 231 <p>the TODO list...</p>
rc-web@43 232 <ol>
rc-web@43 233 <li class="fragment"><stron>trials room->field->world</strong></li>
rc-web@43 234 <li class="fragment"><em>Animated SVG, WebGL, <code>&lt;audio&gt;,&lt;video&gt;</em></code></li>
rc-web@43 235
rc-web@43 236 <li class="fragment">
rc-web@43 237 <code>stop coding start composing</code><br>
rc-web@43 238 </li>
rc-web@43 239
rc-web@43 240 </ol>
rc-web@43 241 </section>
rc-web@43 242
rc-web@43 243
rc-web@43 244
rc-web@43 245 </ul>
rc-web@43 246 </section>
rc-web@43 247
rc-web@43 248 <section>
rc-web@43 249 <h2>links</h2>
rc-web@43 250 <a href="http://nodescore.kiben.net/p/">This Presentation: http://nodescore.kiben.net/p/</a><br><br>
rc-web@43 251
rc-web@43 252 <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a><br><br>
rc-web@43 253
rc-web@43 254 <a href="http://nodescore.kiben.net/p/canning_netscores_shortpaper-2012.pdf">ICMC2012 Paper</a><br><br>
rc-web@43 255 <a href="http://gitorious.org/nodescore">Source Code on Gitorious</a><br><br>
rc-web@43 256
rc-web@43 257 <a href="mailto:rc-web@kiben.net">rc-web@kiben.net</a><br><br>
rc-web@43 258 <a href="http://uk.linkedin.com/pub/rob-canning/35/9b5/481">
rc-web@43 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">
rc-web@43 260 </a><br><br>
rc-web@43 261
rc-web@43 262
rc-web@43 263 </section>
rc-web@43 264 </div>
rc-web@43 265
rc-web@43 266 <!-- The navigational controls UI -->
rc-web@43 267 <aside class="controls">
rc-web@43 268 <a class="left" href="#">&#x25C4;</a>
rc-web@43 269 <a class="right" href="#">&#x25BA;</a>
rc-web@43 270 <a class="up" href="#">&#x25B2;</a>
rc-web@43 271 <a class="down" href="#">&#x25BC;</a>
rc-web@43 272 </aside>
rc-web@43 273
rc-web@43 274 <!-- Presentation progress bar -->
rc-web@43 275 <div class="progress"><span></span></div>
rc-web@43 276
rc-web@43 277 </div>
rc-web@43 278
rc-web@43 279 <script src="lib/js/head.min.js"></script>
rc-web@43 280 <script src="js/reveal.min.js"></script>
rc-web@43 281
rc-web@43 282 <script>
rc-web@43 283
rc-web@43 284 // Full list of configuration options available here:
rc-web@43 285 // https://github.com/hakimel/reveal.js#configuration
rc-web@43 286 Reveal.initialize({
rc-web@43 287 controls: true,
rc-web@43 288 progress: true,
rc-web@43 289 history: true,
rc-web@43 290
rc-web@43 291 theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
rc-web@43 292 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
rc-web@43 293
rc-web@43 294 // Optional libraries used to extend on reveal.js
rc-web@43 295 dependencies: [
rc-web@43 296 { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
rc-web@43 297 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
rc-web@43 298 { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@43 299 { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@43 300 { src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@43 301 { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@43 302 ]
rc-web@43 303 });
rc-web@43 304
rc-web@43 305 </script>
rc-web@43 306
rc-web@42 307 </body>
rc-web@42 308 </html>