index.html

<!--
  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">-->
    <link rel="shortcut icon" href="images/favicons/favicon.ico" type="image/x-icon">
    <meta name="theme-color" content="#ffffff">
    <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-1.0.8.min.js"></script>
  </head>
  <body style="opacity: 0">
    <slides class="layout-widescreen">
      <slide class="title-slide segue nobackground">
        <aside class="gdbar"><img src="images/DFKI-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>DFKI Logo</h2>
        </hgroup>
        <article>
          <p>The template contains a logo of the <strong class="dfki-blue">German Research Center of Artificial Intelligence</strong>.</p>
          <br /><br />
          <center><img src="images/DFKI-645.png" /></center>
        </article>
      </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>
        <article class="flexbox vcenter">
          <table style="border:none;width:900px;">
            <tr style="background:none">
              <td style="text-align:center;">
                <img src="images/conc-red.png" alt="Description" title="Description">
                &nbsp;
              </td>
              <td style="text-align:center;">
                <img src="images/network.png" alt="Description" title="Description">
                &nbsp;
              </td>
              <td style="text-align:center;">
                <img src="images/fault.png" alt="Description" title="Description">
                &nbsp;
              </td>
              <td style="text-align:center;">
                <img src="images/refresh.png" alt="Description" title="Description">
              </td>
            </tr>
            <tr>
              <td style="text-align:center;color:#a32638;font-weight:normal;">
                Concurrency
              </td>
              <td style="text-align:center;color:black;">
                Distribution
              </td>
              <td style="text-align:center;color:black;">
                Fault-Tolerancy
              </td>
              <td style="text-align:center;color:black;">
                Hot-Code Swapping
              </td>
            </tr>
          </table>
        </article>
      </slide>
      <slide class="">
        <article class="flexbox vcenter">
          <h2 style="font-size:2em">Lorem<span class="dfki-blue">/Ipsum</span></h2>
          <h3>(dolor sit amet)</h3>
        </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="https://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>&lt;b&gt;</code>).</p>
          <pre class="prettyprint" data-lang="javascript">
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    <b>for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }</b>
  }
&lt;/script&gt;
</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 &gt;= 0;) {
    alert('Hello ' + String(world));
  }
}
</pre>
          <pre class="prettyprint" data-lang="css">
&lt;style&gt;
  p { color: pink }
  b { color: blue }
&lt;/style&gt;
</pre>
          <pre class="prettyprint" data-lang="html">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
  &lt;title>My Awesome Page&lt;/title>
&lt;/head>
&lt;body>
  &lt;p&gt;Hello world&lt;/p&gt;
&lt;body>
&lt;/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="https://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="dfki-blue">class="dfki-blue"</li>
              <li class="dfki-orange">class="dfki-orange"</li>
              <li class="red">class="red"</li>
              <li class="red2">class="red2"</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/DFKI-128.png"></aside>
        <hgroup class="auto-fadein">
          <h2>Segue Slide</h2>
          <h3>Subtitle Placeholder</h3>
        </hgroup>
      </slide>
      <slide class="thank-you-slide segue nobackground">
        <article class="flexbox vleft auto-fadein">
          <h2>Chapter I</h2>
        </article>
      </slide>
      <slide class="segue nobackground">
        <article class="flexbox vleft auto-fadein">
          <h2>Chapter II</h2>
        </article>
      </slide>
      <slide class="fill nobackground" style="background-image: url(images/kaiserslautern.jpg)">
        <hgroup>
          <h2 class="white">Full Image (with Optional Header)</h2>
        </hgroup>
        <footer class="source white">
          source: 
          <a href="https://www.flickr.com/photos/82775126@N00/2536076142">"Lightning in Kaiserslautern II"</a><span> by <a href="https://www.flickr.com/photos/82775126@N00">gromgull</a></span> is licensed under <a href="https://creativecommons.org/licenses/by/2.0/?ref=ccsearch&atype=html" style="margin-right: 5px;">CC BY 2.0</a>
        </footer>
      </slide>
      <slide class="segue dark quote nobackground">
        <aside class="gdbar right bottom"><img src="images/DFKI-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 class="quote" style="color:#797979;">
        <article class="flexbox vleft">
          <q>
          How can we program systems which behave in a reasonable manner in the presence of software errors?
          </q>
          <div class="author" style="bottom:140px; right: 60px;">
            Joe Armstrong
          </div>
        </article>
      </slide>
      <slide class="hidden">
        <hgroup>
          <h2>Slide with Iframe</h2>
        </hgroup>
        <article>
          <iframe data-src="https://www.dfki.de/"></iframe>
        </article>
      </slide>
      <slide>
        <article>
          <iframe data-src="https://www.dfki.de/"></iframe>
        </article>
      </slide>
      <slide class="thank-you-slide segue nobackground">
        <aside class="gdbar right"><img src="images/DFKI-128.png"></aside>
        <article class="flexbox vleft auto-fadein">
          <h2>&lt;Thank You!&gt;</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="thank-you-slide segue nobackground">
        <article class="flexbox vleft">
          <h2>&lt;Thank You!&gt;</h2>
          <pre class="prettyprint questions" data-lang="javascript">
speakername.ask(questions);
      </pre>
          <br />
          <h3>Icons</h3>
          <ul style="color:white">
            <li>
              <a style="color:white" href="https://thenounproject.com/term/error/2189/">Error by Anas Ramadan from The Noun Project</a>
            </li>
            <li>
              <a style="color:white"  href="https://thenounproject.com/term/reload/23259/">Reload by aguycalledgary from The Noun Project</a>
            </li>
            <li>
              <a style="color:white"  href="https://thenounproject.com/term/network/21272/">Network by Brennan Novak from The Noun Project</a>
            </li>
          </ul>
        </article>
        <p class="auto-fadein" data-config-contact style="display:none;">
          <!-- populated from slide_config.json -->
        </p>
      </slide>
      <slide class="thank-you-slide segue nobackground">
        <article class="flexbox vleft">
          <h2>&lt;Thank You!&gt;</h2>
          <br /> <br /> <br />
          <pre class="prettyprint questions" data-lang="javascript" >
speakername.ask(questions);
      </pre>
          <br/> <br/> <br/>
          <p style="font-size:0.7em;text-align:right;">
            <img src="images/by.svg" style="float:right;margin-left:25px;" />
            This presentation is licensed under the <br />
            <a style="color:white;" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a> 
            license.
          </p>
        </article>
        <p class="auto-fadein" data-config-contact style="display:none;">
          <!-- populated from slide_config.json -->
        </p>
      </slide>
      <slide class="backdrop"></slide>
    </slides>
  </body>
</html>