Skip to content

Latest commit

 

History

History
97 lines (62 loc) · 5.78 KB

eindopdracht.md

File metadata and controls

97 lines (62 loc) · 5.78 KB
Raw

Browser Technologies - De eindopdracht ✨ Progressively Enhanced Browser Technology

Voor deze opdracht ga je een interactieve toepassing ontwerpen. Zorg dat alle gebruikers, met alle browsers, in iedere context minimaal de core functionaliteit te zien, horen en/of voelen krijgen.

Doel van deze opdracht

Het doel van deze opdracht is te leren hoe je een online interactieve toepassing kan maken met behulp van Progressive Enhancement en Feature Detection zodat die het altijd doet ...

Rubric

Uitleg

Maak een demo op basis van een user story. Zorg dat alle gebruikers, met alle browsers, in iedere context minimaal de core functionaliteit te zien/horen/voelen krijgen en maximaal een hele goede user experience.

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. Je onderzoekt drie dingen:

  • hoe je verschillende features door verschillende browsers worden ondersteund,
  • hoe je voor goede fallback kan zorgen
  • je test de features op verschillende (obscure) browsers.

Polyfills en NPM packages op de client zijn niet toegestaan, op de server kun je doen wat je wil. Wat voor deze opdracht telt, is de HTML/CSS/JavaScript die aan de browser wordt aangeleverd.

Gebruik caniuse.com, html5test.com, css3test.com en kangax.github.io/compat-table/es6/

User Story

  1. Enquete over de minor Web Development
  2. Nerdy T-Shirt
  3. Online poll met resultaten
  4. Online Foto album
  5. Openbare boekenkasten in Amsterdam
  6. Heb je zelf een idee? Dat kan, schrijf een use case en kom even overleggen.

Werkwijze

Schets eerst. Bijvoorbeeld een wireflow en/of breakdown-schets met hoe de demo moet gaan werken en hoe het eruit komt te zien. Bepaal de functional/reliable, usable en pleasurable laag. (Niet langer dan een uurtje, zo snel mogelijk de code in duiken!)

  • Doe voor de functional/reliable laag onderzoek naar semantische HTML elementen
  • Kijk voor de usable laag naar gebruiksvriendelijkheid en design patterns die je zou kunnen toepassen
  • De meest 'enhanced' versie is super vet, gaaf en prettig om te gebruiken … Dit is de pleasurable laag.

Browsers

Bronnen

Hier staat een lijst Browser Technolgies die je kan toepassen. Bekijk welke nieuwe, innovatieve, interessante techniek je kan gebruiken voor je ontwerp. Of kijk de WEB API lijst op MDN, daar zitten echt coole API's tussen die misschien leuk zijn voor je pleasurable layer. Bluetooth api, gamepad API(voor controllers!)

Lees The Role of Enhancement in Web Design, een goed artikel over waarom een feature een enhancement is.

Lees A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences voor een uitleg over Functional/Reliable, Usable, Pleasurable lagen en de piramide van Aarron Walter met hierarchy of user needs.

Bekijk de Principles of User Interface Design als je wat tips nodig hebt voor het ontwerpen van een gebruiksvriendelijke interface. Probeer in ieder geval deze principes toe te passen in je ontwerp: 04 Keep users in control, 09 Appearance follows behavior, 10 Consistency matters, 11 Strong visual hierarchies work best.

Lees Wireflows: A UX Deliverable for Workflows and Apps als je nog eens wil lezen over wirfelows.

De features waarop je moet testen komen uit opdracht 2 - Breek het Web, Afbeeldingen, Custom fonts, Kleur, Muis/Trackpad, Breedband internet, Javascript, Cookies, LocalStorage.

Criteria

  • Student kan de Core functionaliteit van een use case doorgronden
  • Student kan uitleggen wat Progressive Enhancement en Feature Detection is en hoe dit toe te passen in Web Development
  • De demo is opgebouwd in 3 lagen, volgens het principe van Progressive Enhancement
  • De user experience van de demo is goed
    • Let op leesbaarheidsregels, contrast en kleuren
    • Let op gebruiksvriendelijkheid, zoals affordance en feedback op interactieve elementen
    • De meest 'enhanced' versie is super vet, gaaf en h-e-l-e-maal te leuk om te gebruiken

Er is een Readme toegevoegd met daarin:

  • Een link naar de demo.
  • Een beschrijving van de feature(s)/Browser Technologies die in je demo zijn gebruikt en hoe je dit PE hebt toegepast
  • Een lijst met browsers waarin je hebt getest:
    • voor de desktop: 1 Chromium, Firefox en Safari
    • voor mobiel: Safari iOS + Android: Samsung Internet of Chrome
    • 1 obscure browser naar keuze: Lynx, Flow (Flow voor Mac en Flow voor Linux), PrinceXML of KaiOS
  • een testverslag met
    • een beschrijving van de feature-lijst die zijn onderzocht
    • welke browsers de feature(s) wel/niet ondersteunen
    • welke functionaliteiten zoals JavaScript je aan en uit hebt gezet in de tests
    • een screenreader test op de default screenreader van je laptop en/of telefoon.