Mercurial > hg > Members > taiki > slides

comparison inteligent_robot/io2012slides/template.html @ 3:fea44bb81877 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
many change
author taiki
date Tue, 10 Dec 2013 15:31:33 +0900
parents
children
comparison
equal deleted inserted replaced
2:7f4128b2369a 3:fea44bb81877
1 <!--
2 Google IO 2012 HTML5 Slide Template
3
4 Authors: Eric Bidelman <ebidel@gmail.com>
5 Luke Mahé <lukem@google.com>
6
7 URL: https://code.google.com/p/io-2012-slides
8 -->
9 <!DOCTYPE html>
10 <html>
11 <head>
12 <title>Google IO 2012</title>
13 <meta charset="utf-8">
14 <meta http-equiv="X-UA-Compatible" content="chrome=1">
15 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
16 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
17 <!--This one seems to work all the time, but really small on ipad-->
18 <!--<meta name="viewport" content="initial-scale=0.4">-->
19 <meta name="apple-mobile-web-app-capable" content="yes">
20 <link rel="stylesheet" media="all" href="theme/css/default.css">
21 <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
22 <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
23 <script data-main="js/slides" src="js/require-1.0.8.min.js"></script>
24 </head>
25 <body style="opacity: 0">
26
27 <slides class="layout-widescreen">
28
29 <slide class="logoslide nobackground">
30 <article class="flexbox vcenter">
31 <span><img src="images/google_developers_logo.png"></span>
32 </article>
33 </slide>
34
35 <slide class="title-slide segue nobackground">
36 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
37 <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
38 <hgroup class="auto-fadein">
39 <h1 data-config-title><!-- populated from slide_config.json --></h1>
40 <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
41 <p data-config-presenter><!-- populated from slide_config.json --></p>
42 </hgroup>
43 </slide>
44
45 <slide>
46 <hgroup>
47 <h2>Slide with Bullets TOMATO</h2>
48 </hgroup>
49 <article>
50 <ul>
51 <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li>
52 <li>Title capitalization is title case
53 <ul>
54 <li>Subtitle capitalization is title case</li>
55 </ul>
56 </li>
57 <li>Subtitle capitalization is title case</li>
58 <li>Titles and subtitles should never have a period at the end</li>
59 </ul>
60 </article>
61 </slide>
62
63 <slide>
64 <hgroup>
65 <h2>Slide with Bullets that Build</h2>
66 <h3>Subtitle Placeholder</h3>
67 </hgroup>
68 <article>
69 <p>A list where items build:</p>
70 <ul class="build">
71 <li>Pressing 'h' highlights code snippets</li>
72 <li>Pressing 'p' toggles speaker notes (if they're on the current slide)</li>
73 <li>Pressing 'f' toggles fullscreen viewing</li>
74 <li>Pressing 'w' toggles widescreen</li>
75 <li>Pressing 'o' toggles overview mode</li>
76 <li>Pressing 'ESC' toggles off these goodies</li>
77 </ul>
78 <p>Another list, but items fade as they build:</p>
79 <ul class="build fade">
80 <li>Hover over me!</li>
81 <li>Hover over me!</li>
82 <li>Hover over me!</li>
83 </ul>
84 </article>
85 </slide>
86
87 <slide>
88 <hgroup>
89 <h2>Slide with (Smaller Font)</h2>
90 </hgroup>
91 <article class="smaller">
92 <ul>
93 <li>All <a href="http://google.com">links</a> open in new tabs.</li>
94 <li>To change that this, add <code>target="_self"</code> to the link.</li>
95 </ul>
96 </article>
97 </slide>
98
99 <slide hidden>
100 Hidden slides are left out of the presentation.
101 </slide>
102
103 <slide>
104 <hgroup>
105 <h2>Code Slide (with Subtitle Placeholder)</h2>
106 <h3>Subtitle Placeholder</h3>
107 </hgroup>
108 <article>
109 <p>Press 'h' to highlight important sections of code (wrapped in <code>&lt;b&gt;</code>).</p>
110 <pre class="prettyprint" data-lang="javascript">
111 &lt;script type='text/javascript'&gt;
112 // Say hello world until the user starts questioning
113 // the meaningfulness of their existence.
114 function helloWorld(world) {
115 <b>for (var i = 42; --i &gt;= 0;) {
116 alert('Hello ' + String(world));
117 }</b>
118 }
119 &lt;/script&gt;
120 </pre>
121 </article>
122 </slide>
123
124 <slide>
125 <hgroup>
126 <h2>Code Slide (Smaller Font)</h2>
127 </hgroup>
128 <article class="smaller">
129 <pre class="prettyprint" data-lang="javascript">
130 // Say hello world until the user starts questioning
131 // the meaningfulness of their existence.
132 function helloWorld(world) {
133 for (var i = 42; --i &gt;= 0;) {
134 alert('Hello ' + String(world));
135 }
136 }
137 </pre>
138 <pre class="prettyprint" data-lang="css">
139 &lt;style&gt;
140 p { color: pink }
141 b { color: blue }
142 &lt;/style&gt;
143 </pre>
144 <pre class="prettyprint" data-lang="html">
145 &lt;!DOCTYPE html>
146 &lt;html>
147 &lt;head>
148 &lt;title>My Awesome Page&lt;/title>
149 &lt;/head>
150 &lt;body>
151 &lt;p&gt;Hello world&lt;/p&gt;
152 &lt;body>
153 &lt;/html>
154 </pre>
155 </article>
156 </slide>
157
158 <slide>
159 <aside class="note">
160 <section>
161 <ul>
162 <li>Point I wanted to make #1</li>
163 <li>Point I wanted to make #2</li>
164 <li>Point I wanted to make #3</li>
165 <li>Example <a href="#">link</a> in notes.</li>
166 </ul>
167 <p><b>Remember to say this tag line!</b></p>
168 </section>
169 </aside>
170 <hgroup>
171 <h2>Slide with Speaker Notes</h2>
172 </hgroup>
173 <article>
174 <p>Press 'p' to toggle speaker notes.</p>
175 </article>
176 </slide>
177
178 <slide>
179 <aside class="note">
180 <section>
181 <ul>
182 <li>See this amazing link: <a href="http://www.google.com">link</a>.</li>
183 </ul>
184 <p><b>Remember to say this tag line!</b></p>
185 </section>
186 </aside>
187 <hgroup>
188 <h2>Presenter Mode</h2>
189 </hgroup>
190 <article>
191 <p>Add <code><a href="?presentme=true" target="_self">?presentme=true</a></code> to the URL to enabled presenter mode.
192 This setting is sticky, meaning refreshing the page will persist presenter
193 mode.</p>
194 <p>Hit <code><a href="?presentme=false" target="_self">?presentme=false</a></code> to disable presenter mode.</p>
195 </article>
196 </slide>
197
198 <slide>
199 <hgroup>
200 <h2>Slide with Image</h2>
201 </hgroup>
202 <article>
203 <img src="images/chart.png" class="reflect" alt="Description" title="Description">
204 <footer class="source">source: place source info here</footer>
205 </article>
206 </slide>
207
208 <slide>
209 <hgroup>
210 <h2>Slide with Image (Centered horz/vert)</h2>
211 </hgroup>
212 <article class="flexbox vcenter">
213 <img src="images/barchart.png" alt="Description" title="Description">
214 <footer class="source">source: place source info here</footer>
215 </article>
216 </slide>
217
218 <slide>
219 <hgroup>
220 <h2>Table Option A</h2>
221 <h3>Subtitle Placeholder</h3>
222 </hgroup>
223 <article>
224 <table>
225 <tr>
226 <th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
227 </tr>
228 <tr>
229 <td>Row 1</td><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td><td>placeholder</td>
230 </tr>
231 <tr>
232 <td>Row 2</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
233 </tr>
234 <tr>
235 <td>Row 3</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
236 </tr>
237 <tr>
238 <td>Row 4</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
239 </tr>
240 <tr>
241 <td>Row 5</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
242 </tr>
243 </table>
244 </article>
245 </slide>
246
247 <slide>
248 <hgroup>
249 <h2>Table Option A (Smaller Text)</h2>
250 <h3>Subtitle Placeholder</h3>
251 </hgroup>
252 <article class="smaller">
253 <table>
254 <tr>
255 <th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
256 </tr>
257 <tr>
258 <td>Row 1</td><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td><td>placeholder</td>
259 </tr>
260 <tr>
261 <td>Row 2</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
262 </tr>
263 <tr>
264 <td>Row 3</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
265 </tr>
266 <tr>
267 <td>Row 4</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
268 </tr>
269 <tr>
270 <td>Row 5</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td>
271 </tr>
272 </table>
273 </article>
274 </slide>
275
276 <slide>
277 <hgroup>
278 <h2>Table Option B</h2>
279 <h3>Subtitle Placeholder</h3>
280 </hgroup>
281 <article>
282 <table class="rows">
283 <tr>
284 <th>Header 1</th><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td>
285 </tr>
286 <tr>
287 <th>Header 2</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
288 </tr>
289 <tr>
290 <th>Header 3</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
291 </tr>
292 <tr>
293 <th>Header 4</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
294 </tr>
295 <tr>
296 <th>Header 5</th><td>placeholder</td><td>placeholder</td><td>placeholder</td>
297 </tr>
298 </table>
299 </article>
300 </slide>
301
302 <slide>
303 <hgroup>
304 <h2>Slide Styles</h2>
305 </hgroup>
306 <article class="smaller">
307 <div class="columns-2">
308 <ul>
309 <li class="red">class="red"</li>
310 <li class="red2">class="red2"</li>
311 <li class="red3">class="red3"</li>
312 <li class="blue">class="blue"</li>
313 <li class="blue2">class="blue2"</li>
314 <li class="blue3">class="blue3"</li>
315 <li class="green">class="green"</li>
316 <li class="green2">class="green2"</li>
317 </ul>
318 <ul>
319 <li class="green3">class="green3"</li>
320 <li class="yellow">class="yellow"</li>
321 <li class="yellow2">class="yellow2"</li>
322 <li class="yellow3">class="yellow3"</li>
323 <li class="gray">class="gray"</li>
324 <li class="gray2">class="gray2"</li>
325 <li class="gray3">class="gray3"</li>
326 <li class="gray4">class="gray4"</li>
327 </ul>
328 </div>
329 <div class="centered" style="margin-top:2em">
330 I am centered text with a <button>Button</button> and <button disabled>Disabled</button> button.
331 </div>
332 </article>
333 </slide>
334
335 <slide class="segue dark nobackground">
336 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
337 <hgroup class="auto-fadein">
338 <h2>Segue Slide</h2>
339 <h3>Subtitle Placeholder</h3>
340 </hgroup>
341 </slide>
342
343 <slide class="fill nobackground" style="background-image: url(images/sky.jpg)">
344 <hgroup>
345 <h2 class="white">Full Image (with Optional Header)</h2>
346 </hgroup>
347 <footer class="source white">www.flickr.com/photos/25797459@N06/5438799763/</footer>
348 </slide>
349
350 <slide class="segue dark quote nobackground">
351 <aside class="gdbar right bottom"><img src="images/google_developers_icon_128.png"></aside>
352 <article class="flexbox vleft auto-fadein">
353 <q>
354 This is an example of quote text.
355 </q>
356 <div class="author">
357 Name<br>
358 Company
359 </div>
360 </article>
361 </slide>
362
363 <slide>
364 <hgroup>
365 <h2>Slide with Iframe</h2>
366 </hgroup>
367 <article>
368 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
369 </article>
370 </slide>
371
372 <slide>
373 <article>
374 <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
375 </article>
376 </slide>
377
378 <slide class="thank-you-slide segue nobackground">
379 <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
380 <article class="flexbox vleft auto-fadein">
381 <h2>&lt;Thank You!&gt;</h2>
382 <p>Important contact information goes here.</p>
383 </article>
384 <p class="auto-fadein" data-config-contact>
385 <!-- populated from slide_config.json -->
386 </p>
387 </slide>
388
389 <slide class="logoslide dark nobackground">
390 <article class="flexbox vcenter">
391 <span><img src="images/google_developers_logo_white.png"></span>
392 </article>
393 </slide>
394
395 <slide class="backdrop"></slide>
396
397 </slides>
398
399 <script>
400 var _gaq = _gaq || [];
401 _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
402 _gaq.push(['_trackPageview']);
403
404 (function() {
405 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
406 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
407 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
408 })();
409 </script>
410
411 <!--[if IE]>
412 <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
413 <script>CFInstall.check({mode: 'overlay'});</script>
414 <![endif]-->
415 </body>
416 </html>