Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / be89cae9c7060c2aa125b10cc6d37578c426fb69 / . / inst / rmarkdown / templates / revealjs_presentation / index.html
blob: 5b631e92f94938efa8f4f9622c795d4daf349494 [file] [log] [blame]
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
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 <meta name="apple-mobile-web-app-capable" content="yes" />
13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
14
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]16
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]17 <link rel="stylesheet" href="css/reveal.css">
18 <link rel="stylesheet" href="css/theme/black.css" id="theme">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]19
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]20 <!-- Code syntax highlighting -->
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]21 <link rel="stylesheet" href="lib/css/zenburn.css">
22
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]23 <!-- Printing and PDF exports -->
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]24 <script>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]25 var link = document.createElement( 'link' );
26 link.rel = 'stylesheet';
27 link.type = 'text/css';
28 link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
29 document.getElementsByTagName( 'head' )[0].appendChild( link );
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]30 </script>
31
32 <!--[if lt IE 9]>
33 <script src="lib/js/html5shiv.js"></script>
34 <![endif]-->
35 </head>
36
37 <body>
38
39 <div class="reveal">
40
41 <!-- Any section element inside of this container is displayed as a slide -->
42 <div class="slides">
43 <section>
44 <h1>Reveal.js</h1>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]45 <h3>The HTML Presentation Framework</h3>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]46 <p>
47 <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
48 </p>
49 </section>
50
51 <section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]52 <h2>Hello There</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]53 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]54 reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]55 </p>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]56 </section>
57
58 <!-- Example of nested vertical slides -->
59 <section>
60 <section>
61 <h2>Vertical Slides</h2>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]62 <p>Slides can be nested inside of each other.</p>
63 <p>Use the <em>Space</em> key to navigate through all slides.</p>
64 <br>
65 <a href="#" class="navigate-down">
66 <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]67 </a>
68 </section>
69 <section>
70 <h2>Basement Level 1</h2>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]71 <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]72 </section>
73 <section>
74 <h2>Basement Level 2</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]75 <p>That's it, time to go back up.</p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]76 <br>
77 <a href="#/2">
78 <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]79 </a>
80 </section>
81 </section>
82
83 <section>
84 <h2>Slides</h2>
85 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]86 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]87 </p>
88 </section>
89
90 <section>
91 <h2>Point of View</h2>
92 <p>
93 Press <strong>ESC</strong> to enter the slide overview.
94 </p>
95 <p>
96 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.
97 </p>
98 </section>
99
100 <section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]101 <h2>Touch Optimized</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]102 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]103 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]104 </p>
105 </section>
106
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]107 <section data-markdown>
108 <script type="text/template">
109 ## Markdown support
110
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]111 Write content using inline or external Markdown.
112 Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]113
114 ```
115 <section data-markdown>
116 ## Markdown support
117
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]118 Write content using inline or external Markdown.
119 Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]120 </section>
121 ```
122 </script>
123 </section>
124
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]125 <section>
126 <section id="fragments">
127 <h2>Fragments</h2>
128 <p>Hit the next arrow...</p>
129 <p class="fragment">... to step through ...</p>
130 <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
131
132 <aside class="notes">
133 This slide has fragments which are also stepped through in the notes window.
134 </aside>
135 </section>
136 <section>
137 <h2>Fragment Styles</h2>
138 <p>There's different types of fragments, like:</p>
139 <p class="fragment grow">grow</p>
140 <p class="fragment shrink">shrink</p>
141 <p class="fragment roll-in">roll-in</p>
142 <p class="fragment fade-out">fade-out</p>
143 <p class="fragment current-visible">current-visible</p>
144 <p class="fragment highlight-red">highlight-red</p>
145 <p class="fragment highlight-blue">highlight-blue</p>
146 </section>
147 </section>
148
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]149 <section id="transitions">
150 <h2>Transition Styles</h2>
151 <p>
152 You can select from different transitions, like: <br>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]153 <a href="?transition=none#/transitions">None</a> -
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]154 <a href="?transition=fade#/transitions">Fade</a> -
155 <a href="?transition=slide#/transitions">Slide</a> -
156 <a href="?transition=convex#/transitions">Convex</a> -
157 <a href="?transition=concave#/transitions">Concave</a> -
158 <a href="?transition=zoom#/transitions">Zoom</a>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]159 </p>
160 </section>
161
162 <section id="themes">
163 <h2>Themes</h2>
164 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]165 reveal.js comes with a few themes built in: <br>
166 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
167 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
168 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
169 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
170 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
171 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
172 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
173 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
174 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
175 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
176 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]177 </p>
178 </section>
179
180 <section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]181 <section data-background="#dddddd">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]182 <h2>Slide Backgrounds</h2>
183 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]184 Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]185 </p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]186 <a href="#" class="navigate-down">
187 <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]188 </a>
189 </section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]190 <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]191 <h2>Image Backgrounds</h2>
192 <pre><code>&lt;section data-background="image.png"&gt;</code></pre>
193 </section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]194 <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
195 <h2>Tiled Backgrounds</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]196 <pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
197 </section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]198 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
199 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
200 <h2>Video Backgrounds</h2>
201 <pre><code style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
202 </div>
203 </section>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]204 </section>
205
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]206 <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]207 <h2>Background Transitions</h2>
208 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]209 Different background transitions are available via the backgroundTransition option. This one's called "zoom".
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]210 </p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]211 <pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]212 </section>
213
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]214 <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
215 <h2>Background Transitions</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]216 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]217 You can override background transitions per-slide.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]218 </p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]219 <pre><code style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]220 </section>
221
222 <section>
223 <h2>Pretty Code</h2>
224 <pre><code data-trim contenteditable>
225function linkify( selector ) {
226 if( supports3DTransforms ) {
227
228 var nodes = document.querySelectorAll( selector );
229
230 for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
231 var node = nodes[i];
232
233 if( !node.className ) {
234 node.className += ' roll';
235 }
236 }
237 }
238}
239 </code></pre>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]240 <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
241 </section>
242
243 <section>
244 <h2>Marvelous List</h2>
245 <ul>
246 <li>No order here</li>
247 <li>Or here</li>
248 <li>Or here</li>
249 <li>Or here</li>
250 </ul>
251 </section>
252
253 <section>
254 <h2>Fantastic Ordered List</h2>
255 <ol>
256 <li>One is smaller than...</li>
257 <li>Two is smaller than...</li>
258 <li>Three!</li>
259 </ol>
260 </section>
261
262 <section>
263 <h2>Tabular Tables</h2>
264 <table>
265 <thead>
266 <tr>
267 <th>Item</th>
268 <th>Value</th>
269 <th>Quantity</th>
270 </tr>
271 </thead>
272 <tbody>
273 <tr>
274 <td>Apples</td>
275 <td>$1</td>
276 <td>7</td>
277 <tr>
278 <tr>
279 <td>Lemonade</td>
280 <td>$2</td>
281 <td>18</td>
282 <tr>
283 <tr>
284 <td>Bread</td>
285 <td>$3</td>
286 <td>2</td>
287 <tr>
288 </tbody>
289 </table>
290 </section>
291
292 <section>
293 <h2>Clever Quotes</h2>
294 <p>
295 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
296 &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
297 </p>
298 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
299 &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
300 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
301 </blockquote>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]302 </section>
303
304 <section>
305 <h2>Intergalactic Interconnections</h2>
306 <p>
307 You can link between slides internally,
308 <a href="#/2/3">like this</a>.
309 </p>
310 </section>
311
312 <section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]313 <h2>Speaker View</h2>
314 <p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
315 <p>Press the <em>S</em> key to try it out.</p>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]316
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]317 <aside class="notes">
318 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
319 </aside>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]320 </section>
321
322 <section>
323 <h2>Export to PDF</h2>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]324 <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
325 <iframe src="//www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
326 </section>
327
328 <section>
329 <h2>Global State</h2>
330 <p>
331 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
332 will be added as a class to the document element when the slide is open. This lets you
333 apply broader style changes, like switching the page background.
334 </p>
335 </section>
336
337 <section data-state="customevent">
338 <h2>State Events</h2>
339 <p>
340 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
341 </p>
342 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
343Reveal.addEventListener( 'customevent', function() {
344 console.log( '"customevent" has fired' );
345} );
346 </code></pre>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]347 </section>
348
349 <section>
350 <h2>Take a Moment</h2>
351 <p>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]352 Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]353 </p>
354 </section>
355
356 <section>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]357 <h2>Much more</h2>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]358 <ul>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]359 <li>Right-to-left support</li>
360 <li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
361 <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
362 <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
363 <li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]364 </ul>
365 </section>
366
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]367 <section style="text-align: left;">
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]368 <h1>THE END</h1>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]369 <p>
370 - <a href="http://slides.com">Try the online editor</a> <br>
371 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
372 </p>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]373 </section>
374
375 </div>
376
377 </div>
378
379 <script src="lib/js/head.min.js"></script>
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]380 <script src="js/reveal.js"></script>
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]381
382 <script>
383
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]384 // Full list of configuration options available at:
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]385 // https://github.com/hakimel/reveal.js#configuration
386 Reveal.initialize({
387 controls: true,
388 progress: true,
389 history: true,
390 center: true,
391
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]392 transition: 'slide', // none/fade/slide/convex/concave/zoom
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]393
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]394 // Optional reveal.js plugins
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]395 dependencies: [
396 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
397 { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
398 { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
timelyportfoliobbdec0b2015-03-05 08:51:24 -0600[diff] [blame]399 { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
400 { src: 'plugin/zoom-js/zoom.js', async: true },
401 { src: 'plugin/notes/notes.js', async: true }
JJ Allaire2ec40242014-09-15 09:18:39 -0400[diff] [blame]402 ]
403 });
404
405 </script>
406
407 </body>
408</html>