Lektionsplanering

Årskurs: Gymnasiet
Ämne: Programmering 1
Tema: Webbutveckling och API:er

Koppling till styrdokument

Lektionsplaneringen avser att täcka centrala innehållsområden inom webbutveckling, inklusive HTML, CSS, JavaScript och hur API:er används för att interagera mellan applikationer och webbsidor.

Kunskapskrav

Eleven kan bygga och presentera en enkel webbsida med HTML och CSS samt göra grundläggande interaktioner med JavaScript och API:er.

Lärarledda instruktioner

Introduktion till webbutveckling (10 min)

• Definiera vad webbutveckling innebär och dess olika komponenter.
• Diskutera HTML, CSS och JavaScript och deras roller i utvecklingen av webbsidor.
• Presentera exempel på vad som går att åstadkomma med webbutveckling.

HTML – Strukturera en webbsida (15 min)

• Gå igenom grunderna i HTML och dess struktur.
• Visa hur man skapar grundläggande HTML-element såsom rubriker, stycken, länkar och bilder.
• Ge exempel på hur man bygger en enkel webbsida med HTML.

CSS – Styla en webbsida (10 min)

• Introducera CSS och dess syfte att styla HTML-element.
• Förklara hur man använder CSS för att ändra färger, typsnitt och layout.
• Demonstrera exempel på hur man kan styla en webbsida.

JavaScript – Interaktivitet på webben (10 min)

• Förklara vad JavaScript är och hur det används för att skapa interaktiva webbsidor.
• Beskriv hur man kan manipulera HTML-element med JavaScript.
• Visa exempel på en enkel JavaScript-funktion som reagerar på en användaråtgärd.

API:er – Kommunikation mellan system (5 min)

• Introducera begreppet API (Application Programming Interface) och dess funktion.
• Ge exempel på hur API:er används för att hämta data från externa källor.
• Diskutera hur API:er kan integreras i webbutveckling.

Aktivitet

Eleverna kommer att arbeta i grupper för att skapa en enkel webbsida som använder HTML, CSS och JavaScript. De ska också implementera minst en API-anrop, till exempel för att hämta väderdata. Användaren kan skriva “Aktivitet” så tar jag fram en fullständig aktivitetsbeskrivning.

Exit-ticket

• Vad står HTML för?
  • HyperText Markup Language.
• Vad är syftet med CSS?
  • Att styla och formge HTML-element.
• Hur används JavaScript på webben?
  • För att skapa interaktivitet och dynamik på en webbsida.
• Vad är ett API?
  • En uppsättning regler och protokoll för att interagera med mjukvaror och tjänster.
• Ge ett exempel på vad man kan använda API:er till.
  • För att hämta information från externa tjänster, som väderdata.

Hemuppgift

Som hemuppgift ska eleverna designa en webbsida för en fiktiv produkt, inklusive HTML-kod, CSS-stilar och en kort JavaScript-funktion. De ska också skriva en rapport som sammanfattar deras design och vilka API:er de skulle kunna använda för att förbättra funktionaliteten på webbsidan. Denna hemuppgift kan fungera som en läxa för alla och som en kompletteringsuppgift för frånvarande. Användaren kan skriva “Hemuppgift” så tar jag fram en färdig hemuppgift baserat på detta förslag.

Citat

“The web does not just connect machines, it connects people.” – Tim Berners-Lee, 2008. Citatet betonar hur viktig webben är för kommunikation och relationer mellan människor, och hur webbutveckling har en central roll i detta.

Nästa lektion

För nästa lektion föreslås temat “Tester och kvalitetssäkring”. Detta är relevant eftersom tester är avgörande för att säkerställa att mjukvara fungerar som avsett och att kvaliteten är hög. Användaren kan skriva “Nästa” så tar jag fram en lektionsplanering baserat på detta förslag.