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.

Structuur, vormgeving en functionaliteit

Deze website in de huidige vorm, 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?

Er is naar gestreefd om structuur, vormgeving en functionaliteit zoveel mogelijk te scheiden. Dit is gedaan in HTML, CSS, PHP, PHP-MySQL en JavaScript. Hiervoor is de site verhuisd naar een provider die o.a. PHP-MySQL aanbiedt. Alle pagina's zijn aangepast zodat deze voldoen aan het DOCTYPE HTML 4.01 strict. De pagina's zijn opgemaakt met CSS volgens het "liquid-design", waarbij de lay-out zich keurig aanpast aan de grootte van het browservenster zonder de leesbaarheid aan te tasten. Door het gebruik van CSS is de meeste JavaScript-code komen te vervallen. Wat overbleef is herschreven als "unobtrusive-JavaScript". Hierdoor zijn binnen de body-tags in de HTML- en PHP-pagina's geen JavaScript-aanroepen meer aanwezig en is de verouderde browserdetectie vervangen door objectdetectie. Het gastenboek is met behoud van inhoud en vormgeving naar PHP-MySQL omgezet. Het contactformulier is ook herschreven in PHP. Voor het weergeven van de MP3 geluidbestanden is gekozen voor Flash omdat dit voor bijna alle huidige browsers beschikbaar is. Om vaste bezoekers op de hoogte te brengen over vernieuwingen van de website is een RSS-feed toegevoegd.

Omdat Apple het gebruik van Flash niet toestaat, kunnen Apple-gebruikers de geluidbestanden niet afspelen. Hiervoor moet de site in HTML 5 en CSS 3 worden omgebouwd. Helaas moet dit nog worden uitgesteld omdat de meeste bezoekers van deze site Windows-gebruikers zijn die gebruik maken van een Internet Explorer waarin HTML 5 en CSS 3 niet wordt ondersteund.

Gitaarheld.nl maakt gebruik van frames (maar géén inline-frames) en dat heeft de volgende voordelen:

• Het menu is altijd zichtbaar en schuift niet uit beeld.
• Het menu wordt maar één keer geladen.
• De inhoudelijke pagina's gebruiken weinig opslagruimte en bandbreedte en zijn daarom zeer snel te laden. Volgens Google-Labs duurt het laden van de pagina's gemiddeld 0,8 seconden. Dit is sneller dan 94% van de sites!
• De inhoudelijke pagina's zijn goed te positioneren en passen op elk beeldschermformaat zonder dat infomatie wegvalt.
• Voor het onderhoud van de site is geen contentmanagementsysteem (CMS) nodig.

Alle bezwaren die tegen het gebruik van frames worden ingebracht zijn als volgt opgelost:

• Een hyperlink op een pagina of de terug- en vooruitknop van de browser laten het bijbehorende menu-item openklappen. Dit komt omdat de pagina's communiceren met het menu en omgekeerd.
• Om problemen met printen te voorkomen, heeft elke inhoudelijke pagina onderaan een link "Afdrukken".
• Afhankelijk van de gebruikte browser is het onderwerp vanuit het menu ergens naar toe te slepen. Dit kan zijn het bureaublad, de URL-balk of bladwijzermenu (bookmarks) van de browser.
• Als een pagina is opgehaald en de navigatie ontbreekt, dan zorgt JavaScript voor het opnieuw laden van de pagina binnen het frame. Als de pagina binnen een "vreemd" frame is geladen, wordt uit dit frame gebroken en de pagina geladen in het "eigen" frame. Als JavaScript is uitgeschakeld heeft elke inhoudelijke pagina een link naar de indexpagina.
• Zoekmachines benaderen alle inhoudelijke pagina's via hyperlinks direct vanaf de indexpagina. Omdat de frames door JavaScript worden opgebouwd zijn deze niet zichtbaar voor de zoekmachine. Frame-pagina's hebben geen hyperlink op de indexpagina en mogen niet worden geïndexeerd en bezocht door zoekrobots.

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 eigenwijze kunnen interpreteren, is de vormgeving gecontroleerd in browsers die veel worden gebruikt. Helaas houden enkele populaire browsers zich niet geheel aan de standaard, waardoor drie CSS-hacks moesten worden toegevoegd voor het behoud van de vormgeving.