Omslag van 'Webtechniek voor niet-techneuten'

7. Opbouw van je website

Als het goed is ziet jouw website er als één geheel uit, maar technisch gezien bestaat het uit een aantal onderdelen, zoals een CMS, templates en CSS.

7.1 Content Management Systeem (CMS)

Veel sites maken tegenwoordig gebruik van een Content Management Systeem (CMS). Met een CMS kun je direct via de website (webbased) content invoeren. Die wordt opgeslagen in een database. Zie de afbeelding hieronder.

CMS met database

Voorbeelden van CMS-en zijn:

  • WordPress: veel gebruikt voor wat kleinere sites
  • Drupal
  • Typo3
  • Joomla
  • Plone
  • Closed source CMS-en, zoals van SIM, Green Valley en InfoProjects

Een CMS bestaat in grote lijnen uit:

  • invoerdeel met een editor
  • ondershoudsdeel voor de pagina's die niet in een module staan
  • modulen
  • database

Invoerdeel

Het invoerdeel is waar jij als redacteur jouw content beheert. Je moet inloggen, meestal met een gebruikersnaam en wachtwoord.

Het is per CMS heel verschillend wat je precies wel en niet via het CMS kunt onderhouden. De vormgeving ligt meestal grotendeels vast in templates en stylesheets en kun je dus vaak niet direct aanpassen via het CMS. Maar er zijn ook CMS-en waarbij je wel direct bij de CSS en templates kan, zoals WordPress.

Editor

Teksten en afbeeldingen invoeren doe je via een editor. Vaak is dit een zogenaamde WYSIWYG-editor: Een What-You-See-Is-What-You-Get-editor.

Editor

Als je met meerdere redacteuren werkt is het handig om de mogelijkheden van de editor zo veel mogelijk te beperken. Dus liever niet dat iedereen tekst kan onderstrepen of tekst kan doorhalen.

Een editor is een stukje software, dat jouw webbouwer geplaatst heeft in het CMS. Er zijn een paar editors die door vrijwel alle CMS-en gebruikt worden. Dat zijn:

  • TinyMCE
  • FCKeditor

De editors zijn 'configurabel', wat wil zeggen dat ze aanpasbaar zijn. Wil jij bijvoorbeeld allerlei knopjes in de editor niet, dan kan de webbouwer deze weghalen.

De WYSIWYG-editor wordt ook wel een WYSIWYM-editor genoemd: What You See Is What You Mean. Daarmee bedoelen ze dat je met de editor niet zozeer de tekst opmaakt, maar vooral betekenis toevoegt. Door bijvoorbeeld een kopje te voorzien van een opmaakprofiel h2 geef je de betekenis van een kopje mee.

Algemene contentpagina's

De basis van het CMS vormen de standaardpagina's, die je kunt beheren. Soms zijn er verschillende soorten standaardpagina's.

Modulen

Naast standaardpagina's heeft een website bijna altijd ook content die een speciale opmaak moet krijgen. Denk bijvoorbeeld aan nieuwsberichten, toptaken of formulieren.

Een module heeft een aantal voordelen:

  • De inhoud en vorm liggen vast in de module. Dit maakt beheer eenvoudiger.
  • Het hergebruiken van de content is eenvoudig.

Closed source versus open source

De code van het CMS kan afgeschermd zijn door de ontwikkelaar. Het CMS is dan closed source: de broncode is niet vrijgegeven.

Het kan ook zijn dat de broncode van het CMS wel vrij beschikbaar is en door iedereen gedownload kan worden. Het CMS is dan een open source CMS.

Open source heeft een aantal grote voordelen, maar het grootste voordeel is de kleinere leveranciersafhankelijkheid. Doordat de broncode vrij beschikbaar is, ben je minder afhankelijk van de leverancier/webbouwer. De code is namelijk niet van de webbouwer. Ben je niet tevreden met je webbouwer, dan kun je gewoon een andere zoeken en daarmee verder gaan.

Een open source CMS is niet beter dan een closed source. Dat is afhankelijk van veel andere factoren. Er zijn bijvoorbeeld webbouwers die heel goede closed source CMS-en leveren. En er zijn ook slechte leveranciers die met een open source CMS werken.

De laatste jaren zijn open source CMS-en veel populairder geworden bij non-profit-organisaties, zoals overheden en onderwijsinstellingen. Met name door de kleinere leveranciersafhankelijkheid zijn de beheerskosten vaak ook lager.

7.2 Database

Alle content die je invoert met het CMS is opgeslagen in een database. Door te werken met een database is het beheer van de content veel makkelijker.

Een database kun je vergelijken met een spreadsheet. Het bevat alle teksten van je site en de koppelingen naar afbeeldingen en downloads.

7.3 Templates

De opmaak van de website is vastgelegd in 'templates'. In zo'n template staat code die op elke pagina terugkomt, zoals een header (bovenste deel van de website), een footer (het afsluitende deel van je site) en een menu. Je kunt een template van een website vergelijken met een sjabloon in Word: ook in een sjabloon staan al een paar standaard zaken, zoals het lettertype, zodat je die niet steeds hoeft te definiëren.

Er zijn meestal templates voor bijzondere pagina's, zoals een homepage, een zoekresultatenpagina of een 404-foutmeldingspagina.

CMS, database en templates

Sommige CMS-en werken niet met verschillende templates, maar met kleinere blokken. Zo werkt Drupal met 'blocks' en 'views'.

Voor een mobiele weergave is de weergave zo dat alles onder elkaar bekeken kan worden. Vaak is de header kleiner, het menu vervangen door een hamburgermenu en valt de content onder het menu en de info uit de rechterkolom daar weer onder.

Bij het ontwerpen van sites is vaak 'mobile first' het uitgangspunt. Dus eerst maakt de vormgever/webbouwer het mobiele ontwerp. Van daaruit maken zij de desktopversie. Voordeel van mobile first is de eenvoud van de site zo centraal komt te staan, en eenvoud is cruciaal voor een gebruiksvriendelijke ervaring.

7.4 CSS

De opmaak van teksten en afbeeldingen wordt geregeld met de Cascading Stylesheets (CSS), of kortweg stylesheets. Samen met de templates vormen deze de vormgeving van de site.

7.5 Statische content

De meeste content zit in de database van het CMS, maar soms zijn er pagina's die daar buiten vallen en niet aanpasbaar zijn via het CMS. Dit noemen we statische content. Deze content kan meestal alleen door de webbouwer worden aangepast. Een voorbeeld van zo'n pagina is een 404-pagina.

7.6 Bijzondere bestanden voor zoekmachines

robots.txt

Het bestand robots.txt gebruik je om aan zoekmachines duidelijk te maken welke delen van de site NIET geïndexeerd moeten worden.

Het bestand staat vaak in de root van je site. Bij ons staat het bijvoorbeeld op www.theinternetacademy.nl/robots.txt.

Een voorbeeld van zo'n bestand is:

User-agent: *
Disallow: /nieuwesite
Disallow: /service

Deze code geeft het volgende aan:

  • De informatie geldt voor alle zoekmachines (user-agents = zoekmachines, * = alle)
  • Directories die niet geïndexeerd mogen worden zijn 'nieuwesite' en 'service'.

Het bestand is alleen nodig als je wilt dat bepaalde directories van je site NIET bezocht moeten worden. Het bestand gebruikt de Robots Exclusion Standard.

Let op: Met robots.txt voorkom je niet dat de directories niet geïndexeerd worden. Gebruik hiervoor de metatag robots.

sitemap.xml

Met het bestand sitemap.xml geef je aan zoekmachines aan hoe de structuur is van je website.

Google beschrijft dit zelf als volgt:

Sitemaps zijn een methode om Google te informeren over pagina's op uw site die we anders misschien niet zouden vinden. Een XML-sitemap, meestal gewoon sitemap genoemd, is een lijst van de pagina's op uw website. Als u een sitemap maakt en verzendt, zorgt u ervoor dat Google op de hoogte is van alle pagina's op uw site, inclusief de URL's die tijdens de normale crawlprocedure van Google niet worden gevonden.

Je kunt een sitemap maken op basis van het sitemapprotocol. Deze vind je op www.sitemaps.org.

Elke keer dat je pagina's maakt of verwijdert moet je dit bestand bijwerken. Het is daarom handig als je gebruik maakt van een dynamische sitemap. Deze is steeds bijgewerkt naar de huidige structuur van je website.

top

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.