index.html 14.8 KB
Newer Older
1
<!doctype html>
Hakim El Hattab's avatar
Hakim El Hattab committed
2
<html lang="en">
3

Hakim El Hattab's avatar
Hakim El Hattab committed
4
5
	<head>
		<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
13

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
14

15
16
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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">
hakimel's avatar
hakimel committed
22

Hakim El Hattab's avatar
Hakim El Hattab committed
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
27
		</script>

hakimel's avatar
hakimel committed
28
29
30
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
31
	</head>
32

Hakim El Hattab's avatar
Hakim El Hattab committed
33
	<body>
34

35
		<div class="reveal">
36

37
38
39
40
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Reveal.js</h1>
41
					<h3>HTML Presentations Made Easy</h3>
42
43
44
					<p>
						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
					</p>
45
				</section>
46

Hakim El Hattab's avatar
Hakim El Hattab committed
47
				<section>
48
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
49
					<p>
50
						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
51
52
						support for CSS 3D transforms to see it in its full glory.
					</p>
53
54

					<aside class="notes">
55
						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).
56
					</aside>
Hakim El Hattab's avatar
Hakim El Hattab committed
57
				</section>
58

59
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
Hakim El Hattab committed
60
				<section>
61
62
63
					<section>
						<h2>Vertical Slides</h2>
						<p>
64
							Slides can be nested inside of other slides,
65
							try pressing <a href="#" class="navigate-down">down</a>.
66
						</p>
67
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
68
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
69
70
71
72
73
74
75
76
77
						</a>
					</section>
					<section>
						<h2>Basement Level 1</h2>
						<p>Press down or up to navigate.</p>
					</section>
					<section>
						<h2>Basement Level 2</h2>
						<p>Cornify</p>
78
						<a class="test" href="http://cornify.com">
Owen Versteeg's avatar
Owen Versteeg committed
79
							<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
80
						</a>
81
82
83
84
85
					</section>
					<section>
						<h2>Basement Level 3</h2>
						<p>That's it, time to go back up.</p>
						<a href="#/2" class="image">
Owen Versteeg's avatar
Owen Versteeg committed
86
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
87
88
						</a>
					</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
89
				</section>
90

Hakim El Hattab's avatar
Hakim El Hattab committed
91
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
92
					<h2>Slides</h2>
93
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
94
						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>.
95
					</p>
96
97
				</section>

98
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
99
					<h2>Point of View</h2>
100
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
101
102
103
104
						Press <strong>ESC</strong> to enter the slide overview.
					</p>
					<p>
						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.
105
106
107
					</p>
				</section>

108
109
110
				<section>
					<h2>Works in Mobile Safari</h2>
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
111
						Try it out! You can swipe through the slides and pinch your way to the overview.
112
113
114
					</p>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
115
				<section>
116
117
118
119
120
121
122
					<h2>Marvelous Unordered List</h2>
					<ul>
						<li>No order here</li>
						<li>Or here</li>
						<li>Or here</li>
						<li>Or here</li>
					</ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
123
				</section>
124

125
126
127
128
129
130
131
132
				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>
133

Wachiwi's avatar
Wachiwi committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
                <section>
                    <h2>Superb Tables</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Value</th>
                                <th>Quantity</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Apples</td>
                                <td>$1</td>
                                <td>7</td>
                            <tr>
                            <tr>
                                <td>Lemonade</td>
                                <td>$2</td>
                                <td>18</td>
                            <tr>
                            <tr>
                                <td>Bread</td>
                                <td>$3</td>
                                <td>2</td>
                            <tr>
                      </tbody>
161
                   </table>
Wachiwi's avatar
Wachiwi committed
162
               </section>
163

164
				<section data-markdown>
165
166
					<script type="text/template">
						## Markdown support
167

168
						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).
169

170
171
172
173
174
175
176
177
						```
						<section data-markdown>
						  ## Markdown support

						  For those of you who like that sort of thing.
						  Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
						</section>
						```
178
					</script>
179
180
				</section>

181
				<section id="transitions">
182
183
					<h2>Transition Styles</h2>
					<p>
184
						You can select from different transitions, like: <br>
185
186
187
						<a href="?transition=cube#/transitions">Cube</a> -
						<a href="?transition=page#/transitions">Page</a> -
						<a href="?transition=concave#/transitions">Concave</a> -
188
189
						<a href="?transition=zoom#/transitions">Zoom</a> -
						<a href="?transition=linear#/transitions">Linear</a> -
Joel Brandt's avatar
Joel Brandt committed
190
						<a href="?transition=fade#/transitions">Fade</a> -
191
						<a href="?transition=none#/transitions">None</a> -
192
						<a href="?#/transitions">Default</a>
193
194
195
					</p>
				</section>

196
				<section id="themes">
197
198
199
					<h2>Themes</h2>
					<p>
						Reveal.js comes with a few themes built in: <br>
Hakim El Hattab's avatar
Hakim El Hattab committed
200
						<a href="?#/themes">Default</a> -
201
202
203
204
						<a href="?theme=sky#/themes">Sky</a> -
						<a href="?theme=beige#/themes">Beige</a> -
						<a href="?theme=simple#/themes">Simple</a> -
						<a href="?theme=serif#/themes">Serif</a> -
Hakim El Hattab's avatar
Hakim El Hattab committed
205
						<a href="?theme=night#/themes">Night</a> <br>
206
207
						<a href="?theme=moon#/themes">Moon</a> -
						<a href="?theme=solarized#/themes">Solarized</a>
208
209
210
211
212
213
214
215
					</p>
					<p>
						<small>
							* 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>.
						</small>
					</p>
				</section>

216
				<section>
217
218
219
220
221
222
223
224
					<h2>Global State</h2>
					<p>
						Set <code>data-state="something"</code> on a slide and <code>"something"</code>
						will be added as a class to the document element when the slide is open. This lets you
						apply broader style changes, like switching the background.
					</p>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
225
226
227
228
229
230
231
232
233
234
235
236
				<section data-state="customevent">
					<h2>Custom Events</h2>
					<p>
						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
					</p>
					<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					</code></pre>
				</section>

237
238
239
				<section>
					<section data-background="#007777">
						<h2>Slide Backgrounds</h2>
240
						<p>
241
							Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
242
						</p>
243
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
244
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
245
246
						</a>
					</section>
247
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
248
249
						<h2>Image Backgrounds</h2>
						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
250
					</section>
251
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
252
253
						<h2>Repeated Image Backgrounds</h2>
						<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
254
					</section>
255
256
				</section>

257
258
259
260
261
262
263
264
265
266
267
268
269
270
				<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide">
					<h2>Background Transitions</h2>
					<p>
						Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
					</p>
				</section>

				<section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
					<h2>Background Transition Override</h2>
					<p>
						You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
					</p>
				</section>

271
272
273
274
				<section>
					<h2>Clever Quotes</h2>
					<p>
						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
275
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
276
277
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
278
279
						&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
280
281
					</blockquote>
				</section>
282

283
284
				<section>
					<h2>Pretty Code</h2>
285
					<pre><code data-trim contenteditable>
286
function linkify( selector ) {
287
  if( supports3DTransforms ) {
288

289
290
    var nodes = document.querySelectorAll( selector );

Owen Versteeg's avatar
Owen Versteeg committed
291
    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
292
293
      var node = nodes[i];

hakimel's avatar
hakimel committed
294
      if( !node.className ) {
295
296
        node.className += ' roll';
      }
hakimel's avatar
hakimel committed
297
    }
298
  }
299
}
300
301
302
					</code></pre>
					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				</section>
303

304
305
306
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
307
						You can link between slides internally,
308
309
310
						<a href="#/2/3">like this</a>.
					</p>
				</section>
311

312
				<section>
313
					<section id="fragments">
314
315
316
317
318
319
320
321
						<h2>Fragmented Views</h2>
						<p>Hit the next arrow...</p>
						<p class="fragment">... to step through ...</p>
						<ol>
							<li class="fragment"><code>any type</code></li>
							<li class="fragment"><em>of view</em></li>
							<li class="fragment"><strong>fragments</strong></li>
						</ol>
322
323

						<aside class="notes">
324
							This slide has fragments which are also stepped through in the notes window.
325
						</aside>
326
327
328
329
330
331
332
333
334
335
336
					</section>
					<section>
						<h2>Fragment Styles</h2>
						<p>There's a few styles of fragments, like:</p>
						<p class="fragment grow">grow</p>
						<p class="fragment shrink">shrink</p>
						<p class="fragment roll-in">roll-in</p>
						<p class="fragment fade-out">fade-out</p>
						<p class="fragment highlight-red">highlight-red</p>
						<p class="fragment highlight-green">highlight-green</p>
						<p class="fragment highlight-blue">highlight-blue</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
337
338
						<p class="fragment current-visible">current-visible</p>
						<p class="fragment highlight-current-blue">highlight-current-blue</p>
339
					</section>
340
				</section>
341

342
343
				<section>
					<h2>Spectacular image!</h2>
344
345
					<a class="image" href="http://lab.hakim.se/meny/" target="_blank">
						<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
346
347
					</a>
				</section>
348

349
350
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
351
					<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>
Owen Versteeg's avatar
Owen Versteeg committed
352
353
354
355
					<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>
					<script>
						document.getElementById('slideshare').attributeName = 'allowfullscreen';
					</script>
356
				</section>
357

358
359
360
				<section>
					<h2>Take a Moment</h2>
					<p>
Luke Williams's avatar
Luke Williams committed
361
						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
Dan Dascalescu's avatar
Dan Dascalescu committed
362
						during a presentation.
363
364
365
					</p>
				</section>

366
367
368
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
369
						<li><a href="http://slid.es">Try the online editor</a></li>
Hakim El Hattab's avatar
Hakim El Hattab committed
370
						<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
371
372
373
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
374

375
376
				<section>
					<h1>THE END</h1>
377
					<h3>BY Hakim El Hattab / hakim.se</h3>
378
				</section>
379

380
			</div>
381

Hakim El Hattab's avatar
Hakim El Hattab committed
382
		</div>
383

384
		<script src="lib/js/head.min.js"></script>
385
		<script src="js/reveal.min.js"></script>
386

387
		<script>
388

389
390
391
392
393
394
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
395
				center: true,
396

397
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
Joel Brandt's avatar
Joel Brandt committed
398
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
399

400
				// Parallax scrolling
401
402
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',
403

404
405
406
				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
407
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
408
409
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
410
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
Rory Hardy's avatar
Rory Hardy committed
411
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
412
413
				]
			});
414

415
		</script>
416

Hakim El Hattab's avatar
Hakim El Hattab committed
417
	</body>
418
</html>