Issuu on Google+

Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

1


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Colofon Uitgever Bram van der Giessen (0835926) Lede 73 3075HG Rotterdam 0622250616 Bramgiessen2@hotmail.com http://www.bramgiessen.nl

Stage bedrijf De Pannekoek en De Kale Calandstraat 5a Rotterdam http://www.dpdk.nl Bedrijfsbegeleider: Kees Verburg

Schoolinstantie Hogeschool Rotterdam Wijnhaven 99 3011 WN Rotterdam 010 794 6600

Opleiding Mediatechnologie Stagebegeleider Emiel Bakker

2


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Voorwoord Beste Lezer, De afgelopen vier maanden heb ik stage mogen lopen bij De Pannekoek en De Kale waar ik mijn tijd op de webdevelopment afdeling heb doorgebracht. Ik ben hier terecht gekomen in een team van drie andere developers, waar ik dus de vierde persoon van ben geweest de afgelopen maanden. Ik weet nog dat ik voor deze stage begon dacht al veel te weten over mijn vakgebied, maar wรกt zat ik er naast zeg. In de relatief korte tijd van vier maanden heb ik echt enorm veel kunnen leren en ik heb hele grote sprongen kunnen maken. Bijna alle kennis van de eerste twee jaar van mijn opleiding heb ik in de praktijk kunnen toepassen. In mijn stage zocht ik diversiteit, ik wilde zo veel mogelijk van mijn vakgebied zien en te weten komen en dit is meer dan gelukt. Waar veel van mijn medestudenten slechts aan een handje vol projecten heeft kunnen werken tijdens zijn of haar stage, heb ik de kans gekregen om aan maar liefst twaalf verschillende projecten mee te werken waarvan twee grote projecten zelfs (bijna helemaal) van begin tot eind. Tijdens deze projecten heb ik met alle afdelingen binnen DPDK te maken gehad en samengewerkt, wat ik erg fijn vond. En dan was er nog de sfeer, welke ook gewoon top was. Elke vrijdag een biertje en de mogelijkheid om lange te blijven en nog samen te borrelen en over van alles en nog wat te praten. Ik wil iedereen binnen DPDK heel erg bedanken voor de fijne en leerzame tijd. Het was hard werken en ik heb weinig momenten gehad waarop ik niets zat te doen maar juist daardoor is het mogelijk geweest om zoveel te leren in zo een korte tijd. Graag wil ik mijn eigen team nog speciaal noemen: Team 1000 bestaande uit Antwan, Jon en Amanda. Van jullie heb ik zo ontzettend veel geleerd, jullie stonden altijd open voor vragen en hebben nooit geschroomd me te helpen, enorm bedankt daarvoor!

Bram van der Giessen

3


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Inhoudsopgave Inhoud Colofon ..................................................................................................................................................2 Voorwoord .......................................................................................................................................... 3 Inhoudsopgave .................................................................................................................................. 4 Inleiding ................................................................................................................................................ 7 Hoe bij DPDK terecht gekomen ......................................................................................................... 7 Verslag indeling .................................................................................................................................. 7

Over De Pannekoek en De Kale .................................................................................................... 8 Korte geschiedenis: ............................................................................................................................ 8 core-bussiness: ................................................................................................................................... 8 Afdeling: .............................................................................................................................................. 9

Stage opdracht ................................................................................................................................. 10 Werkzaamheden ............................................................................................................................... 10 Projecten: ........................................................................................................................................... 10 Werktijden ..........................................................................................................................................11

Leerdoelen ......................................................................................................................................... 12 Competenties .................................................................................................................................... 12

De eerste week ................................................................................................................................. 14 Kennismaken ..................................................................................................................................... 14 Drupal!................................................................................................................................................ 14

Project 1 : Colgate Sample Tab..................................................................................................... 16 Mijn taken in dit project .................................................................................................................... 16 Uitvoering .......................................................................................................................................... 16 Leermomenten .................................................................................................................................. 17 Competenties .................................................................................................................................... 18 Vakinhoudelijke competenties ..................................................................................................... 18 Programmabrede competenties .................................................................................................. 18

Project 2: Box Electronics .............................................................................................................. 19 Mijn taken in dit project .................................................................................................................... 19

4


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Uitvoering ......................................................................................................................................... 20 Leermomenten ..................................................................................................................................27 Competenties ................................................................................................................................... 28 Vakinhoudelijke competenties .................................................................................................... 28 Programmabrede competenties ................................................................................................. 28

Project 3: Little Alice Dashboard ................................................................................................ 30 Mijn taken in dit project ................................................................................................................... 30 Uitvoering ......................................................................................................................................... 30 Leermomenten ................................................................................................................................. 34 Competenties ................................................................................................................................... 35 Vakinhoudelijke competenties .................................................................................................... 35 Programmabrede competenties ................................................................................................. 35

Project 4: KNMP Kennisbank .......................................................................................................37 Mijn taken in dit project ....................................................................................................................37 Uitvoering ..........................................................................................................................................37 Leermomenten ................................................................................................................................. 38 Competenties ................................................................................................................................... 39 Vakinhoudelijke competenties .................................................................................................... 39 Programmabrede competenties ................................................................................................. 39

Overige projecten ........................................................................................................................... 40 MassiveMusic ................................................................................................................................ 40 Waterstoringen............................................................................................................................. 42 Haagse Hogeschool Summerschool ............................................................................................ 43 Competenties ................................................................................................................................... 45 Vakinhoudelijke competenties .................................................................................................... 45 Programmabrede competenties ................................................................................................. 45

Stageterugkomdagen ................................................................................................................... 47 Eerste terugkomdag...................................................................................................................... 47 Tweede terugkomdag ................................................................................................................... 47 Derde terugkomdag ...................................................................................................................... 47 Vierde terugkomdag ..................................................................................................................... 47

MEDMEO Lessen ............................................................................................................................. 48 Reflectie ............................................................................................................................................. 49

5


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

De toekomst .................................................................................................................................. 50

Typisch DPDK ..................................................................................................................................... 51 Chemistries ..................................................................................................................................... 51 DPDkofffie ........................................................................................................................................ 51 Webdev’s .......................................................................................................................................... 51

Bronnen ...............................................................................................................................................52 Programma’s ....................................................................................................................................52 Drupal ...............................................................................................................................................52 PHP Functies .................................................................................................................................... 53 Overig............................................................................................................................................... 53

Bijlage .................................................................................................................................................. 55 Links naar alle projecten ................................................................................................................. 55 API Onderzoek voor het Little Alice dashboard prototype .......................................................... 56 Beoordeling bedrijfsbegeleider ....................................................................................................... 61

EVALUATIE BEDRIJFSBEGELEIDER: ........................................................................................... 61 Professionaliteit................................................................................................................................. 61 Beroepsvaardigheden ...................................................................................................................... 63 Feedback ........................................................................................................................................... 65

Beoordeling bedrijfsbegeleider (gescand) ............................................................................. 67 Zelfevaluatie formulieren ............................................................................................................. 70

6


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Inleiding Gedurende ongeveer 17 weken heb ik 40 uur per week stage gelopen bij het bedrijf ‘De Pannekoek en De Kale’ , in de periode van 2 september tot en met 24 december 2013. Ik vond dit erg spannend, want dit was voor mij de eerste keer dat ik ooit stage ging lopen en ik had verder ook geen werkervaring in het beroepenveld van mediatechnologie. Voordat ik aan mijn stage begon had ik mijzelf aan de hand van wat ik de eerste twee jaar van mijn opleiding heb geleerd en waar mijn interesses lagen een beeld gevormd van wat ik allemaal hoopte te gaan leren en hoe het zou zijn om in een echt bedrijf mee te gaan werken. Ik heb me er van te voren wel even druk over gemaakt hoe ik dit allemaal moest gaan doen maar dit bleek totaal overbodig aangezien ik zonder twijfel kan zeggen dat alles vanzelf op zijn plaats viel en ik mijn plaats binnen het bedrijf al vrij snel gevonden had.

Hoe bij DPDK terecht gekomen In het tweede jaar van mijn opleiding was het de bedoeling om zelf een stage te vinden. Dit hield dus in dat er afspraken gemaakt moesten worden, gesolliciteerd moest worden en er een stageplan opgesteld moest worden. Ik wist al ver van te voren dat ik een positie van backend developer wilde vervullen en hier ben ik dan ook naar op zoek gegaan. Om een zo compleet mogelijk beeld te krijgen en om wat vergelijkingsmateriaal op te bouwen ben ik bij vijf verschillende bedrijven op gesprek geweest, waarbij DPDK de laatste was. Ondanks dat ik bij meerdere bedrijven was aangenomen, heb ik ervoor gekozen om bij DPDK stage te gaan lopen omdat zij het meest pasten bij wat ik zocht. Meteen na het eerste kennismakingsgesprek in mei had ik al een heel positief gevoel. Mijn eerste gedachten waren: Er werken veel jonge mensen, de projecten waaraan gewerkt wordt zijn divers en bieden genoeg uitdaging en ik kwam er achter dat er een oud-leraar (Antwan van der Mooren) van mij werkt. Dit laatste puntje is interessant om te noemen aangezien ik in jaar 1 van mijn opleiding les van Antwan heb gehad en ik wist dat hij veel kennis heeft als backend developer. Ook had Antwan het wel eens over het bedrijf waar hij werkte tijdens de lessen en hierdoor wist ik zeker dat DPDK het beste op mijn leerdoelen aansloot.

Verslag indeling Dit verslag is geschreven in chronologische volgorde wat ervoor zorgt dat dit verslag een doorlopend verhaal is. Er zal op de verschillende leermomenten en competenties worden ingegaan waarbij ik steeds zal verwijzen naar bijlagen zoals onderzoeken en verschillende onderdelen van projecten waar ik aan gewerkt heb. De nadruk ligt op het behandelen van de verschillende competenties, echter zal er ook op projecten apart ingegaan worden.

7


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Over De Pannekoek en De Kale Korte geschiedenis: Dpdk is begonnen in het jaar 2000 met 2 mannen, Ferry en Rolf wiens bijnamen “de pannekoek en de kale� waren. Zij zijn in de loop van de jaren aangevuld met Pim, die de directie compleet maakt. Deze oprichting en begin jaren waren in Rotterdam in een eigen pand. Vanaf 2005 tot en met 2007 is het bedrijf doorgegroeid naar een bedrijf met 15 werknemers. En sindsdien zijn er steeds meer vaste werknemers op het gebied van communicatie, flash, web en design aangenomen. Deze periode vond plaats in het de periode tot 2009 toen het bedrijf nog in Dordrecht gevestigd was. In de periode 2007 t/m 2009 werd de groei steeds groter en inmiddels werken er ongeveer 40 mensen. Dit was ook de reden voor dpdk om terug te keren naar Rotterdam, en wel aan het huidige pand aan de Calandstraat.

core-bussiness: "Dpdk maakt sociaal, innovatief en relevant werk voor kleine en grote merken. We leveren digitaal maatwerk van idee tot eindproduct en altijd met focus op het behalen van doelstellingen. Onze gespecialiseerde kennis stelt ons in staat alles te ontwikkelen wat we bedenken." - Aldus DPDK zelf.

DPDK is een full-service internetbureau welke projecten aanneemt en van idee tot eindproduct onder eigen dak ontwikkeld. Ze werken voor een enorme verscheidenheid aan klanten, en maken voor deze klanten onder andere Facebook campagnes, (native) mobile apps, mobile games, webapplicaties en websites met content management systeem en meer. Tevens werken ze bij DPDK met AGILE ontwikkelmethodieken waaronder SCRUM. Een duidelijke omschrijving van de werkzaamheden binnen DPDK kan gevonden worden in de onderstaande illustratie:

(DPDK corebusiness)

8


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Afdeling: Bij dpdk hebben we verschillende afdelingen, namelijk: communicatie (zij regelen het contact met de klant), creatie (hier worden de concepten bedacht en uitgewerkt tot een product met design), web development (hier worden de door creatie bedachte websites en facebook apps gemaakt, hier loop ik dan ook stage) en mobile / game development (zij maken de mobiele applicaties en games). Ik zal mijn tijd bij DPDK voornamelijk doorbrengen als lid van het webdevelopment team als backend programmeur. Hier zal ik het programmeren van de back-end van verschillende webapplicaties en websites op mij zal nemen. Zelf heb ik al aangegeven dat ik ook graag de mogelijkheid zou krijgen om aan native apps te werken voor smartphones, en wanneer deze mogelijkheid zich voordoet als er geschikte projecten zijn dan zal ik tevens ook meedraaien in het mobile team binnen DPDK.

9


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Stage opdracht Voordat ik mijn stage opdracht ging opstellen heb ik een stageplan geschreven. Na mijn eerste dagen bij DPDK heb ik dit stageplan erbij gepakt en met dit stageplan in het achterhoofd ben ik toen gaan werken aan een overzicht met hoe mijn stage er in grote lijnen uit zou gaan zien. Aangezien DPDK afhankelijk is van haar klanten en de wensen die deze klanten hebben om projecten te kunnen starten bestaat mijn stage opdracht omschrijving dan ook uit meerdere verschillende projecten.

Werkzaamheden Mijn werkzaamheden binnen DPDK tijdens mijn stage zullen zeer uitgebreid en afwisselend zijn, en ik zal werken aan meerder competenties tijdens mijn stage. Ik zal veel gaan werken met PHP, dan wel Object Georiënteerd en binnen verschillende ontwikkel frameworks waaronder het content management system Drupal. Ook zal ik gaan werken met verschillende API's waaronder die van Facebook in de talen XML en JSON voor bijvoorbeeld social media campagnes en zal ik heel veel tijd besteden aan het eigen maken van verschillende javascript frameworks. Ik zal minimaal één project van begin tot eind meemaken en dus alle verschillende ontwikkelfases doorlopen en van binnenuit kunnen meemaken. Zo zal ik niet alleen aan het programmeren zijn maar zullen ook zaken als onderzoeken, testen, communicatie met verschillende afdelingen en samenwerken in teamverband tot mijn taken behoren.

Projecten: Ik zal voornamelijk bezig zijn als backend developer voor verschillende projecten. Welke projecten dit precies zijn is nu (aan het begin van mijn stageperiode) nog niet te voorspellen omdat DPDK hierbij afhankelijk is van welke klanten en projecten er aangenomen worden. Andere tussenprojecten en werkzaamheden zullen zijn: Verschillende facebook acties en apps, werken met verschillende API’s, functionele demo’s bouwen ter inspiratie en voor nieuwe insights, usability research, usability testing, functional & technical design en ik zal veel tijd besteden aan het leren van goed gestructureerd programmeren. Een voorbeeld van hoe het verloop van een project eruit ziet: Het begint bij het eerste contact met de klant over een mogelijke opdracht. Vervolgens wordt er door de producers met het development team overlegd of alle wensen van de klant uitvoerbaar zijn en wordt er een inschatting gemaakt hoeveel tijd dit ongeveer zou kosten. Hierna volgt er een terugkoppeling met de klant door de producers. Als er besloten wordt om het project aan te nemen en er een overzicht is gemaakt van de eisen dan ga ik samen met mijn scrumteam een overzicht maken van de scrumpunten die bij de eerste sprint van het project komen kijken, en we maken ook direct een inschatting van de tijd die we voor elk punt nodig denken te hebben. Deze scrumpunten zijn userstories die over het algemeen duidelijk vertalen om welke functionaliteit het gaat, maar soms wordt de story nog voorzien van een extra omschrijving om de userstory te ondersteunen.

10


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Hierna start de ontwikkelfase, we communiceren binnen het team over de userstories en iedereen is constant van elkaar op de hoogte met wat hij of zij bezig is op dat moment doordat we gebruik maken van het online scrumboard ‘Jira’. Wij als development team krijgen de designs aangeleverd van ofwel de designafdeling binnen DPDK, ofwel van de klant zelf en wij werken zo samen met de front-end developer in ons team naar dit design toe. Aan het einde van iedere sprint wordt er uitgebreid getest door zowel onszelf als development team als door de testers binnen DPDK. De uitslagen van deze tests worden weer vertaald naar nieuwe user stories en als ook deze uitgevoerd zijn vind er een terugkoppeling plaats met de klant. Zo worden projecten in meerdere sprints verdeeld waarbij er steeds na een sprint terugkoppeling plaats vind met de klant en er gezamenlijk naar het eindproduct toegewerkt wordt. Het is dus zeer goed mogelijk dat de eerste opdracht omschrijving van een project gaandeweg nog bijgesteld wordt door nieuwe wensen van de klant.

Werktijden Ik werk 5 dagen in de week van 09:00 tot 18:00. Dit betekent dat ik mijn stage in 17 weken kan afronden en dat de stageperiode dus zou lopen van tot en met 24 december 2013. Er van uitgaande dat ik 2 September begin, en bovenstaande tijden werk. Tijdens deze periode zijn er ook een aantal “stageterugkomdagen” op school gepland waarbij ik aanwezig zal moeten zijn (ongeveer 1 per maand). De bijbehorende stagevergoeding voor het 5 dagen in de week stagelopen met bovenstaande uren bedraagt €300 netto.

11


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Leerdoelen Wat ik graag wil leren tijdens mijn stage is hoe het precies in zijn werk gaat in het echte bedrijfsleven. School bootst delen na, maar de echte ervaring kan nooit compleet worden ervaart. Ik wil meer gestructureerd leren programmeren en nieuwe technieken leren waarmee het stagebedrijf ook werkt. Tijdens mijn stage zal ik veel gaan werken met PHP en het framework Drupal. Ik heb nog nooit met een PHP framework gewerkt en ik vind het daarom zeer interessant om daar eens in te duiken. Hetzelfde geldt voor de javascript frameworks BackboneJS & UnderscoreJS. Verder zou ik, mocht de mogelijkheid zich voordoen, graag kennis maken en werken met een innovatief OOP framework. Over alle bovengenoemde onderwerpen wil ik een stukje kennis van hebben opgesnoven voor het einde van mijn stageperiode. Als ik mijn stage met een voldoende afrond en mijn stagebegeleider tevreden over mij is, is dat een teken dat ik voldaan heb aan alle gestelde criteria.

Competenties Hieronder staat per competentie wat ik wil leren en / of aan mijn eigen kunnen wil verbeteren en hierbij staat steeds ook een stukje met welke deliverables ik hiervoor zal opleveren:

-

Analyseren Oplevering: probleemanalyse, doelgroepanalyse, risicoanalyse en een pakket van eisen Adviseren Hoe kan ik mijn kennis inzetten om een goed advies uit te brengen voor de uitwerking van een product? Hierbij wil ik mij met name richten op de onderbouwing. Oplevering: compleet adviesrapport (aan het bedrijf)

-

Technisch ontwerpen Oplevering: prototype, Interface / interactie ontwerp, database ontwerp, technisch ontwerp, taakbeschrijving (omschrijving van mijn eigen taken binnen het bedrijf zoals in deze stageopdrachtomschrijving)

-

Realiseren Opleveren: Interactieve website, webservices, webapplicatie en indien mogelijk mobiele applicatie

-

Oplevering opleveren : technische documentatie, gebruikershandleiding (indien nodig), eindproduct en begeleidende demonstratievideo.

-

Usability onderzoek Opleveren: vragenlijst, onderzoeksopzet, taakscenario's, onderzoeksrapport, verbetervoorstellen.

12


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

-

Communiceren Ik zou graag meer leren over hoe de communicatie met een opdrachtgever werkt en hoe de behoeften van deze opdrachtgever in kaart kunnen worden gebracht. Verder: Opleveren: Sollicitatiebrief, vergadering notulen, presentaties, onderbouwingen Organiseren Hoe kan ik beter bijhouden wat er gedaan moet worden voor een project en wat mijn vordering hierin is? Ook wil ik graag leren een betere inschatting te maken van hoeveel werk iets gaat zijn en wat kan ik er aan doen als ik hierin fout blijk te zitten. Ik zal gaan werken met SCRUM, en ik wil graag leren om hier efficiënt mee om te gaan en ervaring op te doen met SCRUM binnen professionele grote teams met meerdere disciplines. ○ weekplanning ○ gedetailleerde planning ○ Scrumboards

-

Samenwerken Ik zou graag meer willen leren over het samenwerken in een groot project met meerdere disciplines. Hierbij zou ik mij met name willen richten op de afstemming en het onderling begrip tussen mijzelf en anderen met een andere taak. Ook zou ik graag de samenwerking meemaken met iemand die meer kennis heeft van mijn vakgebied. Hoe gaat deze persoon hiermee om en wat kan ik er van leren? Verder: ○ mijn eigen sterktes en zwaktes in kaart brengen en die inzetten voor het team ○ kritiek incasseren ○ positieve bijdrage leveren aan de teamspirit ○ ruimte geven voor de ideeën van anderen ○ samenwerken in een multidisciplinair team Opleveren: Verslag en reflectie op de samenwerking

-

Ondernemend ○ juiste resources vinden en inschakelen ○ uitdagende doel kunnen formuleren ○ meerdere taken naast elkaar uit kunnen voeren ○ risico's inschatten ○ proactieve houding, initiatief tonen ○ doorzettingsvermogen Opleveren: Verslag en reflectie op mijn ondernemingen

-

Onderzoeken ○ De visie kennen van waaruit het product is ontstaan ○ Geïnteresseerd zijn in het actuele debat zoals dat word gevoerd in de wereld van Opleveren: Onderzoeksrapporten met bijbehorende resultaten

13


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

De eerste week Maandag 2 september, vandaag is het zo ver, de eerste stagedag van mijn leven! Ik had afgesproken om om 9 uur aanwezig te zijn om rustig op te starten met een bak koffie en een verdere kennismaking met mijn bedrijfsbegeleider Kees Verburg. Omdat ik nog niet precies wist hoe lang ik over de rit van mijn huis naar stage zou doen ben ik uit voorzorg extra vroeg vertrokken, wat er voor zorgde dat ik een half uur te vroeg was. Gelukkig was het mooi weer en ben ik een halte eerder uitgestapt waardoor ik om tien voor negen bij DPDK aankwam. Eenmaal binnen heb ik samen met Kees een rondje door het gebouw gemaakt en heb ik iedereen alvast een keer kunnen zien en kort kunnen spreken. Toen we bij het bureau aankwamen waar ik zou gaan werken zag ik Bas van Manen zitten, een oud klasgenootje van me waarmee ik het eerste jaar van mijn opleiding in de klas heb gezeten. Een leuke verrassing. Even de spullen uitpakken en mijn bureau inrichten en toen volgde de kennismaking met mijn team: Jon te Riele en Antwan van der Mooren, twee backend developers en Antwan is tevens een oud-leraar van me. Ook Amanda van Noordenne zit in dit team en vervult de functie van front-end developer. Met zijn vieren vormen wij team1000. Op mijn bureau lag een blaadje met instructies klaar om de eerste dagen mee bezig te zijn, het ging hier vooral om het downloaden van software en het instellen van verschillende ontwikkelomgevingen.

Kennismaken Na de kennismaking met mijn team en het inrichten van mijn werkplek was het tijd om kennis te maken met de rest van de stagiaires. Samen met Kees en de 5 andere stagiaires hebben we in de kantine nog wat gedronken en hebben we algemene informatie over het bedrijf besproken. De vijf andere stagiaires die in dezelfde periode stage zullen lopen zijn: Gerben – Usability engineer, Rik – Usability Engineer, Tintin – Design, Suzanne – Interface designer en Bas, die ook een backend stagiair is. Na deze kennismaking volgde onze eerste DPDKoffie, een wekelijks terugkerende meeting waarop iedereen in het bedrijf samenkomt en de planning wordt besproken met eventueel een kop koffie. Omdat dit onze eerste DPDKoffie was kregen alle stagiaires de kans om zich voor te stellen aan iedereen in het bedrijf. We hebben allemaal een kort verhaaltje verteld over onze opleiding en wie we zijn en wat we komen doen. Na deze eerste dag had ik even de tijd nodig om goed door te krijgen hoe alles binnen het bedrijf precies in elkaar stak. Bij wie moet ik zijn met welke vragen? Gelukkig ging dit vrij snel en ook mijn computer had ik vrij snel ingericht om aan de slag te kunnen.

Drupal! Ik heb nog nooit echt met een framework gewerkt, of onderdelen ontwikkeld voor een CMS dus toen ik voor het eerst kennis moest maken met het content management systeem dat over het algemeen binnen DPDK gebruikt wordt was dit wel even slikken. Woensdag, dag drie van mijn stage, had ik alles helemaal ingesteld en was ik up to date dus was het tijd om eens te bekijken hoe ik mijn entree in het team kon gaan maken. Dit is toen ik voor het eerst met Drupal kennis maakte. Drupal is een content management systeem, een systeem dat we kunnen gebruiken als basis voor een website om de content van de website te beheren.

14


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

We bouwen als het ware een uiterlijk en eventuele extra functies om dit systeem heen om zo een website te realiseren die de klant voor ogen heeft en waarvan de inhoud via een administratie interface te beheren is. Ik zal eerlijk zijn, Drupal is een hele andere manier van programmeren dan ik gewend was en dit vind ik vrij lastig. Alle functionaliteiten die we specifiek voor een klant bouwen, bouwen we in zogenaamde ‘modules’. Een module is bedoeld om een specifieke functionaliteit aan het systeem toe te voegen, zo ben ik deze week bijvoorbeeld begonnen met een contactpage module. Deze contactpage module zal ervoor zorgen dat er een linkje aan het hoofdmenu van de site zal worden toegevoegd naar de contactpagina, welke ook volledig door deze module verzorgd wordt. Deze modules kun je vervolgens in het administratiepaneel van Drupal heel eenvoudig aan of uit zetten. Deze manier van programmeren is dus helemaal nieuw voor mij en het zal nog wel een aantal weken kosten om deze manier helemaal eigen te maken. Ik zal in de omschrijving van de verschillende projecten nog verder op Drupal en mijn ervaringen hiermee in gaan.

15


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Project 1 : Colgate Sample Tab Het eerste project waar ik aan gewerkt heb begon aan het einde van mijn eerste week. Het project heet Colgate Sample Tab en is een facebook actiepagina voor Colgate. Het gaat hier om een simpele pagina met een aanvraagformulier voor een tube tandpasta tester. Over deze pagina ligt een zogenaamde likegate, dit is een laag die over de pagina heen ligt en pas verdwijnt als je de facebookpagina van in dit geval Colgate ‘geliked’ hebt op facebook.

Mijn taken in dit project De Colgate Sample Tab actie stond al online en er moesten een paar kleinen aanpassingen gedaan worden, welke ik op me ging nemen. Er kwamen bij Colgate een hoop formulieren binnen waarin het postcodeveld niet was ingevuld of waar een onjuiste postcode was ingevuld. Dit was tevens de eerste keer dat ik met mijn producer Suzanne te maken kreeg; zij heeft mij gevraagd om validatie in het formulier te bouwen zodat er geen lege velden meer konden worden opgestuurd en ook geen onjuiste postcodes.

Uitvoering Ik heb aan mijn teamleden gevraagd hoe ik een project vanaf de ontwikkelomgeving op mijn eigen computer kon krijgen zodat ik op mijn lokale omgeving aan het project kon werken.

Nieuwe werkwijze De manier om dit te doen was voor mij helemaal nieuw, want dit gaat door middel van het ‘uitchecken’ van de ‘repository’ van het project via SVN (Subversion) vanaf de development server die we hebben binnen DPDK. Deze manier van werken zorgt voor versiebeheer, wat een absolute vereiste is wanneer je in teamverband werkt en eigenlijk ook wanneer je alleen aan een project werkt. Alle wijzigingen die je maakt aan een project qua code ‘commit’ je naar de SVN server. Wat je dan doet is dat je jouw code upload naar de server als een nieuwe versie van het gewijzigde bestand, en je dus altijd terug kunt vallen op een vorige versie van de code mocht er later blijken dat de nieuwe versie van de code toch niet helemaal naar verwachting werkt. Eenvoudig gezegd betekende dit voor mij dat ik nog wat instellingen moest goed zetten binnen mijn ontwikkelomgeving van PHPStorm waarna ik heel simpel kon inloggen op de development server en de laatste versie van het Colgate Sample Tab project voor mij werd gedownload op mijn computer waarna ik ermee aan de slag kon. Iedere keer als ik een wijziging heb gemaakt in de code, getest heb of deze wijziging goed werkt in alle browsers en de code netjes heb voorzien van commentaar en de juiste opmaak dan zal ik mijn werk vanaf nu gaan ‘committen’ naar de SVN development server.

16


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Nadat ik het project eenmaal lokaal had staan kon ik aan de slag om validatie in te bouwen. Ik heb dit al eens eerder gedaan dus ik begon zelfstandig te werken en had uiteindelijk een stukje code in native javascript geschreven die zowel het email veld als het postcode veld controleerde op juistheid, en controleerde of alle velden waren ingevuld. Als feedback aan de gebruiker had ik ervoor gekozen om bijvoorbeeld teksten als ‘dit veld mag niet leeg zijn’ in de velden te plaatsen wanneer een gebruiker een veld leeg liet. Toen ik de code af had en het naar mijn mening goed werkte heb ik aan Jon gevraagd of hij even mee wilde kijken om de code samen door te lopen. Hier heb ik meteen al veel geleerd want wat Jon aangaf was dat het niet erg gebruiksvriendelijk was om bijvoorbeeld teksten als ‘dit veld is niet juist ingevuld’ in een veld te plaatsen van een formulier als de gebruiker bijvoorbeeld een onjuiste postcode heeft ingevuld aangezien de gebruiker deze tekst nu zelf weg moet halen en opnieuw een postcode moet typen. Ook was het zaak dat ik in plaats van native javascript voortaan ging werken met JQuery, een javascript library die binnen DPDK altijd gebruikt wordt in plaats van native javascript. Deze library zorgt ervoor dat je gemakkelijker met de HTML en CSS van een pagina kunt praten en met minder code dan wanneer je dit met native javascript doet. Vervolgens heb ik samen met Jon nog wat gedachten uitgewisseld over wat het meest gebruiksvriendelijk is voor de eindgebruiker qua feedback wanneer de velden in het formulier niet of onjuist worden ingevuld. Na met Jon gesproken te hebben heb ik alle code ‘refactored’ zoals we dit vaak noemen. Refactoren wil zeggen dat je de code herstructureert of in dit geval ombouwt om alle native javascript te vervangen voor JQuery. Hierdoor werd mijn code een stuk overzichtelijker en korter. Hierna heb ik de feedback van Jon over de gebruiksvriendelijkheid verwerkt en is het eindproduct een formulier geworden dat pas verzonden wordt als alle velden juist zijn ingevuld. Als een veld niet of onjuist is ingevuld dan komt hier een rood lijntje omheen en wanneer een veld helemaal leeg is gelaten komt hier de tekst ‘Dit veld mag niet leeg zijn’ in te staan. Als een gebruiker vervolgens dit lege veld selecteert dan verdwijnt deze tekst meteen en kan hij of zij het lege veld invullen. Dit heb ik vervolgens nog eens aan Jon laten zien waarna ik mijn werk heb gecommit naar de development server waarvandaan Jon het vervolgens live heeft gezet. Mijn laatste taak was om Suzanne hierover in te lichten en toen zat dit project er voor mij op.

Leermomenten Ondanks dat Colgate Sample Tab maar anderhalve dag duurde was het toch een project met veel leermomenten en de ideale manier om mijn stage te beginnen. Het eerste leermoment zat hem al in het lokaal halen van het project vanaf de development server. Om dit te doen moest ik voor het eerst leren werken met subversion, iets wat gedurende mijn hele stage terug zal komen aangezien er bij alle projecten met dit principe gewerkt wordt. Het tweede leermoment zat hem in het feit dat ik zelf was begonnen met werken en achteraf alle native javascript code moest refactoren naar JQuery. Het is lastig om dit van te voren al te weten maar hierdoor heb ik wel mijn kennis over JQuery weer opgefrist. Ten slotte zat er nog een groot leermoment in het communiceren met mijn teamleden. Ik heb achteraf dingen moeten aanpassen omdat deze niet gebruiksvriendelijk waren, zoals de manier waarop feedback wordt gegeven aan de gebruiker wanneer deze een verkeerde postcode opgeeft bijvoorbeeld. Als ik deze zaken van te voren met mijn team had besproken had dit niet nodig geweest.

17


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Competenties Tijdens dit project heb ik kunnen werken aan de volgende competenties: Vakinhoudelijke competenties Analyseren: Omdat het project Colgate Sample Tab al live stond moest ik voordat ik ermee aan de slag kon om mijn eigen code hieraan toe te voegen eerst analyseren hoe het project was opgebouwd en hoe de code gestructureerd was. Alleen op die manier kon ik weten hoe ik mijn code passend kon schrijven zodat deze de juiste opbouw had en in de juiste plaatsen werd opgeslagen. Realiseren: Ik heb de code getest in alle browsers waarvoor het script moet werken, daarnaast heb ik gebruik gemaakt van de javascript library JQuery en heb ik het vooraf uitgedachte idee uitgewerkt met hier en daar feedback van mijn teamleden. Opleveren: Aan het einde van dit project heb ik een validatiescript opgeleverd die het aanvraag formulier voor proefmonsters van Colgate tandpasta controleerde op juistheid van de invoer. De code is voorzien van het juiste commentaar en gestructureerd op de wijze zoals deze bij DPDK verwacht wordt. Programmabrede competenties Communiceren: Ik heb veel geleerd in dit project wat betreft communicatie. Vooral doordat ik achteraf nog een hoop moest aanpakken heb ik geleerd dat ik voortaan beter van te voren al mijn twijfels kan uitspreken en met mijn team kan bespreken. Verder heb ik met Jon gedachten uitgewisseld over de gebruiksvriendelijkheid van de validatie waarbij ik actief heb geluisterd en mijn mening naar voren heb gebracht. Samenwerken: Ik heb mijzelf actief ingezet om feedback te ontvangen. Zo heb ik meerdere malen mijn producer aangesproken over de planning en heb ik Jon en Antwan meerdere malen gesproken over hoe ik mijn code opgezet had en waar verbeteringen mogelijk waren en wat er verwacht wordt van mij. Organiseren: Ik heb voor mijzelf van te voren een planning gemaakt om overzichtelijk te krijgen wat ik allemaal zou moeten gaan doen en hoe lang ik hier ongeveer mee bezig zou zijn. Het duurde soms wat lang voordat ik ergens uit kwam maar ik heb wel steeds om hulp gevraagd als ik iets niet begreep. Ondernemend: Zelf ben ik aan de slag gegaan, zonder steeds mijn twijfels uit te spreken. Dit heeft ervoor gezorgd dat ik tijdens dit relatief korte project toch veel geleerd heb. Ik heb weliswaar fouten gemaakt maar juist door het maken van die fouten en die fouten in te zien en niet te laten escaleren door geen hulp te vragen leer je zo ontzettend veel.

18


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Project 2: Box Electronics Box Electronics is een website welke gebouwd wordt in opdracht van Displayyourbusiness. Displayyourbusiness is een officiële partner van Samsung en de website is bedoelt voor resellers van Samsung Displays. Deze resellers kunnen zich aanmelden en krijgen dan een reseller account voor de website waarna zij grote partijen beeldschermen kunnen bestellen. Er zijn zeven verschillende sectoren binnen de website, te noemen: Onderwijs, Zorg, Horeca, Hotel, Kantoor, Show en Retail. Verder zijn er nog een aantal losse pagina’s zoals de contactpagina, de nieuwspagina en de pagina’s met informatie over de resellers en disclaimer. Dit project is meertalig (Nederlands en Engels) wordt gerealiseerd in het Drupal7 CMS en is een langlopend project van meerdere sprints en verliep volledig volgens de SCRUM methode met behulp van het online scrumboard Jira.

(Website Box Electronics)

Mijn taken in dit project Dit project is langlopend en ik heb aan dit project meegewerkt vanaf ongeveer de derde week dat dit project liep tot aan het einde van dit project. In totaal heb ik van 2 september tot en met 8 november fulltime meegewerkt aan dit project, waardoor ik erg veel heb kunnen doen en leren. Ik ben begonnen met het onderzoek doen naar en oefenen van het CMS Drupal 7. Hiervoor heb ik stukken uit de boeken gelezen over Drupal die we hebben binnen DPDK, heb ik tutorials gevolgd en heb ik vooral veel geoefend met de code die mijn team al had geschreven voor het project. Toen ik Drupal wat beter begreep heb ik de taak gekregen om een contactpagina op te zetten, eerst heel simpel en geleidelijk werden er steeds meer functionaliteiten aan deze pagina toegevoegd door mij. Vervolgens heb ik een groot gedeelte van de nieuwspagina op mij genomen, het gaat hierbij om een pagina waar nieuwsitems op geplaats kunnen worden via het

19


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

administratiepaneel in het CMS. Als er op een nieuwsitem gedrukt wordt dan moet het desbetreffende nieuwsitem in een detailpagina geopend worden. Verder heb ik aan verschillende andere pagina’s en functionaliteiten meegewerkt, welke ik hieronder ga beschrijven.

Uitvoering Zoals ik al zei ben ik begonnen met het volgen van tutorials, het lezen van boeken en vooral veel oefenen om mij zo snel mogelijk genoeg kennis eigen te maken om met dit project aan de slag te kunnen. Hier ben ik de eerste twee weken fulltime mee bezig geweest. Ik heb hierbij vaak twijfels gehad of ik al klaar was om echt te gaan beginnen, maar pas als je begint zie je dat je er echt in komt en alles min of meer vanzelf gaat.

Mastering Drupal Na veel oefenen en onderzoek ben ik aan de slag gegaan met mijn eerste punt, de contactpagina. In het begin deed ik nog niet heel erg mee met het scrumboard dat voor dit project was opgezet omdat ik eerst veel met mijn team gewerkt heb en ik nog geen punten zelf kon oppakken uit het scrumboard omdat Drupal simpelweg nog te lastig was voor mij. Ik liep vooral de eerste weken tegen een hoop punten en leermomenten aan, de volgende aspecten van Drupal heb ik eerst moeten leren en hier kwam ik tijdens het werken aan de contactpagina mee in aanraking.

Structuur Het eerste wat opvalt is de structuur van het project. Er zijn ontzettend veel mappen en ontzettend veel submappen met soms dubbele namen op verschillende plekken en meerdere bestanden die je op meerdere plekken in het project terug ziet komen. Met veel van deze mappen heb je weinig mee te maken omdat deze tot de zogenaamde ‘core’ van Drupal behoren, hier zal je dan ook nooit tot bijna nooit in werken. De map die echter wel erg belangrijk is, is de modules map.

Modules Het tweede waar ik achter kwam bij het werken aan dit Drupal project is dat alle functionaliteiten van de website zijn opgedeeld in zogenaamde modules. Deze modules verzorgen elk een aparte functionaliteit en kunnen in het administratiepaneel eenvoudig aan of uit gezet worden en er kunnen afhankelijkheden ingesteld worden. Ook wanneer je een nieuwe functionaliteit, in dit geval dus een contactpagina, aan een website toe wilt voegen dan doe je dit door hier een module voor aan te maken. Dit denken in modules, alle bestanden die je aan moet maken voor een module en het niet vergeten om een module aan te zetten nadat je hem gemaakt hebt heeft veel tijd gekost om vertrouwd mee te raken. Naast het maken van eigen modules is het ook mogelijk om modules te downloaden van bijvoorbeeld de enorme Drupal community. Deze community deelt modules met elkaar en door de omvang van deze community zijn er zo ongelofelijk veel modules gemaakt dat je een Drupal website in theorie zo in elkaar zou moeten kunnen klikken zonder ook maar één module zelf te

20


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

schrijven. Wij willen echter geen website die volledig op modules van anderen berust is aangezien wij veel custom functionaliteiten schrijven die specifiek voor een klant zijn bedacht. Echter maken wij ook zeker gebruik van een aantal zogenaamde ‘contributed’ modules, modules die dus van het web komen en door andere mensen zijn gedeeld. Dit zijn de modules die basisfunctionaliteiten bieden die DPDK in veel projecten gebruikt.

Hooks Ik was gewend om binnen PHP met functies te werken, je klikt ergens op en een functie wordt aangeroepen en op die manier wordt de interactie tussen gebruiker en systeem afgehandeld. Binnen Drupal werkt dit helemaal anders. Binnen Drupal heb je de zogenaamde ‘Hooks’, dit zijn binnen Drupal vastgelegde functienamen die uitgevoerd worden op vastgelegde momenten. Hooks beginnen altijd met de naam van de module, gevolgd door de naam van de Hook. Zo heb je bijvoorbeeld de Hook views_pre_render, als je deze Hook in je module opneemt wordt deze module uitgevoerd voordat de module een view probeert te renderen. Zo zijn er nog enorm veel andere Hooks waarvan je er steeds een hele specifieke nodig hebt. Dit was voor mij erg lastig omdat ik geen idee had welke Hooks er precies zijn en dus ook veel moeite had om naar specifieke Hooks te zoeken in de documentatie van Drupal. Gelukkig heb ik hier veel hulp bij gehad vanuit mijn team en zo rol je er vanzelf in. Je moet er een beetje gevoel voor krijgen, dan lukt het zoeken naar de Hooks ook steeds beter en uiteindelijk kon ik veel Hooks zelf vinden. Voordat ik een speciale Hook ging gebruiken die ik zelf gevonden had en niet eerder had gebruikt riep ik vaak Jon of Antwan er even bij om te controleren of het ook daadwerkelijk een geschikte Hook was of niet. De code hiernaast is een voorbeeld van een Hook_theme, en een mooi voorbeeld van een Hook. Zoals te zien is wordt wanneer deze Hook wordt aangeroepen een andere functie aangeroepen waarin de bijbehorende logica staat.

Views Nog een belangrijk en veel gebruikt principe binnen de Drupal projecten binnen DPDK zijn views. Hiervoor is een zogenaamde views module geïnstalleerd binnen het Drupal project, en dit is trouwens ook meteen een perfect voorbeeld van een contributed module. Met een view is het mogelijk om data uit de database op te halen en vervolgens deze view te tonen op de website. Zo zou je een about view kunnen maken waarin alle about informatie van een website opgehaald wordt en getoond wordt op de website. Tevens is het mogelijk om met een view data op te halen uit een database en deze view aan te spreken in een module om zo de opgehaalde data eerst te

21


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

bewerken voordat deze getoond wordt. Views zijn een erg complex onderdeel van Drupal en bieden een enorm scala aan mogelijkheden. Vele van deze mogelijkheden heb ik gedurende dit project nodig gehad en heeft veel tijd gekost om ze allemaal te vinden en mee leren om te gaan.

Blocks Het vierde grote punt wat ik gedurende dit project eigen heb moeten maken is het blocks principe. Binnen Drupal maakte ik voor de contactpagina zoals ik eerder al zei een module. Deze contactpagina module bevat alle functionaliteiten die ik maak voor de contactpagina. Om de functionaliteiten en inhoud van de contactpagina te tonen wordt er binnen Drupal gebruik gemaakt van zogenaamde blocks. Elke los te noemen functionaliteit binnen de contactpagina wordt opgedeeld in een block. Zo heb ik de contactpagina opgedeeld in een contact-headerblock, een contact-maps-block en een contact-footer-block. Meteen interessant om hierbij te noemen is de naamgeving van deze blocks, deze hebben namelijk altijd de naam van de module gevolgd door een inhoudelijke beschrijving en afgesloten met het woordje ‘block’. Deze blokken bevatten dus de inhoud waarvoor ze bedoeld zijn en niets meer of minder. Zo bevat de header block alleen informatie uit de database die betrekking heeft op wat er in de header moet staan, de maps block bevat een google maps map met contactlocaties enzovoort.

Features Features is het laatste grote en veel herhalende principe dat ik ga behandelen over Drupal. Features zijn kortgezegd een verzameling van instellingen. Dit is handig want zo kun je bijvoorbeeld een contactfeature maken waarin alle instellingen staan die belangrijk zijn voor de contactpagina. Zo kun je in deze instellingen aangeven dat de contactmodule vereist is om deze feature te activeren, de permissies meegeven die nodig zijn voor de contactpagina en nog een heleboel andere instellingen. De verschillende content types kun je ook in een feature zetten, wat er in het voorbeeld van de contactfeature voor zorgt dat de content types die bij de contactpagina horen mooi in de contactfeature ingepakt worden. Features zijn dus eigenlijk pakketjes waarin alle verwijzingen, instellingen, content types en views die bij een functionaliteit horen, staan. Features kun je vervolgens exporteren en delen. Dit delen van features was een fenomeen wat dagelijks meerdere tientallen keren binnen mijn team gebeurde. Als iemand bijvoorbeeld een content type, veld, view of andere onderdelen van de website aanpaste binnen het Drupal CMS(dus niet binnen code), dan werd de desbetreffende feature ook automatisch aangepast. Dit is logisch want alle verwijzingen, instellingen, content types en views staan in de verschillende features. Wat er gebeurde als we een feature met de rest van het team delen is dat die feature bij de rest van het team de status ‘overridden’ krijgt. Dit betekent dat er iets binnen de feature is veranderd en je kunt dan een overzicht van de wijzigingen bekijken. Dit overzicht is het verschil van hoe jou feature er uit ziet tegenover hoe de feature er uit ziet na de wijziging van je teamgenoot. Als je denkt dat deze wijziging klopt dan kun je de feature met een klik op de knop ‘reverten’ naar de wijzigingen die je teamgenoot heeft gemaakt. Voilá, nu heb je alle instellingen, views, en andere eigenschappen die je teamgenoot heeft toegevoegd of gewijzigd. Al de bovenstaande punten waren compleet nieuw voor mij en het heeft me echt veel tijd gekost om hier enigszins vertrouwd mee te raken, de basis is gezet maar in volgende Drupal projecten zal ik nog zoveel meer leren. Drupal is groots, enorm zelfs.

22


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Eigen initiatief Voor de contactpagina was het de bedoeling om een google maps kaart te tonen met daarin markers voor alle locaties van de Box Electronics kantoren. Als je op de contactgegevens van ieder van de onder de kaart staande kantoren klikt, dan zou de google maps kaart naar de bijbehorende marker moeten verspringen. Ik heb zelf aangegeven dat het misschien ook mooi zou zijn, als wanneer een gebruiker de google maps kaart sleept en een marker komt in beeld, dan de bijhorende contactgegevens actief worden en dus van kleur veranderen, waardoor je ziet dat die bij de marker die nu op de kaart zichtbaar is horen. Dit vond mijn team een goed idee en hier ben ik toen naar gaan onderzoeken. Na wat onderzoek gedaan te hebben naar de google maps API heb ik een manier gevonden om te bepalen wanneer een bepaald punt, in dit geval een marker op de kaart, in beeld komt. Hierna heb ik de koppeling geschreven om een CSS klasse aan de contactgegevens die bij de marker horen, toe te voegen. Dit heb ik gecommuniceerd naar Amanda en zij heeft met behulp van deze klasse een kleurtje aan de contactgegevens toegevoegd waardoor je als eindresultaat de contactgegevens mooi zag verspringen wanneer de marker, die bij die gegevens horen, in beeld kwam op de google maps kaart.

BackboneJS & UnderscoreJS

Binnen alle grote projecten binnen Team1000 wordt gebruik gemaakt van BackboneJS en automatisch ook UnderscoreJS aangezien BackboneJS op UnderscoreJS berust. BackboneJS is een javascript framework dat het MVC principe naar javascript brengt. MVC staat voor Model View Controller en eigenlijk zijn de View en de Controller uit het MVC principe samengenomen in BackboneJS dus houd je eigenlijk allen de M en de C over. Het MVC principe wordt gebruikt om logica (controller) te scheiden van de data (model) en de grafische weergave (view) . Ook zorgt het gebruik van dit principe voor een grote verbetering in de leesbaarheid van je code. Het werken met BackboneJS is geleidelijk gegaan voor mij, aangezien ik eerst mijn javascript code voor de contactpagina had opgezet zoals ik dit gewend was, en dit later heb omgebouwd naar de structuur zoals die verwacht wordt door mijn team waarbij ik gebruik maakte van BackboneJS. De views die je maakt bij BackboneJS sluiten perfect aan op het blokkensysteem van Drupal. Binnen Drupal heb ik bijvoorbeeld het contact-maps-block gemaakt met daarin de google maps kaart. Deze kaart moet voorzien worden van markers op basis van locatiegegevens dus is er javascript voor nodig. Deze javascript kun je heel gemakkelijk aan dit blok koppelen door een Backbone view aan te maken voor dit blok met daarin alle javascript code die hoort bij dit blok. Deze view kun je dan met een speciaal hiervoor bedoelde Drupal_add_js functie toevoegen aan het blok binnen de module waarna je de elementen in het blok kunt aanspreken in je javascript code.

23


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

(De architectuur van Backbone, inclusief MVC principe van Backbone)

Samenwerken Bij het werken aan de contactpagina van Box Electronics is het samenwerken in teamverband onvermijdelijk geweest en het is dan ook gebleken hoe belangrijk het is om goed met elkaar te communiceren. Bij het werken aan de contactpagina ben ik verantwoordelijk geweest voor de technische oplevering waarbij ook de juiste inhoud van de pagina vanuit het CMS op de pagina getoond wordt. Wanneer ik mijn werk af heb is er nog geen opmaak of styling over de pagina heen gelegd, dit doet Amanda namelijk aangezien zij de front end developer in ons team is. Wat ik in het begin niet helemaal door had is hoe belangrijk het is om goed te communiceren, in het algemeen is dit natuurlijk al belangrijk maar wanneer je afhankelijk bent van elkaars werk al helemaal. In het begin van dit project bouwde ik mijn werk op naar hoe het in mijn eigen ogen het meest logisch was en bruikbaar voor Amanda om te stylen volgens het aangeleverde design. Ik vergat te communiceren met Amanda over hoe zij het werk opgeleverd wilde hebben en wat voor haar nu echt het meest handige was qua opbouw. Dit zorgde in het begin dan ook voor wat lastige situaties waarbij ik vaak achteraf nog een hoop aan moest passen zodat Amanda hier mee verder kon om te stylen. Geleidelijk aan ging dit steeds beter en vroeg ik vaak aan Amanda hoe zij

24


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

dacht over de opbouw van bepaalde elementen en paginaonderdelen, wat ervoor zorgde dat ik veel minder achteraf nog aan hoefde te passen.

Nieuwspagina Bij het ontwikkelen van de nieuwspagina wist ik al een hoop meer over Drupa , BackboneJS en de andere ontwikkelstandaarden van mijn team. Hierdoor was het gemakkelijker om met de nieuwspagina van Box Electronics aan de slag te gaan. Ik kon vanaf hier ook al zelf punten oppakken vanuit het scrumboard, wat ik persoonlijk erg fijn vond. Nu kon ik zelf bekijken wat er allemaal gedaan moest worden en punten uitkiezen om op te pakken, vaak overlegde ik dit nog wel eerst met mijn team of dit ook echt daadwerkelijk een geschikt punt zou zijn voor mij. Bij de nieuwspagina wilde de klant een pagina waarbij het mogelijk was om nieuwsberichten via het CMS in te voeren waarna ze op de site moeten worden vertoond. Hierbij moet het mogelijk zijn om de nieuwsberichten te filteren en sorteren op datum en titel. Tevens moet er gekozen kunnen worden om nieuwsberichten alleen op de Nederlandstalige of Engelstalige versie van de website te vertonen.

Content Types Standaard zit er geen mogelijkheid in Drupal om nieuwsberichten toe te voegen aan de website, dus is het aan mij de taak om deze feature te bouwen. Dit begint bij het maken van een zogenaamde contenttype binnen Drupal. Een contenttype is een verzameling van velden, in dit geval een verzameling van invoervelden zoals een titel, een nieuwsberichtomschrijving, een uploadveld om plaatjes aan het nieuwsbericht toe te voegen enzovoort. Dit alles doe je in Drupal zelf, en hier komt dan ook nog geen code bij kijken. Vervolgens heb ik een view aangemaakt die alle velden van een blogbericht toont voor in het nieuwsoverzicht. Binnen een view is het mogelijk om filteropties in te stellen, hier heb ik gebruik van gemaakt om de filters op titel, datum en aantal nieuwsitems per pagina in te stellen. Tot slot heb ik de nieuwsitemmodule geschreven die ervoor zorgt dat er via een Hook_menu een link naar de nieuwspagina getoond wordt in het hoofdmenu op de site en in het administratiepaneel. Hiermee stond de basis van de nieuwspagina, waarna ik na over en weer contact met Amanda nog wat dingen heb aangepast die voor haar nodig waren om de pagina goed te kunnen stylen.

Verdieping in Javascript Naast het verdiepen in Drupal door middel van het bouwen van de contactpagina en de nieuwspagina, heb ik ook veel losse werkzaamheden aan andere pagina’s van Box Electronics gedaan. Bij deze werkzaamheden ging het ook om het schrijven en aanpassen van code binnen het Drupal CMS, maar voor een veel groter deel ging het bij deze werkzaamheden om javascript code. Zo heb ik leren werken met de javascript plugin Waypoints.js, welke ik gebruikt heb voor de pagina met algemene informatie over de verschillende categorieÍn van Box Electronics. Deze plugin zorgt ervoor dat het heel simpel mogelijk wordt om functies te binden wanneer je naar een bepaald element scrolt op de webpagina.

25


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Een stukje code ter illustratie van hoe dit in de praktijk gaat: $('.elementWaarNaartoeGescroltWordt').waypoint(function(direction) { alert('Bovenkant van element heeft de bovenkant van de viewport van de browser bereikt.'); });

Zoals te zien wordt er op het psuedo element .elementWaarNaartoeGescroltWordt de functie waypoint aangeroepen, welke als parameter een anonieme functie meekrijgt die eventueel ook weer een parameter mee kan krijgen met de richting waar naartoe gescrold wordt (up/down/left/right). De anonieme functie bevat de functionaliteiten die moeten worden uitgevoerd wanneer het element waarop de waypoint functie wordt aangeroepen de bovenkant van de viewport van de browser heeft bereikt. Deze plugin heb ik op aanraden van Antwan gebruikt, nadat ik eerst mijn eigen code voor deze functionaliteit had geschreven. Deze plugin is erg lightweight en had daardoor ook de voorkeur boven mijn eigen code. De plugin heb ik gebruikt om ervoor te zorgen dat er in het submenu knopjes verspringen wanneer je naar het bijbehorende element scrolt dat bij het knopje in het submenu hoort. Verder moest er op de productenpagina voor de mobiele versie van de website een custom pager gemaakt worden. De pager op de desktop versie van de website toont alle pagina nummers, aangezien hier ruimte voor is op een groot scherm. Op de kleinere mobiele schermen kunnen maximaal 4 paginanummers getoond worden. In javascript heb ik ervoor gekozen om het aantal paginanummers te tellen en het probleem als volgt op te lossen. Als je op pagina 1 t/m 4 van de producten bent, dan ziet de pager er uit als <<1 2 3 4 >>. Zodra je op pagina 5 of hoger komt dan ziet de pager er uit als <<1 2 .. 4 5 >> en dit gaat zo door tot aan de laatste paginaâ&#x20AC;&#x2122;s. Als je op de laatste vier paginaâ&#x20AC;&#x2122;s aanbeland dan ziet de pager eruit als bijvoorbeeld << 1 .. 8 9 10 >>, je kunt dus altijd heel gemakkelijk terug naar pagina 1.

Testen Heel belangrijk is dat er bij het opleveren van functionaliteiten en producten steeds uitvoerig getest wordt en dat dit werkt zoals de klant dit wil. Dit betekent dat je na het bouwen van een functionaliteit steeds test of dit werkt in alle browsers, en of dit werkt op de verschillende platformen zoals tablet en mobile. Ook heb ik tests uitgevoerd voor functionaliteiten die door mijn teamleden zijn gemaakt, en de uitkomsten van deze tests heb ik gedocumenteerd. Verder in de projecten kwam de usability stagiair Rik steeds meer inspringen om nog eens uitvoerig te testen nadat wij onze code zelf al getest hadden. Rik had toegang tot ons sprintboard en kon zo precies zien wat wij als team gemaakt hadden, vervolgens communiceerden we aan Rik precies hoe we verwachtten dat wat wij gemaakt hadden zou functioneren. Rik ging vervolgens uitvoerig testen of hier geen onverwachte dingen gebeurden en communiceerde met ons als dit wel zo was. Zo hebben we veel bugs en fouten op kunnen lossen en staan al deze bugs gerapporteerd in de vorm van taken in onze sprintboards.

26


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Leermomenten Box Electronics is een langlopend project geweest van meer dan twee maanden. Tevens was dit mijn allereerste project waarbij ik ging werken met Drupal en BackboneJS, heb ik samengewerkt in een multidisciplinair team en heb ik moeten communiceren met verschillende afdelingen binnen DPDK. Dit alles heeft er voor gezorgd dat ik enorm veel heb kunnen leren in mijn eerste twee maanden van mijn stage. Ik heb al best diep kunnen gaan met Drupal, zo heb ik geleerd over modules, blocks, views, structuur, contenttypes en features. Tevens heb ik leren werken met het javascript framework welke de MVC structuur voor het eerst voor mij introduceerde binnen javascript. Daarnaast heb ik plugins voor het eerst gebruikt als waypoints.js en mijn kennis over JQuery enorm kunnen uitbreiden. Dit alles is in samenspel gegaan met een dosis communicatie, het vragen om hulp wanneer dit nodig was en een enorme hoeveelheid eigen onderzoek en oefening. Ook het structureren van mijn code op de juiste en leesbare manier en het secuur werken is er ingeramd omdat je gewoon niet zonder kunt wanneer je in teamverband werkt waarbij andere mensen met jouw code verder moeten werken. Het project Box Electronics heeft mij de kans gegeven om aan mijn communicatieve vaardigheden te kunnen werken. Bij iedere beslissing die ik gemaakt heb, ieder probleem waar ik tegenaan liep, heb ik moeten communiceren hoe ik dit op zou gaan lossen en waarom. Tevens heb ik veel gerichte vragen moeten formuleren en steeds aan mijn teamleden moeten voorleggen aangezien het leren van Drupal in zo een korte tijd een enorme opgave is die ik in mijn eentje nooit had kunnen volbrengen. Tijdens dit project is mijn inzicht in het werken met een CMS enorm vergroot en hierdoor heb ik later in het project ook zeker actief mee kunnen denken over functionaliteiten en mogelijke oplossingen voor problemen alhoewel dit laatste nog steeds een hoop meer kennis vereist die ik in de komende projecten ongetwijfeld zal opdoen.

27


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Competenties Tijdens dit project heb ik kunnen werken aan de volgende competenties: Vakinhoudelijke competenties Usability onderzoek: Nadenken vanuit het perspectief van de gebruikers van het CMS. Welke functionaliteiten heeft de administrator van Box Electronics straks nodig, hoe komen de formulieren er uit te zien om content aan de website toe te voegen, wat voor mensen zijn het die de website straks moeten gebruiken? Actief meedenken en ideeën hierover uitwisselen met mijn teamgenoten. Usability Engeneering: Er vond constant terugkoppeling plaats met de klant via de producers. Er werd meerdere keren met de producer doorgenomen wat er gemaakt was en hierbij werd er getoetst of dit aan de wensen van de klant en eindgebruiker voldeed. Ook mijn eigen werk werd door mijn teamgenoten vaak getoetst en al deze input heb ik constant verwerkt in mijn eindproducten. Tevens heb ik de klant steeds voor ogen gehad bij het realiseren van onderdelen binnen het CMS, dus aan de achterkant van de website. Analyseren: Complexe situaties en problemen heb ik vaak uitgetekend en overzichtelijk gemaakt. Er heeft enorm veel analyse plaatsgevonden bij het leren van Drupal en BackboneJS. Hierbij heb ik de code van mijn teamleden, uit tutorials en fora geanalyseerd. Analyseren van verschillende API’s waaronder de Google maps en Geocode API’s. Realiseren: Het implementeren van de google Maps API op de contactpagina, het implementeren van de Google Geocode API om adresvelden om te zetten naar coördinaten, het implementeren van de Waypoints plugin op de informatiepagina’s. Het toepassen van het javascriptframework BackboneJS. Het ontwikkelen van meerdere modules en functionaliteiten binnen het Drupal CMS. Het testen van al mijn werk in meerdere browsers en op meerdere platformen voordat ik iets oplever. Opleveren: Het opleveren van de contactpagina en nieuwspagina en een aantal losse functionaliteiten binnen het project. Al deze onderdelen zijn door mij getoetst op correctheid in zowel usability aspecten als de functionele eisen die aan deze onderdelen gesteld werden. Programmabrede competenties Communiceren: Het werken in een multidisciplinair team waarbij communicatie plaatsvond over functionaliteiten met twee backend developers en een front-end developer. Hierbij zijn ideeën over en weer uitgewisseld over zowel technische, gebruiksvriendelijke en cosmetische aspecten. Zo heb ik bij alle onderdelen veel technische ondersteuning gehad van Jon en Antwan en veel contact gehad over de front-end en cosmetische opbouw met Amanda. Daarnaast heeft er ook veel contact met de producers en andere stagiaires plaatsgevonden. Organiseren: Het hele project is verlopen volgens de SCRUM methode. Hierbij is al het werk van te voren uitgedacht, onderverdeeld in userstories en in een scrumboard gezet. Er is een tijdplanning gemaakt en per punt is er ingeschat hoe lang er ongeveer voor nodig is. Daarnaast heb ik ook persoonlijke planningen gemaakt aangezien ik zeker in het begin langer nodig had. Hierbij heb ik voor mij zelf uitgedacht wat mijn taken waren en heb ik daar ook een tijd voor ingeschat en dit nageleefd.

28


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Samenwerken: Werken in een multidisciplinair team waarbij ik goed heb opgelet wat ieders kwaliteiten zijn en hier zo goed mogelijk op heb ingespeeld en de juiste vragen aan de juiste personen wist te stellen. Dagelijks heb ik om feedback gevraagd en ook gekregen en daarnaast heb ik ook feedback gegeven over punten waarvan ik dacht dat ze beter of op een andere manier konden. Alle feedback die ik kreeg heb ik ook op verschillende manieren verwerkt in mijn werk en voortgang. Ondernemend: Ik heb zelf veel doelen gesteld en daarnaast ook, buiten wat er van mij verwacht wordt, extra uitdaging gezocht. Een mooi voorbeeld hiervan is de contactpagina. Er werd een google maps kaart verwacht met contactgegevens eronder. Ik heb zelf het initiatief genomen om hier de functionaliteit aan toe te voegen dat wanneer er een marker op de kaar in de viewport kwam, de bijbehorende contactgegevens actief worden. Creatief probleem oplossen: Veel functionaliteiten die de klant wilde hebben vereisten onderzoek en hierbij moest ik vaak zelf of met mijn team samen nieuwe verbanden leggen. Zo waren er veel functionaliteiten binnen Drupal die niet direct aanwezig waren. Hier heb ik zelf veel onderzoek naar moeten doen en een oplossing uit de uitkomsten van deze onderzoeken moeten opmaken. Zo wilde de klant een positie van een kantoor op de kaart bepalen op basis van adresgegevens. Hiervoor heb ik de google Geocode API onderzocht, en deze gecombineerd met de functionaliteit uit Drupal om meerdere gegevens uit velden te combineren. Deze gegevens heb ik vanuit Drupal doorgestuurd naar de Geocode API en zo heb ik coรถrdinaten kunnen bepalen die vertaald werden naar locaties op de kaart door gebruik te maken van de google maps API.

29


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Project 3: Little Alice Dashboard Little Alice is een dochterbedrijf van DPDK. Dit dochterbedrijf vertegenwoordigt de usabiltiy afdeling binnen DPDK. Bij Little Alice kunnen klanten terecht voor onder andere doelgroeponderzoek, interaction designs, Rapid Prototyping, User tests en meer. Toen ik stage kwam lopen stond het Little Alice bedrijf nog in de steigers. Het Little Alice Dashboard project was een testcase voor een pitch om te zien of hier interesse was bij klanten van DPDK. Bij dit project heb ik samen met een stagiair usability design en een stagiair design samengewerkt aan een prototype dashboard dat klanten van Little Alice inzicht moet helpen scheppen in alle online gegevens die er zo ongeveer zijn van deze klanten en de bezoekers van de websites van deze klanten. Dit alles onder dagelijks contact met Pim, de managing partner van DPDK en Sanne, een producer.

Mijn taken in dit project De rollen binnen dit project waren duidelijk verdeeld. Ik als backend stagiair zou voor het technische onderzoek en de technische realisatie van het prototype zorgen, de stagiair usability design; Suzanne zou voor het usability onderzoek zorgen en de design stagiar; Tintin zou ervoor zorgen dat het prototype qua design bij de huisstijl van Little Alice zou passen en up to date was met de huidige designstandaarden.

Uitvoering Ik ben door Pim uit een bedrijfsvoorlichting over Search Engine Optimisation gehaald voor een briefing van dit project. Pim vertelde samen met Sanne over een visie voor het dochterbedrijf Little Alice. Hij vertelde dat veel klanten nu enkel gebruik maken van Google Analytics en nog wat losse services om zo informatie over hun gebruikers te verzamelen en dat er veel informatie achterwege gelaten werd. Dit is zonde en hier zouden zij dan ook graag op in willen spelen met Little Alice door hun klanten een dashboard aan te bieden waar alle denkbare bruikbare informatie over websitegebruikers samenkomt op één centrale plek zodat klanten een ‘landscape view’ krijgen van hun klanten. Zelf hebben Pim en Sanne wat ideeën aangedragen in deze briefing over wat er bijvoorbeeld allemaal voor informatie in zo een dashboard zou kunnen worden samengebracht. Hier kwamen onder andere mouse tracking services naar voren, vertalingen van informatie uit de google analytics API gecombineerd met andere services enzovoort. Let wel, het ging hier slechts om voorbeelden om de visie te ondersteunen en hier zat dan ook nog geen concrete informatie bij. Wij zijn gevraagd met deze visie een brainstormsessie te gaan houden met wat voor informatie we terug zouden kunnen laten komen in het dashboard, hoe dit er ongeveer uit zou kunnen zien qua usability en uiteindelijk ook qua design. We zouden dagelijks aan het einde van de dag de voortgang van dit project bespreken met Pim en Sanne.

Brainstorm Na de briefing zijn Suzanne, Tintin en ik meteen aan het brainstormen gegaan. We hebben vastgesteld welke informatie er mogelijk in het dashboard terug kon komen en een aantal verschillende concepten bedacht en hebben toen afgesproken de rest van de dag en de dag erna los van elkaar aan de slag te gaan. Iedereen zou eigen onderzoek doen naar hetgeen hij/zij

30


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

verantwoordelijk voor was en dan zouden we halverwege de volgende dag weer met elkaar gaan zitten om met elkaar te bespreken wat we hadden gevonden. Aan mij was het de taak om onderzoek te doen naar de verschillende technische mogelijkheden. Zo heb ik onderzoek gedaan naar de google analytics API, verschillende mousetracking API’s en de mogelijkheid om eventueel zelf een heatmap te genereren op basis van gebruikersinteractie op een website. Ook heb ik onderzoek gedaan naar de google Adwords API en verschillende social media API’s. Met de resultaten van deze onderzoeken ben ik terug gegaan naar Suzanne en Tintin die al wat voorbeelden en schetsen hadden gemaakt. We hebben de resultaten besproken en zijn hiermee naar Pim en Suzanne gegaan. Uit deze eerste meeting met Pim en Suzanne kwam heel duidelijk naar voren dat ze voor een flat-design wilden gaan en ze waren erg enthousiast over de eventuele mogelijkheid om heatmaps te genereren van interactie van gebruikers van een website. Daarnaast wilden ze ook graag zien of het mogelijk was om een demo te geven waarin ik met wat gegevens uit de google analytics API ging spelen.

Eerste demo Mijn eerste demo zou bestaan uit een stukje javascript code die de google analytics API ging aanspreken en betekenisvolle gegevens zou opvragen op basis van een combinatie van verschillende input. Voor deze demo heb ik gebruik gemaakt van een use case van waterstoringen.nl. Waterstoringen.nl is een website die gegevens verzamelt over verschillende waterstoringen in ons land. De userstorie die ik voor waterstoringen.nl ging uitwerken luidde: Als waterstoring.nl wil ik als gebruiker van het dashboard eenvoudig kunnen zien van een storing waar deze het meest bekeken wordt in een bepaalde periode. Uit de google analytics gegevens van waterstoringen heb ik een combinatie gemaakt van de plaats waarop een storing wordt gerapporteerd, de plaats waarop de desbetreffende storing vervolgens wordt bekeken en door hoeveel mensen die bekeken wordt uit elke regio. Door deze losse gegevens samen te voegen en de gebruiker de mogelijkheid te geven om zelf een storingsnummer in te vullen en een begin- en einddatum waartussen de gegevens opgehaald moeten worden had ik een mooie demo gemaakt om aan Pim en Suzanne te laten zien. Pim en Sanne waren hier erg tevreden over en gaven me complimenten over het inzicht dat ik met een simpele demo als deze heb kunnen verschaffen. Graag zouden ze nu meer willen weten over de heatmaps functionaliteiten.

Heatmaps API’s Vervolgens ben ik met Tintin en Suzanne verder gaan ontwikkelen. Ik heb hun vooral ondersteund met mijn technische kennis zodat zij inzichtelijk kregen wat ze wel en niet qua schermen en interactie konden uittekenen. Hiernaast ben ik zelf verder gegaan naar mijn technische onderzoek naar de heatmaps functionaliteiten. Ik heb verschillende API’s onderzocht en heb hierbij meerdere afwegingen gemaakt. Zo heb ik gekeken naar de prijs van het gebruik van deze API’s en of dit maandelijkse bedrag rendabel was, ik heb gekeken of ze alle functionaliteiten bieden die ik zocht in de API’s en hoeveel gebruikers ze per maand ondersteunden. Er was geen enkele API die hierbij voldeed aan mijn wensen dus ben ik de volgende meeting met Pim en Sanne ingegaan met mijn onderzoeksresultaten en mijn conclusie dat ik het liefst zelf een heatmaps prototype wilde bouwen vanaf scratch omdat geen enkele API aan mijn wensen voldeed. Dit vonden Pim en Sanne een goed idee en ze waren benieuwd waar ik mee zou komen.

31


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Heatmaps.js Ik moet zeggen dat ik mijzelf best wel heb uitgedaagd door de keuze te maken om zelf de heatmaps functionaliteit vanaf de grond op zelf te gaan bouwen maar tegelijkertijd was de motivatie er wel. Ik heb onderzoek gedaan naar verschillende plugins die in ieder geval van dienst konden zijn bij het tekenen van heatmaps en daarbij ben ik terecht gekomen bij ‘Heatmaps.js’. Dit is een plugin die je muis op een pagina volgt en hier een heatmap van maakt. Deze heatmap is echter niet op te slaan, niet te combineren met meerdere heatmaps en niet onzichtbaar over een website heen te leggen. De taak was dus aan mij om al deze functionaliteiten te schrijven voor het prototype.

Het opslaan van een heatmap Na wat tijd in de plugin heatmaps.js te hebben gestoken zag ik dat de heatmaps getekend werden op basis van coördinaten en hoe vaak de gebruiker zijn muis in de buurt van die coördinaten beweegt. Hoe meer de gebruiker in een radius van coördinaten komt, hoe warmer en dus hoe roder dat gebied wordt. Zo krijg je uiteindelijk overlay over een website met groene , gele, oranje en rode gebieden. Ik ben toen gaan bedenken hoe ik deze heatmap kon opslaan waarbij ik tot de conclusie kwam dat het het beste was om de coördinaten als Json data op te slaan in een array, deze array vervolgens naar een script op de server te sturen door middel van een Ajax call en deze data met het script op de server op te slaan op de server. Hier kwam dus een stukje webservices bij kijken aangezien ik een simpele webservice heb geschreven waarnaar de coördinaten konden worden gestuurd door middel van een POST request.

Het combineren van meerdere heatmaps Nadat het mogelijk was om de heatmaps op te slaan op een externe locatie, was het zaak om te bouwen dat deze heatmaps ook weer ingeladen konden worden om te bekijken en er moesten heatmaps van meerdere gebruikers kunnen worden samengevoegd. Ook hier ben ik weer vanaf de grond af zelf gaan ontwikkelen. Het inladen van een heatmap was vrij eenvoudig omdat ik hier van te voren bij het opslaan van de heatmaps al over na had gedacht. Bij het opslaan van een heatmap wordt een timestamp en een random gegenereerd ID gekoppeld aan de heatmap. Hierdoor kun je bij het inladen van een heatmap heel eenvoudig de unieke heatmaps van elkaar onderscheiden. Vervolgens heb ik de JSON data met coördinaten in javascript terugvertaald naar data die tekenbaar was voor Heatmaps.js en zo had ik het begin staan. Het lastigste kwam er nu nog aan, namelijk het samenvoegen van meerdere heatmaps. Om dit te kunnen doen moest ik het script aanpassen die de heatmaps naar de server stuurde. Ik moest van elk coördinaat opslaan hoe vaak de gebruiker over dat coördinaat heen heeft bewogen met zijn of haar muis. Op deze manier kon ik bij het combineren van meerdere heatmaps een gemiddelde berekenen van hoe vaak er over alle coördinaten op het scherm heen bewogen was, en zo een nieuwe heatmap opstellen die overeenkwam met deze gemiddelde data. De samengevoegde heatmap moet immers een gemiddelde weergeven van de gebruikersinteractie tussen een bepaalde periode of hoeveelheid gebruikers.

32


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Toen dit allemaal stond heb ik dit gepresenteerd aan Pim en Suzanne, welke enorm enthousiast waren. Dit ‘overtrof hun verwachtingen’ en dat was zeker goed om te horen. Ik heb met hun ook meteen besproken dat ik een idee had om nog één extra functionaliteit aan het prototype toe te voegen voordat het aan de klant gepitched zou worden. Ik wilde graag de mogelijkheid bouwen om als een soort timeline door de opbouw van een heatmap van een gebruiker heen te scrollen. Dus stel een gebruiker is 2 minuten op een pagina, dan wil ik de mogelijkheid geven om door die 2 minuten heen te scrollen om zo precies te zien hoe de hete gebieden ontstaan en wat een gebruiker nu écht preciés doet op een website. Ook hier was veel enthousiasme over vanuit Pim en Sanne.

Timeline View De kers op de taart zou de timeline view worden. De mogelijkheid om door de opbouw van een heatmap heen te scrollen over de tijd dat de gebruiker op een pagina is geweest. Hiervoor heb ik weer het script aan moeten passen dat de heatmaps opslaat. Vanaf nu zou er iedere twee seconden timestamps aan de coördinaten moeten worden toegevoegd zodat er bij het uitlezen door deze timestamps heen gescrolt kan worden en zo per twee seconden nieuwe coördinaten in de heatmap worden getekend. Zo gezegd zo gedaan en dit werkte als een zonnetje. Ik heb nog een scrollbar aan het prototype toegevoegd die het scrollen door de heatmaps een eitje maakt en toen zat het erop. De laatste presentatie aan Pim en Sanne waarin ik alles nog eens helder uitlegde verliep uitstekend en ze waren er erg tevreden mee.

(Uiteindelijke versie van het dashboard prototype, te zien is de website van waterstoring.nl met daar onder de verschillende sessies van de sitebezoekers, met helemaal onderaan de slider om door de aangeklikte heatmap heen te scrollen.)

33


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Afhandeling Tot slot heb ik mijn gedocumenteerde onderzoeken, adviezen voor de toekomst van dit project en eventuele extra mogelijkheden voor de toekomst doorgestuurd naar Pim en Sanne evenals een ‘demo video’ die ik had opgenomen van het prototype om in de pitch aan de klant te tonen. Hierna zat het project er voor mij op.

Leermomenten Wat ik tijdens dit project vooral heb geleerd is hoe het is om te communiceren met het absolute management. Hoe je hier professioneel mee om kunt gaan en hoe je je ideeën zo kunt presenteren dat ook mensen zonder veel technische kennis het snappen en hier een beeld bij kunnen vormen. Ook heb ik hier veel samen kunnen werken met twee stagiaires van andere disciplines wat ook heeft bijgedragen aan mijn algemene kennis en hoe je hier je ideeën op heldere wijze aan kunt uitleggen. Tevens heb ik met veel nieuwe API’s kennis gemaakt en heb ik voor het eerst leren werken met de Google Analytics API en met de plugin heatmaps.js. Ook het bouwen van de heatmaps functionaliteiten vereiste een hoop planning en uitwerking voordat ik kon beginnen.

34


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Competenties Tijdens dit project heb ik kunnen werken aan de volgende competenties: Vakinhoudelijke competenties Usability onderzoek: Het nadenken over de gebruikers van het dashboard, het uitwerken van een usecase over waterstoringen.nl als gebruiker en het opstellen en nadenken over de eisen vanuit de ogen van de eindgebruiker. Usability Engeneering: Dagelijks is er met Pim en Sanne gesproken over de voortgang en of de door ons gestelde eisen pasten bij de wensen van Pim en Sanne hun ideeën over de eindgebruiker. Daarnaast heb ik actief meegedacht met Suzanne over de uitwerking van de interaction designs. Analyseren: Complexe situaties en problemen heb ik vaak uitgetekend en overzichtelijk gemaakt. Er heeft enorm veel analyse plaatsgevonden het onderzoeken van verschillende API’s en hiervan heb ik ook een onderzoeksrapport opgesteld. Adviseren: Het adviseren van Pim en Sanne over welke technische mogelijkheden er allemaal zijn, zelf heb ik advies uitgebracht over het zelf bouwen van de heatmaps functionaliteit in plaats van het gebruik van API’s voor dit doeleinde op basis van onderzoek en kennis. Ook heb ik Tintin en Suzanne vaak geadviseerd in hun keuzes met betrekking tot schetsen op basis van mijn technische kennis over wat haalbaar is en niet. Realiseren: Het implementeren van de analytics API van Google en het implementeren van de javascript plugin Heatmaps.js. Tevens heb ik gewerkt aan een prototype dashboard welke ik van scratch af opgebouwd heb en getest heb in meerdere browsers en platformen. Opleveren: Het opleveren en demonstreren van een dashboard prototype welke dagelijks getoetst is aan correctheid, compleetheid en functionaliteiten door zowel mij als de opdrachtgever. Programmabrede competenties Communiceren: Communiceren met twee stagiaires van een andere discipline en dagelijkse communicatie met het management en een producer. Hierbij heb ik mijn ideeën op een normale manier zonder enorm technisch te worden, geprobeerd over te brengen wat vaak lukte en voor een hoop enthousiaste reacties zorgde. Organiseren: Dagelijks werden er afspraken gemaakt over wanneer er werk opgeleverd zou worden. Hierbij heb ik mij steeds aan mijn deadlines gehouden en mijn deelproducten op tijd opgeleverd en gepresenteerd. Samenwerken: Werken in een multidisciplinair team waarbij ik goed heb opgelet wat ieders kwaliteiten zijn en hier zo goed mogelijk op heb ingespeeld en de juiste vragen aan de juiste personen wist te stellen. Dagelijks heb ik om feedback gevraagd en ook gekregen en daarnaast heb ik ook feedback gegeven over punten waarvan ik dacht dat ze beter of op een andere manier konden. Alle feedback die ik kreeg heb ik ook op verschillende manieren verwerkt in mijn werk en voortgang.

35


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Ondernemend: Ik heb zelf de uitdaging opgezocht en een stapje extra gezet door de heatmaps functionaliteit zelf vanaf scratch te bouwen en hierbij heb ik dan ook Pim en Sanne weten te overtuigen van mijn keuze. Creatief probleem oplossen: Veel functionaliteiten die de klant wilde hebben vereisten onderzoek en hierbij moest ik vaak zelf of met mijn team samen nieuwe verbanden leggen. Zo waren er veel functionaliteiten die niet mogelijk waren met enkel de analytics API en heb ik hier zelf verbanden tussen verschillende data en databronnen gelegd. Ook het probleem van de heatmaps APIâ&#x20AC;&#x2122;s heb ik zelf getackeld door eerst onderzoek te doen en vervolgens mijn eigen oplossing uit te denken en te realiseren.

36


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Project 4: KNMP Kennisbank Het KNMP Kennisbank project betreft een project waarbij ik twee weken heb meegelopen. KNMP Kennisbank heeft de opdracht gegeven om een systeem te bouwen dat met een API communiceert welke door een derde partij wordt ontwikkeld. Bij dit project was het zaak dat er veel onderzoek gedaan werd naar een lightweight PHP framework om dit systeem op te bouwen.

Mijn taken in dit project Mijn taken in dit project bestonden puur uit research & development. Het onderzoeken van functionaliteiten binnen het PHP framework Phalcon en het opzetten van code en testen van onderdelen van dit framework om kennis op te doen over de mogelijkheden van het framework.

Uitvoering Ik had voordat ik met dit project begon nog géén kennis van object georiënteerd programmeren binnen PHP. Wel wist ik al een hoop over object georiënteerd programmeren en design patterns vanuit de programmeertaal C#, wat me zeker geholpen heeft om dit binnen PHP snel op te kunnen pakken. Toen dit project begon stond er nog niets vast hoe we dit project technisch zouden gaan realiseren. Dit gaf mijn team en mij een heleboel vrijheid om zelf technieken te kiezen en te onderzoeken welke technieken het beste zouden passen bij de wensen van de klant. Aangezien ik nog geen ervaring had met OOP (Object Oriented Programming) binnen PHP heb ik hier eerst twee dagen volledig voor uitgetrokken. Ik heb tutorials gevolgd en samen met mijn team en andere back enders bij DPDK aan mijn code gezeten. Na twee dagen vond ik dat ik de basisprincipes van OOP binnen PHP wel snapte en ben ik mijn team gaan ondersteunen.

Phalcon Ondertussen had mijn team al een aantal Research & Development sessies gedaan en waren ze tot de conclusie gekomen dat het lightweight framework Phalcon het meest geschikt was voor dit project. Phalcon is het snelste PHP framework dat er bestaat en tevens ook erg compleet. Het bijzondere aan Phalcon is dat het geschreven is als een CExtensie. Dit zorgt ervoor dat je het framework als extensie moet installeren op je ontwikkelomgeving waarna je gewoon in PHP kunt programmeren. Het nieuwe aan dit project was dat mijn team ook voor het eerst met Phalcon werkte en ik dus eigenlijk qua kennis over Phalcon gelijk liep met mijn team. Dit vond ik erg verfrissend aangezien ik hierdoor het gevoel kreeg veel meer voor mijn team te kunnen betekenen en nog echt nieuwe

37


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

dingen kon laten zien. Zo heb ik onderzoek gedaan naar de template engine van Phalcon en hier ook een stukje demo code voor geschreven die ik later aan Antwan heb laten zien en hoor je je team soms praten over dingen die jij ook net hebt ontdekt.

Partial Views Ook in dit project werkten we volgens de SCRUM methode met een sprintboard. Hierin stond dat er onderzoek gedaan moest worden naar een manier om een ‘block’ achtige functionaliteit zoals die in Drupal bestaat te vinden voor het Phalcon framework. Er moeten losse template bestanden met HTML erin kunnen worden ingeladen op pagina’s zodat een pagina uit meerdere losse bestanden opgebouwd kan worden. Na dit met Antwan besproken te hebben werd het hele verhaal pas echt duidelijk en ben ik hiermee aan de slag gegaan. Ik ben gaan spitten in de documentatie van Phalcon en kwam al vrij snel op het principe van Partial Views. Dit zijn losse bestanden met daarin HTML, waaraan je parameters kunt meegeven vanuit PHP. Deze partial views kun je vervolgens weer inladen vanuit de hoofdview van een pagina. Dit was precies wat we zochten alleen moest er nog een instelling worden aangepast om dit helemaal werkend te krijgen en dit was best even zoeken. Het ging erom dat wanneer er nu een partial view werd ingeladen in een hoofd view, de hele hoofd view nog een keer ingeladen werd samen met deze partial view. Dit was niet de bedoeling en kon worden voorkomen door de render levels instelling aan te passen. Het volgende stukje code demonstreert hoe dit werkt: $this->view->setRenderLevel(View::LEVEL_LAYOUT);

Wat hier gebeurt is dat je de zogenaamde renderlevel aanpast van in dit geval de partial view waardoor bij het inladen niet meer de gehele layout nogmaals wordt ingeladen maar slechts de partial view.

Leermomenten Door dit project heb ik voor het eerst kennis gemaakt met object georiënteerd programmeren binnen PHP. Dit was eenvoudiger dan ik had verwacht maar dit komt zeer zeker omdat ik veel van deze principes al herkende vanuit de C# programmeertaal. Verder heb ik leren werken met het snelste PHP framework wat er bestaat en heb ik geleerd hoe deze qua structuur in elkaar zit. Meer dan een basis heb ik zeer zeker wel gelegd om in de toekomst een volledige applicatie met dit framework te bouwen. Daarnaast heb ik doordat mijn team ook voor het eerst met Phalcon ging werken een aantal dingen zelf uit kunnen zoeken en hier over kunnen discussiëren met mijn team en heb ik mijn team nieuwe dingen kunnen laten zien.

38


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Competenties Tijdens dit project heb ik kunnen werken aan de volgende competenties: Vakinhoudelijke competenties Usability Engeneering: Aangezien dit voor mij een puur backend project was heb ik hier vooral een bijdrage kunnen leveren op dit gebied door mijn code goed van bronnen en comments te voorzien zodat mijn team hier later mee verder kan. Analyseren: Het analyseren van het Phalcon framework, de mappenstructuur en hiĂŤrarchie hiervan opnemen, het beschrijven van de door mij uitgezochte functionaliteiten van Phalcon door middel van comments in mijn code en bronverwijzingen. Adviseren: Het adviseren over het gebruik van verschillende functionaliteiten en hoe deze te gebruiken. Een ideaal voorbeeld hiervan is het partial views mechanisme, dit heb ik zelf uitgezocht en vervolgens aan mijn team uitgelegd. Realiseren: Het implementeren van de partial views functionaliteit en de template engine van Phalcon. Opleveren: Het opleveren en demonstreren van functionaliteiten welke dagelijks getoetst is aan correctheid, compleetheid en functionaliteiten door zowel mij als mijn team, voorzien van structuur en duidelijke comments. Programmabrede competenties Communiceren: Het communiceren met mijn team was erg belangrijk gedurende dit project aangezien we gezamenlijk het Phalcon framework als het ware aan het ontdekken waren. Door veel met mijn team te communiceren heb ik mijn onderzoeksresultaten over kunnen brengen en heb ik veel kunnen leren door actief te luisteren naar hun resultaten en onderzoeken. Organiseren: Door middel van alle gewenste functionaliteiten en onderzoeken in een scrumboard te zetten ontstond er overzicht en wisten we allemaal van elkaar wie waar mee bezig was en hoe lang iemand daar mee bezig was. Ook het vragen om hulp wanneer ik iets nieuws had gevonden zodat ik hier samen met iemand naar kon kijken gebeurde regelmatig. Samenwerken: Het geven van feedback over onderzoeksresultaten en op basis van mijn eigen onderzoeksresultaten. Ondernemend: Zelf heb ik onderzoek gedaan naar de template engine van Phalcon, dit was eigen initiatief en hier heb ik dan ook zelf code voor geschreven en mijn team ingelicht over mijn bevindingen. Creatief probleem oplossen: Het onderzoek doen en implementeren van de partial views. Hierbij heb ik gekeken hoe dit werkte bij andere frameworks en of Phalcon hierin het meest efficiĂŤnt is. Tevens heb ik externe validation classes met elkaar vergeleken om zo tot de conclusie te komen dat de validation van Phalcon erg sterk is.

39


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Overige projecten Verder zal ik in dit verslag de werkzaamheden binnen de verschillende kortlopende projecten beschrijven. Hieruit heb ik tevens veel kunnen leren alleen heb ik niet lang genoeg meegelopen om voor al deze projecten een apart hoofdstuk te maken in dit verslag, vandaar dat ik ze hier in één hoofdstuk behandel.

MassiveMusic MassiveMusic is een bedrijf dat muziek produceert voor tv reclames, films en spellen. DPDK heeft de volledige website verzorgd en deze is opgebouwd op het Drupal CMS. Mijn taken binnen dit project waren het verzorgen van de detailpagina’s en popups op de zogenaamde live pagina. Deze live pagina is een pagina waarop berichten van verschillende social media getoond worden die betrekking hebben op MassiveMusic.

Detailpagina De detailpagina is bedoeld voor wanneer iemand een item opent vanaf een externe locatie, en dus de URL naar het item in zijn browser opent. Deze pagina is opgebouwd door middel van een module en een view. Met de Drupal hook views_pre_render heb ik ervoor gezorgd dat ik logica kon uitvoeren voordat de detailpagina getoond werd waardoor het mogelijk was om af te vangen om wat voor soort bericht het ging. Hier waren 6 mogelijkheden, ofwel het was een blogbericht, facebook-, twitter-, youtube-, soundcloud- of spotify bericht en voor elk type moest er onderscheid gemaakt worden in wat voor gegevens er op de detailpagina getoond zou worden. Dat kon dus prima met de hook views_pre_render.

40


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Popups Naast de detailpagina wilde de klant ook popups wanneer er een item op de live pagina werd aangeklikt, en de gebruiker dus niet direct de URL naar het item in de adresbalk van zijn browser heeft ingetoetst. Deze popups openen over de pagina heen en bevatten de inhoud van het bericht waarop is geklikt. De inhoud van deze popups wordt opgehaald door middel van een AJAX call in javascript. Elk item op de livepagina heeft een id, en dit id wordt meegegeven wanneer de AJAX call wordt uitgevoerd om de inhoud van het item op te halen. Dit alles zorgt ervoor dat de juiste inhoud opgehaald wordt bij het klikken op een item op de livepage.

(Het eindresultaat, de live page met daar overheen de popup met daarin de inhoud van het aangeklikte item op de pagina, in dit geval een titel en een youtube video.)

41


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Waterstoringen Waterstoring is een project dat gemaakt is met Drupal. De website is een grote verzameling van storingen omtrent het waternet in Nederland, getoond op een google maps kaart. Tot op heden was het alleen mogelijk om cirkels op de kaart te tekenen om een storing aan te geven, maar de klant wilde ook de mogelijkheid om polygonen te tekenen op de kaart om zo een veel preciezer gebied te kunnen markeren op de kaart. Dit zou ik gaan verzorgen.

Polygonen Polygonen zijn zelf te tekenen vormen, door deze via het administratiepaneel te tekenen op de kaart kan er heel precies worden aangegeven waar er zich een waterstoring voordoet. De google maps API ondersteunt het tekenen van polygonen en na onderzoek heb ik deze functionaliteit van de API dan ook gebruikt. De moeilijkheid zat hem in het opslaan van deze polygonen om ze vervolgens ook aan de voorkant van de site te tonen voor bezoekers. De uitwerking hiervan is het opslaan van alle hoeken van de polygoon. De coรถrdinaten van deze hoeken sla ik op in een JSON object welke vervolgens uitgelezen wordt aan de voorkant van de website. Hier heb ik weer de functionaliteit geschreven die de polygonen uitleest en ze opnieuw op de kaart tekent.

Links is een voorbeeld te zien van het tekenen van een polygoon. De witte bolletjes in de hoeken kunnen gesleept worden om de polygoon groter te maken, ook kan er willekeurig aan een zijde geklikt worden om een extra bolletje toe te voegen.

42


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Haagse Hogeschool Summerschool De Haagse Hogeschool heeft DPDK de opdracht gegeven om de aanmeldingspagina te bouwen voor hun summerschool traject. Het gaat hier om een pagina waar geĂŻnteresseerde studenten hun naam en Email adres achter kunnen laten om zo in de toekomst op de hoogte te worden gesteld van het summerschool traject van de Haagse Hogeschool. Aan mij was de taak om dit project in zijn geheel op te zetten van begin tot eind, waarbij ik de website bouwde naar het design dat ik van Anouk van het designteam aangeleverd heb gekregen.

Technische opzet Ik heb de pagina opgezet met hierin een formulier waarvan de inhoud via javascript wordt gecontroleerd op juistheid. De velden mogen niet leeg zijn en het Email adres moet kloppen. Als dit klopt wordt de inhoud naar een andere pagina gesubmit die vervolgens de afhandeling met de database verzorgt. De inhoud wordt op deze pagina in de database gezet waardoor er later een uitdraai gemaakt kan worden van iedereen die zijn of haar gegevens heeft achter gelaten. Het exporteren van deze gegevens kan worden gedaan door naar de exportpagina te gaan. Deze pagina is beveiligd door middel van een .htaccess bestandje en een .htpasswd bestandje. Deze zorgen ervoor dat er eerst moet worden ingelogd voordat er een export kan worden gemaakt. De code om de inschrijvingen te exporteren zorgt ervoor dat de inschrijvingen als Excel bestand geĂŤxporteerd worden.

Front-end Ook het front end gedeelte zou ik in dit project helemaal zelf doen, uiteraard wel met de hulp van Amanda wanneer ik vragen had. Zo heb ik voordat ik begon de opmaak van de website in elementen uitgedacht en uitgetekend. Dit ontwerp heb ik met Amanda besproken en na het verwerken van haar feedback ben ik begonnen met bouwen. Aangezien ik weinig ervaring had als front ender heb ik tijdens dit project redelijk wat moeilijkheden gehad. Het was een hoop onderzoekswerk voor een relatief simpele pagina. Ik heb op de helft van dit project de hele opbouw en styling ook omgegooid en ben toen opnieuw begonnen met de kennis die ik toen had opgedaan. Dit is naar mijn mening een goede stap geweest ook al was dit wel een risico qua tijd gezien. Dit heeft er uiteindelijk voor gezorgd dat mijn CSS en HTML veel schoner zijn opgebouwd en er overzichtelijker uit ziet.

43


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

(Bovenstaande is een gedeelte van het eindresultaat van The Hague Summer Institute, het resultaat van mijn front-end werk. Tevens gloeit de lamp m.b.v. jquery animatie en zitten er CSS3 animaties in de â&#x20AC;&#x2DC;keep me updatedâ&#x20AC;&#x2122; knop wanneer je hier met je muis overheen beweegt.

SASS Ook heb ik mijn introductie met SASS gemaakt tijden deze stage. SASS staat voor Syntactically Awesome StyleSheets en is een CSS extensie die ervoor zorgt dat je bijvoorbeeld variabelen,mixins, inline imports en een hoop andere functionaliteiten kunt gebruiken die je normaal niet in CSS kunt gebruiken. Ik heb geleerd van Amanda om Compass te gebruiken om mijn SASS te compileren naar CSS door middel van een filewatcher binnen PHPstorm. Vervolgens heb ik met SASS kunnen werken aan verschillende projecten en heb ik de ideale basis om hier zelf ook mee aan de slag te kunnen in de toekomst.

44


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Competenties Tijdens deze overige projecten heb ik kunnen werken aan de volgende competenties: Vakinhoudelijke competenties Usability Engeneering: Voor MassiveMusic heb ik een zo simpel mogelijk ogend detailpagina gebouwd aangezien de eindgebruiker geen informatie moet zien die hij of zij niet kan gebruiken want dit zorgt voor verwarring. Voor de Summerschool pagina heb ik de feedback op het formulier zo duidelijk mogelijk gemaakt, en heb ik dit zo opgezet dat de eindgebruiker hier geen last van ondervindt wanneer hij of zij het formulier opnieuw in wil vullen. Analyseren: Het analyseren van de code die al gemaakt was voor ieder project zodat ik hier aan verder kon werken. Vooral bij de Summerschool pagina heeft veel analyse plaatsgevonden aangezien ik dit project helemaal zelf heb opgezet en er veel front-end werk bij kwam kijken, waar ik weinig ervaring mee had. Realiseren: Alle deelproducten zijn gerealiseerd met het gebruik van diverse plugins en frameworks waaronder ook het CMS Drupal en een plugin om database tabellen te exporteren naar Excelbestanden. Opleveren: Het opleveren en demonstreren van functionaliteiten welke dagelijks getoetst zijn aan correctheid, compleetheid en functionaliteiten door zowel mij als mijn team, voorzien van structuur en duidelijke comments. Daarnaast is alles getest in meerdere browsers en platformen. Programmabrede competenties Communiceren: Het communiceren met mijn team stond bij alle projecten hoog in het vaandel maar tijdens deze projecten heb ik ook veel samengewerkt met andere afdelingen binnen DPDK. Zo heb ik samengewerkt met producers waar ik nog niet eerder mee had samengewerkt en heb ik veel samengewerkt met de designafdeling om het summerschool project te realiseren. Hierbij heb ik actief geluisterd en mijn eigen belangen en ideeĂŤn duidelijk gemaakt. Zo had ik soms meer tijd nodig of waren er bepaalde wensen van de producers niet haalbaar, dit heb ik dan ook duidelijk gecommuniceerd. Organiseren: Door middel van alle gewenste functionaliteiten en onderzoeken in een scrumboard te zetten ontstond er overzicht en wisten we allemaal van elkaar wie waar mee bezig was en hoe lang iemand daar mee bezig was. Ook het vragen om hulp wanneer ik iets nieuws had gevonden zodat ik hier samen met iemand naar kon kijken gebeurde regelmatig. Samenwerken: Het geven van feedback over onderzoeksresultaten en op basis van mijn eigen onderzoeksresultaten. Ondernemend: Nog voordat mijn producers de kans hadden had ik zaken als een database export al zelf gerealiseerd. Deze stappen ondernam ik zelf al en dit vonden de mensen met wie ik samenwerkte erg prettig. Creatief probleem oplossen: Het omgooien van de hele HTML- en CSS opbouw van het summerschool project. Op de helft heb ik alles wat ik had weggegooid en ben ik opnieuw begonnen om zo mijn chaotische front-end werk om te bouwen naar een nette en gestructureerde opbouw met behulp van mijn nieuwe kennis en met hulp van Amanda. Tevens

45


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

ook mijn keuze voor het ophalen van data voor de livepage van Massivemusic door middel van een AJAX call, dit had ook gekund door middel van data attributen aan alle items mee te geven maar dit zou zorgen voor een hele lelijke opbouw van de code.

46


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Stageterugkomdagen Eerste terugkomdag Tijdens de eerste stage terugkomdag heb ik kennis gemaakt met de medestudenten uit het groepje die ook Emiel als stagebegeleider hebben. Tijdens deze eerste stage terugkomdag is vooral besproken hoe de eerste weken van ieders stage zijn verlopen en wat ons allemaal te wachten stond qua opdrachten vanuit school met betrekking tot de stage. Het was fijn om met elkaar te spreken over hoe iedereen zijn eerste weken had beleefd, zo kwam naar voren dat iedereen wel even tijd nodig had om zijn plekje te vinden en moest wennen aan het niveau van het werk van zijn stagebedrijf en dat ik dus niet de enige was.

Tweede terugkomdag De tweede terugkomdag stond in het teken van een intervisie. Hierbij moesten mijn stagegroepje en ik een ervaring uitkiezen die we tijdens onze stage hebben meegemaakt tot nu toe en die we graag anders aan hadden willen pakken. De ervaring die ik heb uitgekozen was: Ik ben tot nu toe alleen nog maar met het Drupal CMS aan het ontwikkelen geweest, maar hoe vraag ik nu op gepaste wijze en zonder mijn team een vervelend gevoel te geven dat ik eigenlijk ook graag met een ander framework zou willen ontwikkelen tijdens mijn stage? En met wie kan ik dit het beste bespreken? Uiteindelijk hebben we gekozen om van al onze onderwerpen de mijne gezamenlijk te behandelen. Tijdens deze intervisie heb ik met mijn rug naar mijn groepje gezeten en mocht ik alleen luisteren naar wat mijn groepje met elkaar besprak over mijn onderwerp, pas aan het einde mocht ik mij weer omdraaien en hebben we gereflecteerd over mijn onderwerp. Uit deze intervisie heb ik veel goede feedback ontvangen waar ik wat mee kon. Zo kwamen er persoonlijke punten naar voren van mij waarin ik mijzelf herkende en zelf nooit echt bij stil sta, en is er geopperd hoe ik het gesprek aan zou kunnen gaan en dat ik dit het beste gewoon met mijn eigen team zou kunnen bespreken.

Derde terugkomdag De derde terugkomdag betreft een individueel gesprek met mijn stagebegeleider Emiel. Tijdens dit gesprek is mijn voortgang besproken, en welke plannen ik nog had voor de laatste periode van mijn stage. Deze dag heeft mij vooral inzicht geboden in wat ik nog wilde leren en moest doen tijdens mijn laatste stageweken, ook qua schoolopdrachten

Vierde terugkomdag Iedereen in mijn groepje behalve Bas was klaar met zijn stage en we hebben met zijn allen besproken hoe de laatste weken zijn verlopen. Wat hebben we opgestoken van onze stage en waar zien wij onszelf later werken?

47


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

MEDMEO Lessen De MEDMEO lessen die ik gevolgd heb tijdens mijn terugkomdagen vond ik verre van nutteloos. Tijdens deze lessen hebben we begeleiding gehad en opdrachten moeten maken met betrekking tot wetenschappelijk onderzoek. Ik zie het verband met deze stage aangezien ik tijdens mijn stage ook op duidelijke manier mijn bronnen moet vermelden en veel onderzoek doe naar bestaande en nieuwe technieken. Ook voor mijn scriptie van mijn volgende stage is deze stof erg belangrijk.

48


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Reflectie Tijdens mijn stage bij DPDK heb ik aan mijzelf als persoon, als webdeveloper en aan mijn competenties kunnen werken. Ik heb veel nieuwe mensen leren kennen welke allen echt unieke kwaliteiten bezitten en over enorm veel kennis beschikken. Stage lopen is heel anders dan school, zowel qua werk, qua tijd en als intensiteit. Ik heb vaak gezegd dat ik in de afgelopen vier maanden meer heb geleerd dan in de afgelopen twee jaar van mijn opleiding en in zekere zin is dit in mijn ogen ook echt zo. De basis is gelegd in twee jaar van mijn opleiding en ik heb bijna alles uit deze twee jaar terug zien komen tijdens mijn stage. In veel van deze onderwerpen ben ik veel dieper gegaan dan ik in de afgelopen twee jaar ooit ben gegaan. Ik weet nog dat ik halverwege mijn stage twijfelde aan hoe mijn stage verliep aangezien ik tot dan toe bijna alleen nog maar met het Drupal systeem had gewerkt. Achteraf ben ik erg blij geweest dat het zo gelopen is want de tweede helft van mijn stage bracht een enorme diversiteit doordat ik aan facebook campagnes, losse websites, en een project op een echt OOP PHP framework heb kunnen werken. Juist doordat ik de eerste helft van mijn stage aan Drupal heb besteed weet ik nu erg veel van Drupal wat in mijn ogen een grote meerwaarde biedt als developer aangezien Drupal veel gebruikt wordt en Drupal developers schaars zijn. Mijn leerdoelen die ik had geformuleerd voor mijn stage heb ik bijna allemaal behaald en zelfs naast deze leerdoelen heb ik nog veel meer geleerd dankzij de enorme diversiteit van mijn stage. Hieronder nog eens mijn leerdoelen met daarbij hoe ik hier nu in sta. Graag zou ik willen leren hoe het er in het echte bedrijfsleven aan toe gaat voor een developer, hoe het is om met andere afdelingen te moeten samenwerken en te communiceren met een leidinggevende of opdrachtgever. Dit leerdoel is zo ongelofelijk veel teruggekomen tijdens mijn stage dat geloof je bijna niet. Ik heb constant met mijn leidinggevenden te maken gehad, zo heb ik veel moeten communiceren met de producers, het management en heb ik een telefonische meeting met een klant bijgewoond. Daarnaast heb ik samengewerkt met front-enders, designers, de communicatie afdeling en de usability afdeling. Graag zou ik willen leren om zelfstandig een probleem leren aan te pakken en op de juiste manier tot een oplossing te komen, beter leren â&#x20AC;&#x2DC;troubleshootenâ&#x20AC;&#x2122;. Door het intensief samenwerken in een multidisciplinair team heb ik veel geleerd met betrekking tot dit punt. Door te zien hoe mensen met veel werkervaring problemen oppakken en dit tot een goed einde brengen van begin tot eind leer je zelf ook hoe je je problemen beter aan kunt pakken. Door dit vervolgens ook in de praktijk te brengen en te oefenen kan ik zeggen dat ik inmiddels in staat ben om problemen op te delen en overzichtelijk te maken waardoor oplossen een stuk eenvoudiger wordt.

49


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Graag zou ik willen leren werken met veel verschillende technieken om zo mijn horizon te verbreden. Ik zou graag verschillende frameworks willen leren kennen. Ik heb gewerkt met het Drupal CMS, javascript frameworks als BackboneJS en UnderscoreJS, ik heb geoefend met NodeJS, gewerkt met het PHP OOP Framework Phalcon, en zelfs een front-end project gedaan. Ik kan wel zeggen dat ook dit leerdoel behaald is aangezien ik veel beter weet wat ik in de toekomst nog wil gaan doen.

Eindpresentatie donderdag 6 februari 2014 heb ik mijn eindpresentatie gegeven voor de tweedejaars Media Technologie studenten. Mijn insteek voor deze presentatie was om zo veel mogelijk de diversiteit van mijn stage bij DPDK naar voren te laten komen. Hiervoor heb ik dan ook de projecten Box Electronics, Waterstoring en het Little Alice Dashboard in mijn presentatie verwerkt. Verder heb ik verteld over de sfeer, de overige activiteiten en begeleiding binnen DPDK. Uiteindelijk hoop ik een beetje duidelijk te hebben geschept voor de tweedejaars in wat ze kunnen verwachten van een stage bij DPDK. Voor mijn belvenis ging het erg goed, het was een vloeiend verhaal en na afloop waren er nauwelijks vragen.

De toekomst Na mijn leuke en enorm leerzame stageperiode bij DPDK is het nu tijd om terug te gaan naar school en toe te werken naar mijn laatste stage en mijn afstuderen. De afgelopen tijd heeft me vele inzichten geboden en hierdoor heb ik al een beeld met wat ik tijdens mijn afstuderen wil gaan doen. Dankzij de mogelijkheid om een project als front-end ontwikkelaar te kunnen doen en met verschillende front-end technieken te hebben gewerkt is voor mij het verschil tussen back-end en front-end een stuk duidelijker geworden. Ik ben erachter gekomen dat ik liever de verdieping zoek in de back-end kant en de front-end kant op een laag pitje wil houden. Wat mij zo aantrekt in de back-end is de enorme diepgang en complexiteit die te bereiken is. Dit mis ik bij het front-end werk. Ik zeg niet dat front-end makkelijk is, het is alleen heel anders. Voor mij voelt front-end als het stampen van kennis en ik vergelijk het vaak met een taal als Spaans waarbij je woordjes leert totdat je steeds beter Spaans gaat spreken. Back-end daarentegen voelt alsof ik een machine aan het bouwen ben, steeds kan ik er een onderdeeltje bij bouwen en verbeteren waardoor mijn machine steeds complexer wordt. Dรกt vind ik zo leuk, dรกt is waarom ik ook voor mijn afstudeerstage de back-end kant op zal gaan. Wat betreft na mijn afstuderen, dan zou ik graag bij een bedrijf als DPDK werken. Misschien iets kleiner aangezien ik ervan houd om met minder mensen veel intensiever samen te werken maar verder vind ik een bedrijf als DPDK erg leuk. Jonge mensen, allemaal erg enthousiast en beschikkend over veel kennis, dat is precies wat ik zoek in een bedrijf.

50


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Typisch DPDK DPDK heeft een aantal eigenschappen als bedrijf die ik over andere bedrijven niet gehoord heb en welke zeker bij mijn ontwikkeling en het behalen van mijn competenties hebben bijgedragen.

Chemistries Dit zijn bijeenkomsten die om de zoveel weken worden gehouden voor alle webdevelopers wanneer iemand kennis over een (meestal state of the art) onderwerp met de rest wil delen. Iemand heeft bijvoorbeeld ervaring met een onderwerp en geeft hierover een presentatie en een live demo waarbij code wordt getoond en geschreven. Zo leren we bij DPDK steeds met de nieuwste technieken werken. Zo hebben we een Chemistry gehad over BackboneJS en het structureren van code door middel van het gebruik van BackboneJS. Dit was erg handig omdat je zo zorgt dat het hele bedrijf dezelfde standaarden aanhoudt en ikzelf ook nog eens duidelijk kon zien hoe iemand nu het beste een project met BackboneJS kan opzetten en hoe je dit goed uitlegt aan mensen die hier nog nooit mee gewerkt hebben. Een andere chemistry waar ik veel aan gehad heb was de chemistry over NodeJS. Ik had al wel eens van NodeJS gehoord maar wist eigenlijk niet echt wat het deed en waarvoor je het gebruikt. Na deze chemistry wist ik de basis en hoe je kon beginnen met NodeJS en waar je dan moest zoeken. Hierna ben ik gaan oefenen met NodeJS en heb ik er een chatserver mee gebouwd, waardoor ik een goed beeld heb gekregen waarvoor en hoe je NodeJS kunt gebruiken.

DPDkofffie DPDkoffie zijn wekelijkse bijeenkomsten waar heel het bedrijf bij aanwezig is. Deze vinden plaats op de maandagochtend en hierin wordt de planning van DPDK besproken. Zo weet iedereen wat hij of zij die week moet gaan doen en weten we dit ook van elkaar. Deze meetings geven inzicht over hoe je een grote groep mensen aanstuurt en hoe je het werk van zoveel mensen goed kunt plannen en bespreken met de groep.

Webdevâ&#x20AC;&#x2122;s Om de week vond er ook nog eens een webdev plaats waarbij alle webdevelopers samen kwamen en met elkaar deelden tegen wat voor problemen zij aangelopen waren en welke nieuwe technieken ze zijn tegengekomen. Ideaal om je bedrijf met de nieuwste technologieĂŤn mee te laten gaan en het developers team up to date te houden van elkaars fouten zodat ze niet nogmaals door anderen gemaakt worden.

51


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Bronnen Programmaâ&#x20AC;&#x2122;s HeidiSQL http://www.heidisql.com/

Passpack http://www.passpack.com/en/home/

Charles http://www.charlesproxy.com/

Wamp server http://www.wampserver.com/en/

Drupal Path redirect http://drupal.org/project/path_redirect

Redirect http://drupal.org/project/redirect

Internationalization http://drupal.org/project/i18n

String override http://drupal.org/project/stringoverrides

Imagefield crop http://drupal.org/project/imagefield_crop

Colorbox http://drupal.org/project/colorbox http://www.jacklmoore.com/colorbox

52


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Views data export http://drupal.org/project/views_data_export

Path auto http://drupal.org/project/pathauto

Features http://drupal.org/project/features

PHP Functies substr http://php.net/manual/en/function.substr.php

similar_text http://php.net/manual/en/function.similartext.php

html_entity_decode http://php.net/manual/en/function.htmlentitydecode.php

strip_tags http://php.net/manual/en/function.striptags.php

Overige Uniform http://uniformjs.com/

Regular expession http://www.regularexpressions.info/

Stackoverflow email validation regular expression De regular expression die ik heb gebruikt om een emailadres te valideren heb ik hier vandaan: http://stackoverflow.com/questions/940577/javascriptregularexpressionemailvalidation

BackboneJS http://backbonejs.org/

53


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

UnderscoreJS http://underscorejs.org/

Phalcon Framework http://docs.phalconphp.com/en/latest/# http://docs.phalconphp.com/en/latest/reference/wintools.html

SASS http://sasslang.com/ http://csstricks.com/sassvsless/ http://net.tutsplus.com/tutorials/htmlcsstechniques/sassvslessvsstylusapreprocessorshootout/

LESS http://lesscss.org/

Google Analytics https://developers.google.com/analytics/devguides/collection/gajs/#quickstart

jsfiddle http://doc.jsfiddle.net/ http://jsfiddle.net/

Facebook http://developers.facebook.com/docs/ http://developers.facebook.com/docs/guides/canvas/ http://developers.facebook.com/docs/reference/api/

Drupal http://drupal.org/documentation http://drupal.org/documentation/structure http://drupal.org/documentation/concepts Todd Tomlinson (2010). Beginning Drupal 7. Apress, New York

54


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Bijlage Links naar alle projecten Hieronder een lijst met links naar alle projecten waar ik tijdens mijn stage aan gewerkt heb die online staan:

Box electronics: http://displayyourbusiness.nl/nl

Rotterdam Festivals FotoAlbum: https://www.socialmediacampaigns.nl/rotterdamfestivals_fotoalbum_2013/

Haagse Hotelschool: http://hotelschool.nl/en

MassiveMusic: http://massivemusic.com/

Waterstoringen: http://waterstoring.nl/

Haagse Hogeschool Orientatieplatform: https://orientatieplein.hhs.nl/nl/opendag

The Hague Summerschool: http://www.thehaguesummerschool.com/

Verder zijn er nog vele facebook acties geweest en losse projecten die nog niet of niet meer online te vinden zijn. Dit heeft vooral te maken met het feit dat dit tijdelijke acties zijn zoals kerstof sinterklaasacties of projecten die pas over enkele weken tot maanden live gaan na het moment van schrijven van dit verslag.

55


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

API Onderzoek voor het Little Alice dashboard prototype Dit is een document dat is opgesteld voor de opdrachtgevers Pim en Sanne welke ik heb opgeleverd na het voltooien van het project.

Google Analytics api: Mogelijkheden: o mogelijk om storingen individueel te tonen met trafficgegevens (zoals hoe lang er naar storingen gekeken wordt, hoe vaak de storing bekeken is etc.) o Mogelijk om het aantal storingen van een bepaald type te tonen, nogmaals, dit zal niet goed werken omdat niet van alle storingen het type is opgegeven. o aantal bezoeken per storing tonen, met locatie van bezoekers o Totale aantal bezoeken tonen, met locatie van bezoekers

NIET MOGELIJK: o Locatiegegevens van een storing tonen o Verdere inhoudelijke gegevens van een storing tonen zoals bijvoorbeeld de titel van een storing, datum van de storing van wanneer deze gemeld is en tot wanneer deze loopt. o status van een storing tonen o locatie van een storing tonen

Misschien (high risk) o DE REALTIME GOOGLE ANALYTICS API IS IN BETA FASE o er is weinig informatie over het gebruik en de functionaliteiten beschikbaar, en: o om toegang tot realtime statistieken te krijgen moet je een beta key aanvragen. Tot die tijd kun je niet in de API kijken naar welke live functionaliteiten er precies beschikbaar zijn op dit moment. o Vandaar dus high risk. o - Heb gezocht en gevonden: Alle bovenstaande functionaliteiten zijn ook beschikbaar in real-time in de API

56


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Google Analytics Realtime api: o https://developers.google.com/analytics/devguides/reporting/realtime/dimsmets/ o Alle bovenstaande informatie uit de normale APIi zijn ook beschikbaar in de realtime API

Onderzoek waarbij er van uitgegaan wordt dat Waterstoring de volgende social media accounts bezit of anders aanmaakt om de volgende APIâ&#x20AC;&#x2122;s te kunnen gebruiken.

Facebook API: Mogelijk: + Alle posts op de wall van waterstoringen ophalen + Activity feed tonen + Bijna alle informatie van een bezoeker ophalen( denk hierbij als locatie, vriendenlijst, likes e.d. (Hier is wel toestemming van de gebruiker voor nodig) Misschien: + alle berichten waarin waterstoring is getagged ophalen

Twitter API: Mogelijk: + Alle twitterposts van waterstoringen ophalen + Alle twitterposts met een hashtag met waterstoringen ophalen

Instagram, youtube, linkedin API: De grote social media netwerken hebben allen hun eigen API waar de social stream van waterstoring in opgehaald kan worden.

Combined social media API ( Dit is een work in progress met vrijwel geen documentatie, ik raad hem af ) https://github.com/iatek/social-media-api

57


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Mogelijkheden voor heatmaps (was high risk, nu met eigen code niet meer) Hieronder staan een aantal API’s die mogelijk voor heatmaps kunnen worden gebruikt, echter is dit een slechte oplossing omdat deze vaak veel beperkingen hebben. Ik heb hiervoor dan ook mijn eigen code geschreven waarbij ik gebruik maak van de library heatmapJS

Mouseflow api: Niet inkijkbaar van buitenaf, tenzij je ervoor betaalt. In de documentatie staat dat het mogelijk is om vanuit de API opnames/heatmaps te extracten, alleen wordt er niet aangegeven in welk formaat de opnames geoutput worden, er is dus een slechte documentatie. http://www.patrick-wied.at/static/heatmapjs/example-heatmap-click.html bovenstaand is een tool voor het opbouwen van heatmaps op een website. Deze heatmaps zijn niet standaard op te slaan vanaf buitenaf, en de gebruiker zal de heatmap zien, er zal dus custom code geschreven moeten worden. Dit zou eventueel wel live gemaakt kunnen worden is mijn inschatting door heatmaps te combineren. Alle alternatieven zijn betaald.

ADWORDS API  

Werkt op het SOAP 1.1 principe Werkt met 4 categorien:

De functionaliteiten van de adwords API: Campaign Data Management CampaignService Create, update, and delete campaigns. A campaign organizes one or more ad groups together and has its own budget, bidding strategy, serving date range, and targeting settings. AdGroupService Create, update, and delete ad groups. An ad group organizes a set of ads and criteria together, and also provides the default bid for its criteria. AdGroupAdService Create, update, and delete ads.

58


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

CampaignAdExtensionService, AdExtensionOverrideService Create, update, and delete ad extensions. Campaign ad extensions enrich standard text ads by adding location information, additional links, or a phone number to all ads within a campaign. You can use ad extension overrides to specify a unique location on a per-ad basis. CampaignCriterionService, AdGroupCriterionService Create, update, and delete criteria. A criterion describes the conditions that determine whether an ad should appear. ConversionTrackerS ervice Measure the effectiveness of your ads and keywords by learning what happens after a user clicks on your ad. Dataservice Retrieve ads campaign management data, based on specified criteria. FeedService, FeedItemService, FeedMappingService, AdGroupFeedService, CampaignFeedService Create custom data feeds for use in managing site, phone, and app link extensions. UserListService Create, update, and delete user lists. Use user lists and user list criteria to display ads to people who have previously triggered a conversion event on your website. BudgetService Create, update, and delete budgets. Use to manage budgets that can be shared across campaigns.

Optimization Use the optimization services to retrieve performance statistics and discover ideas for new criteria. ReportDefinitionService Create and download a variety of performance reports. TargetingIdeaService Generate new keyword and placement ideas based on parameters you specify.

59


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

TrafficEstimatorService Get traffic estimates for proposed campaigns, ad groups and keywords. ExperimentService Create and run campaign experiments where you can test keywords, bids, and placements. Account Management Use the account management services to track your account activity. AlertService Retrieve all MCC alerts for a given account. CustomerService Retrieve basic details about a client account. CustomerSyncService Retrieve a record of campaign data changes within a specified date range. ManagedCustomerService Manage client accounts and links between MCC and client accounts. Utility Use these utility services as necessary to perform other tasks with the AdWords API. MutateJobService Process a large batch of campaign data operations asynchronously. Bulk mutate jobs take longer to complete than synchronous calls to the standard web services, but the processed operations are half the cost. GeoLocationService Retrieve coordinates and the canonical address for a specified address. MediaService Upload and retrieve IDs for media you use in media-based ads (such as image or video ads). ConstantDataService Retrieve constant values used by the API. LocationCriterionService Retrieve the ID of a Location criterion.

60


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Beoordeling bedrijfsbegeleider Tijdens mijn eindgesprek is het eindreflectie formulier besproken en ingevuld. Omdat veel punten op het formulier veel uitgebreider zijn besproken dan genoteerd heb ik het eindformulier uitgetypt met mijn eigen aantekeningen van wat Kees, mijn bedrijfsbegeleider allemaal gezegd heeft. Tevens heb ik het originele formulier in gescand en erachter bijgevoegd.

EVALUATIE BEDRIJFSBEGELEIDER: Naam begeleider: Kees Verburg Bedrijf: DPDK Datum 19/12/2013

Professionaliteit Communiceren De student kan zijn ideeĂŤn en boodschap op een inspirerende en zakelijke wijze (verbaal, Non verbaal en schriftelijk) over brengen. In werkbesprekingen onderbouwt de student zijn werk/keuzes met duidelijke argumenten. Tijdens gesprekken met collegaâ&#x20AC;&#x2122;s en/of opdrachtgevers luistert hij actief. Bram is altijd actief bezig met vergaderingen en besprekingen, zeker binnen zijn team. Dit was in het begin wat minder maar dit heeft hij tijdens zijn stage al vrij snel opgepakt. Wel moet Bram opletten dat hij tijdig om hulp vraagt als hij ergens niet uit komt.

Organiseren De student maakt een persoonlijke planning (eventueel op basis van een bestaande projectplanning). De student voert deze planning ook uit: hij komt zijn afspraken na en stelt zich flexibel op in het bijstellen van de planning bij onverwachte veranderingen (bijvoorbeeld, verandering van een deadline). Tevens zorgt de student voor een productieve werkomgeving en vraagt hij tijdig om hulp indien er zich problemen voordoen tijdens de uitvoering van een project. Bram vraagt bij sommige projecten niet snel om hulp, dit is zowel goed als slecht aangezien Bram hierdoor wel een hoop op eigen onderzoek uitgaat maar daarnaast te lang over sommige dingen doet terwijl de kennis overal om hem heen rondloopt. Verder is Bram door zijn technische kennis breed inzetbaar en hier hebben we dan ook gebruik van gemaakt. Zeker tegen het einde heeft Bram soms aan meerdere projecten tegelijk gewerkt wat voor geen enkel probleem zorgde.

61


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Samenwerken De student is een teamplayer die in een multidisciplinair team goed functioneert en een positieve bijdrage levert aan de teamspirit. De student staat open voor andere ideeën of invalshoeken van andere teamleden en gaat op een constructieve wijze om met feedback, zowel in het geven als het ontvangen. Tevens herkent de student de kwaliteiten van anderen en van zichzelf en weet hij deze te benutten. Bram heeft een fijne persoonlijkheid en ligt goed in het team. Wanneer Bram feedback ontvangt verwerkt hij dit ook altijd in zijn werk en dit is terug te zien al moet Bram wel zorgen dat hij hier consequent mee omgaat. Soms vergeet Bram puntjes uit eerdere feedback, wat logisch is aangezien je pas net begonnen bent maar hier zijn nog wel stappen te maken.

Ondernemend De student beschikt over een initiatiefrijke en proactieve houding, hij voorziet en signaleert problemen en lost ze indien mogelijk zelf op. Tevens herkent de student kansen, formuleert voor zichzelf uitdagende doelen en vertaalt hij zijn ideeën in daden. Bram is altijd actief bezig en probeert problemen altijd zo goed mogelijk op te lossen. Toch is het belangrijk voor Bram om altijd een stapje terug te doen en het grote plaatje niet te vergeten. Soms vergeet Bram het grote plaatje waardoor er zaken gemist worden die later alsnog aan de deelproducten toegevoegd moeten worden. Dit is moeilijk en dit zal nog wat tijd kosten, maar hier is nog winst te behalen.

Creatief probleem oplossen De student is nieuwsgierig, durft risico’s te nemen, staat open voor nieuwe ideeën en heeft een onderzoekende houding. De student komt met passende oplossingen en antwoorden voor problemen en vragen die tijdens projecten naar voren komen. De student maakt daarbij gebruik van verschillende informatie en inspiratiebronnen, en legt daartussen nieuwe verbanden. Prima, Bram heeft veel eigen onderzoek gedaan. Zo heeft hij voor het dashboard project van Little Alice zelf veel onderzoek gedaan naar het implementeren van heatmaps en hier zelfstandig een prototype voor gemaakt. Ook heeft Bram een goede werkhouding en veel zelf actief uitgezocht voor het leren van Drupal, BackboneJS en Phalcon.

62


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Beroepsvaardigheden Usability onderzoek De student kan de doelgroep objectief beschrijven aan de hand van een onderzoek. De student weet hierbij de juiste methoden en technieken te selecteren om tot een concrete gebruikersbehoeften te komen. De student is in staat om tijdens interviews actief te luisteren en zich in rapportages neutraal op te stellen. De student is in staat om gebruikerstaken te definiĂŤren en met andere ontwikkelaars functionaliteiten te beschrijven (te specificeren) met name op het oog van usability en kan deze functionaliteiten onderscheiden in verschillende groepen (technische, functionele, operationele). De student kan gebruikersbehoeften met de interfacemogelijkheden van het mediaproduct afstemmen. De student is in staat interfacevoorstellen tijdens diverse stadia van het ontwikkelproces te testen en selecteert hiervoor de juiste methode. Tijdens het dashboardproject is Bram dagelijks in gesprek gegaan met de opdrachtgever, hier heeft hij steeds aantekeningen bij gemaakt en heeft vanuit de klant zijn ogen actief meegedacht. Ook het testen van producten heeft Bram gedaan.

Usability Engineering De student is in staat om tijdens een ontwikkelproces de gebruiker van het eindproduct centraal te stellen. Startpunt is de gebruiker van waaruit requirements (behoeften en wensen) worden gedestilleerd en dienen als input voor het ontwerp en realisatieproces. Tijdens het gehele proces vindt er een terugkoppeling plaats en toetst de student of aan de gebruikersbehoefte is voldaan. De student is in staat om buiten het eigenlijke product na te denken over usability aspecten, in de vorm van installatie, configuratie en onderhoud. Bram heeft een goed beeld van wat de eindgebruiker verwacht van een systeem en weet hier dan ook mee op te springen wanneer hij aan projecten werkt. Bram denkt vanuit de eindgebruiker bij het ontwikkelen van functionaliteiten. Ook is Bram erbij wanneer terugkoppeling met de producers plaatsvind.

Analyseren De student weet professionele gereedschappen toe te passen om te komen tot een kwalitatief hoogstaande analyse. De student kan ictdeelsystemen analyseren en relatie (interfaces) tussen systemen beschrijven, en houdt hierbij rekening met mensen, middelen en mogelijkheden. De student heeft inzicht in context (mensen / organisatie) waarin het product effectief is. De student is in staat om een eisenpakket op te maken a.d.h.v. een complexe situatieschets. Hij kan een bedrijfsprocesanalyse uitvoeren en de workflow in een bedrijf beschrijven. De student is in staat om zowel kwantitatief als kwalitatief onderzoek naar het proces uit te voeren. De student kan een analyse modelleren in diagrammen en overzichten en houdt bij terugkoppeling rekening met de belevingswereld van het publiek. Bram heeft analyserapporten geschreven met als uitstekend voorbeeld de testrapporten, functiebeschrijvingen en toekomstadviezen voor het dashboardproject van Little Alice. Verder heeft Bram steeds deelproducten getest en hierover verslag uitgebracht bij zijn team en producers.

63


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Adviseren De student kan advies uitbrengen op basis van beperkte klantgesprekken, waarin de student in staat is de nodige aspecten te verhelderen voor een duidelijk advies. Advies richt zich op technische problemen (keuzes kunnen maken tussen technische oplossingen en deze duidelijk communiceren binnen de beleving van doelgroep) Daarbij maakt de student gebruik van kennis van de meest gangbare ontwikkelomgevingen / frameworks / programmeertalen, met sterktes en zwaktes van elk. Dit ging vooral goed bij het dashboardproject waarbij Bram zelf onderzoek deed en vervolgens met dit als basis adviezen uitbracht naar Pim en Sanne. Echter kan Bram nog wel wat stappen maken in het overbrengen van zijn kennis naar de rest van zijn collegaâ&#x20AC;&#x2122;s zonder dat hier om gevraagd wordt. Stappen die Bram nog kan maken is het gevraagd en ongevraagd advies geven. Wanneer Bram denkt dat iets beter kan dan zou het goed zijn om dit tegen de desbetreffende persoon, op gepaste manier, te vertellen.

Interactie / interface ontwerpen De student is in staat zijn om aan de hand van de opgestelde specificaties, in samenhang met analyserapport en adviesrapport het ontwerp van een media en/ of softwareproduct op te stellen. Het interactie/ interfaceontwerp bevat een volledige uitwerking van de specificaties uit de analysefase. Dit is niet aan bod gekomen tijdens Bram zijn stage, dit wordt gedaan door de afdeling creatie.

Technisch ontwerpen De student kan meerdere ontwerpmethoden en technieken toepassen in het ontwerp van een Media en/of softwareproduct. De student is in staat om interfaces tussen systemen te beschrijven en daarbij onderscheid te maken tussen functionele, nietfunctionele en technische eisen. Het ontwerp en de daarbij behorende principes die zijn ontwikkeld, zijn vastgelegd in een Design Document. Het documenteren van eisen en functionaliteiten heeft Bram wel netjes gedaan, echter maken we haast geen gebruik van ERDâ&#x20AC;&#x2122;s of klassendiagrammen omdat dit allemaal door Drupal zelf wordt afgehandeld. Dit had echter wel een mogelijkheid geweest voor Bram om dit zelf te doen. Vergeet dus niet te formaliseren!

64


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Realiseren De student kan diverse ontwikkelomgevingen / frameworks / programmeertalen toepassen, voornamelijk op niveau van syntaxis, inhoud van libraries, toepasselijke design patterns en best practices voor de gekozen omgeving. De student is in staat zijn (eigengemaakt) ontwerp ('van scratch af') te implementeren en te testen. Bram had toen hij bij ons begon geen kennis van Drupal en dit heeft hij zich dan ook vrij snel eigen gemaakt evenals een aantal javascript plugins en frameworks en zelfs is hij bezig geweest met een project in een PHP OOP framework. Voor The Hague Summerschool heeft Bram zelf de opzet gemaakt en het project uitgewerkt op basis van een design, dit is goed verlopen en binnen de begrote tijd. Wel moet Bram opletten dat hij blijft documenteren. Zo wordt er soms commentaar vergeten te plaatsen bij stukken code en wordt het gebruik van externe plugins niet altijd gedocumenteerd.

Opleveren De student kan een acceptatietest uitvoeren op een product en heeft kennis van belangrijke aspecten die daarbij komen kijken. De test is volgens vastgestelde standaarden getest: correctheid, compleetheid, usability, pakket van eisen (requirement tracing/acceptatietest), oplevering volgens implementatieplan. De student kan bij de oplevering van een product beoordelen of deze voldoet aan algemene kwaliteitsstandaarden. Bram verwerkte de feedback uit vorige projecten en punten altijd in zijn volgende werk, evenals de learnings die hij zelf uit onderdelen haalde. Daarnaast testen we binnen DPDK ons eigen werk altijd in meerdere browsers en platformen voordat we het opleveren, zo ook Bram. Echter moet Bram wel opletten dat hij hier consequent mee omgaat omdat er soms vergeten wordt om te testen. Secuur werken is dus een actiepunt.

Feedback Wat zijn de sterke punten van de student? Bram is een enorme doorzetter, we hebben Bram nog nooit horen zeggen dat hij het opgeeft wanneer hij ergens echt niet uit komt. Dit is erg positief en is ook een vereiste als je in korte tijd veel wilt kunnen leren. Daarnaast is Bram een behulpzame jongen. Hij zal nooit weigeren je te helpen of met je mee te kijken, wel heeft hij soms geen tijd maar dan komt hij altijd later nog even langs om te kijken of het al gelukt is. En Bram ligt goed in de groep en in zijn team. Hij werd naarmate zijn stage verliep ook steeds bijdehanter en begon meer opmerkingen te maken wat ervoor zorgt dat je elkaar gemakkelijker kunt aanspreken over fouten en feedback geven. Bram heeft een gemakkelijke persoonlijkheid.

65


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Wat zijn verbeterpunten, waar moet de student aan gaan werken? Zorg dat je gebruik maakt van de kennis om je heen wanneer deze aanwezig is. Probeer niet te lang zelf te tobben over een probleem. Bram heeft nu nog wel eens moeite om problemen los te laten en de conclusie te trekken dat hij er zelf niet uitkomt. Tip: probeer de 10 minuten regel aan te houden, als je ergens zelf niet uitkomt waarvan je weet dat het niets nieuws is binnen 10 minuten vraag dan om hulp. Ook moet Bram nog werken aan het documenteren van bevindingen en zijn werk. Wees consequent in het schrijven van commentaar in je code en blijf altijd goed documenteren wanneer je een plugin of andere externe resource gebruikt waar deze vandaan komt en hoe deze werkt.

66


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Beoordeling bedrijfsbegeleider (gescand) Hierbij het originele beoordelingsformulier van mijn bedrijfsbegeleider inclusief handtekening:

67


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

68


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

69


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

Zelfevaluatie formulieren

70


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

71


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

72


Stageverslag | De Pannekoek en De Kale | Bram van der Giessen | Mediatechnologie | 0835926 | 2013

73


Stageverslag 3e jaars stage DPDK