Mercurial > hg > nodescore

annotate www/p/index.html @ 42:49c94f63b8b0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
css for nexus 7 and associated files- archive m.a added - remove later
author tzara <rc-web@kiben.net>
date Tue, 04 Sep 2012 07:25:49 +0000
parents
children 7f0485e0d0ff
rev   line source
rc-web@42 1 <!doctype html>
rc-web@42 2 <html lang="en">
rc-web@42 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@42 9 <meta name="nodescore" content="bla">
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@42 18 <link rel="stylesheet" href="css/theme/default.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@42 35 <div class="reveal">
rc-web@42 36
rc-web@42 37 <!-- Used to fade in a background when a specific slide state is reached -->
rc-web@42 38 <div class="state-background"></div>
rc-web@42 39
rc-web@42 40 <!-- Any section element inside of this container is displayed as a slide -->
rc-web@42 41 <div class="slides">
rc-web@42 42 <section>
rc-web@42 43 <h1>ICMC 2012</h1>
rc-web@42 44 <h3>REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT</h3>
rc-web@42 45 <p>
rc-web@42 46
rc-web@42 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@42 48 </p>
rc-web@42 49 </section>
rc-web@42 50
rc-web@42 51 <section>
rc-web@42 52 <h2>NODESCORE</h2>
rc-web@42 53 <p>
rc-web@42 54 NodeScore is a web based framework to facilitate networked telematic ensemble performance.
rc-web@42 55 </p>
rc-web@42 56
rc-web@42 57 <aside class="notes">
rc-web@42 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.
rc-web@42 59 </aside>
rc-web@42 60 </section>
rc-web@42 61
rc-web@42 62 <!-- Example of nested vertical slides -->
rc-web@42 63 <section>
rc-web@42 64 <section>
rc-web@42 65 <h2>Vertical Slides</h2>
rc-web@42 66 <p>
rc-web@42 67 Slides can be nested inside of other slides,
rc-web@42 68 try pressing <a href="#/2/1">down</a>.
rc-web@42 69 </p>
rc-web@42 70 <a href="#/2/1" class="image">
rc-web@42 71 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
rc-web@42 72 </a>
rc-web@42 73 </section>
rc-web@42 74 <section>
rc-web@42 75 <h2>Basement Level 1</h2>
rc-web@42 76 <p>Press down or up to navigate.</p>
rc-web@42 77 </section>
rc-web@42 78 <section>
rc-web@42 79 <h2>Basement Level 2</h2>
rc-web@42 80 <p>Cornify</p>
rc-web@42 81 <a class="test" href="http://cornify.com">
rc-web@42 82 <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
rc-web@42 83 </a>
rc-web@42 84 </section>
rc-web@42 85 <section>
rc-web@42 86 <h2>Basement Level 3</h2>
rc-web@42 87 <p>That's it, time to go back up.</p>
rc-web@42 88 <a href="#/2" class="image">
rc-web@42 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);">
rc-web@42 90 </a>
rc-web@42 91 </section>
rc-web@42 92 </section>
rc-web@42 93
rc-web@42 94 <section>
rc-web@42 95 <h2>Holistic Overview</h2>
rc-web@42 96 <p>
rc-web@42 97 Press <strong>ESC</strong> to enter the slide overview!
rc-web@42 98 </p>
rc-web@42 99 </section>
rc-web@42 100
rc-web@42 101 <section>
rc-web@42 102 <h2>Works in Mobile Safari</h2>
rc-web@42 103 <p>
rc-web@42 104 Try it out! You can swipe through the slides pinch your way to the overview.
rc-web@42 105 </p>
rc-web@42 106 </section>
rc-web@42 107
rc-web@42 108 <section>
rc-web@42 109 <h2>Marvelous Unordered List</h2>
rc-web@42 110 <ul>
rc-web@42 111 <li>No order here</li>
rc-web@42 112 <li>Or here</li>
rc-web@42 113 <li>Or here</li>
rc-web@42 114 <li>Or here</li>
rc-web@42 115 </ul>
rc-web@42 116 </section>
rc-web@42 117
rc-web@42 118 <section>
rc-web@42 119 <h2>Fantastic Ordered List</h2>
rc-web@42 120 <ol>
rc-web@42 121 <li>One is smaller than...</li>
rc-web@42 122 <li>Two is smaller than...</li>
rc-web@42 123 <li>Three!</li>
rc-web@42 124 </ol>
rc-web@42 125 </section>
rc-web@42 126
rc-web@42 127 <section data-markdown>
rc-web@42 128 ## Markdown support
rc-web@42 129
rc-web@42 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).
rc-web@42 131
rc-web@42 132 <pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt;
rc-web@42 133 ## Markdown support
rc-web@42 134
rc-web@42 135 For those of you who like that sort of thing.
rc-web@42 136 Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
rc-web@42 137 &lt;/section&gt;
rc-web@42 138 </code></pre>
rc-web@42 139 </section>
rc-web@42 140
rc-web@42 141 <section>
rc-web@42 142 <h2>Transition Styles</h2>
rc-web@42 143 <p>
rc-web@42 144 You can select from different transitions, like: <br>
rc-web@42 145 <a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a> -
rc-web@42 146 <a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a> -
rc-web@42 147 <a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a> -
rc-web@42 148 <a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a>
rc-web@42 149 </p>
rc-web@42 150 </section>
rc-web@42 151
rc-web@42 152 <section>
rc-web@42 153 <h2>Themes</h2>
rc-web@42 154 <p>
rc-web@42 155 Reveal.js comes with a few themes built in: <br>
rc-web@42 156 <a href="http://lab.hakim.se/reveal-js/?theme=sky">Sky</a> -
rc-web@42 157 <a href="http://lab.hakim.se/reveal-js/?theme=beige">Beige</a> -
rc-web@42 158 <a href="http://lab.hakim.se/reveal-js/?theme=simple">Simple</a> -
rc-web@42 159 <a href="http://lab.hakim.se/reveal-js/">Default</a>
rc-web@42 160 </p>
rc-web@42 161 <p>
rc-web@42 162 <small>
rc-web@42 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>.
rc-web@42 164 </small>
rc-web@42 165 </p>
rc-web@42 166 </section>
rc-web@42 167
rc-web@42 168 <section>
rc-web@42 169 <section data-state="alert">
rc-web@42 170 <h2>Global State</h2>
rc-web@42 171 <p>
rc-web@42 172 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
rc-web@42 173 will be added as a class to the document element when the slide is open. This lets you
rc-web@42 174 apply broader style changes, like switching the background.
rc-web@42 175 </p>
rc-web@42 176 <a href="#/7/1" class="image">
rc-web@42 177 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
rc-web@42 178 </a>
rc-web@42 179 </section>
rc-web@42 180 <section data-state="blackout">
rc-web@42 181 <h2>"blackout"</h2>
rc-web@42 182 <a href="#/7/2" class="image">
rc-web@42 183 <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
rc-web@42 184 </a>
rc-web@42 185 </section>
rc-web@42 186 <section data-state="soothe">
rc-web@42 187 <h2>"soothe"</h2>
rc-web@42 188 <a href="#/7/0" class="image">
rc-web@42 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);">
rc-web@42 190 </a>
rc-web@42 191 </section>
rc-web@42 192 </section>
rc-web@42 193
rc-web@42 194 <section data-state="customevent">
rc-web@42 195 <h2>Custom Events</h2>
rc-web@42 196 <p>
rc-web@42 197 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
rc-web@42 198 </p>
rc-web@42 199 <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
rc-web@42 200 console.log( '"customevent" has fired' );
rc-web@42 201 } );
rc-web@42 202 </code></pre>
rc-web@42 203 </section>
rc-web@42 204
rc-web@42 205 <section>
rc-web@42 206 <h2>Clever Quotes</h2>
rc-web@42 207 <p>
rc-web@42 208 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
rc-web@42 209 The nice thing about standards is that there are so many to choose from</q> and block:
rc-web@42 210 </p>
rc-web@42 211 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
rc-web@42 212 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
rc-web@42 213 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
rc-web@42 214 </blockquote>
rc-web@42 215 </section>
rc-web@42 216
rc-web@42 217 <section>
rc-web@42 218 <h2>Pretty Code</h2>
rc-web@42 219 <pre><code contenteditable>
rc-web@42 220 function linkify( selector ) {
rc-web@42 221 if( supports3DTransforms ) {
rc-web@42 222
rc-web@42 223 var nodes = document.querySelectorAll( selector );
rc-web@42 224
rc-web@42 225 for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
rc-web@42 226 var node = nodes[i];
rc-web@42 227
rc-web@42 228 if( !node.className ) ) {
rc-web@42 229 node.className += ' roll';
rc-web@42 230 }
rc-web@42 231 };
rc-web@42 232 }
rc-web@42 233 }
rc-web@42 234 </code></pre>
rc-web@42 235 <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
rc-web@42 236 </section>
rc-web@42 237
rc-web@42 238 <section>
rc-web@42 239 <h2>Intergalactic Interconnections</h2>
rc-web@42 240 <p>
rc-web@42 241 You can link between slides internally,
rc-web@42 242 <a href="#/2/3">like this</a>.
rc-web@42 243 </p>
rc-web@42 244 </section>
rc-web@42 245
rc-web@42 246 <section>
rc-web@42 247 <h2>Fragmented Views</h2>
rc-web@42 248 <p>Hit the next arrow...</p>
rc-web@42 249 <p class="fragment">... to step through ...</p>
rc-web@42 250 <ol>
rc-web@42 251 <li class="fragment"><code>any type</code></li>
rc-web@42 252 <li class="fragment"><em>of view</em></li>
rc-web@42 253 <li class="fragment"><strong>fragments</strong></li>
rc-web@42 254 </ol>
rc-web@42 255 </section>
rc-web@42 256
rc-web@42 257 <section>
rc-web@42 258 <h2>Spectacular image!</h2>
rc-web@42 259 <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
rc-web@42 260 <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot">
rc-web@42 261 </a>
rc-web@42 262 </section>
rc-web@42 263
rc-web@42 264 <section>
rc-web@42 265 <h2>Export to PDF</h2>
rc-web@42 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>
rc-web@42 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>
rc-web@42 268 <script>
rc-web@42 269 document.getElementById('slideshare').attributeName = 'allowfullscreen';
rc-web@42 270 </script>
rc-web@42 271 </section>
rc-web@42 272
rc-web@42 273 <section>
rc-web@42 274 <h2>Stellar Links</h2>
rc-web@42 275 <ul>
rc-web@42 276 <li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li>
rc-web@42 277 <li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li>
rc-web@42 278 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
rc-web@42 279 </ul>
rc-web@42 280 </section>
rc-web@42 281
rc-web@42 282 <section>
rc-web@42 283 <h1>THE END</h1>
rc-web@42 284 <h3>BY Hakim El Hattab / hakim.se</h3>
rc-web@42 285 </section>
rc-web@42 286 </div>
rc-web@42 287
rc-web@42 288 <!-- The navigational controls UI -->
rc-web@42 289 <aside class="controls">
rc-web@42 290 <a class="left" href="#">&#x25C4;</a>
rc-web@42 291 <a class="right" href="#">&#x25BA;</a>
rc-web@42 292 <a class="up" href="#">&#x25B2;</a>
rc-web@42 293 <a class="down" href="#">&#x25BC;</a>
rc-web@42 294 </aside>
rc-web@42 295
rc-web@42 296 <!-- Presentation progress bar -->
rc-web@42 297 <div class="progress"><span></span></div>
rc-web@42 298
rc-web@42 299 </div>
rc-web@42 300
rc-web@42 301 <script src="lib/js/head.min.js"></script>
rc-web@42 302 <script src="js/reveal.min.js"></script>
rc-web@42 303
rc-web@42 304 <script>
rc-web@42 305
rc-web@42 306 // Full list of configuration options available here:
rc-web@42 307 // https://github.com/hakimel/reveal.js#configuration
rc-web@42 308 Reveal.initialize({
rc-web@42 309 controls: true,
rc-web@42 310 progress: true,
rc-web@42 311 history: true,
rc-web@42 312
rc-web@42 313 theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
rc-web@42 314 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
rc-web@42 315
rc-web@42 316 // Optional libraries used to extend on reveal.js
rc-web@42 317 dependencies: [
rc-web@42 318 { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
rc-web@42 319 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
rc-web@42 320 { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@42 321 { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
rc-web@42 322 { src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@42 323 { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
rc-web@42 324 ]
rc-web@42 325 });
rc-web@42 326
rc-web@42 327 </script>
rc-web@42 328
rc-web@42 329 </body>
rc-web@42 330 </html>