index.html 13.3 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
		<link rel="stylesheet" href="css/reveal.min.css">
16
		<link rel="stylesheet" href="css/theme/default.css" id="theme">
17
18

		<!-- For syntax highlighting -->
19
		<link rel="stylesheet" href="lib/css/zenburn.css">
hakimel's avatar
hakimel committed
20

Hakim El Hattab's avatar
Hakim El Hattab committed
21
		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
22
		<script>
23
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
24
25
		</script>

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

Hakim El Hattab's avatar
Hakim El Hattab committed
31
	<body>
32

33
		<div class="reveal">
34

35
36
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
37

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

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

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

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

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

97
98
99
100
101
102
103
				<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>

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

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

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

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

134
						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).
135

136
137
							<section data-markdown>
							  ## Markdown support
138

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

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

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

178
179
180
181
182
				<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
183
							will be added as a class to the document element when the slide is open. This lets you
184
185
							apply broader style changes, like switching the background.
						</p>
186
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
187
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
188
189
190
191
						</a>
					</section>
					<section data-state="blackout">
						<h2>"blackout"</h2>
192
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
193
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
194
195
196
197
						</a>
					</section>
					<section data-state="soothe">
						<h2>"soothe"</h2>
198
199
						<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);">
200
201
						</a>
					</section>
202
203
				</section>

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

215
216
217
218
219
220
221
				<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">
222
						For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
223
224
225
						reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
					</blockquote>
				</section>
226

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

233
234
    var nodes = document.querySelectorAll( selector );

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

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

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

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

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

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

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

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

308
309
310
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
311
312
						<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>
313
314
315
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
316
317
318
319

				<section>
					<h2>It's free</h2>
					<p>
320
						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
321
322
323
324
325
326
327
328
329
330
331
332
333
						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>
334

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

340
			</div>
341

Hakim El Hattab's avatar
Hakim El Hattab committed
342
		</div>
343

344
		<script src="lib/js/head.min.js"></script>
345
		<script src="js/reveal.min.js"></script>
346

347
		<script>
348

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

357
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
Joel Brandt's avatar
Joel Brandt committed
358
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
359
360
361
362

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
363
364
365
					{ 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(); } },
366
367
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
368
					// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
369
370
				]
			});
371

372
		</script>
373

Hakim El Hattab's avatar
Hakim El Hattab committed
374
	</body>
375
</html>