Het web

Wat is "het web"?

• World Wide Web (WWW)
  • Conseil Européen pour la Recherche Nucléaire (CERN)
    • ​Doel: makkelijker delen van documenten
  • Tim Berners Lee (UK) & Robert Calliau (BE)

Evolutie van het web

• World Wide Web (WWW)
  • 1989: voorstel
  • 1990: creatie
    • Allereerste website: https://info.cern.ch/
  • 1991: HTML (protocol)
  • 1995: World Wide Web Consortium (W3C)

De evolutie van het web

• Web 1.0 (± 1991 - 2004)
  • Statisch, weinig interactie
  • Informatie weergeven en raadplegen
  • Hyperlinks

De evolutie van het web

• Web 2.0 (± 2004 - ...)
  • Dynamisch, interactief
  • User-generated content (UGC)
  • Facebook, Youtube, Flickr, Wikipedia ...

De evolutie van het web

• Web 3.0 (?)
  • Gedecentraliseerd (blockchain)
  • Veel onduidelijkheid, bezorgdheden en skepticisme
  • Ethereum, IPFS, Brave browser ...

Hoe werkt het web?

Hoe werkt het web?

• How the web works (Github)
  • DNS lookup
  • Web (HTTP) server antwoordt met HTML, CSS, JS, afbeeldingen ...
  • Parsing, rendering en painting
  • Tada! 🔥🚀

Hoe werkt het web?

• How the web works (Github)
  • Complex proces
  • Web 1: schrijven van code die
    wordt weergegeven door een browser
  • Welke code?
    • HTML: indeling, semantiek
    • CSS: uiterlijk, stijl
    • Javascript: interactiviteit

Browsers

Welke browser wordt het meest gebruikt?

Chrome!

Mobile vs. Desktop

Welk toestel wordt het meest gebruikt?
Mobile of Desktop?

Mobile!

Mobile!

Hoeveel % van de mensen wereldwijd hebben een desktop computer?

28%

Dat is niet veel hé?

Hoeveel % van de mensen wereldwijd hebben een smartphone?

70%

De meeste websites worden dus bekeken op een smarthphone en niet op een desktop computer

Wat leren we hieruit?

Iedereen surft in een andere context, dus we moeten onze websites en code hieraan aanpassen:

• Browser compatible:
  We zorgen dat onze site goed werkt op verschillende browsers
• Mobile first:
  We bouwen en optimaliseren eerst voor smartphone
• Accessibility:
  We zorgen dat onze site duidelijk is voor mensen met minder ervaring en toegankelijk is voor zij die een beperking hebben
• Responsiveness:
  We zorgen dat onze site werkt op alle schermgroottes

Schermresoluties

Hoeveel verschillende schermgroottes zijn er?

Ontelbaar veel

Ontelbaar veel

Ontelbaar veel

Ontelbaar veel

Ookal zal de website het meest bekeken worden op mobile, toch moet alles ook goed werken op andere schermgroottes

Toegankelijkheid

Hoeveel % van Vlaamse bevolking kan goed overweg met het internet?

60%

40% heeft lage digitale vaardigheden 😱

Hoe surft iemand met een zeer beperkt zicht op het internet?

Of iemand die zijn armen niet kan bewegen? Of iemand die doof is?

Conclusie

• Browser compatible: We zorgen dat onze site goed werkt op verschillende browsers
• Mobile first: We bouwen en optimaliseren eerst voor smartphone
• Responsiveness: We zorgen daarna dat onze site werkt op alle schermgroottes
• Accessibility: We zorgen dat onze site toegankelijk is voor mensen met minder ervaring en mensen met een beperking

Iedereen surft in
een andere context

We moeten zorgen dat onze code hierop aangepast is.