//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 | Feedbackgesprekken |
| Week 4 | Beoordelingsgesprekken (Dinsdag en Woensdag) | Weekly Nerd | Goede vrijdag |
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 10/3 | Wat |
|---|---|
| 9:30 | College les 1 over het vak, wie, wat, waar en PE |
| Briefing Opdracht 1 🛹 NPM install Progressive-Enhancement | |
| 16:00 | Checkout per team |
Donderdag gaan we in je Squad 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 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 11/3 | Wat |
|---|---|
| 9:30 | Opdracht 1 bespreken in Squads 🛹 |
| 10:30 | College les 2 over Browser features |
| Briefing Opdracht 2 💔 Breek het web | |
| 16:00 | Checkout per team |
| 18:00 | Gastcollege Aaron Gustafson 🤟 |
Lezen voor les 2 📖
Vrijdag bespreken we in clubjes 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 12/3 | Wat |
|---|---|
| 11:30 | Opdracht 2 bespreken in clubje A 💔 |
| 13:00 | Opdracht 2 bespreken in clubje B 💔 |
| 14:30 | Opdracht 2 bespreken in clubje C 💔 |
| 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 17/3 | Wat |
|---|---|
| 9:30 | College les 3 over browsers, browser detect, support detection en web views |
| Briefing eindopdracht ✨ Progressive Enhanced Browser Technologie | |
| 10:30 | Sessies: User Deligt & Core functionaliteit ✨ |
| 16:00 | Checkout per team |
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.
🤟 Vandaag geeft Heydon Pickering een gastcollege om 14:00. Heydon Pickering is een web developer, hij geeft lezingen en schrijft over toegankelijkeid en web design o.a. voor Smashing Magazin. Vorige week heb je een metafoor voor PE bedacht naar aanleiding van een filmpje van Hedon Pickering zelf. Hij komt vandaag langs! Wat wil je hem vragen over het web?
| Donderdag 18/3 | Wat |
|---|---|
| 9:30 | College les 4 over form-validatie |
| 10:30 | Sessies: Bouwen in 3 lagen ✨ |
| 14:00 | Q&A Heydon Pickering 🤟 |
| 16:00 | Checkout per team |
Lezen voor les 4 📖
Vrijdag bespreken we in clubjes de vorderingen voor de eindopdracht. Zorg dat je vandaag weet welke browsers (en devices) jij gaat testen.
| Vrijdag 19/3 | Wat |
|---|---|
| 11:30 | Vorderingen bespreken in clubje C ✨ |
| 13:00 | Vorderingen bespreken in clubje A ✨ |
| 14:30 | Vorderingen bespreken in clubje B ✨ |
| 16:00 | Work Hard Play Hard |
Deze week werken we verder werken aan de eindopdracht en houden we gesprekken om jullie vorderingen te bespreken en vragen te beantwoorden.
| Woensdag 24/3 | Wat |
|---|---|
| 9:30 | College les 5 over Viewports |
| 10:30 | Sessies: Feature detectie en testen ✨ |
| 16:00 | Checkout per team |
Donderdag gaan we verder werken aan de opdracht en doen we code-review sessies.
🤟 Vandaag geeft Ischa Gast een presentatie.
| Donderdag 25/3 | Wat |
|---|---|
| 9:30 | Gastcollege Ischa Gast 🤟 |
| 10:30 | Sessies: Code-reviews ✨ |
| 16:00 | Checkout per team |
Lezen voor les 6 📖
Vrijdag bespreken we in clubjes de vorderingen voor de eindopdracht. Zorg dat je een code-review hebt gekregen van twee mede-studenten.
| Vrijdag 26/3 | Wat |
|---|---|
| 11:30 | Vorderingen bespreken in clubje B ✨ |
| 13:00 | Vorderingen bespreken in clubje C ✨ |
| 14:30 | Vorderingen bespreken in clubje A ✨ |
| 16:00 | Work Hard Play Hard |
In week 4 wordt de eindopdracht beoordeeld. Dan gaan we je werk bekijken, bespreken en beoordelen.
| Dinsdag 30/3 | Wat |
|---|---|
| 9:30 - 15:30 | Beoordelingsgesprekken ✨ |
| Woensdag 31/3 | Wat |
|---|---|
| 9:30 - 15:30 | Beoordelingsgesprekken ✨ |
| Donderdag 1/4 | Wat |
|---|---|
| 14:00 | Weekly Nerd 2️⃣ |