Browser technologies gaat over het maken van applicaties die toegankelijk zijn voor (zover mogelijk) iedereen op het web.
Live versie: https://sportscore-bt.herokuapp.com/
Admin(login met username: admin. Password: admin): https://sportscore-bt.herokuapp.com/admin
Ik heb gekozen voor de Sportwedstrijd score website.
Admins moeten wedstrijden kunnen aanmaken met scores of tijden. En gebruikers moeten deze kunnen zien en reacties op geven.
- Chrome (& op mobiel)
- Firefox (& op mobiel)
- Safara iOS op mobiel
- Microsoft Edge
- Android webview
- 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?)
Prototype
User side wireflow
Admin side wireflow
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
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.
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.
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.
Ik heb de standaard HTML form validatie toegepast door required
te gebruiken.
Met CSS heb ik de :valid
& :invalid
selectoren gebruikt om zo aan te geven wanneer een field niet valide is.
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.
Ik check met JavaScript of localStorage aanwezig is of niet met:
if (window.localStorage) {
console.log("Yes, exists!")
localStorage.setItem("key" , "value")
}
Werkt naar toebehoren!
Heb dit getest op de Iphone van een vriend. Helaas vergeten screenshots te maken...
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.
- Fetch browser API
- Drag and Drop API voor profile images?
- Censuur? Spam reacties onderscheppen
- Realtime reacties ontvangen. Websockets of Server side events
- Realtime wedstrijd data
- Notification API. Service workers for notifications
- IndexedDB for maybe backup user data?
- Cache voor snelle website speed en niet hoeven te fectchen elke keer, of gaat dit sws via de server?
- Gamepad API for pleasurable layer
- LocalStorage en/of sessions voor dingen zoals wishlist?