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.
Ik heb voor dit building block de website die ik in CLE 2 heb gemaakt gebruikt. De repository met alle code van deze site staat in de link.
https://bitbucket.org/athomaster/reserveringssysteem-code/src/master/
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.
Ik heb de website w3schools.com gebruikt om hulp te zoeken bij het maken van HTML en CSS code.
Voor de header heb ik de semantische tag HEADER gebruikt.
Voor de menu balk heb ik de semantische tag NAV gebruikt
Voor stukken code in de body zoals de container en een blok met info heb ik de semantische tag SECTION gebruikt.
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.
In html kan je classes en id’s aangeven op objecten binnen je pagina. In CSS kan je per class en id aangeven hoe het eruit moet zien. Zo kan je eigenlijk twee dezelfde objecten, bijvoorbeeld twee buttons waarvan er één een id heeft, toch een verschillend ontwerp geven. Het verschil tussen id’s en classes is dat je een id maar één keer kan gebruiken binnen een pagina en een class zo vaak als je wilt. In CSS geef je een id aan met een ‘#’ en een class met een ‘.’.
Op mijn website heb ik ook blokken met daarin account gegevens van de accounts die in de database staan. Deze gegevens in deze blokken heb ik ingedeeld met cssgrid.
Zo een cssgrid zou je kunnen zien als een soort tabel binnen een html object.
Deze regel geeft de breedte van de kolommen aan. De procenten geven aan hoeveel procent van de totale breedte van het html object per kolom gebruikt mag worden. Je geeft op deze manier ook aan hoeveel kolommen je grid heeft.
geeft aan wat de breedte is van de rijen aan. De procenten geven aan hoeveel precten van de totale hoogte van het html object per rij gebruikt mag worden. Ook geef je hiermee aan hoeveel rijen er zijn.
De relatieve eenheid die ik heb gebrukt is %. Dit geeft afhaneklijk van de richting en plek van het html object dat je in css hebt aangegeven aan wat de afstand moet zijn vanaf een ander object of een rand. De afstand die dan wordt genomen is dus het ingevulde percentage van de totale pixel lengte/breedte van de browser.
Ook heb ik media queries gebruikt om te zorgen dat de menubalk goed bruikbaar is als de browser kleiner wordt gemaakt en om te zorgen dat ik op mobile de pagina apart kan ontwerpen.
CSS Ontwerp
Je bent in staat om een bestaand visueel ontwerp/wireframes, zowel desktop als mobile, 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.
Voordat ik aan de website was begonnen vorige periode had ik een aantal wireframes gemaakt voor verschillende pagina’s.
Ik vind zelf dat het heel goed is gelukt om mijn ontwerp van de wireframe over te zetten naar css, ook vind ik dat ik het uiteindelijke ontwerp nog iets mooier heb gemaakt dan ik in de wireframe had gemaakt. Ik heb de kleuren een beetje aangepast in het eindontwerp zodat het wat beter bij de rest van de site past.
Dit is een blok met de accountgegevens van je eigen account met daaronder twee knoppen om je gegevens en je account te verwijderen. Ik vind hier weer dat het erg goed is gelukt om de wireframe over te zetten naar css. Wederom heb ik de kleuren in het eindontwerp een beetje aangepast om het wat beter bij de rest van de site te laten passen. Ook heb ik de knop wachtwoord wijzigen toegevoegd omdat het wijzigen van het wachtwoord samen met het wijzigen van andere gegevens problemen gaf.
Dit is mijn eindontwerp voor de gebruikers page op mobile. Ik heb het dropdown menu hier standaard toegevoegd omdat er niet genoeg plek is voor een volledige menubalk. Ook is het gebruikers blok nu hoger dan dat die breed is. voor de rest is de pagina nog bijna hetzelfde.
Javascript
Je begrijpt hoe je met modern ES6 javascript bij de website passende functionaliteit en interactie toe kunt voegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.
Op mijn website heb ik een account systeem. Admins kunnen accounts verwijderen uit de database. Voorheen was dit gelijk gebeurd zonder enige waarschuwing. Met javascript heb ik nu toegevoegd dat wanneer er op verwijder wordt gedrukt dat er dan een alert-box in het scherm verschijnt die vraag of het account daadwerkelijk verwijderd moet worden.
Dit heb ik gedaan met een script waar eerst wordt gewacht totdat de hele pagina is geladen. Dan wordt er in een functie een eventlistener gezet die reageert wanneer een form wordt gesubmit. Als dit gebeurt wordt een fucntie uitgevoerd die de alert-box laat verschijnen.
Op mijn website heb ik op de index pagina ook nog iets toegevoegd met javascript en html om te laten zien dat ik door middel van javasctipt te gebruiken ook html kan aanpassen. Ik heb met html een div toegevoegd die ik met CSS als een groot rood blok heb gemaakt. Ik heb dan in Javascript een eventlistener aangemaakt die een functie uitvoert wanneer er op die div wordt geklikt.
Elke keer als er op de rode div wordt geklikt wordt er in een andere div die onder het rode vlak staat de zin “Er is (het aantal keer dat er op het vlak is geklikt) op het rode vlak geklikt”. Met javascript maak ik in een functie elke keer een <p> element aan en voeg daar tekst aan toe waar ook een variabele tussen staat. Dan doe ik door appendchild te doen op de div waar de tekst in moet komen te staan die tekst toe voegen.