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                         <!-- Any section element inside of this container is displayed as a slide -->
  38                         <div class="slides">
  39
  40                                 <section>
  41                                         <h1>Reveal.js</h1>
  42                                         <h3>HTML Presentations Made Easy</h3>
  43                                 </section>
  44
  45                                 <section>
  46                                         <h2>Heads Up</h2>
  47                                         <p>
  48                                                 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
  49                                                 support for CSS 3D transforms to see it in its full glory.
  50                                         </p>
  51                                         <p>
  52                                                 <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
  53                                         </p>
  54
  55                                         <aside class="notes">
  56                                                 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.
  57                                         </aside>
  58                                 </section>
  59
  60                                 <!-- Example of nested vertical slides -->
  61                                 <section>
  62                                         <section>
  63                                                 <h2>Vertical Slides</h2>
  64                                                 <p>
  65                                                         Slides can be nested inside of other slides,
  66                                                         try pressing <a href="#/2/1">down</a>.
  67                                                 </p>
  68                                                 <a href="#/2/1" class="image">
  69                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
  70                                                 </a>
  71                                         </section>
  72                                         <section>
  73                                                 <h2>Basement Level 1</h2>
  74                                                 <p>Press down or up to navigate.</p>
  75                                         </section>
  76                                         <section>
  77                                                 <h2>Basement Level 2</h2>
  78                                                 <p>Cornify</p>
  79                                                 <a class="test" href="http://cornify.com">
  80                                                         <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
  81                                                 </a>
  82                                         </section>
  83                                         <section>
  84                                                 <h2>Basement Level 3</h2>
  85                                                 <p>That's it, time to go back up.</p>
  86                                                 <a href="#/2" class="image">
  87                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
  88                                                 </a>
  89                                         </section>
  90                                 </section>
  91
  92                                 <section>
  93                                         <h2>Point of View</h2>
  94                                         <p>
  95                                                 Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
  96                                         </p>
  97                                 </section>
  98
  99                                 <section>
 100                                         <h2>rvl.io</h2>
 101                                         <p>
 102                                                 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>.
 103                                         </p>
 104                                 </section>
 105
 106                                 <section>
 107                                         <h2>Works in Mobile Safari</h2>
 108                                         <p>
 109                                                 Try it out! You can swipe through the slides and pinch your way to the overview.
 110                                         </p>
 111                                 </section>
 112
 113                                 <section>
 114                                         <h2>Marvelous Unordered List</h2>
 115                                         <ul>
 116                                                 <li>No order here</li>
 117                                                 <li>Or here</li>
 118                                                 <li>Or here</li>
 119                                                 <li>Or here</li>
 120                                         </ul>
 121                                 </section>
 122
 123                                 <section>
 124                                         <h2>Fantastic Ordered List</h2>
 125                                         <ol>
 126                                                 <li>One is smaller than...</li>
 127                                                 <li>Two is smaller than...</li>
 128                                                 <li>Three!</li>
 129                                         </ol>
 130                                 </section>
 131
 132                                 <section data-markdown>
 133                                         <script type="text/template">
 134                                                 ## Markdown support
 135
 136                                                 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).
 137
 138                                                         <section data-markdown>
 139                                                           ## Markdown support
 140
 141                                                           For those of you who like that sort of thing.
 142                                                           Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 143                                                         </section>
 144                                         </script>
 145                                 </section>
 146
 147                                 <section id="transitions">
 148                                         <h2>Transition Styles</h2>
 149                                         <p>
 150                                                 You can select from different transitions, like: <br>
 151                                                 <a href="?transition=cube#/transitions">Cube</a> -
 152                                                 <a href="?transition=page#/transitions">Page</a> -
 153                                                 <a href="?transition=concave#/transitions">Concave</a> -
 154                                                 <a href="?transition=zoom#/transitions">Zoom</a> -
 155                                                 <a href="?transition=linear#/transitions">Linear</a> -
 156                                                 <a href="?transition=none#/transitions">None</a> -
 157                                                 <a href="?#/transitions">Default</a>
 158                                         </p>
 159                                 </section>
 160
 161                                 <section id="themes">
 162                                         <h2>Themes</h2>
 163                                         <p>
 164                                                 Reveal.js comes with a few themes built in: <br>
 165                                                 <a href="?theme=sky#/themes">Sky</a> -
 166                                                 <a href="?theme=beige#/themes">Beige</a> -
 167                                                 <a href="?theme=simple#/themes">Simple</a> -
 168                                                 <a href="?theme=serif#/themes">Serif</a> -
 169                                                 <a href="?#/themes">Default</a>
 170                                         </p>
 171                                         <p>
 172                                                 <small>
 173                                                         * 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>.
 174                                                 </small>
 175                                         </p>
 176                                 </section>
 177
 178                                 <section>
 179                                         <section data-state="alert">
 180                                                 <h2>Global State</h2>
 181                                                 <p>
 182                                                         Set <code>data-state="something"</code> on a slide and <code>"something"</code>
 183                                                         will be added as a class to the document element when the slide is open. This lets you
 184                                                         apply broader style changes, like switching the background.
 185                                                 </p>
 186                                                 <a href="#/7/1" class="image">
 187                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 188                                                 </a>
 189                                         </section>
 190                                         <section data-state="blackout">
 191                                                 <h2>"blackout"</h2>
 192                                                 <a href="#/7/2" class="image">
 193                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 194                                                 </a>
 195                                         </section>
 196                                         <section data-state="soothe">
 197                                                 <h2>"soothe"</h2>
 198                                                 <a href="#/7/0" class="image">
 199                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
 200                                                 </a>
 201                                         </section>
 202                                 </section>
 203
 204                                 <section data-state="customevent">
 205                                         <h2>Custom Events</h2>
 206                                         <p>
 207                                                 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 208                                         </p>
 209                                         <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
 210         console.log( '"customevent" has fired' );
 211 } );
 212                                         </code></pre>
 213                                 </section>
 214
 215                                 <section>
 216                                         <h2>Clever Quotes</h2>
 217                                         <p>
 218                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 219                                                 The nice thing about standards is that there are so many to choose from</q> and block:
 220                                         </p>
 221                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 222                                                 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 223                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
 224                                         </blockquote>
 225                                 </section>
 226
 227                                 <section>
 228                                         <h2>Pretty Code</h2>
 229                                         <pre><code contenteditable>
 230 function linkify( selector ) {
 231   if( supports3DTransforms ) {
 232
 233     var nodes = document.querySelectorAll( selector );
 234
 235     for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
 236       var node = nodes[i];
 237
 238       if( !node.className ) ) {
 239         node.className += ' roll';
 240       }
 241     };
 242   }
 243 }
 244                                         </code></pre>
 245                                         <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 246                                 </section>
 247
 248                                 <section>
 249                                         <h2>Intergalactic Interconnections</h2>
 250                                         <p>
 251                                                 You can link between slides internally,
 252                                                 <a href="#/2/3">like this</a>.
 253                                         </p>
 254                                 </section>
 255
 256                                 <section>
 257                                         <h2>Fragmented Views</h2>
 258                                         <p>Hit the next arrow...</p>
 259                                         <p class="fragment">... to step through ...</p>
 260                                         <ol>
 261                                                 <li class="fragment"><code>any type</code></li>
 262                                                 <li class="fragment"><em>of view</em></li>
 263                                                 <li class="fragment"><strong>fragments</strong></li>
 264                                         </ol>
 265                                 </section>
 266
 267                                 <section>
 268                                         <h2>Spectacular image!</h2>
 269                                         <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
 270                                                 <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
 271                                         </a>
 272                                 </section>
 273
 274                                 <section>
 275                                         <h2>Export to PDF</h2>
 276                                         <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>
 277                                         <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>
 278                                         <script>
 279                                                 document.getElementById('slideshare').attributeName = 'allowfullscreen';
 280                                         </script>
 281                                 </section>
 282
 283                                 <section>
 284                                         <h2>Take a Moment</h2>
 285                                         <p>
 286                                                 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
 287                                                 during a presentation.
 288                                         </p>
 289                                 </section>
 290
 291                                 <section>
 292                                         <h2>Stellar Links</h2>
 293                                         <ul>
 294                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
 295                                                 <li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
 296                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 297                                         </ul>
 298                                 </section>
 299
 300                                 <section>
 301                                         <h2>It's free</h2>
 302                                         <p>
 303                                                 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.
 304                                                 Donations will go towards hosting and domain costs.
 305                                         </p>
 306                                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 307                                                 <input type="hidden" name="cmd" value="_donations">
 308                                                 <input type="hidden" name="business" value="hakim.elhattab@gmail.com">
 309                                                 <input type="hidden" name="lc" value="US">
 310                                                 <input type="hidden" name="item_name" value="reveal.js / rvl.io">
 311                                                 <input type="hidden" name="no_note" value="0">
 312                                                 <input type="hidden" name="currency_code" value="USD">
 313                                                 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 314                                                 <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!">
 315                                         </form>
 316                                 </section>
 317
 318                                 <section>
 319                                         <h1>THE END</h1>
 320                                         <h3>BY Hakim El Hattab / hakim.se</h3>
 321                                 </section>
 322
 323                         </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, // available themes are in /css/theme
 340                                 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
 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: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } },
 349                                         { src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
 350                                         { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
 351                                 ]
 352                         });
 353
 354                 </script>
 355
 356         </body>
 357 </html>