ICMC 2012
rc-web@42:REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT
rc-web@42:rc-web@42: rc-web@42: - http://rob.kiben.net rob@kiben.net - rc-web@42:
rc-web@42:NODESCORE
rc-web@42:rc-web@42: NodeScore is a web based framework to facilitate networked telematic ensemble performance. rc-web@42:
rc-web@42: rc-web@42: rc-web@42:Vertical Slides
rc-web@42:rc-web@42: Slides can be nested inside of other slides, rc-web@42: try pressing down. rc-web@42:
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: Basement Level 1
rc-web@42:Press down or up to navigate.
rc-web@42:Basement Level 2
rc-web@42:Cornify
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: Basement Level 3
rc-web@42:That's it, time to go back up.
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: Holistic Overview
rc-web@42:rc-web@42: Press ESC to enter the slide overview! rc-web@42:
rc-web@42:Works in Mobile Safari
rc-web@42:rc-web@42: Try it out! You can swipe through the slides pinch your way to the overview. rc-web@42:
rc-web@42:Marvelous Unordered List
rc-web@42:-
rc-web@42:
- No order here rc-web@42:
- Or here rc-web@42:
- Or here rc-web@42:
- Or here rc-web@42:
Fantastic Ordered List
rc-web@42:-
rc-web@42:
- One is smaller than... rc-web@42:
- Two is smaller than... rc-web@42:
- Three! rc-web@42:
<section data-markdown>
rc-web@42: ## Markdown support
rc-web@42:
rc-web@42: For those of you who like that sort of thing.
rc-web@42: Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
rc-web@42: </section>
rc-web@42: Transition Styles
rc-web@42:
rc-web@42: You can select from different transitions, like:
rc-web@42: Cube -
rc-web@42: Page -
rc-web@42: Concave -
rc-web@42: Linear
rc-web@42:
Themes
rc-web@42:
rc-web@42: Reveal.js comes with a few themes built in:
rc-web@42: Sky -
rc-web@42: Beige -
rc-web@42: Simple -
rc-web@42: Default
rc-web@42:
rc-web@42:
rc-web@42: * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
rc-web@42:
rc-web@42:
Global State
rc-web@42:
rc-web@42: Set data-state="something" on a slide and "something"
rc-web@42: will be added as a class to the document element when the slide is open. This lets you
rc-web@42: apply broader style changes, like switching the background.
rc-web@42:
rc-web@42:
rc-web@42: "blackout"
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: "soothe"
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: Custom Events
rc-web@42:
rc-web@42: Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
rc-web@42:
Reveal.addEventListener( 'customevent', function() {
rc-web@42: console.log( '"customevent" has fired' );
rc-web@42: } );
rc-web@42: Clever Quotes
rc-web@42:
rc-web@42: These guys come in two forms, inline:
rc-web@42: The nice thing about standards is that there are so many to choose from
and block:
rc-web@42:
rc-web@42: For years there has been a theory that millions of monkeys typing at random on millions of typewriters would rc-web@42: reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. rc-web@42:rc-web@42:
Pretty Code
rc-web@42:
rc-web@42: function linkify( selector ) {
rc-web@42: if( supports3DTransforms ) {
rc-web@42:
rc-web@42: var nodes = document.querySelectorAll( selector );
rc-web@42:
rc-web@42: for( var i = 0, len = nodes.length; i < len; i++ ) {
rc-web@42: var node = nodes[i];
rc-web@42:
rc-web@42: if( !node.className ) ) {
rc-web@42: node.className += ' roll';
rc-web@42: }
rc-web@42: };
rc-web@42: }
rc-web@42: }
rc-web@42: Courtesy of highlight.js.
rc-web@42:Intergalactic Interconnections
rc-web@42:rc-web@42: You can link between slides internally, rc-web@42: like this. rc-web@42:
rc-web@42:Fragmented Views
rc-web@42:Hit the next arrow...
rc-web@42:... to step through ...
rc-web@42:-
rc-web@42:
any type
rc-web@42: - of view rc-web@42:
- fragments rc-web@42:
Spectacular image!
rc-web@42: rc-web@42:
rc-web@42:
rc-web@42: Export to PDF
rc-web@42:Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.
rc-web@42: rc-web@42: rc-web@42:Stellar Links
rc-web@42:-
rc-web@42:
- Source code on github rc-web@42:
- Read more on my site rc-web@42:
- Follow me on Twitter rc-web@42: