Practicumopdracht 3

Webdesign 2014—Opdracht 3
Versie 0.2, 11 juni 2014
Inleiding
Doel van de opdracht
Het algemene doel van het practicumproject Webdesign is het vervaardigen van een toeristische
website voor een Nederlandse gemeente. Meer uitleg hierover vind je in de projectbeschrijving
(http://www.cs.uu.nl/docs/vakken/b1wd/materiaal/opdracht/projectWD.pdf). In deze opdracht voer je
de derde fase van dit ontwikkeltraject uit. Je gaat uit van de website die je in opdracht 2 gebouwd hebt.
Maak hiervan een kopie in de map opdracht3 en ga verder mee aan het werk.
Kern van deze opdracht is dat je een werkend, verticaal prototype van de website oplevert. Daarvoor
werk je in deze opdracht het bestelformulier verder uit tot een volledige bestelprocedure, je zorgt dat
alle stijlen overal beschikbaar zijn, je voegt widgets en een social web component toe en je voert
tenslotte een usability evaluatie uit die mogelijk tot bijstellingen leidt.
Qua webtechnologie wordt als nieuw element PHP toegevoegd. Andere server side technology heb je
niet absoluut nodig (maar als je een database wilt gebruiken, ga dan gerust je gang in het
bonusonderdeel).
Literatuur en materiaal
•
•
•
•
Nigel Chapman, Jenny Chapman. Webdesign: a complete introduction (2006), speciaal hoofdstuk
8, ‘Web Applications’ (aanbevolen literatuur)
Heel veel informatie vind je ook bij het vak Webtechnologie, in het bijzonder op
http://www.cs.uu.nl/docs/vakken/b2wt/literatuur.html
Chen, S.Y. & Macredie, R.D. The assessment of usability of electronic shopping: A heuristic
evaluation. International Journal of Information Management 25 (2005) 516-532.
http://www.sciencedirect.com/science/article/pii/S0268401205000873 (toegang via
Universiteitsbibliotheek/Omega). Bevat uitgebreide uitleg over de heuristische
evaluatiemethode.
Slides college 8. Web Usability (beschikbaar over enkele weken, hooguit 04-06-14),
Voorbereiding, planning en inlevering
Dit is een tijdrovende opdracht, waarvoor je ongeveer 30 uur moet inruimen. Doe voor de eerste
practicumsessie in ieder geval het volgende:
• lees de projectbeschrijving en de opdracht aandachtig door, en ga na welke aanpassingen in je
ontwerp nodig zijn
• als je niet met PHP bekend bent: begin aan onderdeel 0
• maak met een of meer andere teams concrete afspraken over de evaluatie (onderdeel 6). Zorg
dat je voldoende tijd overhoudt om de uitkomsten van de evaluatie te verwerken
Houd de volgende globale planning aan bij het maken van de opdracht:
practicumsessie
woensdag 11 juni
onderdeel opdracht
0 en 1
1
vrijdag 13 juni
woensdag 18 juni
vrijdag 20 juni
woensdag 25 juni
2 en 3
4 en 5
6 (afwerking) en 7
6 (afwerking) en 7
Als je deze planning aanhoudt is je website op 20 juni in principe af. Dan heb je nog een 1,5 week om de
evaluatie door een ander team te laten uitvoeren en de resultaten van de evaluatie in je site te
verwerken.
De volledige uitwerking van deze opdracht bevat:
• de nieuwe versie van je website
• het document met de verantwoording van je uitwerking
Je levert de uitwerking als volgt in:
1. plaats de complete site voor de deadline op de webspace van een van de teamleden
2. Lever je uitwerking in via Submit. De deadline van deze opdracht is zondag 29 juni 2014, 23:59
’s avonds. Je inlevering bevat:
a. de gehele directory opdracht3 NB vergeten verantwoording te noemen!
b. readme file met de URL van de site
Onderdelen
0. Oefenen met PHP
Ook voor PHP is het sterk aan te raden eerst te oefenen om de basics onder controle te krijgen en dan
pas aan de echte opdrachten te beginnen. Hier zijn twee van de vele resources die je op het web kunt
vinden:
• PHP 101: PHP For the Absolute Beginner (http://devzone.zend.com/6/php-101-php-for-theabsolute-beginner/)
• W3Schools (http://w3schools.com/php/default.asp)
Qua syntaxis lijkt PHP sterk op andere talen die je al kent, dus in de basics zijn geen grote verrassingen
te verwachten. Besteed wel ruim aandacht aan client-server communicatie. Bij de W3Schools begint dit
met de secties form, $_GET en $_POST. Onder PHP Advanced vind je veel van de echt interessante
dingen, zoals sessies en mail. Een andere belangrijke PHP-toepassing is toegang verzorgen tot databases,
maar dat is geen verplicht onderdeel van deze opdracht.
aanwijzingen
Controleer in deze opdracht ook of het mogelijk is te schrijven naar je webruimte. Kun je een file
uploaden of output naar een file op je server schrijven? Je kunt dit testen met de
voorbeeldprogramma’s van W3Schools. Uitgebreide aanwijzingen voor het oplossen van
toegangsproblemen vind je op http://www.cs.uu.nl/docs/vakken/b2wt/infra.html. De assistenten
kunnen je helpen met het oplossen van eventuele overgebleven problemen.
1. Bestelprocedure
In de vorige opdracht heb je een bestelformulier ontwikkeld met daarin de nodige ‘form validation’ in
JavaScript. Dat formulier is de start van dit onderdeel, waarin je de vrijwel volledige bestelprocedure
gaat ontwikkelen. De procedure omvat ten minste:
• een serie schermen waarin de bestelling kan worden gemaakt
2
•
•
waarschuwingen voor fouten en onvolledige informatie
betalingsgegevens kunnen worden ingevoerd (maar uiteraard wordt er geen echte betaling
gedaan)
• er wordt een bevestigingspagina getoond en een e-mail naar de gebruiker opgestuurd
De bestellingsgegevens hoeven niet feitelijk op de server te worden opgeslagen, maar het mag wel (zie
onderdeel 5).
technische eisen en aanwijzingen
• maak eerst een ontwerp in de vorm van een state transition diagram of vergelijkbaar diagram
met korte uitleg. Neem je ontwerp op in de verantwoording (zie onderdeel 7).
• gebruik PHP Session om gegevens door te geven.
• ga na welke controles je nog in je procedure moet inbouwen op volledigheid consistentie van de
data en waar je die wilt afhandelen (PHP of JavaScript). Je hoeft niet uit te gaan van
misbruikscenario’s: prototypes hebben alleen bona fide gebruikers. Geef in de verantwoording
(zie onderdeel 7) een overzicht van alle controles die je toepast.
• hier en in de rest van de opdracht mag je gebruik maken van oplossingen die je op het web
vindt. In alle gevallen geldt wel dat je in de verantwoording de herkomst van de code moet
vermelden.
2. Consistente stijlen
In opdracht 2 heb je drie verschillende stijlen ontwikkeld voor je startpagina. Het is de bedoeling dat die
stijlen op je gehele site worden toegepast. Maar het is natuurlijk niet de bedoeling dat de gebruiker bij
elke pagina opnieuw moet gaan kiezen. Verzin een methode om met PHP de stijlkeuze van de gebruiker
te bewaren, maar wel op elke pagina de mogelijkheid van het wisselen van stylesheet te geven en pas
deze methode op je hele site toe.
3. Widgets
Veel moderne websites hebben widgets die gebruik maken van content die van andere websites
afkomstig is. De Google Map is wel het bekendste voorbeeld, maar er zijn ook kalenders, twitter feeds,
weerberichten en nog veel meer moois. In deze opdracht voeg je een Google map en een andere widget
naar keuze toe aan je site. Let wel op dat je in onderdeel 4 ook nog een social web component moet
toevoegen, dus hier geen widgets waarmee de gebruiker zelf content kan toevoegen.
technische eisen en aanwijzingen
Voor de Google map stellen we een aantal voorwaarden. Markeer op de kaart of het satellietbeeld de
toeristische hotspots van de gemeente. Bij iedere hotspot verschijnt ten minste een caption met de
naam van die hotspot. Je kunt aan de markers nog extra informatie toevoegen in de vorm van een
InfoWindow, en/of de markers verbinden tot een complete wandelroute. Extra’s die je zelf verzint zijn
natuurlijk van harte welkom. Je gaat als volgt te werk:
• Ga naar maps.google.com, log in op je Google account
• Selecteer Mijn plaatsen
• Kies kaart maken
• Voer titel en beschrijving van de kaart in
• Rechts kun je nu plaatsen markeren (met naam en beschrijving) en lijnen trekken.
De map staat op een Google server en kun je in een webpagina inladen met een <iframe> element (dat
Google voor je maakt). Deze code plak je op een geschikte pagina in je site.
3
Als je na het bovenstaande nog verder wilt experimenteren met de mogelijkheden van Google Maps en
je bent vertrouwd met JavaScript (of je houdt van een uitdaging) kun je proberen wat je met de Google
Maps JavaScript API kunt doen. Voor de documentatie zie
https://developers.google.com/maps/documentation/javascript/. De samples geven een hoop leuke
ideeën.
Voor de tweede widget stellen we geen bijzondere eisen, behalve dat deze zinvol moet zijn en op een
goede plek in je site moet zijn opgenomen. Vermeld in je verantwoording welke widget je gekozen hebt.
4. Social web
Een beetje website kan niet meer zonder sociale component en uiteraard zullen je gebruikers hun
ervaringen met elkaar willen delen. Voeg daarom een sociale component toe, op een geschikte plek in je
site. De vorm van deze sociale component is tamelijk vrij, als het maar mogelijk is op een of meer
plekken berichten te posten. Die berichten hoeven niet ingewikkeld te zijn: een naam, mailadres, datum
en tijd, en tenslotte de inhoud van het bericht in platte tekst is voldoende. Je mag het natuurlijk mooier
maken als je daarvoor de tijd en de vaardigheden hebt.
technische eisen en aanwijzingen
De beste manier om een blog, forum of iets dergelijks te maken is met een database. Maar dan zit je aan
een fikse leercurve vast. Een simpeler oplossing is de berichten naar een tekstbestand schrijven en dat
tekstbestand vervolgens in de webpagina in te lezen. Voor een echte site is dit niet zo’n verstandige
oplossing, maar voor deze opdracht is het goed genoeg.
Aan elk gepost item voeg je dan de minimale markup toe. Daarna zet je het in de tekstfile. Een
probleempje hierbij is dat je nieuwe data standaard aan het einde van de file toevoegt. Dat betekent dat
het nieuwste item ook onderaan in je pagina komt te staan. Er zijn allerlei manieren te verzinnen om dit
probleem op te lossen. Vraag een hint aan de assistent als je er niet uit komt.
5. Bonusopdracht
Je kunt een bonus (max. 2 punten) voor deze opdracht halen door extra elementen aan je website toe te
voegen. Je kunt je ideeën de vrije loop laten, maar de extra elementen moeten wel zinvol zijn binnen
het doel van je website. Vermeld in de verantwoording (onderdeel 7) waar die extra elementen in je
site zitten, met eventuele uitleg. Hier zijn wat voorbeelden:
• gebruik van een database voor onderdelen 1 en 4
• toepassing van geavanceerde HTML 5 features (voor welke browser werken deze?)
• verschillende navigatietypes van Garrett toevoegen (zie college 4, slides 27 en verder)
6. Afwerking, evaluatie en bijstelling
Voor de afwerking van de site loop je de site nog een keer helemaal door op punten als ontbrekende
content, ontbrekende functionaliteit en inconsistenties in presentatie. Zorg dat alle stijlen voor alle
pagina een goed resultaat geven. Zie hiervoor ook wat in de algemene projectbeschrijving over het
eindproduct gezegd wordt. Het heeft het karakter van een verticaal prototype.
In het bijzonder heeft je site:
• de look and feel van het beoogde eindproduct
• voldoende en realistische content
• uitgewerkte onderdelen zijn technisch goed werkend
4
Wees kritisch op je eigen werk, dan mag je dat ook op dat van een ander zijn.
Als je site af is, laat je een heuristische evaluatie uitvoeren door een ander team. In ruil hiervoor voer je
zelf een evaluatie uit van de site van een ander team. Je volgt bij je evaluatie het model dat gebruikt
wordt in het artikel van Chen en Macredie (voortbouwt op de 10 heuristieken van Nielsen uit college 8
(Usability, navigatie en grafisch ontwerp, slides 15-25 :
• gebruik de uitgebreide lijst van 13 heuristieken
• eerst voert ieder teamlid zelfstandig een evaluatie uit
o eerst wordt er een free-form evaluatie gedaan, dan een evaluatie aan de hand van
scenario’s. Die scenario’s zijn afkomstig uit opdracht 1, maar misschien zijn er nog
nieuwe toegevoegd (bv. het maken van een blog entry).
o ieder teamlid vult apart een scoreformulier met gevonden problemen en een severity
rating voor elk probleem.
• vervolgens worden de resultaten vergeleken en samengevoegd. Doe dit eveneens in een
scoreformulier. Schrijf zo nodig een korte toelichting. Stuur je complete evaluatie naar het team
dat de site gebouwd heeft.
De uitkomsten van je evaluatie gebruik je om je site te verbeteren. Voeg aan het scoreformulier een
nieuwe kolom toe waarin je kort aangeeft hoe je het betreffende probleem opgelost hebt. Als je
uitgebreider commentaar hebt of afbeeldingen wilt toevoegen, doe dat dan in een toelichting bij het
scoreformulier.
Je levert voor dit onderdeel in (in het verantwoordingsdocument, zie onderdeel 7):
• de eigen evaluatie van de andere site (individuele evaluaties en samengevoegde resultaten)
• de evaluatie van je eigen site door het andere team, met overzicht van verbeteringen)
7. Verantwoording van het project
Maak een PDF-document waarin je de volgende informatie opneemt:
• onderdeel 1: ontwerp van de bestelprocedure; overzicht van de controles; herkomst code
• onderdeel 2: herkomst code
• onderdeel 3: welke widgets heb je in je site opgenomen en waar? herkomst code
• onderdeel 4: herkomst code, eventuele ontwerpbeslissingen
• onderdeel 5: korte toelichting op de bonusonderdelen, en herkomst van code
• onderdeel 6: eigen evaluatie van de site van het andere team (individuele scoreformulieren,
samengevoegde resultaten); de evaluatie door het andere team met daarin een overzicht van de
gemaakte verbeteringen.
5

Download Report