summaryrefslogtreecommitdiff
path: root/slides/final/template.html
diff options
context:
space:
mode:
Diffstat (limited to 'slides/final/template.html')
-rw-r--r--slides/final/template.html416
1 files changed, 416 insertions, 0 deletions
diff --git a/slides/final/template.html b/slides/final/template.html
new file mode 100644
index 0000000..64ac86c
--- /dev/null
+++ b/slides/final/template.html
@@ -0,0 +1,416 @@
1<!--
2Google IO 2012/2013 HTML5 Slide Template
3
4Authors: Eric Bidelman <ebidel@gmail.com>
5 Luke Mahé <lukem@google.com>
6
7URL: https://code.google.com/p/io-2012-slides
8-->
9<!DOCTYPE html>
10<html>
11<head>
12 <title></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.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</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.
132function 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>