Promotiewebsite Aruba – ontwerp, data & interactie

Data: API en js-library

Doel van de opdracht

In deze opdracht ontwerpen en bouwen jullie in een groepje van 2 of 3 leerlingen een interactieve promotiewebsite voor Aruba.

Jullie kiezen een specifieke doelgroep waarvoor Aruba interessant kan zijn. Daarna onderzoeken jullie wat deze doelgroep belangrijk vindt en hoe professionele websites bezoekers informeren, overtuigen en door een website begeleiden.

Op basis van dit onderzoek maken jullie bewust keuzes voor de inhoud, structuur en vormgeving van jullie eigen website.

Vervolgens bouwen jullie de website met HTML, CSS en JavaScript. Jullie verwerken verschillende soorten data en interactieve onderdelen, waaronder een weer-API, een interactieve kaart en een datavisualisatie.

Aan het einde van het project hebben jullie dus niet alleen een werkende website gebouwd, maar kunnen jullie ook uitleggen waarom jullie bepaalde ontwerp- en programmeerkeuzes hebben gemaakt.

Wat leer je in deze opdracht?

Tijdens deze opdracht leer je:

  • een website ontwerpen voor een specifieke doelgroep;

  • professionele websites onderzoeken en daar ontwerpprincipes uit herkennen;

  • nadenken over hoe een bezoeker door een website wordt geleid;

  • ontwerpkeuzes onderbouwen en verwerken in een eigen ontwerp;

  • een website opbouwen met HTML, CSS en JavaScript;

  • gegevens uit JavaScript-bestanden verwerken in een website;

  • gegevens ophalen uit een externe API;

  • data overzichtelijk visualiseren;

  • een interactieve kaart maken;

  • interactieve onderdelen ontwerpen met behulp van een flowchart;

  • een website testen en verbeteren;

  • samenwerken aan een groter programmeerproject;

  • uitleggen en verantwoorden hoe jullie website is ontworpen en gebouwd.

Voor deze opdracht hebben jullie in totaal 8 weken.

Voorkennis en nieuwe technieken

Voor deze opdracht gebruik je kennis en vaardigheden die je in eerdere opdrachten hebt geoefend.

Dit heb je al eerder gedaan

  • een eenvoudig UI- en UX-ontwerp maken;
  • wireframes maken;
  • flowcharts maken, bijvoorbeeld in Lucidchart;
  • websites opbouwen met HTML en CSS;
  • JavaScript gebruiken voor logica en DOM-manipulatie;
  • gegevens uit een JavaScript-bestand inlezen en verwerken.

Je hoeft deze technieken dus niet helemaal opnieuw te leren. Tijdens deze opdracht ga je ze combineren en toepassen in een groter project.

Dit is nieuw

Tijdens deze opdracht maak je kennis met een aantal nieuwe technieken:

  • WeatherAPI – actuele gegevens ophalen uit een externe API;
  • Chart.js – gegevens weergeven in grafieken;
  • Leaflet.js en OpenStreetMap – een interactieve kaart met markers maken.

Bij de deelopdrachten krijg je uitleg en voorbeelden waarmee je deze nieuwe technieken stap voor stap kunt oefenen.

Stappenplan

Werk stap voor stap toe naar een complete interactieve promotiewebsite voor Aruba.

De stappen hoeven niet strikt na elkaar. Jullie mogen taken verdelen en onderdelen tegelijk uitvoeren, zolang jullie belangrijke keuzes samen maken en alles goed op elkaar aansluit.

  1. Onderzoek de doelgroep en bestaande websites
    Bepaal voor wie jullie de website maken en onderzoek twee professionele websites voor dezelfde of een vergelijkbare doelgroep.
  2. Bepaal het doel en de route van de bezoeker
    Leg vast wat jullie willen dat een bezoeker weet, voelt of doet en hoe jullie de bezoeker door de website begeleiden.
  3. Maak het ontwerp
    Werk jullie ideeën uit in een sitemap, wireframes en keuzes voor vormgeving, sfeer en inhoud.
  4. Bouw de basiswebsite
    Zet de bestanden en mappen klaar en bouw de structuur, navigatie en belangrijkste content met HTML, CSS en JavaScript.
  5. Voeg data en interactieve onderdelen toe
    Verwerk de WeatherAPI, een datavisualisatie met Chart.js en een interactieve kaart met Leaflet.js en OpenStreetMap.
  6. Test en verbeter
    Laat anderen de website gebruiken, verzamel feedback en verbeter wat nog niet duidelijk of goed werkt.
  7. Rond het project af
    Controleer het eindproduct, werk het logboek bij en maak de individuele reflectie af.

Stap 1 – Onderzoek de doelgroep en bestaande websites

Bepaal eerst voor wie jullie de website maken.

Beschrijf kort:

  • wie jullie doelgroep is;
  • wat deze doelgroep belangrijk vindt;
  • welke informatie deze doelgroep waarschijnlijk zoekt.

Zoek daarna twee professionele websites die gericht zijn op dezelfde of een vergelijkbare doelgroep. De websites hoeven niet over Aruba te gaan.

Onderzoek bij beide websites:

  • voor wie de website bedoeld is;
  • wat de website wil dat een bezoeker weet, voelt of doet;
  • waar je als bezoeker als eerste naar kijkt;
  • hoe de website je door de inhoud begeleidt;
  • welke knoppen, links of onderdelen het meeste opvallen;
  • welke sfeer de website uitstraalt;
  • hoe kleur, afbeeldingen, lettertypen, witruimte en taalgebruik daarbij helpen.

Bespreek daarna samen wat jullie van deze websites willen leren.

Noteer:

  • drie ideeën die jullie willen meenemen naar jullie eigen website;
  • twee dingen die jullie juist anders willen doen;
  • bij iedere keuze kort waarom deze past bij jullie doelgroep.

Jullie hoeven de onderzochte websites niet na te maken. Het doel is om te ontdekken welke ontwerpkeuzes goed werken en hoe jullie die kennis kunnen gebruiken voor een eigen ontwerp.

Stap 2 – Bepaal het doel en de route van de bezoeker

Gebruik jullie onderzoek uit stap 1 om het doel van de website scherper te maken.

Beschrijf in één of twee zinnen:

  • wat jullie willen dat de bezoeker na het bekijken van de website weet;
  • wat jullie willen dat de bezoeker voelt;
  • wat jullie willen dat de bezoeker uiteindelijk doet.

Maak daarna één eenvoudige user journey: beschrijf hoe een typische bezoeker door jullie website gaat.

Bijvoorbeeld:

Homepage → belangrijke informatie bekijken → kaart of data bekijken → meer ontdekken → overtuigd raken van Aruba als bestemming

Bedenk hierbij:

  • welke informatie de bezoeker als eerste nodig heeft;
  • welke pagina’s of onderdelen daarna logisch zijn;
  • welke onderdelen extra aandacht moeten krijgen;
  • hoe jullie de bezoeker stimuleren om verder te kijken.

De user journey hoeft niet uitgebreid te zijn. Het belangrijkste is dat jullie bewust nadenken over de volgorde waarin een bezoeker informatie krijgt en hoe de website hem of haar door de inhoud begeleidt.

Stap 3 – Maak het ontwerp

Werk jullie ideeën uit voordat jullie de website verder gaan bouwen.

Maak samen:

  • een sitemap met de belangrijkste pagina’s of onderdelen van de website;
  • wireframes van de belangrijkste pagina’s;
  • afspraken over kleurgebruik, lettertypen, afbeeldingen en sfeer;
  • keuzes voor de belangrijkste knoppen, navigatie en andere opvallende onderdelen;
  • keuzes voor een responsieve vormgeving, zodat de website er op verschillende schermformaten (telefoon, tablet, desktop) goed uitziet en werkt.

Gebruik daarbij jullie doelgroep, het onderzoek uit stap 1 en de user journey uit stap 2.

Controleer bij iedere ontwerpkeuze:

  • helpt dit de bezoeker om snel te begrijpen waar de website over gaat?
  • past dit bij de doelgroep?
  • is duidelijk waar de bezoeker naartoe kan?
  • sluit de vormgeving aan bij de sfeer die jullie willen creëren?
  • is de vormgeving ook op een klein scherm (telefoon/tablet) duidelijk en goed bruikbaar?

Het ontwerp hoeft nog niet perfect te zijn. Het belangrijkste is dat jullie eerst bewuste keuzes maken voordat jullie alles in HTML, CSS en JavaScript uitwerken.

Stap 4 – Bouw de basiswebsite

Zet eerst de projectstructuur klaar en bouw daarna de basis van de website.

Maak in ieder geval:

  • de benodigde mappen en bestanden voor HTML, CSS, JavaScript en afbeeldingen;
  • de belangrijkste pagina’s of onderdelen uit jullie sitemap;
  • een werkende navigatie;
  • de eerste versie van de vormgeving uit jullie wireframes;
  • de belangrijkste teksten, afbeeldingen en andere content.

Gebruik waar mogelijk JavaScript om gegevens uit aparte gegevensbestanden in de website te verwerken.

Let tijdens het bouwen op:

  • een duidelijke en overzichtelijke structuur;
  • consistente vormgeving;
  • logische bestandsnamen en mappen;
  • nette en leesbare code;
  • een website die goed aansluit op het ontwerp uit stap 3.

De website hoeft in deze stap nog niet compleet te zijn. Zorg vooral dat de basis goed staat, zodat jullie daarna de interactieve onderdelen kunnen toevoegen.

Stap 5 – Voeg data en interactieve onderdelen toe

Breid de website uit met de technische onderdelen uit de deelopdrachten.

Voeg in ieder geval toe:

  • WeatherAPI om actuele weergegevens op te halen en duidelijk weer te geven;
  • Chart.js om gegevens uit een JavaScript-dataset te visualiseren;
  • Leaflet.js en OpenStreetMap voor een interactieve kaart met relevante locaties en informatie.

Kies bij ieder onderdeel data die echt past bij jullie doelgroep en het doel van de website.

Let daarbij op:

  • duidelijke en bruikbare informatie;
  • een verzorgde weergave;
  • goede werking van de interactieve onderdelen;
  • een logische aansluiting op de rest van de website;
  • nette en begrijpelijke JavaScript-code.

Maak voor minimaal één interactief onderdeel vooraf een eenvoudige flowchart. Gebruik deze om de werking van jullie code te plannen.

De precieze eisen en voorbeelden voor WeatherAPI, Chart.js en de interactieve kaart staan bij de deelopdrachten.

Stap 6 – Test en verbeter de website

Laat de website gebruiken door iemand die niet in jullie groepje zit.

Geef elke testpersoon een concrete taak of route (een user journey) om te doorlopen — bijvoorbeeld “zoek op wat het weer morgen wordt” of “vind een locatie die interessant is voor onze doelgroep” — in plaats van ze zonder doel te laten rondkijken.

Let tijdens het testen op:

  • is meteen duidelijk waar de website over gaat?
  • is de navigatie logisch?
  • is belangrijke informatie makkelijk te vinden?
  • werken de interactieve onderdelen zoals bedoeld?
  • zijn teksten, knoppen en grafieken duidelijk?
  • zijn er onderdelen die verwarrend of onhandig zijn?

Noteer daarna:

  • twee dingen die goed werken;
  • twee problemen of verbeterpunten;
  • welke verbetering(en) jullie daadwerkelijk hebben doorgevoerd.

Controleer daarnaast zelf of de website technisch goed werkt, bijvoorbeeld door te kijken of er geen fouten in de browserconsole staan.

Het doel van deze stap is niet om een perfecte website te maken, maar om te laten zien dat jullie feedback kunnen gebruiken om het eindproduct te verbeteren.

Stap 7 – Rond het project af

Controleer voordat jullie de opdracht inleveren of de website compleet is en goed werkt.

Loop samen nog één keer de volledige website door en controleer:

  • of alle pagina’s en links werken;
  • of WeatherAPI, Chart.js en de interactieve kaart goed functioneren;
  • of de vormgeving overal consistent is;
  • of teksten, afbeeldingen en data correct worden weergegeven;
  • of er geen onnodige fouten in de browserconsole staan;
  • of alle bestanden netjes en logisch zijn georganiseerd.

Werk daarna het logboek bij en controleer of duidelijk is wie aan welke onderdelen heeft gewerkt.

Iedere leerling maakt tot slot een korte individuele reflectie waarin je beschrijft:

  • aan welke onderdelen je zelf hebt gewerkt;
  • wat je tijdens dit project hebt geleerd;
  • wat goed ging;
  • wat je een volgende keer anders zou aanpakken.

Lever daarna het volledige project in volgens de aangegeven inleverinstructies.

Beoordelingsrubriek

Vak: Informatica (havo/vwo) · Eindopdracht PTA · Groepsproduct — telt voor 70% mee in het SE1-cijfer. Het individuele mondeling (30% van het SE1-cijfer) heeft een aparte beoordeling en is hier niet opgenomen.

Totaal groepsproduct: 100 punten, verdeeld over 6 criteria. Elk criterium kent 3 niveaus: Onvoldoende, Voldoende, Goed.

Criterium

Onvoldoende

Voldoende

Goed

Doelgroep, onderzoek & user journey

10 punten

Onvoldoende (0–3 pt)

Doelgroep is summier of oppervlakkig beschreven. Onderzoek naar bestaande websites ontbreekt, betreft minder dan twee sites, of gaat nauwelijks in op de gevraagde aspecten. De 3 ideeën en 2 verschilpunten zijn niet of nauwelijks onderbouwd. Doel van de site en/of de user journey ontbreken of zijn onduidelijk.

Voldoende (4–7 pt)

Doelgroep is beschreven, maar met beperkte diepgang. Twee websites zijn onderzocht, maar niet op alle gevraagde aspecten, of de analyse blijft beschrijvend zonder duidelijke koppeling naar de eigen website. De 3 ideeën en 2 verschilpunten zijn genoemd, maar summier onderbouwd. Doel en user journey zijn aanwezig, maar mager uitgewerkt of deels onlogisch.

Goed (8–10 pt)

Doelgroep is scherp en concreet beschreven (wie, wat ze belangrijk vinden, welke info ze zoeken). Twee relevante professionele websites zijn grondig onderzocht op alle gevraagde aspecten, met concrete voorbeelden. De 3 ideeën en 2 verschilpunten zijn helder onderbouwd en duidelijk gekoppeld aan de doelgroep. Doel en user journey zijn logisch opgebouwd, concreet en beargumenteerd.

Ontwerp & basiswebsite

30 punten

Onvoldoende (0–9 pt)

Sitemap en/of wireframes ontbreken of zijn zeer summier. Ontwerpkeuzes zijn niet of nauwelijks onderbouwd vanuit doelgroep of onderzoek. Navigatie of structuur is onduidelijk. Vormgeving is inconsistent of niet afgestemd op de doelgroep, en niet of nauwelijks responsief. De basiswebsite werkt slecht of is onvolledig (bv. kapotte links, ontbrekende pagina’s).

Voldoende (10–20 pt)

Sitemap en wireframes zijn aanwezig, maar summier of matig uitgewerkt. Een deel van de ontwerpkeuzes is onderbouwd. Navigatie werkt, maar is niet altijd intuïtief. Vormgeving is redelijk consistent, maar sluit beperkt aan bij de doelgroep. De site is deels responsief. De basiswebsite functioneert, met kleine gebreken in structuur of code.

Goed (21–30 pt)

Sitemap en wireframes zijn compleet en gebaseerd op doelgroep en onderzoek. Ontwerpkeuzes zijn onderbouwd. Navigatie is intuïtief en consistent. Vormgeving is verzorgd en sluit aan bij doelgroep en sfeer. De website is goed responsief. De code is netjes en foutloos.

Data, interactiviteit & technische uitwerking

35 punten

Onvoldoende (0–10 pt)

WeatherAPI, Chart.js en/of de kaart ontbreken, werken niet, of missen de verplichte basisgegevens uit de deelopdrachten. Getoonde data of locaties zijn willekeurig of niet relevant voor de doelgroep. Een flowchart ontbreekt of is onbruikbaar. Code bevat veel fouten of werkt onbetrouwbaar.

Voldoende (11–24 pt)

WeatherAPI, Chart.js en de kaart zijn aanwezig en werken, met de verplichte basisgegevens. De keuze van extra weergegevens, grafiek of locaties is redelijk, maar weinig doordacht voor de doelgroep. Er is een flowchart voor minimaal één onderdeel, maar deze is summier. Code werkt, met kleine fouten of een rommelige opbouw.

Goed (25–35 pt)

WeatherAPI, Chart.js en de kaart werken betrouwbaar. De gekozen weergegevens, grafiek en kaartlocaties zijn bewust en relevant voor de doelgroep — de kwaliteit van de keuzes weegt zwaarder dan het aantal. De flowchart is duidelijk en is gebruikt om de code te plannen. Code is netjes, logisch opgebouwd en foutloos.

Testen & verbeteren

10 punten

Onvoldoende (0–3 pt)

Minder dan drie testpersonen zijn betrokken, of zij kregen geen duidelijke taak/user journey. Bevindingen zijn nauwelijks genoteerd of ontbreken. Er zijn geen aantoonbare verbeteringen doorgevoerd naar aanleiding van de feedback.

Voldoende (4–7 pt)

Minstens drie testpersonen hebben de website getest met een taak/user journey. Bevindingen zijn summier of weinig concreet genoteerd. Enkele verbeterpunten zijn benoemd en er is minstens één verbetering doorgevoerd, maar de koppeling tussen feedback en verbetering is niet altijd duidelijk.

Goed (8–10 pt)

Minstens drie testpersonen hebben de website getest met een concrete taak/user journey. Wat goed werkt en wat niet, is helder en specifiek genoteerd. De doorgevoerde verbeteringen zijn duidelijk gekoppeld aan de gevonden problemen. Er is ook zelf gecontroleerd op technische fouten (bv. in de browserconsole).

Samenwerking, planning & logboek

10 punten

Onvoldoende (0–3 pt)

Het logboek ontbreekt of is zeer onvolledig. Niet duidelijk wie aan welke onderdelen heeft gewerkt. Taakverdeling en afspraken zijn niet vastgelegd. Voortgang is nauwelijks bijgehouden.

Voldoende (4–7 pt)

Het logboek is aanwezig, maar summier of onregelmatig bijgehouden. Taakverdeling is globaal zichtbaar, maar niet altijd duidelijk wie wat heeft gedaan. Er zijn afspraken gemaakt, maar niet altijd consequent nageleefd.

Goed (8–10 pt)

Het logboek is compleet en regelmatig bijgehouden. Per onderdeel is duidelijk wie eraan heeft gewerkt. Taakverdeling en afspraken zijn helder vastgelegd en nageleefd. Voortgang is goed gedocumenteerd door het hele project heen.

Individuele bijdrage & reflectie

5 punten

Onvoldoende (0–1 pt)

De reflectie ontbreekt, of behandelt de gevraagde punten nauwelijks.

Voldoende (2–3 pt)

De reflectie is aanwezig en behandelt de gevraagde punten, maar oppervlakkig of onvolledig.

Goed (4–5 pt)

De reflectie is volledig: alle gevraagde punten zijn duidelijk beschreven en vormen een bruikbare basis voor het mondeling.

 

Toelichting per criterium

Doelgroep, onderzoek & user journey
We beoordelen hoe goed jullie de doelgroep hebben onderzocht, wat jullie uit bestaande professionele websites hebben geleerd en hoe logisch het doel en de route van de bezoeker zijn uitgewerkt.

Ontwerp & basiswebsite
We beoordelen de sitemap, wireframes, vormgeving, structuur, navigatie, responsieve vormgeving en de uitwerking van de website in HTML, CSS en algemene JavaScript-functionaliteit.

Data, interactiviteit & technische uitwerking
We beoordelen de technische onderdelen van de website, waaronder WeatherAPI, Chart.js en Leaflet.js/OpenStreetMap. Ook kijken we naar de werking van de code, de verwerking van data en de flowchart van minimaal één technische functie.

Testen & verbeteren
We beoordelen hoe jullie de website hebben getest, welke feedback en problemen jullie hebben gevonden en welke verbeteringen jullie daadwerkelijk hebben doorgevoerd.

Samenwerking, planning & logboek
We beoordelen hoe jullie het werk hebben verdeeld, afspraken hebben gemaakt, de voortgang hebben bijgehouden en hebben samengewerkt tijdens het project.

Individuele bijdrage & reflectie
Iedere leerling levert een korte schriftelijke reflectie in over de eigen bijdrage aan het project en wat je hebt gedaan en geleerd. Deze reflectie vormt de basis voor het individuele mondeling, waarin je wordt bevraagd over het groepsproduct, je eigen technische bijdrage en het groepsproces.

Let op: de uitgebreide prestatieniveaus per criterium worden later aan deze rubric toegevoegd.