Procesverslag

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

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

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.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Yani Karagiannis

Je startniveau:

rood

Je focus:

responsive

Je website

Ik heb gekozen voor de website: Digital Bean. Over het algemeen is het een prima website alleen zijn er wel een paar slordigheidsfoutjes daarnaast is de code niet al te netjes, Hier wil ik verandering in brengen en wil ik de site verbeteren volgens mijn visie. Deze site ga ik vanaf scratch volledig opnieuw opbouwen.

In de eerste week, eerste les liep ik al gelijk tegen iets aan wat tot aan het einde van het vak maar niet gefixt kon worden. Mijn github page wilde maar niet online komen te staan. Hij gaf continu een 404 error. Ik vroeg hulp aan klasgenoten, studentassistenten en aan Marten maar niemand wist wat het probleem was. Ookal was dit vervelend moest ik wel gewoon door met het maken van een site.

Je opdracht:

digitalbean.nl

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

Home

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2^e werkgroep

Bevindingen

In de eerste week mochten wij de oorspronkelijke website testen als een slechtziende, iemand met reuma en als iemand met parkinson. Dit was enorm interessant om te doen en uit deze testen kreeg je gelijk best wel ruwe data.

Slechtzienden: Toen ik in de rol van een slechtziende stapte kreeg ik een bril waarmee alles enorm wazig te zien was. Hierdoor moest ik op de contrasten, lettergrootte en de dark mode. De gehele pagina heeft voor de belangrijkste knoppen en teksten best wel felle contrasten. Hierdoor krijg je de site in grote lijnen goed mee. De grootte van de letters zijn ook op prima alleen mogen ze eventueel nog wel iets groter. De dark mode van de pagina doet het helaas niet. Maar aangezien de contrasten van de gehele site best groot zijn is een dark mode niet echt van toepassing voor de contrasten. Het is niet per se veel maar toch een paar puntjes voor verbetering

Slechthorenden: De text to speech functie werkte niet al te best. Verschillende stukken van de pagina werden telkens over geslagen waardoor je best wel cruciale teksten miste.

Reuma: Voor de reuma test kreeg ik een elastiek die mijn vingers aan elkaar vasthield. Hier vond ik eigenlijk niks wat iemand met reuma kan verhinderen in het gebruik van de site. Hier hoeft dus niks tegen en voor gedaan te worden. De pagina met tab rondgaan werkte ook niet helemaal zoals het hoort. Verschillende knoppen en forms werden overgeslagen, hierdoor heb je wel je muis nodig om deze knoppen en forms te gebruiken.

Parkinson: Dit was by far de meeste vreemde ervaring tijdens het testen. Om de parkinson te kunnen faken werd er gebruik gemaakt van een apparaat die op een manier je zenuwen lieten verkrampen waardoor je er niks tegen kon doen, alsof je het echt had. Uit deze test is gebleken dat de knoppen toch nog wat te klein zijn. Dus hiervoor moet ik dan alleen de knoppen vergroten. De pagina met tab rondgaan werkte ook niet helemaal zoals het hoort. Verschillende knoppen en forms werden overgeslagen, hierdoor heb je wel je muis nodig om deze knoppen en forms te gebruiken.

Breakdownschets (week 1)

uitwerken na afloop 3^e werkgroep

de hele pagina:

dynamisch deel (bijv menu):

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

In week 2 was ik begonnen met het maken van de nav, hier was hij nog niet responsive en kreeg hij dus geen hamburger menu als het scherm kleiner werd. Aangezien ik niet echt fan ben van de nav van de oorspronkelijk Digital Bean site wilde ik deze aanpassen met een nette background color ipv van een wit vlak.

Mijn eigen nav

Digital Bean nav

Daarnaast was ik begonnen met het maken van de voorpagina, de achtergrond heb ik er netjes in kunnen krijgen alleen lukte mij het niet om alle pictogrammen bij elkaar te houden en in de juiste posities te zetten. Dit liet ik voor nu even naast mij en ging verder met de rest van de site.

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

Week 3 was voor mij de meest vervelende week van ze allemaal. In week 3 had ik een nav (niet responsive), voorpagina en de info pagina onder de voorpagina alleen had ik toen een probleem dat maar niet weg wilde gaan. Het probleem was dat er een element was die maar bleef uitsteken aan de zijkant, ik kon dit element maar niet vinden dus vroeg ik aan een studentassistent of hij mij kon helpen. Nadat hij even mijn code had bekeken zei hij dat het misschien beter was als ik even opnieuw zou beginnen, opzich had ik hier geen probleem mee aangezien ik alles makelijk terug kon krijgen maar het meest vervelende was dat het niet hielp om opnieuw te beginnen. Nadat ik de nav en voorpagina terug had toegevoegd stak er nog steeds een magisch gedeelte uit de pagina.

Dus vroeg ik de volgende les van deze week aan Marten of hij mij kon helpen en natuurlijk heeft hij het probleem weten op te lossen. Hierdoor kon ik verder met het vullen van de site.

Op dit punt had ik nog steeds problemen met mijn github pages die niet online wilde komen.

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9^e werkgroep

Bevindingen

Begin week 4 had ik nog niet al te veel content. Ik had wel een paar knoppen dus ik kon testen of ik de hele pagina af kon gaan met tab, dit was op het moment nog niet het geval aangezien ik mijn knoppen nog geen atribute of button waarde had gegeven. Dit kon ik dus makelijk oplossen en had hierbij voor de rest geen problemen. Ik had geen werkende dark mode en heb deze ook niet toegevoegd aangezien de contrasten op mijn site best wel groot zijn. Text to speech werkte goed, hieraan hoefde ik niks te veranderen aangezien alles goed duidelijk werd voorgelezen.

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

Week 4 was de laatste week waar we konden werken aan het vak. Hier heb ik de meeste meters weten te maken aangezien ik in deze week mijn volledige pagina responsive heb weten te maken, EINDELIJK het github pages probleem weten op te lossen samen met Marten en ik de laatste content heb kunnen plaatsen in mijn pagina. Al met al ben ik blij met het resultaat en vind ik dat deze site er beter uitziet dan het orginele.

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Ik heb tijdens dit proces geleerd wat grids zijn en hoe je hier mee moet werken, heb geleerd wat media queries zijn en hoe je deze moet gebruiken en hoe je je pagina op github pages moet zetten;) Zonder grappen heb ik wel echt het gevoel dat ik enorm veel heb geleerd over je pagina responsive maken en waar je dan allemaal op moet gaan letten. Ik ben daarom blij met het resultaat en vooral blij met het proces ernaartoe.

Dit was lastig/Is niet gelukt:

Het enige dat mij niet was gelukt om toe te passen was het gebruik maken van auto-fit / auto-fill. Dit wilde ik graag gebruiken voor het responsive maken van mijn pagina maar helaas lukte dit mij niet en heb ik het daarom opgelost door verschillende media queries te gebruiken. Er waren enorm veel tegenslagen gaande weg maar het is mij uiteindelijk toch gelukt om het allemaal in orde te krijgen.

Toegankelijkheid Checklist

Deze toegankelijkheid checklist is ingevuld door Martin Fikri over de site die ik aanpas/ verbeter, Digital Bean. https://drive.google.com/file/d/1GeZE48WVYIPWReHK9iPM9lfbW0eF8fmB/view?usp=share_link

Bronnenlijst

continu bijhouden terwijl je werkt

1. Een tutorial die mij hielp om een responsive nav te maken. ( Create a Responsive Hamburger Menu using only HTML and CSS | Responsive Navigation Menu https://www.youtube.com/watch?v=QQlxvj_GKss&t=147s )