Mercurial > 826-national-preso

<!DOCTYPE html>
<html>
<head>
  <title>What Mozilla Can Learn From 826 National</title>
  <base target="_blank">
  <style type="text/css" media="screen">
  body {
    font-family: Futura;
    font-size: 36pt;
    margin: 1em;
    overflow: hidden;
  }

  .slide {
    display: none;
  }

  div.slide.selected {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 1em;
  }

  h1, h2, h3 {
    text-align: right;
    font-weight: normal;
  }

  h3 {
    color: gray;
  }

  ul {
    list-style-type: none;
  }

  li {
    padding-bottom: 1em;
  }

  img {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  a:hover {
    background: yellow;
  }
  </style>
</head>
<body>
<div class="slide">
  <h1>What Can Mozilla Learn From Other Movements?</h1>
  <h3>Mozilla Summit &ndash; July 2010</h3>
</div>
<div class="slide">
  <img src="http://www.826national.org/images/362.jpg">
</div>
<div class="slide">
  <img src="http://www.826national.org/images/215.jpg">
</div>
<div class="slide">
  <img src="http://www.olivermunday.com/files/gimgs/166_826cover.jpg">
</div>
<div class="slide">
  <img src="http://www.826national.org/images/143.jpg">
</div>
<div class="slide">
  <img src="http://www.826national.org/images/227.jpg">
</div>
<div class="slide">
  <img src="http://www.826national.org/images/35.jpg">
</div>
<div class="slide">
  <h2>Why I Chose 826&nbsp;National</h2>
  <ul>
    <li><a href="http://826national.org/chapters/">It's decentralized.</a></li>
    <li><a
    href="http://www.826national.org/about/186/project-based-learning">It's
    about making things.</a></li>
    <li>It's vibrantly creative.</li>
    <li><a
    href="http://www.826national.org/content/157/design-catalog">It's
    odd.</a></li>
  </ul>
</div>
<div class="slide">
  <img src="http://www.826valencia.org/store/img/signs/captrickinformation.gif">
</div>
<div class="slide">
  <h2>How Does 826&nbsp;National Inspire Me?</h2>
  <ul>
    <li>It inspires me to create.</li>
    <li>It unites amateurs and professionals who love
    writing.</li>
  </ul>
</div>
<div class="slide">
  <h2>Key Lessons From 826&nbsp;National</h2>
  <ul>
    <li>Revenue need not come from utility.</li>
    <li>People should know when and how they're
    supporting a non-profit.</li>
  </ul>
</div>
<div class="slide">
  <h2>Takeaways for Mozilla</h2>
  <ul>
    <li>Everything we create should be an embodiment of
    what we promote.</li>
    <li>The mission should be obvious.</li>
    <li>Bring together professionals and amateurs.</li>
  </ul>
</div>
<div class="slide">
  <h2>Something To Try</h2>
  <p>Spend at least 3 minutes a week making a Web page.</p>
  <p>Then, share it with someone.</p>
</div>
<script>
onload = function() {
  var allSlides = document.querySelectorAll(".slide");
  var currSlide;

  function $(sel) {
   return document.querySelector(sel);
  }

  function setCurrSlide(newCurrSlide) {
    if (newCurrSlide != currSlide) {
      if (currSlide != undefined)
        allSlides[currSlide].className = "slide";
      currSlide = newCurrSlide;
      allSlides[currSlide].className = "slide selected";
      if (currSlide == 0)
        window.location.hash = "";
      else
        window.location.hash = "#" + currSlide;
    }
  }

  function setCurrSlideFromHash() {
    var hash = window.location.hash;
    var match = hash.match(/#(-?[0-9]+)/);
    if (match) {
      var newSlide = parseInt(match[1]);
      if (newSlide < 0)
        newSlide = allSlides.length + newSlide;
      setCurrSlide(newSlide);
    } else
      setCurrSlide(0);
  }

  function prevSlide() {
    if (currSlide > 0)
      setCurrSlide(currSlide - 1);
  }

  function nextSlide() {
    if (currSlide < allSlides.length - 1)
      setCurrSlide(currSlide + 1);
  }

  if ('onhashchange' in window)
    window.onhashchange = setCurrSlideFromHash;
  else
    window.setInterval(setCurrSlideFromHash, 250);

  window.onkeyup = function(event) {
    const LEFT_ARROW = 37;
    const RIGHT_ARROW = 39;
    const SPACE = 32;

    switch (event.keyCode) {
    case SPACE:
    case RIGHT_ARROW:
      nextSlide();
      break;
    case LEFT_ARROW:
      prevSlide();
      break;
    }
  };

  setCurrSlideFromHash();
};
</script>
</body>
</html>
author	Atul Varma <avarma@mozilla.com>
date	Thu, 08 Jul 2010 10:15:07 -0700
parents	2765e0617855
children	a35b922da615