"Hoe maak je eigenlijk een website?"


Op internet is veel informatie over websiteontwikkeling te vinden, in de boekhandel is menig cursusboek over webdesign verkrijgbaar. Meestal behandelen ze een enkel aspect, zoals het 'sitebouwprogramma' Dreamweaver of 'websitebeheersystemen' zoals Wordpress, Magento, Joomla en Drupal. De diversiteit aan onderwerpen geeft aan dat meerdere wegen naar Rome leiden. Een 'korte' rondleiding...

We laten in dit verhaal de traditionele vraag 'wat wil je met een website bereiken?' even voor wat het is. We beperken ons hier tot het technische gedeelte, op eenvoudige wijze uitgelegd. Er zijn grofweg vier methoden. Voordat we deze behandelen, eerst wat basisinformatie aangaande de wondere wereld van websiteontwikkeling.

De eerste beslissing die je moet maken: ga je het zelf proberen of geef je de klus uit handen? Ben je een beetje handig met programma's in een omgeving 'gelijkende' op die van Office (dat wordt later uitgelegd) en wil je een zeer eenvoudige website, dan zul je na enige verdieping in de materie waarschijnlijk zelf in staat zijn om je eigen basic site, weblog of fotoalbum te realiseren. Of het professioneel zal ogen, dat hangt af van je eigen creativiteit en van een gezonde dosis zelfkritiek. Beschik je niet over bovenstaande competenties of wil je een complexe website, dan kun je de realisatie wellicht beter uit handen geven aan een bedrijf dat hierin is gespecialiseerd.

Vendor lock-in

Pas bij het uit handen geven wel op dat je niet te maken krijgt met zogeheten vendor lock-in. Dit verschijnsel treedt op als je te afhankelijk wordt van één van de serviceverleners, zoals een bedrijf dat een website voor je bouwt. Sommige bouwers realiseren websites via een in eigen beheer ontwikkeld systeem waarbij gegevens niet uitwisselbaar zijn met andere systemen. En niet zelden wordt de hoofdprijs gevraagd als er op de site iets eenvoudigs dient te worden aangepast. Je site verhuizen is een kostbare aangelegenheid en zal waarschijnlijk leiden tot het opnieuw moeten laten bouwen van de site bij een ander webdesignbureau. Dus blijf je maar flink betalen bij je huidige websitebouwer. Wanneer je een kleine site van een paar pagina's hebt, hoeft het allemaal niet zo'n groot probleem te zijn. Maar wil je een redactioneel uitgebreide site dan is een verhuizing een ander verhaal. Kies als het even kan voor webdesignbureau's die werken met open source en open standaarden.

Hosting en domeinnaam

Met de realisatie van een website gaan diverse kosten gepaard. Naast de kosten voor het ontwerp heb je te maken met de domeinnaam (jaarlijks ongeveer tien tot vijftien euro voor een .nl-domeinnaam) en de kosten voor hosting, wat simpel gezegd zoveel wil zeggen als je online schijfruimte die je ter beschikking hebt en de toegankelijkheid daarvan. Een standaard website heeft vaak al voldoende aan een basispakket 'webhosting'. Denk op jaarbasis aan kosten tussen de vijfendertig en negentig euro. Bij de een zit er een gratis database bij, bij de ander krijg je weer onbeperkte mailboxen. En zo zijn er nog veel meer variabelen, zoals 'honderd procent uptime' of gedeelde (shared) servers met andere websites (wat theoretisch iets ten koste kan gaan van de snelheid van jouw website). Deze informatie schiet voorbij het doel van dit artikel, maar het geeft aan dat het kiezen van je hostingprovider een kwestie van vergelijken is.

Groene hosting

Misschien een goed moment om het even te hebben over een stukje milieubewustzijn. Internet is een grootverbruiker wat energie betreft. De websites staan op allemaal (hosting)servers - zie ze als computers met megagrote hardeschijven zonder eigen beeldscherm - en net als bij gewone computers het geval is kunnen ze flink heet worden... en om een ruimte vol met deze stroomvreters te koelen, daartoe draait de eveneens stroomvretende airco op volle toeren. In een ander blogbericht gaan we dieper in op groene hosting.

Goed, na dit maatschappelijk verantwoorde uitstapje gaan we weer terug naar het bouwen van een website. Om je websitebestanden van je computer op je serverruimte te krijgen, kun je een zogeheten FTP-programma gebruiken. Het zijn eigenlijk bestandsbrowsers dan wel verkenners waarmee je de bestanden van je website vanaf je computer kunt 'uploaden' naar je serverruimte. Voorbeelden van dergelijke programma's zijn FileZilla en CoffeeCup Free FTP.

Realisatie

Tot zover de achterliggende theorie in een notendop. Je wilt een website bouwen. En zoals eerder al gezegd, daarvoor heb je grofweg vier methoden tot je beschikking:

Methode 1 : Code kloppen
Methode 2 : Wysiwyg
Methode 3 : Cms
Methode 4 : Online editor

Methode 1 : Code kloppen

Waarschijnlijk doen termen als html en javascript je wel een belletje rinkelen. Internetpagina's zijn doorgaans opgebouwd uit allemaal regeltjes met dergelijke codes. Het 'code kloppen' is de traditionele manier van websites bouwen.

Klinkt niet meteen aanlokkelijk, maar sommigen zweren er bij: in Kladblok, Notepad (of een geavanceerde variant hiervan) zet je html-, javascript-, css- of php-codes in een bepaalde volgorde achter elkaar. Maar dan moet je wel zo'n beetje thuis zijn in de codes.

Een zeer tijdrovende en complexe aanpak, maar ben je geïnteresseerd dan verwijzen we je graag door naar W3schools.com, voor zelfstudie. Aan de basis van elke pagina op internet staat html, probeer dit eerst onder de knie te krijgen. Middels deze opmaaktaal wordt de opbouw van je pagina bepaald. Heb je je html (en html versie 5) eigen gemaakt, dan kun je aan de slag met css (versie 3), waarmee je de opmaak of vormgeving bepaalt. Vind je je pagina's te statisch, dan kun je vervolgens leren programmeren met javascript (en dan adviseren wij: jQuery). Hiermee kun je meer interactie op je webpagina's realiseren.

Genoemde drie (opmaak)talen werken goed samen en zijn naast elkaar te gebruiken: in het html-document staat de documentstructuur, in het css-bestand staat de vormgeving omschreven en in het javascript-bestand staat de interactie of animatie. Er zijn echter ook andere talen, maar genoemde drie bieden een goed uitgangspunt voor zelfstudie.

Methode 2 : Wysiwyg-editors

'Watte?' Die rare naam staat voor 'What You See Is What You Get', ofwel programma's waarmee je grafisch een website kunt maken. Sommige zijn vrij complex en vergen de nodige training, met andere kun je vrij snel uit te voeten, ze doen wat denken aan de officeprogramma's. Wysiwyg-editors hebben zo hun voordelen. Vaak werken ze vertrouwd en zijn ze net zo toegankelijk als de officepakketten. Je bent redelijk vrij als het gaat om vormgeving, zodoende kun je snel webpagina's realiseren. Eventuele kosten voor een database hoeven niet te worden gemaakt. Maar er zijn ook nadelen. Je basis moet uniform zijn, anders kan de lay-out snel verspringen. Niet goed uitgewerkt komt de site al snel over als 'niet-professioneel'. Daarnaast kan je site anders tonen op verschillende systemen en is kennis van html (en css) wenselijk. Een ander punt van aandacht is dat het uitbreiden met nieuwe functies (forums, enquêtes, webalbums) veelal bewerkelijk is.

Dreamweaver is waarschijnlijk het bekendste programma voor webdesign, maar er zijn meer voordelige alternatieven voorhanden. Denk aan KompoZer, CoffeeCup, Bluegriffon. Voorwaarde is dat je 'iets' van websites weet (hoewel je niet altijd html hoeft te begrijpen) en dat je zeker snapt hoe het uploaden van bestanden werkt.

Methode 3 : Cms

Een derde methode om een site op te zetten is door middel van een cms, ofwel contentmanagementsysteem. Vanuit je internetbrowser kun je je hele website inrichten en - daar is een groot voordeel - beheren, vanaf welke computer dan ook.

Zie een cms als een websiteachtig programma dat je zet op de serverruimte die je hebt gekregen van je hostingprovider. Vanuit je internetbrowser kun je vervolgens een hele website opzetten. Wil je wijzigingen aanbrengen? Even inloggen met je gebruikersnaam en wachtwoord en je kunt nieuwe berichten toevoegen of wijzigingen aanbrengen. Veel cms-pakketten zijn opensource, gratis en zijn veelal uit te breiden met forums, fotoalbums en nog veel meer. Bekende voorbeelden zijn Wordpress, Joomla en Drupal. Je kunt deze en andere pakketten uitproberen op: Opensourcecms.com. Met het ene cms kun je snel uit de voeten, het andere heeft een hoge leercurve (zoals Drupal). Wil je een toegankelijk cms proberen, kijk dan vooral eens naar WordPress.

Methode 4 : Online editor

Voorgaande genoemde methoden zijn het meest gangbaar om websites te realiseren. Maar er is nog een vierde optie: het online bouwen van sites. Wie een Gmail-account bezit heeft met Google Sites eigenlijk al toegang tot een dergelijke variant.

En eigenlijk twee, want Blogger (of Blogspot) is de blog-tegenhanger van Google Sites. Zie het een beetje als een site als Startpagina (wie kent het nog?) of Facebook, maar dan uitgebreid met een online wysiwyg-editor. Je maakt in een online omgeving een of enkele pagina en daar kun je je eigen domeinnaam aan hangen. Google Sites en Blogger/Blogspot zijn gratis doch beperkt qua mogelijkheden, maar er zijn ook alternatieven die niet gratis zijn en waarbij je extra opties kunt kopen. Mogelijk biedt je eigen hostingbedrijf ook een dergelijke service. Het online bouwen van een site is vooral handig wanneer je een tijdelijke website wenst of snel je informatie online wilt. Ook ideaal voor het bijhouden van een - al dan niet tijdelijk - blog.

Over de auteur van dit artikel

Alexander van Oosten is allround redacteur, tekstschrijver en mediaspecialist. Heeft gewerkt als redacteur en eindredacteur voor diverse magazines binnen zowel de fun- en actiesporten als de woon- en bouwbranche. Naast tekstschrijver en redacteur is hij onder andere mede-oprichter/beheerder van het blogcollectief Psychologisch.nu.