Inleiding:
Ik heb voor dit building block het project van CLE 3 gebruikt. Ik moest voor ons interactief object, de IPAP (interactief pratende afval paal) een webapp ontwikkelen. De bedoeling van deze webapp is om d.m.v. buttons je beloning te kunnen kiezen nadat je iets hebt weggegooid in de IPAP. Deze beloning kan het weerbericht, een spreuk of een feitje over de Laurenskerk zijn (ons toegewezen plein was de Grotekerkplein). Dit heb ik gedaan m.b.v. HTML, CSS en Javascript. Hieronder staat een filmpje van het uiteindelijke resultaat, zodat je een goed beeld krijgt wat de code in dit block allemaal doet. Ik leg verder in dit block uit wat de functies zijn in de webapp en hoe ik dit d.m.v de code heb gedaan.
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.
Om te beginnen ben ik begonnen met het volgen van de online cursus op Pluralsight: “HTML Fundamentals”. Ik had al enige kennis van HTML, ik heb vroeger op de middelbare school informatica gehad, hier kreeg ik de basis over HTML, CSS en PHP. Daarnaast heb ik in CLE 1 en CLE 2 bij programmeren ook veel over HTML geleerd, maar ik dacht dat een extra online cursus zeker geen kwaad kon. De cursusgever, Matt, legt hier echt de basics van HTML uit. Dingen zoals heads, bodys, paragraphs, headers, lists, het linken van documenten en het toevoegen van images, tables en zo door worden allemaal uitgelegd in deze online cursus. Deze cursus was niet lastig voor mij, aangezien ik al enige kennis had van HTML, maar het was wel een fijne opfrisser.
Ik heb de structuur voor HTML opgezet d.m.v. tags, zoals <nav>, <section> en <footer>.
<nav>: deze tag geeft aan dat er een navigatielink/balk volgt.
<section>: deze tag geeft de verschillende secties weer in HTML. In een section zit vaak ook een header.
<footer>: geeft de footer aan van het document, hierin staan meestal info over de developer en copyright rechten.
Voor de rest bevat mijn HTML code geen inline styles of Javascript code (dus ook geen onclick functie):
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.
Ik heb voor dit project id’s en classes gebruikt. Id’s specificeren een uniek element. Ik heb dit gebruikt om alle secties op zichzelf te laten staan. Ook heb ik id’s gebruikt om de knoppen (voor de beloningen) een uniek element te geven, zodat ik deze later makkelijk kon categoriseren in Javascript.
Daarnaast heb ik ook classes gebruikt, classes gebruik je om elementen in je html document in dezelfde groep te verdelen, zodat je deze in één keer kan bewerken in je css en dit niet voor elke element apart hoeft te doen. Voor mijn project heb ik voor de navigatiebaritems dezelfde class aangemaakt (a class=”nav-item”), omdat deze allemaal dezelfde styling moesten hebben.
De codes hieronder laten zien dat ik classes en id’s heb gebruikt:
Voor dit project heb ik ook een css flexbox gebruikt. Flexbox is een lay-out model en dankzij de flexibele lay-out kunnen responsieve elementen binnen een container automatisch worden gerangschikt, afhankelijk van de schermgrootte (desktop of mobiel bijvoorbeeld). Ik had nog helemaal geen kennis van flexbox, dus ik heb veel online moeten zoeken, en heb voornamelijk naar YouTube filmpjes gekeken om het te begrijpen.
Om te beginnen zet je in je css bestand display: flex; hiermee geef je aan dat je de flexbox gebruikt. Display: webkit-flex geeft aan dat het op meerdere browsers te gebruiken is. Dit zijn de flexbox elementen in de navigatiebalk:
(Ik had hier eerst een class “navbar” voor aangemaakt, maar dit was overbodig.)
Bij de buttons heb ik ook gebruik gemaakt van de flexbox elementen. Met justify-content: center; geef ik aan dat ik de inhoud in het midden wil hebben. Flex-direction: row; geeft aan dat de inhoud in een horizontale lijn wordt gezet. Als laatst geeft flex: 33% aan dat er in dit geval dus 3 buttons zijn, en de ruimte tussen de buttons precies hetzelfde moet zijn. Als het bijvoorbeeld 4 buttons zijn (zoals bij de social media knoppen), zou flex: 25% moeten zijn.
Ik heb later geleerd dat je je styling kan opstapelen en dat je niet je styling naar een nieuwe class hoeft te kopiëren als je een kleine aanpassing wil maken, ik heb dit echter anders aangepakt, namelijk de button class=”button” die er eerst stond, verwijderd en de tag “button” gewoon in de css gebruikt. Ik kwam er namelijk achter dat “button2” helemaal niet bestond in HTML (oeps) en dit hele stuk van de css onnodig was. De tag button en de class #myBTN (de “back to top” button waar het eigenlijk dus om ging) verschilden te erg van elkaar qua eigenschappen om de styling te kunnen stapelen. Voor het volgende project zal ik het opstapelen van styling echter zeker gaan onthouden.
Om aan te kunnen tonen dat ik het opstapelen van styling wel begrijp, heb ik een klein stukje code gemaakt als voorbeeld ervan, de 2e knop heeft als kleine aanpassing dat die rood is en de 3e knop dat die blauw is (maar de rest van de eigenschappen zullen dan identiek zijn aan elkaar):
Ik moest de website ook nog responsive maken. Dit houdt in dat de website optimaal te gebruiken is op meerdere apparaten (desktop en mobiel bijvoorbeeld). Hiervoor ben ik gaan werken met media queries. Hiermee kan je de css per schermgrootte aanpassen, zodat de website optimaal te gebruiken is op meerdere apparaten. Om te beginnen, moet je een meta viewport gebruiken in je html document. Dit geeft de browser informatie over de schalen die gebruikt gaan worden. De “width=device-width” functie geeft aan dat de breedte van de pagina wordt aangepast aan de breedte van het scherm waar je dat moment op zit. De “initial-scale=1” zet het zoomniveau naar 1 wanneer de pagina geladen wordt.
In de css heb ik verder gewerkt met de media queries. Ik geef in de code hieronder aan, dat bij schermen met pixels kleiner dan 992, de achtergrondkleur blauw wordt. Bij schermen met pixels kleiner dan 600, wordt de achtergrondkleur lichtgroen. Dus bij de mobiele versie van de webapp, is de achtergrond lichtgroen, omdat de pixels daar kleiner dan 600 zijn.
Ik wilde hieraan nog toevoegen dat de beloningsknoppen op de mobiele versie i.p.v. horizontaal, verticaal zouden komen te staan. Ook heb ik op de mobiele versie veranderd dat de “share” buttons in een vierkantje geformeerd zijn i.p.v. naast elkaar. Zo zie je een duidelijke verandering in de desktop en de mobiele versie.
Ik heb als laatst nog onderzoek gedaan naar vw, vh en em. Ik wist eerst helemaal niet wat deze css eenheden inhielden. Em is handig wanneer je bijvoorbeeld de font-size snel wil vergroten in een bepaalde hoeveelheid. Bijvoorbeeld als je font-size 12px is, kun je door er in je css “font-size: 2em;” te zetten ervoor zorgen dat de pixels 2x zo groot worden (dus 24px in dit geval). Dan geeft de vw eenheid aan dat wanneer de browser width wordt aangepast, de font-size van een bepaald stukje tekst ook aangepast wordt. Wanneer je bijvoorbeeld invult “font-size: 1vw;” wordt wanneer de browser width veranderd, de tekst relatief gezien 1% van de viewport width. Als laatst houdt vh hetzelfde in al vw (dit zijn trouwens viewport units), alleen dat i.p.v. de width, de height wordt aangepast.
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.
Ik ben begonnen met het maken van wireframes (low fidelity) voor onze webapp. Met Ontwerpen2 had ik hier al veel mee geoefend. Ik had eerst 2 wireframes gemaakt voor de desktopversie, ik had al een vrij goed beeld van wat ik wilde. Het enige wat ik in de 2e wireframe had toegevoegd was een navigatiebar, een footer en een gifje. De navigatiebar omdat dat altijd handig is om snel naar een bepaalde sectie te gaan. Een footer zodat je hier duidelijk kon zien wie de developers waren en hier eventueel contact mee kon opnemen. En als laatst het gifje, dit was om onze doelgroep beter te kunnen bereiken. Onze doelgroep voor CLE 3 waren jongeren/studenten. Jongeren zitten veel online en sturen vaak gifjes naar elkaar via WhatsApp (dit doe ik zelf ook). Dus het leek mij een leuk idee om een gifje van iets van het milieu toe te voegen. Uiteindelijk is dit een bomenknuffelaar geworden (omdat je milieuvriendelijk bezig bent door iets weg te gooien in onze interactief pratende afval paal).
Daarna heb ik nog een wireframe gemaakt met adobe XD (high-fidelity).
De tekst Lorem ipsum dolor sit amet, consectetur adipiscing elit” die je bij de 2 high-fidelity wireframes ziet staan, geeft aan dat het een voorbeeldtekst is en dat het alleen om de vormgeving gaat.
Ik heb uiteindelijk nog een laatste (low-fidelity) wireframe gemaakt om toch nog een aanpassing te maken op de mobile versie, namelijk dat de knoppen verticaal weergegeven zouden worden i.p.v. horizontaal:
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.
Voor de website heb ik Javascript gebruikt voor de beloningsknoppen en de “back to top” button. Om te beginnen moet je het HTML document linken met het Javascript document, dat doe je zo:
Voor de beloningsknoppen was het de bedoeling dat wanneer je op één van de buttons zou klikken (voor de knop weer=het weerbericht van de komende dagen, voor de knop spreuk=een leuke quote en voor de knop kerk= een feitje over de kerk) je beloning tevoorschijn zou komen. Bij de knop van de spreuk en de kerk, moest deze tekst gerandomiseerd zijn. Voor de rest moest ook nadat er op één van de buttons geklikt werd, het niet meer mogelijk zijn om nog een keer op dezelfde of een andere button te drukken, want de bedoeling is dat je maar één beloning krijgt.
Bij het randomizen van de spreuk of kerkfeit, heb ik eerst een array aangemaakt waar alle tekst instaat hiervan.
Daarna bij het klikken van de button, geef ik hem de opdracht op willekeurig een tekst te kiezen uit de array:
En als laatst, zorg ik ervoor dat na het klikken van de button, alle buttons unclickable worden:
Ditzelfde heb ik ook gedaan bij de kerkbutton.
Daarnaast heb ik ook nog Javascript gebruikt voor de “back to top” button. Deze code laat zien dat wanneer je meer dan 20px naar beneden scrollt, de button “back to top” tevoorschijn komt. Ook wanneer er op de button wordt gedrukt, scrollt die terug naar het bovenste gedeelte van de website.
Als laatst heb ik nog een functie toegevoegd (nadat CLE 3 afgerond was), dat de gebruiker in de form kan selecteren in welke regio zij/hij de IPAP terug zou willen zien. Zo kan de gebruiker ook nog input verwerken en hiermee de website “updaten”. Ik ben begonnen met het maken van een form:
Daarna heb ik met Javascript ervoor gezorgd dat bij het selecteren van een regio deze getoont wordt onder de form. Dit heb ik met de functie “myInput.addEventlistener(type:change)” gedaan. Hierna kan er nog op “verzend” worden geklikt, zodat de regio wordt doorgestuurd naar ons (zogenaamd), zodat wij weten in welke regio de volgende IPAP moet komen. Ook heb ik met de laatste regel code ervoor gezorgd dat bij het drukken op enter of “verzend”, de pagina niet refresht en de gebruiker gelijk ziet welke regio zij/hij heeft geselecteerd. Zo heeft de gebruiker dus ook nog input in mijn website d.m.v. Javascript.
