Promotiewebsite Aruba: Data API's en libraries
Deelopdracht 1: Weerwidget
In dit onderdeel van de opdracht ontwikkel je een weerwidget die je opneemt in je promotiewebsite.
- De widget toont in elk geval de UV-index, temperatuur, neerslag en windkracht.
- Daarnaast voeg je minstens vijf andere relevante weergegevens toe. Denk bijvoorbeeld aan: luchtdruk, luchtvochtigheid, gevoelstemperatuur, windrichting, zonsopkomst/-ondergang of zichtbaarheid.
- Zorg dat de vormgeving en inhoud van de widget afgestemd zijn op de doelgroep die je eerder hebt gekozen.
- Je maakt gebruik van een (gratis) weer-API om de actuele gegevens op te halen.
Gebruik de informatie en voorbeeldcode op de pagina Weerwidget als basis voor je eigen ontwerp.
De widget hiernaast is een voorbeeld. Bedenk zelf de vorm en animatie die bij jouw doelgroep en ontwerp past.
Deelopdracht 2: Grafiek met weergegevens
Download HIER een dataset met uitgebreide weergegevens van Aruba van 2006 tot 2020.
Bestudeer de dataset. Beslis welke gegevens je wilt gebruiken. Denk hierbij vooral aan het doel en de doelgroep van de website.
Deze gegevens sla je op in een aparte JavaScript-database, in de vorm van een array van objecten.
Gebruik deze data vervolgens om een grafiek te genereren met Chart.js.
Je bent vrij in de keuze van het type grafiek, zolang deze de informatie op een duidelijke, aantrekkelijke en bij de doelgroep passende manier presenteert.
Voor deze opdracht krijg je géén kant-en-klare code. Je gaat zelf uitzoeken hoe je een grafiek maakt met behulp van Chart.js
Denk goed na over welke grafiekvorm past bij jouw dataset en doelgroep.
Zorg er tenslotte voor dat de stijl en kleuren van de grafiek aansluiten bij het ontwerp van je website, zodat het geheel er professioneel uitziet.
Hiernaast zie je een voorbeeld van een grafiek die gemaakt is met Chart.js
| Afkorting | Betekenis (indien bekend) | Afkorting | Betekenis (indien bekend) | |
| TTT avg | Gemiddelde temperatuur (°C) | CLD 0/8 | Bewolking 0/8 (helder) – aantal observaties of % | |
| TTTmax | Temperatuur maximum (°C) | CLD 1/8-4/8 | Bewolking licht/matig (1/8 tot 4/8 dekking) | |
| TTTmin | Temperatuur minimum (°C) | CLD 5/8-7/8 | Bewolking zwaar (5/8 tot 7/8 dekking) | |
| TwTwTw | Temperatuur nattebol (Wet Bulb Temperature) | CLD 8/8 | Bewolking volledig (8/8 dekking) | |
| TdTdTd avg | Gemiddeld dauwpunt (°C) | N TOTAL % | Totale bewolkingsdekking (%) | |
| eee avg | Gemiddelde dampdruk (hPa of mbar) | Onweers-dagen | Aantal onweersdagen | |
| RH % | Relatieve vochtigheid (%) | HRS RRR | Aantal uren met neerslag | |
| DDD VECTOR | Windrichting (vector) in graden | REGEN VERLET min | Regenonderbreking in minuten | |
| FFF AVG | Gemiddelde windsnelheid (knopen of m/s) | Pers ddd | Persistente windrichting (in graden) | |
| FFF MAX | Maximale windsnelheid (knopen of m/s) | % pers ddd | Percentage persistente windrichting | |
| RRR 24 | Totale neerslag in 24 uur (mm) | Pers.ff | Persistente windsnelheid | |
| PPP AVG | Gemiddelde luchtdruk (hPa) | % Pers ff | Percentage persistente windsnelheid |
Deelopdracht 3: Interactieve kaart met markers
Naast een grafiek en een weerwidget voeg je ook een interactieve kaart toe aan je website.
Hoewel voor dit soort toepassingen vaak Google Maps wordt gebruikt, vereist Google een API-sleutel waarvoor je betaalgegevens moet opgeven. Daarom werken we in deze opdracht met een toegankelijk en gratis alternatief: OpenStreetMap, gecombineerd met de JavaScript-bibliotheek Leaflet.js.
Wil je tóch liever met Google Maps werken? Dan mag dat — maar alleen na overleg met je ouders, en op eigen verantwoordelijkheid.
Net als bij de grafiekopdracht ga je ook hier zelf ontdekken hoe het werkt.
Wat je maakt:
- Een interactieve kaart op basis van OpenStreetMap
- Minimaal 5 markers die passen bij de inhoud van jouw website
- De gegevens over de locaties (zoals coördinaten, titels, beschrijvingen en afbeeldingen) worden opgeslagen in een JavaScript-database (een array van objecten in een apart .js-bestand)
- Bij het klikken op een marker:
- verschijnt een label op de kaart (popup)
- wordt in een aparte div buiten de kaart een informatieve tekst met foto’ weergegeven.
Zorg ervoor dat de vormgeving en inhoud van de kaart passen bij jouw doelgroep en de stijl van je site.