Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 10.8 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
refactored folder structure, added /plugins which is initially only used by #57    
Hakim El Hattab committed
21 
		<link rel="stylesheet" href="lib/css/zenburn.css">
hakimel's avatar
ie8 support (closes #96)    
hakimel committed
22
23
24
25 

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
26
27
28
29 
	</head>
	
	<body>
Hakim El Hattab's avatar
change add .reveal class in index (closes #51)    
Hakim El Hattab committed
30 
		<div class="reveal">
Hakim El Hattab's avatar
better example of state usage    
Hakim El Hattab committed
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
initial commit  
Hakim El Hattab committed
34
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
35
36
37
38 
			<!-- 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
39 
					<h3 class="inverted">CSS 3D Presentations</h3>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
40
41 
					<script>
						// Delicously hacky. Look away.
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
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>' );
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
43
44
45 
					</script>
				</section>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
46 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
47 
					<h2>Heads Up</h2>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
48 
					<p>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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
initial commit  
Hakim El Hattab committed
54 
					</p>
Rebecca Murphey's avatar
taking a stab at a presenter notes server    
Rebecca Murphey committed
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
initial commit  
Hakim El Hattab committed
59 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
60
61 
				
				<!-- Example of nested vertical slides -->
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
62 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
70 
							<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
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>
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
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>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
88 
							<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
89
90 
						</a>
					</section>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
91 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
92
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
93 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
94
95 
					<h2>Holistic Overview</h2>
					<p>
Hakim El Hattab's avatar
merge keyboard shortcut changes    
Hakim El Hattab committed
96 
						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
97 
					</p>
Hakim El Hattab's avatar
updated copy in slides, added one that explains transitions    
Hakim El Hattab committed
98
99 
				</section>
Hakim El Hattab's avatar
comments, tweaks and a new slide highlighting mobile support    
Hakim El Hattab committed
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
initial commit  
Hakim El Hattab committed
107 
				<section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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
initial commit  
Hakim El Hattab committed
115
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
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>
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
125
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
126
127
128 
				<section data-markdown>
					## Markdown support
Hakim El Hattab's avatar
modified data-markdown to support markdown indented with tabs    
Hakim El Hattab committed
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).
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
131
132
133 

					<pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt;
  ## Markdown support
Hakim El Hattab's avatar
update markdown code example to correctly reflect line breaks    
Hakim El Hattab committed
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).
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
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>
Hakim El Hattab's avatar
better example of state usage    
Hakim El Hattab committed
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>
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
178
179 
				</section>
andy matthews's avatar
Adding example for custom event binding.    
andy matthews committed
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>
Hakim El Hattab's avatar
'slidechanged' event, added Reveal.addEventListener/Reveal.removeEventListener api methods    
Hakim El Hattab committed
185 
					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
Hakim El Hattab's avatar
add beige theme, move theme class from .reveal to document element, use log...    
Hakim El Hattab committed
186 
	console.log( '"customevent" has fired' );
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
187
188 
} );
					</code></pre>
andy matthews's avatar
Adding example for custom event binding.    
andy matthews committed
189
190 
				</section>
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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>
Hakim El Hattab's avatar
minor style or wording tweaks    
Hakim El Hattab committed
206 
function linkify( selector ) {
Hakim El Hattab's avatar
larger font for code samples (closes #60)    
Hakim El Hattab committed
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';
      }
    };
  }
Hakim El Hattab's avatar
minor style or wording tweaks    
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 
					</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
231
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
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">
Hakim El Hattab's avatar
moved inline base64 images to aws    
Hakim El Hattab committed
246 
						<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
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>
Hakim El Hattab's avatar
clean up initialization, conditionally load classList polyfill prior to reveal.js    
Hakim El Hattab committed
273 
			<!-- Presentation progress bar -->
Hakim El Hattab's avatar
major, non backwards compatible, restructuring of DOM tree    
Hakim El Hattab committed
274 
			<div class="progress"><span></span></div>
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
275
276 
			
		</div>
Hakim El Hattab's avatar
classList polyfill included for ie9    
Hakim El Hattab committed
277
Hakim El Hattab's avatar
refactored folder structure, added /plugins which is initially only used by #57    
Hakim El Hattab committed
278 
		<script src="lib/js/head.min.js"></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
279
Hakim El Hattab's avatar
renamed to reveal.js, many new features, and upgraded to v1.0    
Hakim El Hattab committed
280 
		<script>
hakimel's avatar
disable 3d links in ie, reorder script loading in index for readability (closes #95)    
hakimel committed
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(); 
				} );

			} );
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
311 
			// Scripts that should be loaded before initializing
Hakim El Hattab's avatar
support for data-markdown (#15)    
Hakim El Hattab committed
312
313
314
315 
			var scripts = [];

			// If the browser doesn't support classList, load a polyfill
			if( !document.body.classList ) {
hakimel's avatar
disable 3d links in ie, reorder script loading in index for readability (closes #95)    
hakimel committed
316 
				head.js( 'lib/js/classList.js' );
Hakim El Hattab's avatar
support for data-markdown (#15)    
Hakim El Hattab committed
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' );
			}
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
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' );
			}
Hakim El Hattab's avatar
support for data-markdown (#15)    
Hakim El Hattab committed
331
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
332 
			scripts.push( 'js/reveal.js' );
Hakim El Hattab's avatar
clean up initialization, conditionally load classList polyfill prior to reveal.js    
Hakim El Hattab committed
333
Hakim El Hattab's avatar
added slide announcing markdown support (#15)    
Hakim El Hattab committed
334 
			// Load the scripts and, when completed, initialize reveal.js
hakimel's avatar
disable 3d links in ie, reorder script loading in index for readability (closes #95)    
hakimel committed
335 
			head.js.apply( null, scripts );
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
336
Hakim El Hattab's avatar
conditional loading of socket.io and the notes client js based on window host    
Hakim El Hattab committed
337 
		</script>
Hakim El Hattab's avatar
modified data-markdown to support markdown indented with tabs    
Hakim El Hattab committed
338
Hakim El Hattab's avatar
initial commit  
Hakim El Hattab committed
339
340 
	</body>
</html>