Webbutveckling · område 5

Inför prov 3

Prov i responsiv design och tillgänglighet, skriftligt och utan dator. Den här sidan säger vad provet är, vad som kan komma och hur du pluggar. Själva innehållet står i guiden – det är dit varje rad här pekar.

10 feb Prov 3 – responsivt och tillgänglighet, kl 11:05 Onsdag, dagen efter inlämningen av Projekt 4. 50 minuter.

Så ser provet ut

Skriftligt, 50 minuter. Antal frågor, poäng och betygsgränser står på provbladet
Ingen dator, inga anteckningar, ingen mobil. Du får penna och papper
Du skriver HTML och CSS för hand. Det som räknas är att selektorn träffar rätt, att egenskaperna och attributen är de rätta, och att klamrar, parenteser och semikolon sitter där de ska
Frågorna utgår från referensprojektet, fyrsajten som nu är responsiv och tillgänglig. Men koden du själv ska skriva handlar om något annat, så det går inte att lära sig stil.css utantill och skriva av den
Provet prövar koden. Vad ett WCAG-kriterium betyder och vem det gäller är Gränssnittsdesigns, och prövas inte här

Samma kod som i din egen sajt

Provet ligger dagen efter inlämningen av en anledning. Viewport-raden, media queryn, bildregeln och fokusregeln har du just skrivit i din egen sajt. Den som förstått varför raden står där den står klarar också att skriva den för en sajt om något annat.

Vad som kan komma

Områdets sex genomgångar. Sista kolumnen är där du läser på.

Lektion	Du ska kunna	Läs
Introduktion till responsiv design	Skriva viewport-taggen och säga vad dess två delar gör. Förklara mobile first, och vad som låser en bredd så att sidan rullar i sidled	Avsnitt 1
Media queries	Skriva en media query med `min-width`, räkna om en bredd i pixlar till `em`, och säga var i stilmallen den ska stå och varför	Avsnitt 2
Flexibla och tillgängliga bilder och media	Göra en bild flexibel, läsa och skriva `srcset` och `sizes`, veta var `alt` sitter, och stänga av en övergång med `prefers-reduced-motion`	Avsnitt 3
Riktlinjer för god praxis	Känna igen brott mot kodstandarden, och skriva en kommentar som säger varför i stället för vad	Avsnitt 4
Tillgänglighet i koden	Skriva koden som rättar ett fynd: synlig fokus, kontrast i variablerna, klickyta med `min-height`, rubriknivå, `button` i stället för `div`	Avsnitt 5
Testning på olika användaragenter	Veta vad de fem testen prövar, och skilja en protokollrad som går att göra om från en som inte gör det	Avsnitt 6

Utmaningarna i avsnitt 7 – skip-länken och picture – bygger på samma kod som resten. Läs dem om du siktar högt.

Vad som inte prövas

Vad WCAG-kriterierna betyder och vem de gäller. Det är Gränssnittsdesigns, och du lärde dig det där
Användartestet och testrapporten. De hör till Gränssnittsdesign. Testrapporten lämnas in dagen efter provet
JavaScript. Kommer i område 6

Så pluggar du

Sex saker, i den här ordningen. Den femte är den som ger mest och som flest hoppar över.

Plugglista

Kört ordträningen i guidens snabbreferens tills du klarar hela listan
Läst avsnitt 1 till 6 en gång var
Öppnat referensprojektets stil.css och läst kommentarerna märkta Pass 36 till Pass 40 – de förklarar varför, inte bara vad
Räknat om pixlar till em på papper några gånger, med olika tal, tills du inte behöver tänka efter
Skrivit koden för hand på papper minst en gång, utan att titta: en grundregel och en media query som lägger till, en bild med srcset och sizes, och en fokusregel
Gått igenom din egen sajt och pekat på raden i koden som uppfyller varje ska-krav i Projekt 4

Kryssen sparas i din webbläsare.

Punkt fem är den som avgör

Att läsa kod och att skriva kod är två olika färdigheter, och provet prövar den andra. Har du aldrig skrivit en media query utan autokomplettering märker du det för första gången under provet. Det är sällan egenskapernas namn som sitter löst – det är de dubbla klamrarna, parentesen runt villkoret och kommatecknen i srcset.

Så kan det se ut när du övar

Ta en sajt om något helt annat och skriv samma mönster. Här en boklista för ett bibliotek, byggd mobile first:

.boklista {
  display: grid;
  gap: 1rem;
}

/* 40em: här får två bokkort plats bredvid varandra utan att
   titlarna bryts ord för ord. */
@media (min-width: 40em) {
  .boklista {
    grid-template-columns: 1fr 1fr;
  }
}

Och en omslagsbild i tre bredder, som visas i full bredd på telefonen och 20rem bred från 40em:

<img src="bilder/omslag-640.jpg"
     srcset="bilder/omslag-320.jpg 320w,
             bilder/omslag-640.jpg 640w,
             bilder/omslag-960.jpg 960w"
     sizes="(min-width: 40em) 20rem, 100vw"
     width="640" height="960"
     alt="Bokomslag: en röd stuga vid vattnet i kvällsljus.">

Kontrollera sedan mot guiden: är varje klammer stängd, står w efter varje bredd, och sitter alt på img?

Om du är sjuk på provdagen

Hör av dig samma dag, inte veckan efter. Du får skriva provet vid ett annat tillfälle, men du behöver komma överens med mig om när.