Leerdoelen Meesterproef

Leerdoeldoel 1: Ik wil mijn website correct responsive maken door gebruik te maken van de juiste styling en waar mogelijk zonder media queries. Zodat mijn website er op alle schermen er goed uit blijft zien.

Ik merkte tijdens veel vakken dat het wel redelijk lukte om mijn websites responsive te maken, maar zodra het design te ingewikkeld wordt dat ik toch al snel in de knel kom. Vooral tijdens het vak API merkte ik. Zodra ik alleen gecentreerd hou, lukt het wel om het responsive te maken, maar met API werd het lastig omdat er dingen naast elkaar kwam en een rare bevel styling hadden waardoor tekst snel werd afgesneden.

Leerdoel 2: Ik wil mijn code netter opbouwen door mezelf minder vaak te herhalen, door gebruik van componenten en mijn CSS beter op te bouwen.

Tijdens het vak API merkte ik dat het heel handig is om met componenten te werken en ik merkte tijdens het maken van mijn blog dat ik mezelf al snel aan het herhalen ben, vooral om veel controllers dezelfde opbouw hebben voor buttons. Dus daar kan ik mezelf nog duidelijk in verbeteren.

Leerdoel 3: Ik wil mijn werk meer laten zien en om feedback vragen, zodat ik meer feedback krijg en daardoor mijn website kan verbeteren.

Ik heb gemerkt dat ik vaak niet snel mijn werk laat zien aan docenten of medestudenten, door dat meer te doen kunnen docenten sneller fouten in mijn code vinden en kunnen studenten me meer feedback geven. Daardoor kan ik snel en makkelijk mijn werk verbeteren.

Reflectie sprint 0

Tijdens mijn sprint 0 heb ik een wii controller gemaakt. Op die manier kon ik namelijk goed mijn identiteit als gamer laten zien. Hier kreeg ik ook veel positieve reacties op, vooral over mijn oog voor detail.Ik vond het leuk om dit project te maken en ben van plan dit ook voort te zetten voor mijn meesterschap blog.

Tijdens sprint 0 heb ik 3 verschillende leerdoelen opgesteld. Het goed responsive maken, oefenen met animaties in css en het goed toegankelijk maken van mijn websites. Als feedback hierop kreeg ik dat ze vooral heel technisch waren en dat het beter zou zijn als ik ook een andere kant van het proces zou focussen. Ik heb het leerdoel over toegankelijkheid veranderd naar het eerst maken van schetsen op papier voordat ik ga coderen.

Ik ben dan dus ook zeer tevreden over dit project. Want ik had veel vrijheid waarin ik ook mijn eigen identiteit goed kon laten zien en kon daardoor ook gewoon veel dingen proberen, ook meteen voor mijn aankomende leerdoelen.

Reflectie gesprek 2

Leerdoelen

Gedurende de minor heb ik altijd mijn leerdoelen in mijn achterhoofd gehouden. Ik heb er dan ook op verschillende momenten echt specifiek focus op proberen te leggen zodat ik er altijd mee bezig blijf. Bij verschillende vakken heb ik specifiek geprobeerd te werken aan animaties, bij andere vakken ging het soms al wat meer automatisch.

Leerdoel 1: Animaties maken met CSS: Ik heb vooral aan dit leerdoel gewerkt tijdens het CSS vak. Tijdens dit vak heb ik geprobeerd zo veel mogelijk beweging en animatie in mijn website te stoppen. Zo zit er beweging in de benen, armen, ogen, snor en bubbels. Allemaal hebben ze een eigen animatie en heb ik gebruik gemaakt van animation delay and duration om ze een beetje te verschillen van elkaar. Tijdens CSS heb ik het meeste met animaties gewerkt, maar ik had ook animaties in mijn sprint 0 en API websites ook met animaties gewerkt.

Leerdoel 2: Correct responsive maken. Tijdens sommige vakken ging dit al bijna automatisch, ik had wel voor sprint 0 een creatieve manier responsive gemaakt door de controller te draaien en kon mijn formulier voor BT ook mooi responsive maken. Tijdens API had ik de meeste moeite met het responsive maken, dit kwam deels ook door de styling die ik voor oog had. Hier had ik heel veel moeite mee en heb uiteindelijk ook een media query ervoor gebruikt, hierom wil ik dit leerdoel ook nog voortzetten in de meesterproef.

Leerdoel 3: Eerst schetsen. Voor verschillende vakken en voor mijn meesterschap zelf heb ik eerst een schets gemaakt. Ik merkte vooral tijdens API dat het hielp om goed de verschillende componenten te onderscheiden omdat ik op papier de pagina’s al had uitgetekend, Maar ook voor mijn meesterschap had ik voor elke controller eerst een schets gemaakt, hierdoor kon ik mijn HTML veel makkelijker opbouwen. Niet altijd alles kwam goed uit, zo had ik soms gepland om een after op een button te doen op papier, wat niet kan met code. Maar bij een latere controller wist ik dat dan al en kon ik daar weer rekening mee houden.

Weekly Nerds

Niet elke weekly nerd was even interessant, maar ik heb bij sommige er wel echt veel goede punten uit gehaald. Zo had ik bij Robert Koersman veel gehad een zijn theorie die hij vertelde over formulieren. Hier heb ik verschillende dingen uit kunnen halen en direct kunnen gebruiken voor mijn BT formulier. Dat was vrij handig. Maar ook het college van Rosa vond ik inspirerend. Vooral hoe zij apparaten, voornamelijk printers, uit elkaar haalt om er iets nieuws van te maken, vond ik een goede manier van denken. Daar kan later sowieso nog wel wat mee, niet per se tijdens de minor. Maar ook Niels Leenheer vond ik heel interessant. HIj had namelijk een goede quote: “If you can think it, you can build it”. Dit vond ik inspirerend, want in principe is ook alles mogelijk met code. Soms duurt het alleen wat langer of heeft het wat meer moeite nodig, maar alles is wel mogelijk. Dat merkte ik zelf namelijk ook tijdens het CSS vak toen we gelimiteerd werden doordat we geen JavaScript mochten gebruiken.

Meesterproef

De opdracht

Voor de meesterproef heb ik samen met mijn team gewerkt aan opdracht voor het bedrijf (ink). Dit is een bedrijf die zich richt op het maken van digitale oplossingen voor hun klaten. In dit geval was de klant Gemeente Amsterdam. Ink was bezig met het creeëren van een training die helpt bij het contact met mensen met een beperking. Zij hadden hier al een digitale training voor, maar kreeg daar feedback op van Gemeente Amsterdam. Het was aan ons de taak om een betere training te maken.

Mijn bijdrage

Maken van minigames

Ik heb de functionaliteit code geschreven voor de spraakgebrek minigame en de auditieve minigame. Voor beide minigames heb ik een data bestand aangemaakt waar informatie uit op wordt gehaald die wordt laten zien in de minigame zelf. Op deze manier is de game meer robuust en kan hij makkelijker aangepast worden door de opdrachtgever. Specifiek voor de minigame van de auditieve beperking heb ik gebruikgemaakt van de GSAP Draggable library voor het drag & drop systeem.

Maken van Assets

Voor de auditieve minigame heb ik voor het grootste gedeelte assets van het internet gehaald. Deze bron staat vermeld in de code. Maar voor het gebaar van “bedankt” heb ik meerdere iteraties gemaakt en elke keer gevraagd om feedback om te kijken of de afbeelding duidelijker is.

Voor de blind minigame heb ik samen met Dylan zelf assets gemaakt. Deze hebben we gemaakt in Figma en hebben continu om feedback gevraagd en elkaar aangevuld zodat de assets 1 constante stijl houden.

Features

Mensenkenners hints

Ik heb gebruikgemaakt van het pop-up element dat al gemaakt was en deze gekoppeld aan het mensenkenners logo in de hoek van ons design. Elke keer als de gebruiker op dit logo klikt, komt er een pop-up tevoorschijn met een hint of tip. Om aan te tonen dat het logo klikbaar is komt er een animatie tevoorschijn die meer duidelijkheid geeft. In eerste instantie waren de hints alleen tijdens minigames. Later heb ik het aangepast dat elk scherm een hint/tip bevat.

Quotes

Ik heb uit interviews, originele training en video’s quotes gehaald die we konden laten zien aan het einde van elke minigame. Deze gaf dan namelijk meer context aan de gebruiker van waarom hij deze training volgt.

Ideation

Ik heb een groot deel van de minigames bedacht die huidig in ons product zitten of in skeletvorm als idee zijn meegegeven aan de opdrachtgevers. Daarbij heb ik ook de brainstorms geleid die we tijdens week 1 hebben gevoerd.

Ik heb de minigames bedacht voor: auditieve beperking, motorische beperking, spraakgebrek, visuele beperking a.d.h.v. de HCD opdracht van Dylan. Ik heb binnen module 1 op skelet niveau de minigames bedacht voor de introductie, opvallend uiterlijk, spraakgebrek, visueel en auditief. Voor module 3 heb ik de vijfde minigame bedacht over het verbeteren van toegankelijkheid op een werkplek.

Styling

Ik ben verantwoordelijk voor de styling van de checklist en de buttons die gebruikt worden voor de spraakgebrek minigame, de quotes, de eerste versie van de dialoogbox, de onderdelen van de auditieve minigame en de mensenkenners knop.

Algemeen

Aan andere onderdelen van dit project heb ik ook geholpen. Hier vallen dingen onder zoals merge conflicten oplossen, feedback geven op andere, achtergrond ontwerpen en code conventies opstellen.

Gewerkt aan leerdoelen

1: Ik wil mijn website correct responsive maken door gebruik te maken van de juiste styling en waar mogelijk zonder media-queries. Zodat mijn website er op alle schermen er goed uit blijft zien.

Gedurende dit project hebben we altijd gekeken naar het project als Mobile First. Dat houdt in dat we altijd ervoor hebben gezorgd dat het product goed werkt op telefoon en daarna pas hebben gekeken om het goed te maken voor desktop.

Ik zelf heb dit ook gedaan bij het maken van mijn verschillende minigames. Ik heb er eerst voor gezorgd dat alles correct gecentreerd op het scherm te zien was. Het was alleen niet heel vaak nodig om het op desktop anders te doen, daar was het ook gecentreerd. Ik heb wel voor de auditieve minigames de afstand tussen de twee kolommen geregeld dat ze netjes over de breedte zijn verdeeld. Ook voor de quotes heb ik ervoor gezorgd dat het er altijd eerst goed uit ziet op mobiel en gekeken tot welke breedte ik het maximaal horizontaal kan uitrekken zodat het er altijd nog steeds goed uit blijft zien.

Maar het grootste gedeelte van hoe ik aan dit leerdoel heb gewerkt gedurende de afgelopen periode is op mijn blog. Maar vanwege specifieke styling op dat blog was het niet vaak mogelijk zonder media-queries. Dat kwam nou eenmaal zo uit.

2: Ik wil mijn code netter opbouwen door mezelf minder vaak te herhalen, door gebruik van componenten en mijn CSS beter op te bouwen.

Voor verschillende onderdelen van het project ben ik verantwoordelijk geweest voor de styling. Maar voor elk van die onderdelen heb ik eerst gekeken of er andere onderdelen op de website waren die dezelfde styling nodig hadden. Zo had ik voor de spraakgebrek minigame mijn code zo opgesteld dat beide buttons dezelfde styling kregen, en dat het enige verschil dat ze hadden de kleuren waren. Beide dialoogboxen hebben ook dezelfde styling gekregen, deze is daarna alleen wel nog een beetje veranderd.

Maar ook het gebruik van astro heeft ervoor gezorgd dat ik minder snel code ging herhalen. Ik heb dan niet gewerkt aan de gehele infrastructuur, maar voor het opzetten van mensenkenners hints heb ik een nieuw component gemaakt voor de knop zelf die op elke pagina te zien is en heb ik gebruik gemaakt van het pop-up component die al bestond en heb daar steeds de content van aangepast. Zodat ik niet zelf een nieuwe soort pop-up hoef te maken.

Ook weer op mijn blog heb ik veel gebruik gemaakt van stukken code die voor meerdere onderdelen gebruikt konden worden. Dit geldt voor verschillende scripts, maar ook voor styling van de dpad en de andere soorten knoppen.

3: Ik wil mijn werk meer laten zien en om feedback vragen, zodat ik meer feedback krijg en daardoor mijn website kan verbeteren.

Gedurende het project heb ik veel om feedback gevraagd aan mijn teamgenoten. Al ging het om een idee, styling of een stukje functionaliteit . Ik heb bijna elke keuze die ik heb gemaakt steeds eerst aan mijn groepje voorgesteld voordat ik er verder mee ging.

Zo heb ik ook de assets voor de blind minigame samen met Dylan gemaakt en veel om feedback gevraagd zodat we onze assets in dezelfde stijl konden houden. Maar ook voor het gebaar voor “bedankt” heb ik meerdere malen om feedback gevraagd. Bij elke iteratie van dat gebaar hebben we het naar de opdrachtgever gestuurd voor verduidelijking en met de laatste versie heb ik het ook aan een ander team gevraagd. Dus niet alleen binnen het groepje heb ik om feedback gevraagd.

Aangezien ik voor mijn blog ook al een lange tijd bezig was, heb ik veel momenten gehad dat ik aan docenten zoals Sanne en Vasilis feedback kon vragen, zo heb ik na veel tijd van mijn bovenste scherm van de DS een iframe gemaakt, want dat leek Sanne een goed idee.

Meesterproef Reflectie

Ik ben zeer tevreden over het product dat wij hebben weten neer te zetten binnen een redelijk korte tijd. Tijdens de periode van vijf weken hebben wij namelijk als team een product gemaakt dat perfect aansluit op de opdracht die ons werd gegeven. We hebben de flow van hun training zo veranderd dat de gehele training een stuk korter werd, veel interactiever en vooral een stuk leuker. Ik heb veel kennis die ik tijdens mijn stage heb geleerd kunnen toepassen gedurende dit project. Het voelde bijna alsof ik steeds het advies kon geven over wat wel en niet handig is om in de training te doen.

Ik vind dat ik zeer goed heb gewerkt in dit team. De taakverdeling ging altijd goed, mensen vulden elkaar goed aan en er werd altijd duidelijk en goed gecommuniceerd. Er is niemand in het groepje geweest die specifiek minder heeft gedaan dan de rest. Gedurende het project heb ik me bezig gehouden met het maken van 2 van de 5 minigames. Omdat ik eenmaal meer ervaring had met dat soort code schrijven. Datzelfde geldt ook voor Dylan. Ik heb goed aan mijn leerdoelen kunnen werken en heb gemerkt dat ik daar echt in vooruit ben gegaan.

Als team waren we het alleen niet eens over het cijfer dat we hadden gekregen. Naar onze mening hebben we ons product gemaakt aan de hand van wat de opdracht was, en niet om te laten zien wat we geleerd hadden gedurende de minor. We hebben nagedacht over toegankelijkheid in de zin van dat het juist specifiek niet nodig was omdat de doelgroep expliciet mensen zonder beperking zijn en op mobiel gebruikt moest worden op kantoor. Waardoor we dus minder aandacht hebben besteed aan het toegankelijk maken en meer aandacht op het maken van een goed product. Wij hebben gefocust op het robuust maken zodat de opdrachtgever er makkelijker verder mee kan in eventueel een ander programma dat we hadden aangeraden tijdens de eindpresentatie.

Over het algemeen ben ik dus zeer tevreden over ons product zelf. De opdrachtgever was er namelijk zeer tevreden mee en gaf duidelijk aan dat ze daadwerkelijk met ons product en die van het andere groepje verder zouden gaan. Het enige wat blijkbaar beter had gekund is dat we meer hadden moeten laten zien van wat we hebben geleerd gedurende de minor en meer focus hadden moeten leggen op toegankelijkheid.