Til læreren

Introduktion

Dette forløb arbejder med en grundig gennemgang af forskellige metoder, man kan benytte til udarbejdelse af design og programmering af websites.

Mine undervisningsgange vil primært køre ud fra TLC (Teaching Learning Cycle), hvor den første fase er vidensopbygning, 2: analyse af model-tekst, 3: fælles konstruktion og 4: selvstændig konstruktion.

Målgruppe

7.-8. Klasse

Forhåndskendskab:

Eleverne behøver ikke at have nogen forforståelse inden for programmering, da man gradvis introducerer dem til det under undervisningen.
Læreren skal kunne det basale indenfor HTML og CSS. Hvis man ikke kan det på forhånd, kan man eventuelt benytte videoerne, der ligger i powerpointen.

Målsætning

Fælles mål

Læringsmål

Tegn på læring

Mål i elevsprog

Jeg har basal viden om HTML

Jeg kan læse simpel HTML-kode
Jeg kan forklare simple koder i html for andre
Jeg kan forklare HTMLs sammenhæng med CSS

Jeg kan anvende simpel HTML

Jeg kan modificere simple hjemmeside
Jeg kan udarbejde en simpel hjemmeside ud fra eget design
Jeg kan anvende CSS sammen med HTML på min egen eller andres hjemmesider

Jeg har viden om design og brugervenlighed

Jeg kan lave en prototype af min idé til hjemmeside
Jeg kan udføre min idé eller dele af den ved hjælp af kodning
Jeg kan begrunde mit design og forbedre det ud fra feedback/brugertest

Lektionsplan

Lektion 1-2

Da jeg gerne vil arbejde med TLC, så begynder jeg undervisningen med at fokusere på” building the field”, idet vi i plenum skal gennemgå, hvad eleverne ved om HTML og CSS. Efter denne brainstorming, benyttes Mozilla x-ray goggles til at vise eleverne, hvordan HTML virker, og lave om på nogle hjemmesider. Dette får de også selv lov til. Efter dette gennemgår jeg punkterne: elementer, attributter, headings (overskrifter),paragraphs, styles og formatting i plenum

Inden for SOLO-taksonomi er der tale om det præstrukturelle niveau, og indenfor computational thinking er det logisk ræsonnement.

https://goggles.mozilla.org/ X-ray goggles

Docs med kode som skal bruges i Thimble

https://docs.google.com/document/d/1NlQbqu2A6JXj3h_7n0xLBsJO2UtS1cKqwobesF1iH0U/edit?usp=sharing

Lektion 3-4

Til at starte med gennemgår vi kort, hvad vi havde om i forrige lektion. Derefter introduceres eleverne til Thimble og får nu lov til at bruge det til at indsætte de koder de lærte forrige gang.

Hvis de får tid, laves der en tænke-højt test ud fra en eksisterende hjemmeside eller i form af en powerpoint, som læreren har udarbejdet til formålet, der skal vise eleverne, hvor vigtigt designet af deres hjemmeside er, i form af hvilken information brugeren leder efter, altså brugervenligheden.

Derefter laver eleverne en prototype af en idé til en hjemmeside på et stykke papir.

Indenfor TLC så arbejder eleverne med modelling og deconstruction.

SOLO-taksonomi: unistruturelle på vej mod det multistrukturelle *

Computational thinking : Abstraktion, dekomposition, evaluering og logisk ræsonnement

*Multistrukturelle idet de laver en prototype, som de har designet på, men ikke ved hvordan man programmerer den

Lektion 5-6

Vi gennemgår nogle af de prototyper af hjemmesider, eleverne har lavet på papir, og uddeler stick-on notes, så de kan skrive de væsentlige elementer, en hjemmeside skal have. Denne brainstorming skal være med til at hjælpe de elever, som ikke havde lavet en ”ordentlig” prototype af en hjemmeside, og de kan nu indsætte de elementer, de selv syntes, de manglede på deres hjemmeside. Afslutningsvis benyttes Thimble i plenum til at implementere de eksempler, eleverne kommer med.

Indenfor TLC’en arbejdes der med modelling and deconstruction samt joint construction.

SOLO-taksonomi: Unistrukturelle & multistrukturelle

Computational thinking: Abstraktion, logisk ræsonnement, evaluering og dekomposition

Lektion 7-8

Her laves opgaver, hvor eleverne bruger plenum-eksemplet i Thimble fra sidst (downloader til egen bruger). Eleverne skal nu modificere koden. Kig på powerpointen*, hvis du mangler inspiration. Gennemgå nogle eksempler i plenum først for at undgå forvirring. Derefter arbejder eleverne videre med at modificere deres egne versioner. Afslutningsvis, så lav nogle Thimble eksempler hvor eleverne skal finde fejl i koden.

TLC: Independant construction

SOLO-taksonomi: multistrukturelle niveau & rationelle niveau.

Computational thinking: Abstraktion, logisk ræsonnement og dekomposition, Mønstre og generalisering.

*https://docs.google.com/presentation/d/109oggAonWZ988d9reEh8zc0U5TU5ejEcIPF1qSc1Lx8/edit#slide=id.p

Lektion 9-10

Til forbedring af deres hjemmeside, introduceres eleverne til CSS, som kan være med til at forbedre udseendet af deres hjemmeside. Efter at have gennemgået de simple koder, de kan benytte under ”style”, så bed eleverne om at arbejde videre med deres hjemmeside.

TLC: Independant construction

SOLO-taksonomi: multistrukturelle niveau & rationelle niveau.

Computational thinking: Abstraktion, logisk ræsonnement og dekomposition

Lektion 11-12

Eleverne får lov til at arbejde videre med deres hjemmeside. Derefter skal de lave tænke-højt test to og to, baseret på hjemmesiden, som partneren har lavet. Som evaluering laves der en Kahoot.

TLC: independant construction

SOLO-taksonomi: multistrukturelle niveau & rationelle niveau.

Didaktiske principper og overvejelser

Teaching Learning Cycle

De forskellige punkter indenfor TLC’en behøves ikke nødvendigvis at gås igennem i rækkefølge, men for at sikre sig at eleverne forstår konteksten og hvilken genre man præsenterer dem for, ville det være oplagt at påbegynde timen ved brug af feltet ” building the field ( knowledge)” / Vidensopbygning , hvor man som lærer præsenterer eleverne for genren og i plenum gennemgår hovedtrækende, samt at eleverne kommer med bud på hvilke hovedtræk genren har. I dette tilfælde er det introduktion til programmering og design af en hjemmeside

Det næste punkt som vi ville benytte er modelling and deconstruction / Model analyse, hvor læreren i plenum gennemgår et eksempel af en kode(r). Her er det en god ide at arbejde med fagbegreberne.

Nu hvor læreren har gennemgået eksempler, samt fagbegreberne, skal læreren og eleverne i fællesskab gennemgå de forskellige koder(Joint text construction). Denne fase sikrer at eleverne stilladseres til at kunne arbejde med koding, før de selv skal kastes ud i det. Da man også gennemgår dette i grupper / plenum, så sikrer det læreren at der ikke står elever tilbage som er på bar bund. Independant construction

Eleverne skal nu ved hjælp af den stilladsering de har været igennem være i stand til selvstændigt at kode. I dette trin skal eleverne selvstændigt skrive en kode til deres hjemmeside.

Som det er beskrevet ovenover i lektionsplanerne, så går man TLC modellen igennem og den følger fint med en progression af elevernes computational thinking. Indenfor denne undervisningsplan burde idealet være at man har opnået de forskellige aspekter under computational thinking.

Da eleverne også konstant laver om på det de allerede har, er det en process, fremfor små opgaver.Så i stedet for at fokusere på produktet, kommer eleverne i dette undervisningsforløb til at fokusere på processen.

Programmeringsfaglige principper og Innovation

I form af programmeringsfaglige principper har jeg gjort brug af "Use Modify Create"(Michael Caspersen)

Som tager udgangspunkt i at man tager noget, modificerer det, og dermed "forbedre" det gennem undervisningsforløbet. I dette tilfælde benytter vi os af Mozilla Xray goggles og viser eleverne hvordan man kan redigere hjemmesiderne.

Derudover modificerer vi de HTML koder som vi finder igennem Mozilla Xray goggles og skaber derfor HTML koder som eleverne kan bruge i deres eget projekt. Koderne som vi modificerer bliver gemt i et fælles Thimble, hvor der er lærerens job at indsætte en forklaring til hvad koden gør. Dette sikrer at eleverne altid kan henvises til Thimble eksemplet, hvis de skulle gå i stå. Denne metode sikrer læreren at der bliver stilladiseret tilstrækkeligt, og at eleverne afslutningsvis kan sidde og benytte sig af HTML koderne til at designe deres helt egen hjemmeside.

I form af innovation tager undervisningsplanen udgangspunkt i trinvis forfinelse, samt trinvisforbedring.

Under trinvis forfinelse tager vi HTML koderne og forklarer hvad de forskellige koder gør. Et eksempel ville være at tage selve koden for hvordan man indsætter et billede, samt breden og højden på billedet, og derefter nedbryde HTML koden ned at kunne forklare hvad width og height gør.

Her kan eleverne justere på width og height, samt "alt" for at hvad forskellen er.

Et andet eksempel ville være at vi tager fat om nogle af de ideer eleverne har om hvad en hjemmeside skal indeholde, altså taget fra stick-notes'ene samt deres prototype, og derefter i plenum finder frem til hvordan man ved hjælp af HTML koder det.

Altså tager noget der er abstrakt og udformer det til noget der er konkret.

Til trinvis forbedring tager vi udgangspunkt i hvad de har lært i koding af HTML. Her er der tale om to yderligere processer:

Udvidelse: At man arbejder videre med sine HTML koder, og at man indsætter CSS i koden.

Restrukturering: HTML koden som nu indeholder CSS har stadigvæk samme funktionalitet, men designet er nu lavet om.

Report abuse