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-fix-the-flow krijg je uitleg over de opdracht. In de workshop S05W1-03-Programming-interaction leer je hoe je met CSS en JS interactie codeert.
Bij deze leertaak hoort de deeltaak:
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 systeem, 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 CSS en JS. Tijdens de code/design review op vrijdag ga je de interactie leren testen met een User test.
- Fork deze leertaak
- Kies een geschikte User Story uit de backlog van het project waar je aan gaat werken.
- Schrijf de User Story in de Readme van je repo
- Kopieer de Wireflow die je hebt gemaakt in de deeltaak Wireflow naar de Wiki van je repo
- Codeer de interactie met CSS en JS en commit je code naar je repo
- 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 tijden 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
Focus sprint 5 - De focus van deze sprint ligt op interactie en informatie architectuur van een website.
Voor deze leertaak gelden de gedragscriteria voor sprint 5:
- Methodisch handelen: Student past aangeboden principes en conventies op het gebied van frontend, interface design en vormgeving toe.
- Communiceren: Student luistert naar wat een ander zegt en neemt dit serieus.
- Communiceren: Student kan binnen de squad ontwerpkeuzes, eigen ideeën en producten begrijpelijk verwoorden.
Probleemoplossend vermogen: Student schetst om gedachten en processen te verkennen.- Lerend vermogen: Student maakt aangeboden materie eigen en gebruikt dit bij leertaken.
Deze opdracht is done als:
- Je hebt een interactie gecodeerd en het 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