Page 1
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 2
Page 3
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 4
Page 5
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 6
Page 7
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 8
Page 9
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 10
Page 11
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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 46
Page 47
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 47
1. Aanloop naar Project &
Stage
Page 48
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 48
Page 49
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 | 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 | 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 | 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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 54
Page 55
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 55
2. Curriculum Vitae
Page 56
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 56
Page 57
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 57
Page 58
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 58
Figuur 28: Curriculum Vitae Ilka Winnen
Page 59
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 59
3. Bezoekrapport
Page 60
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 60
Page 61
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 61
Figuur 29: Bezoekrapport
Page 62
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 62
Page 63
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 63
4. Timesheet
Page 64
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 64
Page 65
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 65
Figuur 30: Timesheet
Page 66
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 66
Figuur 31: Timesheet
Page 67
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 67
Figuur 32: Timesheet
Page 68
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 68
Figuur 33: Timesheet
Page 69
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 69
Figuur 34: Timesheet
Page 70
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 70
Page 71
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 71
5. Bachelorproef
Voorstelling
4 oktober 2013
Page 72
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 72
Page 73
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 73
Figuur 35: Presentatie 4 oktober
Page 74
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 74
Figuur 36: Presentatie 4 oktober
Page 75
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 75
Figuur 37: Presentatie 4 oktober
Page 76
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 76
Figuur 38: Presentatie 4 oktober
Page 77
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 77
Figuur 39: Presentatie 4 oktober
Page 78
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 78
Figuur 40: Presentatie 4 oktober
Page 79
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 79
6. WordPressDrupalJoomla
Page 80
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 80
Page 81
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 81
Figuur 41: Vergelijking CMS platformen
Page 82
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 82
Figuur 42: Vergelijking CMS platformen
Page 83
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 83
Figuur 43: Vergelijking CMS platformen
Page 84
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 84
Page 85
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 85
7. WordPress Installatie
Handleiding
Page 86
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 86
Page 87
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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 96
Page 97
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 97
8. WordPress Plug – In
Page 98
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 98
Page 99
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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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(‘’,’’,’« Previous Entries’) ?></div>
<div class="alignright"><?PHP posts_nav_link(‘’,’Next Entries »’,’’)
?></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 | 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(‘«’, 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 | 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 | 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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 121
9. Webhosting en
Filesharing
Page 122
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 122
Page 123
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 | 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 | 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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 127
10. Adobe Creative Cloud
Page 128
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 128
Page 129
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 130
Figuur 45: Adobe Creative Cloud
Page 131
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 131
11. Cisco WebEx Connect
Page 132
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 132
Page 133
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 134
Page 135
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 135
12. Microsoft SharePoint
Page 136
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 136
Page 137
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 137
12.1 Prijs
Figuur 46: Info Microsoft SharePoint
Page 138
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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 140
Page 141
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 141
13. Google Apps
Page 142
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 142
Page 143
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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 145
14. Office 365
Page 146
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 146
Page 147
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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 148
Page 149
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 149
15. Zoho
Page 150
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 150
Page 151
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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 153
16. Yammer
Page 154
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 154
Page 155
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 | 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 | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 157
17. Why Yammer Enterprise?
Page 158
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 158
Page 159
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 159
Figuur 47: Yammer
Page 160
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 160
Figuur 48: Yammer
Page 161
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 161
Figuur 49: Yammer
Page 162
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 162
Page 163
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 163
18. Vergelijking
Collaboration Platform
Page 164
Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013
Pagina | 164
Page 165
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 165
Fig
uu
r 5
0: V
erg
elijk
ing
Page 166
Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013
Pagina | 166
Fig
uu
r 5
1: V
erg
elijk
ing
Page 167
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 167
Fig
uu
r 5
0: V
erg
elijk
ing
Page 168
Bachelorproef | Voorstelling Nr. 1 | Gemaakt Op: 30/09/2013
Pagina | 168
Page 169
Bachelorproef | Voorstelling Nr. 1 | Academiejaar 2013 - 2014
Pagina | 169
19. PID