Webbutveckling 1 · område 7 · v.6–11
Optimering och diskret funktionalitet
Elva lektioner där ingenting nytt byggs. Din sajt ska bli lättare och tåligare: bilderna ska väga en bråkdel av vad de väger nu, och sidorna ska fungera även när JavaScript inte gör det. Det är den sista uppgiften före slutprojektet, och den prövar allt du byggt hittills.
- 12 feb Mätningen före ska vara gjord Ingen inlämning – men utan ett före-värde går det inte att visa någon förbättring, och sajten hinner ändras över sportlovet.
- 12 mars Inlämning kl 23:59 Projekt 6 – repo-länken lämnas i itslearning.
- 15 mars Prov 5 – optimering och diskret funktionalitet Skriftligt prov utan dator.
Material
Områdets uppslagsbok. Arton avsnitt om bildformat, komprimering,
srcset, lazy loading och hur du mäter din sajt i
nätverksfliken. Med felsökning, snabbreferens och ordträning.
Hur man skriver JavaScript som lägger sig ovanpå en sida som redan
fungerar. hidden-mönstret, formulär som validerar utan skript,
aria-live – och hur du testar med JavaScript avstängt.
Områdets projekt. Optimera sajtens bilder och överföringar, och se till att ingenting kraschar utan JavaScript. Kraven i tre nivåer och matrisen. Deadline 12 mars.
Avsnitt 1–6 gäller alla: att sajten inte ska krascha utan JavaScript är ett ska-krav, inte en utmaning. Det är avsnitt 10 och framåt – att skriva en egen diskret funktion – som hör till A-spåret.
Guiderna hänvisar till områdets exempelsajt – Vikstads naturreservat i
två versioner, diskret/ och hardkodad/. Den ligger som
en zip i itslearning under område 7. Packa upp den och öppna båda versionerna i
webbläsaren: flera av guidens Prova själv går ut på att jämföra dem och
mäta skillnaden.
Öppna din publicerade sajt, tryck F12, välj fliken Network, kryssa i Disable cache och ladda om. Skriv av antal requests och total vikt. Du kan inte visa en förbättring du inte har ett före-värde till, och efteråt går det inte att mäta i efterhand.
Lektionerna
Sportlovet ligger mitt i området, mellan 12 och 22 februari, och fredag 5 mars är ledig. Missade du ett pass? Sista kolumnen pekar på det du behöver läsa för att komma ikapp.
| Datum | Vad vi gör | Missade du passet? |
|---|---|---|
| tis 9/2 | Bildoptimering. Samma bild i fyra format med filstorleken uppe på projektorn. Format, komprimering, rätt dimensioner, srcset och picture. Uppgiften delas ut. |
Guiden 1–9 |
| fre 12/2 | Överföringar och laddtid. Nätverksfliken på din egen sajt: antal requests och total vikt. Lighthouse, lazy loading, typsnitt och cache. | Guiden 10–14 |
| mån 22/2 | Diskret funktionalitet. Vi stänger av JavaScript och ser vad som går sönder. De tre lagren, och vad som ska fungera utan skript. | Fördjupningen 1–5 |
| tis 23/2 | Progressive enhancement. Bygg basfunktionen i HTML och CSS, lägg skriptet ovanpå. Formulär som fungerar utan JavaScript, och aria-live. |
Fördjupningen 6–9 |
| fre 26/2 | Arbetspass. Mätningen före, och den tyngsta bilden åtgärdad. | Guiden 11 |
| mån 1/3 | Arbetspass. Resten av bilderna: flera storlekar, srcset och sizes. |
Guiden 6–7 |
| tis 2/3 | Arbetspass. Stäng av JavaScript på din egen sajt och skriv ner allt som går sönder. | Fördjupningen 11 |
| mån 8/3 | Arbetspass. Laga det: hidden-mönstret och formulären. A-spåret börjar på sin egen funktion. |
Fördjupningen 5 och 7 |
| tis 9/3 | Arbetspass. Mätningen efter, Lighthouse, och README.md. |
Kraven |
| fre 12/3 | Sista finputs. Validera, kontrollera konsolen, gå igenom checklistan. Deadline 23:59. | Innan du lämnar in |
| mån 15/3 | Prov 5. Optimering och diskret funktionalitet. Skriftligt utan dator. | Snabbreferensen |
Vad du kan efter området
- Säga vilket bildformat som passar till vad, och varför.
- Skala och komprimera en bild till den storlek den faktiskt visas i.
- Skriva
srcset,sizesochpictureså att varje skärm får rätt fil. - Mäta din sajt i nätverksfliken och säga vad den väger.
- Köra Lighthouse och läsa listan över vad som går att förbättra.
- Förklara vad diskret funktionalitet är och varför det är A-spårets kärna.
- Stänga av JavaScript och bedöma om sidan är degraderad eller trasig.
- Bygga en funktion som fungerar utan skript och blir bättre med.