2011-06-07 21:10:59 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-07-04 20:18:09 +02:00
< title > reveal.js - HTML5 Presentations< / title >
2011-12-31 07:33:19 +01:00
< meta name = "description" content = "An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations." >
< meta name = "author" content = "Hakim El Hattab" >
2012-05-07 04:05:58 +02:00
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / >
2011-06-07 21:10:59 +02:00
2011-12-05 03:07:33 +01:00
< link href = 'http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel = 'stylesheet' type = 'text/css' >
2011-06-07 21:10:59 +02:00
< link rel = "stylesheet" href = "css/reset.css" >
< link rel = "stylesheet" href = "css/main.css" >
2012-07-10 03:00:51 +02:00
< link rel = "stylesheet" href = "lib/css/zenburn.css" >
2012-08-04 03:49:29 +02:00
2012-08-04 21:45:13 +02:00
< script >
// If the query includes print-pdf we'll use the fancy print CSS
document.write( '< link rel = "stylesheet" href = "css/' + (window.location.search.match( /print-pdf/gi ) ? 'print-pdf.css' : 'print.css') + '" type = "text/css" media = "print" > ' );
< / script >
2012-08-04 03:49:29 +02:00
<!-- [if lt IE 9]>
< script src = "lib/js/html5shiv.js" > < / script >
<![endif]-->
2011-06-07 21:10:59 +02:00
< / head >
< body >
2012-06-03 23:30:37 +02:00
< div class = "reveal" >
2012-04-04 06:59:35 +02:00
<!-- Used to fade in a background when a specific slide state is reached -->
< div class = "state-background" > < / div >
2011-06-07 21:10:59 +02:00
2011-12-27 06:29:00 +01:00
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "slides" >
< section >
< h1 > Reveal.js< / h1 >
2012-08-04 21:45:13 +02:00
< h3 class = "inverted" > HTML Presentations Made Easy< / h3 >
2011-12-27 06:29:00 +01:00
< / section >
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< h2 > Heads Up< / h2 >
2011-06-07 21:10:59 +02:00
< p >
2011-12-27 06:29:00 +01:00
reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with
support for CSS 3D transforms to see it in its full glory.
< / p >
< p >
< i > < small > - < a href = "http://hakim.se" > Hakim El Hattab< / a > / < a href = "http://twitter.com/hakimel" > @hakimel< / a > < / small > < / i >
2011-06-07 21:10:59 +02:00
< / p >
2012-06-08 05:21:14 +02:00
< aside class = "notes" >
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.
< / aside >
2011-06-07 21:10:59 +02:00
< / section >
2011-12-27 06:29:00 +01:00
<!-- Example of nested vertical slides -->
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Vertical Slides< / h2 >
< p >
2012-08-04 20:09:06 +02:00
Slides can be nested inside of other slides,
2011-12-27 06:29:00 +01:00
try pressing < a href = "#/2/1" > down< / a > .
< / p >
< a href = "#/2/1" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2011-12-27 06:29:00 +01:00
< / a >
< / section >
< section >
< h2 > Basement Level 1< / h2 >
< p > Press down or up to navigate.< / p >
< / section >
< section >
< h2 > Basement Level 2< / h2 >
< p > Cornify< / p >
2012-01-03 09:24:09 +01:00
< a class = "test" href = "http://cornify.com" >
2012-08-06 04:52:36 +02:00
< img width = "280" height = "326" src = "https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt = "Unicorn" >
2012-01-03 09:24:09 +01:00
< / a >
2011-12-27 06:29:00 +01:00
< / section >
< section >
< h2 > Basement Level 3< / h2 >
< p > That's it, time to go back up.< / p >
< a href = "#/2" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Up arrow" style = "-webkit-transform: rotate(180deg);" >
2011-12-27 06:29:00 +01:00
< / a >
< / section >
2011-06-07 21:10:59 +02:00
< / section >
2011-12-27 06:29:00 +01:00
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< h2 > Holistic Overview< / h2 >
< p >
2012-04-28 17:50:22 +02:00
Press < strong > ESC< / strong > to enter the slide overview!
2011-12-27 06:29:00 +01:00
< / p >
2011-12-27 06:57:37 +01:00
< / section >
2012-06-02 23:58:09 +02:00
< section >
< h2 > Works in Mobile Safari< / h2 >
< p >
Try it out! You can swipe through the slides pinch your way to the overview.
< / p >
< / section >
2011-06-07 21:10:59 +02:00
< section >
2011-12-27 06:29:00 +01:00
< h2 > Marvelous Unordered List< / h2 >
< ul >
< li > No order here< / li >
< li > Or here< / li >
< li > Or here< / li >
< li > Or here< / li >
< / ul >
2011-06-07 21:10:59 +02:00
< / section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Fantastic Ordered List< / h2 >
< ol >
< li > One is smaller than...< / li >
< li > Two is smaller than...< / li >
< li > Three!< / li >
< / ol >
< / section >
2011-12-05 03:07:33 +01:00
2012-07-31 07:35:16 +02:00
< section data-markdown >
## Markdown support
2012-08-04 20:09:06 +02:00
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).
2012-07-31 07:35:16 +02:00
< pre > < code contenteditable style = "margin-top: 20px;" > < section data-markdown>
## Markdown support
2012-08-01 05:50:41 +02:00
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).
2012-07-31 07:35:16 +02:00
< /section>
< / code > < / pre >
< / section >
< section >
< h2 > Transition Styles< / h2 >
< p >
You can select from different transitions, like:
< / p >
< ul >
< li > < a href = "http://lab.hakim.se/reveal-js/?transition=cube" > Cube< / a > < / li >
< li > < a href = "http://lab.hakim.se/reveal-js/?transition=page" > Page< / a > < / li >
< li > < a href = "http://lab.hakim.se/reveal-js/?transition=concave" > Concave< / a > < / li >
< li > < a href = "http://lab.hakim.se/reveal-js/?transition=linear" > Linear< / a > < / li >
< / ul >
< / section >
2012-04-04 06:59:35 +02:00
< section >
< section data-state = "alert" >
< h2 > Global State< / h2 >
< p >
Set < code > data-state="something"< / code > on a slide and < code > "something"< / code >
will be added as a class to the document element when the slide is open. This let's you
apply broader style changes, like switching the background.
< / p >
< a href = "#/7/1" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2012-04-04 06:59:35 +02:00
< / a >
< / section >
< section data-state = "blackout" >
< h2 > "blackout"< / h2 >
< a href = "#/7/2" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Down arrow" >
2012-04-04 06:59:35 +02:00
< / a >
< / section >
< section data-state = "soothe" >
< h2 > "soothe"< / h2 >
< a href = "#/7/0" class = "image" >
2012-08-06 04:52:36 +02:00
< img width = "178" height = "238" src = "https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt = "Up arrow" style = "-webkit-transform: rotate(180deg);" >
2012-04-04 06:59:35 +02:00
< / a >
< / section >
2012-03-30 06:13:45 +02:00
< / section >
2012-04-30 16:07:23 +02:00
< section data-state = "customevent" >
< h2 > Custom Events< / h2 >
< p >
Additionally custom events can be triggered on a per slide basis by binding to the < code > data-state< / code > name.
< / p >
2012-05-04 06:01:20 +02:00
< pre > < code contenteditable style = "font-size: 18px; margin-top: 20px;" > Reveal.addEventListener( 'customevent', function() {
2012-07-13 05:08:21 +02:00
console.log( '"customevent" has fired' );
2012-05-01 14:52:56 +02:00
} );
< / code > < / pre >
2012-04-30 16:07:23 +02:00
< / section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Clever Quotes< / h2 >
< p >
These guys come in two forms, inline: < q cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
The nice thing about standards is that there are so many to choose from< / q > and block:
< / p >
< blockquote cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
< / blockquote >
< / section >
< section >
< h2 > Pretty Code< / h2 >
< pre > < code contenteditable >
2012-05-01 14:52:56 +02:00
function linkify( selector ) {
2012-07-10 03:48:43 +02:00
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len ; i + + ) {
var node = nodes[i];
if( !node.className ) ) {
node.className += ' roll';
}
};
}
2012-05-01 14:52:56 +02:00
}
2011-12-27 06:29:00 +01:00
< / code > < / pre >
< p > Courtesy of < a href = "http://softwaremaniacs.org/soft/highlight/en/description/" > highlight.js< / a > .< / p >
< / section >
< section >
< h2 > Intergalactic Interconnections< / h2 >
< p >
2012-08-04 21:45:13 +02:00
You can link between slides internally,
2011-12-27 06:29:00 +01:00
< a href = "#/2/3" > like this< / a > .
< / p >
< / section >
2011-12-05 03:07:33 +01:00
2011-12-27 06:29:00 +01:00
< section >
< h2 > Fragmented Views< / h2 >
< p > Hit the next arrow...< / p >
< p class = "fragment" > ... to step through ...< / p >
< ol >
< li class = "fragment" > < code > any type< / code > < / li >
< li class = "fragment" > < em > of view< / em > < / li >
< li class = "fragment" > < strong > fragments< / strong > < / li >
< / ol >
< / section >
< section >
< h2 > Spectacular image!< / h2 >
< a class = "image" href = "http://hakim.se/experiments/html5/breakdom/" target = "_blank" >
2012-08-06 04:52:36 +02:00
< img width = "320" height = "412" src = "https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt = "BreakDOM game screenshot" >
2011-12-27 06:29:00 +01:00
< / a >
< / section >
2012-08-04 22:16:23 +02:00
< section >
< h2 > Export to PDF< / h2 >
2012-08-05 00:19:50 +02:00
< 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 >
2012-08-04 22:16:23 +02:00
< iframe src = "http://www.slideshare.net/slideshow/embed_code/13872948" width = "455" height = "356" frameborder = "0" marginwidth = "0" marginheight = "0" scrolling = "no" style = "border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen > < / iframe >
< / section >
2011-12-27 06:29:00 +01:00
< section >
< h2 > Stellar Links< / h2 >
< ul >
< li > < a href = "https://github.com/hakimel/reveal.js" > Source code on github< / a > < / li >
< li > < a href = "http://hakim.se/projects/reveal-js" > Read more on my site< / a > < / li >
< li > < a href = "http://twitter.com/hakimel" > Follow me on Twitter< / a > < / li >
< / ul >
< / section >
< section >
< h1 > THE END< / h1 >
< h3 class = "inverted" > BY Hakim El Hattab / hakim.se< / h3 >
< / section >
< / div >
<!-- The navigational controls UI -->
< aside class = "controls" >
< a class = "left" href = "#" > ◄ < / a >
< a class = "right" href = "#" > ► < / a >
< a class = "up" href = "#" > ▲ < / a >
< a class = "down" href = "#" > ▼ < / a >
< / aside >
2012-07-21 04:41:08 +02:00
<!-- Presentation progress bar -->
2011-12-27 06:29:00 +01:00
< div class = "progress" > < span > < / span > < / div >
2011-06-07 21:10:59 +02:00
< / div >
2012-03-24 17:48:16 +01:00
2012-07-10 03:00:51 +02:00
< script src = "lib/js/head.min.js" > < / script >
2012-07-10 02:51:04 +02:00
2011-12-05 03:07:33 +01:00
< script >
2012-08-04 04:41:31 +02:00
head.ready( function() {
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme || 'default', // default/neon/beige
transition: Reveal.getQueryHash().transition || 'default' // default/cube/page/concave/linear(2d)
});
// Load highlight.js for syntax highlighting of code samples
head.js( 'lib/js/highlight.js', function() {
hljs.initHighlightingOnLoad();
} );
} );
2012-07-31 07:35:16 +02:00
// Scripts that should be loaded before initializing
2012-07-31 07:13:33 +02:00
var scripts = [];
// If the browser doesn't support classList, load a polyfill
if( !document.body.classList ) {
2012-08-04 04:41:31 +02:00
head.js( 'lib/js/classList.js' );
2012-07-31 07:13:33 +02:00
}
// Load markdown parser if there are slides defined using markdown
if( document.querySelector( '[data-markdown]' ) ) {
scripts.push( 'lib/js/showdown.js' );
scripts.push( 'lib/js/data-markdown.js' );
}
2012-08-04 06:33:27 +02:00
scripts.push( 'js/reveal.js' );
2012-07-31 07:35:16 +02:00
// If we're runnning the notes server we need to include some additional JS
// TODO Is there a better way to determine if we're running the notes server?
if( window.location.host === 'localhost:1947' ) {
scripts.push( 'socket.io/socket.io.js' );
scripts.push( 'plugin/speakernotes/client.js' );
}
2012-07-31 07:13:33 +02:00
2012-07-31 07:35:16 +02:00
// Load the scripts and, when completed, initialize reveal.js
2012-08-04 04:41:31 +02:00
head.js.apply( null, scripts );
2012-07-10 02:51:04 +02:00
2012-08-04 21:53:52 +02:00
< / script >
2012-08-01 05:47:09 +02:00
2011-06-07 21:10:59 +02:00
< / body >
2012-08-04 06:33:27 +02:00
< / html >
