Development

Uiteindelijke leerdoel: De student kan een onderbouwde keuze maken voor een combinatie van front-end frameworks met als doel een ontwerp (plan van aanpak) en test van een applicatie te maken.

Frameworks

Waarom frameworks gebruiken?
Veel mensen keuren het gebruik van frameworks af, omdat het niet je eigen code is en omdat je een hoop code in je product gebruikt die nooit gebruikt word.

De meest genoemde redenen voor het gebruik van een frameworks zijn:

  • Het wiel is al uitgevonden.
  • Moeilijkste delen door experts.
  • Jij bent jack-of-all-trades.(de beginner tegenover de JS expert)

Wat zijn frameworks en waarom bestaan ze?
Javascript frameworks zijn kort door de bocht een hele hoop Javascript functies bij elkaar gepropt in één bestand. Deze functies kunnen dan worden gebruikt door de developer.

Veel frameworks zijn ontstaan omdat grote browsers bepaalde standaard functies van JS niet ondersteunden, of nog steeds niet ondersteunen. Door gebruik te maken van een JS frameworks zorg je ervoor dat je code op elke browser werkt.

Mijn gebruikte frameworks

Voor de presentatie hebben we presenteer.js gebruikt. Voor de oplevering van design (Digital Publishing) heb ik gekozen om reveal.js te gebruiken. Dit presentatie framework is wat mooier en fijner te gebruiken naar mijn mening. Het enige dat je hoeft te doen is reveal.js te includen en je html in te vullen. Deze bestaat uit sections met daarin weer sections.



Als front-end framework heb ik bootstrap gebruikt. Hier was ik al bekend mee, maar heb me hier verder in verdiept. Als ik er nu op terug kijk dan had ik liever nog naar een ander front-end framework gekeken zoals bijvoorbeeld Foundation om gezien te hebben hoe het ook op andere manieren kan.

In onze game hebben we gebruik gemaakt van jQuery. We hebben niet meer nodig gehad dan dit omdat we niet hele erge uitgebreide functies hebben. De functies die we gebruiken, hebben we gewoon zelf geschreven.

Library

Wat zijn libraries?
Een Javascript library is een ‘bibliotheek’ van voorgeschreven Javascript code die het developen van JavaScript-based applicaties makkelijker maakt. Een van de voornaamste redenen om een library te gebruiken is dat het makkelijk is om aan te leren en te gebruiken. Er wordt meestal gebruik gemaakt van een veel simpelere syntax, je kan met minder code hetzelfde resultaat behalen. Een nadeel van een library kan zijn dat het niet over de gewenste functionaliteiten beschikt. Hierdoor moet je zelf nog het nodige ‘pure’ JS code typen.

Eigen library
Voor mijn eigen library heb ik gekozen voor een onderdeel dat ik voor mijn propedeuse gemaakt heb. Dit onderdeel is te vinden onderaan de home pagina van de website. Als je over een list element heen gaat met je muis, veranderd de hoofdafbeelding. Het is een eenvoudige library. Mijn library heeft niet veel functies, maar ik heb wel geleerd hoe een library in elkaar zit.

Download de library (GitHub)

Wat kan er beter aan mijn library?
Zoals al eerder gezegd, is het een heel simpel script. Deze zou ik verder uit kunnen breiden met meerdere functies. Bijvoorbeeld de functie om niet alleen interactie met een hover te gebruiken maar ook met klikken. Het lijkt me heel interessant om te kijken of ik een uitgebreidere library kan bouwen.

Git

Korte uitleg
Git zoals dat op wiki mooi wordt beschreven;

“Git is een vrij gedistribueerd versiebeheersysteem. Het wordt ook wel een softwarebroncode-managementproject genoemd. De nadruk ligt op snelheid.

Iedere Git werkmap bevat de volledige repository met een compleet historisch overzicht en volledige trackingcapaciteiten. Git is niet afhankelijk van een gemeenschappelijke locatie of een centrale server zoals het 'Concurrent Versions System' (CVS) of Subversion (SVN).”

Mijn ervaring met git
Op internet las ik dat het verstandig was om ook de commands van git te kennen. Dit heb ik dus gedaan. Ik heb git via de terminal geïnstalleerd en een nieuw map op mijn computer aangemaakt waar ik de git map kon laden. Ik heb verschillende dingen geprobeerd om de meeste functies onder de knie te krijgen. Bekijk hier de cheatsheet dat ik heb gebruikt voor het leren gebruiken van de commands.

Toen ik dit onder de knie had, ben ik de desktop versie van git gaan gebruiken. Op deze manier werkt het sneller om je files te pullen en te pushen.



Ik heb git gebruikt tijdens het werken aan de website van de campagne. Git was hierbij een goed hulpmiddel en ik zal het vaker gaan gebruiken in de toekomst. Wel is het handig dat ik me nog iets meer ga inlezen in git, omdat ik merk dat ik nog wat achtergrondinformatie mis.

Voordelen die ik heb ervaren

  • Je kunt goed zien wie wat heeft gedaan
  • Je kan met meerdere mensen aan een project werken


Nadelen die ik heb ervaren
  • Je moet goed communiceren over welk bestand je aanpast/maakt, want anders worden er makkelijk fouten gemaakt

SEO

wanneerwat.nl
Voor het vak development kregen we de opdracht om een website te bouwen waar we goede SEO op zouden toepassen. Onze website zou het gaan opnemen in een “race” tegen de websites van andere proftaak groepen van semester 4. Deze race ging over het aantal bezoekers op de website. Om een groot aantal bezoekers te krijgen, is het belangrijk dat de website interessant genoeg is, en vooral makkelijk te vinden is.

We hebben gekozen om www.wanneerwat.nl te maken. Op deze website krijgen bezoekers een overzicht van alle belangrijke (en wat minder belangrijke) data en bijbehorende tijden. Bijvoorbeeld wanneer studiefinanciering wordt gestort en wanneer de volgende grote voetbalwedstrijden zijn.

Onderzoek
Natuurlijk is er bij SEO ook onderzoek nodig om je website zo optimaal mogelijk te maken. Onderzoek over de doelgroep en over SEO in het algemeen. Bijvoorbeeld tips en veelgemaakte fouten. Er waren een hoop lijsten met daarin veel en goede tips. Hier hebben we veel bruikbare dingen uit kunnen halen voor www.wanneerwat.nl.

We hebben onder andere op de volgende onderdelen gelet:

  • Zoekwoorden. Waar liggen de kansen, waar zullen mensen op zoeken als ze informatie zoeken die te vinden is op de website? De woorden heb ik bepaald op basis van eigen kennis.
  • De zoekwoorden komen terug in de content van de pagina, met name in koptekst. Veel zoekwoorden komen ook terug in een kort stukje tekst op de website zelf, en in de title tag.
  • Meta tags. Onder andere description, keywords, robots en author zijn toegevoegd. (later bleek dat de keywords tag niet door Google wordt gebruikt)

Google Tools (Search Console / Analytics)
Ook hebben we gebruik gemaakt van verschillende Google Tools. Onder andere de Search Console tool. Hierop kun je je website aanmelden (ook de verschillende URLs), welke je kunt koppelen met je Google Analytics account. In de Search Console krijg je belangrijke berichten over de SEO van je website, zie je fouten op de website en kun je een zoekanalyse uitvoeren. Ook hebben we gebruik gemaakt van de functie “gegevens markeren” in de Search Console. Deze functie laat je tekstelementen op je website markeren als bijvoorbeeld een datum of tijd. We hebben alle evenementen gemarkeerd, waardoor Google een beter overzicht heeft over de informatie op de website wanneerwat.nl

Google Analytics geeft een goed beeld over de doelgroep van je website. Ook krijg je een algemeen overzicht over de bezoekers. Hoeveel bezoekers krijgt je website, vanuit waar bekijken ze je website en op welke pagina kijken ze het meest? Dit laatste is niet van toepassing op wanneerwat.nl, aangezien deze website maar uit één pagina bestaat.




SEO check
Om onze website heel specifiek te analyseren op SEO toepassingen, hebben we gebruik gemaakt van de site www.seositecheckup.com. Hier krijg je een score tussen de 0 en 100, wat een indicatie geeft hoe goed SEO is toegepast op de website. Op het moment van schrijven krijgt wanneerwat.nl een score van 81. Wat erg fijn is aan de checkup site is dat je een lijst krijgt van SEO toepassingen, met daarbij of het op jouw website wel of niet (goed) is toegepast. Zo is het duidelijk dat de website geen sitemap heeft (omdat de site uit 1 pagina bestaat), maar wel een Robots.txt file en favicon heeft.



Bekijk hier het resultaat van de SEO check


De race
De race loopt nog steeds, maar dit is een recente screenshot van de overzicht pagina. We staan hier 7e van de 18 groepjes.



Strategy & concept

Uiteindelijke leerdoel: De student kan een communicatievraagstuk strategisch en conceptmatig oplossen op basis van methodisch onderzoek.

Brainstormen

Tijdens de workshops van SCO hebben we geleerd dat er veel verschillende manieren zijn om te gaan brainstormen. Bij brainstormen dacht ik eerst alleen aan een hoop ideeën bedenken en daarna kijken welke van de ideeën het beste is. Nu denk ik meteen na over welke techniek het beste past bij de opdracht. We hebben ongeveer 7 verschillende brainstorm technieken gebruikt, waarvan ik er 5 heb uitgewerkt;


Uit deze brainstorm-sessies hebben we natuurlijk de beste ideeën gehaald en deze gecombineerd tot 3 concepten. Toch was al snel de keuze gemaakt voor het (toen nog naamloze) concept met de 2 kamers en communicatiemiddelen.

Concept

Na het (lange) proces van brainstormen, konden we beginnen aan het sterk maken van ons concept. De basis van ons concept zijn vooral de communicatiemiddelen die de doelgroep van wederzijds begrip voorziet.

Het doel wat we met dit project voor ogen hebben is Anne’s verhaal vertellen op een manier die voor de doelgroep interessant is. We willen de situatie van Anne vergelijken met die van een vluchtelingenkind. Op deze manier zullen we herkenbaarheid creëeren bij beide partijen van de doelgroep. Uiteindelijk zal voor de kinderen duidelijk worden dat iedereen gelijk is en voor hetzelfde doel leeft; namelijk gelukkig worden.

Onze oplossing is een uniek spel dat op een tablet gespeeld wordt. Het spel zal verdeeld worden in twee ruimtes; één bestaat uit Anne’s kamer, en één bestaat uit de kamer van een vluchtelingenkind. In deze kamer zullen allerlei aanwijzingen verstopt zijn in de vorm van objecten en spelletjes.

Om een goed beeld te krijgen van de doelgroep, hebben we een aantal interviews afgenomen met middelbare scholieren. Deze waren allen rond de 14 jaar en hebben ons duidelijkheid gegeven over hun kennis en interesse in het project. De conclusie die we hieruit hebben kunnen trekken is dat de kennis bij deze groep minimaal is. De interesse in Anne Frank is ver te zoeken, en begrip voor de vluchtelingen is vrijwel niet aanwezig.

We hebben een pitch geschreven die kort uitlegt wat ons concept inhoud;
Om herkenbaarheid en begrip te creëren bij beide partijen van de doelgroep koppelen we de huidige realiteit aan de wereld van Anne Frank. Om die koppeling te realiseren maken de kinderen in het spel gebruik van oude en nieuwe communicatiemiddelen. Door de kinderen in kleine groepjes direct en indirect te laten samenwerken, leren zij spelenderwijs dat iedereen gelijk is en voor hetzelfde doel leeft; namelijk gelukkig worden.

Communicatiestrategie

Algemeen
De communicatiestrategie beschrijft op welke manier de doelstellingen van het communicatieplan worden bereikt. In het communicatieplan heb je de doelgroepen bepaald en per doelgroep doelstellingen opgesteld. Per doelgroep en bijbehorende doelstellingen wordt nu een communicatiestrategie gemaakt.

Eigenlijk bestaat onze communicatiestrategie uit twee delen; de leerlingen en de docenten. Eerst hebben we ons gefocust op de leerlingen, maar na onderzoek is gebleken dat ons product niet bij de leerlingen terecht komt tenzij het van de docenten af komt. Dus we zijn ons voor de campagne toch meer gaan richten op de docenten en schoolbestuur.

Lees hier ons document (nog wel gericht op de eerste doelgroep “leerlingen”)

Terugkijken op de communicatiestrategie
Het maken van een communicatiestrategie heb ik als zeer nuttig ervaren. Je kan een goede planning maken en je denkt goed na over hoe je iets wil brengen. Dit helpt ook bij het maken van je product. Echter kwam ik er wel achter dat het niet altijd gaat werken zoals je in gedachten had. Tijdens het onderzoeken naar de bereikbaarheid van de doelgroep kun je er achter komen dat je het op een andere manier kunt benaderen (andere communicatiemiddelen) of zelfs een andere doelgroep kunt kiezen. Je moet veel tijd steken in een communicatiestrategie en het is niet makkelijk om een goede communicatiestrategie te bepalen. Zeker in het beginstadium van een project is het lastig omdat je de doelgroep nog moet leren kennen en je sommige dingen gewoonweg nog niet weet.

Cross mediale campagne

Algemeen
Crossmedia zijn een middel om de belevenis van het mediaconcept tot zijn recht te laten komen. Bij een crossmediaconcept worden verschillende media ingezet. Door het gebruik van verschillende media wil de mediaproducent ervoor zorgen dat er meer interactie komt tussen zijn mediaconcept en zijn publiek.

Consistentie
Het is bij zo’n campagne ook heel belangrijk dat je consistent bent in zowel je producten als je communicatie. Hiervoor hebben wij een huisstijl gecreëerd die past bij onze doelstellingen.

Middelen
Bij de cross mediale campagne zetten we dus een aantal middelen in waarbij we sterk onze stempel drukken door de huisstijl. We hebben ons niet zo zeer gefocust op social media. Natuurlijk zetten we dit wel in als middel zodat we beter gevonden kunnen worden en mensen over ons product kunnen praten, maar we staan vooral voor het brengen van een online middel op een offline manier. Uit eigen ervaring bij de innovatieroute Education zijn docenten heel erg op zoek naar nieuwe en moderne middelen om hun les leuker te maken voor de leerlingen zonder dat het aspect ‘leren’ verloren gaat. Dit zoeken naar die middelen gaat meestal moeizaam, omdat ze zelf niet zoveel technische kennis hebben.

UX

Uiteindelijke leerdoel: De student kan werken volgens het User Centered Design Proces wat leidt tot werkende prototypen van interactieve mediaproducten.

Let’s start with UX

We beginnen bij het begin. Tijdens de eerste les UX kregen we opdracht om te beschrijven waarom je een goede UX designer bent en hoe je je gaat ontwikkelen om een betere UX designer te worden. Dit was wat ik toen schreef:

"Op dit moment houdt ik rekening met de gebruiker als ik in het proces zit van een project. Ik vraag veel feedback aan docenten die er verstand van hebben en ik vraag vaak aan mijn omgeving wat ze vinden van de producten die ik maak.

Ik ga meer onderzoek doen naar de gebruiker. Normaal ga ik snel uit van van vooroordelen zonder dat ik heb bewezen dat het ook anders kan zijn dan men denkt. Ook wil ik uit dit onderzoek sneller en beter conclusies trekken waarmee ik het te maken product echt kan verbeteren en passend maak voor de gebruiker."

Interviews

Interviews zijn een goede manier om de gebruiker vragen te stellen die kunnen helpen tijdens het proces van een product. Voor onze opdrachtgever heb ik dan ook een tweetal interviews gehouden om te gebruiken bij het proces van onze opdracht van DigitasLBI.

De doelgroep leren kennen
Voor de proftaak zijn Connie en ik naar mijn oude middelbare school geweest voor een interview. Dit interview heeft plaatsgevonden op het begin van de proftaak. We hebben het interview uitgevoerd zonder verdere kennis van UX.

Doel
Het voornaamste doel van het interview was het leren kennen van onze doelgroep. We wilden graag een aantal zaken weten van onze doelgroep die betrekking hadden op onze opdracht van DigitasLBI.

We wilden graag weten:

  • Het gebruik van social media onder onze doelgroep.
  • Heeft onze doelgroep enige kennis hebben van de tweede wereldoorlog (inclusief het verhaal van Anne Frank).
  • Speelt onze doelgroep games.


Hieronder de video van ons interview.

Terugblik
Als ik nu, een aantal weken en UX lessen verder, kijk naar dit interview dan zie ik meteen een aantal fouten waar ik toen nog geen benul van had. De vragen waren niet goed genoeg en de reacties van ons waren nog te gericht op wat we zelf graag wilden horen. We hebben geleerd tijdens de lessen om juist de doelgroep vrij te laten praten zodat je misschien ook achter dingen komt waar je zelf nog niet aan had gedacht. Ook kwamen de meeste leerlingen in tweetallen, wat achteraf ook niet zo heel slim was. De leerlingen konden elkaar helpen of beïnvloeden en dat was bij dit soort interview niet nodig. De bovenstaande punten hebben me achteraf veel geleerd en ik weet nu hoe ik het de volgende keer zal gaan doen. Ondanks die paar fouten, hebben we hier ook een aantal punten uit gehaald waar we tijdens de proftaak echt wat mee konden.

Prototyping

Prototyping is bedoeld om je product te testen bij je doelgroep om deze in het proces steeds te blijven verbeteren. Deze manier van testen vind ik persoonlijk leuker dan de interviews, omdat je bij het prototypen ook echt aan de slag kunt met je product en deze precies zo kunt maken dat deze zo goed mogelijk is voor de doelgroep.

Hieronder een aantal prototypes:


Wat voor UX’er ben ik op dit moment?
Ik ben naar mijn eigen mening gegroeid in het vakgebied UX. Ik heb nu theoretische kennis en onderbouwing voor de testen die ik gebruik om mijn producten te verbeteren. Ik heb een veel beter beeld gekregen van wat UX nu eigenlijk is, wat de mogelijkheden zijn en vooral het belang is van UX. Het is echt een uitdaging om je product zo te maken dat het voor de gebruiker een perfect product wordt. Ik ga alles wat ik geleerd heb van UX, meenemen in alle projecten die nog gaan komen en wil me er nog veel verder in verdiepen.

Toekomst
Een techniek die ik nog heel graag nog wil gaan gebruiken is eye tracking. Als je dit toepast op de juiste producten kan dit veel opleveren in mijn ogen. Tijdens de proftaak of mijn innovatieroute zag ik daar bij onze producten nog niet echt het nut van in. Dit is iets wat ik eventueel op stage of later in de opleiding wil gaan gebruiken.

Scrum

Uiteindelijke leerdoel: De student kan de methodiek Scrum uitleggen en toepassen op de ontwikkeling van een mediacampagne.

Scrum

Scrum is een flexibele manier om producten te maken. Er wordt gewerkt in multidisciplinaire teams die in korte sprints, met een vaste lengte van 1 tot 4 weken, werkende producten opleveren. Scrum is een term die afkomstig is uit de rugbysport. Bij een scrum probeert een team samen een doel te bereiken en de wedstrijd te winnen. Samenwerking is heel belangrijk en men moet snel kunnen inspelen op veranderende omstandigheden. Scrum wordt vaak gebruikt bij producten waarvan de klant c.q. gebruiker nog niet goed weet wat hij wil en waarbij men al doende leert om de eisen en wensen beter te beschrijven en in bruikbare producten om te zetten. Vaak weet men pas wat men wil als men het eerste product, het prototype, ziet en dan worden alsnog de eisen aangepast. Scrum heeft de flexibiliteit om met laat wijzigende eisen en wensen om te gaan.


Proces



Tijdens de introductie van scrum was ik zeer benieuwd hoe dit framework tijdens ons project zou gaan verlopen. Als eerste hebben een Trello account aangemaakt, maar daar hebben we eigenlijk niks mee gedaan. Trello heb ik bij een eerder project al vaker gebruikt. In plaats daarvan hebben we gebruik gemaakt van het bord in het klaslokaal. Dit is bij mij beter bevallen dan Trello en dan vooral om het feit dat het offline is. Je hoeft niet steeds naar Trello te gaan om even op het scrumboard te kijken.

De project owner is één persoon en dat was binnen dit project Arjan (ook een beetje DigitasLBI). Youri was onze scrum master, hij leidde het scrum proces en was de verantwoordelijke van dit scrum proces. Hij heeft ervoor gezorgd dat dat iedereen bij zijn of haar taak bleef en dat deze ook van goede kwaliteit waren voor onze Deliverable.

De user story hebben we alleen op het begin geschreven en daarna hebben we vooral gewerkt op de feedback die we kregen van de opdrachtgever. Als ik erop terugkijk, was het misschien handiger geweest om ook nog eens te kijken naar de user story’s om een beter product voor de doelgroep te realiseren.

De sprint backlog hebben we op een creatieve manier nog op ons bord weten te plaatsen. Boven het bord met de kolommen hebben we weer vakken met de naam van de sprint (sprint 0, sprint 1, etc.) geschreven en alle taken die klaar waren bij de desbetreffende sprint geplakt. Dit was heel handig, want op deze manier kon je makkelijk nog even terugkijken wat er al gedaan was in de vorige sprint(s).



De daily scrum meeting die bij scrum hoort hebben we niet elke dag gedaan. Meestal was het wel duidelijk wie wat aan het doen was en dit controleerden we ook van elkaar. Ik zou graag nog een keer met scrum willen werken om de daily scrum wel elke dag te doen en te proberen of dat beter zou werken. De daily standup hebben we alleen gedaan met Arjan en dus ook niet elke dag. Dit hebben we vooral bij de laatste sprints gedaan. Ik merk dat er dan een actieve houding ontstaat bij alle groepsleden zodat alles goed besproken kan worden.

Sprint reviews hebben we aan het eind van elke sprint gehouden in de vorm van een presentatie bij DigitasLBI in Amsterdam. Hierna volgde de sprint retrospective die we op school met de groep deden om de feedback van de opdrachtgever te verwerken. Dit gebeurde meestal de dag na de sprint review.


Terugblik
Ik heb scrum ervaren als een nuttig hulpmiddel tijdens een project. Het helpt om alle taken gestructureerd naast elkaar te zetten die ook echt betrekking hebben op je project. Het verdelen van de taken gaat daarom ook goed. Dit zijn dan ook de meest nuttige functies en dus voordelen van scrum. Een nadeel van scrum is dat het redelijk wat tijd kost om er mee om te leren gaan. Dat komt omdat je niet alleen een nieuwe werkwijze met nieuwe technieken moet aanleren, maar vooral omdat agile een andere mindset vergt dan in traditionele projecten. Omdat we niet alle scrum functies gebruikt hebben, lijkt het me een uitdaging om deze tijdens een volgend scrum project wél in te zetten.