index.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js - The HTML Presentation Framework</title>
   8
   9                 <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  10                 <meta name="author" content="Hakim El Hattab">
  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/reveal.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                 <!-- If the query includes 'print-pdf', use the PDF print sheet -->
  24                 <script>
  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>Reveal.js</h1>
  44                                         <h3>HTML Presentations Made Easy</h3>
  45                                 </section>
  46
  47                                 <section>
  48                                         <h2>Heads Up</h2>
  49                                         <p>
  50                                                 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
  51                                                 support for CSS 3D transforms to see it in its full glory.
  52                                         </p>
  53                                         <p>
  54                                                 <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
  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>rvl.io</h2>
 103                                         <p>
 104                                                 If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.
 105                                         </p>
 106                                 </section>
 107
 108                                 <section>
 109                                         <h2>Works in Mobile Safari</h2>
 110                                         <p>
 111                                                 Try it out! You can swipe through the slides and pinch your way to the overview.
 112                                         </p>
 113                                 </section>
 114
 115                                 <section>
 116                                         <h2>Marvelous Unordered List</h2>
 117                                         <ul>
 118                                                 <li>No order here</li>
 119                                                 <li>Or here</li>
 120                                                 <li>Or here</li>
 121                                                 <li>Or here</li>
 122                                         </ul>
 123                                 </section>
 124
 125                                 <section>
 126                                         <h2>Fantastic Ordered List</h2>
 127                                         <ol>
 128                                                 <li>One is smaller than...</li>
 129                                                 <li>Two is smaller than...</li>
 130                                                 <li>Three!</li>
 131                                         </ol>
 132                                 </section>
 133
 134                                 <section data-markdown>
 135                                         ## Markdown support
 136
 137                                         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).
 138
 139                                         <pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt;
 140   ## Markdown support
 141
 142   For those of you who like that sort of thing.
 143   Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 144 &lt;/section&gt;
 145                                         </code></pre>
 146                                 </section>
 147
 148                                 <section>
 149                                         <h2>Transition Styles</h2>
 150                                         <p>
 151                                                 You can select from different transitions, like: <br>
 152                                                 <a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a> -
 153                                                 <a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a> -
 154                                                 <a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a> -
 155                                                 <a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a>
 156                                         </p>
 157                                 </section>
 158
 159                                 <section>
 160                                         <h2>Themes</h2>
 161                                         <p>
 162                                                 Reveal.js comes with a few themes built in: <br>
 163                                                 <a href="http://lab.hakim.se/reveal-js/?theme=sky">Sky</a> -
 164                                                 <a href="http://lab.hakim.se/reveal-js/?theme=beige">Beige</a> -
 165                                                 <a href="http://lab.hakim.se/reveal-js/?theme=simple">Simple</a> -
 166                                                 <a href="http://lab.hakim.se/reveal-js/?theme=serif">Serif</a> -
 167                                                 <a href="http://lab.hakim.se/reveal-js/">Default</a>
 168                                         </p>
 169                                         <p>
 170                                                 <small>
 171                                                         * 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>.
 172                                                 </small>
 173                                         </p>
 174                                 </section>
 175
 176                                 <section>
 177                                         <section data-state="alert">
 178                                                 <h2>Global State</h2>
 179                                                 <p>
 180                                                         Set <code>data-state="something"</code> on a slide and <code>"something"</code>
 181                                                         will be added as a class to the document element when the slide is open. This lets you
 182                                                         apply broader style changes, like switching the background.
 183                                                 </p>
 184                                                 <a href="#/7/1" class="image">
 185                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 186                                                 </a>
 187                                         </section>
 188                                         <section data-state="blackout">
 189                                                 <h2>"blackout"</h2>
 190                                                 <a href="#/7/2" class="image">
 191                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 192                                                 </a>
 193                                         </section>
 194                                         <section data-state="soothe">
 195                                                 <h2>"soothe"</h2>
 196                                                 <a href="#/7/0" class="image">
 197                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
 198                                                 </a>
 199                                         </section>
 200                                 </section>
 201
 202                                 <section data-state="customevent">
 203                                         <h2>Custom Events</h2>
 204                                         <p>
 205                                                 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 206                                         </p>
 207                                         <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
 208         console.log( '"customevent" has fired' );
 209 } );
 210                                         </code></pre>
 211                                 </section>
 212
 213                                 <section>
 214                                         <h2>Clever Quotes</h2>
 215                                         <p>
 216                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 217                                                 The nice thing about standards is that there are so many to choose from</q> and block:
 218                                         </p>
 219                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 220                                                 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 221                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
 222                                         </blockquote>
 223                                 </section>
 224
 225                                 <section>
 226                                         <h2>Pretty Code</h2>
 227                                         <pre><code contenteditable>
 228 function linkify( selector ) {
 229   if( supports3DTransforms ) {
 230
 231     var nodes = document.querySelectorAll( selector );
 232
 233     for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
 234       var node = nodes[i];
 235
 236       if( !node.className ) ) {
 237         node.className += ' roll';
 238       }
 239     };
 240   }
 241 }
 242                                         </code></pre>
 243                                         <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 244                                 </section>
 245
 246                                 <section>
 247                                         <h2>Intergalactic Interconnections</h2>
 248                                         <p>
 249                                                 You can link between slides internally,
 250                                                 <a href="#/2/3">like this</a>.
 251                                         </p>
 252                                 </section>
 253
 254                                 <section>
 255                                         <h2>Fragmented Views</h2>
 256                                         <p>Hit the next arrow...</p>
 257                                         <p class="fragment">... to step through ...</p>
 258                                         <ol>
 259                                                 <li class="fragment"><code>any type</code></li>
 260                                                 <li class="fragment"><em>of view</em></li>
 261                                                 <li class="fragment"><strong>fragments</strong></li>
 262                                         </ol>
 263                                 </section>
 264
 265                                 <section>
 266                                         <h2>Spectacular image!</h2>
 267                                         <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
 268                                                 <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot">
 269                                         </a>
 270                                 </section>
 271
 272                                 <section>
 273                                         <h2>Export to PDF</h2>
 274                                         <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>
 275                                         <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>
 276                                         <script>
 277                                                 document.getElementById('slideshare').attributeName = 'allowfullscreen';
 278                                         </script>
 279                                 </section>
 280
 281                                 <section>
 282                                         <h2>Stellar Links</h2>
 283                                         <ul>
 284                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
 285                                                 <li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
 286                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 287                                         </ul>
 288                                 </section>
 289
 290                                 <section>
 291                                         <h2>It's free</h2>
 292                                         <p>
 293                                                 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.
 294                                                 Donations will go towards hosting and domain costs.
 295                                         </p>
 296                                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 297                                                 <input type="hidden" name="cmd" value="_donations">
 298                                                 <input type="hidden" name="business" value="hakim.elhattab@gmail.com">
 299                                                 <input type="hidden" name="lc" value="US">
 300                                                 <input type="hidden" name="item_name" value="reveal.js / rvl.io">
 301                                                 <input type="hidden" name="no_note" value="0">
 302                                                 <input type="hidden" name="currency_code" value="USD">
 303                                                 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 304                                                 <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!">
 305                                         </form>
 306                                 </section>
 307
 308                                 <section>
 309                                         <h1>THE END</h1>
 310                                         <h3>BY Hakim El Hattab / hakim.se</h3>
 311                                 </section>
 312                         </div>
 313
 314                         <!-- The navigational controls UI -->
 315                         <aside class="controls">
 316                                 <a class="left" href="#">&#x25C4;</a>
 317                                 <a class="right" href="#">&#x25BA;</a>
 318                                 <a class="up" href="#">&#x25B2;</a>
 319                                 <a class="down" href="#">&#x25BC;</a>
 320                         </aside>
 321
 322                         <!-- Presentation progress bar -->
 323                         <div class="progress"><span></span></div>
 324
 325                 </div>
 326
 327                 <script src="lib/js/head.min.js"></script>
 328                 <script src="js/reveal.min.js"></script>
 329
 330                 <script>
 331
 332                         // Full list of configuration options available here:
 333                         // https://github.com/hakimel/reveal.js#configuration
 334                         Reveal.initialize({
 335                                 controls: true,
 336                                 progress: true,
 337                                 history: true,
 338
 339                                 theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
 340                                 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
 341
 342                                 // Optional libraries used to extend on reveal.js
 343                                 dependencies: [
 344                                         { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
 345                                         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 346                                         { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 347                                         { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 348                                         { src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
 349                                         { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
 350                                 ]
 351                         });
 352
 353                 </script>
 354
 355         </body>
 356 </html>