Skip to content

Latest commit

 

History

History
215 lines (135 loc) · 11.4 KB

README.md

File metadata and controls

215 lines (135 loc) · 11.4 KB

Browser Technologies @cmda-minor-web 20-21

//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.

Opdrachten

het vak bestaat uit 3 opdrachten. In week 1 werken we aan opdracht 1 en 2. Vanaf week 2 werken we aan de eindopdracht.

Opdracht 1 🛹 NPM install Progressive- enhancement

Voor de eerste opdracht gaan we onderzoeken wat Progressive Enhancement is.

Opdracht 2 💔 Breek het Web

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?

De eindopdracht ✨ Progressive Enhanced Browser Technologie

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.

Leerdoelen

  • 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.

Rubric

Planning & programma

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

Week 1

Het web is voor iedereen: Deze week gaan we onderzoeken wat Progressive Enhancement is en kennismaken met testen en het device lab.

Woensdag 10 maart

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 waarom
Briefing Opdracht 1 🛹 NPM install Progressive-Enhancement
16:00 Checkout per team
Lezen voor les 1 📖

Donderdag 11 maart

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 12 maart

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 team C 💔
13:00 Opdracht 2 bespreken in team A 💔
14:30 Opdracht 2 bespreken in team B 💔
16:00 Work Hard Play Hard

Week 2

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 17 maart

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 Feature Detection en de eindopdracht
Briefing eindopdracht ✨ Progressive Enhanced Browser Technologie
9:45 College over browsers en support detection
10:30 Sessies: User Deligt & Core functionaliteit ✨
16:00 Checkout per team

Donderdag 18 maart

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 Magazine. 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 Viewports
10:30 Sessies: Bouwen in 3 lagen ✨
14:00 Q&A Heydon Pickering 🤟
16:00 Checkout per team

Lezen voor les 4 📖

Vrijdag 19 maart

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 team B ✨
13:00 Vorderingen bespreken in team C ✨
14:30 Vorderingen bespreken in team A ✨
16:00 Work Hard Play Hard

Week 3

Deze week werken we verder werken aan de eindopdracht en houden we gesprekken om jullie vorderingen te bespreken en vragen te beantwoorden.

Woensdag 24 maart

Woensdag 24/3 Wat
9:30 College les 5 over form-validatie
10:30 Sessies: Feature detectie en testen ✨
16:00 Checkout per team

Donderdag 25 maart

Donderdag gaan we verder werken aan de opdracht en doen we code-review sessies.

🤟 Vandaag geeft Ischa Gast een presentatie. Ischa werk als frontend developer voor Schiphol.nl, op die website komen 3.000.000 bezoekers per maand. Toegankelijkheid is een belangrijk onderwerp met zoveel bezoekers, en daar weet Ischa heel veel van. "Laten wij het web toegankelijker maken en niet alleen mensen met een beperking zullen hier voordeel uit halen maar IEDEREEN!"

Donderdag 25/3 Wat
9:30 Sessies: Code-reviews ✨
10:30 Gastcollege Ischa Gast 🤟
16:00 Checkout per team

Lezen voor les 6 📖

Vrijdag 26 maart

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 team A ✨
13:00 Vorderingen bespreken in team B ✨
14:30 Vorderingen bespreken in team C ✨
16:00 Work Hard Play Hard

Week 4

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️⃣