index.html 10.8 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
10

		<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
		<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
18
		
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/main.css">
Hakim El Hattab's avatar
Hakim El Hattab committed
19
		<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
20

21
		<link rel="stylesheet" href="lib/css/zenburn.css">
hakimel's avatar
hakimel committed
22
23
24
25

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
Hakim El Hattab committed
26
27
28
29
	</head>
	
	<body>
		
30
		<div class="reveal">
31
32
33

			<!-- 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
34
			
35
36
37
38
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Reveal.js</h1>
39
					<h3 class="inverted">CSS 3D Presentations</h3>
40
41
					<script>
						// Delicously hacky. Look away.
42
						if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
43
44
45
					</script>
				</section>
				
Hakim El Hattab's avatar
Hakim El Hattab committed
46
				<section>
47
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
Hakim El Hattab committed
48
					<p>
49
50
51
52
53
						reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with 
						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
54
					</p>
55
56
57
58

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

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

100
101
102
103
104
105
106
				<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
107
				<section>
108
109
110
111
112
113
114
					<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
115
116
				</section>
				
117
118
119
120
121
122
123
124
				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>
125

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

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

  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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
&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>

154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
				<section>
					<section data-state="alert">
						<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 let's you
							apply broader style changes, like switching the background.
						</p>
						<a href="#/7/1" class="image">
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
						</a>
					</section>
					<section data-state="blackout">
						<h2>"blackout"</h2>
						<a href="#/7/2" class="image">
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
						</a>
					</section>
					<section data-state="soothe">
						<h2>"soothe"</h2>
						<a href="#/7/0" class="image">
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
						</a>
					</section>
178
179
				</section>

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

191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
				<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>
206
function linkify( selector ) {
207
208
209
210
211
212
213
214
215
216
217
218
  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';
      }
    };
  }
219
}
220
221
222
223
224
225
226
227
228
229
230
					</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>
						You can link between slides internally,<br/>
						<a href="#/2/3">like this</a>.
					</p>
				</section>
231

232
233
234
235
236
237
238
239
240
241
242
243
244
245
				<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">
246
						<img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png">
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
					</a>
				</section>
				
				<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>
					<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
				</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>

273
			<!-- Presentation progress bar -->
274
			<div class="progress"><span></span></div>
Hakim El Hattab's avatar
Hakim El Hattab committed
275
276
			
		</div>
277

278
		<script src="lib/js/head.min.js"></script>
279

280
		<script>
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
			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,
					
					theme: Reveal.getQueryHash().theme || 'default', // default/neon/beige
					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(); 
				} );

			} );

311
			// Scripts that should be loaded before initializing
312
313
314
315
			var scripts = [];

			// If the browser doesn't support classList, load a polyfill
			if( !document.body.classList ) {
316
				head.js( 'lib/js/classList.js' );
317
318
319
320
321
322
323
324
			}

			// 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' );
			}

325
326
327
328
329
330
			// 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' );
			}
331

332
			scripts.push( 'js/reveal.js' );
333

334
			// Load the scripts and, when completed, initialize reveal.js
335
			head.js.apply( null, scripts );
336
			
337
		</script>
338

Hakim El Hattab's avatar
Hakim El Hattab committed
339
340
	</body>
</html>