Teknik · Årskurs 6

Idéer för aktivt lärande

Webbplatser och webbläsare

Aktivt arbete med webbplatser och webbläsare ger eleverna konkreta insikter om hur digitalt innehåll skapas och tolkas. Genom att själva undersöka, modifiera och skapa webbsidor utvecklar de en djupare förståelse för hur kod och design samverkar för att skapa funktionella webbplatser.

• Skolverket Kursplaner
• Lgr22: Teknik 4-6, Centralt innehåll, Informations- och kommunikationsteknik, Internet och hur information överförs
• Lgr22: Teknik 4-6, Centralt innehåll, Teknikutvecklingsarbetets olika faser, Skisser, ritningar och modeller

• 25–50 min
• Par → Hela klassen
• 4 aktiviteter

Aktivitet 01

• Flipped Classroom
• 30 min · Par

Utforska Developer Tools: Webbläsarinspektion

Låt elever öppna en webbsida i Chrome eller Firefox och aktivera developer tools (F12). De inspekterar element, ändrar CSS-färger live och ser hur DOM-trädet uppdateras. Avsluta med att de antecknar tre förändringar och deras effekter.

Förklara hur en webbläsare visar en webbsida på din skärm.

Handledningstips

Under 'Utforska Developer Tools' uppmanar du eleverna att alltid ha HTML-element markerade när de ändrar CSS, så de direkt ser sambandet mellan struktur och utseende.

Vad att leta efter

Ge eleverna en lapp där de ska rita en enkel skiss av hur en webbsida kan se ut. De ska sedan skriva en mening som förklarar hur en webbläsare skulle tolka minst två olika element (t.ex. en rubrik och en bild) för att visa det på skärmen.

• Förstå
• Tillämpa
• Analysera
• Självreglering
• Självkännedom

Aktivitet 02

• Flipped Classroom
• 45 min · Smågrupper

Webbplatsjämförelse: Gruppanalys

Dela in elever i grupper som analyserar tre webbplatser: en nyhetssida, en butik och en spelportal. De noterar struktur, design och syfte i en tabell. Grupperna presenterar fynd för klassen.

Jämför olika typer av webbplatser och deras syften.

Handledningstips

När grupperna analyserar webbplatser i 'Webbplatsjämförelse' ställer du frågan 'Vem är målgruppen?' först, så eleverna fokuserar på syfte snarare än estetik.

Vad att leta efter

Visa två webbplatser med tydligt olika design (t.ex. en barnspelssida och en banktjänst). Ställ frågor som: 'Vilket syfte verkar varje webbplats ha?', 'Hur skiljer sig designen åt för att passa syftet?', 'Vilken av dessa sidor tycker ni är lättast att använda och varför?'

• Förstå
• Tillämpa
• Analysera
• Självreglering
• Självkännedom

Aktivitet 03

• Flipped Classroom
• 50 min · Individuellt

Enkel Webbsida: Skissa och Kod

Elever skissar en personlig startsida på papper, kodar grundläggande HTML och CSS i en online-editor som CodePen. De testar i webbläsare och itererar baserat på kamratfeedback.

Analysera hur designen av en webbplats påverkar användarupplevelsen.

Handledningstips

I 'Enkel Webbsida' visar du en färdig mall för HTML-strukturen innan eleverna börjar skissa, så de förstår ramarna för sitt arbete.

Vad att leta efter

Be eleverna identifiera och skriva ner tre olika typer av information eller funktioner de hittar på en specifik webbplats (t.ex. en nyhetssida). De ska sedan kort beskriva syftet med varje identifierad del (t.ex. 'sökfunktion för att hitta artiklar', 'bildgalleri för att visa händelser').

• Förstå
• Tillämpa
• Analysera
• Självreglering
• Självkännedom

Aktivitet 04

• Flipped Classroom
• 25 min · Par

UX-Test: Navigationsutmaning

Visa en webbsida med bra och dålig navigering. Elever i par tidtagar varandra när de letar efter specifik info och diskuterar hur designen påverkar hastighet och frustration.

Förklara hur en webbläsare visar en webbsida på din skärm.

Handledningstips

För 'UX-Test' ser du till att alla testgrupper får samma uppgift, så jämförelsen av navigationslösningar blir tydlig och rättvis.

Vad att leta efter

Ge eleverna en lapp där de ska rita en enkel skiss av hur en webbsida kan se ut. De ska sedan skriva en mening som förklarar hur en webbläsare skulle tolka minst två olika element (t.ex. en rubrik och en bild) för att visa det på skärmen.

• Förstå
• Tillämpa
• Analysera
• Självreglering
• Självkännedom

Några anteckningar om att undervisa detta avsnitt

Erfarna lärare börjar med att visa hur en enkel HTML-fil tolkas av webbläsaren, helst genom att läsa upp koden högt medan eleverna följer med. Undvik att förenkla för mycket i början, eftersom eleverna ofta har svårt att förstå skillnaden mellan innehåll och presentation. Använd analogier som 'byggnadsritning (HTML), färg och form (CSS), och funktioner (JavaScript)' men var tydlig med att de inte är perfekta. Låt eleverna arbeta i par eller små grupper, eftersom diskussioner fördjupar förståelsen. Slutligen, upprepa alltid sambandet mellan kod och rendering för att stärka kopplingen till verkligheten.

Eleverna ska kunna beskriva hur en webbläsare tolkar HTML, CSS och JavaScript för att rendera en webbsida. De ska även kunna diskutera hur designval påverkar användarupplevelse och funktionalitet. En framgångsrik lektion inkluderar både praktiska experiment och reflekterande diskussioner.

---

Se upp för dessa missuppfattningar

• Under 'Utforska Developer Tools' lyssnar många elever på att förklara att webbplatser är bara statiska bilder.

  Be eleverna att öppna developer tools och peka ut HTML-elementen bakom bilderna på webbsidan. Uppmuntra dem att ändra text eller bakgrundsfärg live för att se att innehållet är dynamiskt och tolkas av webbläsaren.

• Under 'Webbplatsjämförelse' tror elever ofta att webbläsaren laddar hela sidan på en gång.

  Använd nätverksverktyget i developer tools för att visa hur resurserna laddas stegvis. Be grupperna att anteckna vilka element som laddas först och sist, och diskutera varför ordningen är viktig.

• Under 'UX-Test' antar elever att design endast handlar om utseende och inte påverkar funktionalitet.

  Låt eleverna jämföra två versioner av samma webbsida med olika navigationslösningar. Uppmuntra dem att diskutera hur varje designval påverkar hur snabbt uppgiften kan lösas, och koppla detta till syftet med webbplatsen.

---

Metoder som används i denna översikt

• Flipped Classroom