index.html 13.5 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
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
16

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
		<!-- Include the appropriate print stylesheet -->
24
		<script>
25
26
27
28
29
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
30
31
		</script>

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

Hakim El Hattab's avatar
Hakim El Hattab committed
37
	<body>
38

39
		<div class="reveal">
40

41
42
43
44
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Reveal.js</h1>
Hakim El Hattab's avatar
typo    
Hakim El Hattab committed
45
					<h3>The HTML Presentation Framework</h3>
46
47
48
					<p>
						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
					</p>
49
				</section>
50

Hakim El Hattab's avatar
Hakim El Hattab committed
51
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
52
					<h2>Hello There</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
53
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
54
						reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.
55
					</p>
56
57

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

62
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
Hakim El Hattab committed
63
				<section>
64
65
					<section>
						<h2>Vertical Slides</h2>
66
67
68
						<p>Slides can be nested inside of each other.</p>
						<p>Use the <em>Space</em> key to navigate through all slides.</p>
						<br>
69
						<a href="#" class="navigate-down">
70
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
71
72
73
74
						</a>
					</section>
					<section>
						<h2>Basement Level 1</h2>
75
						<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
76
77
78
79
					</section>
					<section>
						<h2>Basement Level 2</h2>
						<p>That's it, time to go back up.</p>
80
						<br>
81
						<a href="#/2">
82
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
83
84
						</a>
					</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
85
				</section>
86

Hakim El Hattab's avatar
Hakim El Hattab committed
87
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
88
					<h2>Slides</h2>
89
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
90
						Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
91
					</p>
92
93
				</section>

94
				<section>
Hakim El Hattab's avatar
Hakim El Hattab committed
95
					<h2>Point of View</h2>
96
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
97
98
99
100
						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.
101
102
103
					</p>
				</section>

104
				<section>
105
					<h2>Touch Optimized</h2>
106
					<p>
107
						Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
108
109
110
					</p>
				</section>

111
				<section data-markdown>
112
113
					<script type="text/template">
						## Markdown support
114

115
116
						Write content using inline or external Markdown.
						Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
117

118
119
120
121
						```
						<section data-markdown>
						  ## Markdown support

122
123
						  Write content using inline or external Markdown.
						  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
124
125
						</section>
						```
126
					</script>
127
128
				</section>

129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
				<section>
					<section id="fragments">
						<h2>Fragments</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>

						<aside class="notes">
							This slide has fragments which are also stepped through in the notes window.
						</aside>
					</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 current-visible">current-visible</p>
						<p class="fragment highlight-current-blue">highlight-current-blue</p>
					</section>
				</section>

157
				<section id="transitions">
158
159
					<h2>Transition Styles</h2>
					<p>
160
						You can select from different transitions, like: <br>
161
						<a href="?transition=none#/transitions">None</a> -
162
163
						<a href="?transition=fade#/transitions">Fade</a> -
						<a href="?transition=slide#/transitions">Slide</a> -
164
						<a href="?transition=convex#/transitions">Convex</a> -
165
166
						<a href="?transition=concave#/transitions">Concave</a> -
						<a href="?transition=zoom#/transitions">Zoom</a>
167
168
169
					</p>
				</section>

170
				<section id="themes">
171
172
173
					<h2>Themes</h2>
					<p>
						Reveal.js comes with a few themes built in: <br>
Hakim El Hattab's avatar
Hakim El Hattab committed
174
						<a href="?#/themes">Default</a> -
175
176
177
178
						<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
179
						<a href="?theme=night#/themes">Night</a> <br>
180
181
						<a href="?theme=moon#/themes">Moon</a> -
						<a href="?theme=solarized#/themes">Solarized</a>
182
183
184
					</p>
					<p>
						<small>
185
							* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the &lt;head&gt; using a &lt;link&gt;.
186
187
188
189
						</small>
					</p>
				</section>

190
				<section>
191
192
193
194
					<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
195
						apply broader style changes, like switching the page background.
196
197
198
					</p>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
199
				<section data-state="customevent">
200
					<h2>State Events</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
201
202
203
					<p>
						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
					</p>
204
					<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
Hakim El Hattab's avatar
Hakim El Hattab committed
205
206
207
208
209
210
Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					</code></pre>
				</section>

211
212
213
				<section>
					<section data-background="#007777">
						<h2>Slide Backgrounds</h2>
214
						<p>
215
							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.
216
						</p>
217
						<a href="#" class="navigate-down">
218
							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
219
220
						</a>
					</section>
221
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
222
223
						<h2>Image Backgrounds</h2>
						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
224
					</section>
225
					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
226
						<h2>Tile Backgrounds</h2>
227
						<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
228
					</section>
229
230
				</section>

231
				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
232
233
					<h2>Background Transitions</h2>
					<p>
234
						Different background transitions are available via the <code>backgroundTransition</code> option. This one's called "zoom".
235
236
237
					</p>
				</section>

238
239
				<section data-transition="slide" data-background="#8c4738" data-background-transition="zoom">
					<h2>Background Transitions</h2>
240
					<p>
241
						You can override background transitions per slide by using <code>data-background-transition="zoom"</code>.
242
243
244
					</p>
				</section>

245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
				<section>
					<h2>Marvelous List</h2>
					<ul>
						<li>No order here</li>
						<li>Or here</li>
						<li>Or here</li>
						<li>Or here</li>
					</ul>
				</section>

				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>

				<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>
					</table>
				</section>

294
295
296
297
				<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
298
						&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
299
300
					</p>
					<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
Hakim El Hattab's avatar
Hakim El Hattab committed
301
302
						&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;
303
304
					</blockquote>
				</section>
305

306
307
				<section>
					<h2>Pretty Code</h2>
308
					<pre><code data-trim contenteditable>
309
function linkify( selector ) {
310
  if( supports3DTransforms ) {
311

312
313
    var nodes = document.querySelectorAll( selector );

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

hakimel's avatar
hakimel committed
317
      if( !node.className ) {
318
319
        node.className += ' roll';
      }
hakimel's avatar
hakimel committed
320
    }
321
  }
322
}
323
324
325
					</code></pre>
					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				</section>
326

327
328
329
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
330
						You can link between slides internally,
331
332
333
						<a href="#/2/3">like this</a>.
					</p>
				</section>
334

335
336
				<section>
					<h2>Spectacular image!</h2>
337
					<a href="http://lab.hakim.se/meny/" target="_blank">
338
						<img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
339
340
					</a>
				</section>
341

342
343
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
344
					<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
345
346
347
348
					<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>
349
				</section>
350

351
352
353
				<section>
					<h2>Take a Moment</h2>
					<p>
Hakim El Hattab's avatar
Hakim El Hattab committed
354
						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 during a presentation.
355
356
357
					</p>
				</section>

358
359
360
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
361
						<li><a href="http://slid.es">Try the online editor</a></li>
Hakim El Hattab's avatar
Hakim El Hattab committed
362
						<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
363
364
365
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
366

367
368
				<section>
					<h1>THE END</h1>
369
					<h3>BY Hakim El Hattab / hakim.se</h3>
370
				</section>
371

372
			</div>
373

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

376
		<script src="lib/js/head.min.js"></script>
377
		<script src="js/reveal.js"></script>
378

379
		<script>
380

381
382
383
384
385
386
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
387
				center: true,
388

389
				transition: 'slide', // none/fade/slide/convex/concave/zoom
390

391
392
393
				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
394
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
395
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
396
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
397
398
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
399
400
				]
			});
401

402
		</script>
403

Hakim El Hattab's avatar
Hakim El Hattab committed
404
	</body>
405
</html>