"Om de juiste technische keuzes te kunnen maken, moet u eerst de technische mogelijkheden kennen."

In dit hoofdstuk volgt een overzicht van de belangrijkste technieken die worden gebruikt, van HTML tot PHP en van PNG tot Flash.

1. Client-server architectuur

Een client op internet wordt hier de computer of de browser van de bezoeker mee bedoeld.
De server is de computer binnen het grote internetnetwerk waar webpagina's opstaan. Er zijn miljoenen servers met miljoenen websites die door miljoenen bezoekers kunnen worden geraadpleegd.

We maken onderscheid in statische en dynamische websites.

  1. Statische websites

    Dit is een website opgebouwd uit HTML-pagina's die op een server staan. De browser doet het verzoek aan de server en de server stuurt de betreffende HTML-pagina naar de browser.
  2. Dynamische websites

    Dit is een website met een databasekoppeling. Het wordt onder andere toegepast voor gastenboeken, zoekmachines, webwinkels, voorraadlijsten, klantenoverzichten, ...Het werkt ook volgens de client-server architectuur. De client vraagt een webpagina op, deze pagina bevat een script dat een koppeling legt met een database. Het script zal de gevraagde database-informatie vertalen naar HTML, waarna de server de webpagina terugstuurt naar de client.Je kan niet zien dat een database is geraadpleegd in de code.Twee veel gebruikte scripttalen zijn ASP (Microsoft) en PHP (opensource).  PHP werkt met de database MySQL en heeft als extensie .php, dit zie je in de adresbalk van de browser.

2. Clientside en serverside talen

Het verschil zit in de plaats waar de taal zijn werk doet: aan de clientside (in de browser) of aan de server-side (op de server).
Een serverside script produceert HTML. Een taal als HTML doet zijn werk aan de clientside, hetzelfde geldt voor JavaScript.

Een groot nadeel is dat de programmeur niet weet welke browser de websitebezoeker gebruikt. Niet elke browser kent alle codes van de taal en niet elke browser vertaalt op dezelfde manier. Dit is een bekend probleem van JavaScript.

2.1 Clientside taal:

1. HTML

Hypertext Markup Language is de basis om webpagina's te maken. De code kan in een eenvoudige tekstverwerker getypt worden.

2. CSS

Als je alleen HTML gebruikt om een website te bouwen, bevat deze de inhoud en opmaak van de site (via style="").
Met CSS kan je dit loskoppelen, dan schrijf je de inhoud van de site met HTML en de vormgeving met CSS.
Voordeel: je kan het in één keer voor de hele site veranderen.

3. JavaScript

Dit wordt gebruikt om webpagina's interactiever, dynamischer en intelligenter te maken. Veel websites maken hier gebruik van, het wordt vaak gebruikt in combinatie met CSS.

Wat kan je zoals met JavaScript?

  • Formulieren valideren
  • Berekeningen uitvoeren bv. een bestelling in een webwinkel
  • Cookies toepassen
  • Controleren welke browser of welk platform iemand heeft
  • Browserverster verschalen
  • Uitklapmenu's
  • Print methode

Veel mensen maken de fout de term JavaScript af te korten tot Java. Dit is niet hetzelfde.

Java is een echte programmeertaal, de code moet worden gecompileerd: dit is het omzetten van de code naar een taal waar de computer beter mee om kan gaan.
Het is een objectgeoriënteerde taal, deze taal is veel strikter en complexer.

JavaScript is een scripttaal en hoeft niet worden gecompileerd.

4. XML

XML (Extensible Markup Language) is een taal om inhoud van documenten mee te structureren.
Je hoeft maar één XML-document te schrijven en je kan het vervolgens voor meerdere systemen gebruiken, zoals het web, een mobiele telefoon, drukwerk en PDA.

In een XML wordt de informatie beschreven met HTML-achtige codes in een hiërarchische structuur.

5. HTML5 en CSS3

HTML5  brengt multimedia en interactie zonder plugins naar het web.
HTML5 is een W3C-standaard sinds oktober 2014.

Enkele nieuwe HTML5 elementen:

  • @font-face
  • Canvas
  • HTML5 Audio
  • HTML5 Video
  • Geolocation API
  • Local Storage
  • SVG
  • Query Selector
  • WebSQL Database
  • Drag & Drop
  • ...

Enkele nieuwe CSS3 elementen:

  • border-radius
  • opacity
  • rgba()
  • box-shadow
  • text-shadow
  • Background Size
  • Multiple backgrounds
  • border-image
  • CSS Animations
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS Transitions
  • FlexBox
  • ...

Enkele jQuery's elementen:

jQuery is een lichtgewicht, "schrijf minder, doe meer",JavaScript-bibliotheek.

Het doel van jQuery is om het veel gemakkelijker te maken om JavaScript op uw website te gebruiken.

  • Selecteer CSS-elementen zoals een id, class of HTML-selector.
  • Click-event
  • Hover-event
  • Show- and hide effect
  • Toggle effect
  • Fade-in or Fade-out effect
  • Slide In- or Slide Out effect
  • Animate CSS properties
  • Change HTML content of the elements
  • Add CSS class to HTML elements
  • ...


Bekijk onder jQuery tutorial een aantal voorbeelden.

2.2 Serverside taal:

1. PHP

PHP staat voor PHP: Hypertext Preprocessor.

PHP is de tegenhanger van ASP. Het is een serverside scripttaal waarmee krachtige dynamische webtoepassingen kunnen worden gerealiseerd zoals webwinkels, nieuwssites, productoverzichten, voorraadlijsten, ...
Omdat PHP uiteindelijk gewoon HTML-code produceert, heeft de bezoeker geen extra software nodig.

Het wordt vaak gebruikt om databasekoppelingen in te maken.


2. ASP

Ook met ASP (Active Server Pages) kunnen krachtige dynamische webtoepassingen worden gemaakt.
ASP is ontwikkeld door Microsoft. De meest gebruikte taal om een ASP-script te schrijven is VBScript (Visual Basic Script), maar ook JavaScript kan gebruikt worden.