IxD & Technology 2

De opdracht
Bij het vak IxD & Technology 2 kreeg ik verschillende challenges. De challenges hadden allemaal te maken met het ontwerpen en coderen van een webpagina. Een belangrijk onderdeel dat in alle challenges terug komt is het meeschalen van de webpagina, een responsive design.

Jaar
2020

Behaalde cijfer
6,5

Challenge 1

Bij challenge 1 was het de bedoeling dat ik een webpagina maakte met gegevens voor een ruimteschip, een dashboard. Het ruimteschip reist van de Aarde naar Mars. De bedoeling was dat je de verschillende data visueel weergeeft, zodat mensen tijdens de reis snel een overzicht hebben van belangrijke gegevens.

Als eerst heb ik schetsen gemaakt om zo tot een mooi en overzichtelijk ontwerp te komen. Deze schetsen zijn voor vier verschillende schermgroottes ontworpen.
Toen ik een goed beeld voor ogen had van mijn ontwerp, heb ik dit in Adobe XD uitgewerkt.

Mijn uiteindelijk webpagina heb ik gemaakt met behulp van HTML5, CSS3 en Javascript.

Web 1280 – 1
Challenge2

Challenge 2

Bij challenge 2 was het de bedoeling dat ik een klok maakte voor de mensen in het ruimteschip. m zo toch te zien hoe laat het op de Aarde is. Ook is één van de eisen dat we CSS animatie moeten gebruiken.

Om goed de verschillende fasen van de dag te laten zien, heb ik gebruik van gemaakt van Javascript. Met behulp van Javascript heb ik ervoor gezorgd dat de afbeeldingen en achtergrond veranderd afhankelijk van hoe laat het is.  Zo kan je nog sneller zien hoe laat het op de Aarde is.

Net als bij de voerige challenge heb ik eerst een ontwerp gemaakt en daarna heb ik dit met behulp van HTML5, CSS3 en Javascript uitgewerkt. 

Challenge 3

Bij de derde en tevens laatste challenge was het de bedoeling om een geschikte landingsplek te zoeken voor de mensen die weer terug zouden keren naar de Aarde.

Ik heb uiteindelijk een website gemaakt die door middel van een afbeelding van een astronaut, een groene of rode, aan geeft of het een geschikte plek is om te landen.
Of je een groene of rode astronaut te zien krijgt hangt af van twee variabelen: hoe hard het waait en of het regent. Als het harder waait dan windkracht 5 of als het regent, krijg je een rode astronaut te zien. Als dit niet het geval is verschijnt er een groene astronaut.

Om dit voor elkaar te krijgen heb ik gebruik gemaakt van twee API’s, die van Openweathermap en van Mapbox. Deze twee heb ik samengevoegd en ben uiteindelijk op mijn eindontwerp gekomen.

astronaut_groen&rood