aboutsummaryrefslogtreecommitdiff
path: root/template.html
diff options
context:
space:
mode:
Diffstat (limited to 'template.html')
-rw-r--r--template.html899
1 files changed, 528 insertions, 371 deletions
diff --git a/template.html b/template.html
index 64ac86c..3f8a487 100644
--- a/template.html
+++ b/template.html
@@ -2,112 +2,155 @@
2Google IO 2012/2013 HTML5 Slide Template 2Google IO 2012/2013 HTML5 Slide Template
3 3
4Authors: Eric Bidelman <ebidel@gmail.com> 4Authors: Eric Bidelman <ebidel@gmail.com>
5 Luke Mahé <lukem@google.com> 5Luke Mahé <lukem@google.com>
6 6
7URL: https://code.google.com/p/io-2012-slides 7URL: https://code.google.com/p/io-2012-slides
8--> 8-->
9<!DOCTYPE html> 9<!DOCTYPE html>
10<html> 10<html>
11<head> 11 <head>
12 <title></title> 12 <title></title>
13 <meta charset="utf-8"> 13 <meta charset="utf-8">
14 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 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">--> 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">--> 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--> 17 <!--This one seems to work all the time, but really small on ipad-->
18 <!--<meta name="viewport" content="initial-scale=0.4">--> 18 <!--<meta name="viewport" content="initial-scale=0.4">-->
19 <meta name="apple-mobile-web-app-capable" content="yes"> 19 <meta name="apple-mobile-web-app-capable" content="yes">
20 <link rel="stylesheet" media="all" href="theme/css/default.css"> 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"> 21 <link rel="stylesheet" media="only screen and (max-device-width: 480px)"
22 <base target="_blank"> <!-- This amazingness opens all links in a new tab. --> 22 href="theme/css/phone.css">
23 <script data-main="js/slides" src="js/require.js"></script> 23 <base target="_blank">
24</head> 24 <!-- This amazingness opens all links in a new tab. -->
25<body style="opacity: 0"> 25 <script data-main="js/slides" src="js/require.js"></script>
26 </head>
27 <body style="opacity: 0">
26 28
27<slides class="layout-widescreen"> 29 <slides class="layout-widescreen">
28 30 <slide
29 <slide class="logoslide nobackground"> 31 class="logoslide nobackground">
30 <article class="flexbox vcenter"> 32 <article class="flexbox vcenter">
31 <span><img src="images/google_developers_logo.png"></span> 33 <span><img src="images/google_developers_logo.png"></span>
32 </article> 34 </article>
33 </slide> 35 </slide>
34 36 <slide class="title-slide segue nobackground">
35 <slide class="title-slide segue nobackground"> 37 <aside class="gdbar">
36 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> 38 <img src="images/google_developers_icon_128.png">
37 <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> 39 </aside>
38 <hgroup class="auto-fadein"> 40 <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
39 <h1 data-config-title><!-- populated from slide_config.json --></h1> 41 <hgroup class="auto-fadein">
40 <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> 42 <h1 data-config-title><!-- populated from slide_config.json --></h1>
41 <p data-config-presenter><!-- populated from slide_config.json --></p> 43 <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
42 </hgroup> 44 <p data-config-presenter>
43 </slide> 45 <!-- populated from slide_config.json -->
44 46 </p>
45 <slide> 47 </hgroup>
46 <hgroup> 48 </slide>
47 <h2>Slide with Bullets</h2> 49 <slide>
48 </hgroup> 50 <hgroup>
49 <article> 51 <h2>Slide with Bullets</h2>
50 <ul> 52 </hgroup>
51 <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> 53 <article>
52 <li>Title capitalization is title case 54 <ul>
53 <ul> 55 <li>
54 <li>Subtitle capitalization is title case</li> 56 Titles are formatted as Open Sans with bold applied and font size is
55 </ul> 57 set at 45
56 </li> 58 </li>
57 <li>Subtitle capitalization is title case</li> 59 <li>
58 <li>Titles and subtitles should never have a period at the end</li> 60 Title capitalization is title case
59 </ul> 61 <ul>
60 </article> 62 <li>
61 </slide> 63 Subtitle capitalization is title case
62 64 </li>
63 <slide> 65 </ul>
64 <hgroup> 66 </li>
65 <h2>Slide with Bullets that Build</h2> 67 <li>
66 <h3>Subtitle Placeholder</h3> 68 Subtitle capitalization is title case
67 </hgroup> 69 </li>
68 <article> 70 <li>
69 <p>A list where items build:</p> 71 Titles and subtitles should never have a period at the end
70 <ul class="build"> 72 </li>
71 <li>Pressing 'h' highlights code snippets</li> 73 </ul>
72 <li>Pressing 'p' toggles speaker notes (if they're on the current slide)</li> 74 </article>
73 <li>Pressing 'f' toggles fullscreen viewing</li> 75 </slide>
74 <li>Pressing 'w' toggles widescreen</li> 76 <slide>
75 <li>Pressing 'o' toggles overview mode</li> 77 <hgroup>
76 <li>Pressing 'ESC' toggles off these goodies</li> 78 <h2>Slide with Bullets that Build</h2>
77 </ul> 79 <h3>Subtitle Placeholder</h3>
78 <p>Another list, but items fade as they build:</p> 80 </hgroup>
79 <ul class="build fade"> 81 <article>
80 <li>Hover over me!</li> 82 <p>
81 <li>Hover over me!</li> 83 A list where items build:
82 <li>Hover over me!</li> 84 </p>
83 </ul> 85 <ul class="build">
84 </article> 86 <li>
85 </slide> 87 Pressing 'h' highlights code snippets
86 88 </li>
87 <slide> 89 <li>
88 <hgroup> 90 Pressing 'p' toggles speaker notes (if they're on the current slide)
89 <h2>Slide with (Smaller Font)</h2> 91 </li>
90 </hgroup> 92 <li>
91 <article class="smaller"> 93 Pressing 'f' toggles fullscreen viewing
92 <ul> 94 </li>
93 <li>All <a href="http://google.com">links</a> open in new tabs.</li> 95 <li>
94 <li>To change that this, add <code>target="_self"</code> to the link.</li> 96 Pressing 'w' toggles widescreen
95 </ul> 97 </li>
96 </article> 98 <li>
97 </slide> 99 Pressing 'o' toggles overview mode
98 100 </li>
99 <slide hidden> 101 <li>
100 Hidden slides are left out of the presentation. 102 Pressing 'ESC' toggles off these goodies
101 </slide> 103 </li>
102 104 </ul>
103 <slide> 105 <p>
104 <hgroup> 106 Another list, but items fade as they build:
105 <h2>Code Slide (with Subtitle Placeholder)</h2> 107 </p>
106 <h3>Subtitle Placeholder</h3> 108 <ul class="build fade">
107 </hgroup> 109 <li>
108 <article> 110 Hover over me!
109 <p>Press 'h' to highlight important sections of code (wrapped in <code>&lt;b&gt;</code>).</p> 111 </li>
110 <pre class="prettyprint" data-lang="javascript"> 112 <li>
113 Hover over me!
114 </li>
115 <li>
116 Hover over me!
117 </li>
118 </ul>
119 </article>
120 </slide>
121 <slide>
122 <hgroup>
123 <h2>Slide with (Smaller Font)</h2>
124 </hgroup>
125 <article class="smaller">
126 <ul>
127 <li>
128 All <a href="http://google.com">links</a> open in new tabs.
129 </li>
130 <li>
131 To change that this, add <code>
132 target="_self"</code>
133 to the link.
134 </li>
135 </ul>
136 </article>
137 </slide>
138 <slide hidden>
139 Hidden slides are left out of the presentation.
140 </slide>
141 <slide>
142 <hgroup>
143 <h2>Code Slide (with Subtitle Placeholder)</h2>
144 <h3>Subtitle Placeholder</h3>
145 </hgroup>
146 <article>
147 <p>
148 Press 'h' to highlight important sections of code (wrapped in
149 <code>
150 &lt;b&gt;</code>
151 ).
152 </p>
153 <pre class="prettyprint" data-lang="javascript">
111&lt;script type='text/javascript'&gt; 154&lt;script type='text/javascript'&gt;
112 // Say hello world until the user starts questioning 155 // Say hello world until the user starts questioning
113 // the meaningfulness of their existence. 156 // the meaningfulness of their existence.
@@ -118,15 +161,14 @@ URL: https://code.google.com/p/io-2012-slides
118 } 161 }
119&lt;/script&gt; 162&lt;/script&gt;
120</pre> 163</pre>
121 </article> 164 </article>
122 </slide> 165 </slide>
123 166 <slide>
124 <slide> 167 <hgroup>
125 <hgroup> 168 <h2>Code Slide (Smaller Font)</h2>
126 <h2>Code Slide (Smaller Font)</h2> 169 </hgroup>
127 </hgroup> 170 <article class="smaller">
128 <article class="smaller"> 171 <pre class="prettyprint" data-lang="javascript">
129 <pre class="prettyprint" data-lang="javascript">