Promotiewebsite Aruba: Data API's en libraries

Data: API en js-library

Doel van de opdracht

Ontwikkel een interactieve promotiewebsite voor Aruba die gericht is op een nieuwe doelgroep. De website moet aantrekkelijk, informatief én functioneel zijn. Je gebruikt technieken als HTML, CSS, JavaScript, een weer-API, openStreetMap, chart.js en databases om de site te verrijken.

Samenwerken

Je werkt aan deze opdracht in kleine groepjes van 2 of 3 leerlingen. Samen bepalen jullie de taakverdeling: wie doet onderzoek, wie werkt aan het ontwerp, wie programmeert, wie verwerkt de data, enzovoort.

Maak vooraf een plan van aanpak waarin je kort beschrijft wie wat doet. Tijdens het project overleg je regelmatig met je groepsleden en help je elkaar waar nodig. Een goede samenwerking is een belangrijk onderdeel van de beoordeling.
! Denk er wel aan dat je ook de onderdelen die een teamgenoot maakt moet begrijpen. 

Communiceren

Tijdens het project moet je laten zien dat je goed kunt communiceren over je werk.
Dit doe je door:

  • Je keuzes en aanpak in het groepje te overleggen en verantwoorden
  • Een korte video-opname te maken waarin je jullie keuzes toelichten.
 

Reflecteren

Na afloop van het project schrijf je een individuele reflectie.
Hierin kijk je terug op je eigen bijdrage, de samenwerking en het eindresultaat.
Denk aan vragen als:

  • Wat ging goed in het project?
  • Wat had beter gekund?
  • Wat was jouw rol in het groepsproces?
  • Waar ben je trots op?
  • Wat zou je een volgende keer anders aanpakken?
 

Je reflectie wordt beoordeeld als onderdeel van het cijfer voor deze opdracht.

Vooraf

Je hebt eerder gewerkt met:

  • UI en UX ontwerp
  • Flowcharts maken (in Lucidchart)
  • UX en UI ontwerp
  • HTML-structuur en CSS-opmaak
  • Externe data inlezen met JavaScript
  • JavaScript voor DOM-manipulatie en logica

De volgende onderdelen zijn nieuw:

  • Gebruik van API’s
    • WeatherAPI
  • Javascript-bibliotheken
    • OpenStreetMap (of Google maps)
    • Chart.js
 

Wat je moet doen: stappenplan

Onderzeoek doel en doelgroep

Zoek een nieuwe doelgroep voor Aruba. Denk bijvoorbeeld aan:

  • Digitale nomaden
  • Milieubewuste reizigers
  • Mensen met een actieve levensstijl
  • Families met jonge kinderen
  • Beschrijf kort waarom deze doelgroep interessant is.
  • Onderzoek wat deze doelgroep belangrijk vindt.
 
Beschrijf de doelgroep en het doel van de website. Wat wil je bereiken?
 
Content maken/samenstellen
  • Schrijf en verzamel content: tekst, foto’s, links en eventueel video.
  • Maak gebruik van rechtenvrije of zelfgemaakte media.
  • Zorg voor inhoud die aansluit bij de gekozen doelgroep.
 
User Experience (UX) ontwerp
  • Bedenk hoe bezoekers je site gebruiken: wat zien ze als eerste? Hoe vinden ze informatie?
  • Maak een wireframe.
  • Zorg dat alles logisch en gebruiksvriendelijk werkt.
 
User Interface (UI) ontwerp
  • Maak een schets of digitaal ontwerp van hoe je website eruit moet gaan zien.
  • Denk aan kleuren, lettertypes, menu’s, knoppen, iconen, afbeeldingen.
 
Flowchart maken

Maak een flowchart waarin je de logica van de interactieve onderdelen van je website uitlegt.
Denk aan: hoe wordt data opgehaald? Wat gebeurt er bij een klik?

De content (Database)
  • Maak en verzamel content (tekst en afbeeldingen) die je in de website gaat gebruiken
  • Sla de content op in een apart js-database bestand zoals je dat eerder deed in de opdracht Digiverse.
    Je bepaalt zelf de structuur van de objecten-array
  • Lees met JavaScript het Database-bestand in met de content van de website.
  • Plaats de informatie op een overzichtelijke en visueel aantrekkelijke manier in de DOM
 
Weather-API

Gebruik bij het maken de volgende informatie:

 
Statistieken (Database)

Gebruik hierbij Deelopdracht 2: grafiek met weergegevens

  • Lees een tweede Database-bestand in met statistieken over het weer op Aruba.
  • Visualiseer de gegevens in tabellen en/of grafieken (bijv. met Chart.js).
  • Laat de gebruiker eventueel zelf kiezen wat er getoond wordt.
 
Integratie openStreetMap of Google Maps (Database)

Gebruik hierbij Deelopdracht 3: interactieve kaart met markers

  • Voeg een Map toe waarop je minimaal 5 highlights van Aruba toont met markers.
  • Laat bij klikken op een marker meer informatie verschijnen (bijv. naam en foto).
  • Maak voor de gegevens die je in de kaart gebruikt maak je een aparte js-database.
 
Ontwikkeling (HTML/CSS/JS)
  • Bouw de volledige website in HTML, CSS en JavaScript met jQuery.
  • Zorg voor een duidelijke structuur, logische navigatie zoals je dat in de ontwerpfase hebt vastgelegd.
  • Als bonus kun je de website responsief maken.
 

Eindresultaat

Een werkende, interactieve en eventueel responsieve promotiewebsite die:

  • gericht is op een specifieke nieuwe doelgroep
  • inhoudelijk en technisch sterk is uitgewerkt
  • gegevens uit databases verwerkt
  • gebruik maakt van een weer-API en openStreetMap en een Chart
  • visueel aantrekkelijk en gebruiksvriendelijk is

Beoordeling/rubric

CriteriumUitstekend (10-9)Goed (8-7)Voldoende (6)Onvoldoende (≤5)
OrganisatieDe groep werkt zeer gestructureerd: er is een duidelijke planning, taakverdeling en goede samenwerking. Iedereen levert een actieve bijdrage, toont initiatief en reflecteert op het groepsproces.De groep werkt over het algemeen goed samen en volgt een globale planning. Taken zijn redelijk verdeeld en de samenwerking verloopt vlot.Er is enige vorm van planning of taakverdeling, maar de samenwerking verloopt moeizaam of is onevenwichtig verdeeld.Er is weinig tot geen structuur. De samenwerking is gebrekkig of ontbreekt, en er is nauwelijks sprake van taakverdeling of initiatief.
Doelgroep & OnderzoekDoelgroep is origineel, goed onderbouwd en volledig uitgewerkt. Inhoud is perfect afgestemd op doelgroep.Doelgroep is duidelijk gekozen en passend. Inhoud sluit goed aan.Doelgroep is benoemd en voldoende uitgewerkt. Inhoud is globaal afgestemd.Doelgroep is vaag of ontbreekt. Nauwelijks of geen afstemming in content.
UI & UX OntwerpOntwerp is professioneel, origineel en gebruiksvriendelijk. Navigatie en indeling zijn intuïtief.Ontwerp is verzorgd, functioneel en goed gestructureerd.Ontwerp is bruikbaar, maar bevat kleine tekortkomingen in opmaak of gebruiksvriendelijkheid.Onlogisch of rommelig ontwerp. Navigatie werkt verwarrend of slecht.
Technische Werking (HTML/CSS/JS)Website is foutloos, responsief en alle onderdelen werken perfect (API, Database, Maps).Website bevat enkele kleine fouten of beperkingen, maar de meeste onderdelen werken goed.Website werkt deels goed, maar er zijn meerdere technische fouten of onvolledigheden.Website is technisch zwak of onvolledig. Belangrijke onderdelen werken niet.
Gebruik van Data & API’sDatabase-bestanden worden correct verwerkt. WeatherAPI en Google Maps werken volledig en slim geïntegreerd.Alle onderdelen zijn aanwezig en goed gekoppeld aan de interface.De data wordt getoond, maar met minimale interactie of opmaak.API’s en/of Database-data worden niet goed gebruikt of ontbreken.
Creativiteit & VerzorgingOrigineel concept, sterk visueel ontwerp en goed uitgewerkte details. Alles is met zorg uitgewerkt.Verzorgde, visueel aantrekkelijke website met duidelijke eigen invulling.De site is duidelijk en leesbaar, maar weinig creatief of aantrekkelijk.Rommelige presentatie, minimale inzet of overgenomen materiaal.