"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.
- 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. - 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.
Afbeeldingen kunnen in websites een grote toegevoegde waarde hebben, het kan veel verduidelijken.
Het kan echter ook een nadelig effect hebben:
- Ze kunnen de laadtijd van de pagina verlengen
- Verkeerd gekozen afbeelding die de visuele aantrekkelijkheid van een pagina juist verkleind.
Afbeeldingen die worden aangeleverd voor een website, zijn meestal niet direct bruikbaar.
Meestal moet de grootte worden aangepast en moeten de afbeeldingen worden geoptimaliseerd voor het web.
Er is een groot verschil tussen de bestanden waarmee de grafische wereld werkt (drukwerk) en de bestanden die in een webpagina worden gebruikt. De grafische wereld hoeven niet zo op de bestandsgrootte te letten terwijl dit bij websites van groot belang is.
Het werkt erg prettig als je de originele bestanden krijgt aangeleverd. Een afbeelding gemaakt met Photoshop .psd of een Illustrator bestand .eps of .ai
Indien het niet mogelijk is kan je vector-afbeeldingen het best als .eps laten aanleveren en pixel-afbeeldingen als .tiff of een heel goede JPEG (12 kwaliteit).
De twee extensies die het meest gebruikt wordt op het web is PNG en JPEG. Beide formaten maken gebruik van een bepaalde compressietechniek om de bestandsgrootte zo klein mogelijk te houden.
Tips voor het gebruik van afbeeldingen:
- JPEG niet keer op keer bewaren
Elke keer je bewaart gaat de kwaliteit achter uit. Zolang je nog aan het bewerken bent, kan je deze het best bewaren als .psd of .tiff en pas op het laatste moment als .jpg. - Bewaar je origineel zorgvuldig.
- Foto en tekst gecombineerd
Als je een foto en tekst combineert, is het moeilijk kiezen tussen png of jpeg. Vergelijk en probeer beide uit, let op de kwaliteit en de bestandsgrootte.
Wanneer GIF, JPEG of PNG?
1.1 GIF
Gif is de afkorting voor Graphics Interchange Format en is ontwikkeld sinds 1987. Gif-bestanden worden vrij veel gebruikt op het internet en wordt ook gebruikt om geanimeerde afbeeldingen mee te maken met vaak kleine cartoons. Het GIF-formaat ondersteunt transparante achtergrond, het aantal kleuren in een GIF-bestand is beperkt tot maximaal 256 (door het gebruik van 8 bits).
De transparantie kan ofwel op volledig transparantie van 100% of niet transparant en dus 0% gezet worden. Gelieve op te merken dat ook transparantie als kleur wordt geteld. We zullen het Gif-formaat meestal voor de volgende afbeeldingen gebruiken: kleine iconen, lijntekeningen, enkel kleur randen en simpele cartoons, ... Kortom: alle afbeeldingen die grote vlakken van éénzelfde kleur bevatten en niet meer dan 256 Kleuren nodig hebben.
Je vindt tal van kant-en-klare animaties op bv. gifanimaties.nl, bewegende-plaatjes.nl, ... Wees terughoudend met animaties op een webpagina, het komt snel amateuristisch over.
1.2 PNG
PNG is de afkorting van Portable Network Graphic. PNG bestaat sinds 1990 en is ontwikkeld als alternatief voor GIF en JPEG bestanden, hij biedt veel meer mogelijkheden. PNG ondersteunt 24-bits kleuren en biedt transparantie van 0% tot en met 100% aan. Hij ondersteunt een gedeeltelijke transparantie, dus 50% dekking is mogelijk.
PNG is het best geschikt voor plaatjes waarover geen kwaliteitsverlies mag zijn. Het ondersteunt ruim 16 miljoen kleuren en heeft 2 opslagmogelijkheden: 8 bit (= GIF, 256 kleuren en 1-bit transparantie) en 24 bit (JPEG, 16 miljoen kleuren aan, wel groter dan JPEG).
1.3 JPEG
De betekenis van de afkorting JPEG is Joint Photographic Experts Group en heeft de extensie jpg. Het is vooral geschikt voor foto's omdat ze een onbeperkt aantal kleuren kunnen bevatten. Wanneer je foto's neemt met een digitaal fototoestel zijn het altijd JPEG-bestanden.
Transparantie en animatie worden echter niet ondersteunt door JPEG. Moderne fotocamera's maken foto's meestal veel te groot voor gebruik op een website. Verklein je foto's voor het web , een compressie van 60% tot 75 % is optimaal voor het web.
1.4 SVG
De SVG (= Scalable Vector Graphics) extensie is een tweedimensionale vector grafisch formaat bestand. Het is een standaard formaat om vector graphics op het web weer te geven en beschrijft de beelden met behulp van een XML-gebaseerde tekstformaat. De SVG-indeling is een open standaard ontwikkeld onder de W3C met Adobe. SVG-beelden kunnen worden gemaakt en geëxporteerd vanuit Adobe programma's. Je kan ook een online converter gebruiken bijvoorbeeld http://image.online-convert.com/convert-to-svg.
Met een animatie kan er beweging in een website worden gestoken. Ze zijn heel populair geweest, maar leveren ook regelmatig de nodige irritatie voor website bezoekers.
Vooral continu herhalende bewegingen vinden de meeste niet prettig. De twee meest gebruikte manieren zijn animated gif's en flash.
Denk maar aan de oude flash websites:
- vereiste een flash player (.swf integreren in je HTML)
- werkte niet onder apple platformen
- veiligheidsproblemen
- eiste veel geheugen van de browser en lade dan zeer traag
Tip: je Flash animatie wordt nu geëxporteerd als HTML5-code.
Hieronder 2 goede voorbeelden hoe animatie je website kan aanvullen en speelser maken:
Soms kan audio of video een duidelijk toegevoegde waarde hebben voor een website.
Denk maar eens aan jongerensites, muzieksites of nieuwssites waarin een videobeeld meer zegt dan een verhaal.
De bezoeker moet er zelf voor kiezen om een videofilmpje te bekijken of te luisteren. Laat nooit zomaar muziek automatisch starten.
Bestandsformaten
Audioformaten:
- AU
- AIFF
- MIDI
- WAV
- MP3
- MPEG4
- RealAudio
- AAC
- WMA
Videoformaten:
- AVI
- DV
- MOV
- MPEG4
- RealVideo
- WMV
Players en plugins
Voor audio en video worden vaak dezelfde plugins gebruikt.
De meest bekende players zijn:
- Windows Media Player (Microsoft: gratis op Windows)
- RealPlayer (RealNetworks: gratis en Pro versie + Windows, Mac OS, Linux, iOS, Android)
- QuickTime (Apple: gratis en werkt op beide systemen Windows & Apple)
- VLC player (Windows, Mac OS, Linux, iOS, Android)
- GOM Media Player (enkel op Windows)
- KMPlayer (enkel op Windows)
Heb je een database nodig?
Dit houdt in dat informatie uit een database wordt getoond of dat informatie die de bezoeker invult, in een database wordt gestopt.