Hoe maak je een website?

Hoe maak je eigenlijk een website? Op internet is veel informatie over dit onderwerp te vinden, in de boekhandel is menig cursusboek over websitedesign verkrijgbaar. Meestal behandelen ze een enkel aspect, zoals het 'sitebouwprogramma' Dreamweaver of 'websitebeheersystemen' zoals Wordpress, 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 is: 'Ga ik het zelf proberen of geef ik de klus uit handen?' Ben je een beetje handig met programma's in een omgeving gelijkende op die van Office (dat wordt straks 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.

Afhankelijk
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 teveel 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 klusje van vergelijken is.

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.
Dat het ook anders kan, dat bewijzen de hostingbedrijven die aan 'groene hosting' doen. Ze zijn zoals dat heet 'CO2-neutraal' en maken gebruik van energiezuinige apparatuur in combinatie met groene stroom en/of energiebewuste bedrijfsvoering. Een andere groep hostingbedrijven doet aan het compenseren van hun CO2-uitstoot door het planten van bomen en energiebewuste bedrijfsvoering. Alleen, is dit geen pleister op de wond?

FTP
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/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 : CODES
Het ouderwetse 'code kloppen', waarbij je in Kladblok/Notepad bijvoorbeeld html-, javascript-, dhtml- of php-codes in goede volgorde zet. Je ziet precies waarmee je bezig bent. Sommigen zweren daarbij. Maar dan moet je wel zo'n beetje al die codes kennen. Een zeer tijdrovende en complexe aanpak, maar ben je geïnteresseerd dan verwijs ik je graag door naar www.w3schools.com, 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 standaard tekstverwerkingsprogramma's. Voorbeelden van dergelijke editors zijn:
- Microsoft Frontpage, tegenwoordig vervangen door Microsoft Web Expression.
- KompoZer, een gratis opensource softwarepakket. Ook wel bekend als Nvu.
- Apple's iWeb.
- Adobe Dreamweaver, eigenlijk meer bestemd voor gevorderde webdesigners.
- Rapidweaver, voor de Mac-computers.
- Sandvox, eveneens voor de Mac-computers.
- Bluegriffon, een nieuw programma dat nog volop in ontwikkeling is. Van de makers van KompoZer.

Voordelen van WYSIWYG-editors:
* vrijheid in vormgeving.
* vaak toegankelijke, vertrouwde werkmethode, gelijkende op die van Word.
* geen database nodig.
* in het geval van KompoZer: het is gratis.

Nadelen van WYSIWYG-editors:
* bijhouden, kan al snel verspringen.
* kennis van html is gewenst.
* niet goed uitgewerkt komt een site al snel als 'niet professioneel' over.
* uitbreiden met nieuwe functies (forums, enquêtes, webalbums) is bewerkelijk.
* site ziet er in een aantal gevallen bij ondeskundig gebruik als snel anders uit op de verschillende computersystemen.
* in het geval van de betaalpakketten, met name Dreamweaver: hoge aanschafkosten.

METHODE 3 : CMS
Cms staat voor Content Management System, ofwel contentmanagementsysteem. Zie het als een websiteachtig programma dat je zet op de serverruimte die je hebt gekregen van je hostingprovider. Vanuit je internetbrowser kun je vervolgens je hele website inrichten en - daar is een groot voordeel - beheren, vanaf welke computer dan ook. 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 cms-voorbeelden zijn Wordpress, Joomla en Drupal. Je kunt deze en andere cms-pakketten gratis uitproberen op: www.opensourcecms.com.

Voordelen van een cms
* makkelijk inhoud bijhouden, toevoegen en beheren.
* oogt meestal professioneel.
* toevoegen van extra functies, mits je de techniek erachter snapt.
* vrij uniforme lay-out op verschillende computers.
* meeste cms-systemen zijn gratis in aanschaf, evenals de extra plug-ins.
* uitgebreide support op de diverse communitysites.
* verschillende gebruikers kunnen een eigen rol (met uitgebreide of beperkte rechten) krijgen.
* makkelijk bij te houden vanaf verschillende computers.
* veel professioneel ogende designs zijn verkrijgbaar.

Nadelen van een cms
* aanpassen van de standaardvormgeving is bewerkelijk.
* opzetten is als leek niet eenvoudig.
* database vaak vereist.
* niet elke hostingprovider kan elke database leveren, waardoor niet elk cms overal werkt.
* een paar keer per jaar moet een cms worden geüpdatet, anders loop je veiligheidsrisico's (maar het veiligheidsaspect geldt ook voor de twee eerder genoemde methoden).

METHODE 4 : ONLINE BOUWEN
Voorgaande methoden zijn het meest gangbaar. 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. Eigenlijk twee, want Blogger/Blogspot is de blog-tegenhanger van Google Sites. Ze zijn qua opzet enigszins te vergelijken met sites als Startpagina of Hyves, maar dan uitgebreid met een online WYSIWYG-editor zoals even terug omschreven. Je maakt in een online omgeving een website 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.

Voordelen van online editors:
* snel je informatie online.
* vaak geen hostingbedrijf nodig.
* geen zorgen om een database of het draaiende houden van je site.
* meestal een toegankelijke werkmethode.
* een aantal grote it-bedrijven biedt deze optie gratis aan.

Nadelen van online editors:
* de meeste zelfgemaakte sites hebben een hoog hobbygehalte, niet goed uitgewerkt komt een site al snel als 'niet professioneel' over.
* vormgevingsmogelijkheden zijn beperkt, je werkt eigenlijk met een vast stramien (denk aan de herkenbare lay-out van Startpagina of Hyves).
* uitbreiden met nieuwe functies (forums, enquêtes, webalbums) is niet of nauwelijks mogelijk of er moet voor worden betaald.
* kans op afhankelijkheid van de serviceverlener: de in het begin vermelde vendor lock-in.

Ontwerpen
Bij het ontwerpen moet met veel aspecten rekening worden gehouden. Ik kan het wel gaan hebben over mijn voorkeur voor png-afbeeldingen boven gif en jpg, maar dat wordt een wat technisch verhaal. Een aantal globale tips om bij het ontwerpen in het achterhoofd te houden:
- Niet iedereen heeft een even breed computerscherm, of heeft de browser simpelweg nooit op maximale breedte staan. Hou rekening met een smallere schermbreedte (768 pixels was altijd een standaardbreedte, maar met de komst van grotere beeldschermen en de opmars van hogere resoluties zijn ondertussen ook daar de meningen over verdeeld).
- Kleuren komen op andere monitoren waarschijnlijk anders over dan bij jou op de monitor. Dus beoordeel je ontwerp op andere computers.
- Kies geen prachtige, bijzondere lettertypen, want het 'bijzondere' impliceert eigenlijk alleen maar dat ze toch niet op andere computers te zien zullen zijn. Gebruik lettertypen (fonts) als: Arial, Courier New, Georgia, Helvetica, Impact, Palatino, Tahoma, Times New Roman, Trebuchet MS en Verdana.

Om deze drie punten kracht bij te zetten, verwijs ik je graag naar Browsershots.org. Hier kun je de lay-out van je website laten testen op verschillende systemen wereldwijd. Geef je domeinnaam door, wacht even drie tot vijftien minuten of herlaad de pagina af en toe, en je zult zien waar ik op doel.

Bij het maken van een website komen nog veel meer aspecten kijken en je zult waarschijnlijk regelmatig op internet zijn aangewezen om problemen op te lossen. Maar al doende leert men.

Mocht je meer hulp of vrijblijvend advies kunnen gebruiken, voel je vrij om te mailen.