Opdracht 2: Improved Lightbox

Achtergrond

Het idee van een lightbox is simpel. Je hebt op een pagina een verzameling met thumbnails van plaatjes. Als op een van de thumbnail wordt geklikt, wordt een grotere versie van het plaatje getoond in het midden van het scherm en wordt de achtergrond donkerder. Er zijn er vele op internet lightbox scripts down te loaden, maar deze maken bebruik van diverse complexe moeilijk te begrijpen technieken.

Bij opdracht 1 heb je met goede en begrijpelijke technieken een eenvoudige LightBox gemaakt. De afgelopen weken heb je geleerd hoe een activity diagram kunt gebruiken om na te denken over code die je nog moet schrijven en nieuwe javascript technieken geleerd om je Lightbox robuuster en flexibeler te maken.

Opdracht

Verbeter de bij opdracht 1 met goede en begrijpelijke technieken gemaakte LightBox. Er hoeft geen nieuwe functionaliteit toegevoegd te worden, maar maak de Lightbox robuuster en flexibeler met de technieken die je hiervoor geleerd hebt

Maak een Activity diagram om te bepalen hoe je programma moet werken, schrijf en documenteer je code.

aandachtspunten:

Gebruik zoveel mogelijk de DOM Core properties en methodes zoals:
- document.getElementById(), document.getElementsByTagName(),
- element.getAttribute(), element.setAttribute(),
- node.firstChild en node.nodeValue
en zo min mogelijk het oude HTML-DOM (document.forms, element.style, element.className, img.src, etc.), omdat DOM Core werkt op alle XML objecten (niet alleen XHTML) en weinig maar krachtige properties en methodes heeft, terwijl iedere browser een eigen HTML-DOM heeft met heel veel properties en functies, die afhankelijk van de het element wel of niet mogen.
Zorg voor 'Unobtruisive JavaScript': net als bij CSS is het de bedoeling, dat de JavaScript helemaal losgekoppeld is van de XHTML.
- In het XHTML document hoort alleen in de <head> een of meerdere link(s) (<script>-tag(s)) te staan, die verwijzen naar het/de JavaScript bestand(en). Ook horen er geen onEvent attributen binnen XHMTL tags te staan. In het JavaScript bestand koppel je de events aan de juiste elementen.
- Andersom moet het JavaScript bestand onafhankelijk zijn van de XHMTL documenten waaraan het is gekoppeld. Hetzelfde script moet op verschillende pagina's kunnen werken en het script mag dus geen aannames doen over de XHTML elementen, die in het XHTML document voorkomen. In je JavaScript controleer je vooraf of het XHTML element dat je wil gebruiken wel bestaat. Hiermee voorkom je JavaScript fouten en dus een applicatie die het niet doet.
Zorg voor 'progressive enhancement' en 'graceful degradation': je mag geen aannames doen over de JavaScript die de browser van de gebruiker kan uitvoeren. Als de browser nieuwe JavaScript begrijpt krijgt de gebruiker een rijkere user interface, maar als de browser deze JavaScript niet begrijpt moet de pagina evengoed wel gewoon te gebruiken zijn.
- Als de browser van de gebruiker geen JavaScript ondersteund of als de gebruiker JavaScript heeft uitgezet, kan de LightBox natuurlijk niet werken; de gebruiker kan de plaatjes niet in een nieuwe layer bovenop de bestaande pagina getoond krijgen. De links moeten in dat geval gewoon werken alsof er geen JavaScript was toegevoegd; de plaatjes moeten ook zonder JavaScript te bekijken zijn.
- In je JavaScript controleer je voordat een JavaScript object of een JavaScript functie/methode gebruikt eerst of de browser dit object of deze functie/methode wel herkent/ondersteunt. Hiermee voorkom je JavaScript fouten en dus een applicatie die het niet doet.

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Schrijf bovendien ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk, zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
Hoeveel tijd je hieraan gespendeerd hebt,
Hoeveel tijd je hebt besteed aan het maken van de opdracht,
Hoe je de opdracht hebt aangepakt
Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar1/winter/fed/opdracht2/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument in correcte XHTML en link daarin naar je activity diagram, je werkende applicatie en naar de broncode.

Houd rekening met de deadline voor deze opdracht: zondagavond 11 januari om 24:00. Zie voor meer informatie de modulewijzer.

Beoordelingscriteria

Je hebt met een Activity diagram inzichtelijk gemaakt wat in welke volgorde moet gebeuren
Je hebt hebt zinvol gebruik gemaakt van de bouwstenen van programmeertalen als JavaScript: iteratieve en conditionele statements
Je hebt gebruik gemaakt van DOM Core methodes (en niet van HTML DOM)
Je JavaScript is 'unobtruisive'
Je zorgt voor 'progressive enhancement' en 'graceful degradation' om je script robuust te maken
Je werk is goed gedocumenteerd (zie 3.1.4) en correct ingeleverd (zie 3.1.5)
Je voldoet aan de algemene beoordelingscriteria (zie 3.2)

Succes.