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
Toegepaste Informatica
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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”.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 22
6.3.3. Website Job-Link – Bijlage 3
Inleiding - Situering
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.
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 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.
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 Job-
Link, de beheerder, geen voorgaande kennis heeft van html.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
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 (website koppelen aan social media)
o Slidebar om foto’s te tonen op homepage
o All in ons SEO pack (zoekmachine optimalisatie)
o Google Analytics for Wordpress (statistieken website)
o Fotoalbums per event
Responsive design
Kopiëren van virtuele server naar live server
Uitleg CMS (WordPress)
- Brochure met uitleg over WordPress
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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
Project – Plan van aanpak
Voor verdere uitleg verwijs ik graag door naar de bijlagen (Bijlage 4: Project Mechelen)
voor een overzicht te krijgen van de verschillende ontwerpen.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 25
6.3.5. HTML Website “Break True” – Bijlage 5
Inleiding – Situering
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.
Project – Plan van aanpak
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 26
6.3.6. Website Peter Castles – Bijlage 8
Inleiding - Situering
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.
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 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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 27
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
Peter Castles, 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.
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 (website koppelen aan social media)
o Portfolio
o All in ons SEO pack (zoekmachine optimalisatie)
o Nieuwsbrief
o Fotoalbums voor de verschillende pagina’s
Responsive design
Kopiëren van virtuele server naar live server
Uitleg CMS (WordPress)
- Brochure met uitleg over WordPress
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 28
6.3.7. Website KnipoogICT – Bijlage 9
Inleiding - Situering
De opdracht is het bouwen van een website voor KnipoogICT. 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 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.
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
KnipoogICT, 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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 29
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 stijlen 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 App pagina
Responsive design
Uitleg CMS (WordPress)
- Brochure met uitleg over WordPress
- Eén uur opleiding over WordPress
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 30
6.3.8. Project Eigen Thema – Bijlage 7
Inleiding – Situering
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 31
6.3.9. Website Master Your Mailbox – Bijlage 6
Inleiding - Situering
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.
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 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.
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
Master Your Mailbox, 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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 32
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 stijlen van de modules
o Contactformulier
o Membership
o Access Levels
o Quiz
o Jetpack (statistieken van de bezoekers)
o All in ons SEO pack (zoekmachine optimalisatie)
Responsive design
Uitleg CMS (WordPress)
- Brochure met uitleg over WordPress
- Eén uur opleiding over WordPress
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 33
6.3.10. Website Cre@ctiv – Bijlage 10
Inleiding - Situering
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.
Project – Plan van aanpak
Cre@ctiv zal zelf een design ontwerpen. Bij goedkeuring van dit design, door de
zaakvoerster wordt de volledige website gebouwd.
De website zal opgebouwd worden met het oog op een maximale en klantvriendelijke
beheerbaarheid van de website.
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
Pagina | 34
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 stijlen 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
Responsive design
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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.
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 – 2014
Pagina | 47
Portfolio Stage | Voorstelling Nr. 2 | Academiejaar 2013 - 2014
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
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
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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:
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 56
Tenslotte kan de gebruiker de kleur van het prikbord kiezen:
Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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:
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 61
Tenslotte kan de gebruiker de kleur van het prikbord kiezen:
Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 65
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 67
Bomen op heuvel met onderschrift Parkpop
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 70
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
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 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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
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 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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 79
Code van contactformulier
In onderstaande afbeelding kan u een deel van de code van het contact formulier zien.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 85
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
19/feb/14 10h - 18h Website Cre@ctiv I & A
Ontwerp maken Job-Link A
20/feb/14 10h - 18h Website Cre@ctiv I & A
Afbeeldingen Delabi A
Week 3
24/feb/14 10h - 18h Website Cre@ctiv I & A
Meeting peter castles I & A
Aanpassingen Ontwerp Job-Link A
Eerste ontwerp Peter Castles A
25/feb/14 10h - 18h Website Cre@ctiv I & A
Meeting Kli-BoGra I & A
Eerste ontwerp KLI-BOGRA A
26/feb/14 10h - 18h Website Cre@ctiv I & A
Feedback KLI-BOGRA toepassen A
27/feb/14 10h - 17h Website Cre@ctiv I & A
Logo's DELABI A
Logo KLIBOGRA A
Ontwerp maken website A
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
5/mrt/14 10h-18h Joblink A
6/mrt/14 10h-18h Joblink A
DELABI A
Joblink A
Week 5
17/mrt/14 10h-18h Joblink A
Logo Peter Castles A
18/mrt/14 9h-18h Securelink I & A
Cre@ctiv I & A
19/mrt/14 10h-18h Joblink 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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
29/apr 9h -18h Master Your Mailbox A
Ontwerpen nieuw project A
30/apr 9h -18h Master Your Mailbox A
Facebook App A
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 98
Dag 2 – 11 februari ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 99
Dag 3 – 12 februari ’14 Werkschema
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.
Dag 4 – 13 februari ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 100
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 17 februari ’14 Werkschema
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.
Dag 2 – 18 februari ’14 Werkschema
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.
Dag 3 – 17 februari ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 101
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 102
Dag 4 – 17 februari ’14 Werkschema
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.
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 24 februari ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 103
Dag 2 – 25 februari ’14 Werkschema
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.
Dag 3 – 26 februari ’14 Werkschema
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.
Dag 4 – 27 februari ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 104
begon ik met al wat schetsen te maken. Verder heb ik verder gezocht naar een geschikt logo
voor de klant van woensdag.
Alexander Siccard 10/02 – 13/02/2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 105
Dag 2 – 4 maart ’14 Werkschema
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.
Dag 3 – 5 maart ’14 Werkschema
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.
Dag 4 – 6 maart ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 106
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 17 maart ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 107
Dag 2 – 18 maart ’14 Werkschema
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.
Dag 3 – 19 maart ’14 Werkschema
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.
Dag 4 – 20 maart ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 108
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 24 maart ’14 Werkschema
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.
Dag 2 – 25 maart ’14 Werkschema
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.
Dag 3 – 26 maart ’14 Werkschema
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.
Dag 4 – 27 maart ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 31 maart ’14 Werkschema
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.
Dag 3 – 2 april ’14 Werkschema
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)
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Dag 4 – 3 april ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 111
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 112
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 31 maart ’14 Werkschema
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.
Dag 2 – 1 april ’14 Werkschema
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.
Dag 3 – 2 april ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Dag 4 – 3 april ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 114
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 7 april ’14 Werkschema
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”.
Dag 2 – 8 april ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 115
gaan opvolgen. Ik ben begonnen met de installatie van WordPress en vervolgens de opmaak
van de pagina’s.
Dag 3 – 9 april ’14 Werkschema
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.
Dag 4 – 10 april ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 116
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 22 april ’14 Werkschema
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.
Dag 2 – 23 april ’14 Werkschema
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.
Dag 3 – 24 april ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 28 april ’14 Werkschema
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.
Dag 2 – 29 april ’14 Werkschema
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.
Dag 3 – 30 april ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Alexander Siccard 10/02 – 13/02/2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 120
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 121
Dag 2 – 6 mei ’14 Werkschema
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 3 – 7 mei ’14 Werkschema
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.
Dag 4 – 8 mei ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 122
————————————
————————————
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 123
————————————
Stap 3: Doorverwijzen naar de quiz
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 125
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 5 mei ’14 Werkschema
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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].
Dag 2 – 6 mei ’14 Werkschema
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.
Dag 3 – 7 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 127
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 128
Dag 4 – 8 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 130
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 19 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 131
Dag 2 – 20 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 132
Dag 3 – 21 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 133
Dag 4 – 22 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 134
Alexander Siccard 10/02 – 13/02/2014
Cre@ctiv
Dag 1 – 26 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 135
Dag 2 – 27 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 136
Dag 28 – 21 mei ’14 Werkschema
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 137
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 138
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 139
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Deadline 17 februari 2014
Cre@ctiv
To Do
Volledig nieuwe website
Portfolio
Referenties
Contactformulier
Afspraken Carte blanche
Deadline Gedurende de hele stage periode
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 141
Kli-BoGra
To Do
Design: logo, flyers, website ontwerp
Volledige website
Fotoslider
Afspraken Houden aan de visie van de klant
Deadline 18 februari 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 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 /
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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
Deadline 16 mei 2014
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
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 144
Jologo
To Do Design: website
Uitwerken website
Afspraken Moet volledig responsive zijn
Deadline 15 mei 2014
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
Deadline 27 mei 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 146
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
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.