index.html 12.7 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
		
15
		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Hakim El Hattab's avatar
Hakim El Hattab committed
16
		
Hakim El Hattab's avatar
Hakim El Hattab committed
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

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
32
33
34
	</head>
	
	<body>
		
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
				</section>
				
Hakim El Hattab's avatar
Hakim El Hattab committed
45
				<section>
46
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
47
					<p>
48
						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with 
49
50
51
52
						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
53
					</p>
54
55
56
57

					<aside class="notes">
						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
					</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
67
68
							try pressing <a href="#/2/1">down</a>.
						</p>
						<a href="#/2/1" class="image">
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
122
				</section>
				
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
135
136
					<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).
137

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

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

161
				<section id="themes">
162
163
164
					<h2>Themes</h2>
					<p>
						Reveal.js comes with a few themes built in: <br>
165
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> -
						<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
186
							apply broader style changes, like switching the background.
						</p>
						<a href="#/7/1" class="image">
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
192
						</a>
					</section>
					<section data-state="blackout">
						<h2>"blackout"</h2>
						<a href="#/7/2" class="image">
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
198
						</a>
					</section>
					<section data-state="soothe">
						<h2>"soothe"</h2>
						<a href="#/7/0" class="image">
Owen Versteeg's avatar
Owen Versteeg committed
199
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
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
222
223
224
225
226
227
228
229
				<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>
230
function linkify( selector ) {
231
232
233
234
  if( supports3DTransforms ) {
    
    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
247
248
249
250
					</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>
251
						You can link between slides internally,
252
253
254
						<a href="#/2/3">like this</a>.
					</p>
				</section>
255

256
257
258
259
260
261
262
263
264
265
266
267
268
				<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>Spectacular image!</h2>
269
270
					<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">
271
272
273
					</a>
				</section>
				
274
275
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
276
					<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
277
278
279
280
					<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>
281
282
				</section>
				
283
284
285
286
				<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
287
						during a presentation.
288
289
290
					</p>
				</section>

291
292
293
				<section>
					<h2>Stellar Links</h2>
					<ul>
Hakim El Hattab's avatar
Hakim El Hattab committed
294
295
						<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>
296
297
298
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316

				<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>
317
318
319
				
				<section>
					<h1>THE END</h1>
320
					<h3>BY Hakim El Hattab / hakim.se</h3>
321
				</section>
322

323
			</div>
Hakim El Hattab's avatar
Hakim El Hattab committed
324
325
			
		</div>
326

327
		<script src="lib/js/head.min.js"></script>
328
		<script src="js/reveal.min.js"></script>
329

330
		<script>
331
332
333
334
335
336
337
338
			
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				
339
				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
Hakim El Hattab's avatar
Hakim El Hattab committed
340
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
341
342
343
344
345
346
347

				// 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]' ); } },
hakimel's avatar
hakimel committed
348
					{ src: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } },
Jono Warren's avatar
Jono Warren committed
349
					{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
350
					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
351
352
				]
			});
353
			
354
		</script>
355

Hakim El Hattab's avatar
Hakim El Hattab committed
356
	</body>
357
</html>