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                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  16
  17                 <link rel="stylesheet" href="css/reveal.min.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                                         <p>
  44                                                 <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
  45                                         </p>
  46                                 </section>
  47
  48                                 <section>
  49                                         <h2>Heads Up</h2>
  50                                         <p>
  51                                                 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
  52                                                 support for CSS 3D transforms to see it in its full glory.
  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 open the speaker notes window (hit 's' on your keyboard).
  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="#" class="navigate-down">down</a>.
  67                                                 </p>
  68                                                 <a href="#" class="image navigate-down">
  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>Slides</h2>
  94                                         <p>
  95                                                 Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slid.es" target="_blank">http://slid.es</a>.
  96                                         </p>
  97                                 </section>
  98
  99                                 <section>
 100                                         <h2>Point of View</h2>
 101                                         <p>
 102                                                 Press <strong>ESC</strong> to enter the slide overview.
 103                                         </p>
 104                                         <p>
 105                                                 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.
 106                                         </p>
 107                                 </section>
 108
 109                                 <section>
 110                                         <h2>Works in Mobile Safari</h2>
 111                                         <p>
 112                                                 Try it out! You can swipe through the slides and pinch your way to the overview.
 113                                         </p>
 114                                 </section>
 115
 116                                 <section>
 117                                         <h2>Marvelous Unordered List</h2>
 118                                         <ul>
 119                                                 <li>No order here</li>
 120                                                 <li>Or here</li>
 121                                                 <li>Or here</li>
 122                                                 <li>Or here</li>
 123                                         </ul>
 124                                 </section>
 125
 126                                 <section>
 127                                         <h2>Fantastic Ordered List</h2>
 128                                         <ol>
 129                                                 <li>One is smaller than...</li>
 130                                                 <li>Two is smaller than...</li>
 131                                                 <li>Three!</li>
 132                                         </ol>
 133                                 </section>
 134
 135                                 <section data-markdown>
 136                                         <script type="text/template">
 137                                                 ## Markdown support
 138
 139                                                 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).
 140
 141                                                 ```
 142                                                 <section data-markdown>
 143                                                   ## Markdown support
 144
 145                                                   For those of you who like that sort of thing.
 146                                                   Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 147                                                 </section>
 148                                                 ```
 149                                         </script>
 150                                 </section>
 151
 152                                 <section id="transitions">
 153                                         <h2>Transition Styles</h2>
 154                                         <p>
 155                                                 You can select from different transitions, like: <br>
 156                                                 <a href="?transition=cube#/transitions">Cube</a> -
 157                                                 <a href="?transition=page#/transitions">Page</a> -
 158                                                 <a href="?transition=concave#/transitions">Concave</a> -
 159                                                 <a href="?transition=zoom#/transitions">Zoom</a> -
 160                                                 <a href="?transition=linear#/transitions">Linear</a> -
 161                                                 <a href="?transition=fade#/transitions">Fade</a> -
 162                                                 <a href="?transition=none#/transitions">None</a> -
 163                                                 <a href="?#/transitions">Default</a>
 164                                         </p>
 165                                 </section>
 166
 167                                 <section id="themes">
 168                                         <h2>Themes</h2>
 169                                         <p>
 170                                                 Reveal.js comes with a few themes built in: <br>
 171                                                 <a href="?theme=sky#/themes">Sky</a> -
 172                                                 <a href="?theme=beige#/themes">Beige</a> -
 173                                                 <a href="?theme=simple#/themes">Simple</a> -
 174                                                 <a href="?theme=serif#/themes">Serif</a> -
 175                                                 <a href="?theme=night#/themes">Night</a> -
 176                                                 <a href="?#/themes">Default</a>
 177                                         </p>
 178                                         <p>
 179                                                 <small>
 180                                                         * 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>.
 181                                                 </small>
 182                                         </p>
 183                                 </section>
 184
 185                                 <section>
 186                                         <section data-state="alert">
 187                                                 <h2>Global State</h2>
 188                                                 <p>
 189                                                         Set <code>data-state="something"</code> on a slide and <code>"something"</code>
 190                                                         will be added as a class to the document element when the slide is open. This lets you
 191                                                         apply broader style changes, like switching the background.
 192                                                 </p>
 193                                                 <a href="#" class="image navigate-down">
 194                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 195                                                 </a>
 196                                         </section>
 197                                         <section data-state="blackout">
 198                                                 <h2>"blackout"</h2>
 199                                                 <a href="#" class="image navigate-down">
 200                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 201                                                 </a>
 202                                         </section>
 203                                         <section data-state="soothe">
 204                                                 <h2>"soothe"</h2>
 205                                                 <a href="#" class="image navigate-next">
 206                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
 207                                                 </a>
 208                                         </section>
 209                                 </section>
 210
 211                                 <section data-state="customevent">
 212                                         <h2>Custom Events</h2>
 213                                         <p>
 214                                                 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 215                                         </p>
 216                                         <pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
 217 Reveal.addEventListener( 'customevent', function() {
 218         console.log( '"customevent" has fired' );
 219 } );
 220                                         </code></pre>
 221                                 </section>
 222
 223                                 <section>
 224                                         <h2>Clever Quotes</h2>
 225                                         <p>
 226                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 227                                                 &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
 228                                         </p>
 229                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 230                                                 &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 231                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
 232                                         </blockquote>
 233                                 </section>
 234
 235                                 <section>
 236                                         <h2>Pretty Code</h2>
 237                                         <pre><code data-trim contenteditable>
 238 function linkify( selector ) {
 239   if( supports3DTransforms ) {
 240
 241     var nodes = document.querySelectorAll( selector );
 242
 243     for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
 244       var node = nodes[i];
 245
 246       if( !node.className ) ) {
 247         node.className += ' roll';
 248       }
 249     };
 250   }
 251 }
 252                                         </code></pre>
 253                                         <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 254                                 </section>
 255
 256                                 <section>
 257                                         <h2>Intergalactic Interconnections</h2>
 258                                         <p>
 259                                                 You can link between slides internally,
 260                                                 <a href="#/2/3">like this</a>.
 261                                         </p>
 262                                 </section>
 263
 264                                 <section>
 265                                         <section>
 266                                                 <h2>Fragmented Views</h2>
 267                                                 <p>Hit the next arrow...</p>
 268                                                 <p class="fragment">... to step through ...</p>
 269                                                 <ol>
 270                                                         <li class="fragment"><code>any type</code></li>
 271                                                         <li class="fragment"><em>of view</em></li>
 272                                                         <li class="fragment"><strong>fragments</strong></li>
 273                                                 </ol>
 274
 275                                                 <aside class="notes">
 276                                                         This slide has fragments which are also stepped through in the notes window.
 277                                                 </aside>
 278                                         </section>
 279                                         <section>
 280                                                 <h2>Fragment Styles</h2>
 281                                                 <p>There's a few styles of fragments, like:</p>
 282                                                 <p class="fragment grow">grow</p>
 283                                                 <p class="fragment shrink">shrink</p>
 284                                                 <p class="fragment roll-in">roll-in</p>
 285                                                 <p class="fragment fade-out">fade-out</p>
 286                                                 <p class="fragment highlight-red">highlight-red</p>
 287                                                 <p class="fragment highlight-green">highlight-green</p>
 288                                                 <p class="fragment highlight-blue">highlight-blue</p>
 289                                         </section>
 290                                 </section>
 291
 292                                 <section>
 293                                         <h2>Spectacular image!</h2>
 294                                         <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
 295                                                 <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
 296                                         </a>
 297                                 </section>
 298
 299                                 <section>
 300                                         <h2>Export to PDF</h2>
 301                                         <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>
 302                                         <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>
 303                                         <script>
 304                                                 document.getElementById('slideshare').attributeName = 'allowfullscreen';
 305                                         </script>
 306                                 </section>
 307
 308                                 <section>
 309                                         <h2>Take a Moment</h2>
 310                                         <p>
 311                                                 Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
 312                                                 during a presentation.
 313                                         </p>
 314                                 </section>
 315
 316                                 <section>
 317                                         <h2>Stellar Links</h2>
 318                                         <ul>
 319                                                 <li><a href="http://slid.es">Try the online editor</a></li>
 320                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
 321                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 322                                         </ul>
 323                                 </section>
 324
 325                                 <section>
 326                                         <h1>THE END</h1>
 327                                         <h3>BY Hakim El Hattab / hakim.se</h3>
 328                                 </section>
 329
 330                         </div>
 331
 332                 </div>
 333
 334                 <script src="lib/js/head.min.js"></script>
 335                 <script src="js/reveal.min.js"></script>
 336
 337                 <script>
 338
 339                         // Full list of configuration options available here:
 340                         // https://github.com/hakimel/reveal.js#configuration
 341                         Reveal.initialize({
 342                                 controls: true,
 343                                 progress: true,
 344                                 history: true,
 345                                 center: true,
 346
 347                                 theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
 348                                 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
 349
 350                                 // Optional libraries used to extend on reveal.js
 351                                 dependencies: [
 352                                         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 353                                         { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 354                                         { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 355                                         { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 356                                         { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 357                                         { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
 358                                         // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
 359                                         // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
 360                                 ]
 361                         });
 362
 363                 </script>
 364
 365         </body>
 366 </html>