169
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014 Cre@ctiv Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001 HEVERLEE TEL: 0472 33 64 98 M: [email protected] Voorstelling Nr. 1 Academiejaar 2013 - 2014 Ilka Winnen Cre@ctiv Webdesign & (Digitale) Marketing

Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 1

Cre@ctiv – Webdesign & (Digitale) Marketing

Cre@ctiv

Bachelorproef

Toegepaste Informatica

In opdracht voor:

Elien Defraeije

Naamsestraat 290/401 3001 HEVERLEE TEL: 0472 33 64 98

M: [email protected]

Voorstelling Nr. 1

Academiejaar 2013 - 2014

Ilka Winnen

Cre@ctiv – Webdesign & (Digitale) Marketing

Page 2: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 2

Page 3: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Pagina | 3

Hogeschool-Universiteit Brussel

Academiejaar 2013-2014

Toegepaste Informatica

Naam: Ilka Winnen

Richting: 3 TI Netwerken en Systeembeheer

Vak: Bachelorproef

Cre@ctiv

Page 4: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 4

Page 5: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 5

PERMISSIE

Ondergetekende verklaart dat de inhoud van deze bachelorproef mag geraadpleegd en/of

gereproduceerd worden, mits bronvermelding.

Ilka Winnen

Page 6: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 6

Page 7: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 7

Dankwoord

Met dit dankwoord wil ik me richten naar de mensen die hebben geholpen met de

totstandkoming van de bachelorproef. Graag wil ik van deze gelegenheid gebruik maken om

hen te bedanken voor hun inzet en het vertrouwen.

Onze coach, Steven Ophalvens, voor de aanwijzingen en verbeteringen die ons in staat

hebben gesteld het werk verder te verbeteren.

Yvan Rooseleer, opleidingshoofd Toegepaste Informatica aan de Hogeschool-Universiteit

Brussel, die ons geholpen heeft met het oplossen van verschillende problemen.

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

tijdens de ontwikkeling van het project.

Mijn collega, Alexander Siccard, voor de vlotte en aangename samenwerking gedurende het

project.

Page 8: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 8

Page 9: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 9

Voorwoord

Het schrijven van deze proef is een hoogtepunt en een belangrijk sluitstuk van mijn driejarige

opleiding. Het is een zeer leerrijke ervaring geweest om zelfstandig en in groep te werken.

Wij, Ilka Winnen en Alexander Siccard kozen er voor om een project af te leggen bij een

bedrijf gespecialiseerd in webdesign en (digitale) marketing. Dit was voor ons beide een

bewuste keuze omdat de interesse in webdesign bij ons beide sterk aanwezig is. Na de

examens van juni 2013 zijn we opzoek gegaan naar een interessant IT-Project dat aansloot

aan onze interesses. Zoals het gezegde luidt, “wie zoekt die vindt”. Wij kwamen terecht bij

een jong bedrijf gespecialiseerd in webdesign en (digitale) marketing.

Bij het schrijven van deze proef zijn wij ons gaan verdiepen in het eigenhandig opstellen van

een platform dat consumenten in staat stelt een product of een dienst aan te bieden op een

directe en interactieve manier. Met trots kunnen wij u een oplossing aanreiken die klanten zal

helpen om hun informatie over producten en diensten actueel te kunnen houden.

Deze bachelorproef heeft als doel enkele belemmeringen van een commercieel bedrijf op te

lossen. Deze zullen voorzien worden van voorstellen, advies en opleidingen naar

consumenten toe.

Page 10: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 10

Page 11: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 11

Inhoudsopgave

Dankwoord ............................................................................................................................ 7

Voorwoord ............................................................................................................................. 9

1. Inleiding ........................................................................................................................17

2. Bedrijfscontext ..............................................................................................................18

2.1 Opdrachtgever: Cre@ctiv ...........................................................................................18

2.2 Project Manager: Elien Defraeije ................................................................................18

3. Probleemstelling ...........................................................................................................19

4. Mogelijke oplossingen ..................................................................................................20

4.1 Mogelijke scenario’s ...................................................................................................20

4.2 Blueprint en Wireframes .............................................................................................21

4.3 Opleiding van de eindgebruiker ..................................................................................21

4.4 Mockups .....................................................................................................................22

4.4.1 Stap 1: Template selecteren ................................................................................22

4.4.2 Stap 2: Lay-out aanpassen ..................................................................................23

4.4.3 Stap 3: Banners en afbeeldingen toevoegen........................................................24

4.4.4 Stap 4: Inhoud toevoegen ....................................................................................25

4.4.5 Stap 5: Structuur opslaan.....................................................................................26

4.4.6 Stap 6: Instellingen ..............................................................................................27

4.5 Drag-and-Drop ............................................................................................................27

4.6 Web Standards ...........................................................................................................28

5. Content Management System ......................................................................................29

5.1 Wat is Content Management System? ........................................................................29

5.2 Vergelijking diverse Content Management Systems ...................................................29

5.3 Conclusie ....................................................................................................................30

6. WordPress ....................................................................................................................31

6.1 Installeren of online gebruiken? ..................................................................................31

Page 12: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 12

6.2 Installatie WordPress ..................................................................................................31

6.2.1 Stap 1: Downloaden .............................................................................................32

6.2.2 Stap 2: Database aanmaken ................................................................................32

6.2.3 Stap 3: Database gegevens invullen ....................................................................32

6.2.4 Stap 4: Opslaan ...................................................................................................32

6.2.5 Stap 5: Uitvoeren .................................................................................................32

6.3 WorpPress template en plug-in maken .......................................................................32

7. Collaboration platform ...................................................................................................33

7.1 Wat is een collaboration platform? ..............................................................................33

7.2 Vergelijking diverse Collaborating Platforms ...............................................................33

7.3 Uitgebreid onderzoek gekozen platformen ..................................................................33

7.3.1 SharePoint ...........................................................................................................33

7.3.2 Yammer ...............................................................................................................34

7.4 Conclusie ....................................................................................................................34

8. Webhosting en file-sharing ...........................................................................................35

8.1 Wat is webhosting en file-sharing? .............................................................................35

8.2 Vergelijking webhosting en file-sharing tools...............................................................35

8.3 Conclusie ....................................................................................................................35

9. Yammer ........................................................................................................................36

9.1 Installatie ....................................................................................................................36

9.2 Vooruitgang in samenwerking .....................................................................................37

9.2.1 Toegankelijkheid ..................................................................................................37

9.2.2 Beheer .................................................................................................................38

9.2.3 Post .....................................................................................................................38

9.2.4 Communicatie ......................................................................................................39

9.2.5 Documenten ........................................................................................................39

9.2. 6 Notes ..................................................................................................................40

Page 13: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 13

9.3 Mobile toegankelijkheid ..............................................................................................40

10. Samenwerking ..........................................................................................................41

10.1 Onderlinge samenwerking ........................................................................................41

10.1.1 Samen werken op de campus versus Online samenwerken ..............................41

10.2 Samenwerking met de opdrachtgever.......................................................................41

11. Algemeen besluit ......................................................................................................43

12. Referenties ...............................................................................................................44

Bachelorproef Bijlagen ......................................................................................................45

1. Aanloop naar Project & Stage .......................................................................................47

1.1 Aanloop ......................................................................................................................49

1.2 E-mails .......................................................................................................................49

2. Curriculum Vitae ...........................................................................................................55

3. Bezoekrapport ..............................................................................................................59

4. Timesheet .....................................................................................................................63

5. Bachelorproef Voorstelling 4 oktober 2013 ...............................................................71

6. WordPressDrupalJoomla ..............................................................................................79

7. WordPress Installatie Handleiding ................................................................................85

7.1Detailed Instructions ....................................................................................................87

7.1.1 Step 1: Download and Extract ..............................................................................87

7.1.2 Step 2: Create the Database and a User .............................................................87

7.1.3 Step 3: Set up wp-config.php ...............................................................................92

7.1.4 Step 4: Upload the files ........................................................................................93

7.1.5 Step 5: Run the Install Script ................................................................................94

8. WordPress Plug – In .....................................................................................................97

8.1 Tools ........................................................................................................................ 100

8.2 Om te beginnen ........................................................................................................ 100

8.3 Ontwerp opknippen................................................................................................... 104

Page 14: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 14

8.4 Ontwerp naar code omzetten .................................................................................... 107

8.5 CSS code ................................................................................................................. 110

8.6 Van HTML naar WordPress PHP-code ..................................................................... 114

8.7 Hoe nu verder? ......................................................................................................... 119

8.8 Het aanpassen van het logo ..................................................................................... 120

9. Webhosting en Filesharing ......................................................................................... 121

9.1 Rapidshare ............................................................................................................... 123

9.2 Uploaded .................................................................................................................. 123

9.3 iCloud ....................................................................................................................... 124

9.4 Amazone Cloud Drive ............................................................................................... 124

9.5 SkyDrive Microsoft .................................................................................................... 124

9.6 Box ........................................................................................................................... 124

9.7 UpToBox .................................................................................................................. 125

9.8 Bitshare .................................................................................................................... 126

9.9 Besluit....................................................................................................................... 126

10. Adobe Creative Cloud ............................................................................................. 127

10.1 Wat? ....................................................................................................................... 129

10.2 Besluit ..................................................................................................................... 129

11. Cisco WebEx Connect ............................................................................................ 131

11.1 Collaborate Securely with Anyone .......................................................................... 133

11.2 Besluit ..................................................................................................................... 133

12. Microsoft SharePoint ............................................................................................... 135

12.1 Prijs ........................................................................................................................ 137

12.2 Opslag .................................................................................................................... 138

12.3 Compatible ............................................................................................................. 138

12.4 Sharing en Collaboration ........................................................................................ 138

12.5 Versiebeheer .......................................................................................................... 138

Page 15: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 15

12.6 Mobiele toegankelijkheid......................................................................................... 139

12.7 Offline access ......................................................................................................... 139

13. Google Apps ........................................................................................................... 141

13.1 Prijs ........................................................................................................................ 143

13.2 Opslag .................................................................................................................... 143

13.3 Compatible ............................................................................................................. 143

13.4 Sharing en Collaboration ........................................................................................ 143

13.5 Versiebeheer .......................................................................................................... 143

13.6 Mobiele toegankelijkheid......................................................................................... 144

13.7 Offline access ......................................................................................................... 144

14. Office 365 ............................................................................................................... 145

14.1 Prijs ........................................................................................................................ 147

14.2 Opslag .................................................................................................................... 147

14.3 Compatible: ............................................................................................................ 147

14.4 Sharing en Collaboration ..................................................................................... 147

14.5 Versiebeheer .......................................................................................................... 147

14.6 Mobiele toegankelijkheid......................................................................................... 147

14.7 Offline access ......................................................................................................... 147

15. Zoho ....................................................................................................................... 149

15.1 Prijs ........................................................................................................................ 151

15.2 Opslag .................................................................................................................... 151

15.3 Compatible ............................................................................................................. 151

15.4 Sharing en Collaboration ........................................................................................ 151

15.5 Versiebeheer .......................................................................................................... 152

15.6 Mobiele toegankelijkheid......................................................................................... 152

15.7 Offline access ......................................................................................................... 152

16. Yammer .................................................................................................................. 153

Page 16: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 16

16.1 Prijs ........................................................................................................................ 155

16.2 Opslag .................................................................................................................... 155

16.3 Compatible ............................................................................................................. 155

16.4 Sharing en Collaboration ........................................................................................ 155

16.5 Versiebeheer .......................................................................................................... 156

16.6 Mobiele toegankelijkheid......................................................................................... 156

16.7 Offline access ......................................................................................................... 156

17. Why Yammer Enterprise? ....................................................................................... 157

18. Vergelijking Collaboration Platform ........................................................................ 163

19. PID ......................................................................................................................... 169

Page 17: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 17

1. Inleiding

In eerste instantie omvat de scriptie een grondige probleemstelling. In dit gedeelte zal

duidelijk worden wat de eigenlijke problemen inhouden. Dit is hetgene waar heel onze proef

op gebaseerd is.

Het tweede hoofdstuk handelt over het content management system ofwel CMS. Dit is een

systeem waarmee je de content van een website kan beheren. Er zullen verschillenden

systemen met elkaar vergeleken worden om te onderzoeken welke CMS het beste past met

de oplossing op de probleemstelling die wij moeten voorzien.

In derde instantie handelt de scriptie over collaboration platforms. Hieronder kunnen we het

intranet zien, een online document sharing tool, of een tool waar een groep die aan een

bepaald project werken online kunnen communiceren.

Page 18: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 18

2. Bedrijfscontext

2.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)

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

Page 19: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 19

3. Probleemstelling

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

Creactiv te hoog gegrepen is. Het is nodig dat de tool gemakkelijk te gebruiken is en dat de

klanten van Creactiv 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 Creactiv tegen betaling een tool aan te bieden voor het beheren van online

informatie van de producten en diensten.

Naast de e-commerce en een online communicatie tool is er voor Creactiv een oplossing

nodig om bedrijfsdocumenten op te slaan en te delen met andere personen. De ervaring met

Dropbox heeft aangetoond dat dit niet volstaat als oplossing. Dit project kan later ook

uitmonden in een oplossing voor document management voor de bedrijfsklanten van

Creactiv. De informatie nodig voor de websites van klanten van Creactiv komt uit een online

documentatiesysteem. Er is nood aan een systeem voor het beheren van alle

achtergrondinformatie over de producten en diensten. Het documentatiesysteem is een

belangrijke bron van informatie voor het actualiseren van de websites.

Page 20: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 20

4. Mogelijke oplossingen

Om de ideale oplossing te verkrijgen is het van belang om exact te weten wat de consument

nu juist wil. Om dit te analyseren is er een mogelijk scenario uitgeschreven. Dit scenario

geeft duidelijkheid over wat er al dan niet mogelijk moet zijn. Later kan er aan de hand

hiervan verder gewerkt worden aan een blueprint en mockups om alles te visualiseren.

Achteraf zal blijken dat een opleiding aan de eindgebruiker ook onmisbaar is.

4.1 Mogelijke scenario’s

Het zou dus als volgt kunnen zijn: de klanten starten met een lege template en kunnen zelf

hun template opbouwen aan de hand van de tool die gecodeerd zal worden. Dit zou een

voorbeeld kunnen zijn van hoe de opbouw van het project gaat:

Klant kan kiezen voor een achtergrond kleur foto

Klant kan kiezen aan de hand van de door ons geïmplementeerde elementen hoe hun

header eruit zal zien (bijvoorbeeld waar in de header hun logo willen komt en hoe groot dat

moet zijn)

Klant kan kiezen of ze al dan niet gebruik willen maken van een slidebar (links

of rechts)

Klant kan kiezen hoe de indeling van hun footer moet gebeuren: tweeledig -

drieledig - … en wat ze in die footer willen hebben.

Klant kan kiezen wat de kleuren, de tekstopmaak, … van H1 - H2 - … -

paragraaf zullen zijn.

Klant kan het thema "uitbreiden" met verschillende mogelijkheden die al

ingebouwd zijn zoals slidebar - social media icons - google maps - blog styles

- buttons - inschrijvingsformulieren - …

Dit zou de basis van het project kunnen zijn en zeker nog uitgebreid worden naargelang de

overblijvende tijd en mogelijke inspiratie opgedaan tijdens het ontwikkelen van vorige

elementen.

Page 21: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 21

4.2 Blueprint en Wireframes

Om een basisidee te kunnen geven van wat we gaan ontwikkelen, zal er een blueprint

gemaakt worden. Deze blueprint zal duidelijk maken wat de onderlinge relaties zijn tussen de

verschillende pagina’s. Dit om te vermijden dat verwijzingen naar andere pagina’s op

foutieve pagina’s zullen terecht komen. Vervolgens zal er aan de consument enkele

wireframes worden meegegeven om een idee te kunnen geven van hoe hun site er zou

moeten uitzien.

4.3 Opleiding van de eindgebruiker

Aangezien de cliënt niet altijd over de juiste kennis bezit om met zulke software te werken

bieden wij de cliënt steeds een basis opleiding aan om met de plug-in overweg te kunnen.

Door deze opleiding zal de klant niet zelf moeten uitzoeken hoe het werkt, wanneer de

opleiding voltooid is kan de klant nog steeds gebruik maken van de bijhorende documentatie

die wij zullen voorzien bij de plug-in zelf.

Figuur 3 Voorbeeld bleuprint

Page 22: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 22

4.4 Mockups

Nu dat er duidelijkheid geschept is in wat de tool precies allemaal moet kunnen en weten

welke elementen het moet bevatten, kunnen we dit visueel gaan voorstellen doormiddel van

mockups. Deze mockups zullen stapsgewijs weergeven hoe de consument tewerk zal gaan.

Als voorbeeld zal de consument hier ‘Het Marktje’ gaan opbouwen.

4.4.1 Stap 1: Template selecteren

Nadat de plug-in geïnstalleerd is op Content Management Systeem krijgen consumenten in

eerste instantie de gelegenheid om een standaard template de kiezen die voldoet aan hun

normen. Indien gewenst kunnen ze een bepaalde categorie kiezen bv.: bakkerij, winkel,

schoonheidsinstituut, e-shop, enz.

Hier kan u zien dat de klant kiest voor een 1:2 Columns template. Op de eerste pagina heeft

de gebruiker ook steeds de mogelijkheid om elke template te bekijken in een groter formaat

dat zal te zien zijn in een pop-up venster.

Figuur 4: Template selecteren

Page 23: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 23

4.4.2 Stap 2: Lay-out aanpassen

Nadat de consument een bepaalde template gekozen komt hij op de eerste pagina van hun

nieuwe site terecht, hier kan hij de lay-out volledig naar eigen smaak aanpassen. Zo is er de

mogelijkheid om bv. De header, kalender, menu, van plaats te veranderen doormiddel van

een drag and drop systeem. Het drag end drop systeem zal later in de scriptie uitgebreid

besproken worden.

Bovendien zal het systeem de mogelijkheid bieden om de titel en tekst van een pagina

eenvoudig aan te passen. Zo kan er gekozen worden voor een bepaald lettertype in een

bepaalde kleur en grootte.

In de onderstaande afbeelding kan u waarnemen dat de gebruiker zijn logo heeft toegevoegd

aan de website en een achtergrondkleur heeft gekozen. Er is nog geen tekst of banner

toegevoegd.

Figuur 5: Lay-out aanpassen

Page 24: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 24

4.4.3 Stap 3: Banners en afbeeldingen toevoegen

Tijdens het wijzigen van de opmaak van de website kan de consument er al dan niet voor

kiezen om een banner te gaan gebruiken. Indien de klant dit niet wenst te gebruiken kan hij

deze gewoon verwijderen. Indien hij dit wel wil zal hij op volgend scherm terecht komen.

De gebruiker heeft verschillende mogelijkheden om de locatie van de afbeelding in te geven.

Standaard zal het systeem op de computer zelf gaan zoeken, maar wij geven de consument

ook de mogelijkheid om foto’s via Flickr en iStockphoto te gaan importeren.

Figuur 6 & 7: Banners en afbeeldingen toevoegen

Page 25: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 25

4.4.4 Stap 4: Inhoud toevoegen

Vervolgens na het al dan niet invoegen van een banner gaan we over naar het toevoegen

van de inhoud van de website. Per sectie kan de gebruiker tekst toevoegen aan de hand van

een handige editor. Hier kan men de tekst toevoegen en vervolgens bepalen hoe deze er

hoeft uit te zien. De lettertypes en dergelijke kunnen hier aangepast worden.

In onderstaande afbeelding ziet u dat de klant gebruik maakt van een ander lettertype voor

zijn header. Onder deze titel ziet u de toevoeging van de openingsuren van de winkel.

Figuur 8: Inhoud toevoegen

Page 26: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 26

4.4.5 Stap 5: Structuur opslaan

Als laatste stap zal de consument zijn website opslaan die vervolgens bewaard zal worden in

de map My Website. Ter controle is er steeds de mogelijkheid om de website in een pop-up

venster te bekijken. Bij het opslaan zal het systeem standaard de html extensie toevoegen

waardoor de klant simpelweg een naam hoeft in te geven.

Figuur 9: Structuur opslaan

Page 27: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 27

4.4.6 Stap 6: Instellingen

De gebruiker heeft de kans om zijn algemene instellingen te wijzigen, deze wijzigingen

worden toegepast op elke pagina van de website. Deze instellingen kunnen onder andere

het lettertype zijn en de achtergrond van de pagina’s. Elk onderdeel kan een standaard lay-

out krijgen die steeds kunnen aangepast worden in deze instellingen zonder dat de klant

deze op elke pagina afzonderlijk zal moeten wijzigen.

4.5 Drag-and-Drop

Het te ontwikkelen programma zal voorzien worden van een drag and drop systeem, om de

gebruikers de mogelijkheid te bieden bepaalde onderdelen van de website te verplaatsen op

de website.

Een voordeel van dit systeem is dat de client niet hoeft te coderen om een lay-out naar wens

te verkrijgen.

Omdat er reeds een groot aantal drag en drop systemen gratis aangeboden worden was het

wel interessant hier een kijkje in te gaan nemen. Vrijwel meteen werd er een goed systeem

gevonden, namelijk: SiteCake.

Figuur 10: Instellingen

Page 28: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 28

SiteCake is een plug-in die gratis word aangeboden in het WordPress platform. De plug-in

biedt de mogelijkheid om bijvoorbeeld filmpjes rechtstreeks vanuit YouTube naar je eigen

site te slepen ook een kaart van Google Maps is zonder problemen in te voeren. Via

overstaande URL kunt u zelf de mogelijkheden van SiteCake bekijken.

http://www.youtube.com/watch?feature=player_embedded&v=V6Oj4L_-LCY

4.6 Web Standards

Om zowel voor ontwikkelaars als voor bezoekers een gebruiksvriendelijk project af te geven

is er gekozen om Web Standards te gaan gebruiken. Wanneer webdevelopers deze

standaarden gebruiken zullen andere developers de geschreven code gemakkelijker kunnen

lezen en begrijpen. Ook zal elke webbrowser de eigenschappen correct weergeven.

Webpagina’s die voldoen aan deze waarden worden sneller gevonden door zoekmachines.

Page 29: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 29

5. Content Management System

Door de opdrachtgever werd opgelegd dat er voor het eerste deel van de probleemstelling

gebruik wordt gemaakt van een content management system. In eerste instantie zullen we

zo een gepast systeem uitkiezen door een grondige vergelijking te maken. Om de beste

keuze te maken is het belangrijk precies te weten wat content management system nu

precies is.

5.1 Wat is Content Management System?

Een content management system is een programma of een verzameling van scripts die het

mogelijk maken een website op te bouwen met één of meerderen beheerders.

Een Content Management Systeem is opgebouwd uit enkele grote bouwstenen:

Een administratiemodule die zal gebruikt worden voor het invoeren, wijzigen of

verwijderen van gegevens. In deze omgeving is het mogelijk om plug-ins te

installeren en verwijderen, voor het personaliseren van de website.

Een database, voor gegevensopslag.

Een presentatie module die het mogelijk maakt dat bezoekers de ingevoerde content

in zijn geheel kunnen waarnemen.

Gewoonlijk bezit een CMS een aantal standaard templates. Ook kunnen er modules

geïnstalleerd worden om een multifunctionelere website te krijgen. Omdat je zelf aan je

gekozen template plug-ins kan toevoegen en combineren met elkaar bekom je een

persoonlijke website. In het beheergedeelte kan de inhoud van de website toegevoegd of

aangepast worden.

Natuurlijk is het ook mogelijk zelf een module of template te schrijven. Hierover lees je later

in de scriptie een uitgebreide beschrijving.

5.2 Vergelijking diverse Content Management Systems

Het is van belang dat het platform waarin gewerkt zal worden voldoet aan de eisen van de

opdrachtgever. Er werd hiervoor een grondige vergelijking opgesteld waarvoor ik u graag

verwijs naar de bijlage ’7. WordPressDrupalJooma’. In vernoemd document kan u een

overzichtelijke vergelijking vinden tussen WordPress, Joomla en Drupal.

Page 30: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 30

5.3 Conclusie

Door deze vergelijking te maken tussen WordPress, Drupal en Joomla, werd er overwogen

de plug-in te maken voor het WordPress platform. WordPress biedt de gemakkelijkste

oplossing voor het bewerken van de inhoud na het ontwerpen zelf. Aan de hand hiervan

werd de beslissing genomen om verder te gaan werken met WordPress. Aangezien het niet

de hoofdtaak van de gebruiker is om de website van het bedrijf te gaan bewerken is het

noodzakelijk om een gebruiksvriendelijke oplossing te bieden naar de klant toe. Dit biedt

WordPress de gebruikers aan.

Page 31: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 31

6. WordPress

Nu de keuze gevallen is om met WordPress aan de slag te gaan is het vanzelfsprekend dat

we dit eerst moeten installeren op een host of een server. Om de installatie zo goed mogelijk

te laten voorlopen hebben we gebruik gemaakt van enkele eenvoudige stappen, maar eerst

gaan we kijken of we online gaan werken of dat we de software zelf gaan installeren bij een

provider naar keuze.

6.1 Installeren of online gebruiken?

Wanneer je aan de slag wilt gaan met WordPress beschikt u over 2 mogelijkheden:

Een account aanmaken op WordPress.com om direct aan de slag te gaan

De software downloaden op WordPress.org en het installeren bij je eigen provider.

Er zijn enkele factoren die meespelen in de beslissing om online te werken of om zelf de

software te installeren. Welke keuze je nu juist moet maken hangt hoofdzakelijk van je doel

af. Indien er geen specifieke wensen zijn van functionaliteit en design kan je makkelijk online

aan de slag gaan.

Aan het online werken zijn wel enkele nadelen verbonden. Zo kun je bijvoorbeeld het

ontwerp van je website niet zelf bepalen. Je moet keuze maken uit enkele standaard

templates waar bovendien waar beperkte aanpasmogelijkheden zijn. Ook kun je maar

gebruik maken van een beperkt aantal plug-ins. Het toevoegen van zelf gemaakte plug-ins is

ook niet mogelijk, tenzij met hoge kosten. Het aantal gebruikers dat je kan toevoegen is ook

gelimiteerd tot 35 en bovendien kan je ook geen gratis video op je site zetten.

Omdat wij zelf een plug-in gaan maken is het voor ons dus noodzakelijk om de WordPress

software te installeren.

6.2 Installatie WordPress

Alvorens we aan de slag gaan met de installatie van WordPress gaan we controleren of we

voldoen aan de minimum eisen om WordPress te kunnen installeren. De host die je wilt

gebruiken moet beschikken over PHP vanaf versie 5.2.4 en MySQL vanaf versie 5.0. Als we

dit gecontroleerd hebben kunnen we aan de slag gaan met de installatie. Voor een

uitgebreide installatiehandleiding kan u terecht in de bijlage ‘8. WordPress Installatie

Handleiding’.

Page 32: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 32

6.2.1 Stap 1: Downloaden

In eerste instantie dient WordPress Version 3.8, de laatste versie van WordPress

gedownload te worden op een locatie naar keuze. Nadat het downloaden compleet is moet

de downloadlocatie aangesproken worden, waar de bestand uitgepakt (unzip) worden.

6.2.2 Stap 2: Database aanmaken

Voor de tweede stap is het control panel nodig. Om hierop aan te melden gebruikt u de

gegevens die u ontvangt van u host. In het control panel wordt een database aan gemaakt

waar ook een gebruiker aan toegekend moeten worden.

6.2.3 Stap 3: Database gegevens invullen

Vervolgens is het noodzakelijk het bestand wp-config-sample.php te openen in kladblok.

Hierin worden de database gegevens invullen.

6.2.4 Stap 4: Opslaan

Indien de derde stap correct voltooid is, wordt het bewaard als: wp-config.php.

6.2.5 Stap 5: Uitvoeren

Als laatste stap worden alle bestanden geüpload en het installatie bestand zal worden

uitvoeren door het te openen in een browser naar keuze. Dit zal gebeuren door intsall.php in

te geven in de adresbalk. Vb. http://[email protected]/wp-admin/install.php

Een uitgebreide installatiehandleiding is ook terug te vinden in de bijlagen onder ‘WordPress

installatie handleiding’.

6.3 WorpPress template en plug-in maken

Omdat de beste oplossing luidde: een plug-in die meerdere zelfgemaakte templates bevat, is

het natuurlijk van belang dat er eerst enkele templates kunnen worden gemaakt. Nadat er

enkele templates zijn aangemaakt kan er aan de slag worden gegaan met een plug-in

aanmaken. Dit is stapsgewijs beschreven en kunt u terug vinden in de bijlagen onder ‘8.

WorPress Plug-in’. Hierin kan u de manier van werken in terug vinden.

Page 33: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 33

7. Collaboration platform

Naast de e-commerce en een online communicatie tool is er voor Creactiv een oplossing

nodig om bedrijfsdocumenten op te slaan en te delen met andere personen. De ervaring met

Dropbox heeft aangetoond dat dit niet volstaat als oplossing. Dit project kan later ook

uitmonden in een oplossing voor document management voor de bedrijfsklanten van

Creactiv. De informatie nodig voor de websites van klanten van Creactiv komt uit een online

documentatiesysteem. Er is nood aan een systeem voor het beheren van alle

achtergrondinformatie over de producten en diensten. Het documentatiesysteem is een

belangrijke bron van informatie voor het actualiseren van de websites.

7.1 Wat is een collaboration platform?

Een collaborating platform is een software die hoofdzakelijk gebruikt wordt door bedrijven om

project groepen een makkelijke communicatie mogelijkheid te bieden. De platformen hebben

als grootste onderscheid met andere software dat ze beschikken over sociale mogelijkheden.

Dit maakt het mogelijk te werken met meerdere inzichten en visies naar een onderwerp toe,

waardoor de oplossing optimaler zou moeten worden. Wijzigingen worden bijgehouden

worden via het systeem, waar ook steeds een verwijzing naar de auteur zal zijn.

7.2 Vergelijking diverse Collaborating Platforms

Er is een groot aantal platformen beschikbaar op de markt, om de beste keuze te maken

voor Cre@ctiv hebben is er een vergelijking opgesteld om hen de beste keuze te kunnen

laten maken. Deze vergelijking kan u terug vinden in de bijlagen onder ’18. Vergelijking

Collaboration Platform’. Van elke platform is er ook een afzonderlijk document terug te

onder het hoofdstuk ‘collaboration platforms’.

7.3 Uitgebreid onderzoek gekozen platformen

Omdat er een groot aantal platformen op de markt zijn, was het belangrijk uitgebreid

onderzoek te doen. Na dit onderzoek en overleg met Cre@ctiv, is besloten verder te werken

met de twee bekendste platformen:

7.3.1 SharePoint

SharePoint, een platform van Microsoft en maakt tevens ook gebruik van het Office pakket.

Op gebeid van collaborating platformen is SharePoint een van de bekendste op de markt.

Een belangrijke reden om met SharePoint te gaan verder werken is de betrouwbaarheid van

het systemen. Zelf hebben wij al enkele jaren ervaring met de office pakketten en kunnen

hier zelf geen negatieve opmerkingen op geven.

Page 34: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 34

Microsoft staat zelf in voor de opslag van gegevens en het maken van een back-up. Uit

onderzoek kon de conclusie getrokken worden dat Microsoft garant staat voor het correct

opslaan van gegevens. De opslag gebeurd op meerdere locaties en zal ook dagelijks

uitgevoerd worden, pas na zes maanden zullen de eerste gegevens teniet gedaan worden.

7.3.2 Yammer

Een tweede platform dat in aanmerking kwam voor uitgebreider onderzoek is Yammer.

Yammer kan gecombineerd worden met SharePoint en Office365. Het is een zakelijk sociaal

netwerk dat je kunt vergelijken met Twitter, maar dan voor bedrijven. Je kunt er kleine

berichten plaatsen. Zo kan je bijvoorbeeld laten weten waar je aan het werk bent, met wat je

bezig bent en wat er nog gedaan moet worden. Ook privé berichten sturen is mogelijk.

Je kan je alleen bij een bepaald netwerk aansluiten indien je over eenzelfde e-maildomein

beschikt. Normaal kun je er gratis gebruik van maken tenzij een bedrijf het werk willen

beheren, wanneer je dit wil doen moet er een betalend account aangekocht worden.

Yammer kan gebruikt worden op computers, maar ook op gsm via de app.

7.4 Conclusie

Beide platformen werden uitgebreid getest en het advies dat wij aan Cre@ctiv was om voor

Yammer in combinatie met SharePoint en Office 365 te kiezen. Ze nemen dit advies nu in

beraad en zullen later een definitief besluit nemen. Cre@ctiv is nu voorzien van voldoende

informatie over Yammer om later eventueel snel aan de slag te kunnen. Verder kregen ze de

vergelijking tussen alle verschillenden platformen zodat ze vrij zijn in hun keuze. Wanneer

Cre@ctiv een definitief besluit genomen heeft over welk platform ze uiteindelijk gaan willen

gebruiken staat ons team in voor de installatie.

Page 35: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 35

8. Webhosting en file-sharing

8.1 Wat is webhosting en file-sharing?

File-sharing kan bekeken worden als een aantal bestanden die op een computer ter

beschikking gesteld worden aan andere gebruikers op hetzelfde netwerk. Ze kunnen

bestanden die op een bepaalde computer staan openen, afhalen, bewerken…. Er bestaan

enkele bekende tools die file-sharing makkelijker en gebruiksvriendelijker maken, hierbij

denken we bijvoorbeeld aan Dropbox, Google Drive, Skydrive,...

8.2 Vergelijking webhosting en file-sharing tools

Omdat er zoveel verschilleden tools op de markt zijn is er een vergelijkend studie opgesteld

om een duidelijk overzicht te verkrijgen tussen een 8-tal provider/platformen. Deze

vergelijking kan terug gevonden worden in de bijlage onder ’9. Webhosting en Filesharing’.

8.3 Conclusie

Na het opstellen van de vergelijkende studie kwamen we tot het besluit dat dit soort

systemen niet aangeraden zal worden aan de opdrachtgever. Dit omdat de hoofdzaak van

zulke systemen voornamelijk downloaden is, dit is niet wat onze opdrachtgever wenst. Ze

willen gebruik maken van meerdere gebruikers en ook dit heeft dit niet te bieden.

Page 36: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 36

9. Yammer

Een zakelijk sociaal netwerk dat je kunt vergelijken met Twitter, maar dan voor bedrijven. U

kunt er kleine berichten plaatsen. Zo kan je bijvoorbeeld laten weten waar je aan het werk

bent. Ook privé berichten sturen is mogelijk.

U kan je alleen bij een bepaald netwerk aansluiten indien je over eenzelfde e-maildomein

beschikt. Normaal kun je er gratis gebruik van maken tenzij een bedrijf het netwerk wil

beheren, wanneer je dit wil doen moet er een betalend account genomen worden.

Yammer kan gebruikt worden op computers, maar ook op gsm via de app.

9.1 Installatie

De stappen die ondernomen moet worden om Yammer te installeren zijn zeer eenvoudig. De

stappen zijn identiek voor het aanmelden op een bestaand netwerk als bij het creëren van

een splinternieuw netwerk. Volgende stappen moeten ondernomen worden:

Surf naar www.yammer.com en vul je zakelijk e-mailadres in. Klik hierna op

‘Join’.

Je ontvangt een mail waar een link is staat voor je account te bevestigen.

Optioneel download je de Yammersoftware om Yammer te gebruiken van op

je desktop. Ook op deze manier ontvang je meldingen van nieuwe berichten.

Indien je gebruik maakt van een smartphone kun je de applicatie Yammer

client downloaden en installeren op je smartphone.

Wanneer je je aanmeld op Yammer met je e-mailadres kom je vanzelf in het Yammer-

netwerk van jou bedrijf terecht.

Page 37: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 37

9.2 Vooruitgang in samenwerking

In Yammer kan je een groep aanmaken waar jij en je teamleden inzitten om elkaar op de

hoogte te houden over de stand van zaken, vragen stellen en een deadline bespreken, het

kan allemaal via Yammer. Je hoeft geen tijd meer vrij te maken, een geschikte datum te

zoeken, … voor vergaderingen.

9.2.1 Toegankelijkheid

Een groep kan privé of open zijn. De voordelen van een privé groep ten opzichten van een

gesloten groep is dat buitenstaanders hun lidmaatschap moeten aanvragen en de

administrator moet dit goedkeuren. Hiernaast is de informatie die in een privé groep gedeeld

wordt niet detecteer baar door zoekmachines. Via de button ‘settings’ kan u de groep steeds

veranderen naar open of privé.

Figuur 11: Lay-out Yammer

Figuur 12: Yammer Public or Private

Page 38: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 38

9.2.2 Beheer

U kan bij het aanmaken van een groep direct leden aan de groep toevoegen, maar ook

achteraf vormt dit geen probleem. Dit is praktisch wanneer er bv. nieuwe werknemers

aangeworven worden.

9.2.3 Post

Via de publisher kunt u iets posten in de groep dat kan gaan van een spontaan idee tot vraag

Ed. Door middel van een @ teken en de naam van een lid er aan vast te typen legt u extra

aandacht op die bepaalde persoon dat hij/zij het zeker moet lezen of dat de persoon

betrokken is met het bericht.

Naast gewone tekst je ook documenten en foto’s toevoegen aan je post. Dit die je

doormiddel van ‘add a Doc/Image’ te gebruiken.

Figuur 13: Yammer leden toevoegen

Figuur 14: Yammer bericht posten

Page 39: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 39

9.2.4 Communicatie

Yammer biedt ook de mogelijkheid om privé conversaties te voeren.

9.2.5 Documenten

Je kan in een groep ook bestanden uploaden. Bestanden kunnen verschillende permissies

krijgen: leze, schrijven, ..

Figuur 15: Yammer chat

Figuur 16: Yammer documenten

Page 40: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 40

9.2.6 Notes

Er kunnen notities gedeeld worden met de volledige groep. Wijzigingen kunnen worden

aangebracht en je kan jou wijzigingen markeren.

9.3 Mobile toegankelijkheid

Om altijd up-to-date te blijven biedt Yammer ook mobiele applicaties. Op deze manier zal de

gebruiker een melding krijgen wanneer er iets nieuws gepost wordt in zijn Yammer groep.

Yammer biedt applicaties aan voor IOS, Android en Windows.

Figuur 17: Yammer notes

Figuur 18: IOS, Android, Windows

Page 41: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 41

10. Samenwerking

10.1 Onderlinge samenwerking

Wij hebben als team besloten om de traditionele manier van samenwerken achter ons te

laten, namelijk, de opdrachten verdelen. Wij kozen er voor om echt als een team constant

samen te werken, dit was voor ons een bewuste keuze omdat we zo betere oplossingen

konden verkrijgen. Dit omdat de verschillende opties steeds met twee visies kan bekijken

worden. Deze manier van werken heeft in onze ogen zijn vruchten af geworpen.

Om deze nieuwe manier van samenwerken tot een goed eind te brengen is het van belang

dat er genoeg tijd word vrijgemaakt door beide teamleden. Eens we samen tot de –voor ons-

ideale oplossen kwamen werden er pas taken verdeeld. Achter af werd elke taak daar het

andere teamlid aangevuld.

Er een goede communicatie tussen beide teamleden. Er werd ook veel contact gehouden via

sociale netwerken. Dit omdat we ver van elkaar wonen. We waren beide steeds bereid

elkaar te helpen.

10.1.1 Samen werken op de campus versus Online samenwerken

Op school werd ons de mogelijkheid geboden om een aantal uren per week daar te werken.

Dit hebben we de eerste weken dan ook geprobeerd, maar gezien er niet altijd een docent

aanwezig was, was het vaak veel te luidruchtig in de lokalen en was geconcentreerd werken

praktisch onmogelijk. Hierdoor liepen we vertraging op en daar moest natuurlijk iets aan

gedaan worden. We spraken af met het opleidingshoofd Yvan Rooseleer om voortaan van

thuis uit te werken. We moesten wel regelmatig de vooruitgang kunnen aantonen. Nadat we

deze methode toepaste hebben we geen problemen meer gehad met vertragingen.

10.2 Samenwerking met de opdrachtgever

De samenwerking met de opdrachtgever verliep zeer vlot. Voor het project van start ging

werden enkele duidelijke afspraken gemaakt. Bij deze afspraken was de communicatie naar

het bedrijf toe zeer belangrijk. De opdrachtgever wou op de hoogte blijven van de stand van

zaken. Wanneer wij echter problemen hadden met een bepaald onderdeel, konden wij

steeds bij onze opdrachtgever terecht voor een mogelijke oplossing. De communicatie

verliep voornamelijk via e-mail. Ook werd er regelmatig afgesproken met de opdrachtgever

om hen een klare kijk te geven over de stand van zaken.

Inhoud van de vergaderingen met de opdrachtgever:

Page 42: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 42

Oplossingen verfijnen,

Selectieve vermindering van de platformen,

Hulpmiddelen voorstellen en onderzoeken,

Plan van aanpak,

Evaluatie.

De eerste communicatie met de opdrachtgever verliep telefonisch. Voor verdere

informatie werd er overgegaan naar e-mail. Bij deze uitwisseling was er ook vraag naar

onze CV. Deze kan u in onze bijlagen terug vinden als ook de eerste e-mails met de

opdrachtgever.

Page 43: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 43

11. Algemeen besluit

De twee doelen van deze scriptie was een aantrekkelijk middel te verschaffen dat moet

gedraaid worden in een Content Management System dat de mogelijkheid biedt cliënten een

eigen basiswebsite te laten maken. Dit moest in een aantrekkelijk en gebruiksvriendelijke

omgeving gebeuren. Hiernaast moest er ook een geschikt opslagsysteem of opslagplatform

aan de opdrachtgever aangeboden worden dat voldoet aan enkele voorwaarde.

Bij het afronden van deze scriptie kunnen wij zeggen dat we voor beide probleemstellingen

een geschikte oplossing hebben gevonden. Zo hebben we na onderzoek een geschikt

collaboration platform gevonden namelijk, Yammer. Voor de tweede probleemstelling

hebben wij bleuprints gemaakt en het begin van het prototype. Ook zijn er een aantal

mockup’s ontworpen om visueel een duidelijk beeld te krijgen van het ontwerp.

Dit was voor mij een zeer leerrijk project. Het gaf een goed beeld van hoe we tewerk zullen

gaan tijdens de stage. Ik hoop door het opstellen van deze scriptie voldoende kennis te

hebben opgedaan om een vlotte stage te lopen.

Enkele belemmering in het project waren misschien dat er zodanig veel mogelijkheden zijn

waardoor het filteren zeer moeilijk is. Na een grondige filtering zijn oplossingen bedenken en

voorleggen wel een heel stuk makkelijker, zo heeft elke belemmering toch weer zijn

voordelen.

Page 44: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 44

12. Referenties

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/

Yammer. (2013). Yammer. Retrieved from Features:

https://about.yammer.com/product/features/

Page 45: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 45

Cre@ctiv – Webdesign & (Digitale) Marketing

Cre@ctiv

Bachelorproef Bijlagen

In opdracht van:

Elien Defraeije

Naamsestraat 290/401 3001 HEVERLEE TEL: 0472 33 64 98 M:

[email protected]

Voorstelling Nr. 1

Academiejaar 2013 - 2014

Page 46: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 46

Page 47: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 47

1. Aanloop naar Project &

Stage

Page 48: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 48

Page 49: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 49

1.1 Aanloop

De eerste communicatie met het bedrijf begon aan het einde van de laatste examens van

vorig jaar. Alexander Siccard nam telefonisch contact op om wat meer informatie te krijgen

omtrent de stage en wat hun vereisten waren. Na wat onderling overleg hadden wij besloten

om voor de stage te gaan. In juli probeerde we dan ook contact te maken met het bedrijf.

Wegens omstandigheden was het echter niet mogelijk om het bedrijf aan de telefoon te

krijgen, hierdoor besloten we om een e-mail te sturen met de vraag of de stageplaatsen al

dan niet nog beschikbaar waren. In onderstaande afbeeldingen kan u de communicatie terug

zien te vinden. Het bevat de eerste e-mails met het bedrijf alvorens onze eerste afspraak met

Elien Defraeije. Vervolgens werd er afgesproken in Leuven, hier werd een eerste contact

gemaakt met de persoon in kwestie. Na een korte voorstelling van onszelf en het bedrijf en

wat hun verwachtingen waren hebben wij toegehapt op het aanbod. Vervolgens werd het

contract getekend en hadden wij onze stageplaats voor het 2de semester. Een samenvatting

van deze ontmoeting kan u in verdere bijlagen terug zien te vinden.

1.2 E-mails

Op 23-aug.-2013 om 13:18 heeft Ilka Winnen <[email protected]> het volgende geschreven:

Beste mevrouw Defraeije

Wij zijn 2 studenten Toegepaste Informatica aan de Hogeschool Universiteit Brussel. Wij hebben interesse in

de stageplaats die u ons aanbiedt. Is deze nog steeds beschikbaar?

Wij namen in juni reeds telefonisch contact met u op.

Met vriendelijke groet,

Ilka Winnen en Alexander Siccard

Figuur 19: E-mail

Page 50: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 50

Op 23 augustus 2013 13:21 schreef Elien Defraeije <[email protected]>:

Beste Ilka,

Deze stageplaatsen zijn inderdaad nog beschikbaar.

Is het mogelijk om jullie CV door te sturen?

Alvast bedankt!

Mvg,

Elien Defraeije

Op 23-aug.-2013 om 15:33 heeft Ilka Winnen <[email protected]> het volgende geschreven:

Beste mevrouw Defraeije,

In de bijlage kan u onze CV vinden.

Alvast bedankt.

Met vriendelijke groet,

Ilka Winnen & Alexander Siccard

Figuur 20: E-mail

Figuur 21: E-mail

Page 51: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 51

Op 23 augustus 2013 15:48 schreef Elien Defraeije <[email protected]>: Beste Ilka, Ik heb jullie CV's bekeken en het ziet er veel belovend uit. Zien jullie het zitten om samen eens op gesprek te komen te Heverlee? Het past voor mij 30 augustus in de namiddag en 4 september de hele dag. Laat maar weten of dit voor jullie past. Mvg, Elien Defraeije

Op 23-aug.-2013 om 16:02 heeft Ilka Winnen <[email protected]> het volgende geschreven:

Beste mevrouw Defraeije,

Wegens vakantiewerk kunnen geen we van beide dagen. Vanaf 20 september zijn we allebei vrij, is

er hierna nog een mogelijkheid om een afspraak te maken?

Met vriendelijke groet,

Ilka Winnen en Alexander Siccard

Figuur 22: E-mail

Figuur 23: E-mail

Page 52: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 52

Op 23 augustus 2013 16:09 schreef Elien Defraeije <[email protected]>: Beste Ilka,

Natuurlijk is dit mogelijk.

Ikzelf ben op vakantie tot 22 september. Past het voor jullie 25 september?

Groetjes!

Op 23-aug.-2013 om 16:16 heeft Ilka Winnen <[email protected]> het volgende geschreven:

Beste mevrouw Defraeije,

25 september pas voor ons. Rond hoe laat kunnen wij komen? Het is voor ons dan een lesdag dus

zouden we op voorhand moeten kunnen zeggen dat we dan niet aanwezig zullen zijn.

Wat is het adres?

Mvg

Ilka & Alexander

Figuur 24: E-mail

Figuur 25: E-mail

Page 53: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 53

Op 23 augustus 2013 16:20 schreef Elien Defraeije <[email protected]>: Beste Ilka,

Van wanneer tot wanneer heb jullie die dag les?

Voor mij past het de hele dag + avond dus jullie komen wanneer het voor jullie past.

Adres is Naamsesteenweg 290, 3001 Heverlee.

Als jullie met de trein komen is er bus die recht voor de deur stop. Bus 1 en 2 richting Heverlee

campus. Het is de halte achter Heverlee station. Van zodra je de sporen over bent, kan je bellen

voor de halte.

Mvg,

Elien

Op 23-aug.-2013, om 16:23 heeft Ilka Winnen <[email protected]> het volgende geschreven:

Beste mevrouw Defraeije,

Wanneer we dan les hebben kunnen we nu nog niet zeggen. Ik vermoed dat we binnen enkele

dagen ons rooster zullen krijgen, ik zal je dan verder op de hoogte houden.

Bedankt voor de info.

Mvg,

Ilka & Alexander

Figuur 26: E-mail

Figuur 27: E-mail

Page 54: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 54

Page 55: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 55

2. Curriculum Vitae

Page 56: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 56

Page 57: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 57

Page 58: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 58

Figuur 28: Curriculum Vitae Ilka Winnen

Page 59: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 59

3. Bezoekrapport

Page 60: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 60

Page 61: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 61

Figuur 29: Bezoekrapport

Page 62: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 62

Page 63: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 63

4. Timesheet

Page 64: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 64

Page 65: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 65

Figuur 30: Timesheet

Page 66: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 66

Figuur 31: Timesheet

Page 67: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 67

Figuur 32: Timesheet

Page 68: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 68

Figuur 33: Timesheet

Page 69: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 69

Figuur 34: Timesheet

Page 70: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 70

Page 71: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 71

5. Bachelorproef

Voorstelling

4 oktober 2013

Page 72: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 72

Page 73: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 73

Figuur 35: Presentatie 4 oktober

Page 74: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 74

Figuur 36: Presentatie 4 oktober

Page 75: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 75

Figuur 37: Presentatie 4 oktober

Page 76: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 76

Figuur 38: Presentatie 4 oktober

Page 77: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 77

Figuur 39: Presentatie 4 oktober

Page 78: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 78

Figuur 40: Presentatie 4 oktober

Page 79: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 79

6. WordPressDrupalJoomla

Page 80: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 80

Page 81: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 81

Figuur 41: Vergelijking CMS platformen

Page 82: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 82

Figuur 42: Vergelijking CMS platformen

Page 83: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 83

Figuur 43: Vergelijking CMS platformen

Page 84: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 84

Page 85: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 85

7. WordPress Installatie

Handleiding

Page 86: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 86

Page 87: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 87

7.1Detailed Instructions

7.1.1 Step 1: Download and Extract

Download and unzip the WordPress package from http://wordpress.org/download/.

If you will be uploading WordPress to a remote web server, download the WordPress

package to your computer with a web browser and unzip the package.

If you will be using FTP, skip to the next step - uploading files is covered later.

If you have shell access to your web server, and are comfortable using console-based tools,

you may wish to download WordPress directly to your web server using wget (or lynx or

another console-based web browser) if you want to avoid FTPing:

wget http://wordpress.org/latest.tar.gz

Then unzip the package using: tar -xzvf latest.tar.gz

The WordPress package will extract into a folder called wordpress in the same directory

that you downloadedlatest.tar.gz.

7.1.2 Step 2: Create the Database and a User

If you are using a hosting provider, you may already have a WordPress database set up for

you, or there may be an automated setup solution to do so. Check your hosting provider's

support pages or your control panel for clues about whether or not you'll need to create one

manually.

If you determine that you'll need to create one manually, follow the instructions for accessing

phpMyAdmin on various servers, or follow the instructions for Using cPanel or Using

phpMyAdmin below.

If you are installing WordPress on your own web server, follow the Using

phpMyAdmin or Using the MySQL Client instructions below to create your WordPress

username and database.

If you have only one database and it is already in use, you can install WordPress in it - just

make sure to have a distinctive prefix for your tables to avoid over-writing any existing

database table.

Page 88: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 88

7.1.2.1 Using cPanel

If your hosting provider supplies the cPanel hosting control panel, you may follow these simple

instructions to create your WordPress username and database. A more complete set of instructions for

using cPanel to create the database and user can be found in Using cPanel.

1. Log in to your cPanel.

2. Click MySQL Database Wizard icon under the Databases section.

3. In Step 1. Create a Database enter the database name and click Next Step.

4. In Step 2. Create Database Users enter the database user name and the password. Make sure to

use a strong password. Click Create User.

5. In Step 3. Add User to Database click the All Privileges checkbox and click Next Step.

6. In Step 4. Complete the task note the database name and user. Write down the values

of hostname, username, databasename, and the password you chose. (Note that hostname will

usually be localhost.)

7.1.2.2 Using Lunarpages.com's custom cPanel (LPCP)

Lunarpages has developed their own version of cPanel.

1. Log in to your account.

2. Go to Control Panel.

3. Click on the button on the left panel labeled 'Go to LPCP'.

4. Go to MySQL Manager.

5. Add the user name and database name but leave the host name as the default IP number.

6. Note the IP address of the database on the right which is different from the default IP number of

the host indicated in the above step.

7. When modifying the WP-CONFIG.PHP file, use the DB IP number, not 'LOCALHOST'.

8. When modifying the WP-CONFIG.PHP file, be sure to use the full name of the database and user

name, typically 'accountname_nameyoucreated'.

9. Refer to http://wiki.lunarpages.com/Create_and_Delete_MySQL_Users_in_LPCP for more info.

Page 89: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 89

7.1.2.3 Using phpMyAdmin

If your web server has phpMyAdmin installed, you may follow these instructions to create your

WordPress username and database.

Note: These instructions are written for phpMyAdmin 2.6.0; the phpMyAdmin user interface can vary

slightly between versions.

1. If a database relating to WordPress does not already exist in the Database dropdown on the left,

create one:

1. Choose a name for your WordPress database ('wordpress' or 'blog' are good), enter it in

the Create new database field, and click Create.

2. Click the Home icon in the upper left to return to the main page, then click Privileges. If a user

relating to WordPress does not already exist in the list of users, create one:

1. Click Add a new User.

2. Choose a username for WordPress ('wordpress' is good) and enter it in the User name field.

(Be sure Use text field: is selected from the dropdown.)

3. Choose a difficult-to-guess password (ideally containing a combination of upper- and lower-

case letters, numbers, and symbols), and enter it in the Password field. (Be sure Use text

field: is selected from the dropdown.) Re-enter the password in the Re-type field.

4. Write down the username and password you chose.

5. Leave all options under Global privileges at their defaults.

6. Click Go.

3. Return to the Privileges screen and click the Check privileges icon on the user you've just

created for WordPress. In the Database-specific privileges section, select the database you've

just created for WordPress under the Add privileges to the following database dropdown. The

page will refresh with privileges for that database. Click Check All to select all privileges, and

click Go.

4. On the resulting page, make note of the host name listed after Server: at the top of the page. (This

will usually be localhost.)

Page 90: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 90

7.1.2.4 Using the MySQL Client

You can create MySQL users and databases quickly and easily by running mysql from the shell. The

syntax is shown below and the dollar sign is the command prompt:

$ mysql -u adminusername -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 5340 to server version: 3.23.54

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> CREATE DATABASE databasename;

Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON databasename.* TO "wordpressusername"@"hostname"

-> IDENTIFIED BY "password";

Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES;

Query OK, 0 rows affected (0.01 sec)

mysql> EXIT

Bye

$

Page 91: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 91

The example shows:

that root is also the adminusername. It is a safer practice to choose a so-called "mortal" account as

your mysql admin, so that you are not entering the command "mysql" as the root user on your

system. (Any time you can avoid doing work as root you decrease your chance of being exploited).

The name you use depends on the name you assigned as the database administrator using

mysqladmin.

wordpress or blog are good values for databasename.

wordpress is a good value for wordpressusername but you should realize that, since it is used here,

the entire world will know it too.

hostname will usually be localhost. If you don't know what this value should be, check with your

system administrator if you are not the admin for your Wordpress host. If you are the system admin,

consider using a non-root account to administer your database.

password should be a difficult-to-guess password, ideally containing a combination of upper- and

lower-case letters, numbers, and symbols. One good way of avoiding the use of a word found in a

dictionary is to use the first letter of each word in a phrase that you find easy to remember.

If you need to write these values somewhere, avoid writing them in the system that contains the things

protected by them. You need to remember the value used

for databasename, wordpressusername, hostname, and password. Of course, since they are already

in (or will be shortly) your wp-config.php file, there is no need to put them somewhere else, too.

7.1.2.5 Using DirectAdmin

a. Regular "User" of a single-site webhosting account logs in normally. Then click "MySQL

Management." (If this is not readily visible, perhaps your host needs to modify your "package" to

activate MySQL.) Then follow part "c" below.

b. "Reseller" accounts or "Admin" accounts may need to click "User Level." They also must first log-in

as "Reseller" if the relevant domain is a Reseller's primary domain... or log-in as a "User" if the domain

is not a Reseller's primary domain. If a Reseller's primary domain, then when logged-in as Reseller,

you simply click "User Level." However if the relevant domain is not the Reseller's primary domain,

then you must log-in as the relevant User. Then click "MySQL Management." (If not readily visible,

perhaps you need to return to the Reseller or Admin level, and modify the "Manage user package" or

"Manage Reseller package" to enable MySQL.)

c. In "MySQL Management," click on the small words: "Create new database." Here you are asked to

submit two suffixes for the database and its username. For maximum security, use two different sets

of 4-6 random characters. Then the password field has a "Random" button that generates an 8-

character password. You may also add more characters to the password for maximum security.

Page 92: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 92

"Create." The next screen will summarize the database, username, password and hostname. Be sure

to copy and paste these into a text file for future reference.

7.1.3 Step 3: Set up wp-config.php

You can either create and edit the wp-config.php file yourself, or you can skip this step and let

WordPress try to do this itself when you run the installation script (step 5) (you'll still need to tell

WordPress your database information).

(For more extensive details, and step by step instructions for creating the configuration file and your

secret key for password security, please see Editing wp-config.php.)

Return to where you extracted the WordPress package in Step 1, rename the file wp-config-

sample.php to wp-config.php, and open it in a text editor.

Enter your database information under the section labeled

// ** MySQL settings - You can get this info from your web host ** //

DB_NAME

The name of the database you created for WordPress in Step 2 .

DB_USER

The username you created for WordPress in Step 2.

DB_PASSWORD

The password you chose for the WordPress username in Step 2.

DB_HOST

The hostname you determined in Step 2 (usually localhost, but not always; see some possible

DB_HOST values). If a port, socket, or pipe is necessary, append a colon (:) and then the

relevant information to the hostname.

DB_CHARSET

The database character set, normally should not be changed (see Editing wp-config.php).

DB_COLLATE

The database collation should normally be left blank (see Editing wp-config.php).

Enter your secret key values under the section labeled

Page 93: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 93

* Authentication Unique Keys.

Save the wp-config.php file.

For information on enabling SSL in WordPress 2.6, see SSL and Cookies in WordPress 2.6.

7.1.4 Step 4: Upload the files

Now you will need to decide where on your domain you'd like your WordPress-powered site to appear:

In the root directory of your web site. (For example, http://example.com/)

In a subdirectory of your web site. (For example, http://example.com/blog/)

Note: The location of your root web directory in the filesystem on your web server will vary across

hosting providers and operating systems. Check with your hosting provider or system administrator if

you do not know where this is.

7.1.4.1 In the Root Directory

If you need to upload your files to your web server, use an FTP client to upload all the contents of

the WordPress directory (but not the directory itself) into the root directory of your web site.

If your files are already on your web server, and you are using shell access to install WordPress,

move all of the contents of the WordPress directory (but not the directory itself) into the root

directory of your web site.

7.1.4.2 In a Subdirectory

If you need to upload your files to your web server, rename the WordPress directory to your desired

name, then use an FTP client to upload the directory to your desired location within the root

directory of your web site.

If your files are already on your web server, and you are using shell access to install WordPress,

move the WordPress directory to your desired location within the root directory of your web site,

and rename the directory to your desired name.

Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.

Page 94: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 94

7.1.5 Step 5: Run the Install Script

Point a web browser to start the installation script.

If you placed the WordPress files in the root directory, you should visit: http://example.com/wp-

admin/install.php

If you placed the WordPress files in a subdirectory called blog, for example, you should

visit:http://example.com/blog/wp-admin/install.php

7.1.5.1 Setup configuration file

If WordPress can't find the wp-config.php file, it will tell you and offer to try to create and edit the file

itself. (You can do also do this directly by loading wp-admin/setup-config.php in your web browser.)

WordPress will ask you the database details and write them to a new wp-config.php file. If this works,

you can go ahead with the installation; otherwise, go back and create, edit, and upload the wp-

config.php file yourself (step 3).

Enter database information

Page 95: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 95

7.1.5.2 Finishing installation

The following screenshots show how the installation progresses. Notice in Entering the details screen,

you enter your site title, your desired user name, your choice of a password (twice) and your e-mail

address. Also displayed is a check-box asking if you would like your blog to appear in search engines

like Google and Technorati. Leave the box checked if you would like your blog to be visible to

everyone, including search engines, and uncheck the box if you want to block search engines, but

allow normal visitors. Note all this information can be changed later in your Administration Panels.

Version 3.0

Enter site, login, and email

All done!

Page 96: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 96

Page 97: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 97

8. WordPress Plug – In

Page 98: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 98

Page 99: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 99

Dit hoofdstuk wordt als extra download gratis aangeboden aan lezers van het boek Kickstart

WordPress door Robbert Ravensbergen, in 2009 verschenen bij Pearson Education, ISBN

9789043019538. Het is mede gebaseerd op de Engelse tutorials van Themetation.com.

Je kunt het theme en de bronbestanden die horen bij dit hoofdstuk downloaden op

www.robbertoverwordpress.nl en op www.pearsoneducation.nl/downloads.asp

In dit hoofdstuk zal ik de basisbeginselen van WordPress-themeontwerp uitleggen. Het voert

hier te ver om ook alle benodigde kennis van Photoshop, (X)HTML, CSS en PHP te

bespreken. Enige basiskennis over deze onderwerpen is absoluut een voordeel wanneer je

zelf gaat ontwerpen voor WordPress. Ik kan de volgende boeken, verschenen bij Pearson

Education, aanbevelen wanneer je hier meer over wilt weten:

HTML en CSS, 2e editie – de Basis door Andree Hollander

Het beste van CSS door Ward van der Put

Snel op weg HTML, XHTML en CSS door Elisabeth Castro.

PHP5 en MySql – de Basis door Ghica van Emde Boas

Zelfs wanneer ik de basiskennis van de hierboven genoemde onderwerpen oversla is er nog

genoeg te leren en zal ik hier niet alles kunnen behandelen. Over het maken van WordPress

themes alleen al zijn (Engelstalige) boeken verschenen. Ik zal me hier daarom tot de kern

moeten beperken. Je zult echter ook merken dat wanneer je al wat ervaring hebt met het

maken van websites en/of het programmeren in PHP dat een basistheme voor WordPress

niet heel erg ingewikkeld hoeft te zijn. En nu snel aan de slag!

9 Maak zelf een

WordPress theme

Page 100: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 100

8.1 Tools

Ik herhaal hier nog even wat je nodig hebt om serieus aan de slag te gaan met

themeontwerp of websiteontwikkeling in het algemeen.

Een Ftp-programma

Een goede editor zoals UltraEdit of Dreamweaver

Photoshop en/of Illustrator of vergelijkbare beeldbewerkingssoftware. Je zult echter zien dat

negen van de tien tutorials die je op internet tegenkomt gebaseerd zijn op het gebruik van

Photoshop.

Een lokale testomgeving. Gebruik bijvoorbeeld Xampp.

Gebruik FireFox en installeer de Webdeveloper toolbar-plugin, eventueel aangevuld met

Firebug.

Een ontwerp gemaakt in bijvoorbeeld Photoshop

Doorzettingsvermogen. Het maken van themes is een tijdrovend karwei, zeker wanneer je nog

maar weinig ervaring hebt met het zelf ontwerpen en coderen van websites.

8.2 Om te beginnen

Een WordPresstheme kent een vrij eenvoudige structuur. Het bevat minimaal de volgende

bestanden:

index.php

style.css

header.php

footer.php

sidebar.php

Index.php is in feite het hoofdbestand. Style.css bevat alle CSS-elementen waarmee

bepaald wordt hoe je website er exact uit komt te zien. De meeste WordPress-themes

bestaan echter uit meer dan deze vier bestanden. Dat komt doordat het voor de ontwikkelaar

eenvoudiger is een structuur aan te brengen en bijvoorbeeld de WordPress-archieffunctie

aan te roepen in een bestand dat je archives.php noemt. Je kunt in feite zo veel bestanden

gebruiken als je maar wilt. Voor de werking van het theme is dat echter niet noodzakelijk.

Het aantal bestanden zegt dan ook niets over de kwaliteit van het theme.

Voordat we enthousiast aan de slag gaan met het intikken van PHP- en CSS-code: hoe

moet het theme er eigenlijk uit gaan zien? Inderdaad, we hebben een ontwerp nodig. Maar

dat had je zelf vast ook al bedacht. Ik ga me in dit hoofdstuk niet helemaal richten op het

maken van een websiteontwerp met Photoshop. Daar zul je zelf mee aan de slag moeten! Ik

heb wel enkele (Engelstalige) websites voor je, waarin stap voor stap wordt uitgelegd hoe je

dit aanpakt:

Six Revisions: http://sixrevisions.com/tutorials/

Page 101: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 101

Grafpedia: www.grafpedia.com/tutorials/create-a-wordpress-interface-in-photoshop

HV Designs: http://hv-designs.co.uk/2009/07/02/wordpress-layout-5/

.1 Het ontwerp uit de tutorial van Six Revisions.

Kies bij het maken van het ontwerp van je theme voor één van de volgende basis lay-outs.

Page 102: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 102

Natuurlijk kun je het ingewikkelder maken en voor vier kolommen kiezen, voor een tweede

header of footer, enzovoort. In feite kan vrijwel elk ontwerp omgezet worden in een

WordPress-theme. Maar je maakt het jezelf makkelijker als je begint met een dergelijk

ontwerp. Een ontwerp dat binnen deze gebruikelijke methode valt zal ook eenvoudiger om

kunnen gaan met widgets en plugins. Omdat hier de ruimte ontbreekt om alle mogelijkheden

die er zijn te bespreken, kies ik voor een eenvoudige lay-out met twee kolommen. Ook de

Cleanrtemplate die gebruikt wordt op www.robbertoverwordpress.nl gebruikt dezelfde

structuur.

Mijn Photoshop-ontwerp ziet er als volgt uit:

Afbeelding 9 .2

Page 103: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 103

Merk op dat dit ontwerp bestaat uit een header, een hoofdkolom (main), een rechter zijkolom

(sidebar) en een footer. Maar er is nog een extraatje: we hebben een ruimte gemaakt om

een bepaald artikel meer aandacht te geven. De Engelse term hiervoor is featured post.

.4

Voordat je begint met het ontwerpen van je eigen theme in Photoshop, volgen hier eerst nog

een aantal tips. Daarbij geldt zeker: oefening baart kunst. Kijk hoe andere ontwerpen in

elkaar zitten en houd rekening met de volgende punten.

Zorg voor voldoende ‘witruimte’. Probeer niet te veel informatie op één pagina te proppen.

Afbeelding 9 .3

Page 104: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 104

Wees zuinig met het gebruik van kleuren en fonts. Gebruik liever één of twee kleuren in

verschillende tinten, dat zorgt voor rust. Kijk bijvoorbeeld naar de kleuren in je belangrijkste

foto of je logo en borduur daar op voort. Hetzelfde geldt voor het gebruik van lettertypes.

Gebruik je te veel verschillende types en/ of stijlen, dan wordt het al snel een bonte kermis.

Maak gebruik van een subtiel verloop van kleuren (ook wel gradients genoemd) en gebruik

schaduwen om een diepte-effect te creëren.

Gebruik een basisgrid zoals je bijvoorbeeld kunt vinden op http://960.gs Hier vind je

voorbeelden van een indeling van je website in kolommen en kun je direct de bijbehorende

voorbeeldbestanden voor Photoshop, inclusief de benodigde CSS, downloaden. Het

gebruiken van een grid is geen must, maar het kan je wel helpen om een evenwichtig

ontwerp voor je site te maken. Zeker in het begin is zo’n hulpmiddel meer dan welkom.

8.3 Ontwerp opknippen

Je uiteindelijke ontwerp ga je nu opknippen in stukjes. De Engelse term hiervoor is slice and

dice. Je doet dat door goed naar je ontwerp te kijken en alle losse elementen die je nodig

hebt te kopiëren naar nieuwe bestanden en vervolgens op te slaan voor het web in gif-, png-

of jpg-formaat. Voor sommige elementen, bijvoorbeeld buttons, ligt erg voor de hand hoe je

dat moet doen. Maar voor bijvoorbeeld de achtergrond geldt dat je goed moet kijken welke

stukjes je nodig hebt. Laten we eenvoudig beginnen met een button:

Er zijn wat verschillende methoden om het ontwerp met behulp van Photoshop op te

knippen. Zelf kies ik er echter altijd voor om een deel te selecteren en (verenigd) te kopiëren

naar een nieuw document.

Merk op dat je steeds ver moet inzoomen om dit goed te kunnen doen. Ik kopieer de button

naar een nieuw document, kies dan Opslaan voor het web (Save for the web) en sla het

bestand op in het formaat png-24.

Voor het vastleggen van de achtergrondafbeeldingen moet ik goed kijken naar de opbouw

van mijn Photoshop-ontwerp en de juiste selectie maken. Je slaat vervolgens een hele

Afbeelding 9 .4

Page 105: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 105

smalle afbeelding (bij voorkeur 1 pixel breed) op, die we straks met behulp van CSS zullen

herhalen.

Ik sla het bestand op voor het web en geef als naam header-background.jpg. Dit doe je ook

voor de achtergrond van de hoofdkolom en de footer. Verder hebben we de afbeeldingen

voor de RSS-feed en het Twitter-icoon nog nodig.

Ook moeten we natuurlijk het logo niet vergeten. Doordat we gebruikmaken van een

nietstandaard font is het noodzakelijk het logo als afbeelding op te slaan. Aan het eind van

dit hoofdstuk leg ik nog uit hoe je je logo wijzigt, zodat je je eigen websitenaam hier kunt

plaatsen.

Als laatste slaan we de achtergrond voor het menu op. Hier is het even opletten! Doordat het

menu een tab-structuur heeft met links en rechts afgeronde hoeken, heb ik in totaal drie

Afbeelding 9 .6

Page 106: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 106

afbeeldingen nodig. Één voor de linkerzijde, één voor de rechterzijde en een afbeelding van

1 pixel breed voor het middelste deel van de tab.

Afbeelding 9 .7

Page 107: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 107

8.4 Ontwerp naar code omzetten

Nu je de eerste stappen genomen hebt kun je het ontwerp gaan omzetten naar HTML- en

CSS-code.nteresseerd bent in een meer uitgebreide beschrijving van het maken van een

WordPress theme, kijk dan eens naar het boek WordPress Theme Design door Tessa

Blakeley Silver (uitgegeven door Packt Publishing en alleen in het Engels

beschikbaar). Daarin wordt ook dieper ingegaan op het omzetten van je ontwerp met

‘slicing and dicing’.

Maak ergens in je map met documenten en data een submap aan waarin je alle bestanden

voor het theme kunt plaatsen. Geef de map de naam van je theme. Ik noem mijn theme

‘SimpleAndBasic’. Binnen die map begin je met het aanmaken van een map ‘images’. Ook

maak je met je editor twee lege bestanden aan: index.html en style.css. De structuur ziet er

dan als volgt uit:

Afbeelding 9.8

Let op: je hoeft niet alle code letterlijk over te typen. Dat zou alleen maar erg

foutgevoelig zijn. Vanaf de pdf kun je kopiëren en plakken. Daarnaast is het natuurlijk

ook mogelijk om de code vanuit het kant-en-klare theme over te nemen in je eigen

bestanden. Of gebruik het bestaande theme as basis voor de structuur en wijzig

alleen de opmaak door de styling aan te passen door middel van het CSS-bestand!

Ik begin met wat basisinformatie in het bestand style.css op te nemen:

/*

Theme Name: SimpleAndBasic

Page 108: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 108

Theme URI: http://www.robbertoverwordpress.nl

Description: Ontwerp gemaakt voor KickStart WordPress

Author: Robbert Ravensbergen

Version: 0.1

Tags: simple, two columns, dark

*/

Dit stukje tekst doet in feite niets anders dan beschrijven waar het bestand voor is. Het staat

tussen de commentaartekens (/*), waardoor het verder geen functie heeft. Natuurlijk neem jij

hier je eigen gegevens op. Sla het bestand even op voor je verder gaat!

Open nu het bestand index.html en voeg daar de code in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xHTML1/DTD/xHTML1-transitional.dtd">

<HTML xmlns="http://www.w3.org/1999/xHTML">

<head>

<title>WordPress theme</title>

<link rel="stylesheet" href="style.css" type="text/CSS" media="screen" />

</head>

<body>

</body>

</HTML>

De code die we nodig hebben om straks de juiste onderdelen op de juiste plaats te tonen

komt in het <body> gedeelte terecht.

Plaats direct onder de <body>-regel de volgende code:

<!--wrapper-->

<div id="wrapper">

<!--header-->

<div id="header">

<div id="logo"><h1><!—Hier komt het logo--></h1></div>

<div id="menu">

<ul>

<li class="page_item"><a href="#">Products</a></li>

<li class="page_item"><a href="#">Services</a></li>

<li class="page_item"><a href="#">About</a></li>

</ul>

</div><!--menu-end-->

</div><!--header-end-->

<!--content-->

<div id="content">

<!--main-col--><div id="main-col"></div><!--main-col-end-->

Page 109: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 109

<!--sidebar--><div id="sidebar"></div><!—sidebar-end-->

</div><!--content-end-->

</div><!--wrapper-end-->

<div id="footer"></div>

Dit is de basisstructuur voor je WordPress-theme! Wat gebeurt hier? Met behulp van de div-

codes bouwen we een structuur van onderdelen. Merk bijvoorbeeld op dat de delen (‘de

divs’) voor het logo en het menu onderdeel zijn van de div ‘header’. Daarnaast bevat de div

‘content’ de onderdelen ‘main-col’ (de hoofdkolom links) en de ‘sidebar’ (die we rechts gaan

plaatsen). Bovenstaande code bepaalt alleen de structuur, het zegt nog helemaal niets over

welke informatie er in die structuur getoond wordt en hoe dat eruit komt te zien.

Overigens, de structuur is nog niet helemaal compleet zo, er ontbreken nog wat elementen.

We hebben nu al wel een hoofdkolom gemaakt, maar voor de inhoud ervan moeten we ook

nog ruimte reserveren.

Vervang de code in het gedeelte voor de hoofdkolom nu als volgt:

<!--main-col-->

<div id="main-col">

<!--featured-post--><div id="featured-post"><!--featured post hier --></ div><!--featured-post-end-->

<!--post--><div class="post"><!--blog posts komen hier--></div><!--post-end-->

</div><!--main-col-end-->

Hiermee plaatsen we in de hoofdkolom de ‘featured post’, gevolgd door een div waar straks

de reguliere WordPress-berichten getoond moeten worden. Daarna richten we ons op de

rechterkolom, de sidebar. Vervang de code van het sidebargedeelte door het volgende:

<div id="sidebar">

<!--feed--> <div id="feed"></div><!--feed-end-->

<!--search--><div id="searchform"></div><!--search-end-->

<!—sidebar kolommen -->

<div id="sidebar-columns">

<!--sidebar1--><div id="sidebar1"></div><!--sidebar1-end--> <!--sidebar2--><div

id="sidebar2"></div><!--sidebar2-end-->

</div><!—sidebar-columns-end--> </div><!--sidebar-end-->

Page 110: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 110

In de rechterkolom beginnen we met de rss- en Twitter-buttons, die plaatsen we in de ‘feed’

div. Daarna komt het zoekformulier. Vervolgens wordt de kolom in twee delen gesplitst, die

we gaan gebruiken voor het plaatsen van WordPress-widgets.

8.5 CSS code

De basisstructuur is hiermee vastgelegd. Nu moeten we gaan beschrijven hoe alle

elementen eruit komen te zien. Welke kleur hebben ze, hoe breed zijn ze, enzovoort. Dat

doe je in het bestand style.css. Open dat bestand en voeg de volgende code toe.

#wrapper {

width: 960px; margin: 0 auto;

color: #ffffff;

}

#header {

width: 960px; height: 114px; float: left;

background: url(images/header-background.jpg) repeat-x top left; }

#content {

width: 960px; float: left;

background: #707070 url(images/background.jpg) repeat-x top left; }

#content #main-col { width: 600px; float: left;

position: relative; padding-right: 30px;

}

#content #sidebar {

width: 330px; margin-top: 20px; float:

left; position: relative;

}

#content #sidebar #sidebar-columns {

width: 330px; float: left; position:

relative;

}

#footer {

width: 100%; float: left;

background: url(images/footer-background.jpg) repeat-x top left; height: 84px;

padding-top: 40px;

}

Deze code bepaalt voornamelijk de breedte van de verschillende onderdelen. Merk op dat

het belangrijk is om bij de header, de footer en de content de juiste afbeeldingsnamen te

Page 111: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 111

gebruiken. Pas die dus aan als je zelf met andere afbeeldingen werkt. Dat geldt ook voor

eventuele kleurcodes, zoals de #707070 in ons content-deel. Gebruik je andere kleuren dan

moet je hier de juiste kleurcodes gebruiken.

Hierna ga ik verder met de styling voor het menu. Gebruik de volgende code, waarbij je ook

nu weer je eigen bestandsnamen en kleurcodes gebruikt. Het menu wordt aan de

rechterzijde van het scherm uitgelijnd.

/*--menu--*/

#header #menu {

float: right; width: 960px;

margin-top: 5px;

}

#header #menu ul {

list-style: none; float: right; text-

align: right;

}

#header #menu ul li { /* page_item is wordpress default class for page list */ float: right; height: 33px;

}

#header #menu ul li a {

padding: 4px 8px; display: block;

margin: 0 7px 0 0; float: left;

background: url(images/menu-middle.png) repeat-x top left; text-decoration: none;

font: 900 14px Arial, Helvetica, sans-serif;

}

#header #menu ul li a:hover { color: #FFFFFF;

background: url(images/menu-middle-hover.png) repeat-x top left; }

#header #menu ul li.current_page_item a, #header #menu ul li.current-cat a {

/* current_page_item is wordpress default class for active page list */ color: #89A23C;

}

Dit wordt al wat ingewikkelder. Merk op dat een menu bestaat uit een ongenummerde lijst of

ul (unnumbered list) en elk menu-item daarin als een li wordt weergegeven. De codes

current_page_item en current-cat worden gebruikt om het actieve menu-item te accentueren.

Ten opzichte van het oorspronkelijke ontwerp heb ik het menu wat vereenvoudigd. De tabs

die ik daar gebruikte hadden afgeronde hoeken. Nu is het niet heel erg ingewikkeld om dat

Page 112: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 112

te bouwen, maar elke extra levert meer code op. Omwille van de overzichtelijkheid heb ik het

hier daarom weggelaten.

We coderen ook het zoekformulier hier nog even:

/*--search--*/ #searchform {

width: 330px; float: left;

background: url(images/search.jpg) no-repeat top left; height: 48px;

margin-bottom: 20px;

}

#searchform form { float: left;

width: 310px; margin: 10px; display:

inline;

}

#searchform form input#s {

width: 270px;

background: url(images/form.png) no-repeat top left; height: 20px;

border: 0; float: left; margin-right: 10px; padding: 3px 0 0 7px;

color: #666;

}

#searchform form input#searchsubmit {

width: 20px;

background: url(images/search.png) no-repeat center left; height: 24px;

border: 0;

}

Maar natuurlijk zijn we er hier nog niet mee. In feite hebben we nu alleen de CSS-code voor

de lay-out, het menu en het zoekformulier geschreven. Er is nog veel meer nodig. Denk

bijvoorbeeld aan de styling van de rest van de sidebar, het plaatsen van het logo, de sectie

voor reacties, enzovoort. Het voert hier te ver om alle CSS-code letterlijk af te drukken en te

behandelen. Ik raad je echter aan om het CSS-bestand dat bij het theme zit dat je kunt

downloaden uitgebreid te bestuderen. In combinatie met het gebruik van de webdeveloper-

toolbar moet je in staat zijn om te bepalen welke code waarvoor gebruikt wordt. Aan het

einde van dit hoofdstuk laat ik nog een voorbeeld zien tijdens het vervangen van het logo.

We hebben nu een index.html en style.css die aan elkaar gekoppeld zijn. Open je index.html

in je browser dan zou je ongeveer zoiets moeten zien:

Page 113: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 113

Afbeelding 9.9

Dat lijkt er nog niet echt op! Dat komt deels doordat nog niet alle CSS-code klaar is, maar

ook doordat we vrijwel geen inhoud tonen. Er staan enkele tijdelijke teksten die ik in de

HTMLcode heb opgenomen, maar verder mis je vooral ‘hoogte’ om een goed beeld te

krijgen. Maar ook met het deel dat we tot nu toe gaan hebben zie je dat we op de goede weg

zijn! Maak het CSS-bestand verder af naar je eigen ontwerp en gebruik de style.css van het

theme uit dit voorbeeld eventueel als referentie.

Page 114: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 114

8.6 Van HTML naar WordPress PHP-code

De volgende stap is het omzetten van je HTML/CSS-code naar een WordPress-theme.

Eindelijk! Daarbij hoef je aan de CSS-code niet veel te doen. Maar de index.html wordt

volledig vervangen door een veelvoud aan PHP-bestanden. We hebben de volgende lijst

met bestanden nodig voor ons theme:

index.php Het hoofdbestand waarmee het theme gestart wordt.

header.php Bevat alle code voor de header.

featured-post.php De code voor het artikel in de spotlight.

sidebar.php De code voor de sidebar aan de rechterzijde.

footer.php De code voor de voettekst.

Deze vormen de basis, maar we hebben nog meer bestanden nodig. Overigens is dat verder

opsplitsen niet in alle gevallen noodzakelijk, maar het houdt het theme wel overzichtelijk:

sidebar-left.php De code voor de linker sidebar.

sidebar-right.php De code voor de rechter sidebar.

searchform.php Bevat de code om te kunnen zoeken. search.php Bevat de code voor de resultaten van de zoekactie.

page.php Code voor het tonen van de WordPress-pagina’s.

single.php Toont één artikel volledig.

comments.php Hoe wordt het commentaar getoond bij je bericht?

functions.php Bevat enkele algemene PHP-functies voor het

theme.

Daarmee zijn we er nog steeds niet, maar hiermee heb je een groot gedeelte van je theme

toch wel in kaart gebracht. Je krijgt met behulp van de afbeelding een idee voor welk

gedeelte van je website de verschillende bestanden gebruikt worden.

Page 115: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 115

Laten we gaan kijken hoe de inhoud van deze bestanden eruit komt te zien. We beginnen

met de index.php.

<?PHP get_header(); ?>

<!--content-->

<div id="content">

<!--main-col-->

<div id="main-col">

<?PHP include(‘featured-post.php’); ?>

<!--post - categorie 3 nemen we niet mee -->

<?PHP query_posts($query_string.’&cat=-3&&order=DESC’);

while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?PHP the_ID(); ?>">

<div class="post-info">

<?PHP echo get_avatar( get_the_author_id(), ‘85’, ‘’); ?>

<em><?PHP the_time(‘F jS, Y’) ?></em>

<span class="post-tag"><?PHP the_tags(‘’, ‘ . ‘, ‘’); ?></span>

</div>

<div class="entry">

<div class="cat">Categorieën: <?PHP the_category(‘, ‘); ?></div>

<h2><a href="<?PHP the_permalink() ?>" rel="bookmark" title="Permanent

Link to <?PHP the_title_attribute(); ?>"><?PHP the_title(); ?></a></h2>

Afbeelding 9 .10

Page 116: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 116

<?PHP the_content(‘’); ?>

</div>

<p class="metadata"><?PHP comments_popup_link(‘Geen reacties’, ‘1

Reactie’, ‘% Reacties’); ?> . <a href="<?PHP the_permalink() ?>#more-<?PHP the_

ID(); ?>">lees meer</a></p>

</div><!--post-end-->

<?PHP endwhile; ?>

<div class="navigation">

<div class="alignleft"><?PHP posts_nav_link(‘’,’’,’&laquo; Previous Entries’) ?></div>

<div class="alignright"><?PHP posts_nav_link(‘’,’Next Entries &raquo;’,’’)

?></div>

</div>

</div><!--main-col-end-->

<?PHP get_sidebar(); ?>

</div><!--content-end-->

</div><!--wrapper-end-->

<?PHP get_footer(); ?>

Wat gebeurt hier nu precies? Allereerst wordt met de code ‘get_header()’ de header.php

aangeroepen. Daarna volgt de div-structuur voor de hoofdkolom en starten we de featured-

post. php. Daarna wordt met de functie ‘query_posts()’ de berichten opgehaald. Hierbij

nemen we berichten in categorie drie niet mee. Merk op dat dit afhankelijk is van de wijze

waarop je WordPress hebt ingericht. Een artikel dat je wilt tonen als ‘featured post’ plaatsen

we dus in een categorie met id nummer drie. Maar dat nummer kan natuurlijk bij elke

WordPress installatie verschillen.

In het vervolg van de code gaan we met een ‘while-loop’ één voor één de berichten door en

plaatsen we de gewenste informatie voor elk bericht.

Na de code voor de hoofdkolom volgt nog het aanroepen van de sidebar.php en de footer.

php. En daarmee is de structuur voor je theme klaar. Maar ook hier hebben we nog veel

meer code nodig om alles in elkaar te passen. Als voorbeeld toon ik de inhoud van de

header.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

Page 117: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 117

TR/xHTML1/DTD/xHTML1-transitional.dtd">

<HTML xmlns="http://www.w3.org/1999/xHTML" <?PHP language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?PHP bloginfo(‘HTML_type’); ?>; charset=<?PHP bloginfo(‘charset’);

?>" />

<title><?PHP wp_title(‘&laquo;’, true, ‘right’); ?> <?PHP bloginfo(‘name’); ?></ title>

<link rel="stylesheet" href="<?PHP bloginfo(‘stylesheet_url’); ?>" type="text/ CSS" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?PHP bloginfo(‘name’);

?> RSS Feed" href="<?PHP bloginfo(‘rss2_url’); ?>" />

<link rel="alternate" type="application/atom+xml" title="<?PHP bloginfo(‘name’);

?> Atom Feed" href="<?PHP bloginfo(‘atom_url’); ?>" />

<link rel="pingback" href="<?PHP bloginfo(‘pingback_url’); ?>" />

<?PHP if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

<?PHP wp_head(); ?>

</head>

<body>

<!--wrapper-->

<div id="wrapper">

<!--header-->

<div id="header">

<!--logo-->

<div id="logo"><h1><a href="<?PHP echo get_option(‘home’); ?>" title="<?PHP bloginfo(‘description’);

?>"><?PHP bloginfo(‘name’); ?></a></h1></ div><!--logo-end-->

<!--page-navigation-->

<div id="menu">

<!-- <em><?PHP bloginfo(‘description’); ?></em> -->

<ul>

<?PHP wp_list_pages(‘title_li=&sort_column=menu_ order&depth=2’); ?>

<?PHP wp_list_categories(‘sort_column=name&sort_order=a

sc&style=list&children=true&hierarchical=true&title_li=0’); ?>

</ul>

</div><!--page-navigation-->

</div><!--header-end-->

Doordat de header.php als eerste wordt aangeroepen vanuit de index.php beginnen we hier

met de basis HTML-informatie en het laden van de stylesheet. Daarna volgen de divs voor

de wrapper, de header, het logo en het menu. Het menu wordt gemaakt door een combinatie

van WordPress pagina’s en categorieën. Hiervoor gebruik je de functies wp_list_pages en

Page 118: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 118

wp_list_categories. De CSS code voor het menu is overigens nog niet ver genoeg

uitgewerkt, waardoor er momenteel maar 1 niveau ondersteund wordt.

Wanneer we kijken naar de code voor de sidebar (inderdaad, in sidebar.php) dan ziet dat er

als volgt uit:

<!--sidebar-->

<div id="sidebar">

<!--feed-->

<div id="feed">

<a href="http://twitter.com/joomblocks" target="_blank" class="twitter">RSS</a>

<a href="<?PHP bloginfo(‘rss2_url’); ?>" class="rss">RSS</a>

</div><!--feed-end-->

<!--search-->

<?PHP include (TEMPLATEPATH . ‘/searchform.php’); ?>

<!--sidebar-->

<div id="sidebar-columns"><h3>Sidebar</h3>

<?PHP include(‘sidebar-left.php’); ?>

<?PHP include(‘sidebar-right.php’); ?>

</div><!--sidebar-columns-end-->

</div><!--sidebar-->

Ik begin met de div ‘feed’ en plaats daarin twee links naar mijn Twitter-account en de RSS

feed. Natuurlijk zou je nog meer links kunnen plaatsen, naar bijvoorbeeld LinkedIn, Hyves,

Facebook etc. De opmaak daarvan moet je natuurlijk dan nog wel even regelen met behulp

van extra CSS-code.

Na de links wordt de code in searchform.php aangeroepen. Hiermee voeg je een zoekfunctie

toe aan je blog. Tenslotte splits ik de sidebar op in een linker- en een rechtergedeelte, waar

ik weer aparte PHP bestanden voor gebruik. De code voor de linker- en rechter-sidebar zien

er vrijwel hetzelfde uit. Links tonen we een lijst met categorieën en rechts de weblinks. Maar

die inhoud wordt alleen getoond als de dynamische sidebar niet actief is. Met andere

woorden: als de widget-plugin niet actief is dan ziet de sidebar er toch nog goed uit door de

statische inhoud die we hier vastleggen. In de praktijk wordt de inhoud natuulijk (dynamisch)

bepaalde door de keuze in widgets die de gebruiker maakt.

<!--sidebar1-->

<div id="sidebar1">

Page 119: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 119

<ul>

<?PHP if ( !function_exists(‘dynamic_sidebar’) || !dynamic_ sidebar(‘sidebar1’) ) : ?>

<?PHP wp_list_categories(‘title_li=<h2>Categorien</h2>’); ?>

<?PHP endif; // end of sidebar1 ?>

</ul>

</div><!--sidebar1-end-->

8.7 Hoe nu verder?

De code die je tot nu toe gezien hebt moet je al op weg geholpen hebben. Bekijk verder de

PHP code van het theme dat ik hier ontwikkeld heb. Maak je de code eigen zodat je weet

wat waar precies gebeurt. En natuurlijk is het toegestaan om dit theme op te pakken en

alleen het uiterlijk te wijzigen door het aanpassen van de CSS-code. Verder zijn er

verschillende (Engelstalige) bronnen waar je terecht kunt voor meer informatie over het

coderen van themes.

Begin bijvoorbeeld op: http://codex.wordpress.org/Theme_Development Ook belangrijk zijn

de zogenaamde WordPress-template tags: http://codex.wordpress.org/Template_Tags Hier

vind je referenties naar alle WordPress-tags die je in je theme kunt aanroepen. Daarnaast

kun je WordPress-functies gebruiken, zoals we deden in de code voor de sidebar hierboven.

Een referentie daarvan vind je op http://codex.wordpress.org/Function_Reference

Als laatste een link naar een eveneens Engelstalig artikel over WordPress-theme-hacks. Een

verzameling tips en trucs om je theme net dat beetje extra te geven:

www.noupe.com/wordpress/mastering-your-wordpress-theme-hacks-and-techniques.html

Het eindresultaat wanneer ik het theme gebruik om mijn site weer te geven:

Afbeelding 9.11

Page 120: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 120

8.8 Het aanpassen van het logo

Wanneer je het theme dat ik hier gemaakt heb gewoon voor je eigen website wilt gebruiken

dan mag dat natuurlijk. Maar in dat geval zul je enkele zaken moeten aanpassen naar je

eigen situatie:

De Twitter link verwijst nu naar http://twitter.com/joomblocks in de sidebar.php.

Gebruik je eigen code of verwijder deze wanneer je geen Twitter gebruikt.

De categorie-id voor de ‘featured post’. Maak zowel een aanpassing in de featured-post.php als

in de index.php.

Het logo met de naam van je website. Gebruik Photoshop en open het bestand

‘simplebasic.psd’. Selecteer de juiste laag en pas de tekst aan. Vervolgens exporteer je het logo

als logo.png. Plaats deze in de map images van je theme en overschrijf het origineel.

Afbeelding 9.12

Page 121: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 121

9. Webhosting en

Filesharing

Page 122: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 122

Page 123: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 123

File sharing kunnen we zien als de weg naar digitaal opgeslagen bestanden zoals

computerprogramma’s, multimedia (audio, video en afbeeldingen), documenten of E-books.

Deze toegang kan verkregen worden door verschillende mogelijkheden. De meest gekende

oplossingen zijn, servers, het World Wide Web hyperlinks, computer netwerk en peer-to-

peer.

9.1 Rapidshare

www.rapidshare.com

Tarieven:

o Standard, 10GB, Gratis

o Standard Plus, 300GB, €8.21/maand

o Premium, 700GB, €16.43/maand

Betalen om sneller te kunnen downloaden

Bestanden delen via een hyperlink

9.2 Uploaded

www.uploaded.net

Tarieven:

o 48 uur, €4.99

o 1 maand, €9.99

o 3 maand, €24.99, 17% korting

o 6 maand, €39.99, 33% korting

o 1 jaar, €69.99, 42% korting

o 2 jaar, €99.99, 59% korting

Betalen om sneller te kunnen downloaden

Remote Upload, bestanden worden op server van Uploaded opgeslagen en

niet op het eigen server gedeelte van de consument.

Bestanden delen via een hyperlink

Page 124: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 124

9.3 iCloud

www.icloud.com

Tarieven:

o Standaard, 5GB, Gratis

o 15GB opslagruimte in iCloud, €16 per jaar

o 25GB opslagruimte in iCloud, €32 per jaar

o 55GB opslagruimte in iCloud, €80 per jaar

Enkel voor Apple gebruikers

Opslagruimte moet vergroot worden via iPhone of iPad

Voornamelijk gebruikt als back-up van het toestel (iPhone/iPad)

9.4 Amazone Cloud Drive

www.amazon.com/clouddrive/

Tarieven:

o Standaard, 5GB opslagruimte, Gratis

o 20GB opslagruimte, €8 per jaar

o 50GB opslagruimte, €20 per jaar

o 100GB opslagruimte, €40 per jaar

o 200GB opslagruimte, €80 per jaar

o 500GB opslagruimte, €200 per jaar

o 1.000GB opslagruimte, €400 per jaar

Toegang via elke computer

Bestanden kunnen niet worden gedeeld via hyperlink

9.5 SkyDrive Microsoft

https://skydrive.live.com/

Tarieven:

o Standaard, 5GB opslagruimte, Gratis

o 20GB opslagruimte, €10 per jaar

o 50GB opslagruimte, €25 per jaar

o 100GB opslagruimte, €50 per jaar

o 200GB opslagruimte, €100 per jaar

Microsoft account is verreist (Hotmail)

Bestanden delen met andere via account

Mogelijkheid om zelf bestanden te maken in browser (Office)

Centraal opslagsysteem voor officedocumenten

9.6 Box

www.box.com

Tarieven:

Page 125: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 125

o Personal, 10GB secure storage met 250MB file upload, Gratis

o Personal, 100GB secure storage met 5GB file upload, €8.00 per maand

o Starter, shared workspace voor het team/project, €4.00 per gebruiker

per maand

Min 1 – Max 10 gebruikers

100GB online storage

2GB file size limit

o Business, content collaboration and user management, €12.00 per

gebruiker per maand

Min 3 gebruikers

1.000GB online storage

5GB file size limit

o Enterprise, secure and scalable content and management, Bellen voor

offerte

Customized

Ongelimiteerd

5GB file size limit

Mobile Sync end Share voor elk tarief

Access Permissions vanaf Starter tarief (File Locking)

Content Security and Management vanaf het Business tarief (Logs)

Platform Integration API vanaf het Business tarief

9.7 UpToBox

www.uptobox.com

Tarieven:

o Premium:

30 dagen, €5.00

65 dagen, €10.00

100 dagen, €15.00

180 dagen, €25.00

365 dagen, €50.00

Niet meteen een account nodig

Veel advertenties

Page 126: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 126

9.8 Bitshare

www.bitshare.com

Tarieven:

o Standard, 1024MB upload size, Gratis

o 30 Dagen Premium, 10.000GB, 2048MB upload size €9.99/maand

o 90 Dagen Premium, 10.000GB, 2048MB upload size €29.99/maand

o 180 Dagen Premium, 10.000GB, 2048MB upload size €53.99/maand

o 365 Dagen Premium, 10.000GB, 2048MB upload size €89.99/maand

o 730 Dagen Premium, 10.000GB, 2048MB upload size €99.99/maand

Betalen om sneller te kunnen downloaden

Bestanden delen via een hyperlink

Beperkte upload size

9.9 Besluit

Na het onderzoeken van deze verschillende mogelijkheden hebben wij ervoor gekozen om

dit niet aan de klant aan te raden. Deze oplossingen zijn aan te raden wanneer er vaak

gedownload moet worden. De klant wil gebruik maken van verschillende gebruikers en dit

bieden deze oplossingen niet aan, ook is vaak de bestandgrootte beperkt wat niet echt

handig is naar de klant toe.

Figuur 44: Info UpToBox

Page 127: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 127

10. Adobe Creative Cloud

Page 128: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 128

Page 129: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 129

10.1 Wat?

De Adobe Creative Cloud wordt gebruikt als online werkplatform voor Adobe Programma’s

en documenten van de gebruikers. Als bedrijf zou dit een gemakkelijke oplossing kunnen zijn

om altijd toegang te hebben tot de programma’s zoals Dreamweaver en Photoshop

aangezien dit hun standaardprogramma’s zijn die ze gebruiken in het bedrijf zelf. Een ander

voordeel is dat niet elk persoon deze programma’s nodig heeft. De programma’s worden

opgeslagen op de cloud die vervolgens kunnen gedownload worden op het gewenste

platform. Met andere woorden, er is slechts één aankoop nodig van het benodigde pakket.

VOORDELEN:

Automatische synchronisatie

Toegang tot de allernieuwste Adobe producten

Steeds de nieuwste gereedschappen

O Lesvideo’s inbegrepen

Delen vanaf elk platform

PRIJS VOOR NIEUWE CREATIVE CLOUD-LEDEN: €69,99 excl. Btw –

maandelijks

Web gebaseerde beheerfuncties waarmee Creative Cloud centraal kan worden aangeschaft, beheerd en geïmplementeerd

Twee één-op-één-expertservicesessies per gebruiker per jaar

100 GB cloudopslag per persoon

Verbintenis op jaarbasis vereist; maandelijkse rekening; teamprijs geldt per gebruiker per maand

10.2 Besluit

Na het platform grondig besproken te hebben met de klant zijn wij tot een besluit gekomen

om dit platform niet te gaan gebruiken in de onderneming. Tot nu toe heeft elke werknemer

in het bedrijf de benodigde documenten waardoor een groot voordeel aan het platform

verdwijnt. Wanneer er echter in de toekomst een nieuwe versie uitgebracht wordt kan het

bedrijf opteren om over te schakelen naar dit platform om zo de kosten lager te kunnen

houden voor de aankoop van deze programma’s

Page 130: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 130

Figuur 45: Adobe Creative Cloud

Page 131: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 131

11. Cisco WebEx Connect

Page 132: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 132

Page 133: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 133

11.1 Collaborate Securely with Anyone

Cisco WebEx wordt voornamelijk gebruikt in de Marketing afdeling. Het platform kunnen we

gaan vergelijken met Skype. Er worden meetings gehouden waar en wanneer de betrokken

partijen kunnen. Hiervoor is het niet noodzakelijk dat deze personen bij elkaar moeten zijn. +

Wanneer u gebruik wilt maken van Cisco WebEx heeft u de mogelijkheid om volgende

onderdelen te gebruiken:

Instant Messaging

Audio

Voice Over IP

Video

Integrated web conferencing

11.2 Besluit

Aangezien het bij dit platform voornamelijk gaat over communicatie, raden wij dit ook af aan

ons bedrijf. Het bedrijf wil een centraal opslagsysteem en Cisco biedt dit niet aan met dit

onderdeel. Naarmate het bedrijf groeit, kan er eventueel in de toekomst gebruik worden

gemaakt van dit onderdeel.

Page 134: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 134

Page 135: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 135

12. Microsoft SharePoint

Page 136: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 136

Page 137: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 137

12.1 Prijs

Figuur 46: Info Microsoft SharePoint

Page 138: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 138

12.2 Opslag

SharePoint Online voor Office 365 voor professionals en kleine bedrijven:

o Totale opslagcapaciteit per pachter: 10gb

o Opslag ruimte per gebruiker: 500mb

o Quotumlimiet voor siteverzamelingen: maximaal 100gb /

siteverzameling

o Uploadlimite documenten: 250mb / doc

SharePoint online voor Office 365 voor middelgrote en grote ondernemingen:

o Totale opslagcapaciteit per pachter: 10gb

o Opslag ruimte per gebruiker: 500mb

o Quotumlimiet voor siteverzamelingen: maximaal 100gb /

siteverzameling

o Uploadlimite documenten: 250mb / doc

12.3 Compatible

Volledige Office Pakket

PDF

Foto en Video

12.4 Sharing en Collaboration

Real-time editing tussen verschillende mensen die samenwerken => Installatie

van Lync vereist!

Instant messaging zonder software

Buitenstaanders kunnen je SharePoint Online documenten raadplegen tegen

betaling

12.5 Versiebeheer

Er bestaat een mogelijkheid om versiebeer in te schakelen. Hierdoor kan de ontwikkeling van

gegevens bijgehouden en beheerd worden. Oudere versies kunnen geraadpleegd en

eventueel hersteld worden.

Page 139: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 139

12.6 Mobiele toegankelijkheid

Windows Mobile

Apple

BlackBerry

Android

Nokia S60

Japanse smartphones: Docomo, SoftBank, KDDI

12.7 Offline access

Wijzigingen aan documenten vanaf de desktop worden automatisch bijgewerkt naar de

Yammer server, bestanden kunnen offline bewerkt worden en worden later opgeladen

Bron:

http://office.microsoft.com

Page 140: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 140

Page 141: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 141

13. Google Apps

Page 142: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 142

Page 143: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 143

13.1 Prijs

€40,00 per jaar / gebruiker

€160,00 eenmalige set-up

13.2 Opslag

E-mail: 25gb/gebruiker

Opslag: 1gb/gebruiker

Maximum e-mail grote: 25mb

13.3 Compatible

Basis formaten = geen probleem

Complexere formaten kan problemen geven

Import: Office 97-2003, Office 2007/2010, OpenOffice tekst en RTF, CSV.

Export:

Niet mogelijk naar Office 2007/2010

Wel PDF

13.4 Sharing en Collaboration

Real-time editing tussen verschillende mensen die samenwerken

Delen mogelijk met iedereen die over een google account beschikt

Documenten kunnen in verschillenden formaten geëxporteerd worden

Wijzigingen worden bijgehouden

Document kan openbaar gedeeld worden door een ‘direct URL’ te maken

13.5 Versiebeheer

Je kan gemakkelijk de bewerkingsgeschiedenis raadplegen

Page 144: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 144

13.6 Mobiele toegankelijkheid

Schrijven: iOS en Android vanaf 2.2

Lezen: iOS, Android en anderen

Calender, contacts: Android, iOS en BlackBerry

E-mail: op elke smartphone met IMAP

13.7 Offline access

Door gebruik te maken van Google Cloud Connect of andere apps kan je van ja Google

Docs documenten bewaren en lokale koppies synchroniseren.

Page 145: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 145

14. Office 365

Page 146: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 146

Page 147: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 147

14.1 Prijs

Minder dan 25 gebruikers: vanaf $6 per maand/gebruiker

Meer dan 25 gebruikers: vanaf $10-27 per maand/gebruiker

Kortingen voor opleidingen

14.2 Opslag

E-mail: 25gb/gebruiker (uitbreidbaar naar ongelimiteerd = duurder)

Maximum e-mail grote: 25mb

Opslag: 2gb/gebruiker (worden opgeslagen in SharePoint Online) +

(uitbreidbaar: $2.5/gb)

14.3 Compatible:

Kan de meeste Office documenten goed openen

Export: naar oudere word files

14.4 Sharing en Collaboration

Real-time editing tussen verschillende mensen die samenwerken => Installatie

van Lync vereist!

Instant messaging zonder software

Buitenstaanders kunnen je SharePoint Online documenten raadplegen tegen

betaling

14.5 Versiebeheer

Heeft een check-out/in systeem voor documentencontrole.

14.6 Mobiele toegankelijkheid

Lezen: bij de meesten platformen

Schrijven: bijna bij geen enkel mogelijk

E-mail: zou op elk platform moeten werken (Outlook)

14.7 Offline access

Biedt de mogelijkheid om u lokale SharePoint te synchroniseren met Office 365-installatie

Page 148: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 148

Page 149: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 149

15. Zoho

Page 150: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 150

Page 151: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 151

15.1 Prijs

$3 of $5 per maand/gebruiker (afhankelijk van je noden)

E-mail is een aparte service en kost $2.5-3.5 per gebruiker/maand

Gratis e-mail en doc’ voor standaard gebruik

15.2 Opslag

Opslag: 1gb/gebruiker (uitbreidbaar naar 5gb voor $3/maand extra)

E-mail: 10gb/gebruiker (uitbreidbaar naar 15gb)

Maximum e-mail grote: 10mb

15.3 Compatible

Kan doc’s met footnotes, headers etc. importeren

Zoho kan een groot aantal files open: Google Doc’s, Office 97-2003, Office

2007-2010, OpenOffice, HTML, RTF, CSV,..

Export: meeste bovenstaande. Kan NIET in PDF en LaTex exporteren.

15.4 Sharing en Collaboration

Real-time editing tussen verschillende mensen die samenwerken, maar niet

zo goed als Google Apps.

Geen extra software nodig

Documenten kunnen gedeeld worden met alle e-mailadressen

Document kan openbaar gedeeld worden door een ‘direct URL’ te maken

Page 152: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 152

15.5 Versiebeheer

Je kan de bewerkingsgeschiedenis raadplegen via de ‘Geschiedenis’ knop in

de review tab.

Het markeren van verschillen in document versies is mogelijk

15.6 Mobiele toegankelijkheid

Mobiele site waar gebruikers hun documenten kunnen raadplegen NIET

aanpassen.

App voor iOS, maar ook hier is bewerken niet mogelijk

E-mail: op elke smartphone met IMAP

15.7 Offline access

Biedt offline toegankelijkheid via Google Gears

Gebruikers van Nomadesk (gelijk dropbox) kunnen bestanden bewerken en

opslaan in Zoho. Een nadeel is dat de bestanden manueel in Nomadesk gezet

moeten worden en er zijn aparte kosten aan verbonden.

Page 153: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 153

16. Yammer

Page 154: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 154

Page 155: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 155

16.1 Prijs

De basis van dit platform is gratis. Wanneer u echter wilt gebruik maken van bepaalde

functionaliteiten dan dient u echter te betalen, deze prijzen beginnen vanaf 5 dollar per

gebruiker, per maand. Een vergelijking tussen de verschillende pakketten kan u terug vinden

in de bijhorende bijlagen op het einde van dit document.

16.2 Opslag

25GB per gebruiker (uitbreidbaar via SkyDrive)

7GB Cloud (Office 365)

16.3 Compatible

Volledige Office Pakket

PDF

Foto en Video

16.4 Sharing en Collaboration

Het platform maakt gebruik van verschillende groepen die de gebruikers kunnen aanmaken.

Zo kan er voor elke klant een groep aangemaakt worden waar elk bestand van deze klant zal

in opgeslagen worden. Daarnaast kan er ook een algemene groep gebruikt worden voor het

bedrijf zelf waar iedereen van het bedrijf toegang zal tot hebben. Door gebruik te maken van

rechten kan er gezorgd worden dat enkel de personen die wel degelijk aan het project

werken enkel toegang hebben tot deze bestanden. De admin zal echter tot elke map

toegang hebben. Dit is in de meeste gevallen de eigenaar van het bedrijf zelf.

Page 156: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 156

16.5 Versiebeheer

Door gebruik te maken van een derde persoon/bedrijf is er ook steeds garantie dat je met de

nieuwste software zal werken. Ook zal er gezorgd worden voor een back-up van de

gegevens die zich op het platform bevinden. Hierdoor zal het bedrijf zich nooit zorgen

moeten maken over het verliezen van belangrijke documenten.

16.6 Mobiele toegankelijkheid

Yammer ondersteund de mobiele toegankelijkheid van zowel smartphones als tablets,

hierdoor kan u steeds overal en altijd toegang verkrijgen tot de documenten.

16.7 Offline access

Wijzigingen aan documenten vanaf de desktop worden automatisch bijgewerkt naar de

Yammer server, bestanden kunnen offline bewerkt worden en worden later opgeladen

Page 157: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 157

17. Why Yammer Enterprise?

Page 158: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 158

Page 159: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 159

Figuur 47: Yammer

Page 160: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 160

Figuur 48: Yammer

Page 161: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 161

Figuur 49: Yammer

Page 162: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 162

Page 163: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 163

18. Vergelijking

Collaboration Platform

Page 164: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013

Pagina | 164

Page 165: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 165

Fig

uu

r 5

0: V

erg

elijk

ing

Page 166: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013

Pagina | 166

Fig

uu

r 5

1: V

erg

elijk

ing

Page 167: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 167

Fig

uu

r 5

0: V

erg

elijk

ing

Page 168: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013

Pagina | 168

Page 169: Bachelorproef - Typepad · Cre@ctiv – Webdesign & (Digitale) Marketing Cre@ctiv Bachelorproef Toegepaste Informatica In opdracht voor: Elien Defraeije Naamsestraat 290/401 3001

Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014

Pagina | 169

19. PID