Front-end Block 2

Ik zelf heb al redelijke ervaring op het gebied van Front-end omdat ik zelf een eigen bedrijf heb dat website maakt en daarnaast heb ik al bij verschillende webdesign en of marketingbureau’s gewerkt. Hierdoor heb ik al verschillende website gebouwd. Daarnaast heb ik uit eigen interesse al verschillende online courses gevolgd.

HTML


Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je begrijpt het verschil tussen de basis HTML elementen zoals <div> <span> <p> en je bent in staat om de werking hiervan toe te passen op je eigen semantische elementen.

De manier waarop HTML geschreven word is belangrijk de structuur hiervan is belangrijk om hoger in Google te komen en het overzichtelijk te maken voor jezelf.

Basiselementen van HTML

– <head> voor het ophalen van bijvoorbeeld CSS en Javascript bestanden en een titel aan de pagina te kunnen toevoegen
-<nav> om de navigatie van de pagina toe te voegen om zo door de pagina’s van de website te kunnen navigeren
-<body> in de body komt alle content van de HTML pagina zoals afbeeldingen en teksten etc.
-<footer> Het einde van de pagina’s waarin meestal een copyright neergezet is en/of contact gegevens.
Hierbij de course van Codecademy die ik succesvol heb behaald.

CSS


Je kan werken met css selectors (tags, id’s en classes) en je begrijpt het verschil tussen de css eenheden : %, em, vw, px Je website gebruikt een van de volgende layout methoden: flexbox, css grid of float Je hebt onderzoek gedaan naar responsive technieken en je kan uitleggen hoe deze werken. Dit mag met media queries, relatieve eenheden, of een responsive framework.

 

Tijdens mijn werkervaring in het programmeren ben ik steeds beter geworden in het maken van een goede en overzichtelijke stylesheet.

Een goede styleheet is ingedeeld in verschillende delen van de website hierbij denk ik aan de header, nav, body etc. Zo is het makkelijk terug te vinden waar je CSS van dat stukje website staat.

ID’s zijn uniek elk element kan maar één ID hebben en elke pagina kan maar één element met dat ID hebben

Classes zijn niet uniek, je kan dezelfde class gebruiken op meerdere elementen en meerdere classes op hetzelfde element

Layout

Bij het maken van een goede website is het ook belangrijk dat de layout goed is op zowel mobiel als desktop of tablet. Tegenwoordig worden er meer websites ingeladen op mobiel en tablet dan op de desktop daarom begin ik vaak eerst met de mobiele website omdat daar de meeste bezoekers op komen en dat is natuurlijk het belangrijkste dat die goed kunnen zien wat erop de website te doen of te vinden is. Daarna ga ik vervolgens aan de slag doormiddel van media queries om de website op alle formaten goed zichtbaar te maken. Meestal kies ik ervoor bij de navbar om deze voor mobiel en tablet te kiezen voor een hamburgermenu en op de desktop een gewoon navbar menu.

Verschillende eenheden

In CSS heb je verschillende eenheden:

% = een relative lengte
em = een relative en oorspronkelijk de breedte van de hoofdletter M
rem = rem (root em) werkt op dezelfde manier als de em, behalve dat die altijd gelijk is aan de standaard font size
vw en vh = deze eenheden zijn respectievelijk breedte en hoogte
px = een absolute lengte

Ik gebruik zelf veel procenten omdat ik dat het fijnste vind werken om een website goed responsive te maken. Ook gebruikte ik eerst veel Bootstrap maar intussen hebben we natuurlijk Materializecss en deze gebruik ik nu vaker.

Javascript


Je voegt interactie toe aan je project middels code, op het moment dat dit niet meer met html en css alleen valt op te lossen. Je applicatie reageert middels code op gebruikersinteractie. Gebruikersinput wordt gevalideerd. Je applicatie houdt een status of voortgang van de gebruiker bij en je interface reflecteert dit.

Tijdens mijn vele ervaring qua programmeren heb ik weinig tijd besteed aan Javascript daarom heb ik mijzelf voorgenomen daar meer mee bezig te zijn en daarom heb ik ook bij projecten van school zo veel mogelijk bezig te zijn met Javascript. Zo ben ik actief bezig met het volgen van cursussen en projecten met Javascript. Hierin ben ik bezig met Vue en Angular voor het maken van een webapps bijvoorbeeld.

Ik heb voor de Boat race game in CLE3 gebruik gemaakt van de Vue.js. Deze heb ik gebruikt zodat ik Instascan kon gebruiken voor het inscannen van een QR-code met daarachter een url. Die url word gecontroleerd of het de juiste url is en dan word je doorgestuurd, als de url niet juist is krijg je een popup met een melding. Daarnaast kan je op de telefoon ook nog kiezen tussen de voor en achtercamera op je telefoon.

Ook heb een timer gemaakt die tijdens de game loopt en daaruit word de score opgemaakt van de game.

  • Interactie: De gebruiker scant een QR-code in en dan word de gebruiker doorgestuurd naar een andere url.
  • Validatie: De url word gevalideerd of de gebruiker de juiste QR-code met de juiste url heeft ingescand. Wanneer dit zo is word de gebruiker naar de juiste url gestuurd. Wanneer dit niet zo is komt er een popup melding dat de QR-code niet de juiste is.
  • Statusverandering: Nadat een persoon op de camera pagina een QR-code scant veranderd de pagina nadat de QR-code door javascript is verwerkt.

Projecten

Hier heb ik nog een paar projecten die ik gemaakt heb.

Boat-race web app

Manoekwestra.nl

Helaas heb ik mijn boekingssysteem niet meer online staan. Hiervan heb ik nog een paar afbeeldingen hier onder neergezet.

Doelgroep block 2

Interviewen

Je hebt bij meerdere personen uit de doelgroep een interview afgenomen zodanig dat hier relevante conclusies uit getrokken kunnen worden.

 

CLE2

Om mijn doelgroep en opdrachtgever te leren kennen heb ik een interview gehouden met zowel mijn opdrachtgever als de doelgroep. Ik heb verschillende personen uit de doelgroep voor de Frisian Yacht Club geïnterviewd. Over het algemeen is de doelgroep wat ouder dat komt omdat ze meer inkomen hebben of meer budget van wat ze opgespaard hebben.

Opgestelde interview voor opdrachtgever en Doelgroep

Interview antwoorden opdrachtgever

Interview antwoorden doelgroep

Analyseren

Je hebt verschillende ontwerptools ingezet om de karakteristieken van de doelgroep visueel inzichtelijk te maken zodanig dat de interactie en interface ontworpen kan worden.

 

CLE2

Tijdens het analyseren van de doelgroep heb ik een persona gemaakt en aan de hand van deze persona heb ik weer een customer journey gemaakt. Zo heb ik een beeld gekregen van hoe de doelgroep zich vormt en wat de behoefte van de doelgroep is.

De doelgroep:

  • Leeftijd vooral tussen de 40 en 65
  • Personen met een hoger inkomen
  • Personen met veel vrije tijd
  • Passie voor zeilen of iets met boten
  • Personen met in veel gevallen een eigen bedrijf of ondernemend
  • Omgeving Friesland en Amsterdam

Persona

Een persona is een fictief op onderzoek gebaseerd gebruiksprofiel dat inzicht geeft in de verlangens, het gedrag en de verwachtingen van eindgebruikers. De persona heb ik gemaakt met een online tool genaamd Xtensio. De persona is hier onder te zien.

Customer journey

De customer journey is een visualisatie die het pad van de gebruiker beschrijft middels het weergeven van de momenten waarop de gebruiker interactie heeft met de service of het device.

Ik heb doormiddel van de persona de customer journey gemaakt die hier onder te zien is

Communiceren

Je kunt rollen en bijbehorende behoeften zodanig beschrijven dat deze het informatie-, interface- en interactieontwerp voeden.

 

CLE2

Ik heb samen met de opdrachtgever een debriefing gedaan die heb ik hieronder toegevoegd. Een debriefing is een van de belangrijkste onderdelen van het onderzoek omdat ik hiermee een duidelijk beeld krijg van wat de opdrachtgever wilt en hoe de opdrachtgever dit voor zich ziet.

Debriefing opdrachtgever

Uit het doelgroep onderzoek bleek dat veel mensen belang hebben bij een online boekingssysteem om zo hun boten te reserveren, hierbij kreeg ik veel informatie over wat de verschillende opties zijn voor het boeken van een boot.

Hieruit kwam sterk naar voren dat mensen graag een uitgebreid boekingssysteem willen met verschillende opties zodat ze gelijk duidelijk weten wat ze voor de boeking krijgen bij de Frisian Yacht Club.

Ik dacht toen gelijk aan de verschillende opties die ik toegevoegd wil hebben.

  • Datum en dagdeel(tijd)
  • Locatie/opstaplocatie
  • Boottype
  • Aantal personen
  • Arrangement
  • Accomondatie
  • Lunch of Diner
  • Notitie

Deze heb ik meegenomen in mijn user stories. Aan de hand van het opdrachtgever en doelgroep onderzoek heb ik de user stories opgesteld.

User stories

Testopzet

Je kan een volledige testopzet maken, waarin de keuze tussen verschillende type tests wordt afgewogen en waarin de beoogde deelnemers en testopstelling verantwoord worden.

 

CLE4

Onderzoeksmethode:

Voor het testen zijn er verschillende methoden:

Als eerste heb je een 5 seconds test, hierbij laat je een persoon 5 seconden naar je content kijken en vraag je aan diegene wat hij onthouden heeft. Daarnaast vraag je ook of er iets opvallends was.. Het voordeel van deze test is dat je snel en makkelijk een test kan doen en je snel en direct feedback hebt.

Vervolgens heb je ook A/B testing dit is een methode waarbij je twee verschillende varianten laat testen door twee verschillende groepen hierbij word gekeken welke groep het effectiefst is. Hierdoor kan vastgesteld worden welke van de varianten het beste is. Word veel toegepast bij websites om gebruikers de beste gebruikerservaring te geven bijvoorbeeld.

Black box testing is ook een bekende testmethode die doormiddel van software word getest en waarbij de tester er niet van af weet dat er een test gedaan word, de tegenhanger van Black box testing is White box testing hierbij weet de tester er wel vanaf.

Idee:

Tijdens CLE 4 hebben we tussentijds bedacht om een test uit te voeren op de game die we tot nu toe hadden. Hierbij hadden we bedacht om dit te doen doormiddel van OBS(Open Broadcast Software) om het geluid en scherm op te nemen en doormiddel van een webcam de reactie van de gebruiker te lezen. Hiervoor hebben we toestemming gevraagd aan de mensen die worden opgenomen tijdens het spelen van de game.

Doel:

Het doel van de test is om erachter te komen wat er verbeterd kan worden aan onze game. Hierbij hebben we een paar experts gevraagd om onze game te testen en hier feedback op te geven.

Hypothese:

We willen doormiddel van de test erachter komen wat er aangepast kan worden of verbeterd kan worden aan onze game.

Ik denk dat de game nog erg onduidelijk is en dat de testers niet echt goed de game kunnen spelen. Dit komt omdat de game nog niet volledig speelbaar en af is en er een verhaallijn mist in de game.

Scenario:

Het scenario van het spel is om de eerste mini game te behalen en dan in het eerste fishlevel terecht te komen zoals hier onder aangegeven. Hierna volgen nog meer levels alleen zijn wij hier nog mee bezig.

Deelnemers:

 

Naam

 

Geslacht

 

Leeftijd

 

Persoonlijk kenmerk

 

Relevantie doelgroep

 

Dominique

 

Man

 

24

 

Creatief en energiek

 

Expert

 

Branko

 

Man

 

 

22

 

 

Professioneel en gestructureerd

 

Expert

 

Jasper

 

Man

 

23

 

Professioneel en slim

 

Expert

 

Didi

 

Man

 

22

 

Creatief en slim

 

Expert

Survey vragen:

Heb je wel eens tamagotchi gespeeld?

Weet je wat de evolutie is?

Wat vond je goed aan de game?

Welke feedback heb je voor onze game?

Vond je de game duidelijk?

Locatie van de test:

De locatie van de test is op school tijdens de presentaties van de games. Hierbij hebben we verschillende studenten gevraagd om onze game te testen en hier feedback op te geven.

Testopstelling en taakverdeling:

De opstelling is als volgt bij het testen. De persoon die de game test zit achter de laptop waarbij de webcam en de OBS software aanstaan om op te nemen. Naast de persoon die de game test zit één persoon van ons team die de feedback van de test persoon bekijkt en waar nodig technische mankementen oplost. Hierbij is het de bedoeling dat de testpersoon niet geholpen word wanneer hij vragen heeft over de game. Om zo een goede en duidelijke feedback te krijgen.

Uitvoering

Je kunt testresultaten van (tenminste 3) representatieve deelnemers analyseren, documenteren en visualiseren, zodanig dat de testresultaten inzichtelijk worden voor anderen.

 

CLE4

We hebben de opgenomen beelden en geluid op youtube gezet die hieronder te zien is.

Tijdens het testen kwam veel feedback naar voren. Hieruit hebben we de volgende resultaten gehaald:

Positief:

  • Het startmenu in het begin van de game is overzichtelijk in gebruik en werkt goed.
  • De achtergrond muziek van de game is leuk
  • De visuele beelden zijn mooi ontworpen en kleurrijk

Negatief:

  • Onduidelijke gameplay doordat er niet een verhaallijn in de game zit en daardoor wisten de testers niet goed hoe ze de game moesten spelen.
  • Mini game onduidelijk, er zaten enkele bugs in de mini game en er was geen uitleg van te voren gegeven.
  • Progress bars zijn niet echt op een natuurlijke manier ingesteld hierdoor ontstond verwarring
  • Meer uitleg over de game tijdens het spelen, om de game makkelijker te maken en beter speelbaar.
  • Welke besturing gebruikt moest worden was erg onduidelijk, de testers zaten verschillende toetsen in te drukken maar doordat dit niet was aangegeven wisten ze niet hoe ze de game moesten spelen.
  • Styling problemen,  niet responsive design.

Uit deze feedback zijn we weer verder gegaan met onze game. We hebben heel veel aan de feedback gehad om deze verbeterpunten hierboven toe te passen werd voor ons heel veel duidelijkheid geschept.

Omdat deze video niet echt de doelgroep was waarvoor we de game gemaakt hebben heb ik ervoor gekozen om alsnog de doelgroep de game te laten testen. Hiervoor heb ik 2 kinderen van mijn buurman gekozen. Omdat mijn buurman liever niet had dat de kinderen werden opgenomen heb ik ervoor gekozen om ze de game te laten spelen en vervolgens een paar vragen te beantwoorden over de game.

De kinderen van mijn buurman zijn allebei 11 jaar oud en zitten in groep 7 van de basisschool. Hieronder heb ik de vragen en antwoorden van de vragen die ik gesteld heb nadat ze de game gespeeld hebben neergezet.

Evo Life vragen:

Evo Life Antwoorden:

Conclusies

Je kunt uit de tests conclusies trekken die je inzicht geven voor een volgende iteratie of stap in het proces.

CLE2

Uit mijn debriefing en doelgroep onderzoek is gebleken als volgt.

De opdrachtgever wilt graag een boekingssysteem die geautomatiseerd een mailtje met de gegevens van de boeking stuurt en dat de opdrachtgever hierop zelf weer een mailtje terug kan sturen om het te bevestigingen. Daarnaast wilt hij dat er verschillende opties in het invulformulier terug komen zodat het gelijk duidelijk is om wat voor boeking het gaat.

De doelgroep wil snelle en eenvoudiger een boot met arrangement kunnen boeken zodat ze hier niet veel tijd in moeten steken zoals het over en weer mailen met de Frisian Yacht Club.

Uit dit doelgroep en opdrachtgever onderzoek is voor mij duidelijk geworden wat de eisen van de doelgroep en de opdrachtgever zijn. Hierdoor kan ik duidelijker en gemakkelijker bezig om het boekingssysteem te ontwikkelen.

CLE4

Uit de test die we gedaan hebben op onze game hebben we heel veel feedback gekregen. Deze feedback heeft ons uiteindelijk er toe gelaten om veel aanpassingen te doen in de game:

  • Aanpassingen in de progress bars zodat dit natuurlijk verloopt waardoor er meer duidelijk is voor de speler of het level omhoog of omlaag gaat.
  • Meer duidelijkheid creëren door een Darwin toe te voegen die informatie en instructie geeft over de game en hoe je deze moet spelen
  • CSS aanpassingen doorvoeren om de responsive website voor zowel mobiel als desktop in orde te hebben.

User stories:

  • Als gebruiker wil ik instructies krijgen tijdens het spelen van de game met een verhaallijn zodat de gameplay(game) duidelijker word om te spelen.
  • Als gebruiker wil ik de progress bars in de natuurlijke richting gaan zodat dit duidelijker is of de verschillende eigenschappen van de tamagotchi omhoog of omlaag gaan.
  • Als gebruiker wil ik de game responsive hebben zodat deze ook op de mobiel te spelen is.
  • Als gebruiker wil ik uitleg hebben over de besturing van de game voor dat ik ga spelen zodat ik gelijk weet hoe ik de game moet spelen.

CLE 4 – 2.0

Na de volgende iteratie van de game Evo Life bleek eruit dat we een goede voortgang hadden gemaakt en daarnaast ook nog enkele punten van kritiek kregen die we kunnen aanpassen. Hieruit bleek dat de verhaallijn en hoofdmenu die we gemaakt hadden goed in orde was maar dat de mini game erg saai en niet uitdagend was. Ook was de hoofdgame niet echt vloeiend en te simpel. Qua visuele elementen zitten we in de goede richting.

De volgende punten zijn goed verwerkt:

  • Er is een verhaallijn gecreëerd doormiddel van Darwin hierdoor is de gameplay(hoe de game gespeeld moet worden) duidelijk geworden.
  • De progress bars zijn in de natuurlijke richting gezet zodat de speler duidelijk heeft of de eigenschappen omlaag of omhoog gaan wanneer hij de knop indrukt van de desbetreffende eigenschap.
  • De game is responsive gemaakt doormiddel van media queries, de speler kan de game nu zowel op desktop als mobiel spelen.
  • De gebruiker krijgt voor het begin van de game uitleg over de besturing van de game.

De volgende punten zijn feedback:

  • De game is te makkelijk, dit komt omdat er geen uitdaging in de game zit. Je hoeft alleen op een paar buttons te klikken om verder naar het volgende level te kunnen.
  • De game liep niet echt vloeiend doordat er veel tekst gelezen moest worden, dit was erg moeilijk voor de doelgroep van 11 jaar.

De punten gaan we meenemen in onze volgende iteratie.

Sector verdieping block

Inhoud

Je leest blogs, literatuur en bezoekt (een of meerdere ) events zodat je op de hoogte bent van: technologische ontwikkelingen. Publiceer hier een aantal blogpost over. de ontwikkelingen in de sector van jouw voorkeur. Ga in gesprek met experts in jouw sector (online of offline).

Bij deze artikelen gaat om de ontwikkelingen van de digitale virtuele assistent. Die steeds meer een grotere rol gaat spelen in ons leven. De manier waarop wij de virtuele assistent kunnen inzetten is van groot belang denk ik. Daarnaast zijn er bepaalde aspecten die zowel voordelen al nadelen opleveren met zo’n digitale virtuele assistent.

Tegenwoordig zijn er tal van mensen die als virtuele assistent worden ingezet bij bijvoorbeeld thuiszorg, mensen die een burnout hebben of overwerkt zijn, daarnaast hebben verschillende mensen ook een persoonlijke assistent voor op het werk dit noemen wij meestal een secretaresse.

Ik ben ook in de Utrecht Jaarbeurs bij de Big Data Expo geweest. Hierbij heb ik met wat bedrijven gepraat over privacy en de manier waarop hun met hun data omgingen, hierbij hadden ze verschillende technieken en systemen. Ik kwam ook bij een bedrijf die bezig was met een virtuele assistent om ouderen te helpen die thuiszorg nodig hebben. Hierbij hebben ouderen vaak een echt persoon die hun helpt. Hierbij verzamelde het bedrijf enorm veel data over verschillende soorten ouderen en gingen ze aan de hand van die data mogelijke taken bedenken.

Ik ben als ondernemer ook bij twee verschillende Google Werkplaats events geweest zowel in Leeuwarden als in Groningen.

Bij de eerste in Leeuwarden ging het over het beveiligen van je accounts en privacy daarvan. Neem bijvoorbeeld twee staps verificatie van Google en daarnaast ging het ook over het verzamelen van data die Google natuurlijk steeds meer verzameld doormiddel van smartphones met Android en natuurijk de Google Home die tegenwoordig in steeds meer huiskamers te vinden is.

 

Ook ben ik op bedrijfssafari geweest bij 2 verschillende bedrijven, namelijk Q42 en Dotcontrol.

Het tweede bedrijf Q42 sprak mij veel meer aan omdat ik heel erg van de vrijheid hou, door de vrijheid stijg ik boven mijn eigen kwaliteiten uit en leer ik ook veel meer dan wanneer ik minder vrijheid heb. Q42 was ook niet alleen bezig met websites en apps maar ook met verschillende totaal andere projecten zoals de Google Assistent intergratie op verschillende toepassingen.

Onderzoek

Je voert meerdere onderzoeken uit en houdt daarbij rekening met: Bronnen (Je hebt relevante bronnen op een correcte wijze verwerkt in tekst en bronnenlijst zodanig dat anderen een goed inzicht krijgen in je onderbouwing); Onderzoeksdoel (Je hebt het onderzoeksdoel zodanig afgebakend dat je een onderzoeksvraag kunt formuleren); Onderzoeksmethode (Je kan een onderzoeksmethode selecteren en uitwerken zodanig dat je daarmee een antwoord kunt vinden op de onderzoeksvraag); Data (Je weet data te verzamelen en weer te geven zodanig dat je conclusies kunt trekken en aanbevelingen kunt doen); Reflecteren (Je kunt zodanig op je eigen onderzoek reflecteren dat de sterke en zwakke punten van het onderzoek en jouw rol daarin duidelijk worden); Respect (Je gaat zodanig met je onderzoeksomgeving en deelnemers om dat je hiermee respect toont);

Ik heb voor techniekfilosofie onderzoek gedaan naar de manier waarop de digitale virtuele assistent toeneemt en over een paar jaar niet meer weg te denken is uit ons leven.

Hierbij had ik als onderzoek:

Onderzoeksvraag:
Wat zal de impact zijn van de virtuele assistent op ons persoonlijke leven en gedrag?

Stelling:
Binnen 20 jaar zal de mens afhankelijk zijn van de virtuele assistent.

Resultaat

Als onderzoeker kom je door middel van goed gevonden bronnen en goed argumenten kom je tot een gefundeerde mening over ontwikkelingen op je vakgebied. Je kunt spiegelen, dat wil zeggen deelnemen aan een debat/ruggespraak gehouden met een expert. Let op: dit is geen medestudent!. Je publiceert meerdere artikelen (onder andere het essay van Filosofie 3), waarin je jouw visie op de sector deelt, aangeeft waarom de technologie ‘cutting edge’ is, en welk concept je bedacht hebt voor de sector op basis van deze technologie.

De virtuele assistent is niet meer weg te denken uit ons leven

Invloed van de virtuele assistent

One of a Kind Block

Ken je kwaliteiten

Je (h)erkent je sterke en zwakke punten binnen het opleidingsdomein zodanig dat je deze punten bewust aanpakt in je eigen ontwikkeling.

Ik bekijk alles altijd vanuit het beste en het slechtste perspectief. Ik ken mezelf heel goed en weet daarom ook wat mensen aan mij hebben. Ik laat altijd van mezelf horen als dat nodig is.

 

Sterkte punten

  • Positief denken, ik blijf altijd positief denken ook al gaat het heel slecht.
  • Organiseren, organisatie binnen een team duidelijk en helder maken hierdoor gaat de productiviteit in het team omhoog.
  • Kwaliteit afleveren, Ik lever goede projecten af waarbij alle functionaliteiten werken en de styling passend is bij het project.
  • Behulpzaam, ik kan mensen goed helpen door specifiek hun iets uit te leggen.
  • Gemotiveerd, ik ben gemotiveerd om nieuwe dingen te leren.
  • Altijd op de hoogte van de laatste ontwikkelen, ik ben iemand die altijd overal van op de hoogte wil wezen, door veel online te lezen, events te bezoeken.
  • Building blocks halen, het halen van building blocks ben ik erg gemotiveerd in ik heb in de afgelopen tijd al aardig wat building blocks gehaald.
  • Hoge algemene kennis, ik heb een hoge algemene kennis waarmee ik veel stof snel begrijp.
  • Doorzetter, ik ben een doorzetter die niet stopt voordat het gelukt is of klaar is en ik tevreden ben met het resultaat.

Zwakke punten

  • Prioriteiten stellen, doordat ik super veel dingen leuk vind om te leren of te doen, raak ik vaak de prioriteiten van bepaalde dingen kwijt, hierdoor lopen er projecten of opdrachten in de soep.
  • Eigenwijs, ik ben ontzettend eigenwijs. Ik vind dit zowel een zwak als een sterk punt, omdat ik hiermee opkom voor mijn eigen belang maar dit kan ook nadelig werken wanneer ik geen gelijk heb dat ik dan toch het idee of project door wil zetten.
  • Ik ben niet goed in het maken van tentamen leren en maken. Ik kan mezelf niet goed er tot zetten om echt daadwerkelijk dingen uit m’n hoofd te leren. Ik ben echt iemand die leert door te doen.
Event

Je hebt minimaal één branchegerelateerd netwerkevent bezocht (meetup, conferentie, e.d.) zodanig dat je aantoonbaar je vakkennis hebt vergroot.

Ik heb verschillende evenementen van het telefoon merk OnePlus bezocht. Hierbij werd de ene keer gepraat over de vernieuwingen van het bedrijf en inbreng van de fans en daarnaast werden er verschillende goodies weggeven. Hierbij had ik verschillende gesprekken over de telefoons van OnePlus met werknemers van OnePlus, ook ben ik naar het event geweest waarbij de nieuwe OnePlus 6 gepresenteerd werd.

Ik ben ook in de Utrecht Jaarbeurs bij de Big Data Expo geweest. Hierbij heb ik met wat bedrijven gepraat over privacy en de manier waarop hun met hun data omgingen, hierbij hadden ze verschillende technieken en systemen.

Ik ben als ondernemer ook bij twee verschillende Google Werkplaats events geweest zowel in Leeuwarden als in Groningen.

Bij de eerste in Leeuwarden ging het over het beveiligen van je accounts en privacy daarvan. Neem bijvoorbeeld twee staps verificatie van Google.

De tweede in Groningen ging meer over om jezelf op de kaart zetten als ondernemer in jouw branche om meer klanten te werven en de verschillende manieren hoe je dit kunt aanpakken. Hierbij werden ook net als bij de eerste Google werkplaats die ik bijgewoond heb workshops gegevens om bepaalde vaardigheden of tacktieken aan te leren.

 

Ook ben ik op bedrijfssafari geweest bij 2 verschillende bedrijven, namelijk Q42 en Dotcontrol.

Dotcontrol zit in Rotterdam en is een bedrijf dat zich voornamelijk bezig houd met webapplicaties en verschillende mobiele applicaties. Daarbij hebben ze kleine projecten en grote projecten waarmee ze wel jaren bezig mee kunnen zijn. Hierbij merkte ik dat ze heel gestructureerd overkwamen door de manier waarop ze werken. Ze werken in teams met scrum en iedereen heeft echt een eigen kwaliteit en dat bundelen ze samen om zo samen een project tot een goed eindresultaat te krijgen. Een heel georganiseerd bedrijf. Dat wel aardig goed aansluit bij de gedachten die ik had bij een bedrijf in mijn branche.

Bij het tweede bedrijf Q42 dat zich gevestigd heeft in Den Haag en Amsterdam merkte ik gelijk dat ze veel opener en relaxter waren. Dit merkte ik al helemaal toe ze vertelde over hun eigen manier van werken waarbij je zelf heel veel mag bepalen als medewerker en je eigen creativiteit los kan laten. Hierdoor heb je hele uiteenlopende projecten.

Het tweede bedrijf Q42 sprak mij veel meer aan omdat ik heel erg van de vrijheid hou, door de vrijheid stijg ik boven mijn eigen kwaliteiten uit en leer ik ook veel meer dan wanneer ik minder vrijheid heb.

Netwerk

Je hebt een netwerk van externe contacten zodanig samengesteld dat deze contacten je verder kunnen helpen in je ontwikkeling.

 

Ik heb door de jaren heen veel netwerken opgebouwd. Ik heb sinds ik een eigen bedrijf heb veel evenementen bijgewoond. Daarnaast heb veel familie en vrienden die ondernemend zijn.

Zo heb ik tijdens mijn stages en werkperiodes op het MBO veel mensen in Haarlem en Amsterdam ontmoet, dit zijn voornamelijk webdevelopers waarmee ik samen werkte of ik heb ze ontmoet tijdens meetups in Amsterdam en omgeving.

Zo heb ik gewerkt bij Minty Media waar ik samen met Job en Rubin gewerkt heb aan verschillende projecten. Van hun heb ik veel geleerd op het gebied van website bouwen en marketing.

Mijn neef uit Haarlem heeft ook veel ervaring in de ICT branche en is overal van op de hoogte. Ik spreek vaak met hem af om nieuwe ideeën en inspiratie op te doen.

Daarnaast heb ik een oude buurjongen uit Leeuwarden waar ik veel contact heb over verschillende ICT gerelateerde ideeën.

Via Telegram heb ik veel groepen waarmee ik over websites en dergelijke overleg, zowel in het Engels als Nederland. Ook heb ik via Telegram een groep waarbij we praten over de nieuwste tech ontwikkelingen en een groep over Android software.

Zo volg ik ook verschillende community’s zoals XDA, OnePlus, en vele Youtube kanalen.

Hieronder heb ik ook nog even mijn LinkedIn toegevoegd voor een klein overzicht.

Rolmodel

Je hebt een superheld uit het domein van CMGT gekozen die jou weet te inspireren.

 

Mijn superheld is mijn neef Meinte, van af jongs af aan was ik altijd geïnspireerd door hem. Ik wilde hem gewoon zijn, alles wat hij deed wilde ik ook. Mijn neef is namelijk een goede 10 jaar ouder dan mij. Vroeger toen ik jong was, was hij al bezig met computers in elkaar zetten en installeren met floppy en diskettes, ik vond het allemaal geweldig. Helemaal toen de eerste games kwamen vond ik dit prachtig en raad eens, die speelde ik als eerste bij mijn neef op Windows 95. Mijn neef verhuisde van Friesland naar de randstad en deed de opleiding CMD, vervolgens werkte hij bij verschillende media bedrijven om allerlei verschillende ICT gerelateerde beroepen uit te oefenen. Dat inspireerde mij enorm, vandaar dat ik later ook naar de randstad vertrok ;). Toen ik in de randstad ging werken en stage ging lopen ging ik ook vaak naar mijn neef voor inspiratie en hulp. Tot de dag van vandaag doe ik dit nog steeds heel graag en kom ik altijd weer bij mijn neef vandaan met geweldige ideeën of inspirerende verhalen.

Online presence

Je hebt je online geprofileerd en gemanifesteerd (online presence) via het delen van applicaties / code snippets / tutorials zodanig dat je als aankomend professional door externe personen als serieus gesprekspartner wordt gezien.

Ik heb online veel verschillende tutorials gevolgd via Codecademy, Udemy, W3schools, Codeschool en op Youtube veel verschillende kanalen.

Hierdoor heb ik veel kennis opgebouwd. Deze heb ik vervolgens gebruikt om met mijn eigen bedrijf websites te maken voor verschillende bedrijven. Ik heb hiervoor een eigen website gehad alleen heb ik deze weer offline gehaald omdat ik veel meer klanten kreeg en ik dit niet aan kon. Daarom heb ik ervoor gekozen om me te focussen op de opleiding. Ik heb hier nog een paar projecten die ik gemaakt heb.

Snacky Express

Frisian Yacht Club

Boat race

Niek Westra

Evo life

Haarlem Huren

Elaha.nl

Manoek Westra

Ook heb ik gewerkt bij het bedrijf Minty Media, hierbij heb ik aan verschillende projecten gewerkt.

Ook heb ik op GitHub een paar projecten staan. Ik ga bij komende projecten veel meer gebruik maken van GitHub

Specialisatie Block

Nieuwsgierig

Je kunt uitleggen waarom je juist deze specialisatie gekozen hebt. Je kunt aantonen hoe je voor deze specialisatie up-to-date blijft wat betreft de nieuwste ontwikkelingen.

 

Programmeren met Front end frameworks

Ik heb gekozen voor programmeren met Front end frameworks omdat ik altijd geïnspireerd raak door de verschillende nieuwe technieken die toegepast worden in de front end frameworks. Daarnaast ben ik altijd opzoek naar nieuwe frameworks om te gebruiken voor een nog moderne look voor websites die ik maak. Voorbeelden waarvan ik geïnspireerd raak zijn te vinden op de volgende websites:

Medium

Awwwards

Product Hunt

Daarnaast volg ik veel nieuws over websites ontwikkelingen via diverse technologie websites met o.a. Reddit, Youtube en diverse podcasts om op de hoogte te blijven van de laatste ontwikkelingen.

Brede oriëntatie

Je hebt minimaal 4 frameworks / platformen onderzocht. In minimaal 2 frameworks / platformen heb je een prototype gemaakt.

 

Ik heb gekozen voor front end frameworks die te maken hebben met het design/styling(CSS) van de website. Voor mijn onderzoek naar de verschillende frameworks heb ik naar veel frameworks gekeken en de volgende vier uitgekozen die er naar mijn mening erg uitspringen.

Bootstrap:

Bootstrap is één van de bekendste front end frameworks op het moment en word ook heel veel gebruikt door bedrijven, professionals en allerlei verschillende developers. Grote bedrijven als Twitter, Ticketmaster en Spotify hebben hier gebruik van gemaakt.

Bootstrap staat vooral bekend omdat het super makkelijk en goed werkt voor het maken van een goede responsive websites voor zowel de computer, tablet en smartphone. Daarnaast zijn er heel veel user interface components beschikbaar voor Bootstrap die je heel gemakkelijk kan gebruiken.

Materialize:

Materialize is een framework wat iets minder bekend is dan Bootstrap alleen is het wel herkenbaar doordat het gebaseerd is op Google’s Material Design. Ik vind dit persoonlijk een erg aanspreekbaar framework, het ziet er erg modern en stijlvol uit. Doordat het een vrij modern framework is straalt het ook op website die er mee gemaakt worden een soort professionaliteit uit.

De grote voordelen van Materialize zijn dat het een mooi Google material design heeft, net als Bootstrap goed werkt op alle verschillende formaten apparaten, daarnaast is het heel makkelijk te gebruiken en super licht om te draaien in vergelijking met andere frameworks.

Bulma:

Bulma is een framework gebaseerd op flexbox grid systeem. Daarnaast is het net als andere frameworks hier genoemd erg gericht op responsive design van de website. Ook is Bulma erg modulair doordat je zelf kan kiezen wat je wilt importen aan het framework hierin is het heel erg flexibel.

Bulma staat bekend als simpel en modern en dat is het ook gewoon.

 

UIkit:

UIkit is vergelijkbaar met Bulma alleen is het meer lichtgewicht dan Bulma. UIkit blinkt uit in de animaties en effecten die ze bieden ook ziet er erg modern en strak uit. Net als andere frameworks is het responsive design in orde.

 

Uiteindelijk heb ik gekozen voor Bootstrap en Materialize om daarvoor een protype te gaan maken doormiddel van een website. Ik ben al enige tijd aan het nadenken om een website te maken voor mijn eigen bedrijf echter kwam het maken van de website er nog niet echt van. Daarom heb ik ervoor gekozen om dit in mijn specialisatie block te gaan maken.

Portfolio / showcase

Je hebt één prototype verder uitgewerkt tot een product waar je trots op bent Je hebt een tutorial blogpost geschreven om aan anderen uit te leggen hoe het framework dat jij onderzocht hebt werkt. Je product staat op de showcase-site.

Oplever block

Verzorging code

Functies en kritieke onderdelen in code (onderdelen die niet in één oogopslag te verklaren zijn) zijn voorzien van comments. Logische structuur in componenten van je project. Variabelen en functies hebben beschrijvende namen. Je bent je bewust van code conventies van de programmeertaal waarin je werkt.

 

Bij het schrijven van code is het noodzakelijk dat het overzichtelijk en duidelijk is voor zowel ik zelf als programmeur maar ook voor iemand waarmee je samen werkt of iemand die je misschien wilt helpen wanneer jij iets niet werkend krijgt dat diegene makkelijk en snel je code begrijpt. Dit doe je door een overzichtelijke structuur aan te brengen in zowel je bestanden als de mappenstructuur. Daarnaast breng je waar nodig comments aan voor bepaalde functies of complexe stukken code. Hieronder heb ik een paar voorbeelden neergezet.

Bij dit project heb ik de namen van de functies van de Typescript bestanden duidelijk met elkaar gecombineerd om zo een goed overzicht te krijgen hoe het samen met elkaar werkt en heb ik ook de elements, id’s en classes van de styling hierop ingesteld.

Naast een duidelijke en overzichtelijke code is het ook belangrijk dat je een goede mappen structuur hebt hierbij is het van belang dat de volgende punten goed naleeft.

  • Alle afbeeldingen in een img map
  • Alle lettertypen in een fonts map
  • Alle styling bestanden in een css map
  • Alle javascript bestanden in een js map
  • Met PHP kan je ook een includes map hebben wanneer je bijvoorbeeld bestanden in andere bestanden wilt toevoegen, dan is het makkelijk om al deze include bestanden bij elkaar te hebben.
  • Ook kan het voorkomen dat er een admin map is om bijvoorbeeld het administrator gedeelte te regelen.
Versiebeheer

Je kan versies van je project bijhouden middels beschrijvende commits. Je kan door middel van een online repository samenwerken aan een project, waarbij iedere programmeur zijn eigen inbreng heeft.

 

Voor het bijhouden van versies van een project gebruik ik Github. Dit is een perfect open source platform om je versies bij te houden van Github. Tijdens CLE projecten heb ik dit voor mijzelf gebruik maar ook in team verband. Om zo makkelijk samen als team aan een project te kunnen werken.

Bij Github heb je verschillende functie die je kan toepassen bij het gebruik van Github. Deze heb ik even op een rijtje gezet.

  • Push – met de push functie stuur je alle aanpassingen die je gedaan hebt naar de repository.
  • Fetch – met de Fetch functie haal je alle aanpassingen op van anderen binnen.
  • Pull request – met de pull request doe je een aanvraag om veranderingen toe te voegen aan de repository, deze moeten dan vervolgens goed gekeurd worden.
  • Merge – de merge functie gebruik je wanneer je een branch wilt samen voegen met de master branch.
  • Sync – met de Sync functie update je zowel je locale bestanden als de bestanden op de repository.

Ik heb op mijn eigen Github een paar projecten staan:

https://github.com/koenwestra

Daarnaast heb ik samen met mijn team een project met commits en branches:

https://github.com/berkbalik/CLE4GAME (is private, kan ik laten zien tijdens het assessment)

Overdracht

Je hebt user stories omgezet naar een lijst meetbare specificaties. Je bent in staat om een klantgerichte gebruikershandleiding op te leveren.

Voor CLE 2 heb ik een boekingssysteem gemaakt met de volgende user stories daarnaast heb ik ook de meetbare specificaties opgesteld:

User stories:

Meetbare specificaties:

Voor CLE 3 heb ik een boat race gemaakt met de volgende user stories daarnaast heb ik ook de meetbare specificaties opgesteld:

User stories:

Meetbare specificaties:

Voor de Frisian Yacht Club heb ik een gebruikershandleiding gemaakt:

Back-end Block


Fatal error: Uncaught Error: Call to a member function id() on array in /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code() #1 [internal function]: CrayonFormatter::delim_to_internal() #2 /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback() #3 /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code() #4 /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHighlighter->process() #5 /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php(703): CrayonHighlighter->output() #6 /home/users/stud/0945436/public.www/wp-include in /home/users/stud/0945436/public.www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36