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.
uitwerken voor kick-off werkgroep
Koen Dekker
Rood
Surface Plane (en stiekem een beetje responsive)
uitwerken voor kick-off werkgroep
https://store.steampowered.com
Home Pagina
Metal Gear Solid V Store Pagina
uitwerken na test in 1e werkgroep
Lijst met je bevindingen die in de test naar voren kwamen:
De screenreader was amper te gebruiken. 9 van de 10 afbeeldingen op de website hadden geen label waardoor je niet kon weten wat de afbeelding was. Zelfs het log van de website zelf had geen label!
Hoe kan dit opgelost worden?
Alle afbeeldingen goede duidelijke labels geven zodat je weet waar je bent en wat de afbeelding is.
Via Tab was het op het begin duidelijk waar jij je bevindt. De website gaf duidelijk aan door middel van een lichte lijn om het item heen waar je was, totdat je doorklikt. Je komt dan terecht bij een lijst die niet in beeld staat. Als je daarna verder klikt en je bij de foto's komt wordt er niks meer aangegeven. Je bent dan volledig afhankelijk van de tekst die links onderin staat.
Hoe kan dit opgelost worden? Duidelijk per item aangeven waar je bent. De lijstitems die niet in beeld zijn verstoppen zodat ze niet worden geselecteerd. Alle items kunnen worden gesorteerd per categorie zodat je minder lang alle lijsten af hoeft te gaan van onderdelen wat jou niet interesseert.
Motoriek is het prima te doen met de website. Echter als je problemen hebt zoals parkinson is er een mogelijkheid dat je snel klikt op het verkeerde onderdeel.
Hoe kan dit mogelijk opgelost worden? Door middel van wat meer ruimte tussen de onderdelen.
De website is lastig te bekijken door de brillen heen. Het overzicht verlies je snel en het is lastig om je focus te houden op 1 onderwerp als je eventjes wegkijkt. Dark/light mode is er niet, Steam staat altijd op darkmode. Kleurenblind/contrast is in principe prima te handelen. Het enige nadeel is dat het lichtelijk slecht te lezen is door het lage contrast.
Hoe kan dit opgelost worden? Door een light mode toe te voegen. Hierdoor is het makkelijker om naar de kleuren van de website te kunnen kijken.
uitwerken voor 1e voortgang
Het maken van de website zelf ging wel goed. Ik denk dat ik vrij goed op weg ben.
samen met je groepje opstellen
| Koen | Soraya | | Vraag over categorieën | Foto kan niet in het midden. | | en vraag over opdracht: wel betermaken of niet?| Ordered list |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Catergoie vraag opgelost. Achteraf toch aangepast.
- Zeker betermaken! Dat is hartstikke goed!
uitwerken voor 2e voortgang
Ik vind dat ik zoals vorigeweek vrij goed bezig ben. Ik pak het javascript en alle codes waar we het vorig jaar over hebben weer vrij snel op. Het is mij ook opgevallen dat ik met een veel kritischer oog kijk naar het werk dat ik maak. Ik kijk voornamelijk in het oog van de gebruiker. Vind ik het logisch als dit zo staat? Of is dit makkelijk te lezen?
samen met je groepje opstellen
| Koen Dekker | Soraya | | Moet ik nog meer toevoegen aan mijn huidige pagina?| Heeft een vraag over een cirkel |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Span verwijderen want waarschijnlijk is P genoeg.
- Ik hoef niks meer toe te voegen. Het is al goed. Als ik wil kan ik nog wat toevoegen.
- ...
Ik heb de website over het algemeen goed aangepast zodat de website meer toegangelijk is voor verschillende soorten aandoeningen. Met name op het zichtfactor is het daarin erg opgestoken.
Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):
De screenreader was wederom amper te gebruiken. Ik ben er nog niet achter of dit ligt aan mijn screenreader zelf of aan mijn website. Ik ga vragen aan een klasgenoot of die het op hun Macbook kan testen.
Hoe kan dit opgelost worden? Als het probleem ligt bij mijn website: namen aanpassen zodat hij alleen de link noemt ipv ook de afbeelding.
Met de muis en het toetsenbord (bijvoorbeeld door middel van tab) is de website goed door te navigeren.
Na het testen met het schockaparaat kwamen we er ook achter dat de website prima te bedienen is. Wel met de tabknop. De muis is slecht te gebruiken.
Hoe kan dit opgelost worden? Door de tabtoets te gebruiken.
We kwamen er achter dat een aantal lettertyp-kleuren te donker waren om goed te kunnen zien.
Hoe kan dit opgelost worden? Ik heb inmiddels de kleuren aangepast zodat het beter leesbaar is. Ook getest met de brillen.
uitwerken voor 3e voortgang
Deze week ben ik vooral bezig geweest met mijn website afmaken. Ik heb veel moeite met de goede code vinden die werkt op het item die ik wil aanpassen. Hierdoor ben ik vaak wat langer bezig. Maar als ik het afheb dan werkt het ook goed. Dus over het algemeen gaat het vrij goed.
samen met je groepje opstellen
| Koen | Soraya |
|---|---|
| Vraag over Fontsizes | Vraag over responsive |
| Vraag of er nog meer dingen bij moeten voor en voldoende | Vraag over grid |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Fontsizes zijn prima! Ik moet ze wel allemaal gelijk maken.
- Kijk nog even naar het beoordelingsformulier
uitwerken voor eindgesprek
Korte omschrijving met plaatjes
Ik ben veel beter geworden met gebruiken van de grid en flexbox in samenwerking met de media queries. Ik wou graag dat mijn website ook responsive was dus ik heb dat toegevoegd.
Ik ben na de lessen van Vasilis erachter gekomen hoe deze vette actie mogelijk is bij coderen, Dark light mode! Door middel van het aanpassen van de :root kleuren is het erg gemakkelijk om dit te maken!
Om dit menu te maken had ik javascript nodig. Dit was erg lastig omdat ik niet wou dat de ontzichtbare onderdelen verteld kon worden door de screenreader. Uiteindelijk (na 3 uur) is het mij gelukt om dit te doen. Ik was een klein onderdeel vergeten toe te voegen...
Korte omschrijving met plaatjes
Ik wou graag een funtie toevoegen dat wanneer je op "toevoegen aan winkelwagen" drukt er een eentje kwam te staan bij de winkelwagen. Door middel van te weinig tijd heb ik dit niet gecodeerd. Het is te doen door middel van een javascript addeventlistener toe te voegen met een clas die het eentje zichtbaar maakt.
continu bijhouden terwijl je werkt
Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://cssgradient.io
- De top hulp van de Studentassistenten! Wat een toppers zijn dat!