Mercurial > hg > nodescore

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