Goldmund, Wyldebeast & Wunderliebe

2015

Goldmund, Wyldebeast & Wunderliebe EEN STAGEVERSLAG WAARIN ALLES NAAR VOREN KOMT VAN MIJN WERKZAAMHEDEN TIJDENS MIJN STAGE IN HET BEDRIJF KJETTIL HENNIS, 500666420 INFORMATICA; HUMAN CENTERED DESIGN 23 JANUARI 2015

Hogeschool van Amsterdam | Stageverslag

Samenvatting Goldmund, Wyldebeast & Wunderliebe is een web applicatie ontwikkelaar, web hosting en -support bedrijf. Ze werken voornamelijk met het CMS programma genaamd Plone. De grootste opdracht dat ik heb gedaan, was voor de Koninklijke Nederlandse Akademie van Wetenschappen. Daarvoor heb ik samen met Kenneth de templates voor hun nieuwe website gebouwd. Voor dat we de templates zijn gaan bouwen, heb ik nog een onderzoek gedaan naar de verschillende grid systems die er allemaal zijn. Daaruit is een shortlist van drie gekomen die ik verder ben gaan testen door ze te gebruiken in verschillende pagina’s van de KNAW website. Het advies hebben we dan voorgelegd aan KNAW. Na het keuze moment zijn Kenneth en ik ermee aan de slag gegaan. We hebben drie workshops gegeven waarin we laten zien hoever we zijn met het bouwen van de webpagina’s. Van de webpagina’s heb ik de portlets op de webpagina’s gedaan samen met de styling die daarbij hoort. Verder heb ik opdrachten gedaan voor GWW zelf, NSDSK en Cordaid. Voor GWW zelf moest ik onder andere kijken naar hun eigen website en de onderzoeken op verbeterpunten. Mijn bevindingen moet ik dan opschrijven in een verslag. Voor Cordaid heb ik onder andere mee gebouwd aan Bond Zonder Naam. Daar moesten templates voor worden gemaakt, wat mijn taak dus was. Dat ging niet volgens plan. Niet alle programma’s die we wilde gebruiken voor dit project kon we laten draaien, omdat ze niet goed waren geïnstalleerd. De oorzaak lag aan het feit dat ik werkte met een Linux systeem. Over mijn hele stageperiode kan ik heel tevreden zijn. Ik heb veel nieuwe dingen geleerd zoals Gulp, SASS en Linux. Ik heb veelvuldig gewerkt met Git en de commandprompt. Al deze ervaringen wil ik na mijn stage verder uitbreiden en de verworven kennis wil ik gaan toepassen in andere projecten.

1


Summary Goldmund, Wyldebeast & Wunderliebe is a web application developing company, which also do webhosting and web-support. They work mostly with a CMS-tool called Plone. The main assignments I did during my internship was the one for the ‘Koninklijke Nederlandse Akademie van Wetenschappen.’ For them I worked on the templates together with Kenneth for their new website. Before this part of the project I also did research to different grid systems which can be applied to the website. I had to search for the best to use. I created webpages to test the grid systems from the shortlist. With the advice that came out of the test we went to KNAW. When they choose the grid system we started to work on the templates they already gave us. Of the templates I did create the portlets they going to use and I created the styling for those portlets. In addition I did some assignments for NSDSK, Cordaid and GWW itself. For the company itself I examined their own website for flaws. I put the results of my research in a report. I worked on a assignment for Cordaid called Bond Zonder Naam. I had to build to templates. It didn’t go as well as the KNAW project because of the installations of different tools didn’t succeed well. The cause of that is maybe the Linux system I had to work with. Generally speaking I am happy about my internship. I have learned a lot of new things such as Gulp, SASS and of course Linux. I have worked a lot with Git and the command line. I want to develop more those experiences I had. Maybe those opportunities come after this internship during my minor.

2


Inhoudsopgave Samenvatting

1

Summary

2

Inhoudsopgave

3

Inleiding

5

1.1 Achtergrond

6

1.1 Oprichting

6

1.2 Wat doen zij?

6

1.3 Klanten

6

1.4 Werkdag

6

2. De Koninklijke Nederlandse Akademie van Wetenschappen

7

2.1 Het project

7

2.2 Vooronderzoek

7

2.3 Shortlist 2.3.1 De grid systems 2.3.2 Testen van de grid systems

8 8 9

2.4 Keuzemoment

9

3. Ontwikkeling & Workshops

11

3.1 Samenwerking met Kenneth 3.1.1 Taakverdeling 3.1.2 Gulp

11 11 11

3.2 Workshops 3.2.1 Workshop #1 3.2.2 Workshop #2 3.2.3 Workshop #3

12 12 12 12

4. Overige Werkzaamheden

13

4.1 GWW

13

4.2 NSDSK

13

4.3 De nieuwe GWW website

13

4.4 Cordaid 4.4.1 Kinderstem 4.4.2 Bond Zonder Naam

13 13 14

3

Hogeschool van Amsterdam | Stageverslag 4.5 Stageverslag

14

5. Reflectie

15

5.1 Het technische gedeelte

15

5.2 Bedrijf zelf

16

5.3 De samenwerking

16

5.4 Communicatie

16

6. Conclusie

17

Bijlagen

18

1.

GWW Verslag over mijn adviezen

18

2.

Vergelijkingstabel Grid Systems

19

3.

Testresultaten uit Google Chrome Development Tool

20

4.

Stukje KNAW code

25

4


Inleiding Dit verslag is geschreven in het kader van de stage die ik heb gelopen bij dit Goldmund, Wyldebeast & Wunderliebe. Tijdens mijn stage heb ik van alles gedaan. Het idee was dat ik gewoon ging mee helpen aan verschillende projecten om zo mijn vaardigheden te vergroten. Ik wilde meer technieken binnen de front-end leren en natuurlijk nieuwe dingen ontdekken. Dit verslag is opgebouwd uit de volgende onderdelen. Het eerste hoofdstuk gaat over het bedrijf. Wat doen ze allemaal? Wie werken er allemaal? Wie zijn klanten van GWW? Dat soort vragen komen in dit hoofdstuk aan. De hoofdstukken daarna gaan allemaal over de opdrachten die ik heb gedaan. Tijdens mijn tijd hier heb niet alleen maar aan één opdracht gewerkt. Ik heb meegeholpen aan meerdere opdracht. Twee hoofdstukken heb ik gebruikt om mijn grootste opdracht te vertellen. Dat is de opdracht van KNAW. Al de informatie daarover komen terug in hoofdstuk drie en vier. In hoofdstuk vijf vertel ik over de andere wat kleinere opdrachten die ik heb gedaan. Bijvoorbeeld iets voor GWW zelf, wat voor Cordaid en nog een aantal. Daarna komt mijn reflectie. Hoe kijk ik terug op mijn stage bij GWW? Heb ik veel geleerd? Wat kan beter de volgende keer? Enzovoort.

5


1.1 Achtergrond 1.1 Oprichting Goldmund, Wyldebeast & Wunderliebe is in 2006 opgericht tijdens een fusie van Goldmund, een marketingbedrijf, en Wyldebeast & Wunderliebe, een webapplicatie ontwikkelaar. Ze maakte veel gebruik van elkaars diensten. Dus hebben ze besloten om samen te gaan. Ondertussen telt het bedrijf zeven software engineers en twee Search Engine Optimizers.

1.2 Wat doen zij? GWW richt zich vooral op het maken, beheren en support van verschillende webapplicaties. Daarbij maken ze gebruiken van CMS-software als Plone, Django en Diazo.

1.3 Klanten Wie zijn allemaal klanten van GWW? GWW heeft veel verschillende klanten gehad voor wie zijn hun website heeft gebouwd. Bijvoorbeeld Academic Transfer, Koninklijke Nederlandse Instituut van Wetenschap, Nederlandse Stichting voor Doven en Slechthorend Kind?

1.4 Werkdag Mijn standaard werkdag begint rond 09:15 uur en 09:30 als ik binnen kom in het kantoor. Ik zet mijn werkplek op waar ik kan en ik ga aan de slag. Even over 10:00 uur gaan we een stand-up doen met het kantoor in Groningen. Tijdens de stand-up doet iedereen zijn zegje. Dat zegje gaat dan over wat je gister hebt gedaan en wat je vandaag van plan bent te gaan doen. Tussendoor is er nog wel even tijd voor wat vrije tijd. Een potje tafeltennis of tafel voetbal bijvoorbeeld. Zo rond 17:30 is het tijd om naar huis toe te gaan.

6


2. De Koninklijke Nederlandse Akademie van Wetenschappen Deze was de grootste opdracht waar ik aan heb gewerkt tijdens mijn stage. In dit hoofdstuk vertel ik over het eerste deel van het project en hoe het project is opgebouwd in zijn geheel is opgebouwd.

2.1 Het project Het KNAW heeft al door GWW een website laten bouwen. Alleen deze website is niet responsive. Ze hebben dus afgesproken dat GWW het responsive gedeelte ook gaat bouwen, met behulp van een grid systeem. Tijdens mijn stage is naar voor gekomen dat het een goed plan leek om mee te doen aan dit project. Het hele project bestaat uit een aantal onderdelen. Het vooronderzoek naar de grid systems, het keuzemoment voor KNAW om een grid system te kiezen, het bouwen van de templates tijdens drie workshops, de templates implementeren in het CMS en de oplevering en het akkoord van het project. Dan is het project klaar.

2.2 Vooronderzoek Mijn deel van dit project besloeg het gedeelte van vooronderzoek tot het bouwen van de templates. Tijdens het vooronderzoek ben ik op zoek gegaan naar allemaal verschillende grid systems die we kunnen gebruiken voor de website van KNAW. Als er een aantal grid systems zijn gekozen, worden ze met elkaar vergelijken waar uit een shortlist wordt opgemaakt. Om de beste grid systems te kiezen, wordt met elke grid system drie webpagina's gebouwd. De daaruit gehaalde testresultaten gaat GWW voorleggen aan KNAW. Het kiezen van de juiste grid systems viel toch erg tegen. Er zijn zoveel grid systems om uit te kiezen en elk hebben ze hun eigen voordelen en nadelen. Om toch een goed lijstje te nemen kiezen we tien grid systems uit die eventueel gebruikt kunnen worden. Wat ook een lastig punt was, was het kiezen van punten waarop de grid systems moeten worden vergeleken. Het was lastiger dan ik dacht. Het kostte mij veel moeite om te bedenken op welke punten de grid systems vergeleken kunnen worden. Met overleg met mijn bedrijfsbegeleider en Patricia, een van houdt zich voornamelijk bezig met python en designs. Samen met hen werd bepaald op welke punten de grid systems vergeleken moet worden. Deze punten werden alleen maar vastgelegd voor later als de lijst met grid systems om te vergelijken klaar is. Ik ben dus naar verschillende grid systems gaan kijken zonder diep in te gaan op de punten waarop de grid systems zullen worden vergeleken. Uit dit vooronderzoek kwamen twaalf grid systems naar voren die uiteindelijk met elkaar worden vergeleken.

7

Hogeschool van Amsterdam | Stageverslag Dat zijn deze twaalf geworden: 1. 1140 2. Foundation 3. Golden Grid System 4. Profound 5. ResponsiveGridSystem 6. Simple Grid 7. CSS Smart Grid 8. Mueller Grid System 9. Responsive.gs 10. Gridiculous 11. SkelJS 12. Flexbox Deze grid systems zijn in een vergelijkingstabel gezet. De punten waarop de grid systems zijn vergeleken zijn in ieder geval de maximale resolutie. Verder onder andere de leesbaarheid, de complexiteit, de grootte en de beschikbaarheid van het bestand. Bij beschikbaarheid moet je denken hoe je het kan verkrijgen als zip, via Github of misschien zelfs op een andere manier. Het allerbelangrijkste is misschien wel deze: In welke webbrowsers kunnen de bestanden worden gebruikt. Daarbij zijn de vijf grootste webbrowsers gebruikt. Deze zijn: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari en de Opera webbrowser.

2.3 Shortlist Daaruit heb ik een shortlist gemaakt van de grid systems die een goede oplossing kunnen zijn. De grid systems die ik heb gekozen zijn Responsive.gs, SkelJS en Flexbox. Deze grid systems zijn uitgekozen, omdat zij als beste uit de vergelijkingstabel zijn gekomen.

2.3.1 De grid systems Responsive.gs maakt gebruik van de al bestaande CSS-regels. Met behulp van media-query’s kunnen de verschillende styling worden toegepast. SkelJS is een op Javascript gebaseerde grid system. Er is een apart stukje Javascript waarin de responsiveness en Flexbox is een hele nieuwe CSS standaard om flexibele grid systems te bouwen. Deze grid systems hebben elk hun eigen voordelen en nadelen. Om ze testen hebben we drie verschillende webpagina's genomen en die nagebouwd met daarin de grid systems geïmplementeerd.

8


2.3.2 Testen van de grid systems Er zijn drie verschillende webpagina's gebruikt om de grid systems te testen. Deze zijn: de homepage, deze heeft nog een Javascript gedeelte in de vorm van een carrousel. Een contentpagina, op deze staat gewoon een verhaal over KNAW, met daarnaast een navigatie, nieuws items en andere portlets. En verder nog een ledenpagina met daarop allemaal afbeelding van de leden. Met deze drie pagina's krijg je verschillende indrukken tijdens het testen van de grid systems, omdat ze verschillende structuren hebben. Het schept een duidelijk hoe goed de grid systems te implementeren zijn. Tijdens het bouwen van de pagina's ontdekte ik al gauw - na de gebruikelijk moeite om het te begrijpen hoe de grid system in elkaar zit – dat Flexbox een hele handige grid system is. Het werkt soepel en is snel te begrijpen. Ik had binnen een paar uur door hoe werkte. Bij Responsive.gs en SkelJS kostte het wat meer moeite. Nadat ik alle webpagina's heb gebouwd, hebben we met behulp van de Chrome Developer Tool opgemeten hoelang de laadtijd is, hoeveel geheugen het kwijt is aan het herladen van de webpagina's en het resizen van de webbrowsers. Uit de test is gebleken dat de webpagina's gebouwd op SkelJS er veel langer over doen om te herladen en of te resizen. Flexbox en Responsive.gs daarentegen doen veel sneller over om een webpagina te laden. De laadtijden van deze twee grid systems zijn ongeveer even snel. SkelJS viel dus al snel af, omdat SkelJS gebaseerd is op Javascript. Dat kost geheugen en hoe meer Javascript een webpagina moet laden, hoe langer het voordat een webpagina's helemaal is geladen. In een tijd waarin soepelheid van technologie een vereiste is, is dat toch een groot minpunt. Een andere reden is dat Javascript soms wordt uitgeschakeld om de snelheid van het laden te verhogen, maar dat zorgt er ook voor dat de responsiviteit van de webpagina's niet zichtbaar is.

2.4 Keuzemoment Tussen al dat getest door met de grid systems had ik het met Sonja, een werkneemster van KNAW die de website onderhoudt binnen het KNAW, over de grid systems die ik aan het testen was. Daaruit zijn we tot dezelfde conclusie gekomen dat Flexbox een prima kandidaat is om te gebruiken. Zelf was ze er ook heel tevreden over. Ze zag dat Flexbox heel vriendelijk is om mee te werken. Beter dan bijvoorbeeld Responsive.gs en SkelJS. Toen naar mijn mening werd gevraagd heb ik gezegd dat Flexbox een hele goede kandidaat is om te gebruiken voor de website. Het moet natuurlijk een standaard gaan worden voor het bouwen van grid systems. Het testen van de grid systems bracht het ook naar buiten. Flexbox is simpel, is goed te gebruiken en het ziet er ook goed uit. Na goed doorlezen van de documentatie kan je het ook aardig onder de knie hebben.

9

Hogeschool van Amsterdam | Stageverslag Ons advies is dus dat KNAW voor Flexbox moet gaan kiezen. Douwe en ik zijn met het advies naar KNAW toe gegaan en hebben het voorgelegd. Sonja en KNAW zelf zagen ook dat Flexbox de beste keus was voor ze, omdat het de standaard moet gaan worden. Het resultaat zag er goed. Sonja was er ook heel tevreden over hoe Flexbox is. Er was alleen één groot probleem. Dat is de browsercompatibiliteit. Flexbox is namelijk niet compatibel met Internet Explorer 9. Nu lijkt dat niet zo'n groot probleem, maar nu wil het zo zijn dat veel bezoekers van de website via Internet Explorer, via versie 9 komen. Dat het niet compatibel is, komt omdat het nog in de ontwikkelfase zit. Het is dus nog testen en testen voordat alle functies die Flexbox heeft ook volledig wordt ondersteund door alle webbrowsers en dus ook Internet Explorer 9. De keuze om Flexbox te nemen komt eigenlijk een paar jaar te vroeg. Een mogelijkheid was ook om twee aparte stylesheets te maken. Een voor de Internet Explorer 9 en een voor alle andere webbrowsers die we ondersteunen. Maar dan wordt het alleen maar lastiger met het onderhoud voor KNAW, wat het dus duurder maakt voor KNAW. Dat KNAW niet zitten. Het definitieve keuzemoment was de maandag daarna, zodat ik nog een paar dagen de tijd had om te kijken of er een workaround is of een bepaalde script die ervoor kunnen zorgen dat Flexbox kan worden gebruikt binnen Internet Explorer 9. Deze mogelijkheid heb ik helaas niet gevonden, dat heb ik doorgegeven aan Sonja. Ze hebben uiteindelijk besloten om Responsive.gs te kiezen.

10


3. Ontwikkeling & Workshops Na het keuzemoment zijn we aan de slag gegaan met het bouwen van de templates. Hoe de hele ontwikkeling is gegaan, wordt alle maal verteld in dit hoofdstuk.

3.1 Samenwerking met Kenneth Deze opdracht heb ik in samenwerking met Kenneth gedaan. Hij komt uit het hoofdkantoor in Groningen. Hij houdt zich vooral bezig met de design en is goed in HTML en CSS.

3.1.1 Taakverdeling We hebben met elkaar afgesproken dat Kenneth de structuur van de pagina's maakt en het Javascript gedeelte. Ik maak dan de portlets en ik doe de nodige aanpassingen aan de webpagina’s aan de hand van het commentaar dat KNAW heeft. Het is toch best wel veel werk geweest, het bouwen van de portlets. De styling van de portlets is namelijk voor elke soort pagina anders. De reden dat we de portlets los van de pagina’s maken is, omdat de webpagina's uiteindelijk wordt ontwikkeld in het door GWW gebruikt CMS programma Plone. Plone maakt gebruikt portlets naast gewone content en door die portlets te identificeren kunnen ze zo door Plone worden overgenomen.

3.1.2 Gulp Voor het bouwen van de templates maakte Kenneth en ik gebruik van een redelijk nieuw systeem genaamd Gulp. Met Gulp kan je taken automatisch laten uitvoeren door middel van plug-ins. Het is vergelijkbaar met Grunt. Bijvoorbeeld het controleren van gewijzigde bestanden en die weer compileren naar bijvoorbeeld CSS. Kenneth zocht een manier om zo simpel mogelijk de portlets in de webpagina’s te implementeren. Met een plug-in van Gulp is dat mogelijk. Kan je stukjes HTML-code loshalen van de webpagina en in een aparte map stoppen. Deze stukjes code kan je dan door middel ‘inserts’ overal gebruiken. Zo hoef je niet te gaan kopiëren en plakken. Daarnaast hebben we gebruik gemaakt van SASS, CSS, Javascript en HTML. Met behulp van Compass, een ander systeem, kan SASS compileren naar CSS. SASS brengt veel voordelen met zich mee. Je kan met SASS mixins maken, waardoor je een variabel kan aanmaken die overal gebruiken. Dat kan met kleuren, borders, fonts en noem maar op. Dit zorgt ervoor dat we sneller alle pagina's kunnen afwerken. Er zijn verschillende portlets. Deze portlets hebben een algemene styling, styling dat op de meeste pagina's hetzelfde is. Sommige portlets hebben ook hun eigen styling die op elke pagina verschillend kan zijn. Dit zorgde voor moeilijkheden, want hoe zet je een goede structuur op waardoor de algemene styling goed toegepast kan worden en dat de juiste styling op de juiste pagina wordt toegepast. Ik had moeite met het ontdekken van de juiste structuur hierin.

11

Hogeschool van Amsterdam | Stageverslag Zowel op HTML als op SASS gebied zorgt dit voor de nodige moeilijkheden aan mijn kant. Aan de HTML kant ging het vooral om het juist identificeren van tags door middel van id's en klassen. Aan de SASS kant ging het juist om de structuur om die verschillende portlets te stijlen met algemene en portlets specifieke styling. De eerste poging was de styling opzetten per portlets. Elke styling die de portlets hadden werden in hun eigen portlets gezet inclusief de algemene styling. Dit zorgde voor veel dubbele regels en al gauw zag ik dat dat niet ging werken. De tweede keer ging al een stuk beter. Een klein algemeen deel en de rest in hun sectie gespecificeerd voor de juiste porlets. Maar het was nog steeds niet wat ik wilde. Met behulp van Kenneth hebben we een goede structuur opgezet. Bestaande uit mixins voor borders en pijlen, een algemeen deel en een portlet gespecificeerd deel.

3.2 Workshops Samen met KNAW is afgesproken dat per workshop een aantal pagina's worden gebouwd met de daarbij behorende portlets en styling. Tijdens de workshops wordt dan het resultaat van de werkzaamheden voor de workshops besproken. Eventueel worden dan de eerste dingetjes al aangepast.

3.2.1 Workshop #1 Voor de eerste workshop is afgesproken om de homepage en de contentpagina te maken. Tijdens de eerste workshop werd er feedback op de pagina's gegeven. De pagina’s worden gebouwd aan de hand van de design die zijn gemaakt. Deze styling moeten we ook aanhouden. Dus alle op- en aanmerkingen zijn gebaseerd op deze ontwerpen. Na het weekend komt er nog een lijst waarop alle op- en aanmerkingen staan dat KNAW heeft ontdekt.

3.2.2 Workshop #2 Voor de tweede workshop is afgesproken om de twee-kolommen- en de drie kolommenpagina te gaan bouwen. Daarbij is het commentaar uit de vorige workshop ook meegenomen. Er moet wel gezegd worden dat we niet alle commentaar hebben meegenomen, omdat daar geen tijd voor hadden. Of het is al gedaan, maar het is niet opgemerkt. of ze konden niet worden gedaan. De punten proberen we in de volgende workshop wel mee te nemen.

3.2.3 Workshop #3 Na deze workshop zijn alle pagina's klaar en hoeven we alleen nog de op- en aanmerkingen worden meegenomen en Javascript gedeelte te maken. Daarna gaan andere de website 'realiseren' door onze templates te implementeren in Plone.

12


4. Overige Werkzaamheden De website bouwen voor het KNAW was dan wel mijn hoofdopdracht daarvoor, tijdens en daarna had ik nog andere opdrachten gedaan. Onder ander de website van GWW zelf, voor Cordaid wat dingen enz.

4.1 GWW De allereerste opdracht was het bekijken van hun eigen website. Over de bevindingen moest dan een verslag worden geschreven. Onder andere de browsercompatibiliteit, indelingen op de website, volgorde van onderdelen op de website enz. Voor dat het verslag zelf echt af was, moesten er nog vier versie worden gemaakt. Bijvoorbeeld de indeling was nog niet helemaal goed, of sommige punten werden niet goed ondersteund of uitgelegd. Uit dit onderzoek heeft GWW besloten om een nieuwe website te bouwen waarin meer gelet wordt op de front-end gericht dan op de backend.

4.2 NSDSK Dit was eigenlijk niet meer dan een tussenopdracht. Het was net zo'n zelfde opdracht als met de GWW website. Kijken of er nog punten zijn waarop ze moeten letten bij bouwen van de website.

4.3 De nieuwe GWW website Tijdens de opdracht van KNAW heeft Kenneth met mij ook gesproken over het bouwen van de nieuwe website. De bedoeling was dan om een website opbouwen van scratch vanuit het designoogpunt en niet uit het techniekoogpunt. Daarbij heb ik een Interactief Ontwerp gemaakt. Eigenlijk kon ik het Interactief ontwerp niet maken, omdat Kenneth geen debrief heeft gedaan. Daar zit ik nu een beetje klem mee.

4.4 Cordaid 4.4.1 Kinderstem Tussendoor kreeg ik nog een vraag of ik wilde kijken naar waar het beste een kruimelpad kon worden geplaatst. De beste opties heb ik doorgestuurd naar Kenneth.

13


4.4.2 Bond Zonder Naam Na de kerstvakantie is er een mail rondgestuurd dat er nieuw project van Cordaid werd aangediend voor Bond Zonder Naam. Ze willen graag een nieuwe website daarvoor hebben. Mijn taak binnen dit project was het omzetten van de templates, die zij hebben opgestuurd naar ons, vertalen naar HTML en CSS. Het idee was dat dat de styling werd geschreven in SASS en om dezelfde manier werd gecompileerd als tijdens KNAW, met Gulp dus. Dat werd door mij nog niet helemaal begrepen, dus heb ik het eerst in een andere structuur opgezet. Nadat ik deel heb ingeleverd, ben ik gaan kijken naar Gulp installeren. Ik moest Gulp weer opnieuw instellen, omdat ik op Linux systeem werkte. Het kostte dus de nodig moeite om de benodigde bestanden te installeren om gulp te laten werken. Ik heb nog nooit met Linux gewerkt dus dat was gelijk een nieuwe ervaring voor mij. Verschillende methodes zijn gebruikt om de bestanden te installeren. Uiteindelijk is het gelukt. De volgende stap was om de styling in bepaald map te zetten zodat het ook in Django kon werken. Toen kwam het tweede probleem opzetten. Django installeren. Dat lukte ook niet in een keer. Na wat hulp van collega's lukte het wel. Nadat alles was geïnstalleerd en draaide bleek dat de twee systemen in twee verschillende mappen draaide. Zo gaat het ook niet lukken. Een nieuw map werd aangemaakt waarin alles opnieuw werd ingesteld. Gulp draaide op een gegeven moment, maar Django nog niet en toen Django draaide lukte het niet meer om Gulp te laten draaien. Ondertussen is ter spraken gekomen dat het helemaal niet nodig is om Django met Gulp te laten communiceren. Ik moet gewoon met behulp van Gulp de styling maken en dan mijn werk inleveren. Uiteindelijk hebben we besloten om het niet meer met gulp te gaan doen, maar met ‘Compass watch’. Dat kan ook los draaien van Gulp.

4.5 Stageverslag Na de KNAW opdracht ben ik maar aan de slag gegaan met stageverslag. Ik heb een structuur uitgedacht waarvan ik dacht dat deze wel zou werken. En ik heb met mijn bedrijfsbegeleider afgesproken dat we elke woensdag of donderdag het verslag even gaan doornemen. Daarbij heeft hij ook aan mij uitgelegd hoe hij denkt dat het verslag eruit moet gaan zien. Welke hoofdstukken er zijn, wat in welke hoofdstukken worden verteld, enzovoort

14


5. Reflectie 5.1 Het technische gedeelte Voorafgaand aan mijn stage had ik al een idee van wat ik wilde gaan doen en leren. Ik wilde meer ervaring krijgen in het bouwen van front-end en communicatie vaardigheden met klanten, collega’s en dat soort dingen. Verder zijn nieuwe dingen leren ook iets waar ik naar uitkijk. Zijn mogelijkheden dat ik op mijn stage kom en dat ik leer met andere programma’s te werken dan ik voorheen deed? Dat soort dingen. Dat mijn eerste sollicitatie gesprek bij Cohere. Dat was uiteindelijk ook niet het bedrijf waar ik wilde werken, Ik ben daar niet aangenomen, omdat ik geen ervaring. Ja, maar daar zocht ik niet naar. Ik zocht naar een stage waar ik ervaring kon op doen, je nieuwe dingen leert. Ik heb héél veel nieuwe ervaring opgedaan. Dan wel via een opdracht waarvan ik wist dat ik daar aanging meewerken, dan wel een onverwachtse ervaring. De meeste onverwachte ervaring was toch wel met Linux werken. Mijn eigen laptop ging stuk en moest naar reparatie. Ik heb toen een desktop computer geleend van het bedrijf en daar draaide Linux op. Linux is toch heel anders dan Windows. Het ging niet vanzelf voordat ik alle programma’s had geïnstalleerd. Ik heb daar echt hulp nodig gehad. Normaal zoek ik het eerste zelf uit voordat ik ga collega’s vraag. Een andere iets waar ik mee heb gewerkt tijdens meerdere projecten is Gulp. Tijdens KNAW en Bond Zonder Naam heb ik er meegewerkt en dat was een hele leuke ervaring. Ik vond het echt handig. Vooral toen Kenneth een plug-in had toegevoegd waardoor je de website live kon veranderen. Dat was echt gaaf en leuk. Met Bond Zonder Naam heb ik het ook een tijdje gebruikt, maar we zijn later over gestapt op ‘Compass Watch’. Dat vond ik net zo soepel werken als Gulp, waarin Compass kan worden verwerkt. Er was alleen één klein minpuntje en dat was dat je ook nog een algemeen bestand moest opslaan als je wijzigingen maakt in een bestand dat wordt geïmporteerd. Dat vergat ik soms en dan zag je dus niet de veranderingen die je hebt doorgevoerd. Als je met Compass werkt, werkt je ook met SASS. Dat is een hele handig taal. Ik heb daar lekker mee kunnen werken. Mixins heb ik er mee gemaakt, echt SASS variabelen dus dat was ook een leuke ervaring. Verder heb ik veel meer geleerd over CSS. Zeker meer over hoe je structuur kan aanbrengen aan webpagina’s met behulp van de grid systems. Ik wist nog niet zoveel erover en de enige ervaring die ik al had was Bootstrap. Zeker de grid system genaamd Flexbox was een hele leuke ervaring. Het moet uiteindelijk de standaard gaan worden. Flexbox werkt goed met een minimaal aantal regels kan al een heel grid system opzetten. Omdat GWW ook buitenlanders in dienst heeft is Engels voor een groot deel de voertaal. Tijdens standups, e-mail contact gaat bijna altijd in het Engels. Dus Engels heb ik ook redelijk opgeschroefd. Ik heb het veelvuldig gesproken. Dus dat is er zeker op vooruit gegaan. Daarnaast wil ik ook zeggen dat ik veel met Git en de commandprompt heb gewerkt. Dus daar heb ik nu ook meer ervaring in gekregen. Er is één klein minpuntje en dat is Javascript. Ik heb niet zoveel me Javascript gewerkt. De enige keren waren die met SkelJS en toen ik de carrousel voor KNAW wilde maken. Daarvoor heb wel de bestaande gebruikt en die omgezet, maar voor de rest heb ik niets nieuws geleerd dus dat was jammer.

15


5.2 Bedrijf zelf Mijn ervaring over het bedrijf is heel goed. Ik vind het een prettig bedrijf om in te werken. De sfeer kan je omschrijven als zakelijk, maar ontspannen. Je ziet ze niet van negen tot vijf echt doorwerken zonder een pauze of zoiets of zonder een lach. Ze nemen echt wel de tijd voor wat ontspanning. We doen bijvoorbeeld een potje tafeltennis, een potje tafelvoetbal of zelfs een spelletje op de spelcomputer. Dat maakt dat ik het lekker vond werken in het bedrijf. Alleen maar een zakelijk sfeer werkt voor mij niet. Dat gaat mij op een gegeven moment vervelen.

5.3 De samenwerking Over het algemeen vond ik de samenwerking goed. Ik heb natuurlijk met verschillende collega’s gewerkt aan project. Dat vereist natuurlijk dat je moet samenwerken. Bij het project Bond Zonder Naam ging misschien wat moeizamer, omdat de communicatie in het Engels ging. Dat maakte het wat moeilijker. Aan mijn is dus de taak, om Engels te blijven oefenen zodat het in de toekomst beter gaat daarmee. Met mijn bedrijfsbegeleider verliep de samenwerking ook goed. Hij was niet altijd aanwezig op mijn stageplek vanwege andere verplichtingen: afspraken bij klanten bijvoorbeeld of hij werkte voor een ander bedrijf waar GWW afspraken mee had gemaakt. Met mijn stagebegeleider had ik een wat moeizamere samenwerking, vooral de communicatie verliep stroef. Dan ging het vooral om dat ik geen antwoord kreeg van hem op mail om de afspraak te verzetten. Ik heb zelfs een aantal keer gebeld, maar dan was hij weer in vergadering of zoiets.

5.4 Communicatie Voor een groot deel verliep de communicatie goed met iedereen. Elke dag wordt er een stand-up gedaan waarin je vertelt wat je gaat doen vandaag. Ze werken ook op Scrum basis. Verder communiceren we via Google Hangouts of Gmail. Het verliep soepel vooral met degene met wie ik samenwerkte. We communiceerde goed met elkaar als iets gedaan moest worden of als er iemand een vraag had. Verder heb ik niet echt nieuwe commutatieve skills opgedaan dus ik kan er niet mee verdergaan. Wel heeft mijn bedrijfsbegeleider gezegd op het beoordelingsformulier dat ik meer initiatief moet tonen. Ik ben soms nog een beetje te afwachtend. Dat weet ik van mijzelf en daar moet ik de komende tijd veel op richten.

16


6. Conclusie Ik kan tot conclusie komen dat ik heel veel heb gedaan tijdens mijn stageperiode bij GWW. Ik heb gekeken naar hun eigen website. Ik heb kleine dingetjes gedaan voor NSDSK en Cordaid Kinderstem. Dan heb je ook nog de grotere opdracht waar ik aan heb meegeholpen zoals die voor KNAW en Cordaid Bond Zonder Naam. Met deze opdracht heb ik heel veel ervaring op gedaan en dingen geleerd. Ik heb gewerkt met Gulp, met SASS en Compass en ik heb zelfs nog even gewerkt met Linux. Het is een heel leuk bedrijf om daar aan de slag te gaan. Leuke sfeer, zakelijk, maar ook ontspannen. De dingen die ik allemaal heb geleerd zijn echt dingen waar ik mee aan de slag kan gaan na mijn stageperiode.

17


Bijlagen 1. GWW Verslag over mijn adviezen

18


2. Vergelijkingstabel Grid Systems

19


3. Testresultaten uit Google Chrome Development Tool

Figuur 1: Testresultaat van Flexbox - Desktop naar Tablet

20


Figuur 2: Testresultaat van Responsive.gs - Desktop naar Tablet

21


Figuur 3: Testresultaat van SkelJS - Desktop naar Tablet

22


Figuur 4: Testresultaat van SkelJS2.0 - Desktop naar Tablet

23


Deze bovenstaande screenshots met de testresultaten laten zien dat SkelJS er langer over doen om de pagina te laden de het scherm wordt geresized van desktop naar tablet. De witte popups laten de laad tijd zien van de resize. SkelJS is ruim 100 milliseconden langzamer dan de andere grid systems. Dit heel veel effect op laad tijd van de hele pagina’s als de internetsnelheid laag ligt.

24


4. Stukje KNAW code

Figuur 5: De agenda portlet die ik onder andere heb gemaakt. Ik heb ook nog andere portlets.

25


Figuur 6: Dit is een gedeelte van de styling voor portlets. Dit hele bestand heb ik gemaakt. Dit bestand is meerdere keren van structuur veranderd.

26

Goldmund, Wyldebeast & Wunderliebe

Recommend Documents