/browser-technologies-2021

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.

Primary LanguageJavaScriptMIT LicenseMIT

SportScores (Browser Technologies @cmda-minor-web 20-21)

Vak omschrijving

Browser technologies gaat over het maken van applicaties die toegankelijk zijn voor (zover mogelijk) iedereen op het web.

Eindopdracht

Live versie: https://sportscore-bt.herokuapp.com/

Admin(login met username: admin. Password: admin): https://sportscore-bt.herokuapp.com/admin

Use case

Ik heb gekozen voor de Sportwedstrijd score website.

Core functionaliteit

Admins moeten wedstrijden kunnen aanmaken met scores of tijden. En gebruikers moeten deze kunnen zien en reacties op geven.

Browsers testen

  • Chrome (& op mobiel)
  • Firefox (& op mobiel)
  • Safara iOS op mobiel
  • Microsoft Edge
  • Android webview

Features

  • Admin interface waar je een wedstrijd kunt aanmaken
  • Per wedstrijd moet de admin scores of tijden kunnen invullen
  • Gebruikers moeten deze wedstrijden te zien krijgen (overzichtsscherm)
  • Gebruikers moeten wedstrijden kunnen toevoegen aan een wishlist
  • Gebruikers kunnen hier een reactie op geven, die voor andere gebruikers (en de admin) te lezen is. De admin moet reacties kunnen weghalen.
  • Gebruikers die een wedstrijd volgen, krijgen een notificatie als er nieuwe informatie binnenkomt. (Hoe doe je dit als de gebruiker meerdere wedstrijden volgt?)

UX WIREFLOW

Schetsen

sketches

Lo-fi uitwerking

Prototype
User side wireflow
User side wireflow
Admin side wireflow
Admin side wireflow

Hierarchy of User Needs

Functional:

  • core functie: wedstrijden toevoegen voor admin en zien als bezoekers

Reliable:

  • met login systeem. Zodat alleen bevoegde mensen wedstrijden kunnen toevoegen.

Usable:

  • content op logische manier neergezet. UX beter uitgewerkt.

Pleasurable:

  • leuke extra'tjes zoals animaties en besturing

Progressive enhancements

Mobiel vriendelijk design

Ik heb de website enhanced op de usable laag door middel van het ontwerp aan te passen. Ik heb bijvoorbeeld de belangrijkste acties onderaan het scherm gezet, zo houd ik rekening met de thumb zone.
thumb zone

Opslaan/volgen wedstrijden

Als gebruiker kan je de de wedstrijden opslaan aan je "my matches" lijst. Deze wedstrijden worden opgeslagen in je localStorage, dus JavaScript & cookies moeten aanstaan.

Converteren van tijd

Elke wedstrijd en elke reactie heeft een tijd gekoppeld. Deze tijds formats zijn niet altijd even duidelijk. Als enhancement format ik deze tijden naar leesbare tekst.

Form validatie

HTML

Ik heb de standaard HTML form validatie toegepast door required te gebruiken.

CSS

Met CSS heb ik de :valid & :invalid selectoren gebruikt om zo aan te geven wanneer een field niet valide is.

JS

Met JavaScript check ik met de change event listener of een field valide is. Ook check ik dit wanneer een gebruiker op de submit-button klikt.

Feature detection

JS

Ik check met JavaScript of localStorage aanwezig is of niet met:

if (window.localStorage) {
	console.log("Yes, exists!")
	localStorage.setItem("key" , "value")
}

Testen

Chrome desktop - Windows 10

Werkt naar toebehoren!
test

Chrome mobiel - Android

Werkt naar toebehoren!
test

Firefox desktop - Windows 10

Werkt naar toebehoren!
test

Firefox mobiel - Android

Werkt naar toebehoren!
test

Safari mobiel - Iphone

Werkt naar toebehoren!
Heb dit getest op de Iphone van een vriend. Helaas vergeten screenshots te maken...

Microsoft Edge - Windows 10

Werkt naar toebehoren!
test

Android webview - Android

Werkt naar toebehoren!
test

Extra notities voor mijzelf

College Everything for the web

Je website moet altijd werken. Wat er ook fout kan gaan, het moet blijven werken.

Op het web weet je niet goed welke devices/systemen jouw website draaien, waardoor het goed is om progressive enhancement toe tevoegen en een robuuste kern hebt.

  • Niet iedereen heeft een muis, smarthphones bijvoorbeeld niet. Let daar op bij css hovers :hover bijvoorbeeld.
  • Netwerkverbindingen zijn niet altijd goed. Langzame netwerk data, of ergens waar slechter bereik is.
  • Smarthphones lopen altijd wat achter dan computers qua technologische specificaties, hardware maar ook software.
  • Niet alle schermen zijn gekalibreerd. Kleuren zijn bijvoorbeeld al anders.
  • Schermen zijn natuurlijk niet even groot, daar moet je ook naar kijken. (Responsiveness)
  • Progressive enhancement, je wilt je site optimaliseren voor zoveel mogelijk verschillende browsers/devices en rekening houden met zaken die ze niet ondersteunen. Hierbij ook nadenken over welke functies het meest belangrijk zijn, die moeten altijd te zien zijn/werken.

Browser technologies/Enhancements

License

MIT