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

99
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
100
					<h2>Point of View</h2>
101
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
102
103
104
105
						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.
106
107
108
					</p>
				</section>

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

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

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

135
				<section data-markdown>
136
137
					<script type="text/template">
						## Markdown support
138

139
						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).
140

141
142
143
144
145
146
147
148
						```
						<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>
						```
149
					</script>
150
151
				</section>

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

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

185
				<section>
186
187
188
189
190
191
192
193
194
195
196
					<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>

				<section>
					<section data-background="#007777">
						<h2>Slide Backgrounds</h2>
197
						<p>
198
							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.
199
						</p>
200
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
201
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
202
203
						</a>
					</section>
204
205
206
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
						<h2>Image Backgrounds</h2>
						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
207
						<a href="#" class="image navigate-down">
Owen Versteeg's avatar
Owen Versteeg committed
208
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
209
210
						</a>
					</section>
211
212
213
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px">
						<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>
214
215
						<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);">
216
217
						</a>
					</section>
218
219
				</section>

220
221
222
223
224
				<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>
225
226
					<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
Reveal.addEventListener( 'customevent', function() {
227
	console.log( '"customevent" has fired' );
228
229
} );
					</code></pre>
230
231
				</section>

232
233
234
235
				<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
236
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
237
238
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
239
240
						&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;
241
242
					</blockquote>
				</section>
243

244
245
				<section>
					<h2>Pretty Code</h2>
246
					<pre><code data-trim contenteditable>
247
function linkify( selector ) {
248
  if( supports3DTransforms ) {
249

250
251
    var nodes = document.querySelectorAll( selector );

Owen Versteeg's avatar
Owen Versteeg committed
252
    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
253
254
255
256
257
258
259
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
260
}
261
262
263
					</code></pre>
					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				</section>
264

265
266
267
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
268
						You can link between slides internally,
269
270
271
						<a href="#/2/3">like this</a>.
					</p>
				</section>
272

273
				<section>
274
275
276
277
278
279
280
281
282
					<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>
283
284

						<aside class="notes">
285
							This slide has fragments which are also stepped through in the notes window.
286
						</aside>
287
288
289
290
291
292
293
294
295
296
297
298
					</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>
299
				</section>
300

301
302
				<section>
					<h2>Spectacular image!</h2>
303
304
					<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">
305
306
					</a>
				</section>
307

308
309
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
310
					<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
311
312
313
314
					<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>
315
				</section>
316

317
318
319
				<section>
					<h2>Take a Moment</h2>
					<p>
Luke Williams's avatar
Luke Williams committed
320
						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
321
						during a presentation.
322
323
324
					</p>
				</section>

325
326
327
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
328
						<li><a href="http://slid.es">Try the online editor</a></li>
Hakim El Hattab's avatar
Hakim El Hattab committed
329
						<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
330
331
332
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
333

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

339
			</div>
340

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

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

346
		<script>
347

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

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

359
360
361
				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
362
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
363
364
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
365
366
					{ 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; } }
367
					// { src: 'plugin/search/search.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>