Home Teaching Publications Service Software Open Access Media Bio WebLog Opinions Contact

<div id="navigation">
  <div class="content">
    <!-- auto-populated -->
  </div>
</div>
<div class="fallback-message">
  <p>Your browser 
  <b>doesn't support the features required</b>by impress.js, so
  you are presented with a simplified version of this
  presentation.</p>
  <p>For the best experience please use the latest 
  <b>Chrome</b>, 
  <b>Safari</b>or 
  <b>Firefox</b>browser.</p>
</div>
<div id="impress" data-transition-duration="1000">
  <!-- Title -->
  <div id="title" class="step slide section" data-x="1000"
    data-y="0"
    data-scale="0.2"
    style="z-index:2"
  title="Pour un web meilleur" level="0">
    <a href="https://github.com/Yoric/Talks-Paris-7-2012">
      <img style="position: absolute; top: 0; left: 0; border: 0;"
      src="https://a248.e.akamai.net/assets.github.com/img/ce742187c818c67d98af16f96ed21c00160c234a/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67"
      alt="Fork me on GitHub" />
    </a>
    <div class="title">Mozilla, pour un web meilleur</div>
    <div class="author">David Rajchenbach-Teller, Mozilla</div>
    <div class="hint">Use the spacebar or arrow keys to navigate</div>
    <script>
    if ("ontouchstart" in document.documentElement) {       
       document.querySelector(".hint").innerHTML = "Tap on the left or right to navigate";
    }
    window.setTimeout(function()
    {document.querySelector(".hint").style.opacity = 0;}, 3000);
    </script>
  </div>
  <!-- Plan -->
  <div id="plan" class="step slide" data-x="1000" data-y="0"
  title="Au programme">
    <div class="title">Au programme</div>
  </div>
  <!-- Introduction -->
  <div id="section_mozilla"
    class="step slide section" data-x="700" data-y="-150"
    title="À propos de Mozilla" level="1"
    data-scale="0.2">
    <img id="logo_mozilla" src="img/mozilla.png"
    class="fullwidth hidden appear" />
  </div>
  <div class="step slide" data-x="673" data-y="-145"
  title="Mozilla" level="2" data-scale="0.002">
    <div class="title">Mozilla</div>
    <div class="content">
      <ul>
        <li>
        <a href="http://getfirefox.com">Firefox</a>, 
        <a href="http://getthunderbird.com">Thunderbird</a>, 
        <a href="http://getinstantbird.com">InstantBird</a>,
        Lightning, BrowserID/Persona, SpiderMonkey,
        Boot-to-Gecko, Rust, ...</li>
        <li>
        <a href="http://mozilla.org">Mozilla
        Fondation</a>(association à but non-lucratif)</li>
        <li>
        <a href="http://mozilla.com">Mozilla
        Corporation</a>(entreprise à but non-lucratif — environ
        600 employés)</li>
        <li>
        <a href="http://mozillians.org">Mozilla
        Community</a>(des milliers de volontaires à travers le
        monde)</li>
      </ul>
    </div>
  </div>
  <div class="step slide" data-x="676" data-y="-145"
  title="Mozilla Manifesto" level="2" data-scale="0.002">
    <div class="title">Mozilla Manifesto (extraits)</div>
    <div class="content">
      <ul>
        <li>«&#160;Internet est une ressource publique mondiale
        qui doit demeurer ouverte et accessible.&#160;»</li>
        <li>«&#160;Chacun doit avoir la possibilité de façonner
        son utilisation d'Internet.&#160;»</li>
        <li>«&#160;Des processus transparents et communautaires
        favorisent la participation, la responsabilité et la
        confiance.&#160;»</li>
      </ul>
      <a href="http://www.mozilla.org/about/manifesto.fr.html">
      http://www.mozilla.org/about/manifesto.fr.html</a>
    </div>
  </div>
  <div class="step slide invisible" data-x="1000" data-y="0"
  title="Plan"></div>
  <div class="step slide section" data-x="800" data-y="50"
  data-scale="0.2" title="À propos du web" level="1"
    id="section_web">
    <div class="title hidden appear">Le web</div>
  </div>
  <div class="step slide" data-x="790" data-y="68"
    data-scale="0.002" level="2"
  title="Wikipedia">
    <div class="title">Partager les savoirs</div>
    <a href="http://wikipedia.org">
    <img src="img/wikipedia.png" class="fullwidth" />
    </a>
  </div>
  <div class="step slide" data-x="793" data-y="68"
    data-scale="0.002" level="2"
  title="Github">
    <div class="title">Collaborer</div>
    <a href="http://github.com"> <img src="img/github.png"
    class="fullwidth" /> </a>
  </div>
  <div class="step slide" data-x="796" data-y="68"
    data-scale="0.002" 
  level="2" title="Facebook">
    <div class="title">Communiquer</div>
    <img src="img/facebook.png" class="fullwidth" />
  </div>
  <div class="step slide" data-x="799" data-y="68"
    data-scale="0.002" level="2" title="Google">
    <div class="title">Chercher</div>
    <img src="img/google.png" class="fullwidth" />
  </div>
  <div class="step slide" data-x="802" data-y="68"
    data-scale="0.002" level="2" title="Mediapart">
    <div class="title">(S')informer</div>
    <a href="http://www.mediapart.fr/"><img src="img/mediapart.png" class="fullwidth" /></a>
  </div>
  <div class="step slide" data-x="805" data-y="68"
    data-scale="0.002" level="2" title="Ou encore">
    <div class="title">... sans restrictions</div>
    <a href="http://sipi.usc.edu/database/database.php?volume=misc&image=12">
    <img src="img/Lenna.png" class="fullheight" />
    </a>
  </div>
  <div class="step slide" data-x="808" data-y="68"
    data-scale="0.002" level="2" title="Le monde réel">
    <div class="title">... sans oublier le monde réel !</div>
    <a href="http://fr.wikipedia.org/wiki/Printemps_arabe">
    <img src="img/revolutions.png" class="fullwidth" />
    </a>
  </div>
  <div class="step slide" data-x="811" data-y="68"
    data-scale="0.002" level="2" title="Et demain ?">
    <div class="title">Et demain ?</div>
    <div class="content" style="text-align:center">
      <div style="padding-top:20%">
        L'humanit&eacute; a encore "quelques" probl&egrave;mes
        &agrave; r&eacute;soudre.
      </div>
      <div>
        Pour trouver des solutions, il faudra communiquer, et ce
        sera peut-&ecirc;tre par le web.
      </div>
    </div>
  </div>
  <div class="step slide invisible" data-x="1000" data-y="0"
  title="Plan"></div>
  <!-- Section 1: Comment en sommes-nous arrives la ? -->
  <div class="step slide section" data-x="900" data-y="250"
  data-scale="0.2" title="Une brève histoire du web" level="1"
    id="section_history">
    <div class="title hidden appear">Historique</div>
  </div>
  <div class="step slide" data-x="880" data-y="197"
    data-scale="0.002"
    level="2"
  title="Au commencement étaient les années 1990s">
    <div class="title">Préhistoire</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://fr.wikipedia.org/wiki/Minitel">
        <img src="img/Minitel_1.JPG" class="colwidth"
        style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol">Caractéristiques : 
      <ul>
        <li>technologie limitée 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>accès centralisé
        <a href="http://openclipart.org/detail/166369/thumb-down-by-nikitan">
        <img src="img/bad.svg" class="thumb" />
        </a></li>
        <li>sources multiples
        <a href="http://openclipart.org/detail/166368/thumb-up-by-nikitan">
        <img src="img/good.svg" class="thumb" />
        </a></li>
        <li>protocoles standardisés 
        <img src="img/good.svg" class="thumb" /></li>
        <li>données distantes 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>sécurité inexistante 
        <img src="img/bad.svg" class="thumb" /></li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="885" data-y="197"
    data-scale="0.002"
  title="AOL" >
    <div class="title">AOL, CompuServe, MSN</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://en.wikipedia.org/wiki/File:AOL_promotional_CDs_in_Canada.jpg">
        <img src="img/800px-AOL_promotional_CDs_in_Canada.jpg" class="colwidth"
        style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol">Caractéristiques : 
      <ul>
        <li>technologie puissante 
        <img src="img/good.svg" class="thumb" /></li>
        <li>source unique, filtrée 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>protocoles propriétaires 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>données distantes 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>sécurité ?</li>
        <li>clientèle captive 
        <img src="img/bad.svg" class="thumb" /></li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="890" data-y="197"
    data-scale="0.002"
  onclick="document.getElementById('aol_minitel_hidden').style.opacity=1"
  title="AOL, Minitel, même combat">
    <div class="title">AOL, Minitel, même combat</div>
    <div class="content">Q: Ces solutions étaient-elles
    compatibles avec 
    <ul>
      <li>Wikipedia ?</li>
      <li>Github ?</li>
      <li>Facebook ?</li>
      <li>Google ?</li>
      <li>Lenna ?</li>
      <li>Le printemps arabe ?</li>
    </ul>
    <div id="aol_minitel_hidden" class="hidden">R: 
    <ul>
      <li>Technologiquement, peut-être.</li>
      <li>En pratique, non.</li>
    </ul></div></div>
  </div>
  <div class="step slide" data-x="895" data-y="197"
    data-scale="0.002"
  title="Le web" >
    <div class="title">Pendant ce temps-là, le Web</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://en.wikipedia.org/wiki/File:NCSA_Mosaic.PNG">
        <img src="img/NCSA_Mosaic.PNG" class="colwidth"
        style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol">Caractéristiques : 
      <ul>
        <li>technologie limitée 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>accès ouvert 
        <img src="img/good.svg" class="thumb" /></li>
        <li>sources multiples 
        <img src="img/good.svg" class="thumb" /></li>
        <li>contenu illimité 
        <img src="img/good.svg" class="thumb" /></li>
        <li>protocoles standardisés 
        <img src="img/good.svg" class="thumb" /></li>
        <li>données locales 
        <img src="img/good.svg" class="thumb" /></li>
        <li>sécurité partielle</li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="900" data-y="197"
    data-scale="0.002"
  title="Browser wars 1.0"
  onclick="document.getElementById('netscape_dies').style.opacity=1; document.getElementById('microsoft_rules').style.opacity=1;">

    <div class="title">Browser wars 1.0</div>
    <div class="content">
      <div class="leftcol">Netscape Navigator 
      <ul>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>Java</li>
        <li>Composer</li>
        <li>Protocoles ouverts</li>
        <li class="hidden" id="netscape_dies">Netscape
        meurt</li>
      </ul></div>
      <div class="rightcol">Microsoft Internet Explorer 
      <ul>
        <li>HTML</li>
        <li>JScript</li>
        <li>ActiveX</li>
        <li>FrontPage + Word (!)</li>
        <li>Protocoles secrets</li>
        <li class="hidden" id="microsoft_rules">Microsoft
        règne</li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="905" data-y="197"
    data-scale="0.002"
  title="Fatality">
    <div class="title">Vainqueur : Microsoft</div>
    <div>
      <img src="img/fatality.jpg" class="fullwidth" />
    </div>
  </div>
  <div class="step slide" data-x="910" data-y="197"
    data-scale="0.002"
  title="Le monde sous IE" >
    <div class="title">Le monde sous IE</div>
    <div class="content">
      <div class="leftcol">
        <img src="img/internet-explorer-sad.png"
        class="colwidth" style="margin-top:5%" />
      </div>
      <div class="rightcol">Caractéristiques : 
      <ul>
        <li>technologie limitée 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>accès ouvert 
        <img src="img/good.svg" class="thumb" /></li>
        <li>sources multiples 
        <img src="img/good.svg" class="thumb" /></li>
        <li>... mais censurables (DRM) 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>protocoles secrets 
        <img src="img/bad.svg" class="thumb" /></li>
        <li>données locales 
        <img src="img/good.svg" class="thumb" /></li>
        <li>sécurité catastrophique 
        <img src="img/bad.svg" class="thumb" /></li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="915" data-y="197"
    data-scale="0.002"
  onclick="document.getElementById('ie_minitel_hidden').style.opacity=1"
  title="IE, Minitel, même combat">
    <div class="title">IE, Minitel, même combat</div>
    <div class="content">Q: Alors, compatible avec 
    <ul>
      <li>Wikipedia ?</li>
      <li>Github ?</li>
      <li>Facebook ?</li>
      <li>Google ?</li>
      <li>Le printemps arabe ?</li>
    </ul>
    <div id="ie_minitel_hidden" class="hidden">R: 
    <ul>
      <li>Technologiquement, peut-être.</li>
      <li>En pratique, non.</li>
    </ul></div></div>
  </div>
  <div class="step slide" data-x="920" data-y="197"
    data-scale="0.002"
  title="Browser wars 2.0"
  style="background-image:url(img/firefoxFox.jpg); background-size:cover; repeat: none">

    <div class="title">Browser wars 2.0</div>
    <div class="content" style="">
      <div class="rightcol">Internet propriétaire (Microsoft) 
      <ul>
        <li>Langages propriétaires</li>
        <li>Clients Windows uniquement</li>
        <li>Vers des serveurs Windows uniquement</li>
        <li>Sécurité ridicule</li>
        <li>Fonctionnalités limitées</li>
      </ul></div>
      <div class="leftcol">Standards ouverts (Mozilla, Opera,
      Konqueror + Chrome) 
      <ul>
        <li>Langages standardisés</li>
        <li>Protocoles standardisés</li>
        <li>Sécurité</li>
        <li>Fonctionnalités avancées</li>
      </ul></div>
    </div>
  </div>
  <div class="step slide" data-x="925" data-y="197"
    data-scale="0.002"
  title="De nos jours">
    <div class="title">Aujourd'hui</div>
    <div class="content">
      <div class="leftcol">
        <img src="img/w3c.jpg" class="colwidth"
        style="margin-top:5%" />
      </div>
      <div class="rightcol">Caractéristiques : 
      <ul>
        <li>technologie puissante 
        <img src="img/good.svg" class="thumb" /></li>
        <li>navigateurs multiples et essentiellement
        compatibles 
        <img src="img/good.svg" class="thumb" /></li>
        <li>accès ouvert 
        <img src="img/good.svg" class="thumb" /></li>
        <li>sources multiples 
        <img src="img/good.svg" class="thumb" /></li>
        <li>protocoles ouverts 
        <img src="img/good.svg" class="thumb" /></li>
        <li>données locales/distantes</li>
        <li>modèles de sécurité 
        <img src="img/good.svg" class="thumb" /></li>
      </ul></div>
    </div>
  </div>
  <div class="step slide invisible" data-x="1000" data-y="0"
  title="Plan"></div>
  <!-- Section 2: Ou en sommes-nous ? -->
  <div class="step slide section" data-x="1100" data-y="250"
  level="1" data-scale="0.2" title="Aujourd'hui et demain"
    id="section_silos">
    <div class="title hidden appear">Pour un monde
    meilleur</div>
    <div class="content appear center">(?)</div>
  </div>
  <div class="step slide" data-x="1105" data-y="270"
    data-scale="0.002"
  title="La paix des braves ?"
    level="2">
    <div class="title">La paix des braves ?</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://shoze.blogspot.com/2011/06/brorwser-wars.html">

          <img src="img/Browser-Wars.jpg" class="colwidth" />
        </a>
      </div>
      <div class="rightcol">Développez une application web : 
      <ul>
        <li>avec n'importe quel outil !</li>
        <li>sur n'importe quelle plate-forme !</li>
        <li>elle marchera partout !</li>
      </ul>Le web par tous, pour tous !</div>
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="272"
    data-scale="0.002"
  title="Profil : Facebook"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Profil : Facebook</div>
    <div class="content">
      <div class="leftcol">
        <img src="img/facebook.png" class="colwidth"
        style="margin-top:5%" />
      </div>
      <div class="rightcol hidden">
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès centralisé 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>source unique, filtrée 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>protocoles clairs 
          <img src="img/good.svg" class="thumb" /></li>
          <li>données distantes 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>clientèle captive 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>vos données ne vous appartiennent pas 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>aucune transparence 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>... que fait 
          <a href="http://smallbuck.com/nashvillewebdesign/?p=19">

            <img src="img/facebook_like_button_big.jpg"
            style="height:1em" />
          </a>? 
          <img src="img/bad.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
 <div class="step slide" data-x="1105" data-y="274"
    data-scale="0.002"
  title="Profil : Google"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Profil : Google</div>
    <div class="content">
      <div class="leftcol">
        <img src="img/google.png" class="colwidth"
        style="margin-top:5%" />
      </div>
      <div class="rightcol hidden">
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès centralisé 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>source unique, filtrée 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>protocoles clairs 
          <img src="img/good.svg" class="thumb" /></li>
          <li>données distantes 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>vos données ne vous appartiennent pas 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>clientèle assez captive 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>aucune transparence 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>... que fait 
          <img src="img/+1.png" style="height:1em" />? 
          <img src="img/bad.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="276"
    data-scale="0.002"
  title="Collusion" level="2"
  onclick="document.getElementById('battlefield').classList.add('appear');">

    <div class="title">Démo : <a href="http://www.mozilla.org/en-US/collusion/demo/">Collusion</a></div>
    <div class="content">
      <img src="img/collusion.png" class="fullwidth" />
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="278"
    data-scale="0.002"
  title="Profil : iOS"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Profil : iOS</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://en.wikipedia.org/wiki/File:Operating_system_iphone_5.PNG">
        <img src="img/Operating_system_iphone_5.PNG"
        class="colwidth" style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol hidden">
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès centralisé 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>source unique et filtrée 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>fonctionnalités limitées artificiellement 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>clientèle captive 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>aucune transparence 
          <img src="img/bad.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="280"
    data-scale="0.002"
  title="Profil : Android"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Profil : Android</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://en.wikipedia.org/wiki/File:Android_robot.svg">
        <img src="img/512px-Android_robot.svg.png"
        class="colwidth" style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol hidden">
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès centralisé 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>source unique et filtrée 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>fonctionnalités limitées artificiellement 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>clientèle captive 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>aucune transparence 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>données distantes 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>vos données ne vous appartiennent pas 
          <img src="img/bad.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="282"
    data-scale="0.002"
  title="Profil : Chrome"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Profil : Chrome</div>
    <div class="content">
      <div class="leftcol">
        <a href="http://en.wikipedia.org/wiki/File:Google_Chrome_2011_computer_icon.svg">
        <img src="img/500px-Google_Chrome_2011_computer_icon.svg.png"
        class="colwidth" style="margin-top:5%" />
        </a>
      </div>
      <div class="rightcol hidden">
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès ouvert 
          <img src="img/good.svg" class="thumb" /></li>
          <li>protocoles ouverts 
          <img src="img/good.svg" class="thumb" /></li>
          <li>... mais parfois verrouillés ! 
          <img src="img/bad.svg" class="thumb" /></li>
          <li>... et la vie privée ? 
          <img src="img/bad.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1105" data-y="284"
    data-scale="0.002"
  title="HADOPI">
    <div class="title">Remarque</div>
    <div class="content">
      Avez-vous remarqu&eacute; ?
     <div class="leftcol" style="padding-top:15%">
      <ul>
        <li>HADOPI</li>
        <li>ACTA</li>
        <li>SOPA</li>
        <li>...</li>
      </ul>
      </div>
      <div class="rightcol" style="padding-top:15%">
        <ul>
          <li>iTunes</li>
          <li>Google Play</li>
          <li>AppStore</li>
          <li>...</li>
        </ul>
     </div>         
   </div>
  </div>
  <div class="step slide" data-x="1105" data-y="286"
    data-scale="0.002"
  title="La guerre des plateformes">
    <div class="title">La guerre est d&eacute;clar&eacute;e</div>
    <div class="content">
      <div class="leftcol">Silos, HADOPI
      <ul>
        <li>Vos données appartiennent à d'autres.</li>
        <li>Surveillance.</li>
       <li>Clientèle captive.</li>
        <li>Contenus filtrés.</li>
        <li>L'innovation appartient aux &eacute;diteurs et
    distributeurs.</li>
    <li>Moins ouvert que le Minitel.</li>
      </ul></div>
      <div class="rightcol">Web ouvert 
      <ul>
        <li>Transparence.</li>
        <li>Pas de captivité.</li>
        <li>Pas de filtrage obligatoire.</li>
        <li>Innovation par tous.</li>
        <li>Le monde vous appartient.</li>
      </ul></div>
    </div>
  </div>
 <!-- Section 3: Que faisons-nous ? -->
  <div class="step slide invisible" data-x="1000" data-y="0"
 title="Plan"></div>
  <div class="step slide section" data-x="1200" data-y="50"
  data-scale="0.2" title="Le combat continue" level="1"
    id="section_fight">
   <div class="title hidden appear">Le combat continue</div>
  </div>
  <div class="step slide" data-x="1200" data-y="56" data-scale="0.002"
  title="Le combat pour la vie privée" level="2">
    <div class="title">Le combat pour la vie privée</div>
    <div class="content">
       Les utilisateurs doivent poss&eacute;der leurs
    informations, &ecirc;tre au courant de l'utilisation
        de leurs donn&eacute;es.
     <div style="padding-top:5%">
       <ul>
          <li>Mozilla Collusion</li>
          <li>Mozilla BrowserID/Persona</li>
          <li>Mozilla + W3C Do Not Track</li>
          <li>Mais aussi Tor</li>
          <li>Mais aussi BetterPrivacy, Ghostery, ...</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1200" data-y="58" data-scale="0.002"
  title="Les silos technologiques"
  onclick="this.querySelectorAll('.hidden')[0].classList.add('appear')">

    <div class="title">Le combat contre les silos
    technologiques</div>
    <div class="content">
      <div>
        L'innovation ne doit pas appartenir &agrave; quelques-uns.</div>
      <div style="padding-top:5%">
       <ul>
         <li>Mozilla Firefox Devtools, CodeEditor, TypeInference, ...</li>
          <li>Mozilla + W3C Open Web Apps</li>
          <li>Mozilla + W3C WebAPI, DeviceAPI</li>
          <li>W3C WebGL, Canvas</li>
          <li>Mais aussi jQuery, Dojo, Ample SDK, ...</li>
          <li>Mais aussi Node.js, Python, OCaml, ...</li>
       </ul>
        <div class="hidden">
        <strong>Pub</strong> Avez-vous joué à 
        <a href="http://browserquest.mozilla.org/">
        BrowserQuest</a>?</div>
      </div>
    </div>
  </div>
  <div class="step slide" data-x="1200" data-y="60" data-scale="0.002"
  title="Boot to Gecko">
    <a href="https://github.com/andreasgal/B2G">
      <img style="position: absolute; top: 0; left: 0; border: 0;"
      src="https://a248.e.akamai.net/assets.github.com/img/ce742187c818c67d98af16f96ed21c00160c234a/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67"
      alt="Fork me on GitHub" />
    </a>
    <div class="title">Boot to Gecko</div>
    <div class="content">
      <div class="leftcol">
        <img src="img/hero.png" class="colwidth"
        style="margin-top:5%" />
      </div>
      <div class="rightcol">
        Syst&egrave;me d'exploitation mobile web ouvert
        <ul>
          <li>technologie puissante 
          <img src="img/good.svg" class="thumb" /></li>
          <li>accès ouvert 
          <img src="img/good.svg" class="thumb" /></li>
          <li>protocoles ouverts 
          <img src="img/good.svg" class="thumb" /></li>
          <li>vie privée 
          <img src="img/good.svg" class="thumb" /></li>
          <li>transparence totale 
          <img src="img/good.svg" class="thumb" /></li>
          <li>aucune captivité 
          <img src="img/good.svg" class="thumb" /></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Section 5: Conclusions -->
  <div class="step slide invisible" data-x="1000" data-y="0"
  title="Plan"></div>
  <div class="step slide section" data-x="1300" data-y="-150"
  data-scale="0.2" title="Conclusions" level="1"
    id="section_conclusions">
    <div class="title hidden appear">Conclusions</div>
  </div>
  <div class="step slide" data-x="1299" data-y="-150"
    data-scale="0.002" level="2"
  title="La nécessité d'un web ouvert">
    <div class="title">Le web ouvert, c'est...</div>
    <div class="content">
      <ul>
        <li>Une ressource publique et partag&eacute;e.</li>
        <li>L'innovation par tous.</li>
        <li>Github, Wikipedia, et les autres.</li>
        <li>Wikileaks, l'affaire Bettencourt et le printemps
        arabe.</li>
        <li>... le pouvoir de sauver le monde, ou presque :)</li>
        <li>La responsabilit&eacute; de tous !</li>
      </ul>
    </div>
  </div>

  <div class="step slide" data-x="1299" data-y="-148"
    data-scale="0.002"
  title="Vous pouvez participer !">
    <div class="title">Participez !</div>
    <div class="content"
      style="background:url(img/sd.png) no-repeat center center;
      height:600px">
     <div style="position:absolute;left:48%;top:20%">
        <img src="img/creativecollective.png" />
        <div class="legend">
          Design, avec les 
          <a href="http://creative.mozilla.org/challenges">
          concours Creative Collective
          </a>
          ou
          <a
        href="http://www.zazzle.com/mozilla/gifts?cg=196666516716132423">
          les t-shirts Mozilla
          </a>
          !
        </div>
        </div>

      <div style="position:absolute;left:15%;top:30%"><img src="img/sumo.png" /><div class="legend">SUMO:
        Aider les utilisateurs de Firefox, Thunderbird, etc. <a
         href="https://support.mozilla.org/en-US/kb/superheroes-wanted">
        en ligne</a> ou <a
         href="https://support.mozilla.org/en-US/army-of-awesome">
        sur Twitter</a>.</div> </div>

        <div style="position:absolute;left=10%;top:40%"><img
          src="img/localization.png" /><div class="legend">Moz
            L10n:
            Traduire 
        <a href="https://wiki.mozilla.org/L10n">les
        logiciels </a> ou 
        <a href="https://wiki.mozilla.org/L10n:Web_parts">les
        sites de Mozilla et de la communaut&eacute;</a>.</div></div>

        <div style="position:absolute;left=10%;top:55%">
        <img src="img/qmo.png" /><div class="legend">QMO:
          Tests et assurance qualité sur 
        <a href="https://quality.mozilla.org/teams/desktop-firefox/">
        Firefox</a>,            
        <a href="https://quality.mozilla.org/teams/web-qa/">les
        sites</a> et 
        <a href="https://quality.mozilla.org/">le
        reste</a>.</div></div>

       <div style="position:absolute;top:70%"><img
         src="img/dinohead.png" />
         <div class="legend">Développer en C, C++, Java,
         JavaScript, HTML, CSS ou Python
        <a href="https://developer.mozilla.org/en/Introduction">
        les logiciels Mozilla</a> et 
        <a href="http://blog.mozilla.com/webdev/get-involved/">
        les sites</a> de Mozilla et de sa communaut&eacute;.</div></div>

        <div style="position:absolute;left:15%;top:75%">
          <div class="legend">
         <a href="https://addons.mozilla.org/en-US/developers/docs/getting-started">
          AMO: Construire des extensions pour am&eacute;liorer
          Firefox, Thunderbird et l'&eacute;cosyst&egrave;me</a>
            </div>
          <img src="img/addons.png"/>
        </div>

        <div style="position:absolute;right:15%;top:30%">
         <img src="img/firefox.png" style="float:right"/>
        <div class="legend">
          <a href="https://wiki.mozilla.org/ReMo">
          REMO &Eacute;vang&eacute;lisme : Aider Mozilla &agrave; faire passer le message
            et &agrave; &eacute;tendre la communaut&eacute;</a>
          </div>
          </div>

          <div style="position:absolute;right:5%;top:40%">
            <img src="img/mdn.png" style="float:right"/>
            <div class="legend">
            <a href="https://developer.mozilla.org/Project:en/How_to_Help">
          MDN: Documentation et tutoriels pour d&eacute;veloppeurs
            et d&eacute;veloppeurs web</a>
              </div>
            </div>

            <div style="position:absolute;right:5%;top:55%">
            <img src="img/mirrors.png" style="float:right"/>
            <div class="legend">
              <a
            href="http://www.mozilla.org/community/mirrors.html">
              Administration syst&egrave;me : faire en sorte
              que Firefox, Thunderbird, MDN et les autres soient
              disponibles partout, tout le temps, pour tous.</a>
             </div>
            </div>

            <div style="position:absolute;right:5%;top:70%">
            <img src="img/dinohead.png" style="float:right"/>
            <div class="legend">
        <a href="https://wiki.mozilla.org/ReleaseEngineering:Contribute">
        Construction</a> et 
        <a href="https://wiki.mozilla.org/Auto-tools#Want_to_Help.3F">
        automatisation</a>, l'&eacute;quipe qui assure que
            Firefox, Thunderbird et les autres peuvent &ecirc;tre
            construits, test&eacute;s et livr&eacute;s en temps
            et en heure.
             </div>
            </div>

            <div style="position:absolute;right:15%;top:85%">
            <img src="img/testpilot.png" style="float:right"/>
            <div class="legend">
              Recherches sur les utilisateurs.
       <a href="http://www.surveygizmo.com/s3/575418/General-Recruiting-Screener">
        Nous aider &agrave; nous am&eacute;liorer par des &eacute;tudes</a>,
              <a
            href="mailto:diane+contribute@mozilla.com">conduire
            des tests d'utilisabilit&eacute;</a>
              ou
              <a href="https://testpilot.mozillalabs.com/testcases/submit">
              l'analyse de donn&eacute;es
              </a>.
            </div>
            </div>

      <div style="position:absolute;left:48%;top:90%">
       <div class="legend" style="position:absolute;bottom:35%;width:500px">
         Participez aux nombreux projets communautaires
         <a href="http://mozillapopcorn.org/">
         Popcorn</a> (&eacute;dition vid&eacute;o en ligne),
         <a href="http://www.mozillaopennews.org/">
         OpenNews
         </a> (journalisme web ouvert),
         <a href="http://www.hackasaurus.org/en-US/">
         Hackasarus
         </a> ou
         <a
       href="http://www.p2pu.org/en/schools/school-of-webcraft/">
         School of Webcraft
         </a>
         (apprendre et enseigner les technologies web),
         <a href="https://www.mozillaignite.org/">
         Mozilla Ignite
         </a> (inventer les applications web de demain)...

       </div>
        <img src="img/drumbeat.png" />
        </div>

     <!--
         <a href="https://wiki.mozilla.org/Webmakers">
          <img src="img/drumbeat.png" />Webmakers: Projets
          communautaires</a>
        </li>
        <li>...</li>
      </ul>
      -->
    </div>
  </div>
  <div class="step slide invisible" data-x="1000" data-y="0"
  title="Des questions ?" data-scale="1" style="z-index:-1">
  </div>
</div>
<script type="application/javascript" src="impress.js">
</script>
<script type="application/javascript">
impress().init();</script>
<script type="application/javascript" src="custom.js"></script>

Based on a CSS designed by James Koster via OSWD.