Voor de eindopdracht ontwerp en maak je een interactieve toepassing volgens het principe van Progressive Enhancement. De bedoeling is dat gebruikers op elke browser een zo goed mogelijk werkend product te zien krijgen.
'Ik wil een enquête kunnen invullen over de minor Web Development, met verschillende antwoordmogelijkheden. Ik wil duidelijk zien waar ik ben en hoeveel ik nog te doen heb. Ik wil eerder ingevulde vragen kunnen herzien. Als ik de enquête niet afkrijg, wil ik later weer verder gaan met waar ik ben gebleven.'
Hieronder zal ik mijn hele proces vastleggen, waar ben ik begonnen, wat heb ik fout en of goed gedaan en waar ben ik allemaal tegenaan gelopen.
In week 1 ben ik meteen begonnen met het maken van mijn HTML pagina, ik had het idee dat als ik vanuit HTML begon, ik eigenlijk vanzelf de website zou 'enhancen', omdat ik hem dan stap voor stap beter ga maken.
Al snel had ik een klein prototype staan, waarmee ik toch wel al begonnen was met CSS en Javascript zonder hier eigenlijk goed bij na te denken.
Aan het einde van week 2 heb ik besloten om helemaal opnieuw te beginnen met de kennis die ik nu had over het opslaan in de local storage en het later afmaken van vragen. Nu ben ik eerste begonnen met het maken van een goede en duidelijke HTML structuur. Ik gebruik meerdere HTML pagina's zodat een gebruiker ook zonder CSS nog niet te veel vragen op 1 scherm ziet.
Toen de eerste HTML er stond, heb ik gewerkt aan een klein design zodat ik een beetje wist in welke richting ik wou gaan met de styling.
Ik pas het principe 1 action per screen toe, waardoor je de aandacht van de gebruiker houd. Elk scherm heeft 1 hoofddoel, zijn mening geven over 1 vak. Vervolgens heb ik dit uitgewerkt in CSS. Toen de CSS stond ben ik gaan werken aan het opslaan in de local storage, waardoor je antwoorden kan opslaan en later de enquête af kan maken wanneer je de browser afsluit.
window.addEventListener('beforeunload', function() {
var pageId = 'page1';
var sections = ['lesstof1', 'geleerd1'];
sections.forEach(function(section) {
var selectedValue = document.querySelector('input[name="' + section + '"]:checked').value;
localStorage.setItem(pageId + '_' + section, selectedValue);
});
});Hier gebruik ik een addEventListener met 'beforeunload', hiermee voer ik de functie uit op het moment dat ik de browser afsluit of naar een andere pagina navigeer. Vervolgens zet ik voor elke section de data uit een checkbox in een variabele, en zet ik deze samen met de juiste pageina in de local storage, waardoor hij later weer op te halen is.
Uiteindelijk werkt de website zoals hij zou moeten, na het toevoegen van media queries. Nu is het tijd om te testen op andere devices en browsers.
Ik ben begonnen met het testen op de standaardbrowsers, Google Chrome, Firefox en Safari. Met Google Chrome ging alles zonder problemen. Alleen met Safari Technology Preview liep ik tegen de eerste issue aan.
Ik maakte gebruik van een HTML progress bar, deze was niet te stylen in Safari. Dit was een probleem voor mijn Dark Mode functie. en dus heb ik deze HTML bar helemaal achterwege gelaten en heb ik zelf een progressbar gemaakt in CSS.
<!-- <progress value="100" max="100"> </progress> -->
<div class="progressbar">
<div class="progress progress1"></div>
</div>Firefox support de 'has' selector nog niet, waardoor je niet kan zien welke keuze je selecteert met de custom radio buttons, hiervoor maak ik namelijk gebruik van de 'has' selector.
Om dit te fixen heb ik de has selector achterwege gelaten, en uiteindelijk is mijn styling hetzelfde gebleven, in plaats van de has selector style ik nu mijn input:checked op deze manier:
input:checked {
background-color: #0048ff79;
}Omdat wij ook moesten testen op een 'obscure' browser, heb ik besloten om Flow browser te downloaden. Na een tijd uitzoeken hoe ik überhaupt op een website moest komen, is het dan uiteindelijk toch gelukt op mijn website te openen.
Al met al valt het wel mee, nu alleen op zoek naar een manier om een fallback te krijgen voor de custom radio buttons.
De site word progressive enhancent door het gebruik van CSS en Javascript. In eerste instantie heb je een simpel formulier, van een simpel formulier ga je naar een formulier met styling en een progressiebar, en uiteindelijk heb je een formulier met alles erbij die je progressie kan opslaan.
Om de site zo optimaal mogelijk te laten werken, moet je ook rekening houden met mensen die om wat voor reden dan ook geen client side Javascript kunnen gebruiken. Hiervoor is het gebruiken van een goede backend noodzakelijk.
De backend zal ervoor moeten zorgen dat de gegevens opgeslagen worden in een database, en deze vanuit deze database weer worden geladen, als hierom gevraagd word.
De gebruiker wilt:
- Data invullen
- Data moet vaak verstuurd en geupdate worden, denk bijvoorbeeld aan elke keer dat de gebruiker naar de volgende pagina gaat.
- Aan het einde is alle data opgeslagen, en bij de submit is de final versie verstuurd (mogelijk met studentinformatie).
Om de site vanuit het gebruikerspunt zo goed mogelijk te laten werken, heb ik een paar kleine aanpassingen aan de hoofdopdracht toegevoegd, dit kan altijd nog veranderd worden als dit niet bevalt.
- Gebruikers hoeven niet in het begin hun studentnummer en naam op te geven, ik ben van mening dat dit het resultaat van de enquête zal beïnvloeden, omdat mensen over het algemeen anoniem eerlijker zijn. Om deze reden is het aan het einde optioneel geworden, zo kunnen studenten er zelf voor kiezen of ze hun naam delen of niet.
- De naam van het vak, docenten en periode van het vak staan al vast, worden al opgehaald vanuit een database (bijvoorbeeld). Studenten weten vaak de periode niet meer, en deze data is geen mening, dus zal het fouten besparen om dit gewoon mee te geven, ook houd dit de focus bij de mening geven over de vakken.
Ik had nog graag een aantal extra verbeteringen willen doorvoeren, die ik helaas door de tijdsdruk niet heb kunnen doen. Alles wat moet zit in de website maar ik had de volgende dingen nog toe willen voegen:
- Zelf de backend features die nodig waren maken.
- Daadwerkelijk laden uit een database.
- Ook op Flow varianten vinden voor de radio buttons.
- Styling wat mooier, vloeiender.
- Animaties(enhancement)