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
homepage
detailpagina
uitwerken na test in 1e werkgroep
Lijst met je bevindingen die in de test naar voren kwamen:
Hier korte omschrijving (met indien nodig afbeeldingen) Problemen:
- Screenreader skipt niet naar de volgende "H" als die niet in beeld is.
- Als de screenreader tussen linkjes skipt, leest hij de productinformatie voor zowel op de afbeelding als het tekstje daaronder (dubbele informatie).
- Als de gebruiker een item in zijn winkelwagen doet, krijgt hij geen audio-feedback dat dit gelukt is.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
-
- Een aria-label toevoegen bij de linkjes (a-tags) van producten die ook een afbeelding bevatten en de alt-tekst van de afbeelding leeg laten.
- Automatische audio-feedback toevoegen.
Hier korte omschrijving (met indien nodig afbeeldingen) Wat gaat goed:
- Focus state toont door omlijning waar de gebruiker zich op het scherm bevindt met voldoende contrast.
- Er zijn veel opties op de homepage, maar bol.com heeft genoeg ruimte per item gekozen zodat de gebruiker niet snel misklikt.
Problemen:
- De navigatie opent niet als de gebruiker er met zijn tab-toets op staat en vervolgens op "enter" drukt.
- Geen feedback als de gebruiker hovered over: klikbare afbeeldingen, social media buttons en pijltje naar rechts om meer producten in de caroussel te bekijken.
- Geen feedback als de gebruiker op een knop klikt (active).
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
-
- Hover feedback toevoegen door bijvoorbeeld de kleur van het lettertype aan te passen, de gehele achtergrond van kleur te veranderen, vergroten van de tekst, tekst te omlijnen, etc.
- Active state toevoegen zodat gebruikers kunnen zien waar ze geklikt hebben.
Hier korte omschrijving (met indien nodig afbeeldingen) Problemen bij concentratie stoornis:
- Er zijn heel veel opties op de home-pagina die het lastig maken om alles in je op te nemen en een actie te kiezen. Bol doet al zijn best om deze keuzes te beperken, maar het blijft lastig.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
Hier korte omschrijving (met indien nodig afbeeldingen) Wat gaat goed:
- Central field loss: De gebruiker moet veel van links naar rechts kijken om de gehele content te bekijken. Doordat Bol zijn content in kleine vakjes heeft opgedeeld, blijft het redelijk scanbaar voor deze gebruikers.
- Kleurenblindheid heeft geen invloed op het onduidelijk maken van de content omdat het voldoende contrast heeft.
Problemen:
- Periphal field loss: Kleine tekst op de site is lastig te lezen, bijvoorbeeld de items in het menu.
- Diabetic eye disease: De tekst is opzich leesbaar, maar het blijft lastig.
- Bij volledige kleurenblindheid is er geen feedback op de linkjes in de hoverstate in de footer.
- Gebruikers met blurred vision kunnen de dunne tekst in bijvoorbeeld de navigatie lastig lezen.
- Geen dark-mode beschikbaar
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Oplossingen:
- Periphal field loss: Mogelijkheid geven om de tekstgrootte op de site aan te passen.
- Zelfde oplossing als periphal field loss. Zo kan elke gebruiker de site aanpassen op zijn specifieke needs.
- Hoverstate in de footer aanpassen door bij hover een lijntje onder de tekst te laten verschijnen.
- Mogelijkhed geven om het gewicht van de tekst aan te passen als gebruikers hier behoefte aan hebben.
- Dark-modus toevoegen waarbij bol.com meer gebruik maakt van gedempte kleuren en zwart/grijze achtergrond.
uitwerken na afloop 2e werkgroep
uitwerken voor 1e voortgang
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code) Goed:
- Carousel maken
- html screenreader friendly maken
- met css de html elementen rangschikken zodat het visueel aantrekkelijker wordt (bv door middel van flexbox)
samen met je groepje opstellen
| student 1 - Kim | student 2 - Tim | student 3 - Julia (ik) | student 4 - Robin |
|---|---|---|---|
| 1.Hoe maak ik de animatie van een hamburgermenu? | 1. Hoe kan ik een functioneel schaakbord maken? | 1. Hoe kan ik gebruikers door een carousel laten skippen d.m.v. buttons? | en dan ik dat |
| 2. Hoe codeer ik een hamburgermenu? | 2. Hoe zorg ik ervoor dat mijn elements responsive blijven? | 2. Hoe kan ik m'n hamburgermenu full-screen tonen? Ja, display:block; , maar die class via JS toevoegen of anders? | dit wil ik zeker |
| 3. Hoe geef ik de gebruiker een light-mode optie? | 3. Met 3 css-style sheets, kan ik de variabele van kleuren in 1 sheet zetten en die dan in de andere twee sheets gebruiken? | ||
| ... | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Bij een input veld (bijvoorbeeld de bol.com zoekbalk) hoort altijd een label. Deze maak je dan visueel onzichtbaar zodat de screenreader hem nog wel ziet.
- Bij de zoekbalk zit ook een button zodat de gebruiker na het typen zijn zoekopdracht kan zoeken. Die button moet het type "submit" hebben, omdat je je zoekopdracht submit naar de server
- Uitleg gekregen hoe een hamburger menu gemaakt kan worden.
- Als het bestand meerdere style sheets heeft, kan het ene style sheet variabele kleuren (e.d.) vanuit andere stylesheets halen.
- Scrollen op de main tijdens het openhebben van het menu kan voorkomen worden door overflowY:hidden op de main te zetten zodra het menu opent.
uitwerken voor 2e voortgang
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)
Dit ging goed:
- Kopje "Service & Contact" stylen met grid
samen met je groepje opstellen
| student 1 - Kim | student 2 - Tim | student 3 - Julia | student 4 |
|---|---|---|---|
| Hoe bepaal ik mijn breakpoints van de website? Houd ik de origenele aan? | Tim is oppermaster in code en heeft geen vragen | 1. Erg leuk dat die pijltjes van mijn carousel buiten beeld staan, maar kunnen die ook zo gemaakt worden dat ik niet naar de zijkant kan scrollen? | en dan ik dat |
| en dat ook nog | dit als er tijd is | 2. Voor mijn productpagina heb ik een tabel nodig. Kan ik ergens een juiste HTML-structuur hiervoor vinden? | dit wil ik zeker |
| ... | ... | ... | ... |
note: Punt 1 is al voor de meeting opgelost met overflow-X:hidden;
hier na afloop snel de uitkomsten van de meeting vastleggen
- Structuur van een tabel kan je op MDN vinden
uitwerken na test in 8e werkgroep
Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):
Hier korte omschrijving (met indien nodig afbeeldingen)
- Als de gebruiker het menu opent, zegt de aria-label op de sluitbutton "open menu"
- Voor de rest is de code screenreader vriendelijk en kan de gebruiker langs alle kopjes en linkjes skippen.
- Goed dat het verborgen menu geskipt wordt en dat de tabtoets niet verdwijnt in het menu
- Netjes aria-labels toegepast op punten waar het nodig is
Hier een omschrijving van hoe het opgelost kan worden
- Aria-label tekst aanpassen naar "sluit menu"
Hier korte omschrijving (met indien nodig afbeeldingen)
- Met tabben kan de gebruiker niet zien waar hij is in de caroussel van categoriën
- Voor de rest kan de gebruiker met muis en toetsenbord overal op de site komen en krijgt hij feedback in de verschillende states.
Hier een omschrijving van hoe het opgelost kan worden
- Focus state toevoegen aan carouselitems
Hier korte omschrijving (met indien nodig afbeeldingen)
- De app is goed te bedienen doordat de knoppen een redelijke grootte hebben. Met parkinson schiet de gebruiker af en toe nog wat uit en kan hij misklikken.
- Vergeleken met de originele site is deze gebruiksvriendelijker door de grotere knoppen em de grotere tekst
Hier een omschrijving van hoe het opgelost kan worden
- Een modus maken waar de buttons groter zijn zodat de gebruiker minder snel misklikt
Hier korte omschrijving (met indien nodig afbeeldingen)
- Bij blurred vision is sommige tekst lastig te lezen omdat het font dun is
- Met de andere visuele beperkingen zoals kleurenblindheid is de site nogsteeds goed leesbaar en is het contrast voldoende
- Als de gebruiker inzoomt op de browser (ctrl +) schaalt de content goed mee, dus gebruikers die hier behoefte aan hebben kunnen ook zelf de site vergroten door in te zoomen.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
- Dikke modus toevoegen met grote letters en zwaardere fonts (als ik tijd heb)
uitwerken voor 3e voortgang
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)
samen met je groepje opstellen
| student 1 - Kim | student 2 - Julia | student 3 - Tim | student 4 |
|---|---|---|---|
| De javascript koppeling werkte niet, wat doe ik fout? | Geen vragen | Mag ik de stappen van mn schaakstukken opslaan in eigen gemaakte html class? | en dan ik dat |
| en dat ook nog | dit als er tijd is | nog een punt | dit wil ik zeker |
| ... | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- punt 1 - Bij de Java koppeling moet "defer" staan zodat de javascript nagelopen wordt nadat de html is ingeladen.
- punt 2 - Het contrast bij bol.com bij de donkere modus was niet overal even goed. Dit kan gecontroleerd worden door te inspecteren. Het contrast moet hoger zijn dan 4,5
- punt 3 - Variabele opslaan is het netste als je dit gewoon in een javascript variabele doet en niet in de html class.
- ...
uitwerken voor eindgesprek
Korte omschrijving met plaatjes
- Zorgen dat met tabben de gebruiker alleen door de navigatie kan als het opengeklapt is met "inset" attribute
- Zorgen dat de gebruiker niet over de main kan scrollen als het menu open is met overflow-Y:hidden op de main
- Structuur van een tabel en deze eenvoudig stylen
- Werken met grid
- Werken met positioning
- Javascript een imagesource van een html element laten opslaan
- Animaties met keyframes gebruikt
- Darkmode toegevoegd en gecontroleerd of het contrast hoog genoeg is (surface plane)
- DOM-manipulatie door de image src aan te passen bij productpagina (surface plane)
- Scroll animaties? Heb snap gebruikt in de categoriën carousel op de homepagina (surface plane)
- Advanced positioning? z-index gebruikt (surface plane)
- Styling van de productpagina afmaken
- Animatie toevoegen als de gebruiker een item toevoegd aan zijn winkelwagen/wishlist (surface plane)
- Modus toevoegen met extra dikke/grotere letters voor gebruikers die daar behoefte aan hebben (surface plane)
- hover/tab styling is lelijk en voelt niet aan als een echte website
continu bijhouden terwijl je werkt
Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).
- voor de ster-shape van reviews https://www.coding-dude.com/wp/css/css-star/
- Bol.com was mn bae voor alle afbeeldingen en svg's
- ...