Hogeschool-Universiteit Brussel · hoek te komen. Wij willen enkel het beste voor u en uw bedrijf....

Hogeschool-Universiteit Brussel

Academiejaar 2013-2014

Toegepaste Informatica

Naam: Ilka Winnen

Klasgroep: 3 TI

Studentennummer: 238948

Vak: Stage

3

Voorwoord

In dit voorwoord wil ik de mensen bedanken die mij geholpen hebben mijn stage en stage verslagen

tot een goed einde te brengen.

In eerste instantie wil ik graag Elien Defraeije bedanken. Zij bood me de kans om stage te lopen in haar

bedrijf. Graag wil ik haar bedanken voor alle uitleg die ze mij kon geven omtrent webdesign en digitale

marketing. Graag zou ik ook Michael Rosmane bedanken voor alle uitleg die hij mij kon geven in

verband met webdesign en WordPress in het algemeen en voor alle tips die hij altijd voor mij had.

Verder wil ik Jolien Roelandt bedanken, die altijd klaar stond om haar menig te geven over visuele

aspecten en om teksten te verbeteren.

Vervolgens zou ik graag Mr. Ophalvens willen bedanken voor het verbeteren van de stageverslagen en

de raad omtrent het stage portfolio.

Hiernaast wil ik ook nog Mr. Rooseleer bedanken omdat die altijd klaar stond om informatie en raad

te geven over het hele stagegebeuren.

Als laatste wil ik nog de school bedanken, die ervoor zorgde dat ik zo’n ervaring kon meemaken. Dit

maakte het mogelijk echte werkervaring op te doen.

Ilka Winnen

Stagiaire Cre@ctiv

juni 2014

5

Inhoudsopgave

Voorwoord .............................................................................................................................................. 3

Inleiding ................................................................................................................................................... 7

Verklarende woordenlijst ........................................................................................................................ 8

1. Achtergrondinformatie stageplaats ................................................................................................ 9

1.1 Opdrachtgever: Cre@ctiv ........................................................................................................ 9

1.2 Project Manager: Elien Defraeije ............................................................................................ 9

2. Hoofdstuk 1: Algemene beschrijving van de stage opdracht ........................................................ 10

2.1 Stage beschrijving .................................................................................................................. 10

2.2 Stageverloop .......................................................................................................................... 10

3. Hoofdstuk 2: Technische uitwerking ............................................................................................. 11

3.1 Werkmethode van Cre@ctiv ................................................................................................. 11

3.1.1 Stap 1: Communicatie met de klant .............................................................................. 11

3.1.2 Stap 2: Offerte opstellen ............................................................................................... 11

3.1.3 Stap 3: Offerte toelichten aan de klant ......................................................................... 11

3.1.4 Stap 4: Takenverdeling .................................................................................................. 11

3.1.5 Stap 5: Opzetten testsite ............................................................................................... 11

3.1.6 Stap 6: Tests uitvoeren .................................................................................................. 11

3.1.7 Stap 7: Feedback van klant ............................................................................................ 12

3.1.8 Stap 8: Eventuele aanpassingen .................................................................................... 12

3.1.9 Stap 9: Gepersonaliseerde handleiding schrijven ......................................................... 12

3.1.10 Stap 10: Toelichting handleiding en website aan de klant ............................................ 12

3.1.11 Stap 11: Website online zetten ..................................................................................... 12

3.1.12 Stap 12: Eventueel after-sales contract afsluiten ......................................................... 12

3.2 Deadlines ............................................................................................................................... 12

3.3 Van analyse tot implementatie ............................................................................................. 13

3.3.1 Website Securelink ........................................................................................................ 13

3.3.2 Website Jologo .............................................................................................................. 14

3.3.3 Website Job-Link ........................................................................................................... 16

3.3.4 HTML Website “Break True” ......................................................................................... 18

3.3.5 Website KnipoogICT ...................................................................................................... 19

3.3.6 Website Peter Castles .................................................................................................... 20

3.3.7 Project Eigen Thema ...................................................................................................... 22

6

3.3.8 Website Cre@ctiv .......................................................................................................... 23

3.3.9 Website Master Your Mailbox ....................................................................................... 24

4. Hoofdstuk 3: Kritische SWOT-analyse stage ................................................................................. 26

4.1 Strengths ............................................................................................................................... 26

4.1.1 Volledige afwerking ....................................................................................................... 26

4.1.2 Gebruiksvriendelijk ........................................................................................................ 26

4.1.3 Bijdrage aan het imago van het bedrijf ......................................................................... 27

4.1.4 Volledige functionaliteiten ............................................................................................ 27

4.2 Weaknesses ........................................................................................................................... 27

4.2.1 Platform afhankelijk ...................................................................................................... 27

4.2.2 Weinig ervaring met het CMS ....................................................................................... 27

4.2.3 Nieuwe programmeertaal PHP ...................................................................................... 27

4.3 Opportunities ........................................................................................................................ 27

4.3.1 Extra opleiding ............................................................................................................... 27

4.4 Threats ................................................................................................................................... 27

4.4.1 Cross browser ................................................................................................................ 27

4.4.2 Concurrentie .................................................................................................................. 28

4.4.3 Meer en mee mensen kunnen zelf een website maken ............................................... 28

4.4.4 Klanten zonder ervaring ................................................................................................ 28

4.4.5 Onverwachte vragen van klanten ................................................................................. 28

5 Hoofdstuk 4: Persoonlijk ontwikkelingsplan ................................................................................. 29

5.1 Persoonlijke evolutie ............................................................................................................. 29

5.1.1 Voor de stage ................................................................................................................. 29

5.1.2 Bij afloop van de stage .................................................................................................. 29

5.2 Focuscompetenties – mijn ervaring ...................................................................................... 30

5.2.1 Vlot functioneren in een professionele omgeving ........................................................ 30

5.2.2 Het bedrijfsbeleid ondersteunen vanuit eigen vakspecialisatie ................................... 30

5.2.3 Relatie stakeholders onderhouden ............................................................................... 30

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

planning. ....................................................................................................................................... 31

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

steeds wisselende omgeving. ........................................................................................................ 31

6 Bronnenoverzicht .......................................................................................................................... 32

7 Bijlagen .......................................................................................................................................... 33

7

Inleiding

Dit portfolio is geschreven naar aanleiding van mijn stage bij Cre@ctiv te Leuven. Naast de dagelijks

werkzaamheden heb ik mij gericht op een aantal focuscompetenties namelijk:

- volt functioneren in een professionele omgeving

- Het bedrijf ondersteunen vanuit eigen vakspecialisatie

- Relatie stakeholders onderhouden

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

planning.

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

steeds wisselende omgeving.

Deze competenties zullen later in het portfolio uitgebreider besproken worden in het onderdeel

“Hoofdstuk 4: Persoonlijk ontwikkelingsplan”.

Cre@ctiv is gespecialiseerd in webdesign en digitale marketing. Omdat vandaag de dag bijna iedereen

deel wil uitmaken van de online wereld heeft Cre@ctiv een belangrijk doel voor ogen, namelijk

‘iedereen de mogelijkheid bieden zijn online plaatje zelf aan te vullen of aan te passen’, is de reden

waarom het bedrijf vooral werkt met WordPress. WordPress is een CRM (Content management

System) dat het de eindgebruiker vergemakkelijkt wijzigingen aan te brengen aan zijn website. Ik ging

dus voornamelijk aan de slag met het werken met WordPress. Zo schreven we bijvoorbeeld onze eigen

plug-ins en maakten we een eigen WordPress thema, ook werd er vaak in WordPress zelf gewerkt.

Deze stage was voor mij een hele goede leerschool, enerzijds omdat ik al langer gepassioneerd ben

door webdesign en anderzijds omdat het iets is dat niet tot het lessenpakket van mijn opleiding

behoorde. Het was dus een mooi extraatje.

8

Verklarende woordenlijst

Woord Betekenis

CMS Content Management Systeem, laat de eindgebruiker toe om op een

eenvoudigere manier wijzigingen aan de website aan te brengen.

Requirement(s) wat een bepaald product of dienst zou moeten doen

Responsive

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.

PHP Staat voor Hypertext Preprocessor en is een scripttaal om dynamische

webpagina’s te creëren.

JS/Javascript Programmeertaal die websites toelaat dynamischer te worden

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.

9

1. Achtergrondinformatie stageplaats

1.1 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)

1.2 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 Creactiv

Figuur 2 Elien Defraeije

10

2. Hoofdstuk 1: Algemene beschrijving van de stage opdracht

2.1 Stage beschrijving

De opdrachtgever heeft enkele tientallen klanten die nood hebben aan een online

communicatieplatform. Dit platform is een belangrijk kanaal om aan consumenten producten of

diensten voor te stellen op een directe en interactieve manier. Cre@ctiv heeft bij verschillende klanten

onderzoek verricht waaruit vastgesteld werd dat er een grote vraag is naar hulpmiddelen voor e-

commerce en online communicatie. De bedoeling is dat de klanten hulpmiddelen aangereikt krijgen

om de informatie over producten en diensten actueel te houden. De ervaring heeft geleerd dat een

klassiek CMS systeem voor de klanten van Cre@ctiv te hoog gegrepen is. Het is nodig dat de tool

gemakkelijk te gebruiken is en dat de klanten van Cre@ctiv zonder veel technische voorkennis in staat

zijn een geïndividualiseerde website voor hun producten en diensten op te bouwen. Het resultaat van

dit project is aan klanten van Cre@ctiv tegen betaling een tool aan te bieden voor het beheren van

online informatie van producten en diensten.

2.2 Stageverloop

De stage verliep anders dan de normale stage procedure. Er moest meegedraaid worden in het bedrijf

in plaats van aan één enkele opdracht te werken. Persoonlijk vond ik dit een zeer leerrijke ervaring.

Hierdoor kon er kennis gemaakt worden met het echte bedrijfsleven.

De stage draaide om webdesign en dit voornamelijk met het content management systeem

WordPress. We kregen allerhande projecten toegewezen, soms complex en soms iets minder complex,

maar ook die horen er bij als je voor een bedrijf werk.

Al op de eerste stagedag werd er een opdracht toegewezen. Deze was voornamelijk bedoeld om met

WordPress te leren werken. Direct hierna kon er aan de slag gegaan worden met de nieuwe website

voor het bedrijf zelf. Ook nadien stonden er altijd nieuwe opdrachten klaar.

Regelmatig moest er ook gecodeerd worden, dit om eigen plug-ins te schrijven. Ook is er gewerkt aan

een eigen thema voor WordPress met de nodige gebruikers functionaliteiten (thema opties), die het

de gebruikers achteraf vergemakkelijk om hun website te personaliseren. Meer hierover is later in het

portfolio terug te vinden.

11

3. Hoofdstuk 2: Technische uitwerking

3.1 Werkmethode van Cre@ctiv

Aangezien er niet aan een bepaald project gewerkt werd, maar aan meerdere, was het van belang dat

er altijd een strikte werkwijze gevolgd werd. Ik heb deze procedure vertaald naar een stappenplan dat

bestaat uit twaalf stappen, om het overzicht te behouden. Hieronder zijn deze stappen terug te vinden.

3.1.1 Stap 1: Communicatie met de klant

=> Contact opnemen me de klant

- Wat wil de klant juist?

- Laat ons toe te bepalen wat er in de offerte moet.

- Geeft ons een duidelijk beeld over wat er juist moet gebeuren. Hiermee kunnen we

onze werkuren bepalen.

3.1.2 Stap 2: Offerte opstellen

- Met het team de uren overlopen over de zaken die we effectief al weten en ook

kunnen inplannen.

- Offerte opstellen

3.1.3 Stap 3: Offerte toelichten aan de klant

- Offerte toelichten aan de klant

- Is de klant tevreden over de offerte?

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

3.1.4 Stap 4: Takenverdeling

- Na eventuele aanpassingen een takenverdeling opstellen

- Taken zullen worden verdeeld onder de developers, grafische ontwerpers en

eventueel marketeers

3.1.5 Stap 5: Opzetten testsite

- Website maken op de test server

3.1.6 Stap 6: Tests uitvoeren

- Tests uitvoeren

- Alle functionaliteiten zullen uitgebreid getest worden door:

o De developers

o De zaakvoerster

12

o De klant

3.1.7 Stap 7: Feedback van klant

- Feedback vragen aan de klant

- Niets is belangrijker dan feedback van de klant, zij beslissen of iets goed is voor hun

of niet

3.1.8 Stap 8: Eventuele aanpassingen

- Eventuele aanpassingen maken

- Wanneer de klant toch nog dingen wil aanpassen of toevoegen aan de website, zal dit

ook voor hun gedaan worden (rekening houdend met budget en offerte). Eventueel

wordt een nieuwe offerte gemaakt voor extra aanpassingen

3.1.9 Stap 9: Gepersonaliseerde handleiding schrijven

- Gepersonaliseerde handleiding maken voor de klant

- Elke website is anders, dus elke klant krijgt zijn persoonlijke handleiding

3.1.10 Stap 10: Toelichting handleiding en website aan de klant

- Handleiding gaan toelichten bij de klant

- De handleiding zelf toelichten

- De werking van de website visueel tonen aan de klant

3.1.11 Stap 11: Website online zetten

- Website online zetten

- Hosting kan bij ons of bij de persoonlijke host van de klant

3.1.12 Stap 12: Eventueel after-sales contract afsluiten

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

uren/maand

3.2 Deadlines

Om de stage zo vlot mogelijk te laten voorlopen, werd er steeds een deadline opgesteld per

website/project dat af moest zijn. Het was niet altijd gemakkelijk om hier rekening mee te houden

aangezien er bijna dagelijks een mailtje of telefoontje kwam van een klant die iets wou wijzigen aan

zijn website of die iets ‘stuk’ had gemaakt aan zijn website. Soms waren deze zaken gemakkelijk en

snel te wijzigen maar soms namen ze ook veel tijd in beslag. Er moest dan rekening gehouden worden

13

met de lopende deadline. Wanneer er twijfel was over wat prioriteit had, kon je steeds terecht bij de

zaakvoerster, zij nam dan beslissingen over wat er prioriteit had.

Tot slot was er ook een opvolging van de school zelf, elke week moest er een verslag ingestuurd worden

met bijhorende timesheet. Hiermee had de stagebegeleider een zicht op wat er nu precies gedaan

werd.

3.3 Van analyse tot implementatie

Om een zicht te gegeven van wat er ongeveer bij elke website gemaakt moest worden, heb ik enkele

procedures uitgeschreven. Let op dit is niet voor elke website gedaan. De overige websites kan u

terugvinden in de bijlagen.

3.3.1 Website Securelink

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. Voor de website online geplaatst kon

worden, moeten de aanpassingen gebeuren zoals hieronder beschreven.

Elke aanpassing wordt afzonderlijk beschreven.

1. Opzetten van een multi installatie op WordPress

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

browsers

3. Plug-in events/trainingen:

- Pagina per event/training

- Inschrijvingsmogelijkheid

- Gegevens worden in WordPress opgeslagen en ze kunnen worden geëxporteerd

(CSV)

- Bevestigingsmail zowel voor Securelink als voor klant

4. Sitemap: plug-in installeren

5. 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

14

6. Custom Post Types – Downloads:

- CSV: e-mail/naam/welke download

- Mail met download

7. Nieuws post aanpassen:

- Klikken op volledige post

- Featured image links van post

8. Security WordPress

- Op maat gemaakt login pagina (speciale URL)

- CAPTCHA op login pagina

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

9. Responsive maken van website

10. Online zetten van website

11. Website analyse

3.3.2 Website Jologo

1. Inleiding - Situering

De opdracht is het bouwen van een website voor Jologo. Deze website zal gebouwd worden door

Cre@ctiv. Hiervoor maken wij gebruik van alle expertise die we in huis 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 uw website toeneemt, dit resulteert in

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

2. 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 u de

volledige website.

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

15

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.

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

3. Ontwerp

- Conceptuitwerking

- Grafisch ontwerp van de website

4. Conversie ontwerp

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

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

5. 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 Fotoalbum

6. Responsive design

7. Uitleg CMS (WordPress)

- Brochure met uitleg over WordPress

- Eén uur opleiding over WordPress

16

3.3.3 Website Job-Link


De opdracht is het bouwen van een website voor Job-Link. Deze website zal gebouwd worden door

Cre@ctiv. Hiervoor maken we gebruik van alle expertise die we in huis hebben.




programmeerwerk, waardoor het aantal mogelijkheden van uw website toenemen, dit resulteert in



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.


van de website. Hierbij wordt rekening gehouden met het feit dat Job-Link, de beheerder, geen





website.

17


3. Ontwerp

- Conceptuitwerking







- Installatie CMS



o Contactformulier

o Social media widget (website koppelen aan social media)

o Slidebar om foto’s te tonen op homepage


o Google Analytics for WordPress (statistieken website)

o Fotoalbums per event


7. Kopiëren van virtuele server naar live server



18

3.3.4 HTML Website “Break True”

1. Inleiding – Situering

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

Deze website zal gebouwd worden door Cre@ctiv. Hiervoor maken we gebruik van

alle expertise die we in huis hebben. Deze website wordt gemaakt in HTML/CSS.


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

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

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

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

goedkeuring is gegeven, leveren wij de volledige website.

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

3. Ontwerp

• Conceptuitwerking

• Grafisch ontwerp van uw website

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

templates

5. Coderen en stijlen 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

6. Responsive webdesign

19

3.3.5 Website KnipoogICT


De opdracht is het bouwen van een website voor KnipoogICT. Deze website zal gebouwd worden door

Cre@ctiv. Hiervoor maken we gebruik van alle expertise die we in huis hebben.







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

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

vragen wij om de feedback van de klant. Pas nadat de finale goedkeuring is gegeven, leveren wij u de

volledige website.

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.


van de website. Hierbij wordt rekening gehouden met het feit dat KnipoogICT, de beheerder, geen





website.


3. Ontwerp

- Conceptuitwerking



20





- Installatie CMS



o Contactformulier



o All in one SEO pack (zoekmachine optimalisatie)


o App pagina





3.3.6 Website Peter Castles


De opdracht is het bouwen van een website voor Peter Castles. Deze website zal gebouwd worden

door Cre@ctiv. Hiervoor maken we gebruik van alle expertise die we in huis hebben.



het bestaand CMS-systeem, Wordpress. Dit systeem wordt geoptimaliseerd met ons maat- en




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:

21

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.


van de website. Hierbij wordt rekening gehouden met het feit dat Peter Castles, de beheerder, geen



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


website.


3. Ontwerp

- Conceptuitwerking






- Opzet CMS (Wordpress)

- Installatie CMS


- Installatie, activatie en stylen van de modules

o Contactformulier

o Social media widget (website koppelen aan social media)

o Portfolio

22


o Nieuwsbrief

o Fotoalbums voor de verschillende pagina’s


7. Kopiëren van virtuele server naar live server



3.3.7 Project Eigen Thema

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 moeten 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 zou responsive moeten zijn. Daarom heb ik gekozen om met Bootstrap te gaan 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 en had dit natuurlijk zijn voordelen voor de komende projecten.

De functionaliteiten die ik heb kunnen verwezenlijken, kan u terug vinden in de bijlage ‘4.6 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, zullen er nooit 2 websites zijn met dezelfde opmaak.

23

3.3.8 Website Cre@ctiv


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

worden voor Creactiv en door ons. Hiervoor maken we gebruik van alle expertise die we in huis

hebben.


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

de volledige website gebouwd.


van de website.




website.

3. Ontwerp

- Conceptuitwerking







- Installatie CMS



o Contactformulier





24


3.3.9 Website Master Your Mailbox

Inleiding - Situering

De opdracht is het bouwen van een website voor Master Your Mailbox. Deze website zal gebouwd

worden door Cre@ctiv. Hiervoor maken we gebruik van alle expertise die we in huis 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



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 u de volledige website.

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.




website.


Ontwerp

- Conceptuitwerking


Conversie ontwerp



25

Ontwikkeling website


- Installatie CMS



o Contactformulier

o Membership

o Access Levels

o Quiz



Responsive design

Uitleg CMS (WordPress)



26

4. Hoofdstuk 3: Kritische SWOT-analyse stage

Positief Negatief

Inte

r

Strengths

Volledige afwerking

Gebruiksvriendelijk

Bijdrage aan het imago vh bedrijf

Volledige functionaliteiten

Weaknesses

Platform afhankelijk

Weinig ervaring met CMS

Nieuwe programmeertaal PHP

Extern

Opportunities

Extra opleiding

Threats

Cross browser

Concurrentie

Meer en meer mensen kunnen zelf

een website maken

Klant zonder ervaring

Onverwachte vraag van andere

klanten

4.1 Strengths

4.1.1 Volledige afwerking

Een sterk punt uit mijn stage is dat ik elk project dat mij opgedragen werd, volledig heb kunnen

afwerken. Ik kon steeds alle requirements implementeren en heb alles gronding kunnen testen. Voor

ons is een project volledig klaar wanneer de klant 100% tevreden is.

4.1.2 Gebruiksvriendelijk

Doordat ik de meeste websites in WordPress heb gemaakt, zijn deze dus ook zeer gebruiksvriendelijk

naar de klanten toe. Verder is de code die ik heb geschreven altijd netjes geschreven met de nodige

commentaar/uitleg. Ook is op voorhand de afspraak gemaakt om eigen code steeds onderaan in de

files te plaatsten zodat iedereen ze makkelijk kan terug vinden.

27

4.1.3 Bijdrage aan het imago van het bedrijf

Aangezien wij de kans hebben gekregen de website van het bedrijf te mogen maken, draag ik bij aan

het imago van het bedrijf. Een website is het uithangbord van een bedrijf, wanneer deze ook nog eens

aantrekkelijk is, zal dit zorgen voor een positief imago.

4.1.4 Volledige functionaliteiten

Het is belangrijk om steeds volledige functionaliteiten af te leveren, klanten nemen nooit genoegen

met half werk.

4.2 Weaknesses

4.2.1 Platform afhankelijk

Doordat we meestal in WordPress werkte zijn er sommige dingen waar je niet buiten kan omdat je in

deze CMS werkt. Dit is zeer minimalistisch maar zeker geen onbelangrijk punt.

4.2.2 Weinig ervaring met het CMS

Bij aanvang van de stage beschikte ik over zeer weinig ervaring in het WordPress platform. Ik moest

dus nog veel bijleren om hier vlot mee aan de slag te gaan, maar de stage heeft zijn doel niet gemist,

ik kan hier nu zeer vlot mee werken.

4.2.3 Nieuwe programmeertaal PHP

Vooral bij het schrijven van het eigen WordPress thema kwam er zo goed als alleen PHP bij kijken. Het

verliep aan het begin dus wat stroef, maar ik heb al bij al toch nog een mooi resultaat neer kunnen

zetten.

4.3 Opportunities

4.3.1 Extra opleiding

Er bestaan opleidingen om te leren werken en programmeren in wordpress. Dit is iets wat het bedrijf

kan aanbieden aan nieuwe werkgevers.

4.4 Threats

4.4.1 Cross browser

Er moet steeds rekening gehouden worden dat de websites in elke browser naar behoren werkt, ook

al is dit een oude niet geüpdatete browser is. We hebben een ervaring gehad met een klant die zei

nadat de website afgeleverd was, dat de website zogezegd niet werkte. Wat bleek nu, de klant werkte

nog een IE 7 en aangezien we ondertussen aan EI 11 zitten zijn we niet zover terug gegaan met testen.

28

4.4.2 Concurrentie

Webdesign is tegenwoordig een zeer competitieve markt, het draait allemaal om kwaliteit/kwantiteit

verhoudingen. Klanten gaan steeds meer willen voor hetzelfde geld. Daarom is het belangrijk de prijzen

van concurrenten te bestuderen.

4.4.3 Meer en mee mensen kunnen zelf een website maken

Dit is iets waar we niet omheen kunnen, maar we kunnen ze wel een stapje voor zijn door onze

creativiteit en professionaliteit. Wanneer een website op de juiste manier gecodeerd is, zal deze beter

herkend worden door Google wat dus een groot voordeel is.

4.4.4 Klanten zonder ervaring

Klanten die geen enkele ervaring hebben met de online wereld kosten soms veel meer tijd en moeite.

4.4.5 Onverwachte vragen van klanten

Regelmatig kregen we te kampen met onverwachte vragen van klanten, om bv aanpassingen te doen

aan hun website. Op zich geen probleem, tenzij de klant erg gehaast is en er bijna een lopende deadline

afloopt.

29

5 Hoofdstuk 4: Persoonlijk ontwikkelingsplan

Om het persoonlijk ontwikkelingsplan in kaart te brengen, zal er gebruik gemaakt worden van de

focuscompetenties die aan het begin van de stage zijn opgegeven. Voor mij waren dit:

- Vlot functioneren in een professionele omgeving

- Het bedrijfsbeleid ondersteunen vanuit eigen vakspecialisatie

- Relatie stakeholders onderhouden

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

planning.

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

steeds wisselende omgeving.

5.1 Persoonlijke evolutie

5.1.1 Voor de stage

Vooraleer mijn stage van start ging, had ik geen enkele ervaring in het bedrijfsleven, althans niet in de

IT wereld. Ook had ik niet echt een zekerheid van waar ben ik nu echt goed in ben en waar ben ik het

liefste mee bezig? Natuurlijk had ik al een voorliefde voor webdesign, anders had ik deze stage nooit

gekozen, maar ik wist niet of ik het nog graag zou doen als ik er elke dag mee bezig moest zijn.

Ik zat dus met heel wat vragen en onduidelijkheden aan het begin van mijn stage. Dit had dus wel als

voordeel dat ik met heel wat dingen rekening kon gaan houden tijdens mijn stage om mijn persoonlijk

ontwikkelingsplan op te stellen. Voor deze POP kan ik ook gebruik maken van mijn vooraf opgegeven

focuscompetenties.

5.1.2 Bij afloop van de stage

Bij afloop van de stage had ik een veel beter zicht op mezelf. Ik ontdekte dat mijn voorliefde voor

webdesign niet minderde als ik er elke dag mee bezig was. Ook kreeg ik een beter zicht op waar ik nu

meer aanleg voor had.

Ook leerde ik dat alles wat je doet, draait om ervaring. Je kan niet zomaar iets leren, je moet er veel

en graag mee bezig zijn om echt goed te worden in iets.

30

5.2 Focuscompetenties – mijn ervaring

5.2.1 Vlot functioneren in een professionele omgeving

Werken in een bedrijf en in teamverband is naar mijn mening nog anders dan tijdens je opleiding een

groepsopdracht maken. Bij de groepsopdrachten merkte ik vaak (altijd) dat het werk terug viel op

enkele personen binnen de groep. Als je in een professionele omgeving werkt neemt iedereen zijn

verantwoordelijkheid, althans dat was op mijn stageplaats toch het geval. Ik heb dan ook steeds mijn

verantwoordelijkheid genomen om mijn werk volledig en voor de deadlines af te werken.

5.2.2 Het bedrijfsbeleid ondersteunen vanuit eigen vakspecialisatie

Aan het begin was het even zoeken naar de functie waar je goed in bent, maar al snel leek front-end

development mij heel goed te liggen. Het enige wat hier anders was, is dat ik binnen een content

management systeem moest werken. Dit is een hele aanpassing in de werkwijze, maar ik leerde snel

bij en kon hierna steeds vlotter en vlotter werken.

5.2.3 Relatie stakeholders onderhouden

Tijdens elk project hechtten wij een grote belangstelling aan de contacten met de klant. Zo werden de

klanten steeds op de hoogte gehouden tijdens het hele proces. Ook werd er regelmatig om feedback

gevraagd.

Het werkte als volgt. In eerste instantie zal er een ontwerp aan de klant worden voorgesteld om tot

een overeenkomst te komen voor de lay-out van de website. Dan zal er een test website opgezet

worden en voorgesteld worden aan de klant. Nu kan de klant dus gaan bepalen of hij al dat niet instemt

om op deze manier verder te werken. Meestal is de 1ste feedback die wij krijgen over de lay-out, ookal

hebben ze die eigenlijk al op voorhand goedgekeurd, maar sommige klanten veranderen toch nog van

mening.).

De volgende stap is dan de nodige functionaliteiten toevoegen aan de website. Ook hier vragen we na

elk onderdeel om feedback. Dit vond ik persoonlijk een heel belangrijke stap. Regelmatig kreeg ik te

kampen met dat het probleem dat we iets verkeerd of anders begrepen hadden dan wat de klant

eigenlijk bedoelde. Het is dus goed dat we stuk per stuk feedback vroegen, anders maak je alles ineens

verkeerd. Maar ook hier hadden deze voordelen soms ook hun nadelen. Soms duurde het wat lang(er)

voor de klant feedback gaf en moest je goed de deadlines in het oog houden.

Deze communicatie met de klanten gebeurde op verschillende manieren, dit kon zowel via een

meeting gaan, telefonisch, via mail en soms zelfs via Skype.

31

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

Teamwork is een van de hoofdzaken geweest tijdens mijn hele stageperiode. Zo had je bijvoorbeeld

de zaakvoerster die de 1ste contactpersoon was met de klant. Zij probeerde het beeld van de klanten

zo goed mogelijk op de designer en developers over te dragen. Dit is een eerste belangrijke

communicatiefase.

Nadat er een design is en de developers weten wat het doel is van de website kon ik aan de slag gaan

met het effectief bouwen van we website. Wanneer ik niet alleen werkte aan een website, moest er

constant gecommuniceerd worden met de andere developers. Wat moet er nog gedaan worden? waar

zijn anderen en ik mee bezig? wat vergt extra aandacht? Dit zijn allemaal vragen die constant in je

hoofd moeten afspelen wanneer je in groep werk.

Een andere belangrijke communicatie is die met de zaakvoerster doorheen het hele proces. Ik moest

haar constant op de hoogde houden van waar ik mee bezig was en wat er al gedaan was.

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

wisselende omgeving.

Wanneer we competentie ‘5.2.1IT-taken kwaliteitsvol uitvoeren zodat het resultaat voldoet aan de

eisen van een steeds wisselende omgeving.’bekijken, denk ik meteen aan de verschillende

besturingssystemen en browsers waar de websites en hun functionaliteiten in moesten functioneren.

Aangezien er veel verschillende systemen bestaan die ook veel gebruikt worden, is het belangrijk dat

alles in elk systeem werkt naar behoren.

Afhankelijk van de opstelling van de factuur zal dit veel of weinig tijd in beslag nemen. Sommige klanten

willen namelijk nog steeds een website die niet responsive is. Anderen willen dan weer een website

die 100% mobiel is.

HTML & CSS krijgen regelmatig nieuwe functionaliteiten. Dit maakt het moeilijk om compatible te

blijven met niet geüpdatete browsers. Indien de klant wenst, kan ook hier aan gewerkt worden en

zullen wij er voor zorgen dat de website naar behoren functioneert in oudere browsers.

32

6 Bronnenoverzicht

ROBBERT, R., Kickstart WordPress, Pearson Benelux, Amsterdam, 2013, 191 pagina’s.

Cre@ctiv. (2013). Waarom Creactiv? Opgehaald van Creactiv Marketing:

http://creactivmarketing.com/waarom-creactiv/

Drupal. (2013). Documentatie. Opgehaald van Drupal: http://drupal.be/content/ontwikkelaars

Femojo. (2013, 06 21). CMS Comparison. Retrieved from Visual: http://visual.ly/cms-comparison

Hallme. (2013, 11 06). WordPress vs Drupal. Retrieved from Visual: http://visual.ly/wordpress-vs-

drupal

Joomla. (2013). About. Retrieved from Joomla: http://www.joomla.org/about-joomla.html

Orangetrail. (2012). Uploads. Opgehaald van Orangetrail: http://www.orangetrail.com/wp-

content/uploads/AP_mobile.jpg

WordPress. (2013). About. Retrieved from WordPress: http://wordpress.org/about/

WordPress. (2013). Installing WordPress. Retrieved from WordPress:

http://codex.wordpress.org/Installing_WordPress

WordPress. (2013). Requirements. Retrieved from WordPress:

http://wordpress.org/about/requirements/

33

7 Bijlagen

34

Inhoudsopgaven 1. Timesheet ...................................................................................................................................... 36

2. Werkschema’s ............................................................................................................................... 40

2.1 BSC ......................................................................................................................................... 40

2.2 Kunstenfestival Damme ........................................................................................................ 40

2.3 Creactiv .................................................................................................................................. 40

2.4 Kli-BoGra ................................................................................................................................ 40

2.5 Securelink .............................................................................................................................. 41

2.6 Joblink .................................................................................................................................... 41

2.7 KnipoogICT ............................................................................................................................. 41

2.8 Improvisio .............................................................................................................................. 41

2.9 Thema Creactiv ...................................................................................................................... 42

2.10 Peter Castles .......................................................................................................................... 42

2.11 Master your mailbox ............................................................................................................. 42

2.12 Jologo ..................................................................................................................................... 43

2.13 Leaders of the feature ........................................................................................................... 43

3. Werkschema .................................................................................................................................. 44

3.1 Stap 1: Communicatie met de klant ...................................................................................... 44

3.2 Stap 2: Offerte opstellen ....................................................................................................... 44

3.3 Stap 3: Offerte toelichten aan de klant ................................................................................. 44

3.4 Stap 4: Takenverdeling .......................................................................................................... 44

3.5 Stap 5: Opzetten testsite ....................................................................................................... 44

3.6 Stap 6: Tests uitvoeren .......................................................................................................... 44

3.7 Stap 7: Feedback van klant .................................................................................................... 44

3.8 Stap 8: Eventuele aanpassingen ............................................................................................ 45

3.9 Stap 9: Gepersonaliseerde handleiding schrijven ................................................................. 45

3.10 Stap 10: Toelichting handleiding en website aan de klant .................................................... 45

3.11 Stap 11: Website online zetten ............................................................................................. 45

3.12 Stap 12: Eventueel after-sales contract afsluiten ................................................................. 45

4. Technische uitwerking projecten .................................................................................................. 46

4.1 Bijlage Securelink ................................................................................................................... 46

4.1.1 Eindresultaat Website ................................................................................................... 46

4.1.2 Shortcode ...................................................................................................................... 46

4.1.3 To Do & Planning Securelink tijdens het project ........................................................... 47

4.2 Bijlage Jologo ......................................................................................................................... 49

35

4.2.1 Ontwerp website ........................................................................................................... 49

4.2.2 Schortcode ..................................................................................................................... 50

4.3 Bijlage Job-Link ...................................................................................................................... 53

4.3.1 Ontwerp website ........................................................................................................... 53

4.3.2 Uiteindelijke website ..................................................................................................... 54

4.3.3 Schortcode ..................................................................................................................... 54

4.4 Bijlagen Break True ................................................................................................................ 58

4.4.1 Ontwerp van de website ............................................................................................... 58

4.4.2 Code van contactformulier ............................................................................................ 59

4.5 Bijlage Master Your Mailbox ................................................................................................. 60

4.5.1 Ontwerp van de website ............................................................................................... 60

4.5.2 Functionaliteiten ........................................................................................................... 60

4.6 Bijlagen eigen thema ............................................................................................................. 61

4.6.1 Theme Options .............................................................................................................. 61

4.6.2 Voorbeelden van code .................................................................................................. 63

4.7 Bijlagen Peter Castles ............................................................................................................ 64

4.8 Bijlagen KnipoogICT ............................................................................................................... 66

4.9 Bijlage Creactiv website......................................................................................................... 66

5. Voorbeeld offerte .......................................................................................................................... 70

6. Weekverslagen .............................................................................................................................. 75

6.1 Week 1 ................................................................................................................................... 75

6.2 Week 2 ................................................................................................................................... 77

6.3 Week 3 ................................................................................................................................... 79

6.4 Week 4 ................................................................................................................................... 81

6.5 Week 5 ................................................................................................................................... 83

6.6 Week 6 ................................................................................................................................... 86

6.7 Week 7 ................................................................................................................................... 87

6.8 Week 8 ................................................................................................................................... 91

6.9 Week 9 ................................................................................................................................... 99

6.10 Week 10 ............................................................................................................................... 104

6.11 Week 11 ............................................................................................................................... 109

6.12 Week 12 ............................................................................................................................... 113

6.13 Week 13 ............................................................................................................................... 115

6.14 Week 14 ............................................................................................................................... 120

6.15 Week 15 ............................................................................................................................... 123

7. Portfoliopresentatie .................................................................................................................... 129

36

1. Timesheet

Dag Tijd Wat

Week 1

Dag 1: 10/02/14 10h30 - 18h Introductie + 1ste opdracht: BSC

Afspraken maken

Competenties bespreken

Opdracht www.bsc.be

Dag 2: 11/02/14 10h - 18h Anne De Graaf: Drupal

Dag 3: 12/02/14 10h - 18h Anne De Graaf: Drupal

Nieuwe website Creactiv

Dag 4: 13/02/14 9h30 - 16h30 Anne De Graaf: Drupal

Week 2

Dag 5: 17/02/14 10h - 18h Anne De graaf

Website Creactiv

Dag 6: 18/02/14 10h - 18h Website Creactiv



Week 3


Meeting peter castles


Meeting Kli-BoGra

Rechten Anne de graaf nakijken



Week 4

Dag 13: 3/03/2014 9h - 18h Logo KLIBOGRA

Securelink

20h-22h KliBogra

37

Dag 14: 4/03/2014 10h-18h Securelink




Kunstenfestival

Week 5


Joblink


Creactiv

Dag 20: 12/03/2014 10h-18h Creactiv

KnipoogICT

Dag 21: 13/03/2014 13h-18h KnipoogICT

Week 6

Dag 22: 17/03/2014 9h-18h knipoogICT

Improvisio

Dag 23: 18/03/2014 9h - 18h Knipoog ICT



Week 7

Dag 26: 24/03/2014 9h - 19h KnipoogICT

Responvive Creactiv

Dag 27: 25/03/2014 9h -18h Responvive Creactiv

Dag 28: 26/03/2014 9h -18h Responvive Creactiv

Dag 29: 27/03/2014 9h - 16h Responvive Improvisio

Week 8

Dag 30: 31/03/2014 9h - 18h Thema maken WordPress




Week 9

Dag 34: 7/04/2014 9h -18h Thema maken Wordpress

38




Week 10

Dag 38: 14/04/2014 9h - 18h Thema maken Wordpress

Joblink

Dag 39: 15/04/2014 9h - 18h Thema maken Wordpress

Peter castles

Dag 40: 16/04/2014 9h - 18h Secure link

Dag 41: 17/04/2014 9h - 18h Secure link

Inflow

Extra tijd

Week 11

Dag 42: 22/04/2014 9h - 18h KnipoogICT

Creactiv

Master Your Mailbox

Dag 43: 23/04/2014 9h - 18h Master Your Mailbox

Open docs

Dag 44: 24/04/2014 9h - 18:30h Master Your Mailbox

Securelink

Week 12

Dag 45: 28/04/2014 9h - 18h Master your mailbox

Securelink



Week 13

Dag 48: 5/05/2014 9h - 17h Improvisio

Master your mailbox

Dag 49: 6/05/2014 9h - 17:30h Upadate Database Delabie

Master your mailbox

Dag 50: 7/05/2014 9h - 17h Upadate Database Delabie

Master your mailbox

39

Creactiv YouTube

Dag 51: 8/05/2014 9h - 18h45 Master your mailbox

Week 14

Dag 52: 12/05/2014 9h - 17h Handleiding master your mailbox

Dag 53: 13/05/2014 9h - 17h Jologo

Dag 54: 14/05/2014 9h - 18h Jologo

Dag 55: 15/05/2014 9h - 17h Leaders of the future

Week 15


Dag 57: 20/05/2014 10h-18h Leaders of the future

Master your mailbox

Numentum


Joblink

Break true

Dag 59: 22/05/2014 9h - 17h Break true

Week 16

Dag 60: 26/05/2014 9h - 17h Joblink

Leaders of the future


Master your mailbox


Stage documenten

40

2. Werkschema’s

2.1 BSC

To Do Fotoalbum aanmaken dat gelinkt zal worden naar verschillenden pagina’s

Afspraken Correcte benamingen

Juiste links gebruiken

Deadline 11 februari 2014

2.2 Kunstenfestival Damme

To Do Lay-out van annedegraaf.be namaken

Fotoalbums

Afspraken Identieke lay-out als annedegraaf.be


2.3 Creactiv

To Do

Volledig nieuwe website

Portfolio

Referenties

Contactformulier

Afspraken Carte blanche

Deadline Gedurende de hele stage periode

2.4 Kli-BoGra

To Do

Design: logo, flyers, website ontwerp

Volledige website

Fotoslider

Afspraken Houden aan de visie van de klant


41

2.5 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

2.6 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

2.7 KnipoogICT

To Do Voorontwerp namaken op testsite

App pagina

Afspraken Houden aan het ontwerp

Feedback vragen

Deadline 24 maart 2014

2.8 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)

42

2.9 Thema Creactiv

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 /

2.10 Peter Castles

To Do Design: logo, website

Website uitbouwen

Afspraken

Rekening houden met zijn huisstijl

Ideeën van de klant zelf uitwerken

Responsive


2.11 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

43

2.12 Jologo

To Do Design: website

Uitwerken website

Afspraken Moet volledig responsive zijn


2.13 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 ei 2014

44

3. Werkschema Aangezien er niet aan een bepaald project gewerkt werd, maar aan meerdere, was het van belang dat

er altijd een strikte werkwijze gevolgd werd. Ik heb deze procedure vertaald naar een stappenplan dat

bestaat uit twaalf stappen, om het overzicht te behouden. Hieronder zijn deze stappen terug te vinden.

3.1 Stap 1: Communicatie met de klant => Contact opnemen me de klant

- Wat wil de klant juist?

- Laat ons toe te bepalen wat er in de offerte moet.

- Geeft ons een duidelijk beeld over wat er juist moet gebeuren. Hiermee kunnen we

onze werkuren bepalen.

3.2 Stap 2: Offerte opstellen - Met het team de uren overlopen over de zaken die we effectief al weten en ook

kunnen inplannen.

- Offerte opstellen

3.3 Stap 3: Offerte toelichten aan de klant - Offerte toelichten aan de klant

- Is de klant tevreden over de offerte?

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

3.4 Stap 4: Takenverdeling - Na eventuele aanpassingen een takenverdeling opstellen

- Taken zullen worden verdeeld onder de developers, grafische ontwerpers en

eventueel marketeers

3.5 Stap 5: Opzetten testsite - Website maken op de test server

3.6 Stap 6: Tests uitvoeren - Tests uitvoeren

- Alle functionaliteiten zullen uitgebreid getest worden door:

o De developers

o De zaakvoerster

o De klant

3.7 Stap 7: Feedback van klant - Feedback vragen aan de klant

45

- Niets is belangrijker dan feedback van de klant, zij beslissen of iets goed is voor hun

of niet

3.8 Stap 8: Eventuele aanpassingen - Eventuele aanpassingen maken

- Wanneer de klant toch nog dingen wil aanpassen of toevoegen aan de website, zal dit

ook voor hun gedaan worden (rekening houdend met budget en offerte). Eventueel

wordt een nieuwe offerte gemaakt voor extra aanpassingen

3.9 Stap 9: Gepersonaliseerde handleiding schrijven - Gepersonaliseerde handleiding maken voor de klant

- Elke website is anders, dus elke klant krijgt zijn persoonlijke handleiding

3.10 Stap 10: Toelichting handleiding en website aan de klant - Handleiding gaan toelichten bij de klant

- De handleiding zelf toelichten

- De werking van de website visueel tonen aan de klant

3.11 Stap 11: Website online zetten - Website online zetten

- Hosting kan bij ons of bij de persoonlijke host van de klant

3.12 Stap 12: Eventueel after-sales contract afsluiten - Met sommige klanten wordt er een after-sales contract afgesloten van x-aantal

uren/maand

46

4. Technische uitwerking projecten

4.1 Bijlage 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.

4.1.1 Eindresultaat Website

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

opmaak van de pagina’s.

4.1.2 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.

47

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

4.1.3 To Do & Planning Securelink tijdens het project

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

voorbeeld van deze communicatie.

49

4.2 Bijlage Jologo

Dit project is door ons opgestart 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.

4.2.1 Ontwerp website

50

4.2.2 Schortcode

Wanneer de gebruiker op het tekstballonnetje klikt, 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:

51

Tenslotte kan de gebruiker de kleur van het prikbord kiezen:

Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:

52

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.

53

4.3 Bijlage Job-Link

Dit project is door ons opgestart 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.

4.3.1 Ontwerp website

54

4.3.2 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 als het oorspronkelijk ontwerp.

4.3.3 Schortcode

Wanneer de gebruiker op het tekstballonnetje klikt, zal hij de mogelijkheid hebben een bericht in de

tekstballon te plaatsen.

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

55

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

op de tekstballon klikt:

Tenslotte kan de gebruiker de kleur van het prikbord kiezen:

Vervolgens zal er een shortcode gegenereerd worden met volgend resultaat:

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.

58

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

4.4.1 Ontwerp van de website

59

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

60

4.5 Bijlage 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 ‘bijlage: 6.12 week 12 en 6.13 week 13’waarin dit

project uitgelegd werd.

4.5.1 Ontwerp van de website

4.5.2 Functionaliteiten

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

website.

61

4.6 Bijlagen 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 de achterliggende code.

4.6.1 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.

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.

62

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.

63

4.6.2 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.

64

4.7 Bijlagen Peter Castles

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

blijven scrollen op één pagina. In deze opdracht heb ik ook aanpassingen in Javascript gedaan om de

verschillende vierkanten te creëren.

66

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.

4.8 Bijlagen 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.

4.9 Bijlage Creactiv website

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.

67

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.

68

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

trots op zijn. Deze kunnen gesorteerd worden op: websites, logo en grafisch ontwerp. Er is de

mogelijkheid om op elk 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.

69

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

verschijnen. Deze zijn gesorteerd op datum. De bezoeker van de website heeft de mogelijkheid om

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

70

5. Voorbeeld offerte

75

6. Weekverslagen

6.1 Week 1

Dag 1

Werkschema

Voormiddag: Kennismaking, afspraken maken, uitleg manier van werken

Namiddag: Afwerken website www.bsc.be

Verloop

Bij aanvang van de stage zijn er verwachtingen en afspraken gemaakt die de samenwerking gedurende

de hele periode dienen te vergemakkelijken. Hieronder kan u de gemaakte afspraken bekijken.

Verwachtingen:

Maandag 10 februari 2014 10:19

Vanuit Creactiv:

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

http://www.bsc.be/

76

Leren werk correct in te schatten en adviezen formuleren

De eerste opdracht:

Na het maken van goede afspraken en de competenties te hebben overlopen gingen we al meteen aan

de slag. De opdracht was vooral bedoeld als inwerking, maar moest toch voldoen aan de noden van de

klant. We moesten op de website www.bsc.be enkele aanpassingen doorvoeren. Het is een bedrijf dat

kranen verkoopt en wou deze allemaal aanbieden op een website. Ook moest er bij elke kraan een

informatie document werden mee gegeven per kraan en per type.

Dag 2

Werkschema:

Voormiddag: afwerken website BCS + Website maken voor Anne De Graaf (Het kunstenfestival)

Namiddag: Website maken voor Anne De Graaf (Het kunstenfestival)

Verloop

Toen we aankwamen ging we meteen verder bij de afronding van de website www.bsc.be dit duurde

slechts enkele minuten, hierna konden we verder werken aan de volgden opdracht die voor mij inhield

een website te maken voor Anne De Graaf. Ze had een gelijkaardige website nodig als de huidige, enkel

had deze een ander doel. Ze wou er namelijk foto’s van het kunstenfestival de tijd hervonden op

kunnen zetten.

Aan het begin van de opdracht was er een miscommunicatie over in welk content management

systeem het nu uiteindelijk gemaakt moest worden. Ik was er aan begonnen in WordPress, maar het

moest eigenlijk in drupal gemaakt worden. Dit was voor mijn stagementor geen enkel probleem omdat

ik toch nog niet over voldoende informatie beschikte om aan de wensen van de klant te kunnen

voldoen. Ze vond het een goede oefening voor het leren werken met WordPress. De volgenden dag

kon ik met beperkte gegevens en rechten aan de slag gaan in Drupal.

Dag 3

Doordat de website gemaakt moest worden in Drupal moest ik op dag 3 van scratch beginnen. Ik kreeg

een login van de huidige website, maar dit waren niet de admin gegevens waardoor vlot werken weer

uitgesloten was. Ik werkte verder zo ver ik kon, maar al snel kreeg problemen met de database. Ik

moest website voorlopig local (via xampp) moest draaien en moest de databank dan integreren wat al

http://www.bsc.be/

http://www.bsc.be/

77

meteen veel problemen oplevereden. Op verschillende manieren werd er geprobeerd de databank zo

goed mogelijk te integreren.

Dag 4

Op de 4de dag beschikte ik eindelijk over de correcte gegevens en vlotte het werk zeer snel. Ik kreeg op

één na alle elementen gemaakt. Aan het einde van de dag informeerde ik mijn werkgever over het

probleem dat niet opgelost geraakte en ze bood meteen hulp aan. Ze verwees me door naar de

geschikte persoon om mijn probleem op te lossen. Maandag zullen we hier aan verder werken.

6.2 Week 2

Dag 1

Op maandag konden we direct verdergaan met het ontwikkelen van de website van het bedrijf zelf.

Hiervoor krijgen we ontwerpen die we dan moesten omzetten in een werkende website. De bedoeling

van dit project was, dat dit gemaakt zou worden wanneer en geen opdrachten van klanten meer zijn.

Het is hier dus vanzelfsprekend dat dit een project van enkele weken zal worden.

Hier kan u een screenshot vinden van het ontwerp. Later in de stage periode zal u de volledig

afgewerkte versie te zien krijgen.

78

Dag 2

Op de 2de dag moest er verder gewerkt worden aan de website van he bedrijf zelf. Ik de loop van de

dag kreeg ik een extra opdracht. Nadat de zaakvoerster terug kwam van een klant moest hun website

aangepast worden, ze wouden een nieuwe voorpagina.

Hier kan u zien dat de achtergrond verandert is, deze was eerst volledig wit i.p.v. te tegels.

Na dat ik aan de wensen van de klant heb kunnen voldoen kon ik verder gaan met extra

functionaliteiten toevoegen aan de website van Creactiv zelf.

Dag 3

Op de 3de dag hebben we een hele dag verder gewerkt aan de website van Creaciv zelf.

Dag 4

Ook op de 4de dag werd er volop gewerkt aan de website van het bedrijf. Tussen door kreeg ik een

extra opdracht. Een klant had zijn website ‘omzeep’ geholpen en deze moest zo snel mogelijk weer op

orde gezet worden. Achteraf stuurde ze een extra opdracht door voor nog meer aanpassingen te doen

aan de site.

79

6.3 Week 3

Dag 1

De eerste dag hield meerdere taken in. Bij aanvang van de dag werd er verder gewerkt aan de website

van het bedrijf zelf, deze krijgt meer en meer vorm.

Rond de middag hadden we een meeting bij een klant, de klant zou langskomen op kantoor om zijn

visie van een nieuwe website aan ons te vertellen. Peter Castles is zijn naam, hij is een artiest (zanger

en kunstenaar). Het is belangrijk goed te luisteren naar de klant zodat je maximaal kan voldoen aan

zijn/haar eisen. Bij Peter was dat wat moeilijker omdat hij van simpelheid en eenvoud houdt maar toch

zijn website wil bezetten met kubussen. We moeten hier dus een goed evenwicht in proberen te

vinden. Als 1ste zal er aan het logo gewerkt worden. Na goedkeuring van het logo zal er een eerste

ontwerp gemaakt worden van de website die dan wee na goedkeuring uitgewerkt zal worden.

Dit was voor mij het aller eerste gesprek met een klant. Ik leerde veel van de vragen die de zaakvoerster

aan de klant stelde en hou deze zeker in het achterhoofd voor later.

Nadat Peter het kantoor had verlaten werd er nog wat nagepraat over de website en het logo van

Peter, nadien konden we verder aan de slag met de website van het bedrijf zelf.

Ik kijk er al naar uit om aan de website van Peter te beginnen.

Dag 2

De 2de dag van de week begon rustig, er werd weer verder gewerkt aan de website van Cre@ctiv zelf.

Rond de middag keer de zaakvoerster telefoon van een potentieel nieuwe klant. Het waren mensen

die een nieuw tuinbedrijf gingen oprichten. Ze kwamen in de vroege middag al langs op kantoor.

Dit gesprek verliep helemaal anders als het gesprek de dag ervoor met Peter. Bij het binnenkomen

merkte je al meteen dat de 2 mannen niet veel of quasi niets kenden van de online wereld. Daardoor

moest de uitleg iets ‘simpeler’ gebeuren. Ze hadden wel al een idee van welke pagina’s en welke tekst

er op de website zouden moeten komen. Deze klant wil 6maart al van start gaan met zijn bedrijf en

had daarom een beetje haast bij het maken van het logo. Ook hier zullen we weer dezelfde werkwijze

toepassen van: goedkeuring logo, goedkeurig ontwerp website en effectief realiseren.

Na dit gesprek konden we verder gaan met de website van Cre@ctiv zelf.

Maar zoals wel vaker gebeurd bij ons komt er plots een tussen opdracht, deze keer was ik de

‘gelukkige’. De zaakvoerster kreeg bericht van een klant dat er zich problemen voordeden op de

website. Het ging hier om de website van het kunsten festival Damme (Anne de Graaf) die ik in week

80

1 en week 2 van mijn stage heb opgezet. Het probleem was dat er geen foto’s meer upgeload konden

worden op de website. Er was een probleem met de bestandsrechten en zo was het dus gelukkig

relatief snel opgelost. Voorlopig zal de website bezichtigd kunnen worden op

anne.creactivmarketing.com. Na het weekend zal deze een andere domeinnaam krijgen namelijk,

kunstenfestivaldamme.be

Dag 3

Op de 3de dag werd er gewoon weer verder gewerkt aan de website van Cre@ctiv zelf en kreeg ik de

opdracht om de website anne.creactivmarketing.com om te zetten naar kunstenfestivaldamme.be.

Omdat ik dit nog nooit eerder gedaan heb besloot ik eerst wat onderzoek te doen zodat er zeker niets

misloopt. Na het weekend zal deze dus omgezet worden.

Dag 4

Op de 4de dag werd er enkel gewerkt aan de website van cre@ctiv zelf.

81

6.4 Week 4

Dag 1

Op de 1ste dag van de week kregen we uitleg over een belangrijk project waar we de komende 2 weken

aan zouden gaan werk. Het gaat hier om Securelink. Ze hadden oorspronkelijk al een website maar

daar was bij de vorige makers van alles misgegaan waardoor ze geen aanpassingen meer konden

maken. Er moesten op de 1ste dag van dit project modules worden gemaakt waardoor ze shortcodes

kunnen gaan gebruiken op hun website.

82

Op de 1ste dag kregen we ook bezoek van de klant ‘Kli-Bogra’ het tuinbedrijf waar we vorig week al aan

begonnen waren, ze kwamen de laatste feedback geven over het logo’s en dergelijk. Deze

aanpassingen werden ook nog gedaan.

’s Avonds na het thuis komen hadden de klanten van klibogra weer enkele aanpassingen gevraagd en

heb ik deze ook nog aangepast.

Dag 2 en 3

Op de 2de en 3de dag werd er vooral gewerkt aan Lay-out van SecureLink

Dag 4

Op donderdag gingen we verder met de website van sercurelink en moest de website van het

kunstenfestival die ik in de 1ste week heb gemaakt online worden gezet. Maar doordat we de verkeerde

gegevens hadden gekregen van hun was dit een beetje verloren tijd.

Dag 5

Omdat er geen les was hebben we deze week ook op vrijdag gewerkt, voor de 1ste keer van thuis uit.

Ik heb de allerlaatste aanpassingen gedaan aan de logo’s van Kli-Bogra in de voormiddag. In de

namiddag beschikte ik inmiddels over de juiste gegevens om de website van het kunstenfestival online

te zetten. Normaal zou dit een snelle klus zijn maar omdat ze een shared host gekocht hadden gaf dit

enorm veel problemen in combinatie met Drupal. Ik heb in .htaccess een aantal aanpassingen moeten

maken en kijken in de error log om zo stap voor stap de problemen op te lossen. De website is nu te

bezichtigen op www.kunstenfestivaldamme.be. Toen dit volledig afgerond was heb ik verder de layout

van Securelink meer op punt gezet.

http://www.kunstenfestivaldamme.be/

83

6.5 Week 5

Dag 1: 10 maart ’14

Op de eerste dag werd de laatste hand gelegd aan de website van securelink. De shortcodes werden

volledig afgewerkt. Hieronder is een voorbeeld te vinden van de code.

84


Op de 2de dag van deze week werkten we in de HUB zelf. Er werd van ons verwacht dat het project van

securelink volledig afgewerkt zou word. Dit was een absolute vereiste dus werd er flink door gewerkt.

Het project geraakte tijdig klaar en is nu verzonden naar de klant om feedback te krijgen voor eventuele

aanpassingen.


Op de 3de dag kreeg ik een volledig nieuw project toegewezen. In de voormiddag zat ik samen met de

stagementor om nog enkele kleine aanpassingen te doen aan de website van creactiv zelf. En later gaf

ze me de nodig uitleg over het nieuwe project. Het nieuw project heet knipoogICT. Ik kreeg de

ontwerpen en moest deze dan gaan maken. Een voorbeeld van het ontwerp:

85


Op de 4de dag moesten we in de voormiddag op school zijn voor de jobbeurs. Dit was zeer interessant

en leerrijk op vlak van solliciteren en ga deze informatie zeker in het achterhoofd houden voor later.

Tegen de middag moesten wij er al weer vandoor omdat we nog genoeg werk hadden op de stage

plaats. Ik werkte verder aan de website van knipoogICT.

86

6.6 Week 6 Dag 1: 17 maart ’14

Aan het begin van deze week moest ik verder werken aan de website van knipoog ICT. Deze is reeds

besproken in het vorige verslag.

Ook had ik een eerste stage evaluatie met de stagementor (Elien Defraije). Het gesprek verliep vlot. Er

werd gesproken over de manier waarop tot nu toe gewerkt hebben en of ik hier tevreden mee was.

Uit het gesprek bleek ook dat ze tevreden waren over het tot nu toe verrichte werk en er werd gepolst

om daar eventueel vakantiewerk te doen en om er effectief te beginnen werken na de stage. Ik ga

zeker nadenken over dit gesprek en alles in beraadt nemen.

In de namiddag moest de website van impovisio online komen, deze hebben wij niet zelf gemaakt

omdat wij al met veel projecten zitten, maar moest gewoon online komen. Toen ik hieraan wou

beginnen zag ik al direct dat er iets mis was. De persoon die de datebase heeft aangemaakt heeft

dezelfde database gebruikt als voor de nieuwe site van creactiv. Dit probleem zal dus eerst verholpen

moeten worden. Achteraf ging ik verder bij het ontwerpen van knipoog ICT.


Dinsdag 18 maart was voor mij een lange dag, ik werkte van 9h tot 18h30. Dit zeker niet zonder reden.

De website van knipoog ICT moest toonbaar zijn voor de klant, wat dus inhoudt dat de grootste

aanpassingen qua lay-out gedaan moesten zijn.

Er moest op bepaalde pagina’s een extra menu bijkomen, dit vergde heel wat tijd. Verder nam de lay-

out van de contact pagina ook een groot deel van de tijd in beslag. Hiernaast werd de lay-out van de

verschillende menu’s ook afgerond.

De footer moest ook sticky gemaakt worden, hier aan zal morgen verder gewerkt worden.


De derde dag van deze week verliep vlot, er moesten nog enkele aanpassingen gebeuren qua lay-out

aan knipoogICT. Ook moest er weer gezorgd worden dat men shortcodes kon werken. De bedoeling

was dat de gebruiker later een post kan zetten/aanmaken op zijn website en hier een bepaalde

categorie aan kan meegeven. Doormiddel van de categorie worden de posts dan gesorteerd op de

juiste pagina. Ook is er een pagina waar alle posts op komen gesorteerd op datum. Dit heb ik volledig

kunnen realiseren en zal morgen enkel nog de lay-out van deze pagina’s moeten maken.

87


Vandaag werd er de laatste hand gelegd aan de shortcodes, er moesten nog bepaalde dingen

afgewerkt worden, bv: wanneer de posts worden weergegeven, al dan niet gesorteerd, mag de titel

van de post niet (naam van post pagina) niet weergegeven worden. Ook moest de volledige post

getoond worden i.p.v. enkel de titel met URL achter.

Toen dit volledig afgerond was, was er nog een beetje tijd om enkele aanpassingen te doen aan de

creactiv website.

6.7 Week 7

Competenties:

Focuscompetenties:

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.


De eerste dag van deze week kregen we voor de eerste keer stagebezoek. Eerst sprak meneer

Ophalvens alleen met onze stagementor. Achteraf moesten we er bij gaan zitten. We moesten nog

eens duidelijk onze focuscompetenties bespreken en moesten enkelen aanpassen maken aan de

toekomstige verslagen.

Achteraf ging ik verder met enkele aanpassingen te maken aan de website van knipoogICT. Hierover

was er feedback gekomen van de klant. De opmerking waren:

- Op de home page is er tekst die onder een button lopen, maar dit was enkel bij mac-

schermen waardoor ik dit niet opgemerkt had.

- Ze was niet tevreden over het 2de menu dat op bepaalde pagina’s weer gegeven werd. Ik had

die letterlijk gemaakt gelijk in het ontwerp, dat ze ook nog eens goedgekeurd had. Achteraf

bekeken had ze hier toch haar twijfels over en vroeg om het aan te passen.

Voor:

88

Na:

Direct hierna begon ik aan het mobiel maken van de Creactiv site. Dit is iets wat ik nog nooit gedaan

had en was dus super leerrijk.

Ik ging te werk met een iPad, Microsoft Surface, iPhone en een Samsung s4 om de tests uit te voeren.

Er moest voor de verschilleden soorten resoluties een aparte css code aangemaakt worden waarop

je bv afbeeldingen of lange blokken tekst weg liet of kleiner maakte.

89

Hieronder kan u een fractie vinden van de css die hiervoor gemaakt werd:

Dag 2 & 3: 25 & 26maart ’14

Op de 2de en 3de dag van de week werd er ook weer de hele dag gewerkt een het mobiel maken van

de website van Creactiv. Deze is dezelfde avond nog online geplaatst. Screenshot zijn in het verslag

van dag 1 te vinden.


Vandaag moest de website van improvisio volledig opnieuw gemaakt worden, hun vorige website

was niet responsive en na veel proberen was het responsive maken ook niet mogelijk en besloten

dus volledig opnieuw te beginnen.

90

Voor :

Na (voorlopig)

91

Zo als u kan zien is er al een responsive menu gemaakt en worden de header en de footer nu ook op

een goede manier geschaald. Volgende week zal hieraan verder gewerkt worden.

6.8 Week 8 Inleiding

Het verslag van deze week zal anders zijn als dat van vorige weken. In dit verslag zal er namelijk in één

grote tekst beschreven zijn wat er deze week gemaakt is in de plaats van per dag. Dit niet geheel zonder

reden, we zijn deze week begonnen aan het opzetten van ons eigen WordPress thema met bootstrap.

Verloop

Bij aanvang van het project hebben we nog wat onderzoek gedaan naar hoe WordPress en bootstrap

nu juist samenwerkte.

Aan de slag

Voor we van start konden gaan moesten we aan aantal zaken doen:

- Database en webserver aan maken

- Hierop WordPress installeren

- Bootstrap downloaden

92

Na de installatie van WordPress gaan we naar wp-content > themes. In deze map gaan we een nieuwe

map aanmaken die ik “wpbootstrap” heb genoemd.

In de map wpbootstrap gaan we nu de eerder gedownloade map bootsprap plakken en maken we een

nieuw document aan genaamd “index.php”.

In index.php gaan we code zetten die de inhoud van ons thema zal bevatten. De code zal er voor zorgen

dat er een statische html pagina aangemaakt zal worden. Er is dus niet met echte teksten, maar met

voorbeeld teksten gewerkt. Hieronder ziet u een stukje van de code.

Nu dat we een statische htlm pagina hebben aangemaakt is er natuurlijk ook css nodig. Op dezelfde

hoogte als index.php gaan we een nieuw document maken “style.css”. Dit is in WordPress een heel

93

belangrijke stap voor het aanmaken van een thema. WordPress zal voor een thema namelijk in de

commentaar van de style.css gaan kijken of de theme name overeen komt met naam in header.php.

De laatste stap die we ondernemen voor dat we over gaan naar het bouwen van het thema zelf een

thema afbeelding meegeven die zal worden weer gegeven in WordPress. Dit doen we door een

afbeelding naar keuzen op gelijke hoogte te zetten van index.php en deze noem je “screenshot.png”

Voorlopig ziet het er dus zo uit:

Nu kunnen we ons nieuw thema gaan activeren in WordPress door naar Appearance > Theme te gaan.

Nu zien we ons thema in de lijst staan en kunnen we het gaan activeren.

94

Na het activeren kunnen we gaan kijken of ons thema tot nu toe werkt. Als we dit gaan doen gaan we

zien dat alles werkt zo als het moet. Er is nog gaan css gemaakt dus qua lay-out is er nog niets

spectaculairs te zien. Alles wat we te zien krijgen is door de code die we gemaakt hebben in index.php.

Bootstrap configureren met WordPress.

Een standaard WordPress thema bevat: index.php, style.css, header.php, footer.php, sidebar.php.

Meerdere files kunnen worden toegevoegd om meerdere functionaliteiten te maken, maar wij

beginnen met een standaard. Later kunnen we nog uitbreiden.

95

Wat we nu gaan doen is alle html die we normaal bovenaan aan elke file zouden zetten gaan copy

pasten in header.php. We doen dit ook voor het onderste deel van de file en zetten we in footer.php.

Nu gaan we gebruik make van de 1ste WordPress tags om de header en de footer te inporteren in

index.php.

- get_header()

- get_footer()

Dit zijn ingebouwde WordPress functies die de header en de footer op de juiste plaats gaan zetten.

Index.php ziet er nu zo uit:

In header.php gaan we volgende lijn toevoegen:

<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">

En in style.css voegen we volgende lijnen toe:

@import url('bootstrap/css/bootstrap.css');

@import url('bootstrap/css/bootstrap-responsive.css');

body {

padding-top: 60px;

96

padding-bottom: 40px;

}

Dit gaan we doen om de juiste css op te halen en om de bootstrap css te linken. Nu gaat ons thema er

al veel beter uit zien qua lay-out.

We gaan nog 1 belangrijke stap uitvoeren om later plugins dymanisch css of javascript te laten

toevoegen aan ons thema. Dit doen we door de wp_head() functie toe te voegen aan header.php

97

Nu gaan we de footer opkuisen door de juiste links toe te voegen. Footer.php ziet er nu zo uit:

Nu gaan we op dezelfde hoogte als inde.php een nieuwe bestand aanmaken genaamd “functions.php”

Aan funtions.php gaan we ons javascript form toevoegen:

WordPress loop

De WordPress loop doet exact wat je verwacht, het doorloopt een pagina of post en zorgt ervoor dat

de titel en de inhoud (enz) worden weer gegeven.

Een basis WordPress loop ziet er zo uit:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

98

Met deze informatie kunnen we onze files weer gaan aanpasse. Onze index.php ziet er nu als volgt uit:

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

<?php get_footer(); ?>

Dit is in een notendop wat er moet gebeuren voor het opzetten van een WordPress thema. Nu kunnen

we verder gaan met het aanmaken van verschillenden functionaliteiten. Een van de vereisten was een

theme option page die er tot nu toe zo uit ziet:

Volgende week zal er verder gewerkt worden aan de functionaliteiten en de lay-out. Dan zal er ook

een uitgebreid verslag met code volgen omdat de code toe nu toe nog niet volledig is.

99

6.9 Week 9

Inleiding

Ook deze week zal het verslag weer één geheel zijn in de plaats van een dag beschrijving. Dit met de

simpele reden omdat de opdrachten heel fel varieerde van elkaar.

Aan de slag

Zo als vorige week beschreven zijn we aan de slag gegaan met het maken van een eigen thema. In dit

verslag zullen alle functies die tot nu toe gemaakt zijn voor het thema beschreven staan.

Algemene instelling

Doormiddel van deze instellingen kan de gebruiker de opmaak van de body, H1, H2, H3 en H4 zelf

bepalen, ook kunnen ze background colors kiezen. Hier onder kan u stukken van de code terug

vinden en het uit eindelijke resultaat.

100

Het resultaat:

101

Footer options

Een ander vereiste was dat de gebruiker de footer indeeling kon kiezen. Ze zouden de keuze krijgen

tussen 1, 2, 3 of 4 kolommen.

Met deze code gaan we footer-sidebars aanmaken in

wordpress:

Dit zijn de aangemaakte footer-sidebars:

102

De code om 4 radio button aan te maken en elk

veld een waarde te geven

Het resultaat

103

Het header logo

Om het de gebruiker makkelijk te maken om een nieuw logo toe te voegen, hebben we ook hiervoor

een functie gemaakt. Zo kan de gebruiker later makkelijk een (nieuw) logo toevoegen aan zijn website.

Code om een logo toe te voegen Het resultaat

Andere opdrachten

Buiten het maken van deze functions heb ik ook nog aan verscheidene andere opdrachten gewerkt

deze week. Zo heb ik bijvoorbeeld een handleiding gemaakt voor de klant om zijn wordpress website

aan te passen. Deze handleiding kan u terug vinden in de bijlagen “handleidingJobLink.pdf”

Verder heb ik ook nog enkele kleine lay-out aanpassingen gedaan aan de website van joblink zelf. Ze

wouden dat hun footer al meteen getoond werd omdat hier de logo’s van de sponsors op staan.

104

6.10 Week 10

Eigen thema

Deze week werden er nog enkele functionaliteiten toegebracht aan het eigen thema waar ik al even

mee bezig was. Volgende functionaliteiten werden deze week nog toegevoegd:

Google Analytics tracking

Dit maakt het de gebruiker mogelijk zijn google analytics code in de background van zijn site te zetten.

Hierdoor zal de website makkelijker gevonden worden door zoekmachines.

In de header.php voegen we het volgende toe:

In functions.php heb ik een veld gemaakt met het id ‘google-analytisc’ waar de gebruiker dan zijn code

kan ingeven.

105

Social Follow

Verder heb ik de social follow nog herzien.

Er is nu voor een 10tal sociaal netwerk platformen een veld voorzien om hun url in mee te geven:

De output zal als volgt zijn. Aan de lay-out moet nog gewerkt worden.

106

Wanneer de gebruiker in bovenstaande velden zijn profiel opgeeft en dit opslaat. Zullen de sociale

media icoontjes zichtbaar worden op de website:

Om dit te laten gebeuren heb ik een klein script geschreven. Er moeten nog enkele wijzigingen

aangebracht worden, het werkt nu nog niet volledig zo als het hoort.

107

Secure-Link

Voor de website van secure-Link moesten nog enkele aanpassingen gedaan worden. Zo wouden ze

bijvoorbeeld bij checkboxes dat de tekst niet zou verder gaan onder het boxje, bij een klein scherm,

maar dat de tekst terug gelijk begon met het 1ste woord.

Dit kon ik verhelpen door de div waar alle checkboxes

inzaten te zetten op display: list-item;

Verder wouden ze ook hun home pagina veranderen, in de plaats van de grote image slider die ze

hadden wouden ze nu 3 kleine afbeeldingen.

Inflow

Bij het omzetten van wordpress van het Engels naar het Nederlands waren er zaken die niet volledig

vertaald werden. De enige verdere oplossing was opzoek te gaan naar de php bestanden waar de tekst

instond en daar zelf de vertaling te doen. Opzich geen moeilijke opdracht maar wel heel tijdrovend

met dat er zoveel bestanden zijn in wordpress.

108

Peter Castels

Voor peter castels moest er een hele nieuwe font toegevoegd worden aan wordpress.

Dit doe je door de font bestanden in de map ‘fonts’ de plakken en de nieuwe font kenbaar te maken

in de css, ik heb er wel voor moeten zorgen dat de fonts voor elke browser compatible zijn.

De css die ik daarvoor maakte:

Online kun je deze bestanden laten genereren voor elke browser via volgende link:

http://convertfonts.com/

Extra tijd

Een gloednieuw project, hierover kregen we woensdag uitleg. De klant wil dus een website waar

gebruikers kunnen leren werken met hun mailbox. Ze moeten zich kunnen aanmelden wanneer ze een

abonnement hebben gekocht, wanneer dit niet het geval is hebben ze hiertoe de mogelijkheid. Bij de

1ste aanmelding moet de gebruiker een test doen om zijn niveau te bepalen. Aan de hand van dit

niveau krijgt de gebruiker bepaalde content te zien. Elke week krijgt de gebruiker een nieuwe video

om bij te leren.

Op donderdag voormiddag moesten we 2 plugins grondig uittesten die we gaan gebruiken op de

website, zodat we volgende week vlot kunnen beginnen werken.

109

6.11 Week 11

Dag 1: 22 april ’14

De eerste dag van de week kreeg ik aan het begin van de dag 3 opdrachten, in de loop van de dag

kwamen er kleinen werkjes bij.

Als eerst moest ik nog enkele aanpassingen doen aan de website van knipoogict. We hadden na lang

wachten eindelijk weer feedback gekregen van de klant waar door er nog enkele aanpassingen konden

worden gedaan. Zo hadden ze nieuwe afbeeldingen gevonden en wouden ze dat ik al enkele posts

plaatste, hier en daar wouden ze ook al nieuwe content plaatsen. De afbeeldingen moesten nog

bewerkt worden in photoshop.

De 2de opdracht van vandaag hield in, alle blogs die geïmporteerd waren van de oude naar de nieuwe

creactiv website, daarvan werden de afbeeldingen niet goed weer gegeven. Ik moest dus blog per blog

de afbeelding weer in de blog gaan zetten.

110

Als deze opdrachten voltooid waren moest ik verder werken aan het nieuwe project waar we eind

vorige week uitleg over kregen, namelijk master your mailbox. Ik moest een aantal plug-ins testen op

compatibiliteit en efficiëntie. Ook moest de lay-out al grof gemaakt zijn.

Er werd vooral nog aan de lay-out gewerkt, morgen zal er verder gewerkt worden aan het testen van

plug-ins.


Vandaag werd er veel tijd besteed aan het testen van de plug-ins.

111

Wanneer een gebruiker niet aangemeld is, kan hij de inhoud van de website niet zien:

Toen heb ik rond de middag plots de werken voor master your mailbox moeten stilleggen. Ik kreeg een

mail dat er wat ‘raars’ aan de hand was met een website van een klant en moest hier onmiddellijk mee

aan de slag.

Het probleem was namelijk dat de beschrijving die google gaf bij de website, spam is. Ik moest een lijst

van oorzaken opzoeken. Ik kwam er dus achter dat de website mogelijk gehackt zou zijn. Een populaire

hack bij wordpress site was vroeger de Pharma hack. Wat er nu aan de hand is met de website van

onze klant is hier een variant op.

112

Doordat de website niet bij ons gehost is, is het moeilijk om de echte oorzaak hiervan te achterhalen

aangezien ik niet in de bestanden kon kijken, en ging dus opzoek naar enkele mogelijkheden.

Ik kwam er achter dat er ofwel een security leak is bij de ftp waar de website gehost is. Hieruit leerde

ik ook dat godaddy ondanks zijn voordelige prijzen met een zwaar security lek zit. Ik ging dus meteen

kijken waar onze klant hoste en dat was gelukkig niet godaddy waardoor we dit al konden uitsluiten.

Evenals er een lek zou kunnen zijn bij de ftp kan er ook een lek zijn bij de database. Verder waren de

mogelijkheden nog het .htaccess bestand, de meta tags hoewel die te vanzelfsprekend lijken.

We hebben alle informatie door gegeven aan de klant en ze gaan nu moeten beslissen wie ze gaan

laten zoeken achter het probleem, ons of het hosting bedrijf.

Later in de middag kreeg in te horen dat de tag’s in van de website van creactiv niet goed werden weer

gegeven in de tab’s van de browser. Dit heb ik aangepast in het header.php document. Hierin was een

titel geplaats door een plug-in waardoor de titel in de tab’s overal het zelfde bleef. Het weghalen van

die lijn heeft het probleem opgelost.

113


Op donderdag ging ik verder met het werken aan de website van master your mailbox. Ik zorgde er

voor dat gebruikers bepaalde content kunnen zien na het aanmelden.

Je kan dus duidelijk zien dat de gebruiker na het aanmelden meer menu tabs te zien krijgt met bepaalde

content.

Rond de middag kreeg ik een spoed opdracht. Er moesten binnen een bepaalde tijd enkele wijzigingen

gedaan worden aan de website van Secrelink. Het waren allemaal kleinen dingen zoals wat meer

margin zetten op de checkboxes, lat-out verfijnen, sidebars toevoegen,..

6.12 Week 12 Dag 1: 28 april ’14

Vandaag werd er vooral gewerkt aan de website van master your mailbox. Ik had alles klaar gezet om

morgen een test uit te voeren. De bedoeling was het volgende, gebruikers kunnen zich registreren

voor 7 of 13 maanden en er zal elke week nieuwe content tevoorschijn komen, vooraleer ze content

krijgen moeten de gebruikers een quiz doen om hun niveau te bepalen. Aan de hand van dit niveau

krijgen ze bepaalde content te zien. We zetten een test op met een subscription van 1 dag en van 2

dagen en stelde in dat bij de subsription van de 2 dagen er de 2de dag content vrij komt.

In de late namiddag heb ik nog een opdracht uitgevoerd voor securelink. In IE9 werden er bepaalde

tabs in full width onder elkaar weer gegeven, terwijl ze mooi langs elkaar horen te staan. Dit hebben

114

we voorlopig opgelost door de code in het php bestand te forceren, en gaan later opzoek naar een

betere oplossing.


Vandaag konden we dus testen of de subsription van de ingeschreven members af liep. Jammer

genoeg bleef de subscription lopen en gaan nu opzoek naar een oplossing. Ik stelde een nieuwe test

op die we morgen en overmorgen terug gaan kunnen testen.

Er werd een nieuwe grondige test opgesteld.


Ook vandaag konden we weer testen of de subscriptions nu weldegelijk werkte. Er kwam al verbetering

in, maar het is nog steeds niet optimaal. Rond de middag kwam er een mail van de klant om te zeggen

dat er al enkele zaken anders mochten. Zo moest de quiz die gebruikers aan het begin maken enkel

dienen om hun idee te geven op welk niveau ze zaten en dus niet, zoals wij het dachten, dat de quiz

het niveau bepaalde maar dat ze dan ook effectief de content van alle niveau’s kunnen zien ipv enkel

voor hun niveau. Dit maakt het voor ons wel een stuk makkelijker, nu moet er namelijk geen trigger

worden geschreven die de gebruikers aan de quiz koppelt en het resultaat dan weer doorkoppend naar

de vrijgegeven content. Dit zorgde er wel voor dat ik alle subscription plans weer moest aanpassen.

115

Op bovenstaande foto kan je zien dat er content van week 1 en week 2 is vrijgegeven. Dit is een goed

teken, enkel word de content pas naar 2 dagen ipv 1 dag weer gegeven.

Ook zou er een CSV importer moeten worden geschreven zodat de klant een csv bestand met

meerdere gebruiker kan importeren, zodat het niet allemaal manueel moet gebeuren. Ik ging hier

reeds mee van slag maar er moet nog heel wat gebeuren.

6.13 Week 13 Dag 1: 5 mei ’14

Op de eerste dag van deze week moest er oorspronkelijk verder gewerkt worden aan de website van

masteryourmailbox, maar er kwam een opdracht voor een klant in de plaats die toch heel wat tijd in

beslag genomen heeft. De menukaarten op de website van een restaurant moesten geüpdatet

worden, dit wil dus zeggen dat elk gerecht apart moet in gegeven worden, samen met de prijs en een

omschrijving. Aan het begin maak je een categorie aan waar je dan weer een gerecht kan aan

meegeven.

116

Als je alle gerecht hebt aangemaakt en een bepaalde categorie hebt toegewezen, kan je doormiddel

van een shortcode de menukaart weergeven op de website.

De manier van werken met de shortcodes word binnen Creactiv vaker gebruik en word steeds zelf door

ons geschreven.

117

Voor de korte tijd die vandaag nog resten werkte ik verder aan de website van masteryourmail box. Ik

maakte een login waar gebruikers zich op kunnen aanmelden nadat ze een abonnement hebben

gekocht

Dag 2: 6 mei ’14

118

Vandaag moest er ingesprongen worden in de afdeling markering. Zei waren bezig met het updaten

van een databank. We kregen een databank van meer dan 2000 bedrijven die we dan stuk voor stuk

moesten gaan opzoeken en de informatie al dan niet bijwerken. Het ging hier voornamelijk over

contact gegevens en adres. Meestal waren het email adressen of telefoonnummers die gewijzigd of

toegevoegd moesten worden. Ook bij faillissement moest dat aan gegeven worden.

Nadien werkte ik nog verder aan de website van masteryourmailbox. Ik ruimde de backend een beetje

op, wat dus inhoudt de niet gebruikte plug-ins verwijderen en alles test levels van gebruikers

verwijderen, zo ontstaat er terug een beter overzicht.

Dag 3: 7 mei ‘14

Ook vandaag moesten we weer inspringen in de dienst marketing voor het updaten van de database.

De procedure was het zelfde als gisteren dus alle bedrijven moesten opgezocht worden om de

gegevens na te gaan.

Nadien moest ik het youtube account van Cre@ctiv koppelen aan hun website, zodat bezoekers hierop

terecht kunnen.

Achteraf ging ik verder met de website van master your mailbox. Ik maakte de mails die de gebruikers

ontvangen wanneer er voor hen een account word aangemaakt.

119

Ook maakte ik een login scherm voor de gebruikers waar ze op terecht komen via de link die ze

ontvangen in de mail met hun gebruikersnaam en wachtwoord om hun account en inschrijving te

bevestigen. Hier voegde ik aan toe dat gewone gebruikers dus niet de admin geen toegang meer kreeg

tot het dashboard van WordPress, de administrators krijgen hier wel nog toegang tot.

Dag 4: 8 mei ’14

Vandaag werd er de hele dag gewerkt aan de website van master your mailbox, vandaag was tevens

de deadline.

Wat in orde werd gemaakt:

- De administrator kan gebruikers toevoegen, manueel of via en CSV bestand. In deze stap

gaat de administrator ook een subscriptie plan toekennen aan de gebruikers, in dit geval 7 of

13 maanden.

- De gebruiker krijgt een mail met daarin hun username en password en een link om hun

inschrijving te bevestigen.

- De gebruiker klikt op de link en gaat naar de login pagina, na het inloggen, moet de gebruiker

zijn subscriptie plan bevestigen.

- Na het bevestigen worden ze doorgestuurd naar de een quiz om hun niveau te bepalen.

- Na de quiz krijgt de gebruiker elke week nieuwe content ter beschikking.

- Bij het aflopen van de subscriptie kan de gebruiker kiezen om al dan niet zijn subscriptie te

verlengen.

120

6.14 Week 14 Dag 1: 12 mei ’14

Op de eerste dag van deze week ben ik de hele dag bezig geweest aan het schrijven van 2 handleidingen

voor de eigenaar van master you mail box. Hij wou een handleiding voor het aanmaken van een nieuwe

week en het maken en bewerken van een quiz.

Deze handleidingen kan u terug vinden als extra bijlage ‘week toevoegen’ en ‘quiz maken’.

Dag 2: 13 mei ‘14

Vandaag kon ik beginnen aan een nieuwe website, het is een persoonlijk project, wat inhoudt dat ik

alleen aan deze website zal werken. Het is een website voor een logopediste, genaamd ‘Jologo’. Ik kon

vandaag al een groot deel van het ontwerp afronden.

Als eerste zal ik het ontwerp tonen en het behaalde resultaat vandaag.

Ontwerp

121

Vordering na de 1ste dag.

Dag 3: 14 mei ’14

Vandaag werkte ik de volledige lay-out af voor de website van Jologo. Ik rechts bovenaan kan u een

groene bol zien, deze is daar geplaatst doormiddel van een shotcode. De tekst in de bol kan door de

klant zelf heel simpel aangepast worden. In de backend van wordpress waar de gebruiker zijn pagina

kan personaliseren is aan de tekst editor een optie toegevoegd om deze tekst in te vullen, ook kunnen

ze er voor kiezen om een link achter de bol de plaatsen en om de kleur van de bol te kiezen, ze hebben

de keuze uit groen en blauw.

122

Ook heb ik vandaag de footer van de website in orde gezet. De website is volledig responsive.

123

Dag 4: 15 mei ’14

Vandaag begon ik aan een nieuw project ‘Leaders of the future’, het is een organisatie die jongeren

begeleid in het maken van de juiste keuzes in de toekomst, voornamelijk over studies.

Het is een ander soort website als dat ik gewoon ben om te maken. De home page is een pagina zonder

menu (het menu zijn de blaadjes met tekst op die u op het ontwerp kan zien). Op alle andere pagina’s

moet de header en de footer wel te zien zijn, ik moest deze dus enkel voor de home gaan disabelen.

Ook moet er gewerkt worden in 2 verschillende stijlen, ze willen iets jong en fris voor de leerlingen en

iets stijlvoller voor de volwassenen en leerkrachten.

6.15 Week 15 Dag 1: 19 mei ’14

Op de eerste dag van deze week verliep het werk wat stroef. Het was de 1ste dag in het nieuwe kantoor

en het internet was nog niet aangesloten. Waardoor we op een openbaar netwerk moeten werken.

Hierdoor moest je constant heel lang wachten voor er pagina’s geladen werden.

Ik werkte verder aan de website van leaders of the future en maakte een ontwerp voor aan de deur

van het nieuwe kantoor.

Dag 2: 20 mei ’14

Op de 2de dag was er al weer ons eigen internet waardoor we vandaag wel weer vlot aan het werk

konden. Ik maakte de home page van leaders of the future af en begon na te denken over een

eventuele lay-out. Er moet op deze website gewerkt worden met 2 verschillenden lay-outs, één voor

de leerlingen en één voor de volwassenen.

124

Hierna zette ik de handleidingen van master your mailbox, die ik vorige week maakte, om in Indesign.

Dit is zeer tijdrovend.

Toen dit allemaal klaar was, kregen we net mail van een klant (Numentum), ze had opgemerkt dat

wanneer je één van haar blogs wou delen via Facebook er de melding kwam: ‘Page Not Found’. Ik keek

alle instellingen na, maar er was niets te vinden. Na enkele minuten bedacht ik dat het wel eens

gewoon de permalink kon zijn die verkeerd werd mee gegeven. Zoals ik al vermoedde, had iemand ‘-

of-‘ uit de permalink gehaald wat de oorzaak van het probleem was.

125

Dag 3: 21 mei ’14

Vandaag starte ik met een klein deel toe te voegen aan de handleiding voor leaders of the feature.

Deze keer was het een handleiding voor de gebruikers van de website. Er stond stap voor stap het

proces dat ze moeten volgde in beschreven.

Achteraf moest ik voor Joblink nog enkele aanpassingen doen aan hun tevredenheidsmeting. Er

moesten enkele vragen aangepast worden.

Achteraf was er nog een beetje tijd over om al te beginnen aan een nieuw project(break true) waar ik

morgen aan ga beginnen. Het is een website die puur uit html/css/php gemaakt zal worden, dus niet

met wordpress zoals gewoonlijk. Ik verzamelde al alle afbeeldingen en kleuren codes en zette al

bootstrap op de server.

Dag 4: 22 mei ’14

Vandaag werd er de hele dag gewerkt aan de website van break true. Alles verliep vlot. Ik schreef in

php iets om inschrijvingen te doen op de nieuwsbrief zodat de mensen van Break True een mailtje

krijgen wanneer mensen zich inschrijven. Deze code gebruikt Alexander achteraf voor het contact

formulier.

129

7. Portfoliopresentatie

6/18/2014

1

CRE@CTIVWebdesign & (Digital) Marketing

Portfolio Stage

www.creactivmarketing.com

Student and Entrepreneur

Web and Application Development

Naam : Alexander Siccard

Richting : Software

Student and youth movement

Web development

Naam : Ilka Winnen

Richting : Netwerken

Naamsesteenweg 290/410| 3000 Heverlee

Tel : +32 472 33 64 98 | Email : [email protected]

www.creactivemarketing.com

Adres :Industrieweg 3 | 3000 Heverlee

Contactpersoon :Elien Defraeije

TEL :+32 472 33 64 98

Email :[email protected]

Website :www.creactivemarketing.com

www.creactivemarketing.com Industrieweg 3 | 3000 Heverlee


6/18/2014

2



Mee draaien in het bedrijf:

• Technische Uitwerking• WordPress• Front-end

• Layout• Back-end

• Functionaliteiten• Eigen thema• Shortcode

• Grafische Ontwerpen• Website• Flyers/Folders• Logo’s• Reclame



• SecureLink• Master Your Mailbox• Peter Castles• Cre@ctiv• Eigen Thema• Shortcodes



SecureLink• IE 9• Post Types



Master Your Mailbox• Membership• Access Levels• Quiz



Cre@ctiv Website• Mobiel• Portfolio• Blog



Peter Castles• Javascript• One Pager

6/18/2014

3



Shortcodes• Job-Link• Jologo



Eigen Thema• Theme Options

• Background• Logo• Footer• General• Social Media



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.



Vlot functioneren in een professionele (internationale) omgeving

Alexander en Ilka

• Communicatie• Werken in team• Verantwoordelijkheid



Bedrijfsbeleid ondersteunen vanuit de eigen vakspecialisatie

Alexander en Ilka

• Nieuwe ervaring• Leerrijk• Gemakkelijk voor de

eindgebruiker

6/18/2014

4



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

Alexander

• Rekening houden me deadlines

• Soepele planning• Problemen zelfstandig of

in team oplossen

Ilka

• Contact met collega’s• Teamwork• Planning



Relatie stakeholders onderhouden

Alexander

• Contact met de klant• Feedback• Controle e-mailverkeer

Ilka

• Contact met de klant• Telefonisch• Mail• Skype• Meeting



IT-taken kwaliteitsvol uitvoeren zodat het resultaat voldoet aan de eisen van een steeds wisselende omgeving.

Alexander en Ilka

• Wisselende omgeving• Responsiveness• Vernieuwende

functionaliteiten



Alexander

• Communicatie• CMS• Teamwork en

zelfstandigheid• Verantwoordelijkheid

Ilka

• CMS• Omgang met klanten• Teamwork• Verantwoordelijkheid

Hogeschool-Universiteit Brussel · hoek te komen. Wij willen enkel het beste voor u en uw bedrijf....

Documents

Transcript of Hogeschool-Universiteit Brussel · hoek te komen. Wij willen enkel het beste voor u en uw bedrijf....