Web: Maasvlakte2 in beeld

Posted on .

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 […]

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.
Bert de Weerd user experience designer