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">-->
  <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">


<!--
        Pressing 'h' highlights code snippets
        Pressing 'p' toggles speaker notes (if they're on the current slide)
        Pressing 'f' toggles fullscreen viewing
        Pressing 'w' toggles widescreen
        Pressing 'o' toggles overview mode
        Pressing 'ESC' toggles off these goodies
-->



<slides class="layout-widescreen">

  <slide class="logoslide nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/lnu-logo.png"></span>
    </article>
    <footer>Pedagogisk seminarieserie, FTK HT2014</footer>
  </slide>

  <slide class="title-slide segue nobackground">
    <aside class="gdbar"><img src="images/lnu-symbol.png"></aside>
    <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
    <hgroup class="auto-fadein line">
      <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 class="fill nobackground" style="background-image: url(images/jl-profil-stor.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Johan Leitet</h2>
      <h3 class="dark">Programansvarig<br>Webbprogrammerare.se</h3>
    </hgroup>
    <footer class="source black right">Foto: Liv Ravnböl</footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/wp.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Webbprogrammerare 120HP</h2>
      <h3 class="dark">campus/distans sedan 2002</h3>
    </hgroup>
    <footer class="source black right">Foto: LNU</footer>
  </slide>

  <!-- Vägen hit -->
  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/road.jpg)">
    <hgroup>
      <h2 class="white">Vår resa</h2>

    </hgroup>

    <footer class="source dark right"><a href="http://www.flickr.com/photos/72213316@N00/">http://www.flickr.com/photos/72213316@N00/</a></footer>
    <aside class="note">
      <ul>
        <li>Egenskriven kursplattform</li>
        <li>PDF med föreläsningsanteckningar, kurslitteratur</li>
        <li>Inspelat ljudupptagning av föreläsningar</li>
        <li>Inspelning även med Webbkamera</li>
        <li>Strömmande föreläsning via bambuser, Adobe Connect</li>
        <li>Öppen publicering på YouTube</li>
        <li>Alla kurser helt öppna, HT2013.</li>
      </ul>
      <ul>
        <li>Ett lärarkollegie som är med på notera</li>
      </ul>
    </aside>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/moodle.png);">

  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/closed.jpg)">
    <hgroup class="box-white right">
      <h2 class="dark">Stängt för studenter</h2>
      <h2 class="dark">Stängt för kollegor</h2>
    </hgroup>
    <footer class="source black right">Foto: LNU</footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/open.png);">
    <img src="images/oerstockholm/johanshort.gif" width="50%"/>
  </slide>


  <slide class="fill nobackground bottom" style="background-image: url(images/oerstockholm/no.png)">
    <hgroup class="box-white">
      <h2 class="dark white">"Jaha! Så det är en MOOC?"</h2>
    </hgroup>
     <footer class="source dark right">Foto CC By: <a href="https://www.flickr.com/photos/guercio/
">https://www.flickr.com/photos/guercio/</a></footer>
  </slide>


  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/wp1.png);">
     <footer class="source dark box-black"><a href="http://webbprogrammerare.se">webbprogrammerare.se</a> | <a href="http://coursepress.lnu.se">coursepress.lnu.se</a></footer>
     <aside class="note">
       <ul>
          <li>Helt öppna kurser</li>
          <li></li>

       </ul>
     </aside>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/wp1_transparent.png);">
    <article class="flexbox vcenter">

      <img src="images/oerstockholm/wordpress.png" style="background: #FFF;" class="reflect center shadow" alt="Description" title="Description">

    </article>

    <aside class="note">
      <ul>
        <li>Enkelhet</li>
        <li>Runt 20% av alla webbplatser bygger på WP (Källa:http://en.wikipedia.org/wiki/WordPress)</li>
        <li>Ett gränssnitt som många var vana vid</li>
        <li>En öppen plattform</li>
        <li>Stort utbud av plugin och stort community</li>
      </ul>
    </aside>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/wp1_transparent.png);">
    <article class="flexbox vcenter">

      <img src="images/oerstockholm/seo.png" class="reflect center shadow" alt="Description" title="Description">

    </article>
  </slide>

 <slide class="nobackground">
    <hgroup>
      <h2>Ledord</h2>
    </hgroup>
    <article class="flexbox vcenter">

     "En öppen utbildning"

    </article>
  </slide>




  <slide class="nobackground">
    <article>
      <iframe data-src="https://coursepress.lnu.se/kurs/inledande-programmering-med-csharp-ht13/"></iframe>
    </article>
    <footer class="source right"><a href="https://coursepress.lnu.se/kurs/inledande-programmering-med-csharp-ht13/">https://coursepress.lnu.se/kurs/inledande-programmering-med-csharp-ht13/</a></footer>
    <aside class="note">
      <ul>
        <a href="https://coursepress.lnu.se/kurs/inledande-programmering-med-csharp-ht13/">https://coursepress.lnu.se/kurs/inledande-programmering-med-csharp-ht13/</a>
      </ul>
    </aside>

  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/forward.jpg);">
    <article>
      <h2 class="white">Positiva effekter?</h2>


    </article>
    <footer class="source dark right"><a href="http://www.flickr.com/photos/b-tal/">http://www.flickr.com/photos/b-tal/</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/students.jpg)">
    <hgroup>
      <h2 class="white">Ökat söktryck (?)</h2>
    </hgroup>

    <article class="flexbox vcenter">
      <img src="images/oerstockholm/chart.png" class="center" alt="Description" title="Description" style="" />
    </article>
     <footer class="source dark right">Foto: LNU</footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/students2.jpg)">
    <hgroup class="box-black">
      <h2 class="white">Ökad insyn, högre kvalité (?)</h2>
    </hgroup>
    <footer class="source dark right"><a href="http://www.flickr.com/photos/klean-dk/5732678091/sizes/l/">http://www.flickr.com/photos/klean-dk/</a></footer>

  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/samverkan.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Företag och organisationer hittar oss!</h2>
    </hgroup>
    <footer class="source black right">Foto: Nisse Nilsson</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/student1.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Studenter behöver inte köpa grisen i säcken</h2>
    </hgroup>
    <aside class="note">
      <ul>
        <li>Ärligare för studenterna</li>
        <li>Bättre matchning för oss</li>
        <li>Studenten kan repetera och titta framåt!</li>
        <li>Insyn och delaktighet för studenterna</li>
      </ul>

    </aside>
     <footer class="source dark right"><a href="http://www.flickr.com/photos/universbeeld/5447907854/sizes/l/">http://www.flickr.com/photos/universbeeld/</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/admin.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Förenklad administration</h2>
    </hgroup>
    <aside class="note">
      <ul>
        <li>Enklare vid fristående kurser</li>
        <li>Enklare för mig som programansvarig</li>
        <li>Färre supportärenden</li>
      </ul>
    </aside>
    <footer class="source dark right"><a href="http://www.flickr.com/photos/29233640@N07/9590785264/sizes/l/">http://www.flickr.com/photos/29233640@N07/</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/kollegial.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Kollegial insyn</h2>
    </hgroup>
    <aside class="note">
      <ul>
        <li>Samverkan kring kurser</li>
        <li>Samverkan kring program</li>
      </ul>
    </aside>

  </slide>

    <slide class="fill nobackground" style="background-image: url(images/oerstockholm/flight.jpg)">
    <hgroup class="box-white">
      <h2 class="dark">Samarbete över gränserna</h2>
    </hgroup>
    <footer class="source dark right"><a href="https://www.flickr.com/photos/tvoe/
">https://www.flickr.com/photos/tvoe/
</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/fun.jpg)">
    <hgroup>
      <h2 class="white">Roligt!</h2>
    </hgroup>
    <footer class="source dark right"><a href="http://www.flickr.com/photos/jahdakinebrah/">www.flickr.com/photos/jahdakinebrah/</a></footer>
  </slide>

  <slide>
    <hgroup>
      <h2>Reaktioner?</h2>
    </hgroup>
    <article class="flexbox vcenter">

      <img src="images/oerstockholm/tweet.png" class="reflect center shadow" alt="Description" title="Description">

    </article>
  </slide>



 <slide class="nobackground">
    <article class="flexbox vcenter">
      <h2>Varför inte?</h2>

    </article>

     <aside class="note">
      <ul>
        <li>Blir jag överflödig? Inspelade föreläsningar</li>
        <li>Vad händer när jag slutar?</li>
        <li>Läskigt</li>
        <li>Då kanske andra kopierar mitt material?</li>
        <li>Då behöver ju studenterna inte ansöka utan kan läsa hela utbildningen ändå</li>
      </ul>
    </aside>
  </slide>


  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/open.jpg);">
    <hgroup class="box-white">
      <h2>Webbprogrammerare.se - En "öppen" utbildning</h2>
    </hgroup>
    <footer class="source right">http://www.flickr.com/photos/ohpapercut</footer>
    <aside class="note">
       <ul>
         <li>Hur kan man använda vårt material?</li>
         <li>Hur vet vi vem som använder vårt material?</li>
         <li>Kan någon kommentera på vårt material?</li>
         <li>Svårt att återföra, reuse</li>
       </ul>
     </aside>
  </slide>
  <slide class="fill nobackground" style="background-image: url(images/bibl-night.jpg)">
    <aside class="gdbar right"><img src="images/lnu-symbol-128.png"></aside>
    <article class="vleft">
      <hgroup class="flexbox  auto-fadein">
        <br /><br /><br /><br /><br /><h2>Frågor?</h2>

      </hgroup>
      <p class="auto-fadein box-white" data-config-contact>
        <!-- populated from slide_config.json -->
      </p>

    </article>

    <footer class="source dark right">Foto: Nisse Nilsson</a></footer>
  </slide>

  <slide class="fill nobackground" style="">
    <hgroup>
      <h2 class="dark">Nästa gång!</h2>
      <p style="margin-top: 100px;">
        <h3>Wikipediaprojektet och IKT-stöd på fakulteten</h3>

      </p>
      <p>
         <strong>Tid och plats:</strong><br /> 7/11 klockan 10.00. Sal ny105, Kalmar nyckel alt. via Adobe Connect
       </p>
      <p style="margin-top: 50px;">
        Mer information:<br />
        <a href="http://thajo.github.io/pedagogiskt_seminarium/">http://thajo.github.io/pedagogiskt_seminarium/</a>
      </p>
    </hgroup>
     <footer class="source dark right"></footer>

     <aside class="note">
       <ul>
         <li>Hur hitta resurserna?</li>
         <li>Svårt att avgöra kvaliten</li>
         <li>Inget system för sammarbete</li>
         <li>Svårt att återföra, reuse</li>
       </ul>
     </aside>

  </slide>

  <slide class="fill nobackground" style="background-image: url(images/opencourse.jpg)">
    <hgroup>
      <h2 class="dark">Open Source?</h2>
    </hgroup>
     <footer class="source dark right"><a href="http://www.flickr.com/photos/marcwathieu/">http://www.flickr.com/photos/marcwathieu/</a></footer>

     <aside class="note">
       <ul>
         <li>Hur hitta resurserna?</li>
         <li>Svårt att avgöra kvaliten</li>
         <li>Inget system för sammarbete</li>
         <li>Svårt att återföra, reuse</li>
       </ul>
     </aside>

  </slide>


  <slide class="nobackground">
    <article class="flexbox vcenter auto-fadein">


      <img src="images/oerstockholm/GitHub_Logo.png" class="reflect center" alt="Description" title="Description">
      <footer class="source right"><a href="https://github.com/">https://github.com/</a></footer>


    </article>
  </slide>

  <slide class="nobackground" style="background-color: #000;">
    <iframe width="780" height="439" src="https://www.youtube.com/embed/r0ji8FDNTj0" frameborder="0" allowfullscreen style="border: 0px;"></iframe>
    <footer class="source right"><a href="http://www.youtube.com/watch?v=r0ji8FDNTj0">http://www.youtube.com/watch?v=r0ji8FDNTj0</a></footer>
  </slide>

  <slide class="nobackground">
    <hgroup>
      <h2>Forkning</h2>
    </hgroup>
    <article class="flexbox vcenter">

      <img src="images/oerstockholm/fork.gif" class="reflect center" alt="Description" title="Description">

    </article>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/gh_leitet.png)">

  </slide>

  <slide  class="fill nobackground" style="background-image: url(images/oerstockholm/gh_leitet_transparent.png)">
    <article class="flexbox vcenter">
      <img src="images/oerstockholm/pull.png" class="polaroid shadow" />
    </article>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/gh_crockford.png)">

  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/keyboard.jpg)">
    <article class="flexbox vcenter auto-fadein">
      <img src="images/oerstockholm/cp_gh1.png" class="reflect center" alt="Description" title="Description">
    </article>

    <footer class="source right"><a href="http://www.flickr.com/photos/donsolo/2462966749/sizes/l/">http://www.flickr.com/photos/donsolo/</a></footer>
  </slide>

  <slide class="fill nobackground" style="background-image: url(images/oerstockholm/keyboard.jpg)">
    <article class="flexbox vcenter auto-fadein">
      <img src="images/oerstockholm/cp_gh2.png" class="reflect center" alt="Description" title="Description">
    </article>

    <footer class="source right"><a href="http://www.flickr.com/photos/donsolo/2462966749/sizes/l/">http://www.flickr.com/photos/donsolo/</a></footer>
  </slide>

<slide class="fill nobackground" style="background-image: url(images/oerstockholm/keyboard.jpg)">
    <article class="flexbox vcenter">
      <img src="images/oerstockholm/cp_gh3.png" class="reflect center" alt="Description" title="Description">
    </article>

    <footer class="source right"><a href="http://www.flickr.com/photos/donsolo/2462966749/sizes/l/">http://www.flickr.com/photos/donsolo/</a></footer>
  </slide>









  <slide class="logoslide nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/lnu-logo.png"></span>
    </article>
  </slide>

  <slide class="backdrop"></slide>

</slides>

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8523490-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<!--[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>