Flowchart en Mockup
Deze week staan de volgende onderwerpen op het programma:
- Flowchart maken van de te maken website van Biofriet.
- Mockup maken van de te maken website van Biofriet.
- Zelfstandig CSS leren via de website Sololearn.
- Je hardware onderwerp verder uitwerken (website pagina en een presentatie) (je hoeft deze NIET te presenteren :-) ).
- Je gaat verder aan de website van Biofriet.
Inleveren van je gemaakte werk.
Je gemaakte werk lever je in op Edmodo.
De groep waar je (na inloggen op Edmodo) lid van moet worden is: https://edmo.do/j/xp9zn6 of...
Je kunt ook in Edmodo klikken op 'join class' en de code mbwzt3 typen
In deze groep (die heet CSS) staan de opdrachten. (Wel eerst inloggen op Edmodo....)
De groep waar je (na inloggen op Edmodo) lid van moet worden is: https://edmo.do/j/xp9zn6 of...
Je kunt ook in Edmodo klikken op 'join class' en de code mbwzt3 typen
In deze groep (die heet CSS) staan de opdrachten. (Wel eerst inloggen op Edmodo....)
1. Flowchart
Een flowchart is een schematische weergave van een proces. Het wordt toegepast om processen te visualiseren en om sneller fouten te kunnen identificeren.
Wanneer we spreken over het stroomdiagram van een website, dan hebben we het over een schematische visualisatie die de (structurele) opbouw van de website weergeeft. Zo’n website stroomdiagram geeft verschillende zaken weer, maar draait voornamelijk om de navigatiestructuur. Met andere woorden: er wordt weergegeven welke pagina’s de website bevat, en naar welke andere pagina’s er vanaf een pagina kan worden doorgeklikt. Het stroomdiagram van een website wordt doorgaans in het begin van het ontwerpproces gemaakt en vormt de basis voor de verdere ontwikkeling van de website. |
Flowchart opdracht:
Maak een flowchart van de te maken website van Biofriet. Zorg dat de navigatiestructuur compleet en overzichtelijk is.
Je kunt een flowchart met veel programma's maken. Mijn advies is om te werken met het online programma draw.io
Lever je gemaakte flowchart voor 14 december HIER in. (Wel eerst inloggen op Edmodo....)
Je kunt een flowchart met veel programma's maken. Mijn advies is om te werken met het online programma draw.io
Lever je gemaakte flowchart voor 14 december HIER in. (Wel eerst inloggen op Edmodo....)
2. Mockup of wireframe
Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect (en of het dus ‘mooi‘ is of niet).
Het mooie van wireframes is daarnaast dat je snel een concept kunt toetsten, niet alleen om te kijken of het idee goed is uitgewerkt, maar ook of het op het gebied van gebruiksvriendelijkheid voldoet. Begrijpt de gebruiker wel hoe de website of applicatie in elkaar zit? In het algemeen zijn wireframes eenvoudig om te zetten in een werkend (klikbaar) prototype om zo nog meer test-data te verzamelen alvorens het concept te laten uitwerken tot een grafisch ontwerp.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect (en of het dus ‘mooi‘ is of niet).
Het mooie van wireframes is daarnaast dat je snel een concept kunt toetsten, niet alleen om te kijken of het idee goed is uitgewerkt, maar ook of het op het gebied van gebruiksvriendelijkheid voldoet. Begrijpt de gebruiker wel hoe de website of applicatie in elkaar zit? In het algemeen zijn wireframes eenvoudig om te zetten in een werkend (klikbaar) prototype om zo nog meer test-data te verzamelen alvorens het concept te laten uitwerken tot een grafisch ontwerp.
Mockup opdracht:
Maak een mockup van de te maken website van Biofriet. Zorg dat alle pagina's duidelijk zijn.
Je kunt een mockup met veel programma's maken. Mijn advies is om te werken met het online programma draw.io
Lever je gemaakte mockups HIER in. (Wel eerst inloggen op Edmodo....)
Je kunt een mockup met veel programma's maken. Mijn advies is om te werken met het online programma draw.io
Lever je gemaakte mockups HIER in. (Wel eerst inloggen op Edmodo....)
3. CSS
4. Hardware
Je gaat deze week ook verder aan je gekozen hardware onderwerp. In je 2-tal verdeel je natuurlijk wel de taken. 1 persoon maakt een webpagina (maakt niet uit waarin of waarop, als het maar openbaar zichtbaar is via een link) en de andere persoon maakt de presentatie. Je hoeft deze niet te presenteren, dus zorg ervoor dat dat de presentatie zelf alle informatie bevat die nodig is.
Lever HIER je hardware presentatie in. (Wel eerst inloggen op Edmodo....)
Lever HIER je hardware website pagina link in. (Wel eerst inloggen op Edmodo....)
Lever HIER je hardware presentatie in. (Wel eerst inloggen op Edmodo....)
Lever HIER je hardware website pagina link in. (Wel eerst inloggen op Edmodo....)
5. Website biofriet
Je gaat deze week ook verder werken aan de website van Biofriet. Zeker nu je een wireframe en een flowchart hebt gemaakt, zal dit zeker helpen bij het overzicht. Lees desnoods nog even goed de opdracht van biofriet door. Klik hier voor die opdracht.