App Lab 1: Tegn og lær basal programmering

Forløb hvor eleverne laver små tegninger og introduceres til programmering og digitale farver.
Portræt tegnet i JavaScript på Code.org
© Jacob Stenløkke Bendtsen

Omfang: 5-6 timer

Formål

Introduktion til:

  • programmering: trinvis forbedring, fejlsøgning, funktioner, parametre, variable og løkker
  • pixels og digitale farvemodeller: RGB(A) og HSL

Introduktion og baggrund

Introduktionsforløb der kan bruges til opstart af faget.

Forløbet er baseret på videoer og opgaver fra første del af Computer Science, Unit 3 - Intro to Programming på code.org. Forløbet er bygget op, så eleverne trinvist introduceres til elementer de skal bruge senere. Der er taget en række avancerede opgaver ud, som kun de hurtigste går videre med indtil alle har været gennem det basale. 

Materialer:

Forløbsbeskrivelse

Inden forløbet oprettes et hold med klassekode på code.org (gratis), så eleverne kan finde forløbet, og der er mulighed for at følge med i progressionen

Programmering (30-40 minutter)

CSP 3 Lektion 2: Simpel commands del 1-5

  • Slide 1: Introducer forløb.
  • Elever opretter logon og kobler sig på holdet på code.org.
  • Slide 2: Videoen Turtle Programming ses i fællesskab 
  • Vis, hvordan man på My Dashboard (i menuen øverst til venstre) kan finde sit forløb og klik hen lektion 2 del 2, hvor videoen er.
  • Lektion 2 del 3 og del 4 løses individuel - er de hurtigt færdige, går de til del 5.
  • Gennemgå løsning af del 4 i fællesskab og løsningsstrategier for opg. 2.5 - se evt. implementering, hvis nogle af eleverne har løst den.
  • Slide 3: Opsamling: sprog vs. udviklingsmiljø; rækkefølge er vigtig.

Lektie/note:

Vejledning til at komme på code.org:

  1. Opret bruger - vælg brugernavn, der er genkendelig for mig, læreren - og et password, du kan huske! https://studio.code.org/users/sign_up
  2. På brugersiden skal du nederst koble dig på holdet. - Kode udleveres af lærer. 
  3. Klik på "My Dashboard" i menuen øverst til højre for at finde kurset.

Egne funktioner (30-40 min)

CSP 3, Lektion 3: Creating Funcions del 1-5

  • Slide 4: Fælles visning af videoen Functions
  • Fælles start på opgave 3.2 med fokus på skift i værkstøjskassen/toolbox mellem turtle og functions og nødvedigheden af at kalde funktionen.
  • Individuelt løsning af opg. 3.3 til 3.5.Hurtige går videre med 3.6-3.8 og evt lektion 4.
  • Vis løsning af 3.5 i fælleskab >> funktioner - oprettelse og kald samt behov for parametre!
  • Slide 5: Opsamling

Indbyggede funktioner og parametre (20-30 min)

CSP 3, lektion 5: API's and Functions, del 1-4

Obs! Lektion 4 springes over for at holde fokus på trinvis forbedring, men hurtige/ambitiøse elever, kan gennemføre det på egen hånd.

  • Slide 6: Introduktion til dokumentation og parametre: "startværdi" til størrelse, farve, positition...
  • Individuelt: 5.2-5.4 - hurtige går videre med 5.5 osv.
  • Opsamling: fælles gennemgang af 5-4 med fokus på syntaks, god navngivning, funktioner, pixels!

Farver som parametre (60 min)

CSP 3, lektion 5: API's and Functions, del 5-9

  • Repetition/opsamling: funktioner, pixels
  • Fælles introduktion til brug af dokumentation, hvor opg 5.4 løses i fællesskab - lad hurtige elever, der har løst opgaven byde ind!
  • Introducer rgb-model og kort hvorfor 255 er største værdi.
  • Individuelt: 5.6-5.9. Obs! Ignorer HEX-notation i opg 6 - den retter fint, hvis de skriver engelsk navn
  • Slide 7: Opsamling: farver i App Lab

Programmer selvportræt (60-90 min)

CSP 3, lektion 5: API's and Functions, del 10

  • Repetition - penup/down, placering på canvas: x, y, width, height
  • Slide 8: brug af colorpicker
  • Slide 9: tegning af figurer med cirkler på cirkler!
  • Vis elever, hvordan i lektion 5 - opgave 10 - kan trykke på bland selv og gemme projektet. De får adgang til alle funktioner i app lab, men skal kun bruge turtle og functions indtil videre
  • Slide 10: Introduktion til opgave - selvportræt - laves færdig hjemme.

 Tips:

  • Brug kun absolut positionereing med moveTo() >> lettere at ændre/tilpasse senere!  
  • Start med penUp() og sæt først pen ned, hvis der skal tegnes streg eller bue.
  • Hår en lidt større cirkel i hårfarve med ansigtscirkel ovenpå 
  • Smil: cirkel over hvid cirkel der står lidt under 
  • Langt hår: streger bag ansigt 
  • Krøllet hår: flere små cirkler ovenpå hinanden
  • Ansigtstræk: tynde streger med ArcRight/ARcLeft - husk at de evt. skal roteres til rigtig start-retning med turnTo().

Opsamling (60 min)

  • Slide 11: Color Science (Pixar in a Box)
  • Slide 12: Opsamling på digitale farver - introduktion til hex-notation.
  • Vis elevernes portrætter på projektor en for en: Klik ind i "My Dashboard", klik på holdet og så på "Projects", hvor alle holdets projekter kan ses.
  • Gennemgå hvert portræt kort, med forskellige nedslag/ros til: gode kommentarer, farver, position og ekstra ros til brug af egne funktioner!

Opfølgning

Forløbet kan fortsættes med resten af Unit 3 Intro to programming, men de følgende lektioner stiger hurtigt i abstraktionsgrad og eleverne kan savne at se ikke et "rigtigt" produkt. Alternativt kan man gå igang med Unit 5, hvor de introduceres til udvikling i Design Mode og når frem til egtl. apps.

Kreditering

Udviklet af Jacob Stenløkke Bendtsen, Redaktør for EMU

Produceret i samarbejde med

Centre for Undervisningsmidler

Centre for Undervisningsmidler har ansat 30 fagredaktører med solidt kendskab til pædagogik og undervisning til at udvikle fagsiderne til de gymnasiale uddannelser på EMU (STX/HF). Fagsiderne udvikles og vedligeholdes i samarbejde med de faglige foreninger og Undervisningsministeriet.

Se mere om samarbejdet her.

CFU findes også på EMUen. Siderne vedligeholdes af CFU selv - se her. Her kan skolerne søge information om landsdækkende aktiviteter, ligesom man kan finde CFU-centrenes lokale websites.

cfu-v1.png

Relaterede moduler

Relaterede links

Online præsentation til forløbet med videoer og opsamling på dansk.
Link til forløb i Computer Science på code.org. - Opret gratis bruger for at se og afprøve indhold i del 3 Intro to Computer Programming.

Emneord