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 rel="stylesheet" href="css/reveal.css">
  16                 <link rel="stylesheet" href="css/theme/default.css" id="theme">
  17
  18                 <!-- For syntax highlighting -->
  19                 <link rel="stylesheet" href="lib/css/zenburn.css">
  20
  21                 <!-- If the query includes 'print-pdf', use the PDF print sheet -->
  22                 <script>
  23                         document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
  24                 </script>
  25
  26                 <!--[if lt IE 9]>
  27                 <script src="lib/js/html5shiv.js"></script>
  28                 <![endif]-->
  29         </head>
  30
  31         <body>
  32
  33                 <div class="reveal">
  34
  35                         <!-- Any section element inside of this container is displayed as a slide -->
  36                         <div class="slides">
  37
  38                                 <section>
  39                                         <h1>Reveal.js</h1>
  40                                         <h3>HTML Presentations Made Easy</h3>
  41                                 </section>
  42
  43                                 <section>
  44                                         <h2>Heads Up</h2>
  45                                         <p>
  46                                                 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
  47                                                 support for CSS 3D transforms to see it in its full glory.
  48                                         </p>
  49                                         <p>
  50                                                 <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
  51                                         </p>
  52
  53                                         <aside class="notes">
  54                                                 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).
  55                                         </aside>
  56                                 </section>
  57
  58                                 <!-- Example of nested vertical slides -->
  59                                 <section>
  60                                         <section>
  61                                                 <h2>Vertical Slides</h2>
  62                                                 <p>
  63                                                         Slides can be nested inside of other slides,
  64                                                         try pressing <a href="#/2/1">down</a>.
  65                                                 </p>
  66                                                 <a href="#/2/1" class="image">
  67                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
  68                                                 </a>
  69                                         </section>
  70                                         <section>
  71                                                 <h2>Basement Level 1</h2>
  72                                                 <p>Press down or up to navigate.</p>
  73                                         </section>
  74                                         <section>
  75                                                 <h2>Basement Level 2</h2>
  76                                                 <p>Cornify</p>
  77                                                 <a class="test" href="http://cornify.com">
  78                                                         <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
  79                                                 </a>
  80                                         </section>
  81                                         <section>
  82                                                 <h2>Basement Level 3</h2>
  83                                                 <p>That's it, time to go back up.</p>
  84                                                 <a href="#/2" class="image">
  85                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
  86                                                 </a>
  87                                         </section>
  88                                 </section>
  89
  90                                 <section>
  91                                         <h2>Point of View</h2>
  92                                         <p>
  93                                                 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.
  94                                         </p>
  95                                 </section>
  96
  97                                 <section>
  98                                         <h2>rvl.io</h2>
  99                                         <p>
 100                                                 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>.
 101                                         </p>
 102                                 </section>
 103
 104                                 <section>
 105                                         <h2>Works in Mobile Safari</h2>
 106                                         <p>
 107                                                 Try it out! You can swipe through the slides and pinch your way to the overview.
 108                                         </p>
 109                                 </section>
 110
 111                                 <section>
 112                                         <h2>Marvelous Unordered List</h2>
 113                                         <ul>
 114                                                 <li>No order here</li>
 115                                                 <li>Or here</li>
 116                                                 <li>Or here</li>
 117                                                 <li>Or here</li>
 118                                         </ul>
 119                                 </section>
 120
 121                                 <section>
 122                                         <h2>Fantastic Ordered List</h2>
 123                                         <ol>
 124                                                 <li>One is smaller than...</li>
 125                                                 <li>Two is smaller than...</li>
 126                                                 <li>Three!</li>
 127                                         </ol>
 128                                 </section>
 129
 130                                 <section data-markdown>
 131                                         <script type="text/template">
 132                                                 ## Markdown support
 133
 134                                                 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).
 135
 136                                                         <section data-markdown>
 137                                                           ## Markdown support
 138
 139                                                           For those of you who like that sort of thing.
 140                                                           Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 141                                                         </section>
 142                                         </script>
 143                                 </section>
 144
 145                                 <section id="transitions">
 146                                         <h2>Transition Styles</h2>
 147                                         <p>
 148                                                 You can select from different transitions, like: <br>
 149                                                 <a href="?transition=cube#/transitions">Cube</a> -
 150                                                 <a href="?transition=page#/transitions">Page</a> -
 151                                                 <a href="?transition=concave#/transitions">Concave</a> -
 152                                                 <a href="?transition=zoom#/transitions">Zoom</a> -
 153                                                 <a href="?transition=linear#/transitions">Linear</a> -
 154                                                 <a href="?transition=none#/transitions">None</a> -
 155                                                 <a href="?#/transitions">Default</a>
 156                                         </p>
 157                                 </section>
 158
 159                                 <section id="themes">
 160                                         <h2>Themes</h2>
 161                                         <p>
 162                                                 Reveal.js comes with a few themes built in: <br>
 163                                                 <a href="?theme=sky#/themes">Sky</a> -
 164                                                 <a href="?theme=beige#/themes">Beige</a> -
 165                                                 <a href="?theme=simple#/themes">Simple</a> -
 166                                                 <a href="?theme=serif#/themes">Serif</a> -
 167                                                 <a href="?#/themes">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                                         <section>
 256                                                 <h2>Fragmented Views</h2>
 257                                                 <p>Hit the next arrow...</p>
 258                                                 <p class="fragment">... to step through ...</p>
 259                                                 <ol>
 260                                                         <li class="fragment"><code>any type</code></li>
 261                                                         <li class="fragment"><em>of view</em></li>
 262                                                         <li class="fragment"><strong>fragments</strong></li>
 263                                                 </ol>
 264
 265                                                 <aside class="notes">
 266                                                         This slide has fragments which are also stepped through in the notes window.
 267                                                 </aside>
 268                                         </section>
 269                                         <section>
 270                                                 <h2>Fragment Styles</h2>
 271                                                 <p>There's a few styles of fragments, like:</p>
 272                                                 <p class="fragment grow">grow</p>
 273                                                 <p class="fragment shrink">shrink</p>
 274                                                 <p class="fragment roll-in">roll-in</p>
 275                                                 <p class="fragment fade-out">fade-out</p>
 276                                                 <p class="fragment highlight-red">highlight-red</p>
 277                                                 <p class="fragment highlight-green">highlight-green</p>
 278                                                 <p class="fragment highlight-blue">highlight-blue</p>
 279                                         </section>
 280                                 </section>
 281
 282                                 <section>
 283                                         <h2>Spectacular image!</h2>
 284                                         <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
 285                                                 <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
 286                                         </a>
 287                                 </section>
 288
 289                                 <section>
 290                                         <h2>Export to PDF</h2>
 291                                         <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>
 292                                         <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>
 293                                         <script>
 294                                                 document.getElementById('slideshare').attributeName = 'allowfullscreen';
 295                                         </script>
 296                                 </section>
 297
 298                                 <section>
 299                                         <h2>Take a Moment</h2>
 300                                         <p>
 301                                                 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
 302                                                 during a presentation.
 303                                         </p>
 304                                 </section>
 305
 306                                 <section>
 307                                         <h2>Stellar Links</h2>
 308                                         <ul>
 309                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
 310                                                 <li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
 311                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 312                                         </ul>
 313                                 </section>
 314
 315                                 <section>
 316                                         <h2>It's free</h2>
 317                                         <p>
 318                                                 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.
 319                                                 Donations will go towards hosting and domain costs.
 320                                         </p>
 321                                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 322                                                 <input type="hidden" name="cmd" value="_donations">
 323                                                 <input type="hidden" name="business" value="hakim.elhattab@gmail.com">
 324                                                 <input type="hidden" name="lc" value="US">
 325                                                 <input type="hidden" name="item_name" value="reveal.js / rvl.io">
 326                                                 <input type="hidden" name="no_note" value="0">
 327                                                 <input type="hidden" name="currency_code" value="USD">
 328                                                 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 329                                                 <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!">
 330                                         </form>
 331                                 </section>
 332
 333                                 <section>
 334                                         <h1>THE END</h1>
 335                                         <h3>BY Hakim El Hattab / hakim.se</h3>
 336                                 </section>
 337
 338                         </div>
 339
 340                 </div>
 341
 342                 <script src="lib/js/head.min.js"></script>
 343                 <script src="js/reveal.min.js"></script>
 344
 345                 <script>
 346
 347                         // Full list of configuration options available here:
 348                         // https://github.com/hakimel/reveal.js#configuration
 349                         Reveal.initialize({
 350                                 controls: true,
 351                                 progress: true,
 352                                 history: true,
 353
 354                                 theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
 355                                 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
 356
 357                                 // Optional libraries used to extend on reveal.js
 358                                 dependencies: [
 359                                         { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
 360                                         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 361                                         { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 362                                         { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 363                                         { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 364                                         { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
 365                                 ]
 366                         });
 367                 </script>
 368
 369         </body>
 370 </html>