<!-- Google IO 2012/2013 HTML5 Slide Template Authors: Eric Bidelman <ebidel@gmail.com> Luke Mahé <lukem@google.com> URL: https://code.google.com/p/io-2012-slides --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">--> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--> <!--This one seems to work all the time, but really small on ipad--> <!--<meta name="viewport" content="initial-scale=0.4">--> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" media="all" href="theme/css/default.css"> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css"> <base target="_blank"> <!-- This amazingness opens all links in a new tab. --> <script data-main="js/slides" src="js/require.js"></script> </head> <body style="opacity: 0"> <slides class="layout-widescreen"> <slide class="logoslide nobackground"> <article class="flexbox vcenter"> <span><img src="images/google_developers_logo.png"></span> </article> </slide> <slide class="title-slide segue nobackground"> <aside class="gdbar"> <img src="images/google_developers_icon_128.png"> </aside> <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> <hgroup class="auto-fadein"> <h1 data-config-title><!-- populated from slide_config.json --></h1> <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> <p data-config-presenter> <!-- populated from slide_config.json --> </p> </hgroup> </slide> <slide> <hgroup> <h2>Slide with Bullets</h2> </hgroup> <article> <ul> <li> Titles are formatted as Open Sans with bold applied and font size is set at 45 </li> <li> Title capitalization is title case <ul> <li> Subtitle capitalization is title case </li> </ul> </li> <li> Subtitle capitalization is title case </li> <li> Titles and subtitles should never have a period at the end </li> </ul> </article> </slide> <slide> <hgroup> <h2>Slide with Bullets that Build</h2> <h3>Subtitle Placeholder</h3> </hgroup> <article> <p> A list where items build: </p> <ul class="build"> <li> Pressing 'h' highlights code snippets </li> <li> Pressing 'p' toggles speaker notes (if they're on the current slide) </li> <li> Pressing 'f' toggles fullscreen viewing </li> <li> Pressing 'w' toggles widescreen </li> <li> Pressing 'o' toggles overview mode </li> <li> Pressing 'ESC' toggles off these goodies </li> </ul> <p> Another list, but items fade as they build: </p> <ul class="build fade"> <li> Hover over me! </li> <li> Hover over me! </li> <li> Hover over me! </li> </ul> </article> </slide> <slide> <hgroup> <h2>Slide with (Smaller Font)</h2> </hgroup> <article class="smaller"> <ul> <li> All <a href="http://google.com">links</a> open in new tabs. </li> <li> To change that this, add <code> target="_self"</code> to the link. </li> </ul> </article> </slide> <slide hidden> Hidden slides are left out of the presentation. </slide> <slide> <hgroup> <h2>Code Slide (with Subtitle Placeholder)</h2> <h3>Subtitle Placeholder</h3> </hgroup> <article> <p> Press 'h' to highlight important sections of code (wrapped in <code> <b></code> ). </p> <pre class="prettyprint" data-lang="javascript"> <script type='text/javascript'> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { <b>for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); }</b> } </script> </pre> </article> </slide> <slide> <hgroup> <h2>Code Slide (Smaller Font)</h2> </hgroup> <article class="smaller"> <pre class="prettyprint" data-lang="javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </pre> <pre class="prettyprint" data-lang="css"> <style> p { color: pink } b { color: blue } </style> </pre> <pre class="prettyprint" data-lang="html"> <!DOCTYPE html> <html> <head> <title>My Awesome Page</title> </head> <body> <p>Hello world</p> <body> </html> </pre> </article> </slide> <slide> <aside class="note"> <section> <ul> <li> Point I wanted to make #1 </li> <li> Point I wanted to make #2 </li> <li> Point I wanted to make #3 </li> <li> Example <a href="#">link</a> in notes. </li> </ul> <p> <b>Remember to say this tag line!</b> </p> </section> </aside> <hgroup> <h2>Slide with Speaker Notes</h2> </hgroup> <article> <p> Press 'p' to toggle speaker notes. </p> </article> </slide> <slide> <aside class="note"> <section> <ul> <li> See this amazing link: <a href="http://www.google.com">link</a>. </li> </ul> <p> <b>Remember to say this tag line!</b> </p> </section> </aside> <hgroup> <h2>Presenter Mode</h2> </hgroup> <article> <p> Add <code> <a href="?presentme=true" target="_self">?presentme=true</a> </code> to the URL to enabled presenter mode. This setting is sticky, meaning refreshing the page will persist presenter mode. </p> <p> Hit <code> <a href="?presentme=false" target="_self">?presentme=false</a> </code> to disable presenter mode. </p> </article> </slide> <slide> <hgroup> <h2>Slide with Image</h2> </hgroup> <article> <img src="images/chart.png" class="reflect" alt="Description" title="Description"> <footer class="source"> source: place source info here </footer> </article> </slide> <slide> <hgroup> <h2>Slide with Image (Centered horz/vert)</h2> </hgroup> <article class="flexbox vcenter"> <img src="images/barchart.png" alt="Description" title="Description"> <footer class="source"> source: place source info here </footer> </article> </slide> <slide> <hgroup> <h2>Table Option A</h2> <h3>Subtitle Placeholder</h3> </hgroup> <article> <table> <tr> <th></th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> <tr> <td>Row 1</td> <td>placeholder</td> <td class="highlight">placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 2</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 3</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 4</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 5</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> </table> </article> </slide> <slide> <hgroup> <h2>Table Option A (Smaller Text)</h2> <h3>Subtitle Placeholder</h3> </hgroup> <article class="smaller"> <table> <tr> <th></th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> <tr> <td>Row 1</td> <td>placeholder</td> <td class="highlight">placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 2</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 3</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 4</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <td>Row 5</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> </table> </article> </slide> <slide> <hgroup> <h2>Table Option B</h2> <h3>Subtitle Placeholder</h3> </hgroup> <article> <table class="rows"> <tr> <th>Header 1</th> <td>placeholder</td> <td class="highlight">placeholder</td> <td>placeholder</td> </tr> <tr> <th>Header 2</th> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <th>Header 3</th> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <th>Header 4</th> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> <tr> <th>Header 5</th> <td>placeholder</td> <td>placeholder</td> <td>placeholder</td> </tr> </table> </article> </slide> <slide> <hgroup> <h2>Slide Styles</h2> </hgroup> <article class="smaller"> <div class="columns-2"> <ul> <li class="red"> class="red" </li> <li class="red2"> class="red2" </li> <li class="red3"> class="red3" </li> <li class="blue"> class="blue" </li> <li class="blue2"> class="blue2" </li> <li class="blue3"> class="blue3" </li> <li class="green"> class="green" </li> <li class="green2"> class="green2" </li> </ul> <ul> <li class="green3"> class="green3" </li> <li class="yellow"> class="yellow" </li> <li class="yellow2"> class="yellow2" </li> <li class="yellow3"> class="yellow3" </li> <li class="gray"> class="gray" </li> <li class="gray2"> class="gray2" </li> <li class="gray3"> class="gray3" </li> <li class="gray4"> class="gray4" </li> </ul> </div> <div class="centered" style="margin-top: 2em"> I am centered text with a <button> Button </button> and <button disabled> Disabled </button> button. </div> </article> </slide> <slide class="segue dark nobackground"> <aside class="gdbar"> <img src="images/google_developers_icon_128.png"> </aside> <hgroup class="auto-fadein"> <h2>Segue Slide</h2> <h3>Subtitle Placeholder</h3> </hgroup> </slide> <slide class="fill nobackground" style="background-image: url(images/sky.jpg)"> <hgroup> <h2 class="white">Full Image (with Optional Header)</h2> </hgroup> <footer class="source white"> www.flickr.com/photos/25797459@N06/5438799763/ </footer> </slide> <slide class="segue dark quote nobackground"> <aside class="gdbar right bottom"> <img src="images/google_developers_icon_128.png"> </aside> <article class="flexbox vleft auto-fadein"> <q> This is an example of quote text. </q> <div class="author"> Name <br> Company </div> </article> </slide> <slide> <hgroup> <h2>Slide with Iframe</h2> </hgroup> <article> <iframe data-src="http://www.google.com/doodle4google/resources/history.html"></iframe> </article> </slide> <slide> <article> <iframe data-src="http://www.google.com/doodle4google/resources/history.html"></iframe> </article> </slide> <slide class="thank-you-slide segue nobackground"> <aside class="gdbar right"> <img src="images/google_developers_icon_128.png"> </aside> <article class="flexbox vleft auto-fadein"> <h2><Thank You!></h2> <p> Important contact information goes here. </p> </article> <p class="auto-fadein" data-config-contact> <!-- populated from slide_config.json --> </p> </slide> <slide class="logoslide dark nobackground"> <article class="flexbox vcenter"> <span><img src="images/google_developers_logo_white.png"></span> </article> </slide> <slide class="backdrop"></slide> </slides> <!--[if IE]> <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <script>CFInstall.check({mode: 'overlay'});</script> <![endif]--> </body> </html>