Toepassing
Door je website te laten aanpassen door de bezoekers naargelang hun wensen, kun je hen persoonlijker ontvangen. Aanpassingen die je website beter geschikt maken voor uiteenlopende computers kun je beter automatisch doen want veel bezoekers hebben geen zin om dit zelf in te stellen. Maar soms valt over smaak niet te twisten..
Lettergrootte (denk bijvoorbeeld aan mensen die slecht kunnen lezen)
Contrast (voor slechtzienden)
Achtergrondkleuren, titelplaatjes etc. (de bezoeker de website naar smaak kunnen inrichten)
De gehele lay-out (vaak worden dit thema’s genoemd. Bezoekers kiezen een uiterlijk die bij hen past)
Merk op dat al deze voorbeelden grafische aanpassingen zijn. Het betreft dus steeds de opmaak of lay-out van een webpagina ofwel de CSS code (zie bovengenoemde artikelen). Je website laten aanpassen betekent dus vaak de CSS-opmaak aan laten passen.
Er zijn globaal drie manieren om de bezoeker de macht (gedeeltelijk) in handen te geven:
Met PHP
Met Javascript, diverse voorbereide CSS bestanden en cookies (de <link rel=”alternate stylesheet”> methode)
Met Javascript,diverse voorbereide CSS ‘classes’ in één CSS bestand en cookies
De laatste methode is technisch het meest geävanceerd maar ook het beste. De tweede is het simpelste, vereist geen PHP mogelijkheden en is het overzichtelijkst. De methode met PHP is niet al te overzichtelijk en is meestal niet aan te raden.
1. Aanpassingen door gebruikers via serverside scripts als PHP
De ThinkQuest website Workweb maakt gebruikt van deze methode om rechtsonder de achtergrond in te stellen.
Deze methode werkt vrij simpel: aan een (PHP) script wordt een variabele meegegeven die een bepaalde instelling vertegenwoordigt. In het voorbeeld bijvoorbeeld ‘maincolor=kleurcode’. Tijdens het genereren van de webpagina plaatst het PHP script deze variabele op de juiste plaats. In het voorbeeld: .
Voordelen:
Geen ingewikkelde client-side Javascripts vereist
Nadelen:
Onoverzichtelijke menging tussen structuur en opmaak
Problematische onthouding van instellingen (deze moeten steeds als variabelen worden doorgegeven aan pagina’s of scripts – let op ‘?maincolor=88888888’ in het voorbeeld)
Standaardopmaak
De altervatieve CSS bestanden staan in het HTML bestand (‘methode2.html’) vernoemd naast de standaard opmaak:
In het Javascript-bestand ‘verander_opmaak.js’ selecteert de functie ‘activeerStyleSheet(‘naam’)’ een van deze alternatieve stylesheets door met enkele DOM methoden (zie Basiscursus Javascript en D.O.M.) langs de tags te gaan en de stylesheet met de opgegeven ‘naam’ aan te zetten (disable = false) en de rest uit te schakelen (disable = true):
Voorbeeld
In het voorbeeld worden de instellingen ook opgeslagen in een cookie (zie Opslag van gegevens met cookies )
LET OP: opmaak die niet geherdefininiëerd wordt in een van de altervatieve stylesheets blijft zoals gedefiniëerd in de standaard opmaak (‘standaardopmaak.css’).
De code van dit voorbeeld is grotendeels afkomstig uit het artikel: Power to the people: Relative font sizes door Bojan Mihelac waaruit de geneste Javascript functies “onclick=’functie’” zijn vervangen door unobstrusive event-handlers (zie Basiscursus Javascript en D.O.M.).
Power to the people: Relative font sizes door Bojan Mihelac
Voordelen
Geheel ‘client-side’, geen serverscripts vereist
‘Alternate Stylesheet’ is volgens W3C aanbevelingen – zie
Meer toepassingen:
In het artikel ‘Switchy McLayout: An Adaptive Layout Technique’ wordt de Bodyswitchers methode gebruikt om het probleem van verschillende beeldschermresoluties op te lossen:
Switchy McLayout: An Adaptive Layout Technique
ThinkQuest Lounge