Guide · Webbutveckling område 1

Så växte webben fram

Guiden till område 1. Här står allt som prov 1 kan fråga om när det gäller webbens historia, funktion och terminologi. Den fungerar utan att du varit på lektionen.

1. Internet och webben är inte samma sak

Internet är infrastrukturen: kablar, fiber, radiolänkar och datorer som är sammankopplade och har kommit överens om hur de ska prata med varandra. Internet fanns i tjugo år innan webben.

Webben är en av tjänsterna som går ovanpå internet. E-post är en annan. Nätverksspel är en tredje. När ett spel säger "no internet connection" är det inte webben som saknas.

Det är därför du kan ha internet men inte komma åt en webbplats: ledningarna fungerar, men servern svarar inte.

2. Tidslinjen

Två slutsatser att bära med sig:

3. Klient och server

  KLIENT                                      SERVER
  din webbläsare  ─────  förfrågan  ─────▶   dator som väntar
                  ◀─────   svar    ──────    på förfrågningar

• Klienten frågar alltid först. Servern hör aldrig av sig självmant till din webbläsare.
• Servern är bara en dator som står påslagen. Den väntar på förfrågningar och svarar. Det finns inget magiskt med den.
• En förfrågan per fil. Först hämtas HTML-dokumentet. Sedan läser webbläsaren det och upptäcker att den behöver en stilmall, fyra bilder och ett skript – och frågar efter dem, en i taget.

Den sista punkten förklarar mycket. En sida med trettio bilder betyder trettio förfrågningar utöver dokumentet. Varje förfrågan tar tid, även när filen är liten. Det är därför tunga sajter känns långsamma på dålig uppkoppling.

4. Adressen: URL:ens delar

URL står för Uniform Resource Locator: en unik adress till en resurs.

https://www.exempel.se/kurser/webb/index.html
└─┬──┘   └─────┬─────┘└──────┬───────┘└──┬───┘
protokoll   domännamn      sökväg     filnamn

Sista raden är hela anledningen till att startsidan ska heta index.html. Det är inte en regel din lärare hittat på – det är vad servern letar efter när ingen fil är angiven.

En URL kan också ha fler delar:

https://www.exempel.se/sok?q=webb&sida=2#resultat
                          └────┬───────┘└───┬───┘
                          frågesträng    ankare

• Frågesträngen efter ? skickar värden till servern. Du möter den i formulär.
• Ankaret efter # hoppar till ett ställe på sidan. Det skickas aldrig till servern.

5. DNS – från namn till nummer

Servrar har nummer, inte namn. Numret kallas IP-adress.

www.exempel.se   ──DNS──▶   93.184.216.34

DNS, Domain Name System, är internets telefonkatalog. Innan din webbläsare kan fråga servern måste den ta reda på vilket nummer domännamnet motsvarar. Den frågan går till en DNS-server, och det är den första av flera datorer som blandas in innan sidan visas.

Svaret sparas en stund i din dator, så nästa gång du besöker samma sajt hoppas steget över.

Varför namn alls? För att människor inte kommer ihåg siffror. Och för att servern kan bytas ut utan att adressen ändras – man pekar bara om namnet till ett nytt nummer.

6. HTTP: förfrågan och svar

HTTP är språket klienten och servern talar. En förfrågan säger i princip "ge mig den här filen", och svaret innehåller filen plus information om hur det gick.

Metoder

Statuskoder

Servern svarar alltid med en kod som säger hur det gick.

Koderna grupperas efter första siffran: 2 betyder lyckat, 3 omdirigering, 4 klientens fel, 5 serverns fel.

HTTPS

S:et står för secure. Trafiken krypteras, så att någon som lyssnar på nätverket bara ser brus. Det skyddar två saker: att ingen kan läsa vad du skickar, och att ingen kan ändra i sidan på vägen.

Alla sajter ska använda HTTPS idag, inte bara de som hanterar lösenord. GitHub Pages ger dig det automatiskt.

7. Vad som händer när du trycker enter

De fem stegen. De är innehållet i ditt första projekt, så kunna dem.

1. Adressen tolkas. Webbläsaren delar upp URL:en i protokoll, domännamn och sökväg.
2. DNS slår upp namnet. Domännamnet översätts till en IP-adress.
3. Förfrågan skickas. Webbläsaren kopplar upp sig mot servern och ber om filen.
4. Servern svarar. Statuskod plus innehållet, oftast ett HTML-dokument.
5. Webbläsaren bygger sidan. HTML läses uppifrån och ner. Varje bild, stilmall och skript som nämns leder till en ny förfrågan. När allt kommit tillbaka ritas sidan upp.

Hela kedjan tar normalt mindre än en sekund, och inblandade datorer är minst tre: din, en DNS-server och webbservern.

8. Webbens tre språk

De ska hållas isär. En sida ska fungera med bara HTML, se bra ut när CSS läggs till, och bli smidigare när JavaScript kommer på plats. Det är därför du bygger ostilad HTML i område 2 innan du får röra CSS i område 3.

9. Standarder och varför de finns

En standard är en överenskommelse om hur något ska fungera. W3C och WHATWG skriver webbens standarder, och webbläsartillverkarna följer dem.

Vinsten: kod som följer standarden fungerar i alla webbläsare, på alla operativsystem, på alla enheter. Det kallas interoperabilitet och är ett av kursens centrala begrepp.

Validering är att låta ett program kontrollera att din kod följer standarden. Du kommer att göra det i varje uppgift från och med område 2. Det tar trettio sekunder och hittar fel som annars visar sig först hos någon annan.

Användaragenter

En användaragent är vad som helst som hämtar din sida. Inte bara webbläsare:

• Webbläsare på dator, telefon och surfplatta
• Skärmläsare som läser upp sidan för någon som inte ser
• Sökmotorernas robotar
• Program som hämtar sidan för att sammanfatta den

Alla besökare är inte människor med ögon. Det är därför strukturen i HTML spelar roll, och varför en bild utan alt är osynlig för en del av din publik.

10. Webbens samhällspåverkan

Webben ändrade fyra saker i grunden. Du behöver kunna resonera om dem, inte rabbla dem.

Tillgång. Saker som krävde en resa eller ett telefonsamtal görs på trettio sekunder. Samtidigt försvann alternativen: när blanketten och kassan togs bort blev det digitala vägen inte en väg utan enda vägen.

Makt. Webben har ingen ägare, men de flesta går genom ett fåtal företags tjänster varje dag. När ett av dem ändrar sina regler ändras villkoren för miljoner människor utan att någon röstat om det.

Digitalt utanförskap. En del av befolkningen klarar inte av att göra ärendet på nätet. Det handlar sällan om ålder i sig, utan om syn, motorik, språk, uppkoppling, ekonomi eller att gränssnittet helt enkelt är illa gjort. Det sista bestämmer du över.

Att lita på det man ser. Vem som helst kan publicera vad som helst. Källkritik gick från att vara en färdighet för journalister till att vara vardagsarbete för alla.

Allt du bygger i den här kursen kommer någon annan att använda. En del av dem ser dåligt, har långsam uppkoppling eller är stressade. Du bestämmer om det går för dem.

11. Ta det längre

Titta på en riktig HTTP-förfrågan. I DevTools → Nätverk, klicka på en rad och välj fliken Headers. Du ser vad din webbläsare skickade och vad servern svarade, rad för rad.

Sidan från 1991 finns kvar. Sök upp den första webbsidan på CERN:s webbplats. Notera att den fungerar i din webbläsare trettiofem år senare. Bakåtkompatibilitet är en av webbens grundprinciper: gammal kod slutar inte fungera.

Ta reda på var en server står. Kommandot ping exempel.se i terminalen visar IP-adressen och hur lång tid svaret tog. Ju längre bort servern står, desto längre tid.

Cachning. Webbläsaren sparar filer den redan hämtat. Därför går andra besöket fortare, och därför ser du ibland en gammal version av din egen sida. Ctrl+F5 tvingar fram en riktig omladdning.

12. Felsökning

13. Ordlistan

Alla ord här kan komma på prov 1.

Statuskoderna i korthet