Robuuste, toegankelijke websites ontwerpen en maken …
Één van de mooiste principes van het web is dat iedereen met een computer en een browser het web kan gebruik. Het web is voor iedereen. Het is geen gecontroleerde (programmeer) omgeving, je kan er gerust van uit gaan dat niemand precies hetzelfde te zien krijgt als wat jij in je 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 ...
In het vak Browser Technologies gaan we onderzoeken wat Progressive Enhancement is en hoe je dit kan toepassen om goede, robuuste, toegankelijke websites te maken. Voor iedereen. Het web is voor iedereen, in dit vak leer je hoe je daarvoor kan zorgen.
het vak bestaat uit 3 opdrachten. In week 1 werken we aan opdracht 1 en 2. Vanaf week 2 werken we aan de eindopdracht.
Voor de eerste opdracht gaan we onderzoeken wat Progressive Enhancement is.
Voor opdracht 2 ga je proberen het Web te laten 'breken' door (browser) features bewust uit te zetten. Wat gebeurt er als images, custom fonts, JavaScript, kleur, breedband internet niet optimaal werken?
Voor de eindopdracht ontwerp en maak je een interactieve toepassing volgens het principe van Progressive Enhancement. Zorg dat alle gebruikers, met alle browsers, in iedere context de toepassing zo goed mogelijk te zien, horen en/of voelen krijgen. De meest 'enhanced' versie is 'delightful UX', mooi en prettig om te gebruiken.
- je leert wat Progressive enhancement is en hoe je dit kan toepassen.
- je leert Browser Technologies te onderzoeken, testen en implementeren als enhancement.
- 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 | Intro, College + briefing opdracht 1 | Presentaties opdracht 1, college + briefing opdracht 2 | Presentaties opdracht 2 |
| Week 2 | College + Briefing De eindopdracht | College + werken aan de opdracht | Feedbackgesprekken |
| Week 3 | College + werken aan de opdracht | College + werken aan de opdracht | Beoordelingen! |
Het web is voor iedereen: Deze week gaan we onderzoeken wat Progressive Enhancement is en kennismaken met testen en het device lab.
Browser Technolgies begint op woensdag. In het eerste college krijg je uitleg over het programma en over het nut van Progressive Enancement. Wat is dat eigenlijk? De meeste CMD studenten hebben dit waarschijnlijk al eens gehoord en misschien iets mee gedaan in blok Tech. Progressive Enhancement, oftewel PE, is een manier hoe je je de code van een website kan bouwen zodat alle gebruikers met alle browsers je website zo goed mogelijk te zien krijgen. Met PE kun je robuuste websites bouwen die het altijd doen. PE is een manier van denken.
| Woensdag 23/3 | Wat |
|---|---|
| 9:30 | College les 1 over het vak, wie, wat, waar en waarom |
| Briefing Opdracht 1 🛹 NPM install Progressive-Enhancement | |
| 16:00 | Checkout in groepjes |
Donderdag gaan we opdracht 1 bekijken en bespreken. Als het goed is heb je een beeld gevormd van Progressive Enhancement. Tijdens de bespreking kun je ook vragen te stellen, samen onderzoeken we wat PE is, waarom het goed is om te begrijpen en misschien kunnen we al wat voorbeelden bespreken hoe je het zou kunnen toepassen.
In het college krijg je uitleg over opdracht 2. Voor deze opdracht ga je proberen het web te laten 'breken' door (browser) features bewust uit te zetten. Wat gebeurt er als images, custom fonts, JavaScript, kleur, breedband internet niet optimaal werken?
🤟 Vandaag geeft Aaron Gustafson om 17:00 een gast-college. hij schreef in 2008 het artikel Understanding Progressive Enhancement waarna deze manier van denken een belangrijk onderdeel werd van Web Development. Aaron Gustafson werkt bij Microsoft als 'web standard advocate' met het Edge browser team.
| Donderdag 24/3 | Wat |
|---|---|
| 9:30 | Opdracht 1 bespreken 🛹 |
| 10:30 | College les 2 over Browser features |
| Briefing Opdracht 2 💔 Breek het web | |
| 16:00 | Checkout per team |
| 17:00 | Gastcollege Aaron Gustafson 🤟 |
Lezen voor les 2 📖
Vrijdag bespreken we opdracht 2. Zorg dat je de bevindingen van je onderzoek online kan presenteren. We gaan de hele feature lijst doorlopen en alle studenten kunnen laten zien wat ze hebben onderzocht, met voorbeelden, de problemen, cijfers en/of meningen. Bedenk ook hoe je de problemen zou kunnen oplossen.
| Vrijdag 25/3 | Wat |
|---|---|
| 9:30 | Opdracht 2 bespreken |
| 16:00 | Work Hard Play Hard |
In week 2 beginnen we met de eindopdracht. We hebben in week 1 onderzocht wat PE is en welke feautures wel of niet goed worden ondersteund. Deze week gaan we leren hoe je een interactieve toepassing in 3 lagen kan ontwerpen en wat je kan doen als een browser een 'enhancement' niet kan tonen.
Woensdag krijg je een briefing van de eindopdracht en een college over browsers, en alles (!) wat daarbij hoort. Daarna gaan we aan de slag: als je een interactieve toepassing ontwerpt die alle gebruikers, met alle browsers moeten kunnen zien, dan zul je moeten bedenken hoe je de toepassing in 3 lagen kan opbouwen, eerst bepaal je de core functionaliteit en de user-delight ... schetsen maar!
| Woensdag 30/3 | Wat |
|---|---|
| 9:30 | Gastcollege van Vitaly Friedman over interfaces! |
| 11:15 | Briefing eindopdracht ✨ Progressive Enhanced Browser Technologie |
| 15:00 | Checkout per team |
| 16:00 | Weekly Nerd @ Medialounge w/ Vitaly Friedman |
Donderdag gaan we voorbeelden van PE en feature detection bespreken in een college over form validatie. Daarna aan de slag met je ontwerp, in clubjes gaan we je ontwerpideeën bespreken en bedenken hoe je dit in 3 lagen zou kunnen bouwen.
| Donderdag 30/3 | Wat |
|---|---|
| 9:30 | College les 3 over Browsers & support detection |
| 16:00 | Checkouts |
Lezen voor les 4 📖
Vrijdag bespreken we in groepjes de vorderingen voor de eindopdracht. Zorg dat je vandaag weet welke browsers (en devices) jij gaat testen.
| Vrijdag 31/3 | Wat |
|---|---|
| 9:30 | Vorderingen bespreken & feedback in groepjes |
| 16:00 | Work Hard Play Hard |