portfolio stage - typepad...cre@ctiv – webdesign & (digitale) marketing cre@ctiv portfolio...

Cre@ctiv – Webdesign & (Digitale) Marketing

Cre@ctiv

Portfolio Stage

Toegepaste Informatica

In opdracht van:

Elien Defraeije

Naamsestraat 290/401 3001 HEVERLEE TEL: 0472 33 64 98 M: [email protected]

Voorstelling Nr. 2

Academiejaar 2013 - 2014

Alexander Siccard

Hogeschool-Universiteit Brussel

Academiejaar 2013-2014


Naam: Alexander Siccard

Richting: 3 TI Software Engineering

Vak: Portfolio Stage

Cre@ctiv

Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014

Pagina | 5

PERMISSIE

Ondergetekende verklaart dat de inhoud van dit portfolio mag geraadpleegd en/of

gereproduceerd worden, mits bronvermelding.

Alexander Siccard


Pagina | 7

1. Voorwoord

Het uitvoeren van deze stage is een zeer leerrijke ervaring geweest die mij heeft toegestaan

om zelfstandig te werken, maar ook als team. Het gaf mij een klare kijk op verschillende

wensen van de klanten van mij stagebedrijf Cre@ctiv. Ik ben dan ook trots dat ik heb kunnen

meedraaien als lid van hun team.

Portfolio voorgedragen tot het bekomen van de graad van Bachelor in de Toegepaste

Informatica.

Zonder de hulp van onder vermelde mensen, zou ik deze stage nooit tot een goed einde

hebben kunnen brengen. Bij dezen wens ik ze dan ook allemaal te bedanken. Mijn coach,

Steven Ophalvens, voor de aanwijzingen en verbeteringen die mij in staat stelden het werk

verder te optimaliseren. Yvan Rooseleer, opleidingshoofd Toegepaste Informatica aan de

Hogeschool-Universiteit Brussel, die mij geholpen heeft met het oplossen van een aantal

problemen.

Het voltallige team van Cre@ctiv, mijn opdrachtgever, voor de uitstekende begeleiding tijdens

het verloop van de stage. En de nodige kennis die zij mij gegeven hebben om de projecten tot

een goed einde te brengen.

Niet te vergeten mijn collega, Ilka Winnen, voor de vlotte en aangename samenwerking

tijdens het verloop van de gehele stage.


Pagina | 9

2. Inhoudsopgave

1. VOORWOORD ......................................................................................................................................... 7

2. INHOUDSOPGAVE ................................................................................................................................... 9

3. INLEIDING ............................................................................................................................................. 11

3.1. SITUERING ............................................................................................................................................. 11

3.2. DOELSTELLING VAN DE SCRIPTIE ................................................................................................................. 11

4. SPECIFIEKE TERMEN OF AFKORTINGEN ................................................................................................. 12

5. HOOFDSTUK 1: ALGEMENE BESCHRIJVING VAN DE STAGE-OPDRACHT ................................................. 13

5.1. BEDRIJFSCONTEXT ................................................................................................................................... 13

5.2. OMSCHRIJVING VAN DE STAGE ................................................................................................................... 14

5.3. HEEFT ONZE STAGE IETS TE MAKEN MET ONS IT-PROJECT ................................................................................ 14

5.4. WAAR WERDEN WE VIER DAGEN IN DE WEEK VERWACHT? ............................................................................... 14

6. HOOFDSTUK 2: TECHNISCHE UITWERKING ............................................................................................ 15

6.1. STAPPENPLAN CRE@CTIV ......................................................................................................................... 15

6.2. DEADLINES ............................................................................................................................................ 17

6.3. UITWERKING VAN ENKELE PROJECTEN ......................................................................................................... 18

6.4. OPMERKINGEN EN PROBLEMEN .................................................................................................................. 35

7. HOOFDSTUK 3: KRITISCHE SWOT-ANALYSE VAN DE AFGELOPEN STAGE EN HET BEDRIJF. ..................... 36

7.1. STRENGTHS ............................................................................................................................................ 37

7.2. WEAKNESSES ......................................................................................................................................... 38

7.3. OPPORTUNITIES ...................................................................................................................................... 39

7.4. THREADS ............................................................................................................................................... 39

8. HOOFDSTUK 4: PERSOONLIJK ONTWIKKELINGSPLAN ............................................................................ 41

8.1. WELKE COMPETENTIES HEB IK GEKOZEN? ..................................................................................................... 41

8.2. WAAR STOND IK AAN HET BEGIN VAN MIJN STAGE? ........................................................................................ 41

8.3. HOE HEB IK GEPROBEERD OM DEZE COMPETENTIES TE VERBETEREN? ................................................................. 41

8.4. HEB IK MIJ KUNNEN VERBETEREN OP DEZE COMPETENTIES? ............................................................................. 42

8.5. IS ER VOORUITGANG GEBOEKT?.................................................................................................................. 42

8.6. TOELICHTING VAN DE VERSCHILLENDE COMPETENTIES..................................................................................... 43

Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014

Pagina | 10

9. BIJLAGEN ............................................................................................................................................... 48

10. BIJLAGE 1: SECURELINK ......................................................................................................................... 51

11. BIJLAGE 2: JOLOGO ............................................................................................................................... 54

12. BIJLAGE 3: JOB-LINK .............................................................................................................................. 58

13. BIJLAGE 4: DE ZOMER IS VAN MECHELEN .............................................................................................. 63

14. BIJLAGE 5: BREAK TRUE ......................................................................................................................... 78

15. BIJLAGE 6: MASTER YOUR MAILBOX ..................................................................................................... 80

16. BIJLAGE 7: EIGEN THEMA ...................................................................................................................... 81

17. BIJLAGE 8: PETER CASTLES ..................................................................................................................... 84

18. BIJLAGE 9: KNIPOOGICT ........................................................................................................................ 87

19. BIJLAGE 10: WEBSITE CRE@CTIV ........................................................................................................... 88

20. BIJLAGE 11: TIMESHEETS ....................................................................................................................... 92

21. BIJLAGE 12: WEEKVERSLAGEN ............................................................................................................... 96

22. BIJLAGE 13: WERKSCHEMA’S ............................................................................................................... 140

23. BIJLAGE 14: HANDLEIDINGEN .............................................................................................................. 144

24. BIJLAGE 15: OFFERTES ......................................................................................................................... 144

25. BIJLAGE 16: PRESENTATIE ................................................................................................................... 144

26. BIJLAGE 17: BEWIJSSTUKKEN COMPETENTIES ..................................................................................... 145


Pagina | 11

3. Inleiding

3.1. Situering

Wij zijn derdejaarsstudenten aan de Hogeschool Universiteit Brussel. Alexander Siccard

heeft gekozen om verder te gaan in de richting Software Engineering om zich beter te

focussen op het development op de verschillende platformen. Ilka Winnen heeft gekozen

om in de richting van Netwerk - en Systeembeheer te gaan waardoor zijn zich kan focussen

op de aanleg en verbetering van netwerken en de beveiliging. Omdat wij beiden al vanaf

het eerst jaar van onze opleiding al meer interesse toonden in de richting van

webontwikkeling, was het voor ons belangrijk om in die richting een stageplaats te vinden.

Hierdoor zijn wij met de hulp van Yvan Rooseleer, op het einde van vorig jaar in contact

gekomen met Cre@ctiv, een jong bedrijf gespecialiseerd in webdesign en (digitale)

marketing.

3.2. Doelstelling van de scriptie

Het doel van deze scriptie is om een beter beeld te geven van mijn stageopdracht en hoe

ik dit technisch aangepakt heb. Vervolgens zal ik een SWOT-analyse uitvoeren waar ik de

sterktes en de zwaktes kort zal toelichten. Vervolgens zal ik overgaan tot mijn persoonlijk

ontwikkelingsplan. In dit onderdeel zal ik enkele competenties toelichten waarop ik mij

gefocust heb gedurende deze stage. In de bijlage zal je documentatie terug vinden van de

verschillende projecten. Deze projecten zullen ook toegelicht worden in het onderdeel

“Technische Uitwerking”.


Pagina | 12

4. Specifieke termen of afkortingen

Hieronder vindt u een overzicht van termen die vaak gebruikt worden in deze bachelorproef.

Deze zijn vooral gericht op het software gedeelte.

Woord Betekenis

PHP Staat voor Hypertext Preprocessor en is een scripttaal om

dynamische webpagina’s te creëren.

PHP Server Side

Dit wil zeggen dat de PHP code plaatsvind op de server. Wanneer

de data in de browser van de gebruiker terecht komt, dan zal er

geen PHP meer te zien zijn, enkel de HTML zal overblijven.

JS/Javascript Programmeertaal dat websites toelaat dynamischer te worden

Responsiveness

De lay-out zou voor elk scherm goed leesbaar moeten zijn.

Responsiveness wijst op het automatisch aanpassen naargelang

het beeldscherm. Bijvoorbeeld: Tablets/Smartphones/PC’s.

CMS

Content Management Systeem, laat de eindgebruiker toe om op

een eenvoudigere manier wijzigingen aan de website aan te

brengen.

SQL

Staat voor ‘Structured Query Language’ en wordt gebruikt om

gegevens naar een database te schrijven en deze ook te lezen uit

de database.

Ajax Staat voor ‘Asynchronous Javascript and XML’ en wordt gebruikt

om zaken asynchroon op te vragen.


Pagina | 13

5. Hoofdstuk 1: Algemene beschrijving van de stage-opdracht

5.1. Bedrijfscontext

Opdrachtgever : Cre@ctiv

Webdesign & Digital Marketing

We zijn een team van jonge, gepassioneerde

ondernemers die hun krachten bundelen om zo tot

een mooi en doelgericht resultaat te komen. Dat doen

we samen met u.

Bij ons staat u, als klant, centraal. Tijdens de projecten

nemen we de nodige tijd om te luisteren naar wat u

wil realiseren met uw aanwezigheid op het internet.

Daarbij gaat onze aandacht naar uw product of dienst,

de markt, de doelgroep(en) die u wilt bereiken, etc.

Wij zijn ontzettend enthousiast om van uw opdracht een mooi project te maken. Wij gaan

tot het uiterste en trachten steeds om op een vernieuwende manier uit de hoek te komen.

Wij willen enkel het beste voor u en uw bedrijf. (Cre@ctiv, 2013)

Project Manager : Elien Defraeije

Zaakvoerster

Als ondernemende zakenvrouw staat zij in als

zaakvoerster van het bedrijf zelf. Haar doel is zowel

jong als oud een kans te geven in het ontwerpen van

websites. Voor haar heeft iedereen het recht om op

het internet te staan indien men dit wenst.

Wie zijn Cre@ctiv?

Wie is de opdrachtgever?

Figuur 1 Logo Cre@ctiv

Figuur 2 Elien Defraeije


Pagina | 14

5.2. Omschrijving van de stage

De opdrachtgever heeft een groot aantal klanten die nood hebben aan een online

communicatieplatform. Dit platform is een belangrijk kanaal om aan consumenten van deze

klanten producten of diensten voor te stellen op een directe en interactieve manier. Op mijn

stageplaats was ik verantwoordelijk voor de grafische ontwerpen en de uitwerking van

verschillende web projecten. Deze projecten werden uitgewerkt in een CMS systeem.

Voornamelijk was dit WordPress, maar het kon ook Drupal zijn. Indien er geen CMS

systeem gebruikt zou worden, dan werden deze projecten in enkel HTML en CSS

ontwikkeld. Wanneer er specifieke behoeften van de klant zelf waren, dan was er de

mogelijkheid om dit te gaan uitwerken in Javascript.

5.3. Heeft onze stage iets te maken met ons IT-project

Wij draaiden met het bedrijf zelf mee als werknemer en kregen te maken met allerlei

opdrachten. De focus lag dus echter niet op één specifieke opdracht, maar op meerdere

opdrachten die later in het document verder toegelicht zullen worden.

De voorbereiding op onze stage, onze bachelorproef, zou verder uitgewerkt worden

wanneer er geen verdere projecten waren binnen het bedrijf. Echter was hier geen tijd

voor omwille van de vele projecten.

Dankzij onze ervaring opgelopen tijdens onze stage, zouden wij echter wel instaat zijn om

onze bachelorproef verder uit te werken. Als voorbereiding hierop hebben wij ook gewerkt

aan een eigen thema dat klanten zouden kunnen installeren in het WordPress platform.

5.4. Waar werden we vier dagen in de week verwacht?

Ons stagebedrijf was gesitueerd in Leuven. We werden hier dan ook 4 dagen verwacht te

zijn. Het kon ook gebeuren dat we vanuit Brussel werkten wanneer Elien in Brussel

aanwezig was. Soms gebeurde het ook dat we bij de klant zelf op locatie gingen. Dit was

voornamelijk bij het opstarten en het afsluiten van een project.


Pagina | 15

6. Hoofdstuk 2: Technische Uitwerking

Aangezien wij ons niet focussen op een project, maar op meerdere projecten hebben wij

een technisch stappenplan ontworpen. Dit stappenplan zal de verschillende stappen

overlopen. We beginnen bij de start van een nieuw project en zullen ons stappenplan

eindigen bij het online gaan van de website.

6.1. Stappenplan Cre@ctiv

Stap 1

De eerste stap is het eerste contact met de klant, dit kan telefonisch gebeuren, maar dit

kan ook op locatie gebeuren. Belangrijk in deze eerste stap is dat we te weten komen wat

de klant effectief wenst. Door deze informatie kunnen wij een duidelijke offerte aanmaken

en creëren we een duidelijk beeld over wat er juist moet gebeuren tijden de ontwikkeling

wat belangrijk is voor het aantal geschatte werkuren te kunnen bepalen.

Stap 2

Na de eerste stap zal samen met het team het nieuwe project overlopen worden. Waar

zijn we al zeker over wat effectief op de website zal komen? Wat kunnen we al inplannen

en hoeveel uur denken we nodig te zullen hebben? Wanneer deze puntjes volledig

besproken zijn, zal de offerte aangemaakt worden.

Stap 3

Vervolgens gaan we over tot de toelichting van de offerte. Is de klant tevreden met de

offerte? Moet de offerte nog aangepast worden om binnen het budget van de klant te

passen?

Stap 4

In stap 4 kunnen de eventuele aanpassingen aan de offerte uitgevoerd worden.

Vervolgens zullen we overgaan tot de takenverdeling. De taken zullen worden verdeeld

onder de developers, grafische ontwerpers en eventueel de marketeers.


Pagina | 16

Stap 5

Wanneer iedereen zijn takenpakket kent, zullen we overgaan tot de ontwikkeling van de

website op onze test server. De klant kan elke aanpassing volgen en indien nodig

aanpassingen doorgeven.

Stap 6

Na de ontwikkeling gaan we over tot het testen van de volledige website. Alle

functionaliteiten zullen uitgebreid getest worden door onder meer:

De developers

De zaakvoerster

De klant

Indien nodig zullen problemen opgelost worden die bij het testen ontdekt zijn.

Stap 7

Na de uitgebreide test fase zal er naar feedback van de klant gevraagd worden. Niets is

belangrijker dan feedback van de klant, zij beslissen of iets goed is voor hun of niet.

Stap 8

Wanneer de klant toch nog zaken wil aanpassen of toevoegen aan de website, zal ook dit

voor hun gedaan worden. Rekening houdend met budget en offerte, wordt een nieuwe

offerte aangemaakt voor de extra aanpassingen.

Stap 9

Wanneer de website van de klant volledig in orde is, dan zal er een gepersonaliseerde

handleiding gemaakt worden voor de klant. Elke website is anders, dus elke klant krijgt zijn

persoonlijke handleiding. In deze handleiding zal de volledige website toegelicht worden

en hoe de klant eventueel aanpassingen kan aanbrengen aan de website.

Stap 10

Vervolgens zullen we de handleiding gaan toelichten. Bij deze toelichting zullen we de

volledige handleiding overlopen en ook de werking van de website visueel tonen aan de

klant.


Pagina | 17

Stap 11

In de voorlaatste stap gaan we over tot het online plaatsen van de website. De hosting van

de klant kan bij Cre@ctiv zelf gebeuren of bij de persoonlijke host van de klant.

Stap 12

Met sommige klanten wordt er een after sales contract afgesloten van x-aantal

uren/maand. After sales is het gehele proces na verkoop waarbij we zullen nagaan en

zullen luisteren of de klant tevreden is, of de klant opmerkingen of aanmerkingen heeft,

het oplossen van eventuele klachten enzovoorts.

6.2. Deadlines

Gedurende onze stage hadden wij steeds te maken met verschillende deadlines. Voor elk

project was er een deadline, elk project had dan ook weer een bepaalde prioriteit. Bij de

start van onze stage was dit gemakkelijk om bij te houden omdat we vaak ook maar aan

één project aan het werken waren, later was dit niet meer het geval. We werkten aan

verschillende projecten waardoor het zeer belangrijk was om rekening te houden met de

verschillende deadlines.

Vaak kwamen ook nog enkele kleine opdrachten binnen die we in onze huidige planning

moesten plannen. Deze opdrachten kwamen vaak van klanten die al een website hadden,

maar waar enkele wijzigingen aangebracht moesten worden. Deze opdrachten waren vaak

klein en gemakkelijk op te lossen. Andere waren dan weer moeilijker, waardoor we toch

rekening moesten houden met onze lopende deadlines.

Prioriteiten werden door de zaakvoerster bepaald, wanneer er extra opdrachten binnen

kwamen, spraken we haar ook aan om na te gaan welk project voorrang had. Wanneer

een project klaar was, konden we ook bij haar terecht om te weten aan welk project we

nu moesten beginnen.

Wekelijks werd er ook van ons verwacht een stageverslag te schrijven. Hierdoor was onze

stagebegeleider ook steeds op de hoogte van wat we deden op onze stage. Ook hier

moesten we steeds rekening houden met onze deadline.


Pagina | 18

6.3. Uitwerking van enkele projecten

In dit deel zullen verschillende projecten besproken worden. Ik verwijs dan ook graag door

naar de bijlagen (Bijlagen 1 t.e.m. 10) om de ontwerpen te kunnen raadplegen en

eventueel een deel van de code te bekijken. Deze projecten zijn grotere projecten en ook

projecten die wij volledig opgestart hebben.

6.3.1. Website Securelink – Bijlage 1

Securelink wil een multi site WordPress installatie opzetten op het reeds bestaande

thema van securlink.nl. Een website die hier bij hoort is: securlink.nl. Om de website

online te plaatsen moeten de aanpassingen gebeuren zoals hieronder beschreven.

Elke aanpassing wordt afzonderlijk beschreven.

Opzetten van een multi installatie op WordPress

Opzetten thema (thema Securelink.nl) + compatibel maken met verschillende browsers

Plugin events/trainingen:

- Pagina per event/training

- Inschrijvingsmogelijkheid

- Gegevens worden in WordPress opgeslagen en zijn exporteerbaar (CSV)

- Bevestigingsmail zowel voor Securelink als voor klant

Sitemap: plugin installeren

Custom Post Types:

- Jobs

- References

o Automatiseren: eerste X Jobs/Referenties komen op FrontPage aan

de hand van een shortcode

o Per Job/Referentie aparte pagina

Custom Post Types – Downloads:

- CSV: e-mail/naam/welke download

- Mail met download

Nieuws post aanpassen:

- Klikken op volledige post


Pagina | 19

- Featured image links van post

Security WordPress

- Op maat gemaakt login pagina (speciale URL)

- CAPTCHA op login pagina

- Instellen dat gebruikers om de 3 maand hun paswoord moeten aanpassen

Responsive maken van website

Online zetten van website

Website analyse


Pagina | 20

6.3.2. Website Jologo – Bijlage 2

Inleiding - Situering

De opdracht is het bouwen van een website voor Jologo. Hiervoor hebben wij gebruik

gemaakt van alle expertise die we bij Cre@ctiv hebben.

Onze missie is het aanbieden van websites van hoge kwaliteit, waarbij controle over

de website en de beheerbaarheid ervan cruciaal zijn. Om deze beheerbaarheid te

optimaliseren maken we gebruik van het bestaand CMS-systeem, Wordpress. Dit

systeem wordt geoptimaliseerd met ons maat- en programmeerwerk, waardoor het

aantal mogelijkheden van de website van de klant zal toenemen, dit resulteert in een

"custom made" website die beantwoordt aan de eigenheid van de klant.

Project – Plan van aanpak

Cre@ctiv zal voor Jologo een design ontwerpen. Bij goedkeuring van dit design wordt

de volledige website gebouwd. De website wordt eerst gemaakt op één van de

testservers en bij elke aanpassing vragen wij om de feedback van de klant. Pas nadat

de finale goedkeuring is gegeven, leveren wij de volledige website aan de klant.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door Jologo

zelf en kan bij de initiële opstart van de website wel ingevoegd worden door Cre@ctiv.

Per pagina voegen wij maar eenmaal content toe. Daarom vragen wij Jologo om enkel

de finale versie naar ons door te sturen. Jologo kan zelf ook content aanpassen en

toevoegen.

De website zal opgebouwd worden met het oog op een maximale en klantvriendelijke

beheerbaarheid van de website. Hierbij wordt rekening gehouden met het feit dat

Jologo, de beheerder, geen voorgaande kennis heeft van html.

Cre@ctiv zal hiervoor gebruik maken van enerzijds voorgeprogrammeerde modules

door ons gemaakt, en anderzijds, standaard-functionaliteiten van het CMS-systeem

Wordpress. Daarnaast wordt er ook nog op maat geprogrammeerd. De bestaande

modules worden geïntegreerd in de website.


Pagina | 21

Cre@ctiv biedt een pakket aan waarin volgende elementen inbegrepen zijn:

Ontwerp

- Conceptuitwerking

- Grafisch ontwerp van de website

Conversie ontwerp

- Verwerking en omzetting van het ontwerp naar XHTML/CSS

templates

- Verwerking van de XHTML/CSS templates naar een WordPress

thema

Ontwikkeling website

- Opzet CMS (Wordpress)

- Installatie CMS

- Verwerking en implementatie ontwikkelde templates in het CMS

- Installatie, activatie en stylen van de modules

o Contactformulier

o Social media widget

o Jetpack (statistieken van de bezoekers)

o All in ons SEO pack (zoekmachine optimalisatie)

o Google Analytics for Wordpress

o Fotoalbum

Responsive design

Uitleg CMS (WordPress)

- Brochure met uitleg over WordPress

- Eén uur opleiding over WordPress


Pagina | 22

6.3.3. Website Job-Link – Bijlage 3


De opdracht is het bouwen van een website voor Job-Link. Hiervoor hebben wij gebruik

gemaakt van alle expertise die we bij Cre@ctiv hebben.








Cre@ctiv zal voor Job-Link een design ontwerpen. Voor dit ontwerp baseren wij ons

op de huisstijl van Job-link. Kleuren: groen - blauw (zie logo Job-link). Stijl: modern.

In het design van de website moeten er 3 belangrijke blokken naar voor komen:

1. Werkzoekende

2. Werknemers

3. Werkgevers

Bij goedkeuring van dit design wordt de volledige website gebouwd. De website wordt

eerst gemaakt op één van de testservers en bij elke aanpassing vragen wij om de

feedback van

Job-Link. Pas nadat de finale goedkeuring is gegeven, leveren wij de volledige website.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door Job-

Link en kan bij de initiële opstart van de website wel ingevoegd worden door Cre@ctiv

maar is niet in de offerte inbegrepen.


beheerbaarheid van de website. Hierbij wordt rekening gehouden met het feit dat Job-

Link, de beheerder, geen voorgaande kennis heeft van html.


Pagina | 23

Cre@ctiv zal hiervoor gebruik maken van enerzijds, voorgeprogrammeerde

modules door ons gemaakt, en anderzijds, standaard-functionaliteiten van het

CMS-systeem Wordpress. Daarnaast wordt er ook nog op maat

geprogrammeerd. De bestaande modules worden geïntegreerd in de website.


Ontwerp

- Conceptuitwerking


Conversie ontwerp

- Verwerking en omzetting van het ontwerp naar XHTML/CSS

templates

- Verwerking van de XHTML/CSS templates naar een WordPress

thema



- Installatie CMS



o Contactformulier

o Social media widget (website koppelen aan social media)

o Slidebar om foto’s te tonen op homepage


o Google Analytics for Wordpress (statistieken website)

o Fotoalbums per event

Responsive design

Kopiëren van virtuele server naar live server




Pagina | 24

6.3.4. Project mmMechelen Feest vzw – Bijlage 4

Inleiding – Situering

Deze opdracht was voor een pitch voor de website van Mechelen. De klant heeft echter

een andere partij gekozen: Inventis Hasselt. In het document zal ik wel het volledige

project grondig uitwerken aangezien dit een zeer groot en belangrijk project was waar ook

een verdediging ter plaatse aan vast hing.

De opdracht is het bouwen van een website voor:

• De zomer is van Mechelen

• Festival Maanrock

en het ontwerpen van logo's voor:

• De zomer is van Mechelen

• Maanrock

• Parkpop

• Mechelen zingt

• Bal populaire


Voor verdere uitleg verwijs ik graag door naar de bijlagen (Bijlage 4: Project Mechelen)

voor een overzicht te krijgen van de verschillende ontwerpen.


Pagina | 25

6.3.5. HTML Website “Break True” – Bijlage 5


De opdracht is het bouwen van een website voor Pim Van Der Stappen - Break True.

Hiervoor maken we gebruik van alle expertise die we in huis hebben. Deze website

wordt gemaakt in HTML/CSS.


Cre@ctiv zal voor de klant een design ontwerpen. Voor dit ontwerp baseren wij ons

op de visuele huisstijl van Break True (nieuwe logo). Bij goedkeuring van het design

wordt de volledige website gebouwd. De website wordt eerst gemaakt op één van

onze testservers en bij elke aanpassing vragen wij om feedback. Pas nadat de finale

goedkeuring is gegeven, leveren wij de volledige website.

Wij bieden de klant een pakket aan waarin de volgende elementen inbegrepen zijn:

Ontwerp

• Conceptuitwerking

• Grafisch ontwerp van uw website

Conversie ontwerp: Verwerking en omzetting van het ontwerp naar XHTLM/CSS

templates

Coderen en stylen van de modules

• Meta tags description (SEO)

• UA code Google analytics installeren in header

• Contactformulier

• Foto album

• Social media widgets

• YouTube filmpjes integreren in website

Responsive webdesign


Pagina | 26

6.3.6. Website Peter Castles – Bijlage 8


De opdracht is het bouwen van een website voor Peter Castles. Hiervoor hebben wij

gebruik gemaakt van alle expertise die we bij Cre@ctiv hebben.








Cre@ctiv zal voor Peter Castles een design ontwerpen. Voor dit ontwerp baseren wij

ons op de ontwerpen van Peter Castles en een eigen idee van de klant zelf.

In het design - de website moeten er enkele belangrijke elementen naar voor komen:

1. De kubus

2. De kunst/muziek

3. Peter Castles

Bij goedkeuring van dit design wordt de volledige website gebouwd. De website wordt

eerst gemaakt op één van de testservers en bij elke aanpassing vragen wij om de

feedback van

Peter Castles. Pas nadat de finale goedkeuring is gegeven, leveren wij de volledige

website.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door Peter

Castles.


Pagina | 27



Peter Castles, de beheerder, geen voorgaande kennis heeft van html.

Cre@ctiv zal hiervoor gebruik maken van enerzijds, voorgeprogrammeerde modules


Wordpress. Daarnaast wordt er ook nog op maat geprogrammeerd. De bestaande



Ontwerp

- Conceptuitwerking


Conversie ontwerp

- Verwerking en omzetting van het ontwerp naar XHTML/CSS templates

- Verwerking van de XHTML/CSS templates naar een WordPress thema



- Installatie CMS



o Contactformulier

o Social media widget (website koppelen aan social media)

o Portfolio


o Nieuwsbrief

o Fotoalbums voor de verschillende pagina’s

Responsive design

Kopiëren van virtuele server naar live server




Pagina | 28

6.3.7. Website KnipoogICT – Bijlage 9


De opdracht is het bouwen van een website voor KnipoogICT. Hiervoor hebben wij

gebruik gemaakt van alle expertise die we bij Cre@ctiv hebben.








Cre@ctiv zal voor KnipoogICT een design ontwerpen. Bij goedkeuring van dit design

wordt de volledige website gebouwd. De website wordt eerst gemaakt op één van de

testservers en bij elke aanpassing vragen wij om de feedback van de klant. Pas nadat

de finale goedkeuring is gegeven, leveren wij de volledige website aan de klant.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door

KnipoogICT zelf en kan bij de initiële opstart van de website wel ingevoegd worden

door Cre@ctiv. Per pagina voegen wij maar eenmaal content toe. Daarom vragen wij

KnipoogICT om enkel de finale versie naar ons door te sturen. KnipoogICT kan zelf ook

content aanpassen en toevoegen.



KnipoogICT, de beheerder, geen voorgaande kennis heeft van html.



WordPress. Daarnaast wordt er ook nog op maat geprogrammeerd. De bestaande



Pagina | 29


Ontwerp

- Conceptuitwerking


Conversie ontwerp




- Opzet CMS (WordPress)

- Installatie CMS


- Installatie, activatie en stijlen van de modules

o Contactformulier




o Google Analytics for WordPress

o App pagina

Responsive design





Pagina | 30

6.3.8. Project Eigen Thema – Bijlage 7


Deze opdracht was een opdracht van mijn stagebedrijf zelf, we hadden als opdracht

een eigen thema te maken in WordPress dat klanten zelf zouden kunnen gaan

aanpassen. Ze zouden de mogelijkheid hebben om een eigen lay-out te maken voor

hun websites.

Ik stond in voor een basisthema met enkele templates. Deze templates zouden de

klanten kunnen gebruiken om hun website mee op te bouwen.

Het thema moest responsive zijn. Daarom heb ik gekozen om met Bootstrap te

werken. Dit is een Framework dat gemaakt is om responsive te zijn waardoor de

website op elk platform toegankelijk zou zijn. Dit framework bestaat uit CSS bestanden

die voor elk platform afzonderlijk gemaakt zijn.

Deze opdracht was een opdracht waar ik kon aan werken wanneer ik geen opdracht

had van een klant. Zo leerde ik ook beter met PHP werken, wat natuurlijk zijn

voordelen had voor de komende projecten.

De functionaliteiten die ik heb kunnen verwezenlijken, kan u terug vinden in de bijlage

(Bijlage 7 Eigen Thema). Hier zal u enkele afbeeldingen te zien krijgen van de

verschillende opties en een korte uitleg van de mogelijke opties.

Dit thema kan steeds hergebruikt worden door verschillende eindgebruikers

aangezien de eindgebruiker zelf de opmaak zal bepalen. Er zullen dan ook nooit 2

websites zijn met dezelfde opmaak.


Pagina | 31

6.3.9. Website Master Your Mailbox – Bijlage 6


De opdracht is het bouwen van een website voor Master Your Mailbox. Hiervoor

hebben wij gebruik gemaakt van alle expertise die we bij Cre@ctiv hebben. Wij zullen

instaan voor een betaalmodule met bijhorende access levels.








Cre@ctiv zal voor Master Your Mailbox een design ontwerpen. Bij goedkeuring van dit

design wordt de volledige website gebouwd. De website wordt eerst gemaakt op één

van de testservers en bij elke aanpassing vragen wij om de feedback van de klant. Pas

nadat de finale goedkeuring is gegeven, leveren wij de volledige website aan de klant.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door Master

Your Mailbox zelf en kan bij de initiële opstart van de website wel ingevoegd worden

door Cre@ctiv. Per pagina voegen wij maar eenmaal content toe. Daarom vragen wij

Master Your Mailbox om enkel de finale versie naar ons door te sturen. Master Your

Mailbox kan zelf ook content aanpassen en toevoegen.



Master Your Mailbox, de beheerder, geen voorgaande kennis heeft van html.






Pagina | 32


Ontwerp

- Conceptuitwerking


Conversie ontwerp





- Installatie CMS



o Contactformulier

o Membership

o Access Levels

o Quiz



Responsive design





Pagina | 33

6.3.10. Website Cre@ctiv – Bijlage 10


De opdracht is het bouwen van een website voor het bedrijf zelf, Cre@ctiv. Hiervoor

hebben wij gebruik gemaakt van alle expertise die we bij Cre@ctiv hebben.


Cre@ctiv zal zelf een design ontwerpen. Bij goedkeuring van dit design, door de

zaakvoerster wordt de volledige website gebouwd.


beheerbaarheid van de website.






Pagina | 34

Ontwerp

- Conceptuitwerking


Conversie ontwerp





- Installatie CMS



o Contactformulier




o Google Analytics for WordPress

Responsive design


Pagina | 35

6.4. Opmerkingen en problemen

Wat mij bijgebleven is tijdens deze stage is dat je altijd naar de klant moet luisteren, de

klant heeft een eigen idee en dat moeten wij uitwerken. Wanneer het ontwerp van de

klant ons niet bevalt, dan kunnen we dit altijd laten weten aan de klant, maar de klant zal

uiteindelijk toch de laatste beslissing nemen.

Ik heb het hier moeilijk mee gehad omdat ik niet iets wou afleveren wat ik niet mooi vond.

Je werkt voor het bedrijf, dus ook in naam van het bedrijf. Toekomstige klanten gaan kijken

naar referenties die het bedrijf heeft en dan wil je daar ook alleen ontwerpen plaatsen

waar je 100% achterstaat. Ik heb hier ook met mijn collega’s over gesproken en ben dan

toch tot de conclusie gekomen dat ik mij hierbij moet neerleggen. Het is de keuze van de

klant en die keuze moeten wij respecteren.


Pagina | 36

7. Hoofdstuk 3: Kritische SWOT-analyse van de afgelopen stage en het

bedrijf.

In dit onderdeel zal een SWOT-analyse uitgevoerd worden van de afgelopen stage en het

bedrijf. De verschillende puntjes zullen eerst in een tabel weergegeven worden, vervolgens

zullen deze puntjes uitgeschreven worden als verduidelijking.

Positief Negatief

Inte

rn

Strengths

Volledige afwerking

Gebruiksvriendelijkheid van de

website naar de eindgebruiker toe

Bijdrage aan het imago vh bedrijf

Volledige functionaliteiten in de

website integreren

Weaknesses

Ontwikkeling websites is

platform afhankelijk

Weinig ervaring met CMS

Nieuwe programmeertaal PHP

Extern

Opportunities

Extra opleidingen

Threats

Concurrentie

Meer en meer mensen kunnen

zelf een website maken

Klant zonder ervaring

Onverwachte vraag van andere

klanten

Cross browser


Pagina | 37

7.1. Strengths

7.1.1. Volledige afwerking

Wanneer wij beginnen aan een project, dan zullen wij dit ook volledig afwerken naar

de wensen van de klant. Als bedrijf willen wij dat de klant volledig tevreden is en dit

doen we door verschillende oplossingen/ontwerpen uit te werken voor de klant.

Vervolgens zal de klant ons feedback bezorgen waarop wij aanpassingen kunnen

uitvoeren. Het project zal dan ook voor ons pas volledig klaar zijn, wanneer de klant

tevreden is over het volledige project.

7.1.2. Gebruiksvriendelijk

Wanneer de klant zelf aanpassing wenst te maken later aan zijn website, dan zullen wij

voorstellen om gebruik te maken van een CMS-systeem. Dit systeem zal werken als

een soort van tekstverwerker voor de klant. De klant geeft de inhoud van de pagina’s

in en dit zal vervolgens op een passende manier weergegeven worden op de website.

Wij zullen voorafgaand een template maken voor de gebruiker om deze opmaak te

kunnen gebruiken. Op het einde van het project zullen wij ook zorgen voor een

persoonlijke handleiding van de website waar alles zal in uitgelegd staan.

7.1.3. Bijdrage aan het imago van het bedrijf

Tijdens het verloop van onze stage werden wij niet aanschouwd als een stagiaire, wij

werden gezien als een medewerker van het bedrijf zelf. Dit bracht dan ook heel wat

verantwoordelijkheid met zich mee. Wij waren verantwoordelijk voor verschillende

projecten, wanneer er problemen waren, dan waren ook wij verantwoordelijk voor het

oplossen van deze problemen.


Pagina | 38

7.1.4. Volledige functionaliteiten

Bij de ontwikkeling van een website maken wij gebruik van de standaard

functionaliteiten van WordPress zelf. Vaak komen daar ook extra functionaliteiten in

door gebruik te maken van plugins. Hierdoor kunnen we bijvoorbeeld beter in de

zoekresultaten van Google staan. Deze functionaliteiten worden ook steeds bij de klant

vermeld en we zorgen ook voor een volledige uitleg, zodat de klant hier later ook op

een correcte manier gebruik van kan maken.

7.2. Weaknesses

7.2.1. Platform afhankelijk

Doordat we meestal in WordPress werkte, zijn er sommige zaken waar je niet buiten

kan omdat je in deze CMS werkt. Dit is zeer minimalistisch, maar zeker geen

onbelangrijk punt.

7.2.2. Weinig ervaring met CMS

Ondanks onze passie en interesse in webontwikkeling hadden wij niet echt veel

ervaring met de verschillende CMS systemen. Het zou ons wat tijd kosten om hier op

een degelijke manier mee te leren werken. Daarom waren ook de eerste opdrachten

van het stagebedrijf een soort van kennismaking met het CMS-systeem WordPress. Zo

kregen we een perfect overzicht van de manier van werken in WordPress. In deze

periode leerden we ook werken met de plug-ins van het bedrijf zelf, zoals bijvoorbeeld

de plugin waarmee het bedrijf een fotoalbum op een website plaatst.

7.2.3. Nieuwe programmeertaal PHP

CMS-systemen zijn gecodeerd in PHP, deze taal was nieuw voor ons en we hadden hier

dus ook geen ervaring in. Het was noodzakelijk om hier wat over op te zoeken om toch

te weten waar alles staat en hoe WordPress opgebouwd is. Wanneer we dit niet

hadden gedaan, dan was het onmogelijk voor ons om de projecten te laten slagen.


Pagina | 39

7.3. Opportunities

7.3.1. Extra opleidingen

Gedurende onze stage kregen wij de kans om extra opleidingen mee te volgen. Deze

opleidingen konden gaan over hoe we een website correct kunnen gaan ontwikkelen

of waar we inhoudelijk rekening mee moesten houden. Deze opleidingen waren zeer

leerrijk en gaven je ook een beter idee voor de ontwikkeling van komende projecten.

7.4. Threads

7.4.1. Concurrentie

De concurrentie in deze sector is enorm groot. We zouden kunnen zeggen dat we om

elke hoek wel iemand kunnen vinden die websites maakt. Het is dus de bedoeling om

iets extra aan te kunnen bieden. Onze stageplaats heeft een enorm voordeel met het

aanbieden van geschikte marketing voor jouw website, wat dan ook een pluspunt is.

Wij kunnen helpen bij het “verkopen” van uw website en ervoor zorgen dat deze

inhoudelijk perfect is.

7.4.2. Meer en meer mensen kunnen zelf een website maken

Het ontwikkelen van een website is niet moeilijk, maar het correct ontwikkelen van

een website is wel moeilijk. Google zal rekening houden met de code van je website,

wanneer deze ordelijk en correct is, dan zal je betere zoekresultaten hebben, Google

zal je dan zien als een correcte en betrouwbare bron.

7.4.3. Klant zonder ervaring

Vaak hebben onze klanten geen ervaring met het ontwikkelen van een website. Het

komt dus voor dat de klant een bepaald idee heeft over de opmaak van zijn website.

Wanneer dit het geval is, zijn wij als bedrijf verplicht onze mening hierover te geven en

een mogelijk alternatief voor de opmaak van de website. Dit geldt ook over de

functionaliteiten, wanneer een wens van de klant niet haalbaar is, dan is het onze taak

om onze klant hierop te wijzen.


Pagina | 40

7.4.4. Onverwachte vraag van andere klanten

Klanten die reeds een website hebben bij ons, kunnen achteraf nog met vragen of

problemen zitten die wij moeten oplossen, dit kan soms voor problemen zorgen met

lopende deadlines. Het is dus noodzakelijk om een goede planning te hebben.

7.4.5. Cross Browser

Cross browser is een van de grootste problemen waarmee we te maken hadden tijdens

onze stage. Elke gebruiker heeft een favoriete internetbrowser, maar deze browser

wordt niet door iedereen gebruikt. Om dit probleem op te lossen moesten we ervoor

zorgen dat elke website op elke browser dezelfde opmaak had. Soms zorgde dit voor

problemen bij de oudere browsers, voor deze browsers werd dan vaak een andere

opmaak gebruikt in samenspraak met de klant.

Ook de mobiele platformen ondersteunen niet alle functionaliteiten, ook zijn de

schermen van de nieuwe tablets enorm verbeterd waardoor deze aanschouwd worden

als laptop. Het is dus zeer belangrijk om steeds de website op elk platform te gaan

testen zodat deze voor elk platform toegankelijk is.


Pagina | 41

8. Hoofdstuk 4: Persoonlijk Ontwikkelingsplan

8.1. Welke competenties heb ik gekozen?

Tijdens mijn stage bij Cre@ctiv heb ik gewerkt aan enkele competenties, deze

competenties heb ik hieronder even opgesomd:

Twee algemene competenties:

- Vlot functioneren in een professionele (internationale) omgeving

- Bedrijfsbeleid ondersteunen vanuit de eigen vakspecialisatie

Drie IT-competenties:

- Een IT-opdracht projectmatig en teamgericht aanpakken met respect voor de

planning.

- Relatie stakeholders onderhouden

- IT-taken kwaliteitsvol uitvoeren zodat het resultaat voldoet aan de eisen van

een steeds wisselende omgeving.

8.2. Waar stond ik aan het begin van mijn stage?

Alvorens mijn stage te starten, had ik een minimale ervaring met het functioneren binnen

een professionele omgeving op het vlak van IT. Hierdoor kon ik ook niet echt mijn eigen

vakspecialisatie gaan ondersteunen.

Voor deze redenen heb ik gekozen om deze competenties verder te gaan uitbreiden en

verbeteren. Op het vlak van IT-competenties had ik al ruime ervaring met een project

teamgericht aan te pakken en het leveren van een goed resultaat, ik had echter weinig

ervaring met de verdere communicatie met de stakeholders en dit was een punt wat ik

zeker wou verbeteren.

8.3. Hoe heb ik geprobeerd om deze competenties te verbeteren?

Mijn competenties heb ik proberen te verbeteren door te gaan luisteren naar mijn

collega’s. Wat is hun ervaring met deze competenties en hebben zij eventuele tips die ik

kan gebruiken? In de eerste weken zaten we samen om de competenties te verbeteren,

later was er opvolging van mijn collega’s met eventuele bijsturing.


Pagina | 42

8.4. Heb ik mij kunnen verbeteren op deze competenties?

Dankzij de vele tips heb ik mij zeker kunnen verbeteren op deze competenties. Ik heb

geleerd dat ik bij de communicatie naar de stakeholder(s) zeer duidelijk moet zijn. Deze

hebben vaak niet dezelfde kennis, dus is het is belangrijk dat de communicatie goed

verloopt en dat de stakeholder je ook effectief begrijpt.

Wanneer ik in een team ga, werken besef ik dat de communicatie een grote rol speelt. Het

is belangrijk juiste beslissingen te nemen en grondig na te denken over de mogelijke

oplossingen. Wanneer je een oplossing gevonden hebt, communiceer dit dan even naar

het team om te vragen wat hun mening hierover is. Misschien hebben zij een betere

oplossing of is de oplossing totaal fout.

Bij het werken met een klant, heeft de klant de laatste beslissing, feedback speelt een

grote rol in het succesvol afhandelen van een project. Is de oplossing naar de normen van

de klant? Heb je elk probleem goed afgehandeld? Ik heb hier voornamelijk uit geleerd dat

het enorm belangrijk is om te testen. De klant gebruikt niet altijd dezelfde tools als ik, dus

ik moet controleren op elke andere tool of alles in orde is. Ik ben verantwoordelijk voor

het project en ik heb dan ook als doel, dat de klant tevreden is over het volledige project.

8.5. Is er vooruitgang geboekt?

Ik heb geleerd dat het bij deze competenties draait om ervaring. Hoe meer ervaring ik

hiermee heb, hoe beter ik zal worden. Deze stage was al 4 maand extra ervaring voor mij,

waardoor ik voel dat ik verbeterd wel ben op deze competenties. Ik weet dat ik moet

communiceren en dat ik als de klant moet gaan denken, iemand met minder ervaring. Ik

moet mij focussen op wat ik wil vertellen aan de stakeholder en er voor zorgen dat ze dit

ook volledig begrijpen.


Pagina | 43

8.6. Toelichting van de verschillende competenties

Voor de bewijsstukken van de verschillende competenties verwijs ik graag door naar

Bijlage 14.

8.6.1. Vlot functioneren in een professionele (internationale) omgeving

Het was nieuw voor mij om te werken binnen een professionele omgeving. Je bent niet

alleen en je werkt ook niet alleen. Je moet rekening houden met het team. Bij het

starten van de stage was dit aanpassen. Het is belangrijk dat iedereen ongeveer weet

waar je mee bezig bent, zo kan er ook meteen ingesprongen worden wanneer iets niet

goed is. Dit heeft natuurlijk ook zijn voordelen. Wanneer je een collega gaat helpen

met een project, dan weet je ook meteen over wat het gaat, wat er nog moet gebeuren

en wat effectief al klaar is. Hierdoor heb je de mogelijkheid om meteen te starten aan

het project en je collega te helpen.

8.6.2. Bedrijfsbeleid ondersteunen vanuit de eigen vakspecialisatie

Mijn eigen ervaring bij het ontwikkelen van websites ligt voornamelijk bij HTML en CSS,

ik had nog niet gewerkt in een CMS-systeem dus dit was volledig nieuw voor mij. Het

was dus enorm leerrijk om hiermee te leren werken en te zien hoe we het de

eindgebruiker enorm kunnen vergemakkelijken voor het aanpassen van zijn website.


Pagina | 44

8.6.3. Een IT-opdracht projectmatig en teamgericht aanpakken met respect voor de

planning.

Voor elk project werd er gewerkt met een planning. In de planning konden we

opvolgen wat allemaal moest gebeuren en wanneer dit af zou moeten zijn. Een

opmerking hierover is dat we een soepele planning hadden. Onvoorziene

omstandigheden moesten een plaats krijgen in de planning. Dit kon bijvoorbeeld een

probleem zijn op een website, maar dit konden ook kleine wijzigingen zijn aan

bestaande websites wanneer de klant hierom vroeg. Deze wijzigingen konden vaak

zeer snel opgelost worden, waardoor we ze goed konden inplannen in onze agenda.

De andere taken schoven dan natuurlijk wat op.

Er werd ook steeds in team gewerkt. Dit kon bestaan uit 2 personen, maar ook uit een

5tal personen. Het team werd steeds op de hoogte gebracht wanneer er wijzigingen in

het project waren en wat de stand van zaken was.

Problemen werden samen met het team opgelost wanneer deze niet individueel

opgelost konden worden. Wanneer er geen mogelijkheid was tot het oplossen van het

probleem, dan werd er samen gezocht naar een alternatief. Wanneer dit het probleem

oploste werd er met het team overlopen hoe we dit naar de klant zouden

communiceren.


Pagina | 45

8.6.4. Relatie stakeholders onderhouden

Belangrijk tijdens elk project was het contact met de klant. De klant werd steeds op de

hoogte gehouden van de plannen en hoe we verder te werk zouden gaan. Steeds werd

er gevraagd naar feedback van de klant om eventueel aanpassingen aan te kunnen

brengen.

Wanneer we aan een project werkten en we enkele wijzigingen aanbrachten aan de

website, dan brachten we de klant hiervan op de hoogte. De klant kon dan bepalen of

we al dan niet goed bezig waren.

De communicatie met de klant verliep via e-mail, telefoon of via een vergadering. De

algemene vragen werden vaak via e-mail of telefoon afgehandeld. Wanneer er iets zou

getoond moeten worden, dan deden we dit via een vergadering, zo konden we ook

meteen nagaan of de klant al dan niet alles volledig begrepen had.

In het begin van de stage werd ons e-mail verkeer grondig gecontroleerd. Dit was zeer

belangrijk omdat je via het bedrijf communiceert en er geen fouten mogen gemaakt

worden. Werd er formeel gesproken en was alles duidelijk naar de klant toe? Naarmate

we vorderden in onze stage, werd de controle ook minder, aangezien we geen fouten

meer maakten. Natuurlijk konden we indien nodig bij onze collega’s terecht om kort

even de e-mail te overlopen en indien nodig aanpassingen aan te brengen. Bij

belangrijke informatie werd er wel nog steeds gebruik gemaakt van de ‘CC’ functie.

Hierdoor waren de betrokken personen ook steeds op de hoogte wanneer zij niet op

kantoor aanwezig konden zijn.


Pagina | 46

8.6.5. IT-taken kwaliteitsvol uitvoeren zodat het resultaat voldoet aan de eisen van een

steeds wisselende omgeving.

Wanneer we gaan kijken naar de steeds wisselende omgeving tijdens onze stage, dan

kunnen wij dit vergelijken met de verschillende besturingssystemen en

internetbrowsers. Het is belangrijk dat de website van de klant op elk platform

dezelfde opmaak heeft en dat deze op een correcte manier wordt weergegeven.

Voor elk project zorgen we hiervoor, natuurlijk zal dit in verschillende mate gebeuren.

Wanneer de klant voor een volledig responsive design gekozen heeft, dan zorgen wij

er ook voor dat de website er zal uitzien zoals de klant het specifiek wenst. Wanneer

de klant hier niet voor gekozen heeft, dan zorgen wij voor de grote lijnen, natuurlijk zal

de website wel volledig werken en zal deze ook volledig toegankelijk zijn voor de

gebruiker.

Door de steeds vernieuwende functionaliteiten in HTML en CSS kunnen wij niet

garanderen dat deze zullen werken op de oudere besturingssystemen en

internetbrowsers. Wanneer dit het geval is zullen wij de klant hierover aanspreken en

zullen wij samen zoeken naar een oplossing. Sommige problemen kunnen volledig

opgelost worden door enkele updates uit te voeren. Wanneer de klant geen

vernieuwingen kan gaan hanteren – in bedrijven wordt er vaak gebruik gemaakt van

oudere platformen – dan kunnen wij een specifieke oplossing gaan gebruiken voor dat

platform, zo kunnen we bijvoorbeeld een opmaak gaan gebruiken die toch zal

ondersteund worden door de browser.

Een van onze projecten waar wij dit als eerste hebben op toegepast, was de nieuwe

website voor ons stagebedrijf zelf. Wij hebben ervoor gezorgd dat de website op elk

besturingssysteem toegankelijk is en dat deze via elk mobiel platform bezocht kan

worden. Wanneer bepaalde functionaliteiten niet op een correcte manier op de

mobiele platformen weergeven werden, hebben wij hiervoor een oplossing gevonden.

Verder kan u een afbeelding vinden van de browser – en mobiele versie van de

website.


Pagina | 47


Pagina | 48

9. Bijlagen

Voor de bijlagen verwijs ik graag door naar de extra bijgevoegde documenten. Deze bijlagen

zullen bestaan uit offertes, toelichtingen van de functionaliteiten, ontwerpen van de

verschillende websites, timesheets en werkschema’s.

Cre@ctiv – Webdesign & (Digitale) Marketing

Cre@ctiv

Portfolio Stage - Bijlagen


In opdracht van:

Elien Defraeije

Naamsestraat 290/401 3001 HEVERLEE TEL: 0472 33 64 98 M: [email protected]

Voorstelling Nr. 2

Academiejaar 2013 - 2014

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 51

10. Bijlage 1: Securelink

Dit bedrijf werkt voornamelijk rond beveiliging waardoor wij geen belangrijke informatie

mogen publiceren. Ik heb enkele screenshots gemaakt om een idee te geven over het

verrichte werk. De afbeeldingen zal ik dan ook kort even toelichten.

Eindresultaat Website

Dit is het eindresultaat van de website. Ik stond in voor de verschillende functionaliteiten en

de opmaak van de pagina’s.


Pagina | 52

Shortcode

Deze shortcode laat ons toe om verschillende jobaanbiedingen op de website te gaan

publiceren. We krijgen de titel van de job met een kort job omschrijving. Van de code achter

de shortcode zelf mogen wij geen code publiceren.

Op bovenstaande afbeelding ziet u één van de jobs met de bijhorende job omschrijving.


Pagina | 53

To Do & Planning Securelink tijdens het project

Onze communicatie verliep voornamelijk via e-mail en Yammer, onderstaande afbeeldingen

zijn een voorbeeld van deze communicatie.


Pagina | 54

11. Bijlage 2: Jologo

Dit project is opgestart door ons en hebben wij dan ook volledig afgewerkt. Je zal het ontwerp

zien van de website en de uitwerking van een shortcode die we gebruikt hebben om een

prikbord te maken waar de eindgebruiker een bericht op kan plaatsen.

Ontwerp website


Pagina | 55

Schortcode

Wanneer de gebruiker op het tekstballonnetje zal klikken, zal hij de mogelijkheid hebben op

een bericht op het prikbord te plaatsen.

Er zal gevraagd worden naar de tekst voor op het prikbord:

Vervolgens kan de gebruiker een link plaatsen waar we naar willen verwijzen wanneer de

bezoeker op het prikbord klikt:


Pagina | 56

Tenslotte kan de gebruiker de kleur van het prikbord kiezen:

Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:


Pagina | 57

Code Shortcode

Met deze code gaan we een HTML output geven. Deze code zal dan omgezet worden naar het

prikbord met meteen de juist CSS opmaak.

In onderstaande afbeelding zien we de code die we gebruiken om het icoontje in de

teksteditor te tonen.


Pagina | 58

12. Bijlage 3: Job-Link

Dit project is opgestart door ons en hebben wij dan ook volledig afgewerkt. Je zal het ontwerp

zien van de website en de uitwerking van een shortcode die we gebruikt hebben om een

tekstballon te maken waar de eindgebruiker een bericht in kan plaatsen.

Ontwerp website


Pagina | 59

Uiteindelijke website

De klant heeft ons feedback gegeven en dit heb ik dan ook gedurende de ontwikkeling

toegepast. U zal merken dat deze versie totaal verschillend is dan het oorspronkelijk ontwerp.


Pagina | 60

Schortcode

Wanneer de gebruiker op het tekstballonnetje zal klikken, zal hij de mogelijkheid hebben op

een bericht in de tekstballon te plaatsen.

Er zal gevraagd worden naar de tekst voor in de tekstballon:

Vervolgens kan de gebruiker een link plaatsen waar we naar willen verwijzen wanneer de

bezoeker op de tekstballon klikt:


Pagina | 61

Tenslotte kan de gebruiker de kleur van het prikbord kiezen:

Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:


Pagina | 62

Code Shortcode

Met deze code gaan we een HTML output geven. Deze code zal dan omgezet worden naar het

prikbord met meteen de juist CSS opmaak.

In onderstaande afbeelding zien we de code die we gebruiken om het icoontje in de

teksteditor te tonen.


Pagina | 63

13. Bijlage 4: De Zomer is van Mechelen

Logo’s

Verder in het document zal u een volledige opsomming vinden van de verschillende

ontwerpen. Elk ontwerp zal ook een uitleg hebben waarin staat waarom ik voor het ontwerp

gekozen heb.

De zomer is van Mechelen

Niets zegt meer zomer dan de zon en bijpassende zonnebril. De zonnestralen

vertegenwoordigen op hun beurt de ‘M’ van Mechelen.

De zomer is van Mechelen en dat betekent feesten van ’s ochtends vroeg tot ’s avonds laat,

met andere woorden: van zonsopgang tot zonsondergang. Daarom kozen we voor een logo

met zonsopgang/ondergang met in het groene landschap het logo van Mechelen Feest.


Pagina | 64

We hebben ook enkele variaties op dit logo bedacht:

De zomer van Mechelen roept niet enkel het gevoel op van zon en feest maar ook van heerlijke

ijsjes. Bij dit logo speelden we vooral met de kleur omdat de zomer geassocieerd wordt met

vrolijke kleurtjes.


Pagina | 65


Pagina | 66

Parkpop

Bij Parkpop denken wij vooral aan bomen en groen. Dit zijn twee essentiële elementen die

terugkomen in elke ontwerp. In de verschillende ontwerpen hebben we vooral gespeeld met

de vormgeving, namelijk het lettertype en de vorm van het logo.

3 bomen met onderschrift Parkpop

3 bomen met onderschrift Parkpop en omkadert door een cirkel


Pagina | 67

Bomen op heuvel met onderschrift Parkpop


Pagina | 68

Mechelen Zingt

Voor het logo van Mechelen Zingt wilden we de muziek in beeld brengen. Dat deden we aan

de hand van voicetracking. Hieronder vindt u twee ontwerpen waar we vooral gespeeld

hebben met de lay-out:

Bal Populaire

Voor Bal Populaire zijn we voor twee verschillende ontwerpen gegaan.

Een DJ met voicetrackingbril in de kleuren van de Belgische vlag


Pagina | 69

Platen, die zowel oude als nieuwe generaties kennen met een funky achtergrond.

Maanrock

Voor het logo van Maanrock was ons vertrekpunt of beter gezegd eindpunt de maan. We

kozen ervoor om alles wat met astronauten te maken heeft, te verwerken in het logo.


Pagina | 70


Pagina | 71

Websites

CMS-systeem – WordPress

Onze missie is het aanbieden van websites van hoge kwaliteit, waarbij controle over de

website en de beheerbaarheid ervan cruciaal zijn. Om deze beheerbaarheid te optimaliseren

maken we gebruik van het bestaand CMS-systeem, WordPress. Dit systeem wordt

geoptimaliseerd met ons maat- en programmeerwerk, waardoor het aantal mogelijkheden

van de website zal toenemen, dit resulteert in een “custom made” website die beantwoordt

aan de eigenheid van de klant.

Voordelen van het CMS-systeem WordPress:

• WordPress bezit standaard reeds veel functionaliteiten, en is daarenboven zeer

uitbreidbaar door middel van allerhande plugins (bijvoorbeeld voor de integratie van

social media of een evenementen kalender).

• Het platform bestaat reeds ruime tijd, wat ervoor zorgt dat zowel de ondersteuning

zeer vlot gaat als de documentatie en de verschillende handleidingen zeer uitgebreid

zijn.

• WordPress is inherent al SEO - vriendelijk, en dit kan nog worden versterkt door middel

van een SEO - plugin.

• Het team achter WordPress blijft het platform verbeteren, zowel door op vlak van

security steeds met de nieuwste technologie te werken als door constant nieuwe

functionaliteit toe te voegen.

• WordPress maakt het zeer gemakkelijk voor de eindgebruiker om de inhoud van de

site aan te passen, ook al beschikt deze eindgebruiker niet over technische kennis.


Pagina | 72

Website “De zomer is van Mechelen”

Aan de hand van de gekozen grafische huisstijl voor “De Zomer is van Mechelen” zal Cre@ctiv

voor de klant het design verder uitwerken.

Look & feel van het design: Knappe, frisse look & feel in een dynamisch en aantrekkelijk kader

dat in overeenstemt met het karakter van de zomer in Mechelen.

Bij oplevering is geen content (inhoud: teksten, afbeeldingen, …) voorzien. Deze dient

aangeleverd te worden door de klant en kan bij de initiële opstart van de website wel

ingevoegd worden door Cre@ctiv.


beheerbaarheid van de website. Hierbij wordt rekening gehouden met het feit dat de klant,

de beheerder, geen voorgaande kennis heeft van html.

Cre@ctiv zal hiervoor gebruik maken van enerzijds, voorgeprogrammeerde modules door ons

gemaakt, en anderzijds, standaard-functionaliteiten van het CMS-systeem Wordpress.

Daarnaast wordt er op maat geprogrammeerd. De bestaande modules worden geïntegreerd

in de website.

Projecten

In bijlage vind je de ontwerpen A, B, C, en D. In deze bijlage verduidelijken we wat de

intenties zijn met de ontwerpen en de website.


Pagina | 73

A. Website “De Zomer is van Mechelen”

We starten bij deze website bovenaan in de groene balk. Links bovenaan komt het logo. Om

het overzicht in het brede assortiment van evenementen te bewaren, kozen we ervoor om

met een kalender het volgende evenement aan te kondigen. Op die manier blijven de mensen

op de hoogte. Ook vind je er een zoekfunctie om snel de informatie te vinden waar je naar op

zoek bent.

Gelijk met het logo vind je een menu waarin de rubrieken events, vrijwilligers, eco/duurzaam,

sponsors en contact zijn ondergebracht.

Daaronder hebben we een ‘slider’ gemaakt. De bedoeling is om daarin vooral sfeerfoto’s weer

te geven van de verschillende evenementen, zodat (toekomstige) bezoekers nu al de sfeer

kunnen opsnuiven.

Daarna volgt een menu met de verschillende evenementen. Wanneer je cursor over een van

de evenementen schuift, verschijnt er een kleine pop-up (in het voorbeeld is dat Parkpop) met

een korte beschrijving van het festival. Besluit je om op een van deze evenementen te klikken,

dan word je naar de pagina verwezen van het desbetreffende evenement. Voor Maanrock kan

dit gelinkt worden aan een externe website die zich dan in een nieuw venster opent.

Onderaan de pagina hebben we een nieuwsrubriek en Twitter- en facebookfeed geplaatst

zodat de bezoekers via verschillende kanalen op de hoogte blijven van de nieuwtjes uit het

zomer-van- Mechelen-land. Het stimuleert hen ook om op deze manier te connecteren met

de “De Zomer van Mechelen” op social media.


Pagina | 74

B Onepager Zomer van Mechelen

Dit ontwerp is gebaseerd op het voorgaande, maar dan in een onepager gegoten. Je vindt

dezelfde tools: kalender, menu met verschillende evenementen, nieuwtjes en een social

media feed.

Wanneer je nu klikt op het menu met de rubrieken (events, vrijwilligers, enzovoort) gaat de

pagina automatisch naar de plaats op de onepager waar je de desbetreffende info kan vinden.

Het systeem voor de evenementen blijft hetzelfde: Schuif je over een van de evenementen,

dan opent zich een kleine pop-up met een korte beschrijving van het evenement. Wanneer je

klikt op een van de evenementen word je naar een andere pagina geleid met meer informatie

over het evenement.

C. Website “De Zomer is van Mechelen”

Voor dit ontwerp hebben we ervoor gekozen om voor een andere, zonnige kleur te gaan,

namelijk oranje. Boven het menu vind je de beroemde shareknoppen, die verwijzen naar jullie

social media.

Rechts daarvan een zoekbalk, zodat de bezoeker gemakkelijk kan navigeren. Ook de

aftelkalender kan hier niet ontbreken.

Het menu bestaat ook hier uit de rubrieken events, vrijwilligers, eco/duurzaam, contact en

sponsors. Wanneer je op één van deze rubrieken klikt, kom je op een andere pagina terecht

met meer informatie.

In de acht vierkanten is het de bedoeling om de verschillende logo’s te plaatsen. Wanneer je

op het logo klikt, word je verwezen naar de pagina met meer informatie over het evenement.

Voor dit ontwerp hebben we gekozen voor een uitgebreide homepage met plaats voor

nieuws, partners en de sociale media. Op die manier worden de organisaties beloond die jullie

steunen (sponsors) en krijgen bezoekers meteen een overzicht van wat de laatste nieuwtjes

zijn uit het Zomervan-Mechelen-front. Een goede manier om jullie bezoekers betrokken te

houden.


Pagina | 75

Onderaan, in de footer, hebben we gekozen voor een opvallend element om jullie nieuwsbrief

in de kijker te zetten en mensen aan te moedigen zich in te schrijven. Dit kan in plaats van een

nieuwsbrief ook een plaats zijn waar vrijwilligers zich kunnen inschrijven.

Onder deze inschrijvingsmodule hebben we weer plaats gemaakt voor de sponsors. Op die

manier zetten we ze nog eens in de kijker.

D. Onepager “De Zomer is van Mechelen”

Het ontwerp van de onepager is gebaseerd op het vorige ontwerp. Ook hier hebben we voor

oranje gekozen, een kleur die de zomer vertegenwoordigt.

We starten bovenaan met een zwarte balk met daarin de rubrieken: events, vrijwiligrs,

eco/duurzaam, contact en sponsors. Wanneer je op één van deze rubrieken klikt, verschuift

de pagina automatisch naar het onderdeel van de pagina die je hebt aangeklikt.

Voor het eventsonderdeel werken we met 8 buttons die elk een festival vertegenwoordigen.

Wanneer je met je muis over één van deze buttons schuift, opent er bovenaan een klein pop-

up venster (in het voorbeeld is dat Maanrock). Klik je op een button, dan word je naar een

andere pagina gestuurd. Op die manier blijft het overzichtelijk en heeft elke event een pagina

met meer informatie. Voor de aparte website van Maanrock kunnen we ervoor zorgen dat de

website opent in een nieuw venster. Op die manier zullen bezoekers meer geneigd zijn om

ook de andere evenementen van de zomer is van Mechelen te verkennen.

Klik je op vrijwilligers in het menu, dan gaat de pagina automatisch naar het deel van de

website waar vrijwilligers aan bod komen. Je kan hier werken met een inschrijvingsformulier.

Hoe sneller je de mensen de informatie aanbiedt naar waar ze op zoek zijn, hoe sneller ze op

jouw verzoek zullen ingaan.

Ook bij dit ontwerp hebben we plaats gelaten voor sponsors. Een slider kan hier helpen om

alle sponsors aan bod te laten komen.

Ten slotte is er nog een contactformulier onderaan de pagina.


Pagina | 76

Website “Maanrock”

Aan de hand van de gekozen grafische huisstijl voor “Maanrock” zal Cre@ctiv voor de klant

het design verder uitwerken. Bij goedkeuring van dit design wordt de volledige website

gebouwd. De website wordt eerst gemaakt op één van de testservers en bij elke aanpassing

vragen wij om feedback van de klant.

Pas nadat de finale goedkeuring is gegeven, leveren wij de volledige website.

Bij oplevering is geen inhoud voorzien. Deze dient aangeleverd te worden door de klant en

kan bij de initiële opstart van de website wel ingevoegd worden door Cre@ctiv.


beheerbaarheid van de website. Hierbij wordt rekening gehouden met het feit dat de klant,

de beheerder, geen voorgaande kennis heeft van html.

Cre@ctiv zal hiervoor gebruik maken van enerzijds, voorgeprogrammeerde modules door ons

gemaakt, en anderzijds, standaard-functionaliteiten van het CMS-systeem Wordpress.

Daarnaast wordt er ook nog op maat geprogrammeerd. De bestaande modules worden

geïntegreerd in de website.


Pagina | 77

Project

De achtergrond voor dit ontwerp is gebaseerd op een avondfoto van het publiek tijdens

Marktrock. De achtergrond start met de foto en mond uit in donkerblauw. Een kleur

waartegen de andere kleuren die we gebruiken oranje, rood, blauwe en groen mooi afsteken.

Ook de logo’s: de astronautenhelm en de raket vind je op de website terug. Door het werken

met elementen die regelmatig terugkomen, creëer je een zekere herkenbaarheid voor je

bezoeker.

Op de homepagina van dit ontwerp vind je meteen alle informatie terug die voor de bezoeker

van belang zijn. Maar voor alle duidelijkheid, dit is geen onepager. Wanneer je op een van de

rubrieken (latest news, line-up, faq en tickets) klikt, kom je terecht op een andere pagina met

meer informatie over het gewenste onderdeel. Op deze manier bereikt de bezoeker in

maximaal 3 stappen die informatie naar waar hij/zij op zoek is.

De eerste blok op de website is ‘latest news’, faq, line-up, tickets en social media. Zo heeft de

bezoeker meteen toegang tot de meest essentiële informatie, is hij op de hoogte van de

laatste nieuwtjes en kan hij jullie meteen liken op social media om ook op die manier up to

date te blijven.


Pagina | 78

14. Bijlage 5: Break True

Deze website was een volledige website in HTML en CSS, de lay-out kan u verder terug zien.

Ontwerp van de website


Pagina | 79

Code van contactformulier

In onderstaande afbeelding kan u een deel van de code van het contact formulier zien.


Pagina | 80

15. Bijlage 6: Master Your Mailbox

Voor dit ontwerp verwijs ik graag door naar de handleiding van Master Your Mailbox. Ook

verwijs ik graag door naar de verschillende weekverslagen waarin dit project uitgelegd werd.

Ontwerp van de website

Functionaliteiten

Voor de volledige functionaliteiten van de website verwijs ik graag door naar de handleiding

van de website.


Pagina | 81

16. Bijlage 7: Eigen thema

Tijdens de ontwikkeling van dit project hebben wij niet volledig onze focus op de lay-out gezet,

maar op de functionaliteiten voor het thema zoals de theme options. In volgende

afbeeldingen zal u voorbeelden van deze opties te zien krijgen en achterliggende code.

Theme Options

In volgende afbeelding ziet u verschillende opties die de gebruiker zou kunnen aanpassen.

Hier hebben we de mogelijkheid om de stijl van de verschillende headers afzonderlijk te gaan

aanpassen. Ook hebben we de mogelijkheid om een Google Analytics code in te voeren die

meteen op de juiste plaats zal komen te staan.


Pagina | 82

Vervolgens hebben we de mogelijkheid om de achtergrondkleur te wijzigen, ook hebben we

de mogelijkheid om een afbeelding als achtergrond te gebruiken of een patroon.

In dit onderdeel kunnen we onze footer gaan indelen. We kunnen kiezen om in één deel te

werken of in delen tot en met 4. Deze kunnen we afzonderlijk gaan opvullen met widgets.


Pagina | 83

Voorbeelden van code

Hier zien we de verschillende opties in de array die zal gaan bepalen uit hoeveel delen de

footer zal bestaan.

Bijhorende code bij het bepalen van de lay-out van de footer. Deze code zal in het footer.php

bestand te vinden zijn. De parameter van de radio button zal eerder opgevraagd worden.

Vervolgens gaan we deze waarde gebruiken om de footer op te vullen.

Vervolgens zien we de code waar we zullen werken met een patroon. Deze parameter zullen

we later gebruiken om de juiste achtergrond in te stellen.


Pagina | 84

17. Bijlage 8: Peter Castles

Voor Peter Castles heb ik gekozen om te werken met een one pager, je dus met andere

woorden kunnen blijven scrollen op één pagina. In deze opdracht heb ik ook aanpassingen in

Javascript aangepast om de verschillende vierkanten te creëren.


Pagina | 85


Pagina | 86

Hier zien we een stuk van de code waar ik een vierkant zal gaan tekenen in Javascript.

Vervolgens zal ik dit bestand compressen zodat de browser dit sneller kan lezen, waardoor de

website ook sneller zal laden.


Pagina | 87

18. Bijlage 9: KnipoogICT

Deze website was een gemakkelijk project en nam niet veel tijd in beslag omdat er niets

speciaal gecodeerd moet worden, u zal dan ook enkel het resultaat in de bijlage zien.


Pagina | 88

19. Bijlage 10: Website Cre@ctiv

Voor de Cre@ctiv website was het belangrijk dat we ons aan een strak design hielden, de

gebruiker moest alles binnen enkele klikken kunnen vinden. Op de home pagina hebben we

gewerkt met vier bollen met daaronder steeds de titel van het daaropvolgende tekstblok.


Pagina | 89

Wanneer we gaan kijken naar de

mobiele versie van deze pagina, ga

je zien dat de verschillende blokken

onder elkaar zullen worden

weergegeven.

Bij de Cre@ctiv website had ik mijn

eerste ervaring in het mobiel maken

van een website. Het was dan ook

een hele opgave maar we hebben

het uiteindelijk tot een goed einde

kunnen brengen.

Om de mobiliteit van deze website

te testen gingen we te werk met 2

verschillende IPads, een Surface, 3

verschillende IPhones en een

Samsung Galaxy S4.


Pagina | 90

Ook hebben we de Cre@ctiv website voorzien van een portfolio, hierin staan al en werken

waar ze trots op zijn. Deze kunnen gesorteerd worden op: websites, logo en grafisch ontwerp.

Er is de mogelijkheid op elke van de werken afzonderlijk te klikken om te een groot exemplaar

van het logo te zien of doorgestuurd te worden naar de website. Hieronder kan je een glimp

opvangen van het portfolio er nu precies uitziet.


Pagina | 91

De Cre@ctiv website is ook voorzien van een blog waar op regelmatige basis nieuwe blogs op

verschijnen. Deze zullen gesorteerd zijn op data. De bezoeker van de website heeft de

mogelijkheid om blogs te zoeken op tags of kan ze per maand laten weergeven.


Pagina | 92

20. Bijlage 11: Timesheets

Dag Tijd Wat (Wie)

week 1

10/feb/14 10h30 - 18h Introductie + 1ste opdracht: BSC I & A

Afspraken maken I & A

Competentie's bespreken I & A

Opdracht www.bsc.be

11/feb/14 10h - 18h Design Tips voor site Cre@ctiv A

Wijzigingen BSC A

12/feb/14 10h - 18h Nieuwe website Cre@ctiv I & A

Ontwerp Social Tips A

13/feb/14 9h30 - 16h30 Handleiding WordPress opstellen (start) A

Week 2

17/feb/14 10h - 18h Handleiding WordPress afwerken A

Website Cre@ctiv I & A

18/feb/14 10h - 18h Website Cre@ctiv I & A

Nieuw ontwerp maken voor documenten A


Ontwerp maken Job-Link A


Afbeeldingen Delabi A

Week 3


Meeting peter castles I & A

Aanpassingen Ontwerp Job-Link A

Eerste ontwerp Peter Castles A


Meeting Kli-BoGra I & A

Eerste ontwerp KLI-BOGRA A


Feedback KLI-BOGRA toepassen A


Logo's DELABI A

Logo KLIBOGRA A

Ontwerp maken website A


Pagina | 93

Week 4

3/mrt/14 9h - 18h Logo KLIBOGRA I & A

Securelink I & A

Eerste ontwerp Microdevice A

4/mrt/14 10h-18h Joblink A



DELABI A

Joblink A

Week 5


Logo Peter Castles A

18/mrt/14 9h-18h Securelink I & A

Cre@ctiv I & A


KLIBOGRA A

Peter Castles A

20/mrt/14 13h-18h KLIBOGRA A

Cre@ctiv A

Week 6

24/mrt/14 9h-18h Branding Websites A

Feedback Job-Link A

Feedback KLI-BOGRA A

25/mrt/14 DELABI A

Whitepaper Facebook A

26/mrt/14 9h - 18h Content Job-Link A

Feedback Peter Castles A

27/mrt/14 9h - 18h Afwerken KLI-BOGRA A

Responsibility Job-Link A

Cre@ctiv A

Week 7

31/mrt 9h - 19h Responvive Cre@ctiv I & A

Oplossen probleem KLI-BOGRA A

1/apr/14 9h -18h Responvive Cre@ctiv I & A

Security Cre@ctiv Website A

2/apr/14 9h -18h Responvive Cre@ctiv I & A

3/apr/14 9h - 16h Feedback Cre@ctiv A

Ontwerp Peter Castles A


Pagina | 94

Week 8

7/apr 9h - 18h Feedback Cre@ctiv A

KnipoogICT I & A

8/apr 9h -18h Afwerken Improvisio I & A

Afwerken KnipoogICT I & A

9/apr 9h -18h Kleuren Cre@ctiv aanpassen A

Karen Van Heuckelom A

10/apr 9h - 18h Shortcode Job-Link A

Theme Options eigen thema A

Week 9

7/apr 9h - 18h Shortcode Job-Link A

Logo's Mechelen A

8/apr 9h -18h Logo's Mechelen A

Handleiding Job-Link A

Testsite Peter Castles A

9/apr 9h -18h Peter Castles A

Vergadering nieuw project I & A

10/apr 9h - 19h Feedback Job-Link A

Content Peter Castles A

Afwerken Mechelen A

Week 10

14/apr 9h - 18h Feedback Job-Link A

15/apr 9h -18h Feedback Peter Castles A

16/apr 9h -18h Mechelen A

17/apr 9h - 18h Eigen thema A

Week 11

21/apr 9h - 18h Voorbereiding/Vergadering Mechelen A

22/apr 9h -18h Eerste ontwerp nieuw project A

Feedback Improvisio A

23/apr 9h -18h Master Your Mailbox A

Week 12

28/apr 9h - 18h Master Your Mailbox A


Ontwerpen nieuw project A


Facebook App A


Pagina | 95

Week 13

5/mei 9h - 18h Improvisio A

Folder Leaders of the Future A

6/mei 9h -18h Database A

Master Your Mailbox A

7/mei 9h -18h Database A

Mailapplicatie A

8/mei 9h - 18h Afwerken Master Your Mailbox A

Week 14

12/mei 9h - 18h Ontwerp Jologo A

Afwerken Peter Castles A

13/mei 9h -18h Catalogus A

14/mei 9h -18h Karen Van Heuckelom A

15/mei 9h - 18h Ontwerp Visual Harvesting A

Ontwerp Leaders Facebook A

Week 15

19/mei 9h - 18h Feedback Peter Castles A

Limburgse Werkgemeenschap A

Catalogus

20/mei 9h -18h Handleiding Peter Castles A

Folder Leaders A

21/mei 9h -18h Afwerken Peter Castles A

Break True A

22/mei 9h - 18h Break True A

Week 16

26/mei 9h - 18h Comptoir d'Enfants A

Vergadering Job-Link A

27/mei 9h -18h Nagelstyliste Nele A

Feedback Jologo A

28/mei 9h -18h Nagelstyliste Nele A

Nieuwsbrief Cre@ctiv A


Pagina | 96

21. Bijlage 12: Weekverslagen

Alexander Siccard 10/02 – 13/02/2014

Cre@ctiv

Dag 1 – 10 februari ’14 Werkschema

Bij het aankomen op het stagebedrijf, hebben we eerst en vooral enkele afspraken gemaakt

voor binnen het bedrijf. We leerden onze collega’s kennen en hun manier van werken, maar

ook wat ze voor het bedrijf betekenden. Na deze kennismaking hebben we samen onze

verwachtingen opgesteld. Het gaat over de verwachtingen vanuit Cre@ctiv zelf en vanuit ons

eigen standpunt. Deze kan u verder in het document terug vinden. In de namiddag hebben we

aan een eerste opdracht gewerkt voor het bedrijf BSC.

Opdracht BSC – www.bsc.be

De eerste opdracht was bedoeld om te leren werken met WordPress. De klant wou dat er

enkele wijzigingen aangebracht werden op de website. De bedoeling was om een extra pagina

aan te maken en hieraan een nieuwe galerij te koppelen, deze galerij bestond uit de

verschillende kranen die het bedrijf aanbood. De bedoeling was om per kraan de

http://www.bsc.be/


Pagina | 97

verbruiksgrafieken te gaan toevoegen. Deze informatie stond in verschillende PDF bestanden

die wij vervolgens aan de juiste kraan moesten linken.

Verwachtingen

Vanuit Cre@ctiv:

Correct in groep & zelfstandig werken

Deadlines respecteren

Onder tijdsdruk kunnen presteren

Correct tijd inschatten en onder tijdsdruk kunnen presteren

Vanuit Ilka & Alexander:

Elk een verschillende specialisatie (programmeren voor Alexander en netwerken voor Ilka)

Geduld bij het inwerken

Inspringen en advies / hulp verlenen indien nodig

Verwachtingen op vlak van competenties Ilka & Alexander:

De plug-in gemaakt / voorbereid tijdens de bachelor proef verder uitwerken en uiteindelijk implementeren

Bijleren over Wordpress & Drupal en hun gebruik als content management systeem

Webdesign in het algemeen (hoe kan ik een site aanpassen naar de noden van een klant)

Interne communicatie en het functioneren in een interne omgeving

Ervaring opdoen in contact met klanten

De verschillende manieren om naar een klant te zoeken

Klantgerichte communicatie en feedback

Leren werk correct in te schatten en adviezen formuleren


Pagina | 98


Onze tweede stagedag begon met nog enkele wijzigingen uit te voeren op de website van BSC.

Deze opdracht bestond uit het aanmaken van een nieuwe pagina waar we vervolgens een

nieuw fotoalbum aan zouden toevoegen. Dit was kleine opdracht waardoor het niet veel tijd

in beslag nam. Vervolgens kregen we te horen dat wij de nieuwe website voor het bedrijf zelf

zouden gaan ontwerpen. Hierover kregen we een uitgebreide uitleg en ook een eerste

opdracht. De opdracht bestond eruit om de functionaliteiten van de website te leren begrijpen

en welke we eventueel zelf zouden kunnen gebruiken. De aangemaakte website had een groot

assortiment van functionaliteiten waardoor het toch wel wat tijd in beslag nam. Meer details

kan u later terug vinden bij het eindbestand waar ik mijn geschreven notities aan zal

toevoegen. Vervolgens kreeg ik enkele grafische opdrachten die ik in Photoshop en inDesign

moest verweken.

Figuur 3: Voorbeeld Website Cre@ctiv


Pagina | 99


Dag 3 bestond eruit om verder aan de website van het bedrijf zelf te werken. Verder moest ik

ontwerp maken voor de website zelf. Het gaat over de pagina waar ze tips willen vermelden

naar de klant toe. Voor deze tips was ook een folder ontwerp nodig om te kunnen afdrukken

en aan de klanten te kunnen meegeven.


Cre@ctiv geeft aan de klanten een handleiding mee om te leren werken met WordPress en

dergelijke. Ik kreeg de opdracht om aan deze handleiding te beginnen om zo ook wat meer

over WordPress zelf te leren. Dit moest in een nieuw jasje gestoken worden waar ik ook voor

instond. Verder hebben we ook verder aan de website zelf gewerkt.


Pagina | 100


Cre@ctiv


Mijn eerste dag bestond eruit om de handleiding van WordPress verder af te werken en om

deze te overlopen met het team om zo eventueel aanpassingen te maken waar nodig.

Wanneer dit gedaan was kregen we de opdracht om verder te werken aan de website van het

bedrijf zelf. Voornamelijk heb ik nieuwe pagina’s aangemaakt en aan de opmaak gewerkt van

deze pagina’s.


De 2de dag was een rustige dag. Ik kreeg de opdracht om verschillende documenten in een

nieuw kleedje te steken om zo te voldoen aan de nieuwe huisstijl van het bedrijf. Wanneer dit

gedaan was kregen we de opdracht om verder te werken aan de website van het bedrijf zelf.

Voornamelijk heb ik nieuwe pagina’s aangemaakt en aan de opmaak gewerkt van deze

pagina’s.


Vandaag wou Elien zien of ze een extra taak aan mijn takenpakket kon toevoegen. De opdracht

bestond eruit om een ontwerp te maken voor het bedrijf Job-Link. Het bedrijf staat in om

mensen met een handicap te helpen of te zoeken naar een geschikte job. Ze waren echter niet

meer tevreden over hun website en wouden daarom een nieuwe.


Pagina | 101


Pagina | 102


Om mijn laatste werkdag van de 2de week kreeg ik in de voormiddag de opdracht om voor een

klant afbeeldingen te maken op het juiste formaat. Deze afbeeldingen zouden gebruikt

worden op een beurs. Hier heb ik de volledige voormiddag aan moeten werken. Later op de

dag deden wij nog enkele aanpassingen aan de website van Cre@ctiv. Voornamelijk heb ik

nieuwe pagina’s aangemaakt en aan de opmaak gewerkt van deze pagina’s.


Cre@ctiv


De eerste dag begon met de feedback van de klant Job-Link toe te passen op het ontwerp. De

klant was tevreden met het eerste ontwerp dat ik gemaakt had. De klant wou enkel wat

wijziging van het lettertype en het wijzigen van enkele afbeeldingen. Na deze wijziging

toegepast te hebben was het alweer middag. De namiddag begon met een afspraak met een

nieuwe klant. De klant zou op het kantoor langs komen om zijn wensen in verband met de

nieuwe website te komen vertellen. Bij het ontvangst vertelde hij ons dat zijn naam Pieter

was, maar dat hij onder de artiestennaam Peter Castles werkt. Pieter wou zijn website

gebruiken om zijn muziek en kunst aan te bieden en te tonen aan de mensen. Hij wou zijn

website simpel houden maar wou wel dat we zijn kubus – de kubus staat centraal in elk werk

van Pieter – in zijn website verwerkte. Ook wou hij dat we zijn logo vernieuwde. Nadat de

klant vertrok hebben we nog even overlegd met het team hoe we het logo zouden ontwerpen.

Na een eerste ontwerp gemaakt te hebben stuurde we dit ook meteen door naar Pieter en

wachten we nu nog op goedkeuring van hem.


Pagina | 103


De tweede dag begon met het verder werken aan de website van het bedrijf zelf. Voornamelijk

heb ik nieuwe pagina’s aangemaakt en aan de opmaak gewerkt van deze pagina’s. Na de

middag kregen we melding dat er weer een klant op het bedrijf zou langskomen in verband

met het maken van een logo en een website. De klant had een eigen visie van wat hij precies

wou, maar de klant had niet de nodige kennis van het ontwikkelen zelf waardoor we hem

moesten bijsturen bij het gebruiken van verschillende kleuren en welke hij niet kon gaan

gebruiken. De klant wil met het bedrijf starten op 6 maart 2014. Tegen dan hadden ze al graag

een logo gekregen waardoor we niet erg veel tijd hebben voor het ontwerpen van het logo.

Hierdoor moest ik meteen beginnen en kon ik op het einde van de dag toch al enkele

voorbeelden tonen.


Mijn derde dag begon met het bekijken van de feedback die ik kreeg van de klant van het logo

waar ik gisteren aan gewerkt had. De klant vond het goed, maar wou toch enkele

aanpassingen. De klant wil een beetje te veel op het logo waardoor het mij enorm veel moeite

kost om iets te kunnen afleveren. Na de middag stopte ik met het logo en begon ik verder te

werken aan de website van het bedrijf zelf.


De laatste werkdag begon met een opdracht voor het bedrijf DELABI, ze wouden nog enkele

logo’s op een geschikt formaat. Nadat ik deze opdracht verwerkt had begon ik verder te

werken aan de website van Cre@ctiv zelf. Na de middag kregen we een klant over de vloer die

ook een nieuwe website wou. Na wat uitleg gekregen te hebben wat de klant precies wou


Pagina | 104

begon ik met al wat schetsen te maken. Verder heb ik verder gezocht naar een geschikt logo

voor de klant van woensdag.


Cre@ctiv

Dag 1 – 3 maart ’14 Werkschema

De eerste werkdag begon met wat aanpassingen te maken voor het bedrijf KLI – BOGRA. Dit

is het bedrijf waarvoor we het logo ontworpen hebben. Niemand van het bedrijf was het

echter eens met het ontwerp van het logo, maar klant is koning. Na deze wijzigingen

aangebracht te hebben, kregen we bezoek van de klant zelf. Tijdens deze vergadering gaven

we hun meer uitleg over hoe het verder zou lopen met het project en hoe ze hun materiaal

zouden moeten afdrukken.

In de namiddag heb ik verder gewerkt aan de ontwerpen voor Microdevice.


Pagina | 105


Mijn 2de dag heb ik volledig gespendeerd aan het ontwikkelen van de website voor Job-Link.

Het ontwerp hiervan is terug te vinden in het weerkverslag van week 3. Ik ben begonnen met

de installatie van WordPress, vervolgens ben ik aan de ontwikkeling van de pagina’s

begonnen.


De derde dag zijn we begonnen aan een nieuw project, het project is voor de klant Securelink.

De klant wil een nieuwe website met overgenomen lay-out die ze op hun Nederlandse website

hebben. Het is ook belangrijk om hier enkele modules te gaan schrijven voor te gebruiken op

de website. Een voorbeeld van deze code zal verder te zien zijn in een van de komende

verslagen. Ook heb ik verder aan de pagina’s van Job-Link gewerkt.


De laatste dag begon met nog enkele afbeeldingen te maken voor de klant DELABI, zij wouden

nog enkele afbeeldingen voor op een beurs die er zat aan te komen. Later op de dag heb ik

nog gewerkt aan de website van Job – Link, ik had van de klant nog wat feedback gekregen.

Ook aan de website van Cre@ctiv heb ik nog verder zitten werken. Voornamelijk de opmaak

van de pagina’s.


Pagina | 106


Cre@ctiv


De eerste werkdag begon met het logo van Peter Castles. Pieter had mij een ontwerp gestuurd

en hij vroeg me of ik dit digitaal kon maken. Hier heb ik in de voormiddag aan gewerkt. In de

namiddag heb ik voor Job – Link enkele tevredenheidsmetingen gemaakt die ze wouden

implementeren in hun website.


Pagina | 107


De tweede dag hebben we gewerkt in het gebouw van de hub. Deze dag hebben we bijna

volledig gespendeerd aan het ontwikkelen van de website voor SecureLink. Dit is toch wel een

belangrijk project en Elien had graag dat we dit vandaag naar de klant konden sturen. Nu

wachten we enkel nog op feedback van de klant. De opdracht bestond voornamelijk uit de

opmaak nog aan te passen van de verschillende pagina’s.


Mijn derde dag heb ik van thuis uit gewerkt. Ik moest naar de dokter en heb dit kunnen regelen

met Elien. Elien had mij een aantal taken gegeven die ik moest afwerken. Deze taken waren

de feedback van Peter Castles toe te passen op zijn logo. Vervolgens moest ik de volledige

content van de website van Job – Link overzetten naar hun nieuwe website. Op deze site

moest ik ook zorgen voor een AAA functie wat ervoor zorgt dat het lettertype groter gemaakt

kan worden. Wanneer deze taken klaar waren moest ik al een eerste versie van de website

voor KLI – BOGRA maken.


De laatste dag was een korte dag, een dag waar we enkel in de namiddag hebben gewerkt. In

de voormiddag hadden we een afspraak op school – Jobdag - . In de namiddag heb ik nog

enkele wijzigingen toegepast op de website van KLI – BOGRA en Cre@ctiv. Dit waren

opdrachten in verband met de opmaak.


Pagina | 108


Cre@ctiv


De eerste dag heb ik voornamelijk gewerkt aan Job – Link en KLI – BOGRA. Er moesten nog

enkele wijzigingen aangebracht worden aan de website. Vervolgens heb ik ook gewerkt aan

de branding van de verschillende websites.


De 2de dag begon met het werken voor DELABI, zij wouden voor hun congres nog enkele foto’s

die ze aangepast wouden. Nadat deze opdracht voltooid was heb ik gewerkt aan de

Whitepaper voor Facebook Advertising.


Mijn begon met het implementeren van content voor de website van Job – Link, deze content

had ik via email ontvangen van hun. Vervolgens heb ik contact opgenomen met Peter Castles,

zo heb ik hem feedback kunnen geven over zijn logo en wat we eventueel verder zouden

kunnen doen voor hem.


De laatste dag heb ik onder andere gewerkt aan de website van KLI – BOGRA, aangezien de

website online zou komen, moest alles klaar zijn waar wij moesten voor zorgen. De website

was dan ook klaar die dag en kon vervolgens ook online komen. In de voormiddag heb ik zitten


Pagina | 109

werken aan de responsibility van de website voor Job – Link. Later op de dag heb ik nog zitten

werken aan de website van Cre@ctiv.


Cre@ctiv


De eerste dag begon met problemen met de website van KLI BOGRA. Een hele oude versie

van IE ondersteunde de website niet waardoor dit een slecht beeld gaf van de website. Door

op zoek te gaan naar enkele tools kwamen we uit op de MyDebugBar IETester tool uit. Met

deze tool konden we de css gaan aanpassen om toch een beter beeld te krijgen van de

website.

Dag 2 – 1 april ’14 Werkschema

De 2de dag begon met het werken aan de website voor Cre@ctiv. Mijn eerste taak was zorgen

voor de security op de website. Ik moest zorgen voor een andere toegangspagina dan de

standaard login pagina. Verder heb ik ook gekeken voor het aantal inlog pogingen aan te

passen en heb ik voor een rekensom gezorgd bij de inlogpagina. Dit gaan we gaan gebruiken

om bots en hackers te voorkomen. Ook security i.v.m. de database werd geïmplementeerd.

Later op de avond ben ik begonnen met de ondersteuning voor de mobiele platformen.


Vandaag moest de website van Cre@ctiv online komen te staan. Onze taak bestond er uit om

de website op een goede manier op de mobiele platformen te krijgen. De moeilijkheid hieraan

was dat Ipad en dergelijke werken met een hoge resolutie. Deze toestellen (nieuwe generatie)


Pagina | 110

worden gezien als laptop waardoor we echt moesten gaan specificeren hoe we het te zien

krijgen. Het nam vooral veel tijd in beslag omdat we voor praktisch elk toestel een andere css

moesten gaan schrijven.


De laatste dag heb ik in de voormiddag gewerkt aan de website van Cre@ctiv, deze is gisteren

online geplaatst en hier moesten nog enkele wijzigingen aan gebeuren. De wijzigingen

bestonden uit het aanpassen van verschillende marges die nog niet echt goed gepositioneerd

waren. Dit was moeilijk aangezien we er pas later achter kwamen dat zowel de test als de

goede website op de zelfde database geconfigureerd waren en dit zorgde voor problemen

door de verschillende css bestanden. Vervolgens heb ik verder gewerkt aan het ontwerp voor

Peter Castles. Ik heb gekozen om te gaan werken met een One Page website. Hier heb ik zijn

werken in verwerkt die je ook in de afbeelding zien. Vervolgens heb ik de klant hiervan ook op

de hoogte gebracht en wacht ik nu op feedback van hem.

Competenties:

Ik zal werken rond volgende competenties:

1. Competentie 3: Relatie stakeholders onderhouden

2. Competentie 8: Een IT-opdracht projectmatig en teamgericht aanpakken met

respect voor de planning.

3.Competentie 9: IT-taken kwaliteitsvol uitvoeren zodat het resultaat voldoet aan de

eisen van een steeds wisselende omgeving.


Pagina | 111


Pagina | 112


Cre@ctiv


De week begon rustig. Ik moest enkele aanpassingen maken aan de website van Cre@ctiv ivm

google en de inhoud die we te zien krijgen wanneer we gaan zoeken naar Cre@ctiv in google.

Dit zijn de SEO gegevens van de website. Vervolgens heb ik Ilka geholpen met de website van

Knipoog. Hier moest nog verdere content aan toegevoegd worden en ook nog enkele

aanpassingen qua layout.


De 2de dag hadden we de opdracht om Improvisio en Knipook volledig af te werken. Improvisio

had al een bestaande website. Het was een van de eerste projecten van het bedrijf en dit was

nog niet echt responsive. Hier moesten wij voor zorgen. De bestaande website responsive

maken. Vervolgens moesten we Knipoog afwerken. Dit was enkel nog wat details afwerken

qua layout.


Op woensdag moest ik enkele kleuren van de website van Cre@ctiv aanpassen. Vervolgens

heb ik met Karen Van Heuckelom samengezeten om te praten over een nieuw ontwerp voor

haar website. We zijn op het idee gekomen om een one pager te gaan gebruiken. We hebben

een basis layout besproken. Vervolgens zijn we over de kleuren gaan nadenken. Het heeft ons

enorm veel tijd gekost om geschikt kleurenpalet te vinden. Ze wou een warme kleur maar niet


Pagina | 113

naar het te felle rood. Naar lang zoeken hebben we besloten om dit even te laten rusten en

hier later op terug te komen.


Op donderdag, onze laatste werkdag begon ik met het maken van een shortcode voor de

website van Joblink. Het idee achter een shortcode is dat in dit geval de klant zijn tekst ingeeft

en dat tussen een bepaalde tag zet, in dit geval [TekstBallon content=”” link=””]. De content

zal verwijzen naar de inhoud van de tekstballon en de link zal de url zijn waar de gebruiker

naartoe zal gaan wanneer deze hierop drukt. Het eindresultaat zal een tekstballon zijn met

daar dan inhoud in van de klant.

Vervolgens ben ik begonnen met het maken van theme options voor een eigen gemaakt

thema. Het principe is dat de gebruiker op een gebruiksvriendelijke manier instellingen kan

wijzigen zoals het lettertype of de achtergrond van een bepaald onderdeel zonder dit in de css

zelf te moeten gaan wijzigen. Dit gebeurd in php waar we een css lijn gaan returnen die

vervolgens in de css geplaatst wordt. Later zal ik hier afbeeldingen van tonen.


Pagina | 114


Cre@ctiv


Op maandag ben ik verdergegaan op het project van Job-Link waar ik donderdag ook aan

gewerkt heb. De gebruiker kan nu al een tekstballon maken, maar dit moet nog altijd door

middel van code te gaan schrijven. De gebruiker moet een shortcode gaan schrijven en dit

willen we vermijden. We hebben er dus voor gezorgd dat de gebruiker een icoontje kan gaan

indrukken, zoals we bij Word en dergelijke ook kunnen doen. Vervolgens zal de gebruiker een

pop-up scherm te zien krijgen waarin ze zullen gevraagd worden naar de tekst dat ze in het

tekstballonnetje willen. Vervolgens gaat de klant gevraagd worden naar, indien gewenst, een

URL waar we willen naar verwijzen. Als laatste kan de gebruiker kiezen of hij een blauw of

groen tekstballonnetje wil gebruiken. Vervolgens ben ik begonnen aan een nieuw project voor

de stad Mechelen. Zij willen een ontwerp voor een website en een ontwerp voor 5 nieuwe

logo’s. Het gaat over logo’s voor enkele festival die ze willen organiseren in de zomervakantie

omtrent “De zomer is van Mechelen”.


Dinsdag ben ik begonnen met enkele ontwerpen voor Mechelen af te werken. Vervolgens heb

ik de handleiding van Job-Link afgewerkt. Cre@ctiv geeft aan elke klant een handleiding mee

over hoe ze moeten werken met hun website en hoe ze de verschillende functionaliteiten

kunnen gebruiken. Wanneer ik dat afgewerkt had, heb ik contact opgenomen met onze klant

Pieter voor nog wat feedback te bespreken qua layout voor zijn nieuwe website. Wanneer ik

hiermee klaar was heb ik de testwebsite voor Pieter opgestart waar hij onze wijzigingen kan


Pagina | 115

gaan opvolgen. Ik ben begonnen met de installatie van WordPress en vervolgens de opmaak

van de pagina’s.


Op woensdag ben ik begonnen met het ontwerp voor Pieter te digitaliseren. Het was een vrij

eenvoudige opdracht omdat we gekozen hebben voor de one pager. Omdat het snel en goed

verliep kon ik het eerste ontwerp in de voormiddag afwerken. In de namiddag hadden we een

vergadering met een klant in verband met marketing. De opdracht dat de klant wou uitwerken

was rond de duurzaamheid. Ze wil bedrijven aansporen om rekening te houden met de

duurzaamheid. We hebben dan ook een volledig marketing plan opgemaakt voor haar.

Vervolgens heb ik nog een online opleiding gevold. Deze opleiding vertelde mij hoe ik er kan

voor zorgen dat Google mijn website kan vinden en waar ik rekening moet mee houden. De

zogenaamde SEO.


Op donderdag, onze laatste werkdag begon ik met wijzigingen aan te brengen op verschillende

websites. Job-Link wou meer te zien krijgen op hun homepage. Hierdoor ziet alles wat dichter

op een, maar dat is wat ze willen. Het was dus een kwestie van spelen met de verschillende

marges. Ook heb ik de AAA functie verder uitgewerkt die ervoor zorgt dat de gebruiker de

tekst in een groter of kleiner lettertype te zien kan krijgen. Vervolgens heb ik ook nog wat

extra content aan de website van Peter Castles toegevoegd. Later op de dag ben ik samen met

een collega begonnen aan het verder uitwerken van de opdracht voor de stad Mechelen. We

hebben enkele logo ontwerpen gemaakt en ook een ontwerp van de website.


Pagina | 116


Cre@ctiv


Op dinsdag draaide de dag volledig om de stad Mechelen. Vandaag was de dag dat we onze

ontwerpen zouden presenteren aan de verantwoordelijke voor de verschillende

evenementen van de stad zelf. In de voormiddag heb ik dus gewerkt aan de presentatie

hiervoor en heb ik dit ook enkele keren grondig overlopen met een collega. In de namiddag

was ik de volledige middag in Mechelen om daar mijn presentatie te geven. Ze waren zeer

tevreden en we wachten dan ook nog op een antwoord van de verantwoordelijke.


Dinsdag ben ik begonnen met een ontwerp te maken voor een nieuwe klant. Het gaat hier

over een persoon dat een cursus wil aanbieden aan zijn bezoekers die ze dan online zouden

kunnen bestellen. Vervolgens heb ik nog aan de website van Improvisio gewerkt. Dit bedrijf

wou wat aanpassingen aan de footer die ik heb kunnen oplossen.


De laatste dag heb ik in de voormiddag gewerkt aan een nieuw project. De klant wil mensen

de mogelijkheid geven om hun te kunnen inschrijven in zijn cursus. Dit kan voor 1 maand, 6

maand enz. Vervolgens zou de gebruiker een quiz moeten uitvoeren om zo het niveau te

kunnen bepalen. Aan de hand van dat niveau zal de gebruiker bepaalde content krijgen. Deze

contant zal wekelijks vernieuwd worden. Ik heb voornamelijk gewerkt aan het inlogsysteem

en het betaalsysteem. De klant kan een pakket kiezen en zal dan doorverwezen worden naar


Pagina | 117

de betaalpagina. Wanneer de klant betaald heeft, dan kan hij de juist content zien. In de

namiddag zijn we opnieuw naar een klant geweest om te informeren over wat zij juist wenst

als website. Het resultaat zal u volgende week te zien krijgen.


Cre@ctiv


De eerste dag hebben we de volledige dag gewerkt aan het nieuwe project. We hebben ervoor

gezorgd dat nieuwe gebruikers zich kunnen inschrijven voor 7 of 13 maanden. Vervolgens zal

wekelijks de content wijzigen en zal de gebruiker toegang hebben tot extra content. Na 7 of

13 maanden zal de gebruiker geen toegang meer hebben tenzij deze zijn account vernieuwd.

Hiervoor hebben we gewerkt met een membership en een private content plugin die ons deze

functionaliteiten toelaten.


Mijn 2de werkdag heb ik gespendeerd aan het ontwerpen van enkele ontwerpen voor een

nieuwe klant. Deze ontwerpen zal ik later toevoegen aan het document. Vervolgens heb ik

verder gewerkt aan het project van maandag.


De laatste dag heb ik in de voormiddag gewerkt aan het project van maandag. Dit ging

voornamelijk over het testen. Ik heb getest of we effectief toegang hebben tot de juiste

content en of deze dagelijks gewijzigd werd. Ook hebben we verder gecontroleerd of elk

access level de juiste content bevatte. Vervolgens ben ik begonnen aan een facebook


Pagina | 118

applicatie in verband met een nieuwsbrief voor een bedrijf dat kinderkleding verkochte. Ik heb

een formulier gemaakt waar de gebruiker zijn naam en voornaam maar ook email verplicht

moet invullen. Vervolgens kan de gebruiker ook nog de geboortedatum van zijn kind ingeven,

maar dit blijft optioneel. Vervolgens moet het emailadres geverifieerd worden met een

bevestigingsmail. Die dag ben ik later vertrokken omdat ik een afspraak had in het ziekenhuis.


Cre@ctiv

Dag 1 – 5 mei ’14 Werkschema

Op maandag ben ik begonnen met het importeren van een nieuw menu voor het bedrijf

improvisio. Dit gebeurde door gebruik te maken van de reeds geïmplementeerde shortcode.

Het eindresultaat kan u hieronder terug zien. Dit is een voorbeeld van een van de verschillende

menu’s die we aangepast hebben.


Pagina | 119

vervolgens heb ik gewerkt aan een ontwerp voor een nieuwe folder die wij zouden maken

voor een klant. Het resultaat kan u hieronder terug vinden.


Pagina | 120


Pagina | 121


Op dinsdag zijn we begonnen met het controleren van een database. Het was een database

met klantengegevens die moesten gecontroleerd worden. We hebben dan ook de volledige

voormiddag gewerkt aan het controleren van deze gegevens. Deze opdracht was vooral

marketing gericht. Maar het was een opdracht dat deze week moest klaar zijn. In de namiddag

heb ik nog verder gewerkt aan de opdracht van Master Your Mailbox.


Dag drie heb ik voornamelijk gewerkt aan master your mailbox. Deze dag heb ik voornamelijk

gewerkt aan de private content, dus ervoor zorgen dat elk niveau de juiste content te zien

krijgt. Vervolgens heb ik nog wat aanpassingen gemaakt aan een mailapplicatie van een klant.

Ook heb ik de database van gisteren afgewerkt waar ik ook ongeveer een halve dag aan

gewerkt hebt.


De laatste dag heb ik master your mailbox afgewerkt op uitzondering van de layout. U zal dan

ook een stappenplan te zien krijgen over de verschillende stappen om zo toegang tot de

content te krijgen.

Stap 1: Account aanmaken met rol 7 maand. Stap 2: Email bekijken - inloggen en 7 maand bevestigen


Pagina | 122

————————————

————————————


Pagina | 123

————————————

Stap 3: Doorverwijzen naar de quiz


Pagina | 124

Stap 4: Bevestiging quiz

Later op de dag had ik een afspraak met Pieter ivm zijn website van Peter Castles. Samen met

hem heb ik zijn website overlopen en welke aanpassingen er nog zouden moeten gebeuren.

Het resultaat zal u in de loop van volgende week te zien krijgen.


Pagina | 125


Cre@ctiv


Op maandag ben ik begonnen met het ontwerp van Jologo aan te passen. Het bedrijf had mij

wat feedback gegeven omtrent mijn vorige ontwerp en dit heb ik dan ook aangepast. Na

goedkeuring zijn we begonnen met het coderen van de website. Deze website is zo goed als

klaar, het ontwikkelen verliep goed en snel. Het is nu wachten op teksten en foto’s van de

klant.

In de namiddag heb ik de website van Peter Castles volledig afgewerkt. Ik heb enkele

aanpassingen gemaakt aan het contactformulier, vervolgens heb ik er ook voor gezorgd dat


Pagina | 126

bezoekers zich kunnen inschrijven op een nieuwsbrief. Nu kan Pieter ook zijn muziek vanuit

SoundCloud mooi tonen op de website. Als laatste heb ik ook de volledige tekst van de website

toegevoegd. De website kan je steeds bekijken op: [email protected].


Mijn 2de werkdag heb ik volledig gespendeerd aan het ontwerpen van een nieuwe catalogus.

Hier moest ook meteen tekst geïmporteerd worden. De catalogus zou dienen voor een nieuw

assortiment kranen.


Op dag drie heb ik gewerkt voor de nieuwe website voor Karen Van Heuckelom. Samen met

de klant heb ik haar website volledig aangepast. Het was een dag van puzzelen om tot het

gewenste resultaat te komen, de aanpassingen gingen vooral over kleuren, lettertypes enz.

Ook heb ik met de klant besproken hoe ze de website kon aanpassen en heb ik ook samen

met haar enkele templates gemaakt voor pagina’s.


Pagina | 127


Pagina | 128


De laatste werkdag van deze week begon met nog enkele ontwerpen te maken voor Visual

Harvasting. Wanneer deze ontwerpen goedgekeurd worden, kunnen wij aan de slag met het

coderen van deze website.


Pagina | 129

Vervolgens heb ik ook nog gewerkt aan een nieuw ontwerp voor een Facebook pagina van een

klant. Het ontwerp kan u hieronder in het document terug zien te vinden. Later op de dag zijn

we naar het nieuwe kantoor gegaan om daar wat meer informatie te krijgen, vanaf maandag

zullen we daar dus beginnen met werken.


Pagina | 130


Cre@ctiv


Maandag had ik een afspraak met Pieter in verband met zijn website van Peter Castles. Deze

vergadering diende als evaluatie van de website. Zijn er nog zaken dien anders moeten? Hoe

maak ik pagina’s, hoe wijzig ik content en hoe pas ik mijn portfolio aan. Na het overlopen van

de volledige website heb ik nog enkele wijzigingen aangebracht omtrent de layout. Enkele

foto’s van formaat aanpassen en dergelijke zaken.

Die dag heb ik ook nog gewerkt aan de Facebookpagina van de Limburgse Werkgemeenschap.

Deze pagina moest een andere opmaak krijgen. We hebben voornamelijk gespeeld met de

kleuren. Tenslotte heb ik ook nog verder zitten werken aan een catalogus van een klant. Dit

was voornamelijk werk in inDesign.


Pagina | 131


Dag 2 startte ik met de laatste aanpassingen aan te brengen aan de website van Pieter.

Voornamelijk heb ik ook zitten testen of alles wel correct werkte. Zo heb ik onder andere de

muziek en de nieuwsbrief getest en daarvan ook de layout aangepast. Vervolgens ben ik

begonnen aan de handleiding voor de website van Pieter. In deze handleiding komt

voornamelijk de manier van werken in. Hoe pas ik de content aan, hoe werk ik mijn portfolio

bij, hoe maak ik een nieuwe pagina aan.

Daarna heb ik samen met een collega gewerkt aan de opmaak van een brochure. En hebben

we deze ook opnieuw naar de klant verstuurd.


Pagina | 132


Op woensdag heb ik voornamelijk de catalogus van gisteren afgewerkt. Ook heb ik mijn

handleiding voor de website van Pieter verbeterd. Vervolgens hebben we uitleg gekregen over

een nieuwe website die we morgen zouden afwerken. De website moest in grote maten

responsive zijn, dus hebben we gekozen om met bootstrap te werken. Later op de avond

hebben we dan ook de testwebsite opgestart en hebben we daar vervolgens bootstrap op

geplaatst.


Pagina | 133


Onze laatste dag van de werkweek hebben we volledig gespendeerd aan het maken van een

nieuwe website. Het was voornamelijk aanpassen omdat de website volledig in HTML en CSS

gemaakt moest worden en er dus geen gebruik gemaakt werd van WordPress. Ilka en ik

hebben hier samen aan gewerkt. We hebben onderling de pagina’s verdeeld. Vervolgens

hebben we ook gezorgd voor de contactformulieren.


Pagina | 134


Cre@ctiv


De laatste week van de stage zou niet te druk meer zijn. We zouden ons focussen om de laatste

aanpassingen te maken aan de lopende projecten zodat deze afgehandeld kunnen worden. Ik

ben begonnen met de nieuwsbrief af te werken voor Comptoir d’Enfants. Deze nieuwsbrief

moest in verschillende talen gemaakt worden en vervolgens moest deze dan gelinkt worden

aan de correcte pagina op de website. Vervolgens had ik een afspraak met de klant Job-Link.

Deze afspraak diende om meer uitleg te geven omtrent hun website. Hoe ze nieuwe pagina’s

moeten aanmaken, hoe ze een nieuwe enquête aanmaken op hun website en hoe ze kunnen

gebruik maken van hun gepersonaliseerde shortcode. Als afsluiter van de dag heb ik samen

met Elien en Ilka samengezeten om een stappenplan te maken voor ons einddocument. Hierin

zouden de verschillende stappen komen te staan over het starten en eindigen van een project.


Pagina | 135


Dag 2 heb ik gewerkt aan de website van Nagelstyliste Nele. Hier moest enkele pagina’s

aanmaken en deze opvullen met de correcte content. Ook voor deze website moest ik een

nieuwe nieuwsbrief ontwikkelen met haar zomeractie in vermeld. Vervolgens heb ik ook

contact opgenomen met Jologo voor eventuele feedback over de website. Na wat overleg heb

ik de feedback gekregen en kon Ilka aan de slag met het opvullen van de website.


Pagina | 136


Ook op de laatste dag moest ik nog een nieuwe pagina aanmaken op de website van

Nagelstyliste Nele. Vervolgens heb ik dan ook haar nieuwsbrief volledig afgewerkt met de

juiste foto’s. Later op de middag ben ik dan begonnen met nog wat aanpassingen aan de

website van Cre@ctiv zelf. Hier moesten nog enkele referenties toegevoegd worden en wat

foto’s die ontbraken bij enkele blogs. Als afsluiter heb ik ook de nieuwe nieuwsbrief van

Cre@ctiv ontworpen en gecodeerd in html.


Pagina | 137


Pagina | 138


Pagina | 139


Pagina | 140

22. Bijlage 13: Werkschema’s

BSC

To Do Fotoalbum aanmaken dat gelinkt zal worden naar verschillenden

pagina’s

Afspraken Correcte benamingen

Juiste links gebruiken

Deadline 11 februari 2014

Kunstenfestival Damme

To Do Lay-out van annedegraaf.be namaken

Fotoalbums

Afspraken Identieke lay-out als annedegraaf.be


Cre@ctiv

To Do

Volledig nieuwe website

Portfolio

Referenties

Contactformulier

Afspraken Carte blanche

Deadline Gedurende de hele stage periode


Pagina | 141

Kli-BoGra

To Do

Design: logo, flyers, website ontwerp

Volledige website

Fotoslider

Afspraken Houden aan de visie van de klant


Securelink

To Do Lay-out copy van securelink.nl

Post types: jobs en events

Afspraken

Deadline respecteren

Confidentiële informatie

Voldoende feedback vragen

Deadline 21 maart 2014

Joblink

To Do

Design: ontwerp website

Drie grote blokken: werknemers, werkzoekende, werkgevers

Tekstballon waar de gebruiker de tekst in kan aanpassen

Afspraken Huisstijl gebruiken

Voldoende feedback vragen

Deadline 26 mei 2014


Pagina | 142

KnipoogICT

To Do Voorontwerp namaken op testsite

App pagina

Afspraken Houden aan het ontwerp

Feedback vragen

Deadline 24 maart 2014

Improvisio

To Do Responsive maken

Post type: gerechten / menu’s

Afspraken

Houden aan het vorige design

Feedback vragen

Responsive

Deadline 5 mei 2014 (laatste feedback)

Thema Cre@ctiv

To Do

Keuze tussen nog. 30 verschillende lettertypes

Sitelogo

Kleur kunnen kiezen voor body, h1, h2, h3, h4

Templates pagina: pagina zonder slidebar (dus full, slidebar links

(hiervoor indelen via widgets), slidebar rechts (indelen via widgets) en

een verkoopspagina (dit is pagina zonder footer en zonder navigatiebalk

zodat er geen afleiding is)

Footer: kunnen kiezen of ze 2delig, 3delig of 4delig is

Afspraken Carte blanche

Bijkomende feedback respecteren

Deadline /


Pagina | 143

Peter Castles

To Do Design: logo, website

Website uitbouwen

Afspraken

Rekening houden met zijn huisstijl

Ideeën van de klant zelf uitwerken

Responsive


Master your mailbox

To Do

Quiz

Membership level

Access levels

Ontwerp website

Afspraken Lay-out nog niet belangrijk functionaliteiten gaan voor

Deadline 8 mei 2014


Pagina | 144

Jologo

To Do Design: website

Uitwerken website

Afspraken Moet volledig responsive zijn


Leaders of the feature

To Do Design: website, logo

Uitwerken website

Afspraken

Home is afbeelding met blaadjes waar op geklikt kan worden om naar

anderen pagina’s te gaan.

Er zal gebruik gemaakt worden van twee verschillende designs op de

website


23. Bijlage 14: Handleidingen

Voor de handleidingen verwijs ik graag door naar de extra documenten.

24. Bijlage 15: Offertes

Als extra bijlage kan u enkele offertes terug vinden van de gerealiseerde projecten gedurende

mijn stage.

25. Bijlage 16: Presentatie

Voor de presentatie verwijs ik graag door naar de afgedrukte versie.


Pagina | 145

26. Bijlage 17: Bewijsstukken Competenties

Vlot functioneren in een professionele (internationale) omgeving

In onderstaande afbeeldingen ziet u de planning van 2 projecten. Dit zijn onderdelen die nog

moeten gebeuren aan het project of die reeds klaar zijn. Zo wist iedereen wat er nog op de

planning stond. Voor deze planning maakte wij gebruik van Yammer. Yammer werd in de

bachelorproef reeds toegelicht.


Pagina | 146


Pagina | 147

Relatie stakeholders onderhouden

Volgende afbeeldingen bevatten e-mails die verbeterd werden alvorens deze naar de klant te

mailen. Deze werden meteen gecontroleerd of doorgemaild naar een collega die het

vervolgens eens zou overlopen.


Pagina | 148

Voor de andere competenties verwijs ik door naar de volgende pagina’s. Hier zal u een

evaluatie vinden van mijn stageplaats. Er zal een beoordeling zijn op mijn vaardigheden, mij

attitude en werkhouding tijdens de stage.

Getuigenis competenties

Alexander is enorm geëvolueerd door heen de stage. In het begin was Alexander niet de

persoon die snel initiatief ging nemen, niet omdat hij dat niet wou, maar omdat hij niet wist

dat het geapprecieerd ging worden. Na verloop van tijd ( na 2 weken ongeveer) nam hij vaak

het initiatief in eigen handen, zowel intern als naar klanten/prospecten toe. Zo zagen we dat

Alexander buiten een goede kennis van het project, ook een commerciële feeling heeft.

Hierdoor was het contact met het team maar ook de relatie met de klant altijd goed.

Van zodra Alexander een vraag had of iets niet goed snapte, durfde hij die altijd te stellen

waardoor er niet veel tijd “verloren” ging. Daarnaast kan hij een goede planning voor zichzelf

opstellen waar hij zich goed aan kon houden. Was iets niet klaar zoals gepland, dan vond hij

het ook niet erg hier na zijn uren wat verder aan te werken.

Alexander heeft doorheen zijn stage zijn kennis van HTML, CSS, PHP en Javascript verder

uitgebouwd. Wanneer er iets was dat niet duidelijk voor hem was of moeilijker was dan het

leek, zag Alexander dit als een uitnodiging en waren Google en het Creactiv Team zijn beste

vrienden. Hij ging geen enkel probleem uit de weg en wou voor elke case een oplossing

bedenken.

Eind april kon Alexander kleinere projecten perfect alleen aan. Deze reden en alle redenen

hierboven, zijn redenen waarom we Alexander gevraagd hebben om vanaf september 2014

het Creactiv team te versterken als voltijdse medewerker.

portfolio stage - typepad...cre@ctiv – webdesign & (digitale) marketing cre@ctiv portfolio...

Documents