index.html 11.3 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 - HTML5 Presentations</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
17
		
		<link rel="stylesheet" href="css/main.css">
18
19
20
		<link rel="stylesheet" href="css/theme/default.css">

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

23
		<script>
24
25
26
			// If the query includes print-pdf we'll use the PDF print sheet
			var printStyle = window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper';
			document.write( '<link rel="stylesheet" href="css/print/' + printStyle + '.css" type="text/css" media="print">' );
27
28
		</script>

hakimel's avatar
hakimel committed
29
30
31
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
32
33
34
35
	</head>
	
	<body>
		
36
		<div class="reveal">
37
38
39

			<!-- Used to fade in a background when a specific slide state is reached -->
			<div class="state-background"></div>
Hakim El Hattab's avatar
Hakim El Hattab committed
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>
45
					<h3>HTML Presentations Made Easy</h3>
46
47
				</section>
				
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
54
55
						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
56
					</p>
57
58
59
60

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

Hakim El Hattab's avatar
Hakim El Hattab committed
95
				<section>
96
97
					<h2>Holistic Overview</h2>
					<p>
98
						Press <strong>ESC</strong> to enter the slide overview!
99
					</p>
100
101
				</section>

102
103
104
105
106
107
108
				<section>
					<h2>Works in Mobile Safari</h2>
					<p>
						Try it out! You can swipe through the slides pinch your way to the overview.
					</p>
				</section>

Hakim El Hattab's avatar
Hakim El Hattab committed
109
				<section>
110
111
112
113
114
115
116
					<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
117
118
				</section>
				
119
120
121
122
123
124
125
126
				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>
127

128
129
130
				<section data-markdown>
					## Markdown support
					
131
					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).
132
133
134

					<pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt;
  ## Markdown support
135
136
137

  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).
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
&lt;/section&gt;
					</code></pre>
				</section>

				<section>
					<h2>Transition Styles</h2>
					<p>
						You can select from different transitions, like:
					</p>
					<ul>
						<li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
						<li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
						<li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
						<li><a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a></li>
					</ul>
				</section>

155
156
157
158
159
				<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
160
							will be added as a class to the document element when the slide is open. This lets you
161
162
163
							apply broader style changes, like switching the background.
						</p>
						<a href="#/7/1" class="image">
Owen Versteeg's avatar
Owen Versteeg committed
164
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
165
166
167
168
169
						</a>
					</section>
					<section data-state="blackout">
						<h2>"blackout"</h2>
						<a href="#/7/2" class="image">
Owen Versteeg's avatar
Owen Versteeg committed
170
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
171
172
173
174
175
						</a>
					</section>
					<section data-state="soothe">
						<h2>"soothe"</h2>
						<a href="#/7/0" class="image">
Owen Versteeg's avatar
Owen Versteeg committed
176
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
177
178
						</a>
					</section>
179
180
				</section>

181
182
183
184
185
				<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>
186
					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
187
	console.log( '"customevent" has fired' );
188
189
} );
					</code></pre>
190
191
				</section>

192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
				<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>
207
function linkify( selector ) {
208
209
210
211
212
213
214
215
216
217
218
219
  if( supports3DTransforms ) {
    
    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
220
}
221
222
223
224
225
226
227
					</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>
228
						You can link between slides internally,
229
230
231
						<a href="#/2/3">like this</a>.
					</p>
				</section>
232

233
234
235
236
237
238
239
240
241
242
243
244
245
246
				<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>
					<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
Owen Versteeg's avatar
Owen Versteeg committed
247
						<img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png" alt="BreakDOM game screenshot">
248
249
250
					</a>
				</section>
				
251
252
				<section>
					<h2>Export to PDF</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
253
					<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>
254
255
256
					<iframe src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
				</section>
				
257
258
259
260
261
262
263
264
265
266
267
				<section>
					<h2>Stellar Links</h2>
					<ul>
						<li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li>
						<li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li>
						<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
					</ul>
				</section>
				
				<section>
					<h1>THE END</h1>
268
					<h3>BY Hakim El Hattab / hakim.se</h3>
269
270
271
272
273
274
275
276
277
278
279
				</section>
			</div>

			<!-- The navigational controls UI -->
			<aside class="controls">
				<a class="left" href="#">&#x25C4;</a>
				<a class="right" href="#">&#x25BA;</a>
				<a class="up" href="#">&#x25B2;</a>
				<a class="down" href="#">&#x25BC;</a>
			</aside>

280
			<!-- Presentation progress bar -->
281
			<div class="progress"><span></span></div>
Hakim El Hattab's avatar
Hakim El Hattab committed
282
283
			
		</div>
284

285
		<script src="lib/js/head.min.js"></script>
286

287
		<script>
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
			head.ready( function() {

				// Fires when a slide with data-state=customevent is activated
				Reveal.addEventListener( 'customevent', function() {
					console.log( '"customevent" has fired' );
				} );

				// Fires each time a new slide is activated
				Reveal.addEventListener( 'slidechanged', function( event ) {
					// event.previousSlide, event.currentSlide, event.indexh, event.indexv
				} );

				// Full list of configuration options available here:
				// https://github.com/hakimel/reveal.js#configuration
				Reveal.initialize({
					controls: true,
					progress: true,
					history: true,
					
					transition: Reveal.getQueryHash().transition || 'default' // default/cube/page/concave/linear(2d)
				});

				// Load highlight.js for syntax highlighting of code samples
				head.js( 'lib/js/highlight.js', function() { 
					hljs.initHighlightingOnLoad(); 
				} );

			} );

317
			// Scripts that should be loaded before initializing
318
319
320
321
			var scripts = [];

			// If the browser doesn't support classList, load a polyfill
			if( !document.body.classList ) {
322
				head.js( 'lib/js/classList.js' );
323
324
325
326
327
328
329
330
			}

			// Load markdown parser if there are slides defined using markdown
			if( document.querySelector( '[data-markdown]' ) ) {
				scripts.push( 'lib/js/showdown.js' );
				scripts.push( 'lib/js/data-markdown.js' );
			}

Hakim El Hattab's avatar
Hakim El Hattab committed
331
			scripts.push( 'js/reveal.min.js' );
332

333
334
335
336
337
338
			// If we're runnning the notes server we need to include some additional JS
			// TODO Is there a better way to determine if we're running the notes server?
			if( window.location.host === 'localhost:1947' ) {
				scripts.push( 'socket.io/socket.io.js' );
				scripts.push( 'plugin/speakernotes/client.js' );
			}
339

340
			// Load the scripts and, when completed, initialize reveal.js
341
			head.js.apply( null, scripts );
342
			
343
		</script>
344

Hakim El Hattab's avatar
Hakim El Hattab committed
345
	</body>
346
</html>