index.html 14 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
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
39

40
41
				<section>
					<h1>Reveal.js</h1>
42
					<h3>HTML Presentations Made Easy</h3>
43
44
45
					<p>
						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
					</p>
46
				</section>
47

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

60
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
Hakim El Hattab committed
61
				<section>
62
63
64
					<section>
						<h2>Vertical Slides</h2>
						<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">
Owen Versteeg's avatar
Owen Versteeg committed
69
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
70
71
72
73
74
75
76
77
78
						</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>
79
						<a class="test" href="http://cornify.com">
Owen Versteeg's avatar
Owen Versteeg committed
80
							<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
81
						</a>
82
83
84
85
86
					</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
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
89
						</a>
					</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
90
				</section>
91

Hakim El Hattab's avatar
Hakim El Hattab committed
92
				<section>
93
					<h2>Point of View</h2>
94
					<p>
hakimel's avatar
hakimel committed
95
						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.
96
					</p>
97
98
				</section>

99
100
101
102
103
104
105
				<section>
					<h2>rvl.io</h2>
					<p>
						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>.
					</p>
				</section>

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

Hakim El Hattab's avatar
Hakim El Hattab committed
113
				<section>
114
115
116
117
118
119
120
					<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
121
				</section>
122

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

132
				<section data-markdown>
133
134
					<script type="text/template">
						## Markdown support
135

136
						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).
137

138
139
							<section data-markdown>
							  ## Markdown support
140

141
							  For those of you who like that sort of thing.
142
143
144
							  Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
							</section>
					</script>
145
146
				</section>

147
				<section id="transitions">
148
149
					<h2>Transition Styles</h2>
					<p>
150
						You can select from different transitions, like: <br>
151
152
153
						<a href="?transition=cube#/transitions">Cube</a> -
						<a href="?transition=page#/transitions">Page</a> -
						<a href="?transition=concave#/transitions">Concave</a> -
154
155
						<a href="?transition=zoom#/transitions">Zoom</a> -
						<a href="?transition=linear#/transitions">Linear</a> -
Joel Brandt's avatar
Joel Brandt committed
156
						<a href="?transition=fade#/transitions">Fade</a> -
157
						<a href="?transition=none#/transitions">None</a> -
158
						<a href="?#/transitions">Default</a>
159
160
161
					</p>
				</section>

162
				<section id="themes">
163
164
165
					<h2>Themes</h2>
					<p>
						Reveal.js comes with a few themes built in: <br>
166
167
168
169
						<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> -
170
						<a href="?theme=night#/themes">Night</a> -
171
						<a href="?#/themes">Default</a>
172
173
174
175
176
177
178
179
					</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>

180
181
182
183
184
				<section>
					<section data-state="alert">
						<h2>Global State</h2>
						<p>
							Set <code>data-state="something"</code> on a slide and <code>"something"</code>
Dan Dascalescu's avatar
Dan Dascalescu committed
185
							will be added as a class to the document element when the slide is open. This lets you
186
187
							apply broader style changes, like switching the background.
						</p>
188
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
189
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
190
191
192
193
						</a>
					</section>
					<section data-state="blackout">
						<h2>"blackout"</h2>
194
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
195
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
196
197
198
199
						</a>
					</section>
					<section data-state="soothe">
						<h2>"soothe"</h2>
200
201
						<a href="#" class="image navigate-next">
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
202
203
						</a>
					</section>
204
205
				</section>

206
207
208
209
210
				<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>
211
					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
212
	console.log( '"customevent" has fired' );
213
214
} );
					</code></pre>
215
216
				</section>

217
218
219
220
221
222
223
				<section>
					<h2>Clever Quotes</h2>
					<p>
						These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
						The nice thing about standards is that there are so many to choose from</q> and block:
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
224
						For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
225
226
227
						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
					</blockquote>
				</section>
228

229
230
231
				<section>
					<h2>Pretty Code</h2>
					<pre><code contenteditable>
232
function linkify( selector ) {
233
  if( supports3DTransforms ) {
234

235
236
    var nodes = document.querySelectorAll( selector );

Owen Versteeg's avatar
Owen Versteeg committed
237
    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
238
239
240
241
242
243
244
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
245
}
246
247
248
					</code></pre>
					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				</section>
249

250
251
252
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
253
						You can link between slides internally,
254
255
256
						<a href="#/2/3">like this</a>.
					</p>
				</section>
257

258
				<section>
259
260
261
262
263
264
265
266
267
					<section>
						<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>
268
269

						<aside class="notes">
270
							This slide has fragments which are also stepped through in the notes window.
271
						</aside>
272
273
274
275
276
277
278
279
280
281
282
283
					</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>
					</section>
284
				</section>
285

286
287
				<section>
					<h2>Spectacular image!</h2>
288
289
					<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">
290
291
					</a>
				</section>
292

293
294
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
295
					<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
296
297
298
299
					<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>
300
				</section>
301

302
303
304
				<section>
					<h2>Take a Moment</h2>
					<p>
Luke Williams's avatar
Luke Williams committed
305
						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
306
						during a presentation.
307
308
309
					</p>
				</section>

310
311
312
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
313
314
						<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
						<li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
315
316
317
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
318
319
320
321

				<section>
					<h2>It's free</h2>
					<p>
322
						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.
Hakim El Hattab's avatar
Hakim El Hattab committed
323
324
325
326
327
328
329
330
331
332
333
334
335
						Donations will go towards hosting and domain costs.
					</p>
					<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
						<input type="hidden" name="cmd" value="_donations">
						<input type="hidden" name="business" value="hakim.elhattab@gmail.com">
						<input type="hidden" name="lc" value="US">
						<input type="hidden" name="item_name" value="reveal.js / rvl.io">
						<input type="hidden" name="no_note" value="0">
						<input type="hidden" name="currency_code" value="USD">
						<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
						<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!">
					</form>
				</section>
336

337
338
				<section>
					<h1>THE END</h1>
339
					<h3>BY Hakim El Hattab / hakim.se</h3>
340
				</section>
341

342
			</div>
343

Hakim El Hattab's avatar
Hakim El Hattab committed
344
		</div>
345

346
		<script src="lib/js/head.min.js"></script>
347
		<script src="js/reveal.min.js"></script>
348

349
		<script>
350

351
352
353
354
355
356
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
357
				center: true,
358

359
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
Joel Brandt's avatar
Joel Brandt committed
360
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
David Banham's avatar
David Banham committed
361
				globals: {
Hakim El Hattab's avatar
Hakim El Hattab committed
362
363
364
365
366
367
					// Generate a unique id and secret at http://revealjs.jit.su/token
					multiplex: {
						id: '7d10234555b923e2',
						secret: '13627859051503309760',
						url: 'revealjs.jit.su:80'
					}
David Banham's avatar
David Banham committed
368
				},
369
370
371
372

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
373
374
375
					{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
376
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
David Banham's avatar
David Banham committed
377
378
379
380
					// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } },
					// { src: 'socket.io/socket.io.js', async: true, condition: function() { return !!document.body.classList; } },
					// { src: 'plugin/multiplex/client.js', async: true, condition: function() { return !!document.body.classList; } },
					// { src: 'plugin/multiplex/master.js', async: true, condition: function() { return !!document.body.classList; } },
381
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
382
383
				]
			});
384

385
		</script>
386

Hakim El Hattab's avatar
Hakim El Hattab committed
387
	</body>
388
</html>