Journal

Sprint 9: The Web is for Everyone

Datum: 17/03/25

Wat heb je gedaan?

Vandaag hadden we een workshop over user generated content. We leerden hoe we progressive enhancement kunnen toepassen door eerst de core functionaliteit te bepalen, te starten met eenvoudige technieken zoals HTML en mobile-first CSS, en daarna verder te verbeteren met JavaScript.

We bespraken ook wat een goede website maakt: hij moet responsief, toegankelijk, performant en progressively enhanced zijn. Ik heb daarnaast schetsen en een wireflow gemaakt voor een user story voor Milledoni.

Hoe kan ik de bookmark-functionaliteit voor Milledoni bouwen volgens het principe van progressive enhancement?

Verwijzingen:

Workshop User Generated Content Wireflow voor User Story Post URL voor Milledoni Bookmarklijst

Sprint 9: The Web is for Everyone

Datum: 19/03/25

Wat heb je gedaan?

Ik geleerd over UI states en bepaald welke ik ga toepassen op mijn project. Daarnaast heb ik een werkende form gebouwd met de POST-method. Hiermee kan een gebruiker een cadeau toevoegen aan een lijst of het verwijderen door opnieuw te klikken.

Ik zal de volgende UI states gebruiken: een loading state bij het openen van de detailpagina (door een loading circle te tonen), een empty state bij het eerste laden van de pagina (met een geblurde afbeelding die daarna scherp wordt), en een error state voor als de data niet laadt (met een foutmelding).

Hoe kan ik zorgen dat mijn interface op elk moment een bruikbare en toegankelijke state toont, ongeacht wat er met de data gebeurt?

Verwijzingen:

Uitleg over UI States

Sprint 9: The Web is for Everyone

Datum: 21/03/25

Wat heb je gedaan?

Ik heb mijn bookmark list interactie gepresenteerd tijdens de stand-up. Kyan uit 1H heb ik laten zien hoe ik met een POST items toevoeg aan de database. Daarnaast heb ik Renzo geholpen met het opzetten van zijn GET en POST routes. Ook heb ik een loader gemaakt die op beeld verschijnt nadat er op een link geklikt wordt.

De eerste issue ging over het verbeteren van de empty state en het toevoegen van een fallback voor als data niet beschikbaar is. De tweede issue richtte zich op het tonen van feedback aan de gebruiker na een actie (zoals toevoegen of verwijderen van een item).

Hoe kan ik mijn interacties nog intuïtiever maken voor gebruikers, zonder afbreuk te doen aan performance en toegankelijkheid?

Sprint 9: The Web is for Everyone

Datum: 23/03/25

Wat heb je gedaan?

Ik heb de loading bar afgemaakt. Issue 20 Nieuwe issue gemaakt vopor mn back button, omdat het nu terug gaat naar de home pagina en niet naar de vorige pagina. Issue 21

Sprint 9: The Web is for Everyone

Datum: 24/03/25

Wat heb je gedaan?

Ik heb gewerkt aan feature detection en geleerd hoe je code kunt gebruiken afhankelijk van de ondersteuning van de browser. Ik heb de @supports regel gebruikt om CSS-declaraties te specificeren die afhankelijk zijn van de browserondersteuning voor CSS-functies. Feature Detection, @supports

Ik heb een progressieve enhancement toegepast door de core functionaliteit eerst te maken en daarna de enhancements maken voor gebruikers van modernere browsers. Progressive Enhancement

Ik heb de code getest in verschillende browsers en ervoor gezorgd dat de basisfunctionaliteit werkt voor de meeste gebruikers, terwijl ik extra functionaliteit toevoeg voor gebruikers met moderne browsers. CodePen voorbeeld.

Verder heb ik de core functionaliteit voor tekst en audio getest en geoptimaliseerd, en een FAQ-sectie en carrousel gemaakt voor de deeltaak.

Sprint 9: The Web is for Everyone

Datum: 28/03/25

Wat heb je gedaan?

Tijdens de code en design review heb ik feedback gegeven aan Sebastiaan Saif Marcin

Sprint 9: We Love Web met Ischa Gast

Datum: 28/03/25

Toegankelijkheidsproblemen

Ischa bespreekt het belang van toegankelijkheid op het web voor mensen met verschillende beperkingen. Er wordt ingegaan op visuele, auditieve, cognitieve en ouderdomsbeperkingen en hoe deze de gebruikerservaring kunnen beïnvloeden. Bijvoorbeeld, te veel of te weinig contrast kan problematisch zijn voor visueel beperkte gebruikers.

Oplossingen voor Toegankelijkheid

Om websites toegankelijker te maken, is het belangrijk om goede HTML en koppenstructuur te gebruiken. Duidelijke linktekst is essentieel, evenals voldoende contrast. Ook moeten websites visuele feedback bieden voor de tabindex om navigatie met het toetsenbord te vergemakkelijken.

Voorbeeld van problemen

Ischa deelde een voorbeeld van een collega die moeite had met het boeken van een ticket op een website, omdat de hulplink moeilijk te vinden was, helemaal onderaan de pagina. Ook gaf Ischa het voorbeeld van een kleurblinde persoon die Coolblue niet goed kan gebruiken vanwege de kleurkeuzes, maar wel Bol.com, die betere contrasten biedt.

Screenreader en toegankelijkheid

Ischa benadrukt het belang van doorzichtige tekst voor screenreaders, zodat de inhoud wel leesbaar is voor mensen met een visuele beperking, maar niet zichtbaar voor normale gebruikers. Sven, die blind is, kan bijvoorbeeld op wedstrijdniveau gamen dankzij geluiden die elke beweging aangeven.

voorbeelden

Een voorbeeld werd gedeeld van Schiphol, waar een assistentiebutton niet effectief was voor dove mensen, aangezien de enige optie was om met iemand te praten. Daarnaast had de HEMA website geen visuele feedback voor de tabindex, waardoor het moeilijk was om met het toetsenbord te navigeren.

Zelfstandige benadering van Ischa

Ischa maakt zelf websites toegankelijk, zelfs wanneer de klant daar niet specifiek om vraagt, wat bijdraagt aan een meer inclusieve gebruikerservaring.