Webbutveckling 1 · område 4 · projekt

Projekt 3 – Webbplats från egen wireframe

Nu ritar du sajten innan du bygger den. En wireframe i två bredder, en sajt som fungerar lika bra i telefonen som på skärmen, och en tillgänglighet som är kontrollerad i stället för gissad.

• 20 nov Wireframen ska vara klar Ingen inlämning – men härifrån bygger du, och åtta arbetspass återstår.
• 11 dec Inlämning kl 23:59 Repo-länken och Figma-länken lämnas i itslearning-uppgiften.
• 14 dec Prov 3 – responsivt, UX och tillgänglighet Skriftligt prov utan dator.

1. Uppdraget

Du ska rita en webbplats innan du bygger den, och sedan bygga den så att den fungerar lika bra i en telefon som på en skärm – och för den som inte använder mus.

Tre saker bedöms, och de hänger ihop i den ordningen:

1. Wireframen. En skiss av sidan i två bredder, mobil och desktop, som visar var innehållet ligger och hur viktigt det är. Ritas först, byggs sedan.
2. Den responsiva sajten. Byggd från wireframen, med brytpunkter som kommer ur innehållet i stället för ur en lista på telefonmodeller.
3. Tillgängligheten. Kontrollerad med WAVE, inte gissad. Du lämnar in en mätning före och en efter, så att arbetet syns.

Det här är kursens största arbetsblock – nio arbetspass. Det är också första gången du bestämmer hur sajten ska se ut innan du börjar skriva kod.

2. Två vägar – du väljer

Wireframen är obligatorisk. Vilken sajt den föreställer bestämmer du.

Båda vägarna bedöms med samma matris. Matrisen frågar efter wireframe, brytpunkter, UX och tillgänglighet, och de kraven ser likadana ut oavsett vilken sajt du valde.

Säg till mig vilken väg du tar innan du börjar koda, så vet jag vad jag tittar på.

3. Sajten ska ha

Oavsett väg gäller samma minimum, och det är samma omfattning som Projekt 1:

• Minst fyra sidor som hänger ihop med en gemensam navigation
• Semantisk struktur som validerar
• Bilder med alt-text
• Ett formulär med kopplade etiketter
• En extern stilmall

Väljer du att bygga vidare har du redan allt det här. Väljer du att börja om är det första du bygger, och guiderna från område 2 och 3 gäller fortfarande.

4. Kraven

Kryssa av allt eftersom. Kryssen sparas i din webbläsare.

Nollställ alla kryss

5. Tekniska krav

6. Bedömningsmatris

Så här bedöms sajten, kriterium för kriterium. Tisdag 8 december gör ni kamratrespons i par utifrån den här matrisen – då har du tre dagar kvar att göra något åt det ni hittar.

Ingen rad väger tyngre än någon annan. Men en sajt som inte validerar eller inte är publicerad är inte inlämnad, oavsett hur den ser ut.

7. Kom igång – de tre första sakerna

1. Bestäm väg: bygga vidare eller börja om. Skriv det i din README.md redan nu.
2. Öppna Figma-mallen från itslearning och duplicera den. Rita mobilramen först, och bara block – rektanglar med etiketter.
3. Lägg in viewport-taggen i head på alla dina sidor och öppna sajten i telefonen.

Det tredje steget är den här raden. Den tar två minuter och visar dig vad hela projektet handlar om – jämför sajten i telefonen före och efter:

<meta name="viewport" content="width=device-width, initial-scale=1">

8. Så ligger tiden

9. Innan du lämnar in

Gå igenom listan på fredagen den 11 december, i den här ordningen.

1. Wireframen har två ramar, mobil och desktop, med samma innehåll.
2. Figma-länken är inlämnad.
3. Viewport-taggen finns i head på alla sidor.
4. Sajten är läsbar vid 375 px utan vågrät rullning.
5. Minst en @media-regel, och du vet varför brytpunkten ligger där.
6. Minst en bredd är satt i % eller fr.
7. Brytpunkten är motiverad i README.md.
8. Alla bilder har alt, alla fält har label.
9. Hela sajten går att nå med enbart Tab, och fokus syns.
10. Kontrasten är kontrollerad, inte gissad.
11. WAVE-rapport före och efter ligger i README.md.
12. Provad på en riktig telefon.
13. Noll fel i HTML-validatorn och i CSS-validatorn.
14. Allt committat och synkat, adressen fungerar i ett privat fönster.
15. Repo-länken är inlämnad i itslearning.

10. Felsökning