index.html 14.7 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.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

23
		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
24
		<script>
25
26
27
28
29
30
31
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
32
33
		</script>

hakimel's avatar
hakimel committed
34
35
36
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
37
	</head>
38

Hakim El Hattab's avatar
Hakim El Hattab committed
39
	<body>
40

41
		<div class="reveal">
42

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

Hakim El Hattab's avatar
Hakim El Hattab committed
53
				<section>
54
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
55
					<p>
56
						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
57
58
						support for CSS 3D transforms to see it in its full glory.
					</p>
59
60

					<aside class="notes">
61
						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).
62
					</aside>
Hakim El Hattab's avatar
Hakim El Hattab committed
63
				</section>
64

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

Hakim El Hattab's avatar
Hakim El Hattab committed
97
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
98
					<h2>Slides</h2>
99
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
100
						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>.
101
					</p>
102
103
				</section>

104
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
105
					<h2>Point of View</h2>
106
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
107
108
109
110
						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.
111
112
113
					</p>
				</section>

114
115
116
				<section>
					<h2>Works in Mobile Safari</h2>
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
117
						Try it out! You can swipe through the slides and pinch your way to the overview.
118
119
120
					</p>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
121
				<section>
122
123
124
125
126
127
128
					<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
129
				</section>
130

131
132
133
134
135
136
137
138
				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>
139

Wachiwi's avatar
Wachiwi committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
                <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>
167
                   </table>
Wachiwi's avatar
Wachiwi committed
168
               </section>
169

170
				<section data-markdown>
171
172
					<script type="text/template">
						## Markdown support
173

174
						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).
175

176
177
178
179
180
181
182
183
						```
						<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>
						```
184
					</script>
185
186
				</section>

187
				<section id="transitions">
188
189
					<h2>Transition Styles</h2>
					<p>
190
						You can select from different transitions, like: <br>
191
						<a href="?#/transitions">Default</a> -
192
						<a href="?transition=none#/transitions">None</a> -
193
194
195
196
						<a href="?transition=fade#/transitions">Fade</a> -
						<a href="?transition=slide#/transitions">Slide</a> -
						<a href="?transition=concave#/transitions">Concave</a> -
						<a href="?transition=zoom#/transitions">Zoom</a>
197
198
199
					</p>
				</section>

200
				<section id="themes">
201
202
203
					<h2>Themes</h2>
					<p>
						Reveal.js comes with a few themes built in: <br>
Hakim El Hattab's avatar
Hakim El Hattab committed
204
						<a href="?#/themes">Default</a> -
205
206
207
208
						<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
209
						<a href="?theme=night#/themes">Night</a> <br>
210
211
						<a href="?theme=moon#/themes">Moon</a> -
						<a href="?theme=solarized#/themes">Solarized</a>
212
213
214
215
216
217
218
219
					</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>

220
				<section>
221
222
223
224
225
226
227
228
					<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
229
230
231
232
233
				<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>
234
					<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
Hakim El Hattab's avatar
Hakim El Hattab committed
235
236
237
238
239
240
Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					</code></pre>
				</section>

241
242
243
				<section>
					<section data-background="#007777">
						<h2>Slide Backgrounds</h2>
244
						<p>
245
							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.
246
						</p>
247
						<a href="#" class="navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
248
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
249
250
						</a>
					</section>
251
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
252
253
						<h2>Image Backgrounds</h2>
						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
254
					</section>
255
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
256
257
						<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>
258
					</section>
259
260
				</section>

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

268
				<section data-transition="slide" data-background="#8c4738" data-background-transition="slide">
269
270
271
272
273
274
					<h2>Background Transition Override</h2>
					<p>
						You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
					</p>
				</section>

275
276
277
278
				<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
279
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
280
281
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
282
283
						&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;
284
285
					</blockquote>
				</section>
286

287
288
				<section>
					<h2>Pretty Code</h2>
289
					<pre><code data-trim contenteditable>
290
function linkify( selector ) {
291
  if( supports3DTransforms ) {
292

293
294
    var nodes = document.querySelectorAll( selector );

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

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

308
309
310
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
311
						You can link between slides internally,
312
313
314
						<a href="#/2/3">like this</a>.
					</p>
				</section>
315

316
				<section>
317
					<section id="fragments">
318
319
320
321
322
323
324
325
						<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>
326
327

						<aside class="notes">
328
							This slide has fragments which are also stepped through in the notes window.
329
						</aside>
330
331
332
333
334
335
336
337
338
339
340
					</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
341
342
						<p class="fragment current-visible">current-visible</p>
						<p class="fragment highlight-current-blue">highlight-current-blue</p>
343
					</section>
344
				</section>
345

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

353
354
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
355
					<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
356
357
358
359
					<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>
360
				</section>
361

362
363
364
				<section>
					<h2>Take a Moment</h2>
					<p>
Luke Williams's avatar
Luke Williams committed
365
						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
366
						during a presentation.
367
368
369
					</p>
				</section>

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

379
380
				<section>
					<h1>THE END</h1>
381
					<h3>BY Hakim El Hattab / hakim.se</h3>
382
				</section>
383

384
			</div>
385

Hakim El Hattab's avatar
Hakim El Hattab committed
386
		</div>
387

388
		<script src="lib/js/head.min.js"></script>
389
		<script src="js/reveal.js"></script>
390

391
		<script>
392

393
394
395
396
397
398
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
399
				center: true,
400

401
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
402
				transition: Reveal.getQueryHash().transition || 'default', // none/fade/slide/convex/concave/zoom
403

404
				// Parallax scrolling
405
406
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',
407

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

419
		</script>
420

Hakim El Hattab's avatar
Hakim El Hattab committed
421
	</body>
422
</html>