//Robuuste, toegankelijke websites ontwerpen en maken …
In het vak Browser Technologies leer je hoe je goede, robuuste, toegankelijke websites maakt. Je gaat leren over Progressive Enhancement, Feature Detection en Fallback. Het web is er voor iedereen. In dit vak leer je hoe je daarvoor kan zorgen.
Een van de mooiste principes van het web is dat het er echt is voor iedereen. Iedereen met een computer en een browser moet gebruik kunnen maken van het web. Het web is geen gecontroleerde (programmeer) omgeving. Je kan er gerust van uit gaan dat niemand precies hetzelfde te zien krijgt als wat jij in jouw browser ziet. Er zijn technische beperkingen, zoals - Afmetingen van de browser - Grootte van het apparaat - Manier van interactie - Kwaliteit van de hardware - Kwaliteit van het netwerk. En er zijn mensen. Allemaal verschillende mensen ... Hoe zorg je er dan voor dat websites het altijd doen?
Voor deze opdracht ga je proberen het Web te laten 'breken' door features van het platform bewust uit te zetten. Images, custom fonts, JavaScript, kleur, breedband internet. Het doel van deze opdracht is om erachter komen dat je misschien aannames hebt die niet kloppen, en om je in te laten leven in de eindgebruiker.
Hoe zit het eigenlijk met Progressive Enhancement van je OBA opdracht? Waarschijnlijk kan daar wel het één en ander aan verbeterd worden, dat ding is immers in een week in elkaar gehackt! Het doel van de deze opdracht is leren hoe je een website kan testen in verschillende browsers en devices, en hoe een screenreader werkt.
Voor dit vak maak je een demo die alle gebruikers, met alle browsers, in iedere context te zien/horen/voelen krijgen. Bouw je demo in 3 lagen, volgens het principe van Progressive Enhancement. Gebruik als enhancement een browser technologie die je gaat onderzoeken op functionaliteit, toegankelijkheid en (browser) ondersteuning. De meest 'enhanced' versie is super vet, gaaf en prettig om te gebruiken …
- je leert Browser Technologies te onderzoeken, testen en implementeren als enhancement.
- je leert wat Progressive enhancement is en hoe je dit kan toepassen.
- je leert hoe je Feature Detection doet en wat je kan doen als een 'feature' niet werkt of wordt ondersteund.
| Planning | Woensdag | Donderdag | Vrijdag |
|---|---|---|---|
| Week 1 | Introductie, College over Progressive enhancement + briefing opdracht 1.1 | College Browser detect + presentaties opdracht 1.1 + briefing opdracht 1.2 Fork je OBA | Feedbackgesprekken |
| Week 2 | College Feature detect & browsers + Briefing opdracht 2 | College Q&A + werken aan de opdracht | Feedbackgesprekken |
| Week 3 | College Notificaties + werken aan de opdracht | College Q&A + werken aan de opdracht | Feedbackgesprekken |
| Week 4 | Beoordelingsgesprekken |
Het web is voor iedereen. Leren over Progressive enhancement en kennismaken met testen en het device lab. Planning week 1
Sanne 't Hooft over Interactie. Woensdag 11 Maart, 16:00 in het minorlokaal.
- Slides Les 2 - Features testen & Briefing opdracht 1.2
- Slides Les 2 - College Peter-Paul - Over Browser detects
- Opdracht 1.2 - Fork je OBA
Deze les gaan we onderstaande artikelen bespreken:
Feedbackgesprekken opdracht 1.2 in groepjes, met studentassistenten en docenten.
Deze les gaan we onderstaand artikel bespreken:
Wat laat je zien als een browser of gebruiker een 'enhancement' niet kan tonen of zien? Hoe doe je Feature Detection en wat doe je als een techniek niet werkt of wordt ondersteund? Planning week 2
- Video college Les 3
- Slides Les 3 - Programma & Briefing opdracht 2
- Slides Les 3 - College Peter-Paul - Support detection & Browsers
- Opdracht 2 - Progressive Enhanced Browser Technologie
Deze les worden onderstaande artikelen besproken.:
PE bij de Voorhoede
- Video college Les 4
- Slides Les 4 - Programma en kleine code voorbeelden
- Slides Les 4 - College Peter-Paul - Over webview
Deze les worden onderstaande artikelen besproken:
- The Role of Enhancement in Web Design by Raluca Budiu / Nielsen Norman Group
- A Theory of User Delight by Therese Fessenden / Nielsen Norman Group
- The accessibility mindset by Eric Eggert
Code review opdracht 2.
Deze week werken we verder aan opdracht 2 en houden we video gesprekken om jullie vorderingen te bespreken en vragen te beantwoorden. Planning week 3
- Video college Les 5
- Slides Les 5 - Programma en kleine code voorbeelden
- Slides Les 5 - College Peter-Paul - Over viewports
Deze les gaan we onderstaande artikelen bespreken:
Op bezoek bij Bol.com
- Video college Les 6 -Q&A Verder werken aan opdracht 2.
Lezen:
Verder werken aan opdracht 2.
In week 4 wordt opdracht 2 beoordeeld. Dan gaan we je werk bekijken, bespreken en beoordelen. Planning week 4
Deadline opdracht 2.
Beoordelingsgesprekken in duo's.