Warning: Declaration of Bootstrap_Walker_Nav_Menu::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /home/pimscha/public_html/wp-content/themes/stanleywp/functions/function-extras.php on line 61
Realisatie van een fotoportfolio inclusief tabletversie (iPad) | pimschaaf.nl

Realisatie van een fotoportfolio inclusief tabletversie (iPad)

roelnederveen_gallery

Wederom een opdracht voor een site waar veel visueel werk in moest passen. Werk dat tevens op een visueel aantrekkelijke en gebruiksvriendelijke manier gepresenteerd moest worden. Voor dit project is veel geëxperimenteerd met jQuery. Daaruit zijn een aantal demo’s voortgekomen die uiteindelijk niet in het eindproduct zijn gekomen. Je leest daarover meer in deze post. In deze post behandel ik alleen het eindproduct dat bestaat uit een volledige portfoliosite met een aparte weergave voor de iPad. Het eindresultaat vind je op roelnederveen.nl. De iPad versie is handmatig te bereiken via roelnederveen.nl/index.php/ipad en werkt zoals de iPad in WebKit-browsers zoals Chrome.

Veel van het werk voor de basis van dit project had ik al gedaan met de realisatie van een eerdere portfoliosite op basis van GalleryCMS. Voor dat project stonden echter miniaturen centraal, voor dit project niet. Om de site zo gebruiksvriendelijk mogelijk te laten functioneren is gekozen om de foto’s direct zo groot mogelijk weer te geven. Dit heeft natuurlijk als gevolg dat niet alle foto’s op het scherm passen en dus werd al snel gekozen voor een ‘sliding gallery‘. Deze is op verschillende manieren aan te sturen. De meest voor de hand liggende bestaat uit de besturing met de pijltjes die linksonder in beeld te vinden zijn. Alternatief is klikken op de volgende afbeelding in de serie die op 20% opacity rechts van de centrale, zichtbare afbeelding te zien is. Via jQuery reageert de site op een klik op de pijltjes of op de volgende foto. De volgende foto wordt op 100% opacity gezet, de serie foto’s verschuift een stap en de beschrijving wordt geüpdatet. Verder is jQuery gebruikt voor een klein detail op de home-pagina, waar de pijltjes in het menu bewegen om de gebruiker de visuele hint te geven dat je meer werk te zien krijgt als je op één van de categorieën klikt.

iPadversie

Dankzij de MVC structuur van GalleryCMS was het heel eenvoudig op een aparte weergave te maken voor de iPad. iPad gebruikers worden automatisch doorgestuurd naar de iPad versie die eigenlijk niet veel meer inhoudt dan een aparte stylesheet en een stukje Javascript dat touchbediening ondersteunt. Net als voor het eerdere fotoportfolioproject heb ik Mateo Spinelli’s (Cubiq.org) iScroll geïmplementeerd, het stukje Javascript dat touchbediening mogelijk maakt. Door dit script kan je door te ‘swipen’ door de foto’s lopen.

Voor de realisatie van de iPadversie heb ik een korte periode gebruik gemaakt van ipadpeek.com. Een website die een preview zegt te geven van een url zoals de iPad hem zou laden. Ik wil development met deze tool afraden. De weergave komt niet overeen met een echte iPad en de site kan ook de functionaliteit van een iPad niet nabootsen. Switchen van portrait naar landscape, resolutie en touchbediening zijn allemaal niet te testen zoals dat op een echte iPad werkt. Een emulator of een echte iPad geven je meer zekerheid dat wat je programmeert ook echt goed wordt weergegeven op een iPad. Zelf heb ik voor het laatste gekozen, zoals te zien in onderstaand filmpje:

Design door MooiRood.nl. Foto’s door roelnederveen.nl

0 Comments

  1. Pingback: Demo’s voor het presenteren van een portfoliosite | pimschaaf.nl

  2. Pingback: jQuery and iScroll gallery | pimschaaf.nl

Leave a Reply

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>