• DEMO
• Learning Goals
• npm i progressive-enhancement
• Break the web
• Final Assignment
  • install
  • case

Demo of browser-technologies-survey

• 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. _{Copied from the repository.}

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

• Opdracht 1 - NPM install Progressive Enhancement

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?

• Opdracht 2 - Breek het Web

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.

• De eindopdracht - Progressive Enhanced Browser Technologie _{Copied from the repository.}

To make sure the application is valid, it has to be tested on atleast two type of devices, a phone and a desktop. This cannot just be one eco-system thus it will be tested on an android device, apple device and a desktop, and a browser.

cd YOURMAP
git clone https://github.com/dewarian/browser-technologies-2021.git
cd browser-technologies-2021
npm install

enquete

Ik wil een enquête kunnen invullen over de minor Web Development, met verschillende antwoordmogelijkheden. Als ik de enquête niet afkrijg, wil ik later weer verder gaan met waar ik ben gebleven. _{Copied from the repository.}

• student information (name and id) required.
• Per subject
  • Name of subject
  • Teacher(s)
  • Subject taught in which weeks
  • Grading on a scale of 1 - 10
  • Difficulty material (how difficult)
  • Explanation (How clear was the explanation was)
  • Own insight (how much did you understand?)
• Validation: Everything in the form has to be filled in. Give clear error messages.
• If the survey isn't finished I would like to continue where I left off.

The hierarchy of user needs, if a beautiful application that is not functional, it will not satisfy the users' basic needs. Because it lacks a function its aesthetic qualities will remain unappreciated.

The functional layer for the survey will be a simple black and white form with different kind of inputs. The student filling the survey will have a neutral experience, but they feel like it lacks and not 'usable'.

The problem with this I hinted is that the experience is less than pleasurable. It isn't visually pleasing, the form does not help the user to fill in the form but it just works.

A way to solve this is to keep the task as concise as possible until there is a moment or possibility to enhance this functional layer.

To summarize:

• HTML is served.
• Forms will be handled by the server.
• Every subject will have it's own page.
• HTML form handling.

The usable layer is a step away from being pleasureable. The usual styling and small JavaScript enhancements will be applied to the application, where the user can delight themselves with visually appleasing forms, interactivity that helps the user with filling in the form. A small enhancement would be giving feedback about how they rate a subject.

To summarize:

• Survey is stylized to enhance readability and visibility.
• Survey will help the user with answering the questions.
• Survey give feedback to the user based on their own input.
• HTML form handling with style enhancement for visibility.

The pleasurable layer is when everything in the world is in your favour, internet is speedy, device is speedy, the browser supports everything, you can give the user the most pleasurable experience with the survey. There are little to no load times or refreshes, the form is paginated without the user experiencing it. Everytime a user fills in the question it get stored so that person can continue at all times by simply visiting.

The pleasurable layer also validates the input that normally cannot be validated without JavaScript.

• Bleeding edge HTML, CSS and JS is being used.
• There is an easy transition between subjects.
• The user gets direct feedback when a question has been entered (in)correctly.
• Progression through the survey is shown with clear elements, animations and correct usage of interactivity.
• Local Storage allows the user to not login once again to continue where they left off.

Een link naar de demo

Er is een Readme toegevoegd met daarin beschreven:

• Een (wireflow) schets van de functionaliteit met een beschrijving van de core functionality. Geef ook aan wat de functional/reliable, usable en pleasurable laag.
• een beschrijving van de feature(s)/Browser Technologies
• een lijst met de vier browsers waarin je gaat testen, plus welke functionaliteiten zoals JavaScript je aan en uit zet tijdens de tests. (Op desktop 1 Chromium 1 niet-Chromium, op mobiel 1 iOS + 1 Android OF een Samsung- en een niet-Samsung Android.)
• welke browsers de feature(s) wel/niet ondersteunen
• een beschrijving van de accessibility issues die zijn onderzocht + screenreader test
• beschrijving PE en oplossingen toevoegen
• De demo is opgebouwd in 3 lagen, volgens het principe van Progressive Enhancement
• De user experience van de demo is goed
  • de leesbaarheidsregels zijn toegepast, contrast en kleuren kloppen
  • het heeft een gebruiksvriendelijke interface, met gebruikmaking van affordance en feedback op de interactieve elementen
  • de meest 'enhanced' versie is super vet, gaaf en h-e-l-e-maal te leuk om te gebruiken
• Student kan de Basic functionaliteit van een use case doorgronden
• Student kan uitleggen wat Progressive Enhancement en Feature Detectie is en hoe dit toe te passen in Web Development en de eigen opdracht