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.
Deelopdracht 2: Grafiek met eigen gegevens
Bedenk een dataset die relevant is voor de inhoud van jouw website en zich goed leent voor een grafische weergave.
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 bijvoorbeeld 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.
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.