Procesverslag

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Hey, ik ben Riri en ik deel graag mijn verslag met je over het proces van mijn gekozen website voor het project FED. Mijn keuze viel op de website Zodan.nl, omdat ik mezelf wilde uitdagen door aan een website te werken die al goed is. Het feit dat dit de website van mijn docent is, maakt het extra interessant. Hij kent immers precies de opbouw van de code en weet waar de mogelijkheden voor verbeteringen liggen. Hierdoor kan ik aantonen dat ik met aandacht en oog voor detail naar alles heb gekeken. Bovendien biedt het de kans om snel en gemakkelijk feedback te ontvangen.

Ik beschouw mijn keuze voor deze specifieke website als een gedurfde zet, aangezien het de website van de docent zelf is. Het brengt ook extra motivatie en plezier in mijn werk. In dit project wil ik me vooral richten op het toepassen van nieuwe technieken en streven naar een gevoel voor toegankelijk ontwerp met oog voor detail. Ik zie dit project als een waardevolle oefening om een realistisch beeld te krijgen van wat er van me wordt verwacht wanneer ik in een professionele omgeving werk.

Mijn doel is om ervoor te zorgen dat het herontwerp van deze website een significante verbetering is voor alle gebruikers. Ik wil meer leren over de beperkingen die invloed kunnen hebben op het ontwerp en wil ontdekken hoe ik hiermee om kan gaan. Het verkrijgen van kennis over mogelijke oplossingen is voor mij essentieel, en ik wil deze kennis integreren in mijn standaard werkwijze. Ik ben van plan altijd alert te zijn op deze aspecten wanneer ik aan ontwerpprojecten werk.

Hoewel de website niet bijzonder complex is, bevat het voldoende content en elementen om mezelf goed mee bezig te houden. Dit maakt het een uitstekende keuze om mijn vaardigheden verder te ontwikkelen. Het feit dat de website al goed is, motiveert me om te leren dat er altijd ruimte is voor verbetering. Het is een waardevolle ervaring waaruit blijkt dat zelfs wanneer iets goed is, er altijd mogelijkheden zijn om het nog beter te maken.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Raha Khodabakhsh (Riri)

Je startniveau:

Blauw :D

Je focus:

Responsive design , toegankelijk , leuk , Extra leren en me zelf uitdagen.

Je website

uitwerken voor kick-off werkgroep

Tijdens de kick-off van de werkgroep heb ik een website gekozen en oefeningen gemaakt om mezelf vertrouwd te maken met de CSS-code die we eerder hebben behandeld. Ik heb wat gespeeld met de code om mijn vaardigheden te verbeteren. Tijdens de sessie kregen we uitleg over verschillende soorten beperkingen en hoe deze de gebruikerservaring kunnen beïnvloeden. We moesten vervolgens geleidelijk een lijst maken van mogelijke verbeterpunten voor de gekozen website en deze testen met betrekking tot deze beperkingen.

Eerste poging voor een lijst van verbeterkansen:

• Tekst begint te typen aan het begin.

• Golfbewegingen.

• Kleurselectie.

• Duidelijkheid van de "Klik hier!"-knop.

• Gebruik van diverse lettertypen.

• Contrast tussen de kleur van iconen en de achtergrond.

• Tekst is niet gecentreerd.

• Afwezigheid van een navigatiebalk; alleen een hamburgermenu.

• Ruimte tussen het zoekicoon en het hamburgermenu.

• Overmatig gebruik van 'div'-elementen in de code.

  Je opdracht:

  Zodan.nl

  Screenshot(s) van de eerste pagina (small screen):

Home page zodan.nl

Screenshot(s) van de tweede pagina (small screen):

hier de naam van de pagina

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2^e werkgroep

Tijdens de tweede werkgroep hebben we in duo's een samenvattende versie van de WCAG-test op onze website uitgevoerd. Hierdoor kregen we een beter inzicht in de mogelijkheden voor verbetering. Daarnaast hebben we flexbox-oefeningen gedaan en zijn we begonnen met het opstellen van een lijst. Langzaamaan zijn we gestart met het ontwerpen van het nieuwe design.

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen:

Breakdownschets (week 1)

uitwerken na afloop 3^e werkgroep

Hier is een overzicht van alle elementen op de webpagina's die ik wil verbeteren, samen met de redenen erachter.

de hele pagina:

dynamisch deel (bijv menu):

wellicht nog een dynamisch deel (bijv filter):

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Het voortgangsgesprek verliep goed, en ik heb positieve feedback ontvangen. Het was geruststellend om te horen dat ik op de juiste weg ben en gewoon moet doorgaan. Er werd echter ook opgemerkt dat het wellicht niet handig is om de kleurenpalet te veranderen, omdat dit de merkstijl is en niet zomaar aangepast kan worden.

Verslag van meeting

Ik heb geprobeerd de opmaak van de secties te veranderen en verschillende soorten grids te gebruiken om de elementen op een andere manier te plaatsen. In het begin was het behoorlijk zoeken omdat alle secties dezelfde class hadden, en wanneer ik iets in één sectie wilde veranderen, veranderde automatisch alles. Dus moest ik de code aanpassen, maar ik denk dat ik nu op het juiste spoor zit en dat alles duidelijk is.

Ik ondervond aanzienlijke moeilijkheden met de golfanimatie op de header van de website omdat ik nog nooit eerder met SVG had gewerkt. Ik moet wat meer onderzoek doen en leren hoe alles precies werkt. Daarnaast overweeg ik om de mogelijkheden van een andere kleurenschema voor de website te verkennen. Is de huidige kleur toegankelijk, of moet ik iets nieuws bedenken?

Wat ik nog lastig vind, is dat mijn JavaScript in jQuery is geschreven en ik van plan ben om het om te zetten naar puur JavaScript. Dat vergt nog wat extra inspanning, maar ik ben vastbesloten om het onder de knie te krijgen.

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1	student 2	student 3	student 4
dit bespreken	en dit	en ik dit	en dan ik dat
en dat ook nog	dit als er tijd is	nog een punt	dit wil ik zeker
...	...	...	...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• punt 1
• punt 2
• nog een punt
• ...

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9^e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

student 1	student 2	student 3	student 4
dit bespreken	en dit	en ik dit	en dan ik dat
en dat ook nog	dit als er tijd is	nog een punt	dit wil ik zeker
...	...	...	...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• punt 1
• punt 2
• nog een punt
• ...

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Korte omschrijving met plaatjes

Dit was lastig/Is niet gelukt:

Korte omschrijving met plaatjes

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

1. bron 1
2. bron 2
3. ...

Dingen dat ik niet wist en ik moest leren hoe ze allemaal werken.