Webbutveckling · område 2

Projekt 1 – Flersidig ostilad webbplats

Din första riktiga webbplats. Flera sidor, inget CSS, och bilderna från ditt eget bildpaket.

13 okt Inlämning kl 23:59 Repolänk och Pages-adress i itslearning.

Uppdraget

Du ska bygga en webbplats på minst fyra sidor, helt utan CSS. Ämnet är detsamma som ditt bildpaket från Gränssnittsdesign – bilderna du gjorde i september är de som ska in här. Sajten ska gå att förstå, navigera och läsa upp av en skärmläsare utan att en enda rad formgivning finns.

Att den är ostilad är inte en förenkling, det är hela poängen. En sida som fungerar utan CSS fungerar för alla. En sida som bara ser rätt ut med CSS är byggd i fel ordning, och det märks inte förrän någon stänger av stilmallen eller kommer med en skärmläsare.

Den här sajten är grunden du stilsätter i november. Bygg den så att du vill arbeta vidare på den.

Välj en form

Ämnet är ditt eget. Formen väljer du bland de fem här – alla fem kräver samma delar, men de blir olika sajter.

Form	Vad sajten är	Sidor det brukar bli
Guiden	Så gör du något, steg för steg	Start · steg 1–3 · material · frågor
Platsen	En plats eller ett evenemang	Start · om platsen · program · hitta hit
Samlingen	En katalog över flera saker	Start · översikt · två detaljsidor · bidra
Föreningen	En klubb eller en verksamhet	Start · om oss · schema · bli medlem
Recensionerna	Omdömen om flera saker	Start · recensioner · betygslista · tipsa oss

Kan du inte välja

Ta Samlingen. Den passar nästan alla bildpaket, eftersom sex bilder som hör ihop redan är en samling.

Kom igång

Skapa repot och de fyra tomma sidorna först. index.html och tre till, alla med samma grundstruktur. Innehållet kommer sedan.
Lägg in navigeringen på alla fyra innan du skriver en enda rad text. Då upptäcker du direkt om sökvägarna är fel, i stället för i oktober.
Kopiera in bildpaketet i en bilder/-mapp och skriv alt-texterna medan bilderna är färska i minnet.

Kryssen nedan sparas i din webbläsare.

Bör-krav — nivå C

Du kan motivera dina elementval – varför article här och section där, varför just den rubriknivån
Länktexterna fungerar utan sammanhang. Ingen länk heter klicka här eller läs mer
Formuläret har fieldset och legend där fälten hör ihop, och rätt type på varje input
Tabellen har scope satt rätt på både rad- och kolumnrubriker
alt-texterna är skrivna för den som inte ser bilden – inte bild på hamnen utan vad bilden visar
Sajten är testad i två webbläsare och på telefon, och du kan säga vad som skilde

Utmaningar — nivå A

En ankarlänk-navigering på en lång sida, med fungerande hopp tillbaka till toppen
audio eller video med undertext eller transkript
Du har läst sajten med skärmläsare eller enbart med tangentbord, och kan berätta var det gick trögt och vad du ändrade
En sida använder <table> med både thead, tbody och <th scope="row">, och går att följa rad för rad
Du kan förklara var du valde bort ett element som hade varit frestande men fel

Tekniska krav

Krav	Vad som gäller
Filstruktur	`index.html` i roten, övriga sidor i roten, bilder i `bilder/`
Filnamn	Gemener, bindestreck i stället för mellanslag, inga å ä ö
Sökvägar	Relativa. `bilder/hamn-kran-1200.webp`, aldrig `/bilder/…`
CSS	Ingen. Ingen `style`-tagg, inget `style`-attribut, ingen `.css`-fil
Teckenkodning	UTF-8 utan BOM
Validering	W3C-validatorn, noll fel på samtliga sidor
Webbläsartest	Två olika webbläsare, plus telefon
Var det lämnas	Repolänk och Pages-adress i itslearning

Bedömningsmatris

Kriterium	E	C	A
Struktur och semantik	Sidorna har header, nav, main och footer, och en h1 per sida	Elementvalen är motiverade och rubrikhierarkin håller genom hela sajten	Strukturen bär innehållet så väl att den går att läsa som en innehållsförteckning
Innehåll och navigation	Fyra sidor som når varandra med relativa sökvägar	Länktexterna fungerar lösryckta, navigeringen är konsekvent	Sajten går att röra sig i utan att gissa, även med enbart tangentbord
Tabell och formulär	En datatabell och ett formulär finns, med caption och label	scope, fieldset och legend är satta rätt, input-typerna stämmer	Tabellen går att följa rad för rad, formuläret är begripligt utan att ha setts förut
Tillgänglighet	Alla bilder har alt, alla fält har label	alt-texterna beskriver innehållet för den som inte ser bilden	Sajten är testad med skärmläsare eller tangentbord och åtgärdad efter testet
Kvalitetssäkring	Validerar utan fel och är publicerad	Testad i två webbläsare, skillnaderna kända	Felen är förebyggda snarare än rättade – koden var ren första gången

Innan du lämnar in

Sista passet, 13 oktober, är till för det här. Gå igenom i tur och ordning:

Validera varje sida. Inte bara startsidan. Laga det översta felet först och validera om – ett fel orsakar ofta tio.
Klicka igenom navigeringen på den publicerade adressen, inte i VS Code. Det är där sökvägsfelen visar sig.
Kontrollera att bilderna syns publicerat. Stavning och skiftläge måste stämma exakt – servern skiljer på Bild.jpg och bild.jpg, din dator gör det inte.
Öppna sajten i en andra webbläsare. Skillnader i formulärfält och rubrikstorlek är förväntade och ofarliga.
Lämna båda adresserna i itslearning: repot och den publicerade sidan.

Provet dagen efter

Prov 1 är 14 oktober, skriftligt utan dator, och utgår från referensprojektet Fyrar längs Bohuskusten. Guidens snabbreferens är det du repeterar på.