Website

Dit is ver­sie 3 van The Ma­trix mijn web­site. Na vier jaar ont­wik­ke­ling is de site erg ver­an­derd, en ik wil wat ideeën en tech­nie­ken met je de­len. Ik heb ge­pro­beerd om een aan­trek­ke­lijk de­sign te com­bi­ne­ren met va­lide code en de nieuw­ste tech­nie­ken.

XHTML

Elke pa­gina van deze site XHTML 1.1 va­lid, ten min­ste wan­neer deze wordt op­ge­vraagd door een brow­ser die dit on­der­s­teunt (dus niet In­ter­net Ex­plo­rer). Zo niet, laat het me als­je­b­lieft we­ten zo­dat ik het kan ver­be­te­ren. Ik re­s­pec­teer de web­stan­daa­ren en pro­beer me er zo veel mo­ge­lijk aan te hou­den. Dit be­te­kent dat mijn web­site niet al­leen XHTML va­lid is, hij ge­bruikt ook geen ta­bel­len voor de lay-out, scheidt in­houd van op­maak, ge­bruikt geen af­beel­din­gen voor tekst en bevat met­a­data zo­dat ma­chi­nes hem ook be­grij­pen.

Om de vol­le­dige con­trole te heb­ben over alle pa­gina's, heb ik elke re­gel code (be­halve de jQu­ery li­brary) zelf ge­schreven. Ik ge­bruik geen WY­SI­WYG edi­tor, noch edi­tor met sp­lit-view. Ik schrijf al­leen code, en test di­rect in brow­sers. Dit waarborgt de op­ti­male kwa­li­teit van mijn code. Het bevat geen rare on­no­dige code die tools zou­den ge­ne­re­ren, maar het is wel va­lide code. Zo kan ik er ook met­een voor zor­gen dat al­les werkt in elke brow­ser. (IE maakte dit me erg moei­lijk, maar ik heb het groot­ste deel aan de praat ge­k­re­gen in IE 8.)

Vol­gens de XHTML 1.1 stan­daard, moe­ten pa­gina's ver­zon­den wor­den met het application/xhtml+xml MIME-type. Wan­neer je dit ech­ter naar IE stuurt, denkt hij dat je de pa­gina pro­beert te down­loa­den in plaats van be­kij­ken. Als In­ter­net Ex­plo­rer al geen stan­daard-waar­dige pa­gina kan loa­den, hoe moet hij die dan ooit cor­rect gaan ren­de­ren? On­der­s­teu­ning voor de stan­daar­den ont­breekt over­dui­de­lijk. Daa­rom wor­den pa­gina's voor IE 8 als sim­pel HTML ver­zon­den.

Deze site draait op PHP. Dit is een server-side taal die het meeste wat je hier ziet ge­ne­reert. Ik maak veel ge­bruik van XML en XPath om pa­gina's te ma­ken van de data. Elke pa­gina op deze web­site wordt dy­na­misch ge­ge­ne­reerd met PHP.

De­sign

Een van de las­tig­ste din­gen — als het niet het las­tig­ste is — aan het ma­ken van deze site was de­sign. Ik had zo veel mooie ideeën die ik wilde im­ple­men­te­ren, maar dat is sim­pel­weg on­mo­ge­lijk. Som­mige din­gen zien er stuk voor stuk ge­wel­dig uit, maar zijn oer­le­lijk wan­neer je ze com­bi­neert. Ik moest kie­zen. Ui­t­ein­de­lijk ben ik re­de­lijk te­vre­den met het de­sign zo­als het ge­wor­den is, hoe­wel ik nog steeds denk dat al­les er te veel als een ‘pa­gina’ uit ziet, en te wei­ning als een mo­derne, in­ter­ac­tieve, web 2.0 web­site. Ik heb in­ter­ac­tieve tech­nie­ken ge­bruikt; ik heb ani­ma­ties toe­ge­voegd, ik ge­bruik nieuwe tech­nie­ken zo­als we­blet­ter­ty­pen, maar al­les ziet er nog steeds uit als een sta­ti­sche web­pa­gina met in­ter­ac­tieve ele­men­ten. Maar zo­als ik al zei, ik moest keuzes ma­ken. Dit was er een van. Ik kon niet elk idee ge­brui­ken dat ik had, dus heb ik er een paar ge­bruikt, en ik ben te­vre­den met het re­sul­taat.

Hoe­wel ik al­les zelf ont­wor­pen heb, heb ik som­mige ge­wel­dige si­tes als in­spi­ra­tie ge­bruikt. Ik vind de web­site van Blen­der erg mooi. Voo­ral de oranje pa­gi­na­k­op­pen. Mijn kop­pen zijn ge­ba­seerd op hetzelfde idee, maar ik ge­bruik geen af­beel­di­gen voor tekst om­dat dit in het al­ge­meen een slechte ge­woonte is. Daar­voor in de plaats heb ik we­blet­ter­ty­pen ge­bruikt om pa­gi­na­k­op­pen weer te geven, een nieuwe func­tie in CSS3. Er zijn maar een paar let­tery­pen die je vrij op web­si­tes kunt ge­brui­ken, maar Carto Go­thic ziet er leuk uit. Het heeft wel iets weg van het prach­tige let­ter­type My­riad Pro. Om het er nog be­ter uit te la­ten zien en lees­baar­der te ma­ken, heb ik een lichte scha­duw toe­ge­voegd, ook een nieuwe CSS3-fun­cie. Vanzelf­spre­kend on­der­s­teunt In­ter­net Ex­plo­rer geen van deze tech­nie­ken dus in IE ziet al­les er wat saaier en plat­ter uit. Dit is ook een keuze die ik ge­maakt heb. Tekst ver­van­gen door af­beel­di­gen is een nog slech­tere oplos­sing en bo­ven­dien niet dy­na­misch. Flash is niets be­ter dan plaa­tjes, want het is nog steeds niet lees­baar voor ma­chi­nes, en niet se­lec­teer­baar (ten min­ste, niet sa­men met de rest van de pa­gina). De pa­gi­na­kop­ach­ter­gron­den zijn trou­wen al­le­maal vreemde aan­trek­kers ge­ren­derd met Chao­scope en na­be­werkt met Pho­to­shop.

Ap­ple heeft een prach­tige web­site, een van de beste als je het mij vraagt. (Ze zijn so­wieso de mees­ters in de­sign.) Ik vind voo­ral de pijl-ach­tige na­vi­ga­tie­balk mooi, hoe­wel Ap­ple niet de enige is die dit heeft, en ik weet ook niet ze­ker of ze wel de eerste wa­ren. Wat zo spe­ci­aal is aan mijn na­vi­ga­tie­balk is dat de kleur hele­maal ver­an­dert als je er met de muis over gaat, niet al­leen de link. Het was las­tige dit aan de praat te krij­gen met over­lap­pende pij­len, maar ik heb het wer­kend ge­k­re­gen!

Voor het ‘nieuws’-ge­deelte op de voor­pa­gina heb ik een soort blog-stijl ka­len­der ge­bruikt om de da­tums aan te geven. Ik heb er ver­schil­lende gezien op ver­schei­dene blogs, en er zijn waar­schijn­lijk dui­zende sja­blo­nen voor ver­schil­lende soor­ten blogs die iets der­ge­lijks bevat­ten. Ik heb de mijne zelf ge­maakt, en het was vrij las­tig dit mooi te krij­gen. Vaak werkte het in Sa­fari, Chrome, Fi­re­fox en Opera, maar ver­knoeide In­ter­net Ex­plo­rer het weer en moest ik een an­dere ma­nier zoe­ken. Van dit pro­bleem had ik trou­wens niet al­leen last bij de nieuws­kop­pen. Het kwam vaak voor. Ik heb zelfs be­slo­ten In­ter­net Ex­plo­rer 7 in zijn ge­heel niet te on­der­s­teu­nen om­dat het een pa­gina to­taal ver­keerd ren­dert.

Eén van de din­gen die het ont­wer­pen van deze site zo las­tig maakte is dat hij een vloei­dende lay­out heeft. Dit be­te­kent dat hij je hele scherm vult, on­af­han­ke­lijk van de re­so­lu­tie. Vloei­ende lay­outs wa­ren re­de­lijk po­pu­lair een aan­tal jaar ge­le­den maar wor­den steeds va­ker ver­van­gen door lay­outs met vaste breedte. De meeste web­si­tes ver­spil­len mijn 1920×1200 scherm ge­woon. Het na­deel van een vloei­ende lay­out is dat er een groot ver­schil is in hoe de pa­gina er­uit ziet bij hoge en lage re­so­lu­ties. Een ali­nea kan zes re­gels in­ne­men bij een lage re­so­lu­tie, maar slechts één bij een hoge re­so­lu­tie. Lange re­gels tekst zijn bo­ven­dien slech­ter lees­baar. Ik heb ge­pro­beerd dit pro­bleem te ver­min­de­ren door een marge links en rechts van de pa­gina.

Ge­bruiks­vrien­de­lijk­heid

Deze web­site is meer­ta­lig. Als je een Ne­der­landse brow­ser ge­bruikt zul je au­to­ma­tisch de Ne­der­lands­ta­lige ver­sie van de site zien. Je kunt al­tijd van taal wis­se­len in de rech­terboven­hoek van de pa­gina. De web­site heeft ook een ver­sie geöp­ti­ma­li­seerd voor ap­pa­ra­ten met kleine scher­men, zo­als de iP­hone en iPod touch. Hoe­wel deze twee de vol­le­dige ver­sie uit­s­te­kend weer­geven (in­clu­sief ge­a­van­ceerde ef­fec­ten zo­als tekst­scha­duw), is de geöp­ti­ma­li­seerde ver­sie be­ter lees­baar en mak­ke­lij­ker te na­vi­ge­ren met je vin­gers. Als je een mo­biele brow­ser ge­bruikt (zo­als Mo­bile Sa­fari of Opera Mo­bile), krijg je au­to­ma­tisch de ver­sie voor kleine scher­men te zien. Net zo­als met ta­len, kun je van ver­sie wis­se­len in de rech­terboven­hoek van de pa­gina.

Als er meer­dere ver­sies van een down­load zijn zal de site au­to­ma­tisch de goede ver­sie voor je se­lec­te­ren ge­ba­seerd op de in­for­ma­tie die je brow­ser mee­stuurt met de request. Dit bevat in­for­ma­tie over je be­stu­rings­sys­teem en soms 32/64-bit in­for­ma­tie. In­for­ma­tie over mo­biele brow­sers wordt ook mee­ge­no­men. Sta­biele ver­sies krij­gen all­tijd voor­keur boven bèt­aver­sies. Na­tuur­lijk kun je nog wel hand­ma­tig een ver­sie se­lec­te­ren als mijn ge­a­van­ceerde al­go­rithme een fou­tje maakt.

Om de site in­te­res­san­ter en dy­na­mi­scher te ma­ken wilde ik wat ani­ma­tie toe­voe­gen. Dit is van­daag de dag per­fect mo­ge­lijk met Javascript, en ik ge­bruik jQu­ery om dit mo­ge­lijk te ma­ken. Ik wilde van Flash af, om­dat het niet overal wordt on­der­s­teund (zo­als op de iP­hone), en om­dat Flas­hin­houd ge­schei­den is van de rest van de pa­gina. Dit be­te­kent dat je Flas­hin­houd en tekst op de pa­gina niet te­ge­lijk kan se­lec­te­ren. Bo­ven­dien is Flas­hin­houd niet zicht­baar voor ma­chi­nes.

Hoe­wel de pa­gina's voor men­sen goed lees­baar zijn, heb­ben ma­chi­nes soms moeite met de be­te­ke­nis van som­mige in­houd. Daa­rom bevat mijn web­site ook uit­ge­breide met­a­data zo­als Mi­cro­for­mats. Dit helpt ma­chi­nes de in­houd te be­grij­pen en maakt het brow­sers en zoek­ma­chi­nes mo­ge­lijk ex­tra din­gen te doen met de in­houd.

Om de URL's min­der cryp­tisch te ma­ken, heb ik mak­ke­lij­kere URL's ge­maakt door mid­del van URL-re­wri­ting. Een adres be­staat nu al­leen uit kleine let­ters, cij­fers, streep­jes en slas­hes. Het was een keuze om de slash aan het eind van het adres weg te la­ten. Dit doe ik om­dat het adres naar een be­stand wijst; niet naar een map.