Een site bouwen

1. Je site zelf beheren?

Eén vraag is van cruciaal belang. Wil jij (of je klant) de site zelf kunnen beheren? Is het belangrijk dat je/hij/zij regelmatig zelf aanpassingen kan doen?

Als je zelf de aanpassingen niet kan doen, moet je voor elke wijziging een beroep doen op de "webmaster". Die webmaster kan daar kosten voor in rekening brengen.

2. Een CMS-systeem

Als je een website zelf wil beheren, heb je een "CMS"-systeem nodig. Dat is een stuk software op je hostingpakket dat het toelaat om je site (van een eenvoudige "blog" tot een webshop) zelf aan te passen.

Belangrijk: De meeste "webmasters" doen heel weinig zelf. Ze installeren (vaak met één enkele muisklik) een CMS-systeem (zoals WordPress) op je hostingpakket. Op die manier heb je vaak sowieso al een CMS, zonder dat je het zelf beseft.

De bekendste CMS-systemen zijn WordPress, Drupal (een Belgisch product), Joomla en Magento.

a. Voordelen

Een CMS-systeem biedt tal van voordelen:

Die software is open source.
CMS-software is in veel gevallen "gratis" (de hierboven genoemde namen)
Een webmaster hoeft vaak niet meer te doen dan één knop in te drukken in zijn online beheerdersmodule van het hostingpakket. Let dus op voor wat de webmaster aanrekent.
De klant (de eigenaar van de site of iemand van haar/zijn bedrijf) kan zelf makkelijk aanpassingen doen zonder in de code te moeten duiken.

Voorbeeld: Een CMS-installatie in het "loginpanel" van de webmaster:

Gouden tip: gewik(s)t en gewogen

Laat je niet te snel verleiden door online services waar je gratis of voor weinig geld een "site" zelf kan samenklikken.

Gratis betekent in veel gevallen dat je site gevuld wordt met "advertenties" (soms zelfs van concurrenten).
Een "goedkope" betaalde versie, is vaak niet goedkoper dan zelf een WordPress-installatie doen op een professioneel hostingpakket.
Bij zo'n systemen geef je elke vorm van controle weg aan een derde partij.

Probeer zoveel mogelijk de controle te behouden: domeinnaam, hostingpakket, CMS... Maak duidelijke afspraken met je webmaster. Een CMS zoals WordPress hoef evenmin veel geld te kosten. De webmaster moet je enkel betalen voor haar/zijn uren werk, niet voor de software zelf.

b. Nadelen

Aan een CMS zijn op zich niet echt nadelen verbonden. Maar als een webmaster gebruik maakt (soms zonder dat je het zelf weet) van een systeem als WordPress of Drupal, is hij zelf niet altijd in staat om aanpassingen aan het systeem te doen. Niet elke webmaster heeft immers voldoende "skills" om zo'n systemen aan te passen op maat. Je krijgt dus niet altijd precies wat je zelf wil.

Vermits een CMS-systeem open source is (de code is leesbaar beschikbaar op het internet), zijn veiligheidslekken snel bekend. Een webmaster moet het CMS-systeem daarom regelmatig updaten.

De techniek achter een website

Als je gewend bent om te werken met kantoorprogramma's zoals teksverwerkers (MS Word, LibreOffice...) en presentatieprogramma's (zoals MS Powerpoint, Apple Keynote...), dan ben je gewend om teksten en foto's en vormgeving samen te voegen in één bestand. Als je een bestand van je tekstverwerker doorstuurt naar vrienden, dan ben je er zo goed als zeker van dat de foto's die je aan het document hebt toegevoegd, nog steeds in dat document zitten als de bestemmeling het bestand opent. Enkel de lettertypes kunnen wat problemen geven.

Bij een website werkt het net iets anders. Een website bestaat uit een reeks afzonderlijke bestanden en een reeks mappen.

Op de afbeelding hieronder zie je een voorbeeld:

a. Alles is een link

Ook al toont een webpagina afbeeldingen tussen de tekst, de afbeeldingen zijn steeds gelinkt. Ze staan extern, meestal in een afzonderlijke map (in dit geval de map 'images'). Als je een webpagina opent in een browser, dan weet de browser dat hij die foto's moet gaan zoeken in de map op de webserver.

Stel dat je domeinnaam www.blabla.be is, dan zal het adres van de afbeelding www.blabla.be/images/banner.jpg zijn. Zo zie je dat het adres dat in je browserbalk verschijnt, ook effectief een mappenstructuur weergeeft (images/banner.jpg).

Ook video's of kaarten die in een webpagina getoond worden, staan niet "echt" in de webpagina. Ze worden "ingesloten", zoals je een foto achter een frame steekt in een kader. Kaarten komen vaak van Google Maps of OpenStreetMaps, films van YouTube of VIMEO...

b. Stijl en inhoud zijn strikt gescheiden

Webpagina's staan altijd in de basismap en eindigen op de uitgang .html, zoals een Worddocument eindigt op .doc of .docx. De opmaak van een webpagina (kleuren, lettertypes, afmetingen, posities...) staat beschreven in afzonderlijke documenten met de uitgang .css (in het voorbeeld style.css in de map style).

Een voorbeeld van CSS-code uit een stijlbestand:

De reden waarom stijlinformatie in een afzonderlijk document staat, is eigenlijk heel logisch. Als de eigenaar van een site de stijl van zijn/haar site wil aanpassen, dan moet hij/zij enkel dit ene stijldocument wijzigen. De site verandert dan meteen van uiterlijk zonder dat de inhouden opnieuw moeten ingevoerd worden.

Dankzij CSS kan de stijl van zeer grote sites in één oogwenk aangepast worden. De webmaster past het stijldocument aan en heel de site, of die nu één of 10 miljoen webpagina's bevat, verandert meteen van uitzicht.

Om die reden kan een site of online app zoals Facebook of Instagram er na een nachtje slapen plots volledig ander uitzien. Als een bedrijf zoals Facebook het CSS-bestand van hun site aanpassen, dan veranderen automatisch alle miljoenen profielen van uitzicht. Stel je voor dat je de huisstijl zou willen wijzigen in duizend Worddocumenten, dan zou je wel even wat tijd nodig hebben.

c. Webpagina's zijn IKEA-kasten voor browsers

Als je een website of webpagina in je browser opvraagt of via een zoekmachine als Google opzoekt, dan stuurt de webserver waarop die pagina "staat", je een reeks bestanden door: HTML- en CSS-bestanden (zie hierboven) en eventueel afbeeldingen en andere bestanden.

Je browser krijgt al die onderdelen toe en bouwt met behulp van het stijldocument (het CSS-bestand) de hele site op in het browservenster.

Je kan het perfect vergelijken met een IKEA-zelfbouwpakket. IKEA (de server) stuurt je één of meer kartonnen dozen. Jij (de browser) opent die dozen en bouwt met behulp van de handleiding (CSS) de planken en schroeven (HTML, foto's, films...) op tot een kast (de zichtbare webpagina).

d. Interactieve toestanden

Naast HTML en CSS is er nog een derde "taal" van cruciaal belang in moderne websites: JAVASCRIPT. Dit is een echte "programmeertaal". Vergelijk het nogmaals met een IKEA-kast. Bij een kast kan achteraf ook deuren en schuiven open- en dichtdoen. De "gebruiker" kan "interactief" met de kast omgaan.

Op een website zullen op die manier slideshows, accordeon-effecten enz. met behulp van javascript worden geprogrammeerd. De webmaster kan code schrijven (of in veel gevallen gewoon ergens downloaden) om interactieve effecten aan de site toe te voegen.

SAMENGEVAT: DE FRONTEND (wat we van een site zien in de browser) WORDT GEBOUWD MET EEN COMBINATIE VAN DRIE TALEN: HTML, CSS en JAVASCRIPT.

e. Een website bouw je in een teksteditor

Een "echte" webmaster zal een site in code bouwen in een teksteditor. Opgelet: een teksteditor is nog wat anders dan een tekstverwerker. Je kan er niet visueel pagina's in samenstellen. Je tikt code in in HTML of CSS of javascript. Je moet dus wel weten wat je aan het doen bent en hoe je dit moet doen.

De HTML-code van een webpagina in een teksteditor:

Geavanceerdere TIPS en TOOLs