Så fungerar webben

Lärarlett projekt. Deadline onsdag 2 september kl 23:59.

2 sept Inlämning kl 23:59 Committa och synka. Repolänken ska ligga i itslearning.

Uppdraget

Du ska bygga en webbsida som förklarar vad som händer från att någon skriver en adress och trycker enter tills sidan syns på skärmen. Sidan ska rikta sig till någon som inte kan något om webben – en klasskamrat från ett annat program, en förälder, ett syskon.

Vi bygger den tillsammans i klassrummet, steg för steg. Du kodar med på passet, läraren visar på projektor. HTML-grunderna lär du dig på köpet – de gås igenom ordentligt först i nästa område.

Sidan publiceras med GitHub Pages och länken delas i klassen.

Kom igång

Skapa ditt repo från mallen i itslearning och klona det till VS Code. Klistra in repots adress i uppgiften i itslearning direkt – det är så inlämningen hittas.
Skriv de fem stegen som fem rubriker i index.html, innan du skriver någon text. Strukturen först, innehållet sen.
Committa och synka direkt när du har rubrikerna. Kontrollera att de syns på github.com. Gör det nu, så vet du att flödet fungerar innan du har något att förlora.

De fem stegen

adress → DNS → förfrågan → svar → sidan visas

Kryssen nedan sparas i din webbläsare. De är till för dig, inte för läraren.

Ska-krav — nivå E

Sidan förklarar de fem stegen: adress → DNS → förfrågan → svar → sidan visas
Ett komplett HTML-dokument med <!doctype html>, <html lang="sv">, <head> och <body>
<meta charset="utf-8"> finns, och å ä ö visas rätt
En <title> som beskriver sidan
Minst en rubrik per steg och brödtext som förklarar steget
Minst en bild med alt-text som beskriver bilden
Minst en länk till en källa
Sidan är publicerad via GitHub Pages och länken fungerar

Bör-krav — nivå C

Sidan använder semantiska element: <header>, <main>, <footer>
Stegen är en ordnad lista eller egna avsnitt med tydlig ordning
En ordlista över de tio begreppen från ordlistan, med egna formuleringar
Förklaringen håller för frågan "varför då?" – inte bara vad som händer, utan varför

Utmaningar — nivå A

En egen illustration av flödet, gjord i Illustrator eller Figma och exporterad som SVG
Sidan förklarar vad som händer när något går fel – 404 och vad den betyder
Du förklarar skillnaden mellan internet och webben så att den blir begriplig
Du testar sidan på någon som inte läser kursen och skriver ner en sak de inte förstod

Tekniska krav

Krav	Vad som gäller
Startsida	`index.html` i repots rot
Filnamn	Gemener, bindestreck i stället för mellanslag, inga å ä ö
Bilder	I mappen `bilder/`, relativa sökvägar
Indentering	2 mellanslag
Publicering	GitHub Pages från `main`
Inlämning	Repots adress inklistrad i uppgiften i itslearning, och arbetet committat och synkat. Det som inte syns på github.com finns bara på din dator

Bedömningsmatris

Kriterium	E	C	A
Kunskaper om webbens funktion	De fem stegen finns med och är i rätt ordning	Stegen förklaras med egna ord och hänger ihop	Du förklarar också varför det är byggt så, och vad som händer när det inte fungerar
Webblösning anpassad till syfte och användare	Sidan går att läsa och navigera	Innehållet är anpassat till någon som inte kan ämnet	Förklaringen är prövad på en riktig läsare och justerad efter det
Tillgänglighet	Bilder har alt-text, sidan har `lang` och `charset`	Rubriknivåerna är i ordning och alt-texterna är beskrivande	Sidan fungerar med enbart tangentbord och alt-texterna bär informationen själva
Genomförande	Sidan är publicerad i tid	Arbetet är gjort löpande, med flera commits	Commit-historiken visar ett arbete som byggts stegvis, inte kvällen före

Vanliga misstag

Man committar men synkar aldrig. Arbetet finns bara på den egna datorn och syns inte för läraren.

Bilden ligger i fel mapp eller har stor bokstav i filnamnet. Lokalt fungerar det, på GitHub Pages blir det 404. Kontrollera alltid den publicerade sidan, inte bara förhandsvisningen.

Sidan förklarar vad orden betyder men inte vad som händer. Det är flödet som är uppgiften.

Allt görs sista kvällen. Uppgiften bygger på fyra pass i klassrummet – hänger du inte med där blir det mycket svårare hemma.