Webbutveckling 1 · område 1

Från adress till sida

Vad som faktiskt händer mellan att du trycker enter och att sidan syns. Det här är underlaget till projektet vi bygger tillsammans – sidan du lämnar in ska förklara precis den här kedjan.

• 4 sept Inlämning kl 23:59 Så fungerar webben. Länken till ditt publika repo lämnas i itslearning.

1. Internet är inte webben

Det här är den skillnad som oftast blir fel, så ta den först. Internet är näten och kablarna – vägarna. Webben är en av tjänsterna som åker på dem – trafiken. E-post, spel och strömmad video använder samma vägar utan att vara webben.

Att det bara fanns HTML 1991 är värt att lägga märke till: kursen följer samma ordning. Område 2 är struktur, område 3 är form, område 6 är beteende.

2. Klienten frågar, servern svarar

Klienten är din webbläsare. Den frågar. Servern är en dator som står påslagen dygnet runt. Den svarar. HTTP är reglerna för hur frågan och svaret får se ut.

Ett anrop har alltid två delar: en förfrågan och ett svar. Servern gör ingenting av sig själv – ingen sida kommer utan att någon har bett om den. Det som ser ut som en sida är i själva verket ett dokument som i sin tur ber om bilder, stilmallar och skript, var och en med sitt eget anrop.

Varje svar börjar med en statuskod. Fyra du kommer att möta:

3. DNS – från namn till nummer

Servrar har nummer, inte namn. 142.250.74.110 är en adress. google.com är ett namn som någon måste slå upp åt dig. Den uppslagningen heter DNS.

1. Webbläsaren tittar i sitt eget minne. Har jag frågat nyligen?
2. Operativsystemet tittar i sitt.
3. Frågan går vidare till en namnserver, oftast internetleverantörens.
4. Den frågar uppåt tills någon svarar med rätt nummer.
5. Svaret sparas en stund. Nästa gång går det på millisekunder.

Poängen är sista steget: uppslagningen görs nästan aldrig, för svaret ligger sparat i flera lager. Det är också därför en ändrad DNS-post kan ta timmar att slå igenom – gamla svar ligger kvar tills de går ut.

4. Adressens delar

Allt i adressfältet betyder något. Delarna kommer tillbaka i område 2, när du börjar länka mellan dina egna sidor.

https://www.example.se/kurser/webb/index.html?niva=1#krav

Två som är värda att minnas. index.html är förvalet – därför heter startsidan så i den här kursen, och därför fungerar example.se/kurser/ utan filnamn. Och fragmentet lämnar aldrig din dator: servern får aldrig veta vilken rubrik du hoppade till, det är webbläsaren som scrollar.

5. Titta själv i DevTools

Öppna en sajt som laddar mycket – en nyhetssajt fungerar bra – och gör det här medan du har sidan uppe. Kryssen sparas i din webbläsare.

Kryssen sparas i din webbläsare. Nollställ alla kryss

6. Vem stängs ute?

Webben är inte bara teknik. Bank, vård, myndigheter och skola ligger där nu, och det som är svårt att använda blir därmed svårt att leva med. Digitalt utanförskap är inte bara att sakna internet – det är lika ofta att den som byggde inte tänkte på dig.

• Den som ser dåligt, förstorar texten eller lyssnar på sidan i stället för att läsa.
• Den som har en långsam eller dyr uppkoppling. En sida på 12 MB kostar pengar.
• Den som har en gammal telefon och ingen möjlighet att byta.
• Den som inte har någon dator alls och sköter allt i mobilen.

Det här är skälet till att bilder ska ha alt och formulärfält ska ha label i allt du lämnar in, från och med nästa vecka. Område 4 handlar om ingenting annat.

7. Vanliga missförstånd

8. Ord du ska kunna

Orden nedan används resten av kursen utan att förklaras om. Träna på dem här – knappen tar ett slumpat ord i taget.