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

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
192
193
						<a href="?transition=cube#/transitions">Cube</a> -
						<a href="?transition=page#/transitions">Page</a> -
						<a href="?transition=concave#/transitions">Concave</a> -
194
195
						<a href="?transition=zoom#/transitions">Zoom</a> -
						<a href="?transition=linear#/transitions">Linear</a> -
Joel Brandt's avatar
Joel Brandt committed
196
						<a href="?transition=fade#/transitions">Fade</a> -
197
						<a href="?transition=none#/transitions">None</a> -
198
						<a href="?#/transitions">Default</a>
199
200
201
					</p>
				</section>

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

222
				<section>
223
224
225
226
227
228
229
230
					<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
231
232
233
234
235
236
237
238
239
240
241
242
				<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>

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

263
264
265
266
267
268
269
270
271
272
273
274
275
276
				<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>

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

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

295
296
    var nodes = document.querySelectorAll( selector );

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

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

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

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

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

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

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

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

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

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

386
			</div>
387

Hakim El Hattab's avatar
Hakim El Hattab committed
388
		</div>
389

390
		<script src="lib/js/head.min.js"></script>
391
		<script src="js/reveal.min.js"></script>
392

393
		<script>
394

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

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

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

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

421
		</script>
422

Hakim El Hattab's avatar
Hakim El Hattab committed
423
	</body>
424
</html>