Frontend voor Designers - opdracht 3: Een interactie uitwerken met externe data
Voor deze opdracht ga je een functionaliteit ontwerpen met externe data. De data is JSON die met een REST API van een externe bron wordt ingeladen met Javascript. Als de data geladen is moeten gebruikers je ontwerp op verschillende manieren kunnen bedienen. Verschillende states zijn vormgeven en worden op het juiste moment getoond.
Werkwijze
Schets eerst hoe de functionaliteit er uit komt te zien. Maak daarna een breakdown-schets hoe de verschillende componenten technisch moeten gaan werken…
Werk daarna je ontwerp uit in HTML, CSS en JavaScript.
Planning
- Les 5: Briefing opdracht 3, API uitzoeken, tutorial doorlopen, schetsen en beginnen met coderen
- Les 6: Eerste versie testen. Meenemen: breakdown-schets, JSON laden in de console, daarna in Javascript HTML elementen aanmaken, de data koppelen en toevoegen aan de DOM
- Les 7: Demo presenteren
- Les 8: Oplevering en beoordeling
Criteria
- De uitwerking van je ontwerp moet het doen in een browser en device naar keuze.
- De data wordt van een externe bron ingeladen met Javascript.
- Een aantal states van de UI stack worden opgevangen en zijn vormgegeven.
- In de demo maak je gebruik van meerdere UI events zodat gebruikers je ontwerp op verschillende manieren kunnen bedienen.
- In de demo dien je rekening te houden met de interface design principles 04, 08, 09 & 11 van Principles of User Interface Design.
- Je ontwerp is aantoonbaar getest en verbeterd. Verslaglegging en resultaat publiceren op Github. Voeg een ontwerp en breakdown schets toe. Beschrijf de verschillende versies en hoe ze zijn veranderd na het testen. Leg de code uit.
Resources
- Hier staat een tutorial voor het laden van JSON data en het aanmaken van HTMl elementen.
- Met behulp van XMLHttpRequest of Fetch kan een JSON file worden geladen. Daarna kun je de HTML elementen aanmaken, de juiste content koppelen en aan de DOM toevoegen.
- Bij het laden van externe data kan de server verschillende HTTP response status codes doorgeven, die kun je gebruiken om feedback te tonen.
- Gebruik verschillende UI events om de functionaliteit mee te bedienen.