web / design / redactie / communicatie / advies

‘Ik wil een website maken… waar begin ik?’

Dr._Robert_Goddard_aan_Clark_University in 1924_-_GPN-2002-000130

Nee, het is geen rocket science en je begint hier gewoon op aarde! Op internet is veel informatie over het bouwen van websites te vinden, in de boekhandel is menig cursusboek over webdesign verkrijgbaar. Meestal behandelen ze een enkel aspect, zoals het ‘sitebouwprogramma’ Adobe Dreamweaver of beheersystemen als WordPress, Magento en Drupal. De diversiteit aan onderwerpen geeft aan dat meerdere wegen naar Rome leiden. Een ‘korte’ rondleiding…

(Let wel, verwacht niet dat je na het lezen van dit artikel meteen een site kunt bouwen. Ik geef hieronder slechts een overzicht van de diverse methoden.)

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. Nou ja, vijf. 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 webdesignbureaus 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 twee tot vijftien euro voor een .nl-domeinnaam) en de kosten voor hosting, wat simpel gezegd wil zeggen: 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. Om een ruimte vol 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 de websitebestanden op je serverruimte te krijgen, kun je een zogeheten FTP-programma gebruiken. Het zijn eigenlijk bestandsbrowsers waarmee je bestanden 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 gezegd, daarvoor heb je grofweg vijf methoden tot je beschikking:

Methode 1 : Code intikken
Methode 2 : Wysiwyg
Methode 3 : Cms
Methode 4 : Online editor
Methode 5 : Front-end framework

Methode 1 : Code intikken

Waarschijnlijk doen termen als html en javascript je wel een belletje rinkelen. Internetpagina’s zijn 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 verwijs ik 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 eigen gemaakt, dan kun je aan de slag met css, waarmee je de opmaak of vormgeving bepaalt. Vind je je pagina’s te statisch, dan kun je vervolgens leren programmeren met javascript (en dan adviseer ik 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 systemen van anderen 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 CoffeeCup of 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 open source, 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’s en daar kun je je eigen domeinnaam aan hangen. Google Sites en Blogger/Blogspot zijn gratis doch beperkt qua mogelijkheden, maar je hebt ook alternatieven die niet gratis zijn en waarbij je extra opties kunt kopen. Mogelijk biedt jouw 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.

Methode 5 : Front-end framework

Oke, dit klinkt ietwat eng, hè? Toch, je bent al zo ver gekomen, dan valt deze laatste methode ook wel te bevatten. Het gaat om een soort aanvulling op de eerste methode (Code intikken). Als je een beetje html en css tevoorschijn kunt toveren, je weet hoe je bestanden moet uploaden, dan kun jij dit. Stel, je hebt een kant-en-klaar mapje aan bestanden. En ja, het zijn allemaal bestandjes voor een website. Wat heet, het eindresultaat is zelfs responsive, mobile- en app-ready en nog meer van zuks. Je hoeft alleen je eigen teksten, plaatjes en menulinks toe te voegen. Dit maak je dan vervolgens mooi met css. O ja, wil je meer pagina’s, dan moet je die ook even aanmaken. Dat is in essentie een front-end framework of template. Een voorbeeld is HTML5 Boilerplate. Deze werkt redelijk eenvoudig. Of kijk eens tussen de templates op w3schools.com. Een andere populaire variant is Bootstrap. Maar bij laatstgenoemde komt iets meer van je vaardigheden kijken.

Dat was het. In een notendop.

Over de openingsfoto: Dit artikel klinkt als rocket science? Verdiep je dan eens in het werk van Dr. Robert H. Goddard, op de foto boven aan de Clark University in Worcester, Massachusetts, in 1924. Goddard begon in 1914 als natuurkundedocent bij de universiteit en werd in 1923 benoemd tot directeur van het natuurkundig laboratorium. In 1920 publiceerde het Smithsonian Institution zijn baanbrekende paper A Method for Reaching Extreme Altitudes, waarin hij beweerde dat raketten kunnen worden gebruikt om vrachten naar de maan te sturen. De pers vond het een absurd idee, bespotte Goddard en zijn werk en noemde hem 'Moon Man'. Om verder kritisch onderzoek uit de weg te gaan, verhuisde Goddard uiteindelijk naar New Mexico, om zijn onderzoek in alle rust uit te voeren. Dr. Goddard, stierf in 1945, maar was waarschijnlijk net zo belangrijk voor het aanbreken van het ruimtevaarttijdperk als de gebroeders Wright voor het begin van het luchtvaarttijdperk. Toch trok zijn werk tijdens zijn leven weinig serieuze aandacht. Toen de Verenigde Staten zich echter in de jaren vijftig opmaakten voor de ruimtewedloop, kwamen Amerikaanse raketwetenschappers tot inkeer. Zonder het werk van Dr. Goddard bleek het vrijwel onmogelijk om een ​​raket te bouwen of een satelliet te lanceren. Bron: NASA

Alexander is werkzaam voor onder andere:

Logo mountainbikemagazine Up/Down

Logo mountainbikemagazine Up/Down

Cafe Lokaal Heemskerk

Cafe Lokaal Heemskerk

Wielrenblad, eindredactie

Logo Wielrenblad, eindredactie

Logo Soul Media

Logo Soul Media

Psychologisch.nu, psychologieblog

Psychologisch.nu, psychologieblog