Mikael skriver om programmering, systemadministration och mycket annat!

2013-04-09

Jag som driver denna blog heter Mikael Tylmad, är född 1984 och bor i en förort till Stockholm som heter Tullinge. Där bor jag med min fru och en dotter som heter Tilde (eller ~ som jag brukar kalla henne).

Jag jobbar som systemadminstratör på högstadieskolan Södertörns friskola, där jag också driver skolans datorklubb. Jag tycker att det behövs mer programmering på högstadiet!

Min meritförteckning (pdf)


Min dotter ~ som vid fyra månaders ålder bekantar sig med en dator.	Jag är och vandrar på Island. Vulkaner är häftiga, Island är i princip en stor vulkan => Island är häftigt.

För det mesta håller jag på med lite allt möjligt, dock alltid något som jag vill göra. Om man sysslar med saker som man inte trivs med blir resultatet oftast dåligt. Exempel på saker som jag gillar:

Systemadministration: Sedan 2006 har jag installerat, konfigurerat och administrerat linux-servrar, linux-klienter och windows-klienter på Södertörns friskola. Jag trivs själv bäst i linux och finner alla andra alternativ undermåliga. Om det ska skriptas gör jag det helst i bash, men jag inser fördelen med kraftfullare språk som exempelvis perl. I skrivande stund administrerar jag ett antal webbservrar (mestadels Apache) som hanterar ett tiotal olika webbtjänster (många egenutvecklade, några wordpress och annat gott och blandat). Utöver servrar och klientdatorer så bygger jag och sköter om trådade samt trådlösa nätverk.
Undervisning: På Södertörns friskola driver jag Datorklubben där jag undervisar elever på högstadiet och gymnasiet. På Tullinge Gymnasium har jag totalt fyra gånger hållit i en 50p gymnasiekurs som heter Datalogi A (en lokal kurs som vi gjort allt material själva till, inklusive en kursbok). Det senaste året har jag jobbat som gästföreläsare för teknik-fyran på Tumba Gymnasium.
Webbutveckling: Jag utvecklar ofta olika typer av webbtjänster och jag använder mig i princip uteslutande av PHP på serversidan.
Läromedelsutveckling: Det är väldigt roligt att syssla med undervisning och jag söker alltid efter den mest pedagogiska lösningen. När det gäller programmering har jag jobbat med att göra undervisningen roligare och samtidigt bättre. Detta har resulterat i en lärobok som använder spelprogrammering för att lära ut programmering: Spelprogrammering.nu med HTML5 och JavaScript. Denna lärobok har också en egen hemsida: www.spelprogrammering.nu. Givetvis är hela boken skriven i LaTeX.
Frisbeegolf: Den enda sport jag sysslar med är frisbeegolf, och detta har jag gjort sedan 1996. Numera spelar jag oftast på Visättra sportcenter, men har tidigare spelat mycket på Järva.
Hiking: Hiking är det bästa sättet att uppleva naturen på. Min favorit-hike är Laugavegur på Island, som jag gått två gånger. Utöver Island har jag också vandrat i Härjedalen och även gått runt Mount Blanc-massivet längst med den berömda TMB-rutten, en riktigt trevlig och spektakulär vandring.
Brädspel: Jag älskar att spela brädspel. Bland favoriterna finns Dominion, Race for the galaxy, Titan, och många andra!

Maila din kommentar till mikael@tylmad.com, så lägger jag in den under inlägget.

Skapa online-pussel med jQuery

JavaScript-biblioteket jQuery lämpar sig utmärkt om man snabbt vill göra ett peka-och-klicka spel. Jag gav några elever uppdraget att skapa online-spel för små barn, och första idén blev att göra pussel.

Steg ett var att för hand rita de motiv som pusslen ska baseras på. Ett av dessa pussel skulle bli en vacker solnedgång, och resultatet blev (efter att ha skannats) följande:

Vi laddade sedan in bilderna i en dator och efterbehandlade de lite. Prefekt tillfälle att träna på hur man använder Gimp! I Gimp är det dessutom enkelt att skära ut pusselbitar ur originalbilderna. Solnedgången fick följande bitar:

Tanken är nu att pusselbitarna ska finnas blandade runt om på skärmen, och i mitten ska det finnas en svartvit, svagt utsuddad version av det färdiga pusslet så att man får lite hjälp att lösa pusslet. Bakgrundsbilden kan också Gimp hjälpa oss med:

Nu är det dags att börja programmera! Vi börjar med lite enkel HTML-kod. En grundregel med HTML är att man ska få med all data som en sida/applikation ska innehålla, men hålla sig från att skriva in beteende och design. Därför är det helt korrekt att nu börja vårt pusselspel med att fylla HTML-koden med alla bilder som pusslet består av:

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Ett pussel!</title>
  </head>
  <body>
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella_svartvit_bakgrund.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella1.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella2.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella3.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella4.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella5.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella6.png" />
  </body>
</html>

Detta är ännu inte så imponerande. Du kan se resultatet här:
http://mikael.tylmad.com/files/2013/04/pussel_steg1.html.

För att positionera den svartvita-bakgrunden lite bättre kan vi lägga till lite CSS, och vi passar på att ge hela sidan ett trevligare intryck.

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Ett pussel!</title>
    <style>
      html
      {
        background-color: black;
      }
      #bakgrund
      {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -219px;
        margin-left: -367px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <img id="bakgrund" src="http://mikael.tylmad.com/files/2013/04/Isabella_svartvit_bakgrund.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella1.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella2.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella3.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella4.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella5.png" />
    <img src="http://mikael.tylmad.com/files/2013/04/Isabella6.png" />
  </body>
</html>

Visserligen en lite enkel och kanske ful lösning för att centrera den gråa bakgrunden på skärmen, men det fungerar :-)
http://mikael.tylmad.com/files/2013/04/pussel_steg2.html.

För att nu lägga till intelligens till pusselspelet behövs jQuery samt jQuery UI. Dessa bibliotek används extremt mycket numera på nätet, och inkluderas bäst i koden genom att man använder deras egna CDN:er. För att få jQuery UI att fungera bra på enheter med petskärm behövs biblioteket jQuery UI Touch Punch. Detta får man ladda hem och lägga på samma plats som HTML-filerna.

Totalt behövs alltså tre inkluderade filer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://mikael.tylmad.com/js/jquery.ui.touch-punch.min.js"></script>

Koden som behövs för att nu göra våra pusselbitar flyttbara är totalt en rad lång.

<script>
  $(".pusselbit").draggable();
</script>

Här väljer vi ut alla HTML-element som tillhör klassen pusselbit och gör dem dragbara. I HTML-koden kommer vi givetvis behöva ge bilderna rätt klass, men hela den resulterande koden blir fortfarande väldigt simpel:

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Ett pussel!</title>
    <style>
      html
      {
        background-color: black;
      }
      #bakgrund
      {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -219px;
        margin-left: -367px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <img id="bakgrund" src="http://mikael.tylmad.com/files/2013/04/Isabella_svartvit_bakgrund.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella1.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella2.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella3.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella4.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella5.png" />
    <img class="pusselbit" src="http://mikael.tylmad.com/files/2013/04/Isabella6.png" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://mikael.tylmad.com/js/jquery.ui.touch-punch.min.js"></script>
    <script>
      $(".pusselbit").draggable();
    </script>
  </body>
</html>

Testa att lägga pusslet:

http://mikael.tylmad.com/files/2013/04/pussel_steg3.html.

Nästa naturliga steg är att vidareutveckla designen på sidan och kanske ha några olika pussel som man kan lägga. Det skulle också vara snyggt med lite mer JavaScript-kod som exempelvis slumpar ut pusselbitarna på skärmen varje gång man laddar ett pussel, och som kanske inser när pusslet är färdigt. Jag återkommer!

Maila din kommentar till mikael@tylmad.com, så lägger jag in den under inlägget.

Programmering är roligt!

Mikael skriver om programmering, systemadministration och mycket annat!

Populära inlägg: Programmering på högstadiet, Programmering i läroplanen.

Kolla in min bok: Spelprogrammering med HTML5 och JavaScript

Kategorier ↓