Front-end Block

Voor dit block bouw je een website met HTML, CSS en een snufje Javascript.

Je bouwt het raamwerk van je app volgens HTML standaarden. Met CSS ontwerp je een bruikbare interface die werkt op verschillende schermen en apparaten. Je gebruikt javascript om interactie aan je website toe te voegen. Je kan alle criteria aantonen en toelichten middels één web project waarbij alle onderdelen samen één geheel vormen. Jij hebt persoonlijk alle code geschreven. Kijk goed naar de bronnen die genoemd worden voor dit block! Voor dit block werk je niet met frameworks en libraries voor javascript en css. 

HTML
Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION. Je HTML bevat geen inline styles en javascript.

Door gebruik te maken van onder andere Pluralsight.com ben ik veel te weten gekomen over HTML5. De cursus genaamd “Practical HTML5” van Gill Cleeren heeft me hierbij geholpen. Waar ik veel gebruik van maak is de <nav> en <footer> tag omdat dat duidelijk aangeeft waar je je bevind in de code van de webpagina. Er wordt ook geen inline- styling en javascript toegepast binnen de HTML. Alle vormgeving wordt binnen de style.css file afgehandeld.

CSS syntax
Je kan werken met css selectors: tags, id’s en classes. Je gebruikt flexbox of css grid om structuur in je layout aan te brengen. Je website is responsive door te werken met relatieve eenheden en media queries. Je site werkt goed op verschillende maten schermen en apparaten, én in verschillende browsers.

Zoals op het screenshot hieronder te zien is maak ik gebruik van verschillende CSS selectors. De standaard selectors die direct op DOM elementen werken zoals body en html gebruik ik om een basis ontwerp neer te zetten. Alle hyperlinks op de pagina geef ik dezelfde kleur en géén underscore door middel van ‘a, a:visited’ toe te passen. Specifieke meldingen die tijdens het registreren op de site verschijnen hebben allemaal een uniek id, deze roep ik aan door gebruik te maken van ‘#errorsml’ en ‘#successml’.

De site is geheel responsive gemaakt door gebruik te maken van media queries. De website verandert van design op basis van de breedte van de browser. Er zijn twee breakpoints aanwezig die onder andere de eigenschappen van de flexbox en tabellen aanpassen. Ik heb gekozen voor een flexbox in de header van het menu omdat dit alles mooi evenredig laat schalen. Zodra de knoppen in de flexbox te dicht op elkaar komen laat ik het verspringen naar een lay-out waarbij het onder elkaar komt te staan. Er is waar mogelijk gewerkt met percentages in plaats van fixed values omdat dit ten goede komt aan het responsive ontwerp. Het lastigste was het het schaalbaar maken van tabellen voor een smartphone omdat heel veel data op een klein en smal scherm moet komen. Dit probleem heb ik opgelost door de tabel zich vanaf 750 pixels anders te sorteren, data komt nu niet meer naast elkaar maar onder elkaar te staan. Het menu maakt gebruik van hetzelfde principe. Ik heb ervoor gekozen om het op deze manier te doen omdat je bij bijvoorbeeld een hamburgermenu een extra handeling nodig hebt om het menu te openen. Dit is bij deze site niet nodig en voor de eindgebruiker werkt dit ook sneller.

De website werkt op zo goed als alle moderne browers. De technieken die ik gebruikt heb heb ik gecontroleerd op caniuse.com. Ook heb ik het getest op meerdere apparaten (Windows/Mac), browsers (Chrome, Opera, IE, Edge, Firefox en Safari) en smartphones (iOS, Android). Dit werkt allemaal zoals het hoort zonder problemen.

CSS Ontwerp
Je bent in staat om een bestaand visueel ontwerp om te zetten naar CSS code. Hiervoor kan je een ontwerp gebruiken uit de interactie ontwerp lessen, of een ontwerp uit CLE. Het ontwerp hoeft niet van jezelf te zijn.

Een visueel ontwerp was er al in de basis. De klant waarvoor ik het systeem ontwikkeld heb heeft al een website. Ze wilde graag dat het reserveringssysteem een nieuw en modern uiterlijk kreeg. In overleg heb ik een low fidelity wireframe/schets gemaakt van het reserveringssysteem. De klant ging hier mee akkoord en dit is vertaald naar een interactieve website op basis van het eerder gemaakte ontwerp. Dit is een stramien wat als basis geldt voor de gehele website. Alle elementen in de site maken gebruik van dezelfde opmaak zodat er één lijn in het design zit. Er is een ontwerp voor de desktop, tablet in landscape mode en een mobiel design.

Javascript
Je begrijpt hoe je met modern ES6 javascript functionaliteit en interactie kan toevoegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.

Omdat mijn bewijsmateriaal voor dit block grotendeels uit CLE2 komt en we hier nog niet actief hebben gewerkt met ES6 javascript heb ik het bewijsmateriaal uit CLE4 gehaald. Deze periode staat in het teken van een arcade game welke in de browser moet werken. De Covid Game maakt géén gebruik van frameworks en libraries, alles is in plain code geschreven.

Door gebruik te maken van Javascript heb ik functionaliteiten gebouwd voor de webgame. Waar ik onder andere aan gewerkt heb is het mogelijk maken voor de speler om de character in game te besturen door middel van het toetsenbord. Door gebruik te maken van een keylistener die werkt met een event die op keyboard inputs checkt stuur ik een boolean (true/false) mee. Als bepaalde key ingedruk wordt heeft deze de value ’true’, dit zet weer een nieuwe actie in gang zoals het lopen naar links of rechts.

Hieronder is de code te zien welke dit mogelijk maakt. De functies worden aangeroepen in weer een globale loopfunctie welke 60 keer per seconde elementen update zodat ze vloeiend over het scherm animeren. Hier is de gameloop voor verantwoordelijk.

De demo van het spel is speelbaar op brambenik.nl/cle4/.