Grundskoleprogrammeringskurs

Från Wikiskola
Hoppa till navigering Hoppa till sök

Förra årets kurs:

Programmeringskursen 2013

Lektion 1

Dagens lektion

Förberedelse

  • Ställ i ordning salen
  • Högtalare
  • Lånedatorer

Agenda

  1. Vi presenterar oss kort för varandra
  2. Varför denna kurs
    1. Mina första datorer
    2. Producera inte bara konsumera
    3. Så mycket lättare att lära idag
  3. Skolans nätverk
  4. Wikiskola har informationen
  5. Kursens innehåll
    1. Fem tillfällen om 60 minuter
    2. Mest javascript
    3. Kom gärna med förslag!

Datorer jag kommit i kontakt med

Expandera rutan nedan så ser du ett galleri med några av de datorer --Håkan Elderstig 20 oktober 2012 kl. 09.11 (UTC) kommit i kontakt med genom åren.



Presentation av kursinnehållet

1 Program - vad är det

  • Presentation, berätta vad ni kan
  • Närvaro
  • Turtle på skärm
  • Visa ping-pong-kod
  • Quintus

2 Loopar och villkorssatser

Loopar

  • Teori
  • Kahn

Villkorssatser

  • Teori
  • Code Academy

3 Lego demo skärm?

  • Ryan
  • Ev3 via bluetooth och egna loopar
  • Kollisionssensor

4 Elever demonstrerar

  • Räta linjen Andreas
  • Viktor gymnasiearbetet

5 Javascript, CSS och html5

Dagens innehåll: Program - vad är det

Mål för undervisningen Du kommer att lär dig
Vad ett program är
Ett enkelt sätt att programmera fina mönster


  • Turtle på skärm
http://logo.twentygototen.org
RT 100
LT 90
Repeat 8 [ ]
repeat 8 [ fw 100 rt 90 fw 50 rt 90 fw 30 rt 45 fw 60 ]
clear make "r 1 repeat 36 [ COLOR [:r 12 12] fw 20 lt 10 repeat 8 [ fw 100 rt 90 fw 50 rt 90 fw 30 rt 45 fw 60 make "r :r + 1 ] ]
färgkoder
Fler exempel på Logoprogrammering

Startlänkar till Khan Academy

Grunder i programmering med javascript

[[File:Khan academy leaf.jpg|Khan academy leaf] | right]

Intro to drawing
Intro to coloring
Titta även på fliken documentation under rutan.
Intro to variables

Om du vill lära dig mer: Vi har hoppat in på några ställen i den här omfattande kursen. Det är absolut en bra idé att gå tillbaks till början och gå igenom hela materialet.

Läxa! Gör åtminstone Sneak Peek


Lektion 2 - Lego Mindstorms EV3

Mål för undervisningen Du kommer att lära dig om
robotstyrning
modulär programmering


Det finns en dator i legoroboten. Databussar. Sensorer.

Programmering av roboten. Robot C, LabView.

Visa exempel på hur ett program ser ut.

Lös uppgiften med att ta sig genom labyrinten. Diskutera i gruppen och jämför olika lösningar.


Lektion 3

Mål för undervisningen Du kommer att lära dig om
loopar
villkorssatser


Loopar

Animation basics En funktion som uppdateras.
Intro to While Loops

Funktioner

Functions

Villkorssatser

If statements

_____

En alternativ sajt...

Code Academy

Hur funkar Code Academy?

CodeAcademy är en sajt med interaktiva övningar där du kan lära dig flera olika programmeringsspråk. Det finns kurser i html, CSS, Python, Ruby, Javascript, APIS, mm.. Code Academy är annorlunda än Khan Academy. Den är mindre grafisk och mer inriktad på att du skriver kod.

Du loggar in på Code Academy med Facebook, Google eller Twitter. Sedan kommer CA ihåg vilka övningar du gjort så du kan fortsätta där du slutade gången innan.

I första html-övningen får man förklarat för sig hur man gör när man använder Code Academys sajt. Testa här.

Om du klickar på Me uppe till höger och My Profile kan du se vilka övningar du påbörjat och hur långt du kommit.

Vi ska lära oss javascript

Vi ska göra övningar på CodeAcademys grundkurs i javascript: Du kan börja här. Tanken är inte att hinna hela kursen på en lektion men vi kommer att göra så mycket att du förhoppningsvis vill fortsätta på egen hand.

Javascript och html

Om man vill se direkt hur koden fungerar behöver den finnas i en html-sida. Det kan man göra här. Och fler exempel här.

För lärare

  • Tips om hur man som lärare lägger upp kurser. Tips om hur man startar en datorklubb på skolan.

Lektion 4 - Elevdemonstrationer

Spelprogrammering.nu

här finns en bra testmiljö.

Kopiera in kod och testa

Ett kodexempel från Lite_javascript#Jobba_sj.C3.A4lv En förstas javascriptövning

Det är bara att ta något av scriptan nedan och kopiera in ovanför <script>

Exempel på kod

function start()
{
  rectangle(10, 20, 400, 250, "blue");
  circle(20, 50, 150, "yellow");
  circle(200, 150, 70, "red");
  triangle(100, 20, 180, 100, 60, 80, "green");
  ring(400, 200, 100, 10, "gray");
  line(100, 350, 750, 100, 10, "pink");
}

Te ett exempel, modifiera och spara

Eller något exempel från den sidan: http://www.spelprogrammering.nu/r2/index

Testa Flygande cirkeln
Testa styr en boll med piltangenterna funkar inte bra på Mac.
enkelt ritprogram
Utveckla det med fler färger och att man byter färg med en tangenttryckning.
Lägg till färgade boxar och text i en palett.
Byt färg om man pekar på en box.
Titta på mitt utvecklade ritprogram. Det finns i 'arkivet:’ Ritprogram med flera färger
katt och råtta-spelt är bra

Använd pilen uppe till vänster för att spara.

Lektion 5 - javascript, CSS och html5

Viktor E demonstrerar IR-sensor.

PPT
Demo

Mer spelprogrammering.nu.

  • Några spelutvecklingsideer
    • pacman
    • Bilar kör ikapp
    • Gubbar som slåss
    • Skjutspel med parabel
    • Plocka helt enkelt fram de mest avancerade övningarna från boken
  • Andra tänkbara projekt
    • Bygg vidare på ritprogrammet med paletter att klicka på, punktstorlek, mm.
    • Kolla Zombierna och gör en liknande med andra bilder som slumpas fram med varierande riktningar, färger och former.
    • Rita en logotyp för något du gillar och animera den.
    • Skapa ett matematiskt mönster. Jämför med Turtle-övningen.

Lite om html 5 och css

Hur plockar man ut javascriptet till en hemsida på sin dator eller webben?

Avsluta med diplomutdelning

Äldre javascriptövningar

Dessa övningar kör man i browsern på sin dator och mediterar med exempelvis Text Wrangler.

Javascript och spel

Sajten som följer med boken Spelprogrammering med Javascript heter: http://spelprogrammering.nu

Coolt exempel: http://browserquest.mozilla.org

Javascriptövningar

Lite Javascript

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan


Html5, CSS3 och Javascript

Html5, CSS3 och Javascript är den nya standarden för hemsidor.

De stora företagen enats. W3C konsortium.

Html står för innehåll och struktur, CSS ger formen och Javascript ger interaktion och animation.

Jobba själv

Det vi ska göra nu tar omkring två lektioner men du får räkna med att jobba lite hemma också.

Vi kommer att använda TextWrangler som är gratisversionen av BBEdeit vilket är ett mycket populärt program att koda i. Fördelen med en speciell editor för kodning är bland annat att den färgmarkerar din kod så att du lättare upptäcker fel. Dessutom håller editorn koll på olika filtyper och extensions som .css, .js, .html mm.

Uppgift
  1. Skaffa editeringsprogrammet TextWrangler från App Store.
  2. Lägg alla filer i en och samma mapp på din dator. Spara rita.js, library.js och rita.html i en mapp på din dator och verifiera att det funkar. Ändra inte namn på filerna
  3. Pröva att ändra några mått och lägen för de geometriska figurerna i javascriptfilen rita.js. Spara. Titta hur det blev genom att öppna html-filen i Safari. Ha gärna Wrangler och Safari i två fönster bredvid varandra på skärmen.
  4. Rita en bakgrundsbild med cirklar, rektanglar och streck.
  5. Rita en liten figur som du kan använda i framtida animeringar och spel.
  6. Låt figuren vandra över skärmen.


Praktiska tips

  • Surfa med Safari
  • OM du använder Chrome - Spara som ren html

Javascript med animering

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan

Nu ska vi göra saker som rör på sig.

Uppgift
  1. Som vanligt har vi förberett några filer. Lägg filerna i samma mapp som tidigare. Spara ner
    http://www.wikiskola.se/javascript/rita2.js
    Bild på en groda
  2. Ändra i html-filen så att du anropar rita2.js
  3. Gör så att grodan rör sig.
  4. Få den att stanna i rutan.
  5. Få bort spåret som den lämnar efter sig.
  6. Byt till en annan figur
  7. Lägg in en stor bild som bakgrund.
  8. Testa att låta figuren färdas i andra banor.


Javascript: Interaktion med användaren

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan

Nu ska vi göra program där användaren kan styra händelser. På www.spelprogrammering.nu finns det exempel på program som man kan skriva. Det går att skriva alla möjliga olika program.
Vi vill även visa ett halvfärdigt pacman-spel.

Uppgift
Gör så att pac man rör sig

Idag ska ni få göra ett program som är interaktiv, det vill säga att användaren kan styra det.

Här är länkar ni behöver om ni vill titta på Pacman i er egen dator:


Fortsätt pröva och lär!

Bibliotek

  • jQuery enligt Wikipedia: "Det används av nästan 35% av de 1 000 000 mest besökta hemsidorna och är just nu det populäraste JavaScript-biblioteket.".
  • Processing är ett eget språk och ett program där man skapar grafik. men det finns också en vriant i javaScript: http://processingjs.org . Processing är avancerat och tar ett tag att lära sig. Programmet upptar drygt 10 000 rader kod.
  • Three - ett 3D-bibliotek

Ställen som liknar Code Academy

Tutorials

HTML5 och CSS

Pragmatisk En webbplats med pragmatisk inriktning mot html och CSS. Med stöd från internetfonden.
Twitter, Bootstrap

Böcker mm

Kanske i framtiden

Google Dart

En förbättrad Pacman med funktioner

Dels i samma fil och dels i en annan fil. Ladda ner dem och prova.

Utveckla Pac Man-exemplet

Vi jobbar med olika förbättringar och avslutar med att kombinera dem till ett spel. Gör dem som functions.

  • Genomskinlig bakgrund på bilderna. Och Pacman med stängd mun.
  • Kanter och gränser som man inte kan köra igenom. (svår)
  • Flera saker att äta
  • Två spelare
  • gamla svarta bollar ska inte ligga kvar och skräpa.
  • Bollarna läggs ut automatiskt
  • Bollarna flyttar på sig efter en slumpmässig tid.
Hämtad från ”https://wikiskola.se/index.php?title=Grundskoleprogrammeringskurs&oldid=26056”