Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 10.6 KB
Newer Older
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
1
2
3
4
5
6 
<!doctype html>  
<html lang="en">
	
	<head>
		<meta charset="utf-8">
Hakim El Hattab's avatar
conditional loading of socket.io and the notes client js based on window host    
Hakim El Hattab committed
7 
		<title>reveal.js - HTML5 Presentations</title>
Hakim El Hattab's avatar
browser history updates can now be disabled via config    
Hakim El Hattab committed
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">
Hakim El Hattab's avatar
hide address bar in mobile browsers, add apple web app meta    
Hakim El Hattab committed
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
initial commit  
Hakim El Hattab committed
14
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
15 
		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Hakim El Hattab's avatar
initial commit  
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
print styles (closes #19)    
Hakim El Hattab committed
19 
		<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
20
Hakim El Hattab's avatar
/lib restructuring    
Hakim El Hattab committed
21 
		<link rel="stylesheet" href="lib/highlight/zenburn.css">
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
22
23
24
25 
	</head>
	
	<body>
Hakim El Hattab's avatar
change add .reveal class in index (closes #51)    
Hakim El Hattab committed
26 
		<div class="reveal">
Hakim El Hattab's avatar
better example of state usage    
Hakim El Hattab committed
27
28
29 

			<!-- Used to fade in a background when a specific slide state is reached -->
			<div class="state-background"></div>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
30
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
31
32
33
34 
			<!-- 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
minor style or wording tweaks    
Hakim El Hattab committed
35 
					<h3 class="inverted">CSS 3D Presentations</h3>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
36
37 
					<script>
						// Delicously hacky. Look away.
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
38 
						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>' );
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
39
40
41 
					</script>
				</section>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
42 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
43 
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
44 
					<p>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
45
46
47
48
49 
						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
initial commit  
Hakim El Hattab committed
50 
					</p>
Rebecca Murphey's avatar
taking a stab at a presenter notes server    
Rebecca Murphey committed
51
52
53
54 

					<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
initial commit  
Hakim El Hattab committed
55 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
56
57 
				
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
58 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
59
60
61
62
63
64
65 
					<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">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
66 
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
67
68
69
70
71
72
73
74
75 
						</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>
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
76
77
78 
						<a class="test" href="http://cornify.com">
							<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
						</a>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
79
80
81
82
83 
					</section>
					<section>
						<h2>Basement Level 3</h2>
						<p>That's it, time to go back up.</p>
						<a href="#/2" class="image">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
84 
							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
85
86 
						</a>
					</section>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
87 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
88
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
89 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
90
91 
					<h2>Holistic Overview</h2>
					<p>
Hakim El Hattab's avatar
merge keyboard shortcut changes    
Hakim El Hattab committed
92 
						Press <strong>ESC</strong> to enter the slide overview!
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
93 
					</p>
Hakim El Hattab's avatar
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
94
95 
				</section>
Hakim El Hattab's avatar
comments, tweaks and a new slide highlighting mobile support    
Hakim El Hattab committed
96
97
98
99
100
101
102 
				<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
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
103
104 
				<section>
					<h2>Transition Styles</h2>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
105 
					<p>
Hakim El Hattab's avatar
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
106 
						You can select from different transitions, like:
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
107 
					</p>
Hakim El Hattab's avatar
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
108
109
110
111 
					<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>
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
112 
						<li><a href="http://lab.hakim.se/reveal-js/?transition=linear">Linear</a></li>
Hakim El Hattab's avatar
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
113 
					</ul>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
114 
				</section>
Hakim El Hattab's avatar
now capturing data-state on slides and lifting it to document element classList when slide is open    
Hakim El Hattab committed
115
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
116 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
117
118
119
120
121
122
123 
					<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
initial commit  
Hakim El Hattab committed
124
125 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
126
127
128
129
130
131
132
133 
				<section>
					<h2>Fantastic Ordered List</h2>
					<ol>
						<li>One is smaller than...</li>
						<li>Two is smaller than...</li>
						<li>Three!</li>
					</ol>
				</section>
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
134
Hakim El Hattab's avatar
better example of state usage    
Hakim El Hattab committed
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158 
				<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>
Hakim El Hattab's avatar
now capturing data-state on slides and lifting it to document element classList when slide is open    
Hakim El Hattab committed
159
160 
				</section>
andy matthews's avatar
Adding example for custom event binding.    
andy matthews committed
161
162
163
164
165 
				<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>
Hakim El Hattab's avatar
'slidechanged' event, added Reveal.addEventListener/Reveal.removeEventListener api methods    
Hakim El Hattab committed
166 
					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
167
168
169 
	alert( '"customevent" has fired' );
} );
					</code></pre>
andy matthews's avatar
Adding example for custom event binding.    
andy matthews committed
170
171 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186 
				<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>
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
187
188
189 
var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
				document.body.style['MozPerspective'] !== undefined ||
				document.body.style['perspective'] !== undefined;
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
190
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
191
192
193
194 
function linkify( selector ) {
    if( supports3DTransforms ) {
        
        var nodes = document.querySelectorAll( selector );
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
195
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
196
197 
        for( var i = 0, len = nodes.length; i < len; i++ ) {
            var node = nodes[i];
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
198
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
199
200
201
202
203
204
205 
            if( !node.className || !node.className.match( /roll/g ) ) {
                node.className += ' roll';
                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
            }
        };
    }
}
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
206
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
207 
linkify( 'a' );
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
208
209
210
211
212
213
214
215
216
217
218 
					</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>
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
219
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
220
221
222
223
224
225
226
227
228
229
230
231
232
233 
				<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">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
234 
						<img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png">
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262 
					</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>

			<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
			<div class="progress"><span></span></div>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
263
264 
			
		</div>
Hakim El Hattab's avatar
classList polyfill included for ie9    
Hakim El Hattab committed
265
266 

		<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
267
268 
		<script src="lib/head/head.min.js"></script>
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
269 
		<script>
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
270
271
272
273 
			// Load the main reveal.js script
			head.js( 'js/reveal.js', function() {
				// Parse the query string into a key/value object
				var query = {};
Rebecca Murphey's avatar
taking a stab at a presenter notes server    
Rebecca Murphey committed
274
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
275
276
277 
				location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
					query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
				} );
Hakim El Hattab's avatar
added new transitions (box/page) and a ui theme (neon)    
Hakim El Hattab committed
278
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
279
280
281
282 
				// Fires when a slide with data-state=customevent is activated
				Reveal.addEventListener( 'customevent', function() {
					alert( '"customevent" has fired' );
				} );
andy matthews's avatar
Adding example for custom event binding.    
andy matthews committed
283
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
284
285
286
287 
				// Fires each time a new slide is activated
				Reveal.addEventListener( 'slidechanged', function( event ) {
					// event.previousSlide, event.currentSlide, event.indexh, event.indexv
				} );
Hakim El Hattab's avatar
'slidechanged' event, added Reveal.addEventListener/Reveal.removeEventListener api methods    
Hakim El Hattab committed
288
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
289
290
291 
				Reveal.initialize({
					// Display controls in the bottom right corner
					controls: true,
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
292
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
293
294 
					// Display a presentation progress bar
					progress: true,
Hakim El Hattab's avatar
added optional presentation progress bar    
Hakim El Hattab committed
295
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
296
297 
					// If true; each slide will be pushed to the browser history
					history: true,
Hakim El Hattab's avatar
browser history updates can now be disabled via config    
Hakim El Hattab committed
298
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
299
300 
					// Loops the presentation, defaults to false
					loop: false,
Hakim El Hattab's avatar
added support for looped presentations    
Hakim El Hattab committed
301
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
302
303 
					// Flags if mouse wheel navigation should be enabled
					mouseWheel: true,
Hakim El Hattab's avatar
tweaked mouse wheel navigation    
Hakim El Hattab committed
304
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
305
306 
					// Apply a 3D roll to links on hover
					rollingLinks: true,
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
307
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
308
309 
					// UI style
					theme: query.theme || 'default', // default/neon
Hakim El Hattab's avatar
added new transitions (box/page) and a ui theme (neon)    
Hakim El Hattab committed
310
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
311
312
313
314
315
316
317
318
319
320 
					// Transition style
					transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
				});
			} );
			
			// Load third party scripts
			head.js( 'lib/highlight/highlight.js', 'lib/polyfills/classList.js', function() {
				// Fire off syntax highlighting for potential code samples in the slides
				hljs.initHighlightingOnLoad();
			} );
Hakim El Hattab's avatar
tweaked mouse wheel navigation    
Hakim El Hattab committed
321
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
322 
			// If we're runnning the notes server we need to include some additional JS
Hakim El Hattab's avatar
conditional loading of socket.io and the notes client js based on window host    
Hakim El Hattab committed
323 
			if( window.location.host === 'localhost:1947' ) {
Hakim El Hattab's avatar
use head.js to script load everything, fixes bug with inclusion of notes server js #57    
Hakim El Hattab committed
324 
				head.js( 'socket.io/socket.io.js', 'lib/slidenotes/client.js' );
Hakim El Hattab's avatar
conditional loading of socket.io and the notes client js based on window host    
Hakim El Hattab committed
325
326
327 
			}
		</script>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
328
329 
	</body>
</html>