-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
518 lines (441 loc) · 53.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
<!doctype html>
<!--[if IE 8 ]> <html lang="en" class="ie8 ie9 no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns#">
<meta charset="utf-8">
<title>Stageverslag - Joeri Deplus</title>
<meta name="description" content="Joeri Deplus - miniplus is a frontend developer and designer. Passionate about all web-related topics.">
<!-- iPhone Optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<!-- Typekit -->
<script type="text/javascript" src="//use.typekit.net/gvz8fmv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- CSS Styles -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/icons/favicon.ico" />
<!-- Modernizr -->
<script src="assets/js/libs/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="nav-container">
<a href="#" class="btn">
<span class="icon-flow-line"></span>
<span class="hide-text">timeline</span>
</a>
<div class="origin header3">
<span class="icon-flow-branch"></span>
<span class="hide-text">branch</span>
master
</div>
<div class="measure-timeline">
<nav>
<ul class="timeline">
<li class="commit info active">
<a class="dot-wrapper inverse" href="#info">
<span class="dot rounded">
<span class="icon-info"></span>
<span class="hide-text">profile</span>
</span>
</a>
<a class="inverse text" href="#info">
Info
</a>
</li>
<li class="commit inleiding">
<a class="dot-wrapper inverse" href="#inleiding">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">skills</span>
</span>
</a>
<a class="inverse text" href="#inleiding">
Inleiding
</a>
</li>
<li class="commit doelstellingen">
<a class="dot-wrapper inverse" href="#doelstellingen">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">education</span>
</span>
</a>
<a class="inverse text" href="#doelstellingen">
Doelstellingen
</a>
</li>
<li class="commit singleline veiligbestellen">
<a class="dot-wrapper inverse" href="#veiligbestellen">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">experience</span>
</span>
</a>
<a class="inverse text" href="#veiligbestellen">
<span class="month">Periode 1</span><br>
Veiligbestellen
</a>
</li>
<li class="commit singleline bionature">
<a class="dot-wrapper inverse" href="#bionature">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#bionature">
<span class="month">Periode 1</span><br>
Bio 2 Nature
</a>
</li>
<li class="commit singleline pukkelpop">
<a class="dot-wrapper inverse" href="#pukkelpop">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#pukkelpop">
<span class="month">Periode 1</span><br>
Pukkelpop
</a>
</li>
<li class="commit bdri multiline">
<a class="dot-wrapper inverse" href="#bdri">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#bdri">
<span class="month">Periode 2</span><br>
Inventis challenge<br>
brèche de roland:<br>
Inleiding
</a>
</li>
<li class="commit bdrb multiline">
<a class="dot-wrapper inverse" href="#bdrb">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#bdrb">
<span class="month">Periode 2</span><br>
Inventis challenge<br>
brèche de roland:<br>
Backend
</a>
</li>
<li class="commit bdrf multiline">
<a class="dot-wrapper inverse" href="#bdrf">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#bdrf">
<span class="month">Periode 2</span><br>
Inventis challenge<br>
brèche de roland:<br>
Frontend
</a>
</li>
<li class="commit singleline flickr">
<a class="dot-wrapper inverse" href="#flickr">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#flickr">
<span class="month">Periode 2</span><br>
Flickr
</a>
</li>
<li class="commit singleline zend">
<a class="dot-wrapper inverse" href="#zend">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#zend">
<span class="month">Periode 2</span><br>
Zend framework
</a>
</li>
<li class="commit singleline git">
<a class="dot-wrapper inverse" href="#git">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#git">
<span class="month">Periode 2</span><br>
OMG: Oh My Git
</a>
</li>
<li class="commit blog">
<a class="dot-wrapper inverse" href="#blog">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#blog">
Blog
</a>
</li>
<li class="commit eindreflectie">
<a class="dot-wrapper inverse" href="#eindreflectie">
<span class="dot rounded">
<span class="icon-paragraph"></span>
<span class="hide-text">additional</span>
</span>
</a>
<a class="inverse text" href="#eindreflectie">
Eindreflectie
</a>
</li>
</ul><!-- timeline -->
</nav>
</div><!-- measure-timeline -->
</div><!-- nav-container -->
<div class="container">
<div class="columns">
<section id="info" class="row">
<div class="header icon-info">
<span class="hide-text">profile</span>
</div>
<div class="large-6 columns text-center">
<a href="http://inventis.be" target="_blank">
<figure>
<img src="assets/images/inventis-logo.png" alt="Inventis" />
</figure>
</a>
</div><!-- large-6 columns text-center -->
<div class="large-5 large-offset-1 columns">
<div class="name">
<h1>Joeri Deplus</h1>
<h1 class="nickname">stageverslag</h1>
</div><!-- name -->
<ul class="details">
<li>
MAD Faculty<br>
Communicatie- & Multimedia design<br>
3<sup>e</sup> Bachelor
</li>
<li>
<strong>
30 Juli - 30 Augustus<br>
11 September - 11 December
</strong>
</li>
<li>
<strong>Stagebegeleiders:</strong><br>Bart Geraerts, Dieter Verjans<br>en Stijn Janssen<br>
</li>
<li>
<strong>Stagedocent:</strong> Nathalie Vaes
</li>
</ul>
</div><!-- large-5 large-offset-1 columns -->
</section><!-- profile -->
<section id="inleiding" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">skills</span>
<div class="large-8 large-centered columns">
<h1>Inleiding</h1>
<p>Binnen de opleiding Communicatie- & Multimedia design (CMD) is er in het 3<sup>e</sup> bachelor jaar verplicht een stage op te nemen over een periode van minimum 12 weken. Al voordat ik effectief aan de CMD opleiding begon wist ik al waar ik stage wou lopen, Inventis.</p>
<p>Binnen de wereld van de web agencies hebben ze doorheen hun ondertussen 8-jarig bestaan een standaard weten te zetten waardoor ze tot de top van vlaanderen horen (2012). Inventis is gelegen in houthalen en richt zich op het ontwikkelen van websites en de nodige online marketing hieromtrent. Ze specialiseren zich in het ontwerpen van specifiek maatwerk waarbij alles samen met de klant wordt besproken om deze op een zo goed mogelijke manier te kunnen dienen.</p>
<p>Met klanten als Pukkelpop, Belisol, Oostende en De Haan hebben ze enkele grote projecten op hun naam staan om enkele te noemen. Dit verwezenlijkt door een team van ongeveer een 20-tal personen waarbinnen zich drie voorname functies zich voordoen: “Projectmanager”, “Designer“ en “Developer”. Per project is er een team van 3 à 4 personen die geleid worden door een projectmanager (PM).</p>
<p>De projectmanagers zorgen voor de communicatie tussen klant en verwante interne personen. De designers zorgen voor het ontwerp, beginnend bij een wireframe. De developers kunnen opgedeeld worden in twee categorieën, namelijk backend- en frontend developer. Een backend developer zorgt er voor dat alles werkend is achter de schermen terwijl een frontend developer er voor zorgt dat het geheel geïntegreerd wordt met de backend en hierdoor alles werkt aan de ‘voorzijde’ van de website, het geheel dat te zien is en waar meestal naar verwezen wordt als ‘de website op zich’. Als backend developer is een abstractere kijk nodig in vergelijking met frontend developer.</p>
<p>Begin juli werden de eerste emails uitgewisseld (<a href="assets/images/bijlagen/stageaanvraag.png" rel="bijlagen" class="fancybox" title="Bijlage 1 - eerste email uitwisseling">bijlage 1</a>). Doordat ik altijd al stage heb willen lopen bij Inventis wou ik zeker zijn van een stageplaats als frontend developer en besloot ik in mijn aanvraag de vraag te stellen of het mogelijk was een maand lang <strong>vrijwillige stage</strong> uit te oefenen al vorens het begin van de “officiële” stage. Dit zodat ik mij reeds kon inwerken en gewoon maken aan de inventis-workflow, waardoor ik de komende 12 weken me volledig zou kunnen inzetten voor het project waaraan ik zou werken.</p>
<p>Dit werd enthousiast onthaald waarna ik op gesprek mocht komen. Tijdens dit kennismakingsgesprek kreeg ik de vraag wat mijn verwachtingen waren en in welke mate ik al kennis had van bepaalde technologieën. Op het einde van het gesprek wisten ze mij te vertellen dat ik zonder enig probleem stage kon lopen, inclusief een maand ‘vrijwillig’ in augustus waarna ik in september mijn stage kon verder zetten.</p>
</div><!-- columns -->
</section><!-- skills -->
<section id="doelstellingen" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">education</span>
<div class="large-8 large-centered columns">
<h1>Doelstellingen</h1>
<p>Mijn persoonlijke doelstellingen wist ik op te splitsen in twee periodes. De eerste periode: Augustus en de tweede periode: September - December.</p>
<p>Tijdens de periode augustus ging het mij voornamelijk om het aanleren van de <strong>Inventis-workflow</strong>. Ik veronderstelde dat elk bedrijf zijn manier van werken had. Dit had ik zelf al reeds ondervonden tijdens het uitwerken van de verschillende cases op school. Telkens een nieuwe groep waarvan ieder zijn manier van werken had. Dit zou dus niet anders zijn binnen het bedrijfsleven.</p>
<p>Ook verwachtte ik tijdens deze periode dat ik enkele <strong>best-practices</strong> zou bijleren. Dit houdt in dat er in bepaalde gevallen meerdere oplossingen mogelijk zijn, maar er één is die het meest efficiënt is.</p>
<p>Tijdens de periode september - december verwachtte ik mij te verdiepen in deze best-practices, maar ook enkele geheel <strong>nieuwe technieken</strong> op te vangen zoals bv. CSS-preprocessors en jQuery. CSS-preprocessors zorgen voor een snellere workflow tijdens het schrijven van CSS code en jQuery doet net hetzelfde, maar voor javascript. Version control (Git) is iets dat zeker niet mag ontbreken en waarvan ik zeker ben dat ik hiermee in contact zal komen. Git is een manier waarop je projecten kan onderhouden en kan samenwerken met anderen.</p>
<p>Ik had tot op heden ook geen goede kijk op hoe de <strong>samenwerking</strong> designer/developer en backend/frontend developer verliep. In bepaalde maten ben ik hiermee al in contact gekomen, maar vond ik dat de samenwerkign nogal omslachtig was. Ik vroeg me dus ook af hoe dit efficiënt in zijn werk ging.</p>
<p>Hoe een offerte wordt opgesteld en hoe er net wordt gecommuniceerd met de klant, alsook hoe er wordt gepresenteerd zijn dingen waarbij ik mij vragen stel. Ik besef dat ik als frontend developer hier weinig mee in contact zal komen, maar het zijn dingen die ik me afvraag en ik hoop te weten te komen door gewoonweg mee te draaien binnen Inventis.</p>
<p>Ongetwijfeld zal ik ervaringen opdoen die ik nooit heb kunnen voorzien. Dit is misschien wel de <strong>voornaamste reden</strong> waarom ik stage loop. De ervaringen die ik zal opdoen waarbij ik nog nooit heb stil gestaan verwacht ik het leerrijkst te zijn.</p>
</div><!-- columns -->
</section><!-- education -->
<section id="veiligbestellen" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">experience</span>
<div class="large-8 large-centered columns">
<h1>Veiligbestellen</h1>
<p>Veilig bestellen was mijn eerste opdracht waarbij ik een ontwerp kreeg van een webshop en dit moest omzetten naar HTML, dit wordt ookwel slicen genoemd (<a href="assets/images/bijlagen/veiligbestellen.jpg" rel="bijlagen" class="fancybox" title="Bijlage 2.1 - ontwerp veiligbestellen webshop">bijlage 2.1</a>). Ik mocht dit doen op welke manier ik ook wou, het was voornamelijk om te kijken in welke mate ik mijn stof kende zodat mijn begeleiders (Dieter, Stijn en Bart) een eerste beeld konden schetsen en op deze manier wisten waar zo nodig bij te sturen. Ik deed dit door gebruik te maken van de nieuwste HTML5 en CSS3.</p>
<p>Ik kreeg de Inventis-styleguide waar ik gebruik van moest maken. Deze hield enkele manieren in waarop bepaalde componenten binnen een website moeten opgemaakt worden. Dit met twee redenen. De eerste reden is zodat er binnen Inventis consistentie is, indien een ander persoon verder moet werken op wat jij al hebt ontwikkeld en de tweede reden is omdat er binnen Inventis gewerkt wordt met een zelf ontwikkeld Content Management System (CMS) waardoor de integratie achteraf makkelijker verloopt. Het was even gewend worden aan de manier van opmaak soms, maar eenmaal gewend was er geen probleem meer.</p>
<p>Stijn was tevreden door het feit dat ik meteen gebruik maakte van HTML5 tags en CSS3. Door het gebruik van CSS3 moest ik helemaal geen afbeeldingen gebruiken voor de interface op te bouwen. De gebruikte afbeeldingen behoren allemaal tot content. Het voordeel hierbij is dat de website snel kan inladen. Het nadeel is dat oudere browsers die geen ondersteuning bieden voor CSS3 de gebruikte effecten ook niet weergeven. Dit klinkt echter erger dan het effectief is, het is eerder een voordeel dan een nadeel. Op deze manier worden oudere browser stelselmatig weg gewerkt waardoor bezoekers overschakelen op de huidige standaard en indien deze personen toch de website bezoeken met een oudere browser, krijgen deze gewoon de effecten niet te zien waardoor het engagement bij de gebruiker minder hoog ligt, maar de website zonder enig probleem nog perfect werkt.</p>
<p>Omdat dit redelijk vlot ging, kreeg ik al meteen iets nieuws voorgeschoteld. Wel, het is te zeggen... Er werd me gevraagd om hetzelfde design opnieuw te slicen, maar dit maal gebruik te maken van een CSS-preprocessor genaamd “LESS”. CSS-preprocessors zorgen dat je CSS op een gemakkelijk onderhoudbare manier kan schrijven en zetten dit achteraf om in ‘normale’ CSS. Ik begon meteen met het doorlezen van de documentatie, waarna ik probeerde mijn CSS om te zetten in LESS. In het begin bracht dit wat moeilijkheden met zich mee, het is een andere manier van code schrijven om hetzelfde te bekomen maar eenmaal ik gewend raakte aan de syntax ging het zonder problemen en wist ik sneller te werken. Ik heb tochwel het hele project nodig gehad om mezelf LESS gewend te maken, maar wanneer ik nu terug kijk op deze periode kan ik niet begrijpen hoe ik ooit zonder heb kunnen werken! (<a href="assets/images/bijlagen/css-vs-less.jpg" rel="bijlagen" class="fancybox" title="Bijlage 2.2 - CSS vs LESS">Bijlage 2.2</a>)</p>
<p>Tot slot was er de afbeelding gallerij bovenaan te pagina. Tot op heden gebruikte ik een plugin hiervoor welke het werk voor mij deed, ik moest enkel de afbeeldingen voorzien. Bart wist me te vertellen dat deze plugins soms aan de zware kant zijn met veel verschillende functionaliteit die niet altijd nodig is, maar waardoor de site wel trager wordt bij het inladen. Er werd mij gevraagd om mijn eigen afbeelding gallerij (carousel) te schrijven door behulp van javascript. Ik dacht dat dit veel werk was, maar door behulp van jQuery viel dit allemaal zeer goed mee! net zoals het LESS-verhaal had ik weinig kennis van jQuery waardoor ik me ging verdiepen in de documentatie. Ik stond versteld van de simpliciteit van jQuery en de goed beschreven documentatie. Natuurlijk zoals elke nieuwe code-taal ging het met vallen en opstaan. Trial & Error was mijn beste leermeester. Ik probeerde iets uit en kwam zo telkens tot verder inzicht waarna ik uiteindelijk een werkende carousel had. (<a href="assets/images/bijlagen/slider_jquery.png" rel="bijlagen" class="fancybox" title="Bijlage 2.3 - zelf geschreven image slider in jQuery">Bijlage 2.3</a>)</p>
</div><!-- columns -->
</section><!-- experience -->
<section id="bionature" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Bio 2 Nature</h1>
<p>Na twee maal hetzelfde ontwerp te hebben gesliced en in maten van het gevraagde dit volledig uit te werken, was ik wel uitgekeken op de website. Ik vroeg wat het volgende was dat ik kon doen. Dit bleek Bio 2 Nature te zijn. Een webshop waarbij alle producten bio zijn. Het ontwerp was iets ingewikkelder dan voorgaand project en ik zou meteen alle nieuw opgenomen technologieën (LESS & jQuery) hierin verwerken (<a href="assets/images/bijlagen/bio2nature.jpg" rel="bijlagen" class="fancybox" title="Bijlage 3.1 - ontwerp Bio 2 Nature webshop">bijlage 3.1</a>). Ik merkte meteen al een vooruitgang in mijn kunnen en de nieuwigheden die ik gebruikte gingen des te vlotter. Weer door enkel gebruik te maken van afbeeldingen waar nodig als content was dit een website gebaseerd op HTML5 en CSS3 waardoor de snelheid geoptimaliseerd werd.</p>
<p>Na het bekijken van de slicing wist Dieter me een constructieve opmerking te geven over de afbeeldingen. Telkens een website een afbeelding ophaald stuurt deze een HTTP-request naar de server. Er is echter een limiet op het aantal HTTP-requests dat een server kan verwerken op hetzelfde moment doordat deze synchroon verlopen worden. Wanneer we nu de afbeeldingen van de verschillende betaalmogelijkheden bekijken zien we dat dit 6 verschillende afbeeldingen zijn. Dit wil zeggen dat de server 6 verschillende HTTP-requests krijgt bij het ophalen van deze afbeeldingen. Wanneer we deze 6 afbeeldingen in een grote afbeelding zetten (ookwel gekend als een “CSS sprite” of kortweg “sprite”) en door gebruik te maken van CSS de kleine afbeeldingen binnen de sprite definiëren, betekend dit dat de sprite kleiner is in kilobyte (kb) dan de som van de aparte afbeeldingen er slechts 1 HTTP-request naar de server gestuurd wordt waardoor de website sneller kan inladen.</p>
<p>Ik was me bewust van de term sprite en wist in bepaalde maten hoe de techniek in zijn werk ging, maar had hier nog nooit zelf gebruik van gemaakt waardoor ik toch wat onderzoek moest uitvoeren naar de manier waarop de sprite moest opgebouwd worden. (<a href="assets/images/bijlagen/css-sprite.jpg" rel="bijlagen" class="fancybox" title="Bijlage 3.2 - CSS sprite">Bijlage 3.2</a>)</p>
<p>Eenmaal ik de slicing van dit project had afgewerkt kreeg ik iets waar ik al langer naar uitkeek, Bricks, het Inventis CMS. Er werd mij opgedragen om een volledige dag gewoon wat te spelen in Bricks. Op deze manier kon ik mezelf het CMS gewend maken. Bricks is ontwikkeld in een Model-View-Controller architectuur (MVC). Op deze manier blijft de logica van het programma gescheiden van de content data en de manier waarop het te zien zal zijn op de website. Het begrip MVC was me gekend en een eerste kennismaking was ook reeds gebeurd. Toch wist ik er niet genoeg van. Ik heb even moeten zoeken en soms uitleg vragen waardoor uiteindelijk me alles wel duidelijk werd. Eenmaal ik mijn draai kon vinden binnen Bricks mocht ik proberen de slicing van dit project te integreren binnen Bricks (<a href="assets/images/bijlagen/bricks.png" rel="bijlagen" class="fancybox" title="Bijlage 3.3 - Bricks: het Inventis CMS">bijlage 3.3</a>). De standaard implementatie lukte me zonder te veel problemen, maar de home pagina had wat verfijning nodig dat niet standaard was ingebouwd. Hier heb ik dan ook even mee gespeeld maar niet volledig afgewerkt doordat ik aan het einde van augustus kwam en mijn eerste periode moest beïndigen doordat het Inventis team ging beginnen aan hun jaarlijke challenge (meer info volgende periode). Vooraleer augustus eindigd was er toch nog een extra!</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="pukkelpop" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Pukkelpop</h1>
<p>Praktisch alles qua IT op pukkelpop wordt voorzien door Inventis. Het houdt dus niet enkel op bij de publieke website. Inventis ontwikkeld de publieke pukkelpop website en een achterliggende medewerkers website. Hiernaast ontwikkelen ze ook het kassa- & ticketingsysteem, zorgen ze voor alle communicatie tijdens het festival op zowel online gebied als de on-site lichtborden en verlenen ze hun diensten uit om kilometers netwerkkabel te spannen tijdens de voorbereidingen. Tot slot zitten de meeste teamledenaan de servicedesk, waar bezoekers langskomen indien ze problemen hebben met o.a tickets die niet geldig zijn, drankbonnen die reeds gebruikt zijn en dergelijke.</p>
<p>Vooraleer ik bij Inventis begon had ik reeds een pukkelpop-ticket gekocht. Ik had dit echter zonder probleem opgegeven indien dit problemen gaf. Jan Raedschelders (CEO Inventis) vertelde me dat er tijdens de pukkelpop-periode weinig mensen op kantoor zijn. Hierdoor zou de kans klein zijn dat ik feedback zou krijgen op mijn werk en dus amper iets zou bijleren. Hetgeen Jan me eigenlijk vertelde was dat ik mij mocht gaan amuzeren op pukkelpop.</p>
<p>Hier was ik Jan zeer dankbaar voor, maar toch voelde het ook verkeerd. Ik besefte dat dit een drukke periode was voor Inventis en besloot mij daarom aan te melden om de eerste festivaldag vrijwillig te helpen. Op pukkelop lopen veel vrijwilligers rond, maar ik kreeg nu de kans om werk uit te voeren waarvoor geen vrijwilligers worden gebruikt, namelijk de servicedesk.</p>
<p>Stel jezelf hier niet te veel bij voor, op zich zit je gewoon op een bureaustoel naar mensen hun problemen te luisteren en dien je deze op te lossen, toch is het leerrijk. Je moet een oordeel vellen over welke personen je al dan niet binnen laat indien er mogelijke fraude aanwezig is en natuurlijk een goed luisterend oor hebben, als servicedesk krijg je meestal mensen die niet blij zijn. Het is niet altijd nadelig, ook wordt er wat afgelachen. Ik geef een voorbeeld: een 24-jarige man in licht dronken toestand is vergeten zijn inkomticket af te printen en komt naar de servicedesk. Wij vragen hem enkele standaard vragen zoals ‘met welk emailadres is de aankoop gebeurd’, ‘op welke naam staat het ticket‘, ‘wat is uw verjaardag‘, etc.. Het ticket was aangekocht door zijn vriendin en de man wist op elke vraag te antwoorden waardoor we wisten dat alles in orde was. We besloten hem te vragen wanneer zijn vriendin jarig was, waarop de man antwoorde: ‘Gast, serieus ofwat!? Laat mij die niet bellen want dan heb’k iets voor!‘. Natuurlijk moesten we hier gebruik van maken en zeiden we dat we serieus waren waarna de man zijn vriendin moest opbellen om te vragen wanneer zei jarig was.</p>
<p>Al bij al was het helpen op pukkelop een leuke afwisseling die misschien niet al te leerrijk was op technisch gebied, maar wel inzicht gaf in het feit dat niet altijd alles even serieus moet genomen worden.</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="bdri" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Inventis challenge<br>
brèche de roland: Inleiding
</h1>
<p>September, een nieuwe maand, een nieuw seizoen (herfst) en een nieuw begin! Met deze gedachte begon ik aan de 12 komende weken. Ik kreeg een briefing van mijn opdracht. Deze bestond uit het ontwikkelen van de website over de <a href="http://inventischallengebe.webhosting.be" target="_blank">Inventis Challenge van vorig jaar (2012) - La Brèche de Roland</a>.</p>
<p>Inventis houdt elk jaar een challenge voor hunzelf. Twee jaar geleden (2011) besloten ze een marathon te lopen en sinds de meesten onder hen dat waarschijnlijk maar één keer zouden meemaken besloten ze om er meteen een unieke ervaring van te maken en te kiezen voor de Midnightsun marathon gelegen in Noorwegen. Dit jaar werd er gekozen voor de brèche de roland, gelegen in frankrijk, al wandelend te beklimmen. Als web agency moet je natuurlijk de kans grijpen om hier een website rond te maken. Dit werd mijn project gedurende de komende 12 weken.</p>
<p>Ik werd ingelicht over de opdracht, kreeg meteen een wireframe (<a href="assets/images/bijlagen/challenge-wireframe.png" rel="bijlagen" class="fancybox" title="Bijlage 4.1 - Inventis challenge website: wireframe">bijlage 4.1</a>) en design (<a href="assets/images/bijlagen/challenge-desktop-design.jpg" rel="bijlagen" class="fancybox" title="Bijlage 4.2 - Inventis challenge website: desktop design">bijlage 4.2</a>) voorgeschoteld en was enthousiast over de opdracht. De website moest geïmplementeerd worden binnen Bricks, het Inventis CMS. Bricks moest op dergelijke manier opgebouwd worden dat dezelfde website elk jaar opnieuw kon gebruikt worden mits de nodige aanpassingen. Een uitdaging op zich wanneer je amper met het systeem hebt gewerkt! Tot slot werd ik aangeraden te beginnen met het schrijven van een analyse.</p>
<p>Ik heb gemerkt dat een analyse zeer handig is en je er best de tijd voor kan nemen. Zo voorkom je problemen achteraf tijdens het ontwerpen & ontwikkelen doordat je alle mogelijke problemen reeds hebt bekeken en een oplossing hebt gevonden. Een analyse houdt niet enkel in rekening houden met de nodige problemen, ook een tijdsregeling uitdenken komt hierbij aan te pas. Dit is essentieel voor het opstellen van een offerte, maar ook jezelf help je hiermee. Op deze manier kan je altijd terug kijken naar je planning waardoor je op het goede spoor blijft!</p>
<p>In het begin dacht ik deze analyse al snel af te hebben, maar telkens wist Bart mij te wijzen op enkele punten waardoor ik uiteindelijk toch een 4-tal dagen aan de analyse ben bezig geweest. Zoals ik net al vermeld heb is dit zeer handig voor jezelf om terug te kijken naar je planning, maar komt dit ook van pas wanneer je met meerdere personen samen werkt aan een project zodat iedereen op de hoogte is. Op deze manier kan er een algemene planning opgemaakt worden die aan de klant kan weergegeven worden zodat deze ook een houvast heeft. (<a href="assets/images/bijlagen/analyse.pdf" target="_blank">Bijlage 4.3</a>)</p>
<p>Spijtig genoeg ben ik tijdens deze eerste weken ziek gevallen waardoor ik al snel achter liep op mijn planning. Hierdoor ben ik niet zo ver geraakt als ik had gehoopt.</p>
<p>Het eerste punt op de planning was het ontwerpen van een mobiele versie van de website. Ik wou de website meteen responsive maken, maar had enkel een desktop versie van het ontwerp gekregen. Het ontwerpen van een kleine mockup zou me helpen uitwijzen hoe ik de mobiele versie moest aanpakken op gebied van code. (<a href="assets/images/bijlagen/challenge-mobile-design.jpg" rel="bijlagen" class="fancybox" title="Bijlage 4.4 - Inventis challenge website: mobile design">Bijlage 4.4</a>)</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="bdrb" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Inventis challenge<br>
brèche de roland: Backend
</h1>
<p>Binnen de verschillende challenges die worden toegevoegd moet er kunnen geselecteerd worden welke personen hebben deelgenomen aan welke challenge. Dit is zeker geen standaard functionaliteit binnen het Inventis CMS waardoor dit maatwerk ging worden. Dit bracht ook met zich mee dat sommige standaard functionaliteit herwerkt moest worden. Als voorbeeld haal ik de blogposts aan. Deze moeten toegevoegd worden aan de desbetreffende challenge. Hetzelfde verhaal geld voor de teksten en foto’s die worden weergegeven. Kortweg komt het er op neer dat alles in de backend gelinkt moet worden aan een bepaalde challenge. Als de planning hier goed zat, zou dit systeem een hele tijd kunnen meedraaien.</p>
<p>Hierdoor heb ik een stapje terug moeten nemen en opnieuw beginnen analyseren. “Hoe moet alles opgebouwd worden zodat ik zonder enig probleem kan selecteren aan welke challenge het desbetreffende deel gelinkt is?” was de vraag die constant door mijn hoofd spookte. Het aanpassen van de standaard modules binnen het Inventis CMS zouden niet zo’n groot probleem vormen, zolang de ‘challenge-module‘ maar goed zat. (<a href="assets/images/bijlagen/challenge-module.jpg" rel="bijlagen" class="fancybox" title="Bijlage 5 - Challenge module in Bricks">Bijlage 5)</a></p>
<p>Ookal voer ik deze stage uit als frontend developer, ik heb een project toegewezen gekregen dat ik volledig moet uitwerken. Dit houdt dus niet enkel frontend development in. Ik geef gerust toe dat de kans klein is ooit fulltime backend developer te zijn, maar het zou me toch een goede kennis en inzicht geven voor verdere ervaringen. Eenmaal de analyse afgerond was begon ik een kijkje te nemen hoe de huidige modules opgebouwd waren. Tot slot is het nog altijd de beste manier om te leren coderen. Bepaalde delen overnemen en aanpassingen uitvoeren.</p>
<p>Een echte uitdaging is het geworden! Dit is niet altijd even vlot gegaan. Voornamelijk Ext JS heeft het me moeilijk gemaakt. Ik geef toe dat de functionaliteit van Ext JS uitstekend is, maar de implementatie er van kan vlotter. Trial-and-Error is mijn voornaamste leermeester geweest. De beste die ik tot nu toe heb gehad!</p>
<p>Op een bepaald moment moesten er enkele aanpassingen gebeuren in de backend vooraleer deze volledig af was. De enkele aanpassingen zijn enkele aanpassingen gebleven op het feit na dat deze elk dubbel de tijd in beslag hebben genomen dan verwacht. Meestal lag het probleem bij Ext JS. Ik wist telkens de manier te vinden waarop iets uitgevoerd moest worden, maar de documentatie van Ext JS laat te wensen over. Zonder voorbeelden is het soms gokken op goed geluk. Het geluk stond niet meteen aan mijn zijde.</p>
<p>Het zat hem telkens in details. Zijn deze nodig? Ik vind van wel. Ze maken het verschil tussen een “wow”- en “WOW!”-product. Ik breek mijn hoofd over deze kleine punten, maar uiteindelijk heb ik wel een voldaan gevoel terwijl ik dit anders niet zou hebben.</p>
<p>Ik kan genieten van een echte uitdaging, ergens heb ik zelfs spijt dat ze afgerond is! Tijd voor een korte presentatie dus. Graag werk ik een product af voordat ik dit toon aan de buitenwereld. Toch is het belangrijk tijdig feedback te krijgen zodat er geen nuttige tijd verloren gaat.</p>
<p>De demo werd goed onthaald en er werd gebrainstormd over een extra functionaliteit. Een goed resultaat dus!</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="bdrf" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Inventis challenge<br>
brèche de roland: Frontend
</h1>
<p>Het omzetten van het design naar HTML, ookwel slicen genoemd, brengt op zich geen problemen met zich mee. Het addertje onder het gras was de website responsive maken. Dit maakte geen deel uit van de opdracht, maar vind ik toch belangrijk. Het web wordt nu eenmaal niet enkel meer bezocht via een desktop computer.</p>
<p>Het responsive fenomeen van de laatste jaren heeft me altijd weten te boeien voor een of andere reden die me zelf niet al te duidelijk is, ik veronderstel dat het gaat om de uitdaging om met de huidig bestaande componenten te onderzoeken hoe je best van deze gebruik maakt. In de praktijk had ik nog niet al te veel ervaring met responsive. Voorheen heb ik genoeg artikels gelezen over best-practices, maar een bepaald boek springt uit tussen de rest: <a href="http://www.abookapart.com/products/responsive-web-design" target="_blank">A book apart – Responsive Web design</a>.</p>
<p>Ik ben begonnen met een ‘mobile-first approach‘. Hiermee wordt bedoeld dat je eerst ontwerpt voor een mobiel toestel, waarna je altijd meer kan toevoegen wanneer de website op andere toestellen wordt bekeken. Op deze manier heb je ook in bepaalde maten de zekerheid dat browsers de gebruikte technieken ondersteunen. Indien dit niet het geval is zal de website nog steeds werken en indien nodig zelfs de mobiele versie inladen.</p>
<p>Het slicen is voornamelijk een ervaring dat ik rijker ben zonder al te veel problemen waar het nodige denkwerk bij te pas is gekomen. Zo heb ik ondervonden dat het werken met relatieve em’s gemakkelijker is wanneer je als basis een veelvoud van 10 neemt. Dit om achteraf minder te hoeven berekenen. Zo ben ik ook voor de eerste keer in contact gekomen met de ‘rem’ value. Ik schrok dat dit relatief goede ondersteuning had! Ik had echter al een bepaalde hoeveelheid code geschreven dat ik de em value ben blijven gebruiken. Toch goed om te weten voor naar de toekomst toe!</p>
<p>Responsive images is iets dat nog steeds in zijn kinderschoenen staat. Het is een term die gebruikt wordt om aan te tonen dat er verschillende afbeeldingen worden ingeladen naargelang het toestel dat gebruikt wordt om de website te bekijken, dit zodat de website sneller kan inladen. Er is momenteel nog geen specifieke manier waarop dit best kan toegepast worden en ook dit zal ik moeten ondervinden door te proberen. Ik heb verschillende manieren reeds getest, maar ben nog niet volledig overtuigd van geen enkele. Er is tot op heden nog geen standaard gekozen om dit uit te voeren.</p>
<p>De website werkt cross-browser, teruggaand tot Internet Explorer 7 (IE7). Deze laatstgenoemde gaf me wel enkele problemen die ik heb kunnen oplossen. Ik had gepland dit op een 3-tal uren klaar te hebben, maar daar dacht IE7 anders over. Telkens ik een aanpassingen deed ging er iets anders mis waardoor ik twee componenten heb moeten herschrijven zodat deze toch konden functioneren binnen IE7. Toen ik uiteindelijk op de klok keek waren er al 6 uren gepasseerd.</p>
<p>Ook Internet Explorer 10 (IE10) gaf raar genoeg problemen. De slider die op de homepage stond begon telkens te lopen, maar wanneer deze op het einde kwam liep deze telkens vast. Tijdens het testen van de slider had ik in plaats van de drie standaard items een vierde test item toegevoegd. Hierdoor wist ik op te merken dat de slider niet vast liep zolang ik wisselde tussen het tweede en derde item. Eenmaal ik verder ging liep deze weer vast. Hieruit volgde dat ik probeerde de ‘loop’ functie uit te schakelen waardoor de slider niet terug keert naar het eerste item wanneer hij op het einde is gekomen. Plots werkte de slider zonder enig probleem.</p>
<p>Ik heb nog steeds geen idee waarom dit enkel in IE10 niet functioneerde en veronderstel dat dit kwam doordat dit een preview versie was omdat IE10 nog niet officieel op de markt was, maar heb het opgelost door een simpele if-statement te gebruiken. Wanneer IE10 in gebruik is wordt de loop functie uitgeschakeld, in andere gevallen wordt deze ingeschakeld. (<a href="assets/images/bijlagen/slider-homepage.jpg" rel="bijlagen" class="fancybox" title="Bijlage 6 - slider teamleden">Bijlage 6</a>)</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="flickr" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Flickr</h1>
<p>De foto’s worden geüpload door Jan Raedschelders op de Inventis Flickr account. Ik moest een manier bedenken om te kunnen selecteren welke foto’s er moesten weergegeven worden in de backend. Ikzelf ben niet zo’n Flickr gebruiker waardoor ik eerst even moest uitpluizen hoe de site en API in elkaar zaten. Mijn eerste oplossing was het toevoegen van een LovComboBox in de webadmin. Een LovComboBox is eigenlijk een select menu waarin je meerdere waarden kan aanvinken binnen ExtJS. Binnen deze LovCombo wou ik dan alle verschillende photosets (albums) weergeven. Natuurlijk staan er veel verschillende sets op deze account waardoor dit al snel minder overzichtelijk zou worden. (<a href="assets/images/bijlagen/lovcombo.png" rel="bijlagen" class="fancybox" title="Bijlage 7.2 - LovComboBox bij het selecteren van teamleden">Bijlage 7.1</a>)</p>
<p>Ik dacht de sets een tag te geven waarna ik enkel de sets zou inladen met de tag ‘challenge’. Ik wist dat dit mogelijk was, maar moest het even verder uitpluizen. Tijdens ik onderzocht hoe dit exact in zijn werk zou gaan merkte ik op dat verschillende sets in een photocollection (collectie) konden. Het probleem was dus simpel op te lossen door telkens een collection aan te maken waarin zich de verschillende sets bevinden. In de webadmin zou ik dan enkel de collections moeten weergeven in een simpel select menu waardoor er steeds een overzicht zou zijn. (<a href="assets/images/bijlagen/challenge-module-flickr.png" rel="bijlagen" class="fancybox" title="Bijlage 7.2 - keuzemenu fotoalbum">Bijlage 7.2</a>)</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="zend" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Zend framework</h1>
<p>Na het testen van de Flickr API in javascript moest ik dit implementeren binnen Bricks. Het Inventis CMS draait onder het Zend framework welke enkele ingebouwde functies heeft om Flickr integratie uit te voeren. Ik dacht dit dus wel redelijk snel opgelost te hebben. Het tegenovergestelde bleek waar te zijn. De ingebouwde functies waren zo beperkt dat ik me zelfs afvraag of deze effectief wel in gebruik worden genomen. Uiteindelijk heb ik de bestaande library uitgebreid. Ik schrik er van -op een tevreden manier- hoeveel ik in aanraking ben gekomen met de backend. Ik ben nog steeds geen backend developer maar durf mij ondertussen wel in de backend code te wagen!</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="git" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>OMG: Oh My Git</h1>
<p>Git is een versie-controle systeem wat helpt bij het ontwikkelen. Het zorgt ervoor dat je op eender welk moment een momentopname kan vastleggen van de code zoals deze er op dat moment uit ziet, een ‘commit’ genaamd. Hierdoor kan er altijd terug gegaan worden naar een vorig moment indien er iets mis is. Nog een voordeel is dat git automatisch detecteerd welke delen van de code zijn aangepast waardoor het enkel de wijzigingen opneemt. Dit helpt wanneer er met meerdere personen aan een project wordt gewerkt doordat er geen code van elkaar wordt overschreven.</p>
<p>Op een bepaald moment was ik in de backend code bezig en merkte ik op dat ik een kleine fout had in mijn template systeem wanneer een challenge verwijderd werd. Ik begon dit probleem op te lossen en dacht alles in orde te hebben. Ik deed een test door een challenge aan te maken en te verwijderen. Nadat ik de challenge had verwijderd kreeg ik niets anders dan errors. Wanneer ik mezelf in de mappenstructuur begaf merkte ik op dat er volledige mappen verdwenen waren. Ik zag meteen de fout die ik had gemaakt. Spijtig genoeg waren de verdwenen bestanden permanent verwijderd. Gelukkig komt hier de almachtige git in het spel. Enkele uren voordat ik het template systeem begon te refactoren had ik een commit gedaan waardoor ik met het simpele commando ‘git checkout [branch] — [directory]‘ mijn gehele directory terug kon halen. Alles terug in orde en we konden weer verder!</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="blog" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Blog</h1>
<p>Bij Inventis wordt er aan de stagiar altijd gevraagd om een wekelijkse blog bij te houden. Voornamelijk is dit zodat het team ook op de hoogte blijft waaraan er gewerkt wordt en welke progressie er is. De stagebegeleiders zijn dagdagelijks betrokken bij het project, maar krijgen op deze manier een algemeen overzicht op het einde van de week.</p>
<p>Ikzelf dien stil te staan welke progressie ik gemaakt heb, ik maak op zich een analyse van mezelf. Hierdoor krijg ik een beter inzicht in de fouten die ik heb gemaakt en de punten die ik heb bijgeleerd. Tot slot leverde dit enkel voordeel bij het schrijven van dit verslag waarbij ik bepaalde punten kon overnemen die ik reeds had geschreven op de blog.<br>(<a href="http://www.inventisstage.be/project/inventis-challenge/projectblog/" target="_blank">Bijlage 8</a>)</p>
</div><!-- columns -->
</section><!-- additional -->
<section id="eindreflectie" class="row">
<div class="header icon-paragraph"></div>
<span class="hide-text">additional</span>
<div class="large-8 large-centered columns">
<h1>Eindreflectie</h1>
<p>Na deze korte periode dat ik stage heb gelopen bij Inventis kan ik gerust zeggen dat de ervaringen die ik hier heb opgedaan, minstens <strong>even leerrijk</strong> zijn geweest dan de ervaringen die ik opgedaan heb tijdens mijn drie-jarig CMD verloop. Een zeer geslaagde stage dus!</p>
<p>Wanneer ik terugblik op de tools en workflows die ik mezelf heb aangeleerd moet ik toegeven dat deze nog steeds <strong>dagdagelijks</strong> gebruikt worden. Door het inzicht dat ik gekregen heb ben ik ondertussen mijn eigen workflow gaan ontwikkelen. Tijdens mijn ontwikkelproces heb ik nu een meer constant stramien dat ik mezelf meester heb gemaakt waardoor mijn werk efficiënter verloopt.</p>
<p>De drie meest leerrijke <strong>technische aspecten</strong> die me bij zijn gebleven en waar ik nu niet meer zonder kan zijn CSS preprocessors, jQuery en het opmaken van een analyse. Dit laatste gebeurt niet op dezelfde manier als ik aangeleerd heb gekregen bij Inventis, maar werkt voor mij persoonlijk beter.</p>
<p>Voorgaande slaagt voornamelijk op het technische aspect van de stage. Er is ook nog het gedeelte <strong>omgang</strong> met anderen op de werkvloer, de bedrijfsmentaliteit, de omgang met de klant, etc.. Dit zijn aspecten die moeilijk aangeleerd kunnen worden binnen een schoolomgeving en daarom is deze stage net zo belangrijk.</p>
<p>Mijn meest leerrijke ervaring op dit gebied en misschien wel over het gehele traject is mijn ontmoeting met het werken als werknemer. Zowel mijn ouders als grootouders zijn altijd zelfstandige geweest. Hierdoor had ik het beeld dat je als zelfstandige veel vrijheid en afwisseling hebt in tegenstelling tot een werknemer. Bij Inventis bleek dit helemaal niet zo te zijn, ik moest mijn eigen analyse maken, mijn eigen deadlines opstellen en onder de middag werd er Mario Kart en Counter Strike gespeeld. Als je even wou pauzeren nam je gewoon pauze en ging je even kijken waarmee een collega bezig was. Ik besef nu dat ik voorheen een tunnelzicht had terwijl ik nu een zeer brede gedachtegang heb. De arbeidsmarkt schrikt me zeker niet af, het tegenovergestelde is zelfs waar, ik <strong>kan niet wachten!</strong></p>
<p>De manier waarop mijn stage <strong>begeleid</strong> is geweest is ook iets dat me zeker bij blijft. Ik hoop ooit op dezelfde manier iemand te kunnen opleiden. Ik ben iemand die zelf niet snel voor hulp zal vragen, ik probeer het eerst zelf op te lossen. Wanneer ik de oplossing niet vond vroeg ik om hulp. De oplossing werd niet voor mij gedaan, er werden mij tips gegeven hoe ik het zou kunnen oplossen waarna ik dan weer verder moest proberen met de verworven informatie. Een meer leerrijke manier had ik me niet kunnen inbeelden, het is door middel van deze aanpak dat ik vandaag de dag alle voorgaande aspecten onder de knie heb.</p>
<p>Spijtig genoeg heb ik niet deelgenomen aan een <strong>klantengesprek of offerte</strong>. Van beide punten had ik graag nog iets bijgeleerd maar zijn zaken die eerder vallen onder de functie van Project Manager. Toch heb ik vanop afstand kunnen volgen hoe een gesprek met de klant verloopt, het is niet de beste leermethode maar het is alleszins beter dan niets!</p>
</div><!-- columns -->
</section><!-- additional -->
</div><!-- columns -->
</div><!-- container -->
<footer>
<ul class="social">
<li class="ss-icon">
<a href="http://www.facebook.com/joeri.deplus" target="_blank" class="inverse">
facebook
</a>
</li>
<li class="ss-icon">
<a href="http://www.twitter.com/miniplus" target="_blank" class="inverse">
twitter
</a>
</li>
<li class="ss-icon">
<a href="http://www.instagram.com/miniplus" target="_blank" class="inverse">
instagram
</a>
</li>
</ul>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/libs/jquery-1.9.1.min.js">\x3C/script>')</script>
<!-- Symbolset-standard -->
<script src="assets/js/libs/ss-social.js"></script>
<!-- Fancybox -->
<script src="assets/js/libs/fancybox-2.1.4.min.js"></script>
<!-- own scripts -->
<script src="assets/js/main.min.js"></script>
</body>
</html>