/browser-technologies-2223

The course Browser Technologies is about learning to build robust and accessible websites using Progressive Enhancement and testing. Browser Technologies is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.

MIT LicenseMIT

Browser Technologies @cmda-minor-web 2022 - 2023

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 2 opdrachten. We werken eerst even aan opdracht 1. Op dag twee beginnen we te werken aan de eindopdracht.

Wat is Progressive-enhancement en hoe werkt het?

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

Eindopdracht ✨ Progressively Enhanced Browser Technology

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, briefing eindopdracht, college Voortgangsgesprekken
Week 2 College + Briefing De eindopdracht College + werken aan de opdracht Feedbackgesprekken
Week 3 Beoordelingen!

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 22 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 22/3 Wat
9:30 College les 1 over het vak, wie, wat, waar en waarom
Briefing Opdracht 1 🛹 NPM install Progressive-Enhancement
16:00 Weekly Nerd
Lezen voor les 1 📖

Donderdag 23 maart

Donderdag gaan we opdracht 1 bekijken en bespreken. Als het goed is heb je een beeld gevormd van Progressive Enhancement. Tijdens de les duiken we hier met zijn allen dieper op in, gebaseerd op de resultaten van jullie onderzoek.

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.

Daarna 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?

Donderdag 23/3 Wat
9:30 Opdracht 1 bespreken 🛹
10:30 Briefing eindopdracht
15:30 College les 2 over de UX van HTML
16:00 Checkout per team

Lezen voor les 2 📖

Vrijdag 25 maart

Vrijdag is het eerste voortgangsgesprek. Je bespreekt met de docent je keuze voor de eindopdracht. Er is alle tijd voor vragen, natuurlijk.

Vrijdag 25/3 Wat
9:30 Voortgangsgesprekken
16:00 Work Hard Play Hard

Week 2

In week 2 ga je verder 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 29 maart

Woensdag krijg je 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 29/3 Wat
9:30 College van PPK over browsers!
16:00 Checkout per team

Donderdag 30 maart

Donderdag eindigt de les laat! Onze gastspreker kan pas om 18:00. Je kan de hele dag verder werken aan je eindopdracht.

Donderdag 30/3 Wat
9:30 Aan de slag
11:30 Uitleg beoordelingen
18:00 Gastcollege Aaron Gustafson

Lezen voor les 4 📖

Vrijdag 31 maart

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