Ontwerp en maak een interactieve website voor een opdrachtgever.
Deze leertaak hoort bij sprint 5 Fix the Flow, dit is een leertaak die je individueel uitvoert.
In het college S05W1-01-Sprintplanning-interactie-en-wireflows krijg je uitleg over de opdracht. In de workshop S05W1-02-Programming-interaction leer je hoe je met CSS en JS interactie codeert.
Bij deze leertaak horen de deeltaken:
Je leert hoe je goede interactie kan ontwerpen en maken.
Voor deze opdracht kies je een User Story waarin een gebruiker iets moet doen, zoals het toevoegen van informatie aan een agenda of stap voor stap door een vragenlijst klikken, een chat-formulier of bijvoorbeeld een filter systeem.
Als een gebruiker interactie heeft met een website, moet je goede feedback/feedforward ontwerpen en maken. Zo weet een gebruiker wat die kan verwachten en of de actie gelukt is.
Voor deze opdracht ga je eerst leren een wireflow te tekenen van de interactie die je wil maken. Dat doe je in de deeltaak fix-the-flow-wireflow. Daarna ga je de interactie coderen met HTML, CSS en JS. Tijdens een code/design review ga je de interactie leren testen met een User test.
- Fork deze leertaak.
- Lees de leertaak nauwkeurig door.
- Zet de Wiki klaar om je proces te documenteren, gebruik hiervoor de fases van de DLC en noteer de DOD's.
- Verwerk de feedback die je hebt gekregen tijdens de sprint-review van sprint 4, zet de feedback in issues en/of maak een projectboard aan. Bespreek dit met een docent (checkpoint).
- Kies een User Story uit de backlog van het project, of schrijf zelf een User Story om deze sprint aan te gaan werken. De User story moet gaan over een interactief element.
- Teken een Wireflow van de User Story (deeltaak Wireflow). Bespreek dit met een docent (checkpoint).
- Codeer de interactie met behulp vam JS en documenteer het eindresultaat in de Wiki.
- Test je ontwerp tijdens de code/design review in de eerste week. maak issues aan van de feedback die je krijgt en verbeter de feedback.
- Doe een user test tijdens de code/design review in de tweede week en schrijf een verslag van de user test in de Wiki.
- Presenteer je werk tijdens de sprint review aan de opdrachtgever.
- Tutorial if you only know one thing about JavaScript, this is what I would recommend
- MDN QuerySelector
- MDN ClassList
- MDN addEventListener
Deze opdracht is done als:
- Je hebt een interactie gecodeerd en het proces en eindresultaat gedocumenteerd in de Readme
- Je hebt een code/design review gedaan, issues aangemaakt en de feedback verwerkt
- Je hebt een user test gedaan en de test gedocumenteerd in de wiki