Johan Forsman:

• Utbildningsassistent
• Utvecklare inom Wordpress
• Fokus på Front-end

Google HTML5 Slide Deck är skrivet i 3 språk:

• HTML5
• SCSS (CSS)
• Javascript

• Innehållet i alla slides
• Logisk följd

<slide>
    <hgroup>
        <h2><span>2:1</span>HTML5</h2>
    <h3>Ramverket</h3>
    </hgroup>
    <article>
        <ul>
            <li>Innehållet i alla slides</li>
            <li>Logisk följd</li>
        </ul>
    </article>
</slide>
      

slide > hgroup {

    h2 {
      width: 1100px;
      margin-left: -60px;
      padding-left: 60px;

      span {
        font-family: 'DinR';
        font-style: normal;
        font-size: 48px;
      }
}

• Förutsättning för sk "One-page"-app
• EventHandler

SlideDeck.prototype.addEventListeners_ = function() {
  document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false);
  window.addEventListener('popstate', this.onPopState_.bind(this), false);
}

switch (e.keyCode) {
  case 39: // right arrow
  case 32: // space
  case 34: // PgDn
    this.nextSlide();
    e.preventDefault();
    break;

• slide_config.js
  • Allmän info
• template.html
  • Innehållet i er presentation
  • Inspiration via googles original
• scss/default.scss
  • Undvik att "fulhacka"
  • Använd Chrome DevTools
• Bilder
  • ersätt befintliga bilder/logos
  • 'images/bild1.png'