Web: Maasvlakte2 in beeld

Geplaatst op door

Vorig jaar rond deze tijd heb ik een speeltuin project online gezet waarin ik de mogelijkheden van CSS3 onderzocht. Om niet zomaar wat te testen, bouwde ik een fotoarchief waarin ik mijn collectie over de bouw van Maasvlakte2 kon vertonen. Naast het onderzoeken en testen van CSS3 was dit ook een geschikt moment om mijn ervaring met PHP weer eens af te stoffen.

Alleen voor moderne browsers

Omdat dit project een test betrof werkt het fotoarchief alleen in de moderne browsers zoals Firefox en Safari. In Internet Explorer werkt de website wel, maar missen bijvoorbeeld de ronde hoeken.

maasvlakte2 in beeld - homepage
De homepage van de website met een random wisselende foto uit de collectie.

Zoeken naar beelden

Het archief bied een zoekfunctie die op basis van sleutelwoorden de collectie doorzoekt. Haak en oog aan deze methode is dat je dan wel voor alle beelden sleutelwoorden moet toekennen. Dat bleek geen optie met meer dan 3000 beelden. Daarnaast kan gezocht worden op het formaat van de afbeelding, staand of liggend. Het specifiek zoeken op onderwerp bleek een onmogelijke functie die alleen met heel veel administratief werk was te realiseren. Daarom moest de bezoeker handig kunnen bladeren door de collectie. Om dat mogelijk te maken blijft de collectie aanwezig als je een detail pagina opent.

maasvlakte2 in beeld - zoeken
Zoeken en bladeren naar beelden in de collectie.

Navigatie

De resultaat pagina’s worden gepagineerd aangeboden om overzicht te houden. Dat overzicht wordt meegenomen in de detail pagina’s. Zo kun je vanuit een detail pagina verder bladeren naar omliggende foto’s.

maasvlakte2 in beeld - detail
Detailpagina van een foto. Bovenin de blader functie door de collectie of het zoekresultaat.
maasvlakte2 in beeld - detail (vervolg)
Meta data van de foto op een detailpagina.

Dit bericht is geplaatst in Portfolio. Bookmark de permalink.

Over Bert de Weerd

Bert de Weerd is een creatieve interactie ontwerper met technisch inzicht, dat wordt ondersteund door praktische ervaring. In elk project geprobeerd hij zijn werk zo gebruikersvriendelijk en toegankelijk mogelijk te maken. Iedereen moet in staat zijn om een product te gebruiken. Daarom wordt elke ontwerp-beslissing zorgvuldig overwogen.