We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Hoe werkt het web biedt een vereenvoudigde kijk op wat er gebeurt als u een webpagina in uw browser op uw computer of telefoon bekijkt.

Op korte termijn is deze theorie niet van essentieel belang, maar als u webcode wilt schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor u echt van die kennis begint te profiteren.

Clienten en servers

Computers die met het web verbonden zijn, noemen we clienten eservers. Zo ziet een eenvoudig diagram van de interactie tussen hen beide er uit:

  • Clienten zijn de typische toestellen van een webgebruiker die met het internet verbonden zijn (uw computer is bijvoorbeeld verbonden met uw Wi-Fi, of uw telefoon met uw mobiele netwerk). De term slaat ook op de software die deze apparaten gebruiken om zich met het web te verbinden (meestal een webbrowser zoals Firefox of Chrome).
  • Servers zijn computers waarop zich webpaginas, sites of apps bevinden. Als een client een webpagina wil openen (dat is het verzoek of request in het Engels), wordt een kopie van de webpagina van de webserver naar de client gedownload en vervolgens weergegeven in de browser van de gebruiker (dat is het antwoord of de response). 

De andere instrumenten in de gereedschapskist

De client en de server die we hierboven hebben beschreven, vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.

Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als uw huis. Aan de andere kant is de server en die is een winkel waar u iets wilt kopen.

 Behalve de client en de server moeten we ook hallo zeggen tegen: 

  • Uw internetverbinding: Die laat u data versturen en ontvangen op het web. U kunt zich die voorstellen als de straat tussen uw huis en de winkel. 
  • TCP/IP: Transmission Control Protocol and Internet Protocol zijn communicatieprotocollen die bepalen hoe data door het web moet reizen. Ze zijn als de transportmechanismen die u een bestelling laten plaatsen, u naar de winkel laten gaan en inkopen doen. In ons voorbeeld zijn ze als een auto of een fiets of elk ander vervoermiddel dat u van A naar B helpt.
  • DNS: Domain Name Servers zijn de adresboeken van websites. Als u een webadres in uw browser typt, kijkt de browser eerst in de DNS voor hij de website kan ophalen. De browser moet er eerst achterkomen op welke server de website bestaat, zodat hij HTTP-berichten naar de juiste plaats kan versturen (zie hieronder). Het is alsof hij het adres van de winkel opzoekt, zodat u ernaar toe kunt gaan. 
  • HTTP: Hypertext Transfer Protocol is een applicatieprotocol dat een taal voor clienten en servers definiëert, zodat ze met elkaar kunnen praten. U kunt dit vergelijken met de taal die u gebruikt om uw artikelen te bestellen.
  • Component files: (componentbestanden) Een website bestaat uit veel verschillende bestanden, die lijken op de artikelen die u in de winkel koopt. Deze bestanden bestaan voornamelijk uit deze twee types:
    • Codebestanden: Websites worden voornamelijk met HTML, CSS en JavaScript gebouwd, hoewel u later nog andere technologieën zult tegenkomen.
    • Assets: (middelen) Dit is een verzamelnaam voor alle andere onderdelen die samen een website maken. Het zijn afbeeldingen, muziek, video, Worddocumenten en PDF's.

Wat er gebeurt er nu precies?

Stel dat u een webadres in uw browser typt (analoog met: stel dat u naar de winkel gaat), wat gebeurt er dan?

  1. De browser gaat naar de DNS-server en vindt het echte adres van de server waarop de website staat (u vindt het adres van de winkel).
  2. De browser verzendt een bericht met HTTP-verzoek erin naar de server en vraagt die een kopie van de website naar de client te sturen (u gaat naar de winkel en u bestelt uw artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs uw internetverbinding met TCP/IP verstuurd.
  3. Als de server het verzoek van de client goedkeurt, stuurt de server een boodschap met daarin "200 OK". Dit betekent zoiets als: "maar natuurlijk kunt u die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (chunks in het Engels) worden verdeeld (de winkel geeft u uw artikelen en u neemt ze mee naar huis). Die brokken noemen we data packets (datapakketjes).
  4. De browser stelt de kleine brokken samen tot een volledige website en toont die aan u (de goederen arriveren aan uw deur  — nieuw blinkend materiaal, geweldig!).

DNS uitgelegd

Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die u in uw adresbalk typt om uw favoriete websites te vinden. Een webadres is een serie getallen zoals deze: 63.245.215.20.

Zo'n getallenreeks noemen we een IP-adres en het staat voor een unieke locatie op het web. Het is echter niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat u in de adresbalk van uw browser typt (zoals "mozilla.org") aan het echte (IP-)adres van de website vastkoppelen.

Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door 63.245.215.20 in de adresbalk van een nieuwe tabpagina in uw browser te typen.

A domain name is just another form of an IP address

Paketten uitgelegd

Eerder hebben we de term "pakketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client wordt verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web wordt verstuurd, als duizenden kleine brokken worden verzonden, zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.

Zie ook

Illustratie

Straatfoto: Street composing, door Kevin D.

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: evelijn, mientje
Laatst bijgewerkt door: evelijn,