The making of Gitaarheld.nl

Hier volgt een technisch verhaal over hoe de site gitaarheld is geïmplementeerd. Het gaat dus niet over het maken van muziek en is waarschijnlijk alleen interessant voor website-ontwikkelaars.

Het prille begin

Deze website, leesbaar als een boek, ontstond in 2000 en kreeg zijn domeinnaam in 2004. Zoals toen gebruikelijk was, werd de vormgeving zoals het lettertype, kleuren, etc. geprogrammeerd met HTML. Voor de opmaak van de pagina's werd gebruik gemaakt van tabellen. De vormgeving van de menu's werd volledig door JavaScript verzorgd. Persoonlijk contact kon worden gemaakt via de MAILTO opdracht en een versleuteld e-mailadres. De hosting van de site werd gedaan bij een provider die weinig faciliteiten bood. De site kon maar tot 25Mb groeien en er waren CGI-script's beschikbaar voor het gastenboek en een bezoekersteller. Steeds meer inhoudelijke teksten werden toegevoegd en aangepast. Het was een heidenswerk om de pagina's een consistente vorm te geven. Ondertussen werden de beeldschermen steeds groter, printers geavanceerder, verschenen er nieuwe media, zoals mobiele telefoons en hulpmiddelen voor visueelgehandicapten. De vraag is dus: hoe kunnen de pagina's op een aantrekkelijke manier worden gepresenteerd, zonder dat er informatie wegvalt en dat mensen met een handicap deze ook kunnen lezen?

De vorige aanpak

In 2009 is er naar gestreefd om structuur, vormgeving en functionaliteit zoveel mogelijk te scheiden. Dit werd gedaan in HTML, CSS, PHP-MySQL en JavaScript. Hiervoor werd de site verhuisd naar een andere provider. Alle pagina's werden aangepast zodat deze voldeden aan de HTML 4.01 strict en utf-8 standaard. De pagina's werden opgemaakt met CSS volgens het "liquid-design", waarbij de lay-out zich keurig aanpaste aan de grootte van het browservenster zonder dat de leesbaarheid werd aangetast. Door het gebruik te maken van CSS, verviel de meeste JavaScript-code. Wat overbleef werd herschreven in modulen volgens het "unobtrusive-JavaScript" principe. Hierdoor waren binnen de HTML pagina's geen JavaScript-opdrachten meer aanwezig. Het gastenboek werd met behoud van inhoud en vormgeving naar PHP-MySQL omgezet. Ook het contactformulier werd herschreven in PHP. Voor het weergeven van de MP3 geluidbestanden werd gekozen voor Flash omdat dit toen voor bijna alle huidige browsers beschikbaar is. Om vaste bezoekers op de hoogte te brengen over vernieuwingen van de website werd een RSS-feed toegevoegd.

Gitaarheld.nl bleef leesbaar als een boek. Dit werd mogelijk gemaakt door het gebruik van frames (maar géén inline-frames). Alle bezwaren die tegen het gebruik van frames worden ingebracht werden opgelost. Het probleem is, dat steeds meer moderne browsers het gebruik van frames niet meer of onvolledig ondersteunen. Hiervoor waren in 2014 enkele aanpassingen aan de site gedaan zodat de content wel in deze browsers gelezen kon worden. Door de gebruikte browser te detecteren, werd besloten om de site met of zonder frames te presenteren. Omdat het gecascadeerde menu ontbrak in de weergave die geen frames gebruikte, had de lezer minder overzicht.

Nieuw leven voor gitaarheld

De nieuwe opzet, in 2016, gebruikt HTML5 met CSS3 en PHP. De layout handhaaft de oude vormgeving maar zonder het gebruik van frames. Hiervoor is ook de JavaScript code aangepast. Ik had een aantal nieuwe opzetjes gemaakt die steeds onbevredigend waren. Ik ging uit van een "twee kolommen layout", waarvan één kolom het menu bevat. Het probleem was dat als de pagina gescrold wordt, ook het menu omhoog ging. Je kunt dit oplossen door het menu met JavaScript te verschuiven maar elegant is dit niet. CSS bracht de oplossing: "Aligning elements using absolute positioning" en "Stacking order (z-index)". De beste css position option is fixed. Het probleem is dat IE6 dit niet ondersteund. Vanwege de gebrekkige manier waarop versie 6 van IE webstandaarden ondersteunt adviseren verschillende grote sites zoals Twitter, Facebook, YouTube en Microsoft, geen gebruik meer te maken van deze versie en te upgraden naar een nieuwere versie van IE of een andere browser te gebruiken. Gezien het zeer kleine aantal hits die IE6 genereert in de site-statistics is het zinloos om hiervoor nog een JavaScript work-around te maken. Met position fixed en z-index groter dan nul, gaat het menu bovenop de pagina drijven. De grap is dat de grafische vormgeving van het menu altijd al suggereerde dat het bovenop de site dreef!

Voor het weergeven van de MP3 geluidbestanden is nu gekozen voor HTML5 audio en geen gebruik meer te maken van Flash omdat de meeste browsers dit niet meer toelaten.

De site voldoent aan het idioom van "Unobtrusive JavaScript". Er wordt een "noscript" alternatief geboden voor het cascaderende menu. Hierdoor kan boven in de pagina een link naar de sitemap.html worden getoond, welke navigatie door de site mogelijk maakt. Onderdelen die JavaScript nodig hebben worden dan verborgen.

De pagina's worden niet meer voorzien van een print-link. De pagina's worden nu automatisch met css staand of liggend opgemaakt als vanuit de browser wordt afgedrukt.

Voor bezoekers met een visuele handicap, die slecht kleuren kunnen onderscheiden, is het contrast gecontroleerd met een grijsmasker. Blinde bezoekers kunnen de tekst lezen met een brailleleesregel als JavaScript is uitgeschakeld. De pagina's zijn gecontroleerd op juiste syntax van HTML, PHP, CSS en RSS2 volgens de W3C standaard. JavaScript is gecontroleerd met JSLint/JSHint. Omdat internetbrowsers de W3C standaard op eigen wijze kunnen interpreteren, is de vormgeving gecontroleerd in browsers die veel worden gebruikt. Helaas houden enkele populaire browsers zich niet geheel aan de standaard, waardoor enkele CSS-hacks moesten worden toegevoegd voor het behoud van de vormgeving.

Een veilige website: gitaarheld

In juni 2018 is de site een beveiligde website geworden, herkenbaar aan groene slotje. De website maak dus gebruik van HTTPS. De gegevens die de website uitwisselt zijn versleuteld en zodat hackers deze niet kunnen onderscheppen.