diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 95 |
1 files changed, 52 insertions, 43 deletions
@@ -1,9 +1,9 @@ -<!doctype html> +<!doctype html> <html lang="en"> - + <head> <meta charset="utf-8"> - + <title>reveal.js - The HTML Presentation Framework</title> <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> @@ -11,9 +11,7 @@ <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> - - <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'> - + <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> @@ -29,9 +27,9 @@ <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> - + <body> - + <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> @@ -41,11 +39,11 @@ <h1>Reveal.js</h1> <h3>HTML Presentations Made Easy</h3> </section> - + <section> <h2>Heads Up</h2> <p> - reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with + reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory. </p> <p> @@ -53,10 +51,10 @@ </p> <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. + Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). </aside> </section> - + <!-- Example of nested vertical slides --> <section> <section> @@ -119,7 +117,7 @@ <li>Or here</li> </ul> </section> - + <section> <h2>Fantastic Ordered List</h2> <ol> @@ -132,13 +130,13 @@ <section data-markdown> <script type="text/template"> ## Markdown support - + 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). <section data-markdown> ## Markdown support - For those of you who like that sort of thing. + 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). </section> </script> @@ -151,9 +149,9 @@ <a href="?transition=cube#/transitions">Cube</a> - <a href="?transition=page#/transitions">Page</a> - <a href="?transition=concave#/transitions">Concave</a> - - <a href="?transition=zoom#/transitions">Zoom</a> - - <a href="?transition=linear#/transitions">Linear</a> - - <a href="?transition=none#/transitions">None</a> - + <a href="?transition=zoom#/transitions">Zoom</a> - + <a href="?transition=linear#/transitions">Linear</a> - + <a href="?transition=none#/transitions">None</a> - <a href="?#/transitions">Default</a> </p> </section> @@ -219,17 +217,17 @@ 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 + 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> function linkify( selector ) { if( supports3DTransforms ) { - + var nodes = document.querySelectorAll( selector ); for( var i = 0, len = nodes.length; i < len; i++ ) { @@ -244,7 +242,7 @@ function linkify( selector ) { </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> @@ -254,23 +252,36 @@ function linkify( selector ) { </section> <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> + <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>Fragment Styles</h2> + <p>There's a few styles of fragments, like:</p> + <p class="fragment grow">grow</p> + <p class="fragment shrink">shrink</p> + <p class="fragment roll-in">roll-in</p> + <p class="fragment fade-out">fade-out</p> + <p class="fragment highlight-red">highlight-red</p> + <p class="fragment highlight-green">highlight-green</p> + <p class="fragment highlight-blue">highlight-blue</p> + </section> </section> - + <section> <h2>Spectacular image!</h2> <a class="image" href="http://lab.hakim.se/meny/" target="_blank"> <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> </a> </section> - + <section> <h2>Export to PDF</h2> <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> @@ -279,11 +290,11 @@ function linkify( selector ) { document.getElementById('slideshare').attributeName = 'allowfullscreen'; </script> </section> - + <section> <h2>Take a Moment</h2> <p> - Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen + Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen during a presentation. </p> </section> @@ -300,7 +311,7 @@ function linkify( selector ) { <section> <h2>It's free</h2> <p> - reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below. + reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs. </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> @@ -314,28 +325,28 @@ function linkify( selector ) { <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> </form> </section> - + <section> <h1>THE END</h1> <h3>BY Hakim El Hattab / hakim.se</h3> </section> </div> - + </div> <script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script> <script> - + // 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, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none @@ -345,12 +356,10 @@ function linkify( selector ) { { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } }, - { src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }, - { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } } + { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, + { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); - </script> </body> |