index.html 12.9 KB
Newer Older
Hakim El Hattab's avatar
Hakim El Hattab committed
1
2
3
4
5
6
<!doctype html>  
<html lang="en">
	
	<head>
		<meta charset="utf-8">
		
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" />
Hakim El Hattab's avatar
Hakim El Hattab committed
14
		
Hakim El Hattab's avatar
Hakim El Hattab committed
15
		<link rel="stylesheet" href="css/reveal.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
30
31
32
	</head>
	
	<body>
		
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
				</section>
				
Hakim El Hattab's avatar
Hakim El Hattab committed
43
				<section>
44
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
45
					<p>
46
						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with 
47
48
49
50
						support for CSS 3D transforms to see it in its full glory.
					</p>
					<p>
						<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
Hakim El Hattab's avatar
Hakim El Hattab committed
51
					</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
65
66
							try pressing <a href="#/2/1">down</a>.
						</p>
						<a href="#/2/1" class="image">
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
120
				</section>
				
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
133
134
					<script type="text/template">
						## 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).
135

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

139
140
141
142
							  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>
					</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> -
Hakim El Hattab's avatar
Hakim El Hattab committed
152
						<a href="?transition=zoom#/transitions">Zoom</a> - 
153
						<a href="?transition=linear#/transitions">Linear</a> - 
Hakim El Hattab's avatar
Hakim El Hattab committed
154
						<a href="?transition=none#/transitions">None</a> - 
155
						<a href="?#/transitions">Default</a>
156
157
158
					</p>
				</section>

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

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

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

213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
				<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">
						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.
					</blockquote>
				</section>
				
				<section>
					<h2>Pretty Code</h2>
					<pre><code contenteditable>
228
function linkify( selector ) {
229
230
231
232
  if( supports3DTransforms ) {
    
    var nodes = document.querySelectorAll( selector );

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

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
241
}
242
243
244
245
246
247
248
					</code></pre>
					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
				</section>
				
				<section>
					<h2>Intergalactic Interconnections</h2>
					<p>
249
						You can link between slides internally,
250
251
252
						<a href="#/2/3">like this</a>.
					</p>
				</section>
253

254
				<section>
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
					<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>
					</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>
276
277
278
279
				</section>
				
				<section>
					<h2>Spectacular image!</h2>
280
281
					<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">
282
283
284
					</a>
				</section>
				
285
286
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
287
					<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
288
289
290
291
					<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>
292
293
				</section>
				
294
295
296
297
				<section>
					<h2>Take a Moment</h2>
					<p>
						Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen 
Dan Dascalescu's avatar
Dan Dascalescu committed
298
						during a presentation.
299
300
301
					</p>
				</section>

302
303
304
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
305
306
						<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>
307
308
309
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327

				<section>
					<h2>It's free</h2>
					<p>
						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. 
						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>
328
329
330
				
				<section>
					<h1>THE END</h1>
331
					<h3>BY Hakim El Hattab / hakim.se</h3>
332
				</section>
333

334
			</div>
Hakim El Hattab's avatar
Hakim El Hattab committed
335
336
			
		</div>
337

338
		<script src="lib/js/head.min.js"></script>
339
		<script src="js/reveal.min.js"></script>
340

341
		<script>
342

343
344
345
346
347
348
349
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				
350
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
Hakim El Hattab's avatar
Hakim El Hattab committed
351
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
352
353
354
355
356
357
358

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

Hakim El Hattab's avatar
Hakim El Hattab committed
365
	</body>
366
</html>