Bachelorproef Jolene Fouquaert. Woord vooraf

Bachelorproef Jolene Fouquaert

Woord vooraf Mijn naam is Jolene Fouquaert en ik ben student New Media & Communication Technology aan Howest Kortijk (NMCT). Van kleins af aan ben ik gepassioneerd door alles wat met IT en gadgets te maken heeft. Daarom koos ik voor de opleiding NMCT. Tijdens mijn opleiding kon ik waarnemen dat mijn interesses aanleunden bij de pijler ‘webdevelopment en design’. Het was mijn doel om mijn opleiding af te sluiten met een leerrijke stageperiode. Dit om in mijn laatste 13 weken als student NMCT nog zoveel mogelijk kennis te vergaren. Dertien weken lang heb ik stage gelopen bij het bedrijf Ecopharma uit Oudenaarde. Ecopharma is een ecommerce bedrijf dat zich richt op het online verkopen van voedingssupplementen en verzorgingsproducten. Daar kreeg ik de kans om stage te lopen als frontend developer. Vanaf de eerste dag werden mij enkele development tools aangeleerd. Dit is tevens de basis van mijn bachelorproef. Naast mijn passie voor IT, ben ik ook een frequente webshop bezoeker. Het leek mij dan ook leuk om deze twee aspecten, nl. IT en e-commerce, te kunnen combineren in mijn bachelorproef. Op mijn stagebedrijf kreeg ik de kans om hieromtrent onderzoek te verrichten en nieuwe tools te leren kennen. Er was geen project dat rechtstreeks in verband kon worden gebracht met mijn bachelorproef. maar in ieder project schuilde er een aspect dat ik kon gebruiken voor mijn bachelorproef. Algemeen kan ik mijn stage omschrijven als een leerrijke periode. Ik heb mijn kennis over e-commerce en IT kunnen verruimen. Het is mijn doel om met deze bachelorproef andere bedrijven te kunnen overtuigen en informeren over het gebruik van tools. Graag wil ik het webdesignbureau Wijs en communicatie bureau Jungle Minds bedanken voor de kennis die jullie met mij hebben gedeeld. Tot slot wil ik ook Jonas Callens mijn stagebegeleider, mijn collega’s met in het bijzonder Thomas Goemaere, en mijn stagementor, Ann Deraedt bedanken. Zonder hun raadgeving, adviezen en feedback zou ik dit werk zeker niet tot stand hebben kunnen brengen.

Betere verkoopcijfers met frontend-webdevelopment tools in e-commerce

1


Abstract De e-commercewereld is een bloeiende markt en niet meer weg te denken uit onze kapitalistische maatschappij. Natuurlijk ontstaan digitale shops niet zomaar. Digitale shops worden ontwikkeld door developers. Zowel frontend - wat u ziet - als backend - wat er achter het scherm gebeurt - zijn noodzakelijke onderdelen van een goede webshop. Om deze webshop te ontwikkelen wordt er een volledig proces doorlopen. Dit proces kan geoptimaliseerd worden door gebruik van tools. Deze tools nemen een heleboel werk uithanden en zorgen voor het automatiseren van verschillende handelingen. Doordat er wordt gebruikt gemaakt van tools, kunnen de webshops sneller aangepast worden en kunnen de updates, zodat die inspelen op de klantennoden. Logischerwijs zou dit moeten leiden tot betere verkoopresultaten. Want ‘time is money’. Daarnaast zorgt een betere klant tevredenheid zorgt voor betere verkoopresultaten. Eerst en vooral wordt er kennis gemaakt met de soorten tools en welke er momenteel op de markt zijn. Er wordt een selectie gemaakt van de populairste en een korte tutorial gemaakt. Dit om een idee te geven hoe de tools werken. Vervolgens werd de e-commerce markt geschetst en worden er praktische voorbeelden gesteld. Aan de hand van het onderzoek naar de verschillende tools , de e-commerce markt en de praktijk voorbeelden kan er een besluit gevormd worden. De frontend tools gebruiken is een onderdeel van het optimaliseren van het development proces. Hieruit volgt dus ook een stijging van de verkoopscijfers maar er is geen rechtstreeks verband tussen de tools en de verkoopscijfers.


2


Verklarende woordenlijst  Angular: Een webapplicatie framework.  Backend: Dit is de “achterkant” van de web applicatie. Deze code is niet zichtbaar voor de gebruiker, maar is wel nodig om de we applicatie weer te geven. Een voorbeeld van een Backend is een API om tweets op te halen.  Conversie rate: Conversie binnen de e-commerce is de omzetting van bezoek aan een website naar een bepaald conversiedoel, doorgaans uitgedrukt als een percentage van de sitebezoekers die overgaan tot het conversiedoel. Het gaat meestal om een bestelling of betaling, maar kan ook een aanmelding voor een nieuwsbrief of registratie als gebruiker betreffen.  Crossbrowser testing: Het testen van de webapplicatie in verschillende webbrowsers en verschillende besturingssystemen.  Error-handeling: Voorkomen, detecteren, opvolgen en oplossen van errores.  Facebook Remarketing Tag: Met deze tag houden we bij welke mensen er welke pagina hebben bezocht en kunnen we dat gebruiken om specifieke Facebook campagnes op te stellen.  Frontend: Dit is de “voorkant” van de webapplicatie. Dit is wat u als gebruiker te zien krijgt. De frontend staat steeds in contact met de backend van de webapplicatie. Een voorbeeld van een frontend is de CSS om de tweets , die opgehaald zijn via de backend, een eigen stijl te geven.  Google Webmaster Tools Verificatie Tag: Met Google Webmaster Tools kan je makkelijk het organisch zoekverkeer en technische SEO-zaken opvolgen. Je ziet er ook een overzicht van error (robots.txt, 404, 500, etc.) en hoe Googlebot je website crawlt. Deze tag dient om aan te duiden dat wij eigenaar zijn van die site en dat we die data mogen bekijken.  Minifying: Het verwijderen van onnodige spaties, next lines en tekens om de bestandsgrootte te verkleinen.  Scaffolding: Het opbouwen van een bestandstructuur volgens een bepaalde wijze.  VWO: Visual Website Optimizer is een tool waarmee we vlot heatmaps en A/B testen kunnen opzetten en opvolgen, zonder dat er veranderingen aan de code of serverinstellingen moeten gedaan worden. Het legt in feite een layer over de oorspronkelijke pagina.


3


Figurenlijst Figuur 1 mock-up projecttijd test ..................................................................................................................................... 13 Figuur 2 soorten framework ............................................................................................................................................... 18 Figuur 3 Google DevTools ................................................................................................................................................... 20 Figuur 4 Netwerk onderdeel GoogleDev .......................................................................................................................... 21 Figuur 5 timeline onderdeel in GoogleDev....................................................................................................................... 22 Figuur 6 Profiles scherm GoogleDev.................................................................................................................................. 22 Figuur 7 Resource panel GoogleDev................................................................................................................................. 23 Figuur 8 Audits panel GoogleDev ....................................................................................................................................... 23 Figuur 9 Console panel GoogleDev ................................................................................................................................... 24 Figuur 10 Emmet logo .......................................................................................................................................................... 25 Figuur 11 Grunt Taskrunner logo ....................................................................................................................................... 28 Figuur 12 Runnen van een grunt-task ............................................................................................................................... 31 Figuur 13 Bower search package ....................................................................................................................................... 32 Figuur 14 Yeoman Workflow................................................................................................................................................ 33 Figuur 15 Yeoman commando ........................................................................................................................................... 34 Figuur 16 Yeoman mappenstructuur ................................................................................................................................ 34 Figuur 17 Bootstrap Grit ....................................................................................................................................................... 36 Figuur 18 Voorbeeld bootstrap 3.0 Template ................................................................................................................. 37 Figuur 19 Eenvoudig formulier zonder opmaak ............................................................................................................ 38 Figuur 20 Formulier opgemaakt met het bootstrap framework ................................................................................. 38 Figuur 21 Litmus inlogscherm............................................................................................................................................. 40 Figuur 22 Litmus startscherm ............................................................................................................................................. 40 Figuur 23 Keuze browsers en mailclients litmus............................................................................................................. 41 Figuur 24 Test you Email Litmus ........................................................................................................................................ 41 Figuur 25 Overzicht van de verschillende screenshots.................................................................................................. 42 Figuur 26 Evaluatie van een screenshot in Litmus ......................................................................................................... 42 Figuur 27 testen van afbeeldingen in litmus.................................................................................................................... 43 Figuur 28 Prijzen litmus ....................................................................................................................................................... 43 Figuur 29 Aldrich Michael met zijn uitvinding ................................................................................................................. 48 Figuur 30 In welke sector wordt het meeste online gekocht........................................................................................ 50 Figuur 31 tevredenheid webshops .................................................................................................................................... 50 Figuur 32 facebookpagina ecopharma............................................................................................................................. 52 Figuur 33 Google analytics conversion Android toestellen Ecopharma.................................................................... 53 Figuur 34 Development process e-commerce ................................................................................................................ 54


4


Inhoudsopgave Inleiding ......................................................................................................................................................................................7 1

2

3

4

De context .........................................................................................................................................................................9 1.1

Het bedrijf ................................................................................................................................................................9

1.2

Het belang van tools........................................................................................................................................... 10

1.3

De verschillende tools die gebruikt kunnen worden ................................................................................... 10

1.4

Het belang van projecttijden ............................................................................................................................ 11

De projecttijd test ......................................................................................................................................................... 13 2.1

Opgave .................................................................................................................................................................. 13

2.2

Besluit .................................................................................................................................................................... 14

Classificatie van de tools ............................................................................................................................................ 16 3.1

Taskrunners.......................................................................................................................................................... 16

3.2

Package management ....................................................................................................................................... 16

3.3

Scaffolding tools.................................................................................................................................................. 17

3.4

Debugging............................................................................................................................................................. 17

3.5

Preprocessors ...................................................................................................................................................... 18

3.6

Framework............................................................................................................................................................ 18

De populairste merken................................................................................................................................................ 20 4.1

Google Development Tools .............................................................................................................................. 20

4.1.1

Geschiedenis ................................................................................................................................................... 20

4.1.2

De werking ....................................................................................................................................................... 20

4.2

Emmet ................................................................................................................................................................... 25

4.2.1

Geschiedenis ................................................................................................................................................... 25

4.2.2

Emmet en HTML.............................................................................................................................................. 25

4.2.3

Emmet in CSS .................................................................................................................................................. 27

4.3 4.3.1

Grunt ...................................................................................................................................................................... 28 Installatie van Grunt ....................................................................................................................................... 28

4.4

Bower ..................................................................................................................................................................... 32

4.5

Yeoman ................................................................................................................................................................. 33

4.6

Less......................................................................................................................................................................... 35

4.7

Bootstrap .............................................................................................................................................................. 36

4.7.1

Geschiedenis ................................................................................................................................................... 36

4.7.2

Hoe werkt het .................................................................................................................................................. 37

4.8

Litmus .................................................................................................................................................................... 39

4.8.1

Geschiedenis ................................................................................................................................................... 39

4.8.2

E-mail testing................................................................................................................................................... 39


5


4.8.3 4.9

Besluit ............................................................................................................................................................... 43 Besluit .................................................................................................................................................................... 44

5

Wat is het voordeel van het gebruik van tools ....................................................................................................... 46

6

Werking van e-commercebedrijven ......................................................................................................................... 48

7

6.1

De geschiendenis van E-commerce ................................................................................................................ 48

6.2

Definitie van E-commerce ................................................................................................................................. 49

6.3

E-commerce in België ........................................................................................................................................ 49

6.4

Hoe de e-commerce wereld geld verdient ..........................................Fout! Bladwijzer niet gedefinieerd.

6.5

Hoe worden de resultaten gemeten ............................................................................................................... 53

6.6

Development proces in e-commerce ............................................................................................................. 54

6.7

In de praktijk......................................................................................................................................................... 55

Besluit ............................................................................................................................................................................. 57 7.1

Algemeen besluit................................................................................................................................................. 57

7.2

Persoonlijk besluit .............................................................................................................................................. 58

Referentielijst ......................................................................................................................................................................... 59 Bijlagen .................................................................................................................................................................................... 61


6


Inleiding E-commerce is vandaag niet meer weg te denken uit ons leven. Populaire webshops als Zalando en Bol.com winnen dag na dag nieuwe klanten. Om op de noden van die klanten in te spelen zit er achter ieder ecommerce bedrijf een team developers die dagelijks bezig is met kleine updates, fixen van bugs en het lanceren van grote updates van het webplatform. Natuurlijk zijn er een duizenden tools op de markt die dit proces voor de developer vergemakkelijken. Zowel voor frontend als backend zijn er een heel wat tools die aan de specifieke noden van de developer kunnen voldoen. Het hoofddoel van de een e-commerce is nog steeds winst en omzet maken. Want uiteindelijk blijft dit een bedrijf dat zijn werknemers en alle andere kosten moet kunnen blijven betalen en liefst ook wat kan groeien. Omzet wordt er pas gedraaid als de bezoekers overgaan tot kopen. Daarbij is het vlot gebruik van het webplatform noodzakelijk, ook moet het webplatform voldoen aan de noden van bezoeker. Daarom is het noodzakelijk dat het development team snel inspeelt op die noden en regelmatig het webplatform update. Iedere seconde dat de update niet online staat, kan zorgen voor een overstap naar de concurrentie. Het onderwerp van deze bachelorproef linkt dan ook beide problemen aan mekaar. Kan het gebruik van frontend webdevelopement tools de verkoopcijfers optimaliseren in een e-commerce bedrijf? Want de tools zorgen voor een geoptimaliseerde workflow voor de developers en hierdoor zouden updates en fixes sneller gerealiseerd worden. Maar is dit ook zo? En zorgt dit ook voor betere verkoopcijfers? Deze bachelorproef zal dan ook eerst de verschillende klasse tools uitleggen met de daarbij horende populairste tools en de voordelen. Het tweede deel zal zich meer richten op de e-commerce sector om dan af te ronden met een algemeen en persoonlijk besluit dat een antwoord zal bieden op de vraag die centraal staat in deze bachelorproef. Als voorbeeld e-commerce bedrijf zal in deze bachelorproef Ecopharma uit Oudenaarde genomen worden. Dit is een farmaceutische e-commerce bedrijf dat op het internet vooral voedingssupplementen en schoonheidsproducten aanbied.

Deze bachelorproef staat in nauw verband met mijn stage opdracht binnen Ecopharma maar heeft geen uitvoerend eind-project. Er moet ook rekening gehouden worden dat hier geen plug-ins of andere kant-enklare oplossingen voor webshops zoals Storify aan bod komen, waardoor de tools ook toepasbaar zijn op andere websites


7

1


DE CONTEXT


8


1 DE CONTEXT Achter de schermen van een e-commerce bedrijf staan een heleboel developers die de hele dag in de weer zijn met coderen en ontwikkelen van de webshop. Want een webshop is nooit af. Er is steeds iets dat gecodeerd, ontworpen of ontwikkeld moet worden. Dit kan gaan over een bestelknop die toch niet het juiste kleur heeft, een nieuwsbrief of zelfs over een volledige re-design van de webshop. Natuurlijk is het eerste doel van de webshop geld verdienen. En dit kan enkel en alleen maar door de klanten tevreden te stellen. Daarom is het snel updaten van de webshop en de bijhorende taken noodzakelijk. Om dit proces te versnellen zijn er op de markt een heleboel tools die hierbij kunnen helpen. Deze bachelorproef zal behandeld er enkele en formuleert voer elke tools een advies De bachelorproef bestaat uit twee delen. Het eerste deel beschrijft voornamelijk de technische kant van de tools en hun voordelen. Het tweede deel richt zich meer op de e-commerce wereld, namelijk hoe ze hun verkoopcijfers behalen en wat er in de e-commerce wereld belangrijk is. Tot slot zal er een besluit worden gevormd.

1.1 Het bedrijf Het bedrijf dat in deze bachelorproef aanbod komt, Ecopharma, maakt sinds een jaar gebruik van frontend

tools. Hiervoor werd alles ontwikkeld zonder tools. In juni 2014 werd er een grote update gedaan van de webshop. Sindsdien wordt er voor iedere update, nieuwsbrief of branding websites gebruik gemaakt van webdevelopement tools. De frontend tools zijn hierbij belangrijk en zullen dan ook hoofdzakelijk aan bod komen in deze bachelorproef. Momenteel wordt er om de x-aantal weken een update gedaan van de webshop. Met als doel om zo goed mogelijk op de noden van de klant te kunnen inspelen en ervoor te zorgen dat klanten effectief overgaan tot kopen. De updates kunnen soms gaan van het vergroten van een knop, het omgooien van het bestelproces tot het lanceren van een nieuwe branding website met een daaraan gekoppelde social media campagne. Zowel een kleine of een grote update kan verschillende resultaten leveren. Deze resultaten (hoe de bezoeker navigeert, hoeveel koopt hij, waar klikt hij) worden allemaal zorgvuldig bijgehouden. Hiervoor wordt gebruikt gemaakt van o.a. Google Analytics, Google Webmaster Tools Verificatie Tag, VWO en Facebook Remarketing Tag. Met de resultaten kan dan aangetoond worden of een update positieve of negatieve invloed hebben op de verkoopcijfers en of er dringend nieuwe updates nodig zijn omdat de gebruiksvriendelijkheid te wensen overlaat. Er worden dus duidelijk tools gebruikt binnen Ecopharma, ook kan er onderzocht worden of er nu sneller geüpdatet kan worden t.o.v. het niet gebruik van de tools en of dit een invloed heeft op de verkoopcijfers van de webshop.


9


1.2 Het belang van tools Frontend webdevelopement tools zorgen ervoor dat de workflow (zie 6.6) wordt geoptimaliseerd en dat taken die voordien manueel werden uitgevoerd nu automatisch gebeuren. Vroeger hadden we de pure CSS, HTML, Javascript. We maakten we gebruik van een editor (bv. Dreamweaver)om de frontend van de web toepassing, voor een e-commerce bedrijf meestal een webshop. te ontwikkelen. Daarna gingen we manueel aan de slag om ons project te verbeteren. We minifyen onze CSS nadat alles af was door onze CSS te kopiëren en in een extern programma te Minifyen. Soms moesten we uren zoeken naar een fout in de CSS omdat we ergens een puntkomma vergeten waren. We kunnen concluderen dat het niet gebruikmaken van tools tijdrovend en de workflow ervan niet optimaal is. Maar momenteel zijn er een heleboel tools die hierop inspelen. De tools variëren van scaffolding tools tot framework. Deze maken het ontwikkelen makkelijker en zorgen er voor dat ene project sneller tot een goed einde wordt gebracht.

1.3 De verschillende tools die gebruikt kunnen worden In Ecopharma worden er verschillende tools gebruikt. Zo wordt er een scaffolding tool gebruikt voor het opstarten van een project Yeoman. Tijdens dat project wordt er gebruik gemaakt van een taskrunner, nl. Grunt, die verschillende taken automatisch uitvoert. In het project wordt er ook gebruik gemaakt van een framework, Bootstrap. Dit wordt vooral gebruikt voor mobiele weergave van de website. De CSS wordt geschreven in Less en wordt er gebruik gemaakt van handlebars. In de testing-fase van de webshop/website worden er ook tools gebruikt, deze dienen vooral voor cross-browser testing en error-handeling. Deze tools komen later uitgebreid aan bod. Natuurlijk zijn er nog een heleboel andere tools op de markt die dezelfde toepassing hebben of hetzelfde resultaat aanbieden. Aangezien deze tools niet of amper aan bod kwamen tijdens de stage zullen die dan ook in beperkte mate besproken worden in deze daaraan gekoppelde bachelorproef.


10


1.4 Het belang van projecttijden Wat is het belang van de projecttijden? Op deze vraag kan er een antwoord worden gegeven zonder eerst onderzoek te verrichten. Er is een duidelijk verschil waarneembaar in projecttijd. De opzetting van een mappenstructuur kan hierbij als voorbeeld worden geven. Vroeger werd de opzetting van een mappenstructuur manueel uitgevoerd. Ieder mapje werd aangemaakt en dan zo gelinkt in het project. Dit resulteerde in een heleboel kopieer –en plakwerk . Door gebruik te maken van een scaffolding tool, zoals Yeoman, kan het project in enkele minuten worden gefinaliseerd. Hierin zitten templates waardoor het nog makkelijker is om te starten met het project. Dit is natuurlijk een voorbeeld voor een niet-bestaande website. Voor updates in een webshop is het scaffolden van project niet nodig. Ook voor updates kan er worden aangetoond dat de projecttijd korter is. Door het hanteren van Less voor de opmaak, kan er gebruik gemaakt worden van een variabele. Hierdoor kan een kleur dat meerdere malen moet terugkeren bij één variabele worden ingesteld. Wanneer we bij een update die kleur willen veranderen, moeten we niet op zoek gaan naar alle elementen die deze kleur hebben gekregen. We kunnen nu gewoon de variabel aanpassen. Dit is minder tijdrovend.

Persoonlijk heb ikzelf ook ondervonden dat het gebruik van frontend tools veel tijd uitgespaart. Voordien maakte ik geen gebruik van tools. Sinds ik op mijn stage de tools aangeleerd kreeg, is mijn workflow geoptimaliseerd en is mijn projecttijd korter.


11

2


DE PROJECT TIJD TEST


12


2 DE PROJECTTIJD TEST Er werd al aangehaald wat het belang is van een projecttijd. Maar het bewijs dat de tools zorgen voor een kortere projecttijd kan enkel worden bevestigd door een test. Voor deze bachelorproef werd een kleine test ontwikkeld de korter projecttijd zal bewijzen. De test bestaat uit twee delen. Het eerste deel zal worden uitgevoerd zonder tools. Het tweede deel zal met tools worden gerealiseerd.

2.1 Opgave Om toch aan te tonen dat het gebruik van tools effectief de projecttijd verkort, werd er een test uitgevoerd. De test werd uitgevoerd door eenzelfde persoon. Deze persoon kreeg de opdracht een simpele website te maken, bestaande uit een simplistische HTML-pagina met enkele foto’s en tekst (Zie figuur 1). De website moest wel het bootstrap model hanteren. Er mocht geen code gekopieerd worden en het ontwikkelen gebeurde in dezelfde editor. De website is een voorbeeld van een branding website die Ecopharma ontwikkeld De eerste keer werd er gebruik gemaakt van tools (Yeoman, Bower en Grunt). De tweede keer werd er geen gebruik gemaakt van tools m.u.v. Bootstrap.

Figuur 1 mock-up projecttijd test, bron: brandsite ecopharma


13


2.2 Besluit We kunnen concluderen dat het ontwikkelen van een website zonder tools tijdrovend is. Ookal werd in het test gebruikt gemaakt van een simplistisch voorbeeld, toch was er duidelijk verschil in de projecttijd. Zonder gebruik te maken van de tools, moest de Bootstrap manueel worden gedownload en toegepast op het project. Nadoen moest men de volledige HTML-structuur opmaken met CSS. Dit proces duurde ongeveer 45 minuten. De tweede maal ging het proces vlotter. Door gebruik te maken van Yeoman was de Bootstrap al volledig geïnstalleerd en was het project op enkele seconden klaar voor development. In totaal duurde het ontwikkelen van de website met de tools een 25-tal minuten. Er kan dus aangenomen worden dat tools zorgen voor een kortere projecttijd. Er is een verschil van 15 minuten.

Werken met of zonder tools CSS

Installatie bootstrap en toekennen van de bootstrap grid

Structuur HTML en tekst

Klaarzetten bestanden en afbeeldingen verzamelen 0

2

Met tools

4

6

8

10

12

14

Zonder tools


16

14

3


CLASSIFICATIE VAN DE TOOLS


15


3 CLASSIFICATIE VAN DE TOOLS Zoals eerder aangehaald zijn er een heleboel tools. Het is quasi onmogelijk om iedere tool te bespreken. Daarom werd er in deze bachelorproef enkel gebruik gemaakt van de tools die aan bod kwamen tijdens de stage bij Ecopharma. De tools hebben elk hun eigen doelstelling en kunnen ingedeeld worden per klasse. Voordat de populaire tools kunnen worden aangehaald, is het noodzakelijk om te weten welke klasse van tools er bestaan.

3.1 Taskrunners Taskrunners of ook wel Javascript taskrunners zijn meestal commandolijn gebaseerde ‘programma’s’ die bepaalde taken automatiseren. De meeste taskrunners maken gebruik van node.js en node package manager. De taskrunners kunnen door een configuratie file volledig worden aangepast naar de wensen van het project of de developer. Dit door het toevoegen van plug-ins. Die plug-ins kunnen bijvoorbeeld dienen voor de scripttaal Less, die een eenvoudige variant van CSS is, om te zetten naar CSS. Dit gebeurt automatisch. De meest bekende taskrunners zijn Grunt en Gulp, deze twee werken volgens het zelfde principe en hebben elk hun eigen voordeel. In deze bachelorproef zal Grunt verder uitgediept worden. Op de website van Grunt is er een motivatie te vinden waarom er gebruik zou moeten worden gemaakt van taskrunners. In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Het is dan ook de taskrunner die zorgt voor het grootste deel van de automatisatie en optimalisatie van een development proces. De taskrunner is dan ook niet weg te denken in de frontend tools. Dit omdat de meeste tools in combinatie met een taskrunner werken.

3.2 Package management De Package Manager dient voor het beheren van de dependecies. Het grootste voorbeeld hierbij is dat je niet meer handmatig je scripts of packages hoeft te downloaden. Dit is gelijkaardig aan een version control system, wat een project installeert waarin je kan starten met werken. Een package manager installeert dan wel scripts of packages in plaats van een project. Deze kunnen dus bovenop een version control system worden geïnstalleerd. Concreet wil dit zeggen dat je bepaalde package kan downloaden, die dan geïnstalleerd zullen worden in het project. Hierdoor kan je sneller aan de slag. Deze installatie en download gebeurt net zoals bij de taskrunners


16


ook op de commandolijn. Iedere package manager heeft echter een duidelijke documententatie die er voor zorgt dat het voor iedere developer makkelijk is om de tool te hanteren. Maar wat kan er er allemaal geïnstalleerde worden? Er is een ruim aanbod, over de zestienduizend packages, beschikbaar op het internet. Een voorbeeld van een package is de bekende javascript image slider light slider. Een andere package kan bijvoorbeeld een minifyer zijn. In de package managers heb ook weer een ruim aanbod. Voorbeelden van de bekendste package managers zijn Jam, Ender, npm en Bower. Deze laatste is een van de populairste en wordt verder uitgewerkt in het volgende hoofdstuk. Package managers bestaan niet enkel voor frontend development. Maar ook voor het installeren van andere software. In deze bachelorproef bespreken we enkel de frontend development package managers.

3.3 Scaffolding tools Scaffolding tools worden gebruikt om een nieuw project aan te maken volgens een bepaalde structuur. Meestal volgens een bepaalde generator en in enkele seconden. De generator bepaalt welke type project je aanmaakt. Dit kan bijvoorbeeld een website zijn met het framework Bootstrap in. Wanneer de scaffolding tool je project heeft aangemaakt met de bootstrap generator, kan je meteen van start gaan in de template van Bootstrap. Hierna kan je starten met development. Een ander voorbeeld van generator kan bv. een angular project zijn. De scaffolding tool installeert meestal ook een package manager en taskrunner mee. De bekendste scaffolding tools zijn Yeoman en Slush. Beide hebben elk hun eigen voordelen en zijn dus elkaars aanhangers. Als de meest populaire tool komt Yeoman naar voren. Deze tool zal dan ook verder worden besproken.

3.4 Debugging Debugging is één van de belangrijkste onderdelen in een development proces. Het is dus van groot belang dat er aandacht wordt geschonken aan debugging tools. Onder debugging verstaan we het testen en vinden van bugs of fouten in de webapplicatie. Dit kan bijvoorbeeld het testen van de websites op verschillende browsers, dit proces noemt crossbrowser testing, maar dit kan ook et debugging van een javascript script zijn. Het is een categorie met heel veel “merken”. Één voor één dienen ze de verschillende onderdelen van debugging. De meest gebruikte debugging tool is volgens verschillende bronnen de Google developer tools. Maar er zijn ook andere tools. Zoals crossbrowser testen als Litmus en Browserstack. Keuze genoeg dus binnen de categorie van debugging.


17


3.5 Preprocessors Preprocessors zijn programma’s die een bepaald type data omzet naar een ander. Meestal gaat het over een gelijkaardig, type data. Op vlak van frontend development is dit in HTML of CSS. Maar het kan ook in Javascript. In ieder type code zijn er verschillende aanbieders. De bekendste zijn Less/Sass, Haml en Coffiescript. Meestal gebruikt een preprocessor een watcher. Deze houdt de file “in het oog”. Wanneer er een in een bepaalde taal geschreven code wordt gevonden, zet men die automatisch om naar HTML, CSS of Javascript.. De omgezette code vinden we terug in een ander bestand.

3.6 Framework Frameworks zijn complexer om uit te leggen. Een softwareframework is een geheel van softwarecomponenten dat gebruikt kan worden bij het programmeren van applicaties. Het omvat echter ook afspraken hoe die componenten gebruikt worden binnen een groep ontwikkelaars. Welke code-standaarden en bibliotheken gebruikt worden kunnen ook onderdeel zijn van een framework. (bron: http://nl.wikipedia.org/wiki/Framework) Het is overduidelijk dat de definitie van een framework moeilijk verstaanbaar is. Maar voor een framework op webdevelopement niveau kan het eenvoudiger worden uitgelegd. Een framework is in feite een pakket bestaande uit een bepaalde structuur van bestanden en mappen. De standaard code is in HMTL, CSS, Javascript,... geschreven. Deze documenten verhelpen het development proces van een website en zijn meestal de basis voor het opbouwen een website of webapplicatie. Dit zorgt ervoor dat developers sneller met een project van start kunnen gaan en er geen code moet worden gedupliceerd. In webdevelopement heb je twee soorten framework: frontend en een backend framework. Een framework is een standaard waarop verder kan gewerkt worden. Het kan dus op verschillende processen worden toegepast (zie figuur 2 ). Een framework op backend niveau kan helpen om data op te halen uit de database en nadien op een eenvoudige manier op de webapplicatie weer te geven Een framework op frontend niveau kan dan weer helpen om op een makkelijke manier van een webapplicatie een mobiel versie te maken. Voor deze bachelorproef is een frontend framework van het grootste belang . Zowel voor frontend en backend framework is er veel keuze. De meest bekende zijn Bootstrap, foundation 4,

Angular, Ruby On Rails, cakePHP,…

Figuur 2 soorten framework (bron: http://www.awwwards.com/what-areframeworks-22-best-responsive-cssframeworks-for-web-design.html)


18

4


DE POPULAIRSTE MERKEN VAN TOOLS


19


4 DE POPULAIRSTE MERKEN In het voorgaande hoofdstuk kwamen de verschillende klassen van tools aan bod. Natuurlijk zijn er per klasse een heleboel tools die aan alle eisen voldoen. Na onderzoek en het raadplegen van verschillende developers kwamen er enkele merken van populaire tools in het opzicht. In dit hoofdstuk zal aandacht worden geschonken aan deze tools. De tools werden ook gehanteerd tijdens de stage bij Ecopharma.

4.1 Google Development Tools Google development tools, ook wel Google DevTools genoemd, zijn tools die in de browsers van Google Chrome zijn ingebouwd. Deze tools dienen ter ondersteuning van het develment proces van een website en in grote mate dat van het debuggen. Zo kan er door gebruik te maken van de devtools makkelijk Javascript errors gevonden worden of snel een layout probleem in de CSS opgelost worden.

4.1.1

Geschiedenis

Zoals de naam het al vermeld zijn deze tools ontwikkeld door Google. Deze tools werden samen met de Chrome browsers gelanceerd in 2008. Door de jaren heen waren er regelmatig updates die van Google Devtools krachtige tools maakten.

4.1.2

De werking

De tools kunnen worden geopend door een simpele klik op F12 of via het Chrome menu in rechterbovenhoek van het browser scherm. Nadien kan er worden gekozen voor Tools gevolgd door de Developer Tools (zie figuur 3). Een andere optie is het klikken met de rechtermuisknop op een element in de webpagina. Hierbij moet er voor Inspect Element worden gekozen. Al deze mogelijkheden om de tool te openen gebeuren allemaal in de Chrome browser, waarbij de geopende webpagina moeten worden getest.

Figuur 3 Google DevTools (bron:google)

Wanneer de tool open is zijn er verschillende tabs te zien. Elke tab heeft een specifieke functie.


20


Elements Het elementsscherm is het standaard tabblad wanneer de tools geopend worden (zie figuur 3). Dit scherm toont alle codes in één DOM structuur. Je kan hier elementen inspecteren en eventueel aanpassingen doen. De CSS kan op het rechterdeel worden bekeken en aangepast. Dit kan handig zijn om snel te zien waarom een titel niet het gewenste kleur krijgt.

Network Het network onderdeel (zie figuur 4) geeft inzicht over de bronnen die nodig zijn voor de webapplicatie en hoe die moeten worden gedownload. Indien hier fouten te zien zijn of als bepaalde requests lang duren, kan het goed zijn om de bepaalde scripts en bronnen te optimaliseren en eventueel om bepaalde scripts te minifyen.

Figuur 4 Netwerk onderdeel GoogleDev (bron: google)

Sources Hierin kunnen alle bronnen die ingeladen worden gevonden worden.

Timeline Het timeline panel toont hoe de tijd werd besteed om de webapplicatie in te laden. Ieder event wordt bijgehouden. Dit varieert van parsing van de javascript tot het berekenen van CSS-stijlen.


21


Figuur 5 timeline onderdeel in GoogleDev (bron:google)

Profiles In het profiles panel van de webapplicatie (zie figuur 6) staan het geheugengebruik en de uitvoeringstijd centraal. Deze helpen om de code te optimaliseren, namelijk de Javascript en CSS. De profilers zijn:  De CPU profiler, duidt de uitvoeringstijd van de JavaScript-functies van de webapplicatie aan.  De Heap profiler, toont de geheugenverdeling van de JavaScript-objecten en de bijhorende DOMnodes.  Het JavaScript-profiel, toont de verdeling van de uitvoeringstijd in het script.

Figuur 6 Profiles scherm GoogleDev (bron google)


22


Resouces In het Resources panel (zie figuur 7) kan men de bestanden bekijken die in geïnspecteerde pagina worden ingeladen. Het toont de interactie met de HTML5 Database, lokale opslag, Cookies, AppCache, etc.

Figuur 7 Resource panel GoogleDev (bron:google)

Audits Het audits panel (zie afbeelding 8) analyseert de pagina of webapplicatie wanneer het geladen wordt. Waarna het suggesties geeft voor een optimalisatie van de webapplicatie. Dit varieert van het verminderen van de laadtijd, tot het optimaliseren van de responsiviteit. Audits werkt met page Insights om suggesties voor te stellen.

Figuur 8 Audits panel GoogleDev (bron: Google)


23


Console Het console panel, of beter het Javascript console panel, voor het testen van de webapplicatie (zie figuur 9) twee hoofddoelen. Als eerste worden er logs weergeven met informatie die helpen tijdens het ontwikkelproces. Het tweede hoofddoel is het gebruik van een sheel prompt om te communiceren met de webapplicatie en de devTools. Hiervoor kunnen methodes die beschreven staan in de Console API worden gebruikt. Een voorbeeld hiervan is console.log(). Javascript expressies kunnen direct worden geëvalueerd in de console door gebruik te maken van methoden die door de Command Line API worden beschreven. Deze omvatten $ () opdrachten voor het selecteren van elementen of profiel () om de CPU profiler starten.

Figuur 9 Console panel GoogleDev (bron: Google)


24


4.2 Emmet Emmet is een plug-in die werkt via de editor, waarmee er afkortingen voor HTML -en CSS-elementen en eigenschappen worden gegenereerd. De afkortingen zijn gebaseerd op een bestaande syntax waardoor het makkelijk is om emmet te hanteren. Er wordt dus een code geschreven via afkortingen. Nadien zet de editor de afkoringen om naar een code.

4.2.1

Geschiedenis

Emmet (zie figuur 10) is ontwikkeld door Sergey Chikuynok. Hij startte in 2009 met het project ‘Zen Coding’. De populariteit van het steeg in 2012 en werd zo hernoemd naar Emmet. Emmet lanceerde onlangs een tweede tool, namelijk Emmet Live style. Hiermee kan men tijdens het typen van de code live zien wat er veranderd is. Dit kan simultaan worden uitgevoerd op verschillende platformen en browsers.

Figuur 10 Emmet logo (bron:https://kevinkirsche.com/content/images/2014/Aug/emmetLogo-3.png)

4.2.2

Emmet en HTML

HTML is de meest gebruikte taal door webdevelopers. Heel wat frontend developers gaan hier zeker mee aan de slag. Frontend developers moeten vaak een code herproduceren. Dit is niet optimaal is voor de workflow van het development proces. Emmet verhelpt het development proces. Door gebruik te maken van Emmet kan men aan de hand van tag-namen snel HTML-elementen definiëren. Deze elementen worden genest waardoor je de afkortingen aan mekaar kan koppelen. Het nesten gebeurt via drie operator: de child operator “>”, sibling operator “+” en de parent operator “^”. Door de operators in combinatie met de afkortingen te gebruiken, kan een geneste structuur ontstaan binnen de HTML.

Een voorbeeld; Hoe snel HTML opbouwen De code met Emmet Section > div > h1+p ^ aside

Na omzetten van de code <section>

<


25


Dit is natuurlijk zeer standaard. Daarom is dit niet het enige waarvoor men Emmet kan gebruiken. Loremipsum-teksten, klassen en ID’s kunnen ook allemaal worden toegevoegd. Lorem-ipsum teksten worden gegenereerd door de Lorem-ipsum generator en kunnen door het element “lorem’ gevolgd door een cijfer dat het aantal woorden weergeeft worden toegevoegd. Testcontent kan worden toegevoegd door de handlebars notatie. Klassen en ID’s worden toegevoegd door de normale syntax, “#” en “.” .

voorbeeld de emmet-code Section #main > h1 { Bachelorproef } + p>Lorem8^aside.sidebar

Na omzetting <section id=”main”>
Bachelorproef

Lorem ipsum dolor sit amet, consecteteur adipiscing elit.

Door gebruik te maken van haakjes kunnen elementen worden gegroepeerd. Om het herhalen van een code te vermijden kan men makkelijk elementen dupliceren door gebruik te maken van de duplicator *. Wanneer er een lijst moet worden gemaakt met een bepaalde nummering, kan je door de handlebars tags $ te gebruiken een lijst met oplopende cijfers genereren.

Voorbeeld de emmet-code Section #main > h1 { Bachelorproef } + p*4>Lorem8^aside.sidebar

Na omzetting <section id=”main”>
Bachelorproef






26


Natuurlijk kan er zeer ver gegaan worden met het ontwikkelen in emmet.. Door het aanmaken van eigen kortingen in Emmet kan een developer vaak eenzelfde patroon aanhouden voor het ontwikkelen van codes. Emmet bevat een bestand snippets.json waarin de defenitities van de nieuwe syntax kunnen worden geschreven. Zo moet de code maar één keer worden geschreven om nadien meerdere malen te gebruiken. Dit proces verloopt is helemaal volgens de DRY-methode1. Deze methode kwam in de opleiding van NMCT dikwijls aan bod. Er zijn op het internet verschillende cheatsheets te vinden die helpen bij het snel ontwikkelen via Emmet.

4.2.3

Emmet in CSS

De werkwijze Emmet in CSS is gelijkaardig aan die in HTML. De afkortingen in CSS zijn echter nog korter. Zo wordt padding bijvoorbeeld p. De afkortingen in Emmet bestaan vaak uit 1 lettergreep. De waardes worden ingesteld zonder een dubbelpunt te gebruiken. “Padding-left:10px” wordt in Emmet “pl10”. Doordat de afkortingen soms uit maar 1 lettergreep bestaan, heeft Emmet een bepaald zoekmechanisme dat zoekt naar een match. Dit is handig wanneer je niet de juiste, maar toch gelijkaardige, afkorting gebruikt. “overflow:hidden” kan bijvoorbeeld gedefinieerd worden als oh, ovh of o-h. Emmet beschikt over een ruime documentatie op docs.emmet.io, eenmaal de basics onder de knie zijn, is een HTML-project in geen tijd geschreven.

1

Don’t repeat yourself methode.


27


4.3 Grunt Grunt is een Javascript Task Runner (zie figuur 11). Zoals eerder besproken in hoofdstuk drie, zorgt een taskrunner voor het automatiseren van verschillende taken. Dit kan gaan van optimaliseren van afbeeldingen tot het minifyen van scripts. Grunt gaat gepaard met een heleboel plug-ins die kunnen worden geïnstalleerd. Stuk voor stuk helpen ze met het development proces. Grunt is eigenlijk voor een developer een soort van een digitale assistent dat de vervelende taken op zich neemt.

Figuur 11 Grunt Taskrunner logo

Grunt werkt via node.js en de commandolijn. Voor sommige developers kan dit een struikelblok zijn. Aangezien developers zichzelf vaak niet omschrijven als programmeurs. Grunt is echter zo gemakkelijk in gebruik dat na het inwerken in de tool het zeer vlot werkt. Dit geldt ook voor niet-programmeurs. Dit werd bevestigd door verschillende developers.

4.3.1

Installatie van Grunt

Vooraleer Grunt kan worden geïnstalleerd hebben we node nodig. Dit is zeer eenvoudig te installeren via de website van node (https://nodejs.org/). Wanneer dit in orde is kan er worden overgaan tot de installatie van Grunt. Het ook handig om te weten dat Grunt per project wordt geïnstalleerd.

De Globale interface van Grunt installeren Dit gebeurt via de commandolijn. Dit kan best om de shell te runnen als administrator of sudo te bruiken voor het commando. Npm install –g grunt-cli De installatie van Grunt CLI bevat nog niet de taskrunner. Maar bevat algemene taken die nodig zijn om de taskrunner (de gruntfile) te doen runnen.


28


Maken van een nieuw Grunt project De opmaak van een Grunt-project gebeurt eerst door twee bestanden toe te voegen aan het project  Pacakge.json Pacakge.sjon wordt gebruikt door npm om metadata in op te slaan. Hierin komen alle plug-ins te staan. Het package.json bestand kan worden aangegmaakt van het npm-init commando of door het manueel toe te voegen. Het start-document ziet er als volgt uit { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } } Wanneer de package.json is aangemaakt, moeten de eerste standaard plug-ins worden geinstalleerd. Dit kan via het volgende commando: npm install <module> --save-dev waarbij <module> het te installeren grunt-plug –in is. De flag –-save-dev staat voor packages die enkel geregistreerd/geinstalleerd worden voor tijdens het development proces. Deze package zijn enkel noodzakelijk tijdens het developpen een voorbeeld hiervan is css minify. Wanneer we de package in het algemeen willlen installen gebruiken we de flag –save. In Bower kunnen deze flags ook gebruikt worden.


29


 Gruntfile.js Hier worden alle taken gedefinieerd en geconfigureerd. Ook de plug-ins worden ingeladen. Beide bestanden moeten in de root van het project te staan. Hierbij helpt de Grunt plug-in Grunt-contrib-uglify. Wanneer Grunt wordt gerund op de commandolijn, zal uglify automatisch runnen. Een standaard Gruntfile ziet er uit als volgt:

Wanneer een nieuwe package wordt geïnstalleerd, moet de grunt-file ook worden aangepast om de plug-ins aan te kunnen spreken. Dit is verschillend voor iedere package. In de documentatie van Grunt verdiept men zich in dit aspect. (http://gruntjs.com/).


30


Runnen van een taak Wanneer Grunt is geïnstalleerd en er verschillende taken aangemaakt zijn, zoals bijvoorbeeld de serve taak. Kan er van start worden gegaan met Grunt. Dit is een taak/plug-in dat bij Ecopharma frequent werd gehanteerd. In deze taak wordt de CSS vanuit Less gecompiled geschreven. Ook is er een koppeling van livereload aan de pagina. Wanneer er een wijziging in de code wordt aangebracht. is dit meteen waarneembaar is in de browser. Dit gebeurt zonder op te slaan. De grunt plug-in serve kan geïnstalleerd worden via het commando npm install grunt-serve --save-dev De serve task dat werd gebruikt in het stage bedrijf, is een aangepast versie van de server task. Deze is volledig aangepast is naar de noden van het desbetreffende project van Ecopharma. Dit is geldig voor iedere taak.

Wanneer de taak in het project moet worden uitgevoerd kan dit door het commando (zie figuur 12), kan dit via het commando: Grunt < naam van de taak>

Figuur 12 Runnen van een grunt-task

Besluit Grunt is een krachtig tool. Het enige nadeel is dat er heel wat installatiewerk bij komt kijken. Het duurt even voor wanneer men dit krachtig tool onder de knie heeft. Maar wanneer er vlot met Grunt kan worden gewerkt, spaart men veel tijd uit tijdens het development proces. Grunt wordt echter niet afzonderlijk gebruik, maar wel in combinatie met Bower en Yeoman. Hierbij is Grunt reeds geïnstalleerd en zijn er meer taken voorgeprogrammeerd


31


4.4 Bower Bower is een frontend package-manager, die dus instaat voor het beheren van de project frontend dependencies (cfr. Hoofdstuk 3). Net zoals Grunt maakt Bower gebruik van npm om de installatie te kunnen verrichten en de commandolijn. Dit dient ook eerst geïnstalleerd te worden. .

Installatie van Bower en package Na het openen van de commandolijn kan Bower door één simpel commando geïnstalleerd worden. npm install -g bower Wanneer het commando is uitgevoerd kunnen package worden geïnstalleerd. Dit kan door het commando: bower install <package> De packages van Bower worden opgelaan in /bower-components. Een package kan een Github shorthand, endpoint of URL zijn. Er kan op de website van Bower (http://bower.io/search/) gezocht worden naar de verschillende packages. Hier kan ook iedere keer het juiste commando worden gevonden. Zo kan er bijvoorbeeld een package met de componenten van angular worden geinstalleerd (zie figuur 13). Wanneer het package moet worden gebruikt, kan dit door het package te linken in /bower-components.

Figuur 13 Bower search package

Besluit Bower is zeer simpel in gebruik en zorgt ervoor dat heel wat installaties of downloads niet meer nodig zijn. Net als Grunt wordt dit vaak in combinatie met Yeoman gebruikt, dit voor optimaal resultaat.


32


4.5 Yeoman Yeoman is een scafollding tool en helpt bij het snel opstarten van een nieuw project. Het ondersteunt de beste tools om zo productief mogelijk te zijn. Yeoman biedt verschillende generators aan. Dit zijn de verschilende “boiler-plates”. Dit kan gaan over een Angular webapplicatie, maar ook over een bootstrap project. De generators zijn plug-ins die installatie vereisen. Maar zijn makkelijk aan te spreken door een één commando te hanteren.

Yeoman heeft speciaal voor developers zijn eigen workflow/structuur ontwikkeld. Zo kan men nog sneller webapplicaties te bouwen zonder dat er manuele set-ups nodig zijn. Dit zijn bijvoorbeeld de set-ups voor Grunt en Bower die al zijn voorgeprogrammeerd in de generators van Yeoman. De meeste projecten van Yeoman zijn schaalbaar. Ze kunnen zowel voor grote, als kleine projecten worden gebruikt. Net zoals Grunt en Bower, is Yeoman een opensource project. Dit zorgt ervoor dat heel wat informatie te vinden is en er zelf ook generators worden aangemaakt. De Yeoman workflow (zie figuur 14) bevat drie tools voor een optimale productiviteit bij het development proces. Deze drie tools zijn de scaffolding tools Yo. Zij worden door het nieuwe project aangemaakt en maakt tevens alle configuraties. Task-runner Grunt en Packagemanager Bower beheren alle scripts. De drie tools staan los van elkaar, maar werken zoals eerder werd aangehaald zeer goed samen.

Figuur 14 Yeoman Workflow (bron : http://swiip.github.io/yeoman-angular/slides/img/workflow.jpg)


33


Installatie Yeoman Yeoman vereist ook de npm,. Samen met bower en grunt-cli wordt yo geïnstalleerd door gebruik te maken van volgend commando: npm install -g yo bower grunt-cli gulp Wanneer de installatie is gelukt is, moet er als eerste een generator worden geïnstalleerd. De standaard generator is de web applicatie generator. Het bevat o.a. HTML5 en bootstrap. npm install -g generator-webapp Nadat de generator is geïnstalleerd, kan er een nieuw project worden gemaakt. Eerst en vooral maken we een nieuwe map aan en veranderen we de directory naar die map. Daarna kan het Yo commando worden uitgevoerd. Dit zal een overzicht geven van de geïnstalleerde generators. Wanneer de generator is gekozen, zal er een volledige mappenstructuur (zie figuur 16) met configuraties worden aangemaakt. Dit verloopt volgens de gevraagde generator (zie figuur 15) mkdir my-yo-project cd my-yo-project yo webapp

Figuur 15 Yeoman commando

Figuur 16 Yeoman mappenstructuur

Werken met Yeoman Wanneer de intallatie van de generator is gelukt en de volledige mappenstructuur klaar is, kan men van start gaan met developen. Via Bower worden scripts gedownload en via Grunt kan de webapplicatie runnen (Grunt serve commando) en uiteindelijk gebuild (Grunt) worden. De Gruntfile in een Yeoman is reeds geïnstalleerd en bevat enkele standaardtaken zoals sass compiling, LiveReload, CSS-autoprefixes…


34


Yeoman is dus een all-in tool. Wanneer er een bepaald project wordt aangemaakt, kan die worden gedupliceerd. Enkel Grunt zal dan opnieuw moeten worden geïnstalleerd in het project. Maar dit kan door het commando “npm install grunt” eenvoudig worden opgelost. Op de website van Yeoman zijn er heel wat tutorials te vinden om te werken met Yeoman. Deze zijn zeker aan te raden indien men nog nooit met Yeoman heeft gewerkt is. Ze zijn de ideale instap op de tool.

4.6 Less Less is een preprocessor voor CSS . Dit wil zeggen dat de Less-code uiteindelijk zal worden omgezet naar CSS. Dit gebeurt via een compiler Grunt bevat een Less-compiler en werkt dus goed samen met Less. Verschillende editors bieden ook Less-compilers aan. Less kan ook gecompileerd worden via de commandolijn. Dit met npm. Maar dit is net iets ingewikkelder dan via Editor of via Grunt. Aangezien Less, meer een codetaal is dan een tool, zal men hierover niet verder uitwijden.

Voorbeeld @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }

Heeft als uitput #header { color: #6c94be; }

Het grote voordeel van Less is dat er gebruik kan worden gemaakt van variabelen (starten met @). Deze worden bovenaan gedefinieerd en kunnen daarna via hun naam worden aangesproken. Wanneer er dan bijvoorbeeld een kleur moet worden gewijzigd, kan dit door enkel de variabele aan te passen. Een tweede voordeel is dat Less geneste structuren ondersteund. Less is zeer eenvoudig om mee te starten en is zeker de moeite waard om te hanteren.

Voorbeeld #header { p{ font-size: 12px; a{ text-decoration: none; &:hover { border-width: 1px; } } } }

Zal als resultaat geven #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px }


35


4.7 Bootstrap Bootstrap, of officieel Twitter Bootstrap, is een gratis webfrontend framework. Het framework bestaat uit HTML -en CSS-templates, alsook een heleboel boilerplates. Door gebruik te maken van het Bootstrap framework, wordt het makkelijker om te formulieren, knoppen, navigatie en dergelijke onderdelen op te maken. Voor ieder van deze onderdelen is namelijk al een design template opgemaakt.

Bootstrap zorgt ook voor een optimale mobiele weergave. Dit komt doordat het framework gebruik maakt van ‘rows’ en ‘columns’ (zie figuur 17.) Deze zijn opgemaakt met verschillende breekpunten (screen, tablet, smartphone) zodat dat de webapplicatie steeds responsive is. Dit is natuurlijk enkel zo wanneer het framework juist wordt geïmplementeerd.

Figuur 17 Bootstrap Grit, Bron(http://www.bootply.com/assets/templates/73778.png)

4.7.1 Geschiedenis De originele naam van Twitter Bootstrap was Twitter Blueprint. Zoals de naam doet vermoeden werd dit ontwikkeld bij Twitter. Dit was het werk van Mark Otto en Jacob Thornton. Met het ontwikkelen van Twitter Blueprint wouden developers het ontwikkelingsproces en de bijhorende tools consistent maken. Want hiervoor werkte iedereen op een andere manier met verschillende libaries. Dit leidde tot inconsistentie en was moeilijker te onderhouden. Samen met een heleboel ontwikkelaars bij Twitter, werd Twitter Bootstrap gelanceerd als een open source project op 19 augustus 2011. Tot heden zijn Marc Otto en Jacob Thornton nog steeds verantwoordelijk voor dit project Momenteel zitten we al aan de 3de versie van Twitter bootstrap. Sinds de eerste versie is de grid layout er bij gekomen alsook de mobile-first aanpak en het populaire flat design, zie figuur 18.


36


Figuur 18 Voorbeeld bootstrap 3.0 Template (bron :http://getbootstrap.com/2.3.2/assets/img/examples/bootstrap-examplecarousel.png)

4.7.2

Hoe werkt het

Bootstrap kan gedownload worden via de http://getbootstrap.com/. Het framework bestaat uit meervoudige Less-bestande maar ook css-bestanden die de verschillende componenten stijl geven. Er zijn ook voorpgemaakte HTML-componenten zoals bv. een menu met drop down en er zijn javascript componenten. Er zijn voor Bootstrap verschillende boilerplates/templates die een basis website bevatten beschikbaar. Door middel van classes toe te voegen aan de verschillende elementen, kunnen ze opgemaakt worden volgens het Bootstrap framework. Een voorbeeld wordt hieronder uitgewerkt ter illustratie. Bootstrap is volledig gedocumenteerd via http://getbootstrap.com/.


37


38

Voorbeeld: Een formulier maken met bootstrap. Wanneer er een formulier moet worden aangemaakt voor een website, vraagt dit meestal redelijk wat CSSwerk. Een formulier via HTML is stilistisch niet mooi en trendy (zie figuur 19. Daarom kan er via Bootstrap makkelijk een formulier worden opgemaakt dat voldoet aan de huidige trends. Nadat het formulier is aangemaakt, kan het verder nog worden opgemaakt door de klasse aan te spreken in CSS en hierbij extra CSS toe te voegen.

Formulier zonder opmaak
Een eenvoudig formulier

Uw e-mailadres
Uw Naam
(bron: eigen materiaal) Ik zal aanwezig zijn

waarneembaar, is er nog werk aan de stijl van het formulier. Het formuleer is niet trendy. Maar dankzij Bootstrap kan dit veel eenvoudiger (zie figuur 20).

Formulier met Bootstrap Stap 1 : bootstrap downloaden en Less/CSS bestanden koppelen aan uw project Stap 2 : Het formulier opmaken volgens het bootstrap framework  Form-groups toevoegen  Bootstap-Klasses toevoegen aan de element
Een eenvoudig formulier

Uw e-mailadres

Uw Naam Figuur 20 Formulier opgemaakt met het
bootstrap framework ( bron: eigen materiaal)
Ik zal aanwezig zijn



Zoals waar te nemen kan men door doorvoeren enkele kleine aanpassingen en het toekennen van de Bootstrap klassen, een trendy resultaat bereiken. resultaat bereikt dat helemaal in de huidige trends past. Aangezien Bootstrap een open-source framework is, kan het worden aangepast naar eigen wensen. Er zijn dan ook een heleboel bekende websites die gebruik maken van het Bootstrap framework.

4.8 Litmus Litmus is een online tool dat vooral instaat voor het debuggen van HTML-mails. De mails moeten voldoen aan verschillende normen om in iedere mail-cliënt en browser de juiste mail te tonen. Litmus test de code van de mails en neemt verschillende screenshots van iedere mail-cliënt en browser. Naast de e-mail tester heeft Litmus ook een builder voor HTML-mails, alsook een spam-filter tester. Litmus biedt ook page-view tester aan voor websites. Maar het hoofddoel van Litmus is email-testing. Litmus is geen gratis tool. Maar om te testen bieden ze een trailer versie aan. Deze trailer is zeven dagen geldig.

4.8.1

Geschiedenis

Litmus is opgericht in 2005 door drie vrienden: Paul Farnell (CEO), Matthew Brindley (CTO) en David Smalley (COO). Ze deden freelance webdesign opdrachten. De drie vrienden waren op zoek naar een crossbrowser tester. Maar de meeste voldeden niet aan hun eisen of waren veel te duur. Daarom werd SiteVista ontwikkeld. Eén week na de lancering waren er al meer dan 30 betalende klanten die enthousiast waren over het systeem. Maar de vraag naar e-mail testing bleef. Na het afwerken van hun persoonlijke projecten, richten ze samen Litmus op dat tot op vandaag gespecialiseerd is in e-mail testing.

4.8.2

E-mail testing

Het testen van e-mail op crossbrowser en mail-cliënt verloopt gemakkelijk.. Na het ontwerpen van de HTMLmail, kan men het eenvoudig doorsturen van de HTML naar het opgegeven e-mailadres of door kopiëren van de code. De code die u kan zien in het voorbeeld is ontwikkeld met behulp van het Zurb Ink framework en Yeoman/Grunt. Daarna zullen er verschillende screenshot gemaakt worden van de e-mail in de verschillende browsers/mailcients.


39


Voorbeeld testen van een html mail. Stap 1 Inloggen op Litmus. Litmus is niet gratis, maar er kan steeds een 7-dagen proefversie worden verkregen. Inloggen kan door het invullen van de e-mail en het wachtwoord (zie figuur 21).

Figuur 21 Litmus inlogscherm

Stap 2 Starten nieuwe test Na het inloggen krijg je een overzicht van de reeds uitgevoerde testen. Er kan dan naar de oude testen gekeken worden en eventueel opnieuw getest worden. Of een nieuwe test gestart worden. Dit kan door op de knop “New Email Test” te klikken (zie figuur 22)

Figuur 22 Litmus startscherm


40


Stap 3 Testen van mail Wanneer er een nieuwe test gestart is, moeten eerst nog verschillende mail-cliënt en browsers aangeduid worden waarop er getest moet worden. Nadien kan men verder door een druk op de “start test” knop (zie figuur 23). Het testen zelf kan op verschillende manieren.. Een eerste manier is het doorsturen van de HTMLemail naar het opgegeven e-mailadres. De tweede manier is de HTML-code te kopiëren in het invoer vak (zie figuur 24). Daarna zullen er verschillende screenshots van de browsers en mail-cliënt worden gegenereerd. Deze screenshots zijn eenvoudig te evalueren door ze goed of af te keuren. Per mail test kunnen er verschillende versies opgeladen worden. Dit kan door de knop

Figuur 23 Keuze browsers en mailclients litmus

Figuur 24 Test you Email Litmus


41


Stap 4 evalueren van de testen Na het doorgeven van de code worden er allemaal screenshots gegenereerd di één voor één kunnen worden beoordeeld. Dit gebeurt door op het vinkje te klikken om het goed te keuren of op het kruisje om het af te keuren. Per screenshot kan er ook interactief worden getest. Je kan dan de HTML/CSS aanpassen om ervoor te zorgen dat de e-mail toch juist wordt getoond (zie figuur 25 en 26). Naast de verschillende screenshots kan men het inladen van de e-mail, de onderwerplijn en de linken testen (zie figuur 27).

Figuur 25 Overzicht van de verschillende screenshots

Figuur 26 Evaluatie van een screenshot in Litmus


42


Figuur 27 testen van afbeeldingen in litmus

4.8.3

Besluit

Litmus is een uitgebreid online tool die het makkelijk maakt om een e-mail zo gebruiksvriendelijk mogelijk te maken. Dit door het crossbrowser/mail-cliënt aspect als ook het spam-filter en de image check. Deze extra opties zorgen ervoor dat de gebruikers en lezer van de e-mail sneller de mail zullen openen of dat de e-mail niet meer bij spam terecht komt. Het nadeel is dat de Litmus een betalende tool is. Er is een zevendaagse gratis proefversie, maar vanaf dan moet er betaald worden voor de service. Indien er regelmatig e-mails worden gestuurd, is Litmus zeker en vast de moeite waard om in te investeren. De basisprijs is 79 dollar per maand of 790 dollar voor een jaar (zie figuur 28). Dit is zeker niet te duur is voor de vele voordelen die Litmus aanbiedt.

Figuur 28 Prijzen litmus (bron: eigen materiaal)


43


4.9 Besluit Er zijn heel wat tools op de markt en er zouden nog heel wat pagina’s gevuld kunnen worden met hun werking ervan. Deze bachelorproef bespreekt de tools die na grondig onderzoek opvielen en die bij Ecopharma werden gehanteerd. De developers van Ecopharma zijn tevreden van de tools en getuigen dat ze ook helpen bij het ontwikkelingsproces. zijn en ze ook helpen in het development proces. Natuurlijk moet er steeds in acht worden genomen dat deze tools vooral met een persoonlijke voorkeur te maken hebben. Soms vormen tools een drempel omwille van het aanleerproces. De tools die reeds aan bod kwamen vragen wat installatiewerk, maar van zodra de installatie achter de rug is, zal men de efficiënte werking ervan onmiddellijk waarnemen. Het volledige development proces zal voor een groot stuk geoptimaliseerd worden. Hoe meer ervaring met de tools, hoe beter er kan ingespeeld worden op de projecten en hierdoor zal de optimalisatie verbeteren.


44

5


HET VOORDEEL VAN HET GEBRUIK VAN TOOLS


45


5 WAT IS HET VOORDEEL VAN HET GEBRUIK VAN TOOLS Het gebruik van tools biedt heel wat voordelen. Een belangrijk voordeel is dat het gebruik van tools ervoor zorgt dat een deel van de workflow wordt geautomatiseerd. Dit wil zeggen dat in tegenstelling tot de manuele uitvoering van een heleboel handelingen, het nu automatisch of door een bepaald commando verloopt. Natuurlijk zijn er ervaren programmeur die al een snelle workflow hebben en geen tijd of zin hebben om nieuwe tools aan te leren. Maar door onderzoek naar de verschillende tools en het raadplegen van verschillende bronnen, kan er worden aangenomen dat tools handig zijn. Na een korte leerperiode biedt dit hulp tijdens het ontwikkelingsproces. De optimalisatie zorgt ervoor dat het eindproduct sneller wordt geproduceerd. Het gebruik van tools zorgt ook voor een professionelere aanpak. Door de tools te gebruiken, nl. de frameworks, kan men gebruikmaken van verschillende voorgeprogrammeerde componenten die men steeds weer nodig hebt. Dit zorgt voor heel wat minder opzoekingswerk. Debugging is ook amper nodig. De componenten zijn er en met een juiste implementatie zullen die dan ook werken zonder het oplossen van al te veel bugs. Voor minder ervaren developers kan het gebruik van frontend tools een positieve invloed hebben op hun development proces. Dit omdat ze een leidraad hebben doorheen hun project en de tools meestal goed gedocumenteerd te vinden zijn op het internet. Er zijn ook een heleboel tutorials te vinden. De tools zijn snel aan te leren en verruimen daarmee ook de kennis van de developer. Dit is een opsomming van maar enkele voordelen die aan het gebruik van tools zijn gekoppeld. Voor iedere developer is echter het voordeel verschillend. Natuurlijk zijn er ook een paar nadelen gekoppeld aan het gebruik van tools. De meeste tools hebben standaard verschillende (basis) features . Wanneer je echter iets specifieker wil, kan het zijn dat je hiervoor in de source code heel wat zaken verder moet ontwikkelen. Hierdoor kan je men stuiten op enkele beperkingen van een bepaalde tool. De commandolijn is voor een groot deel van de tools een trouwe partner. Men moet dan ook een klein beetje vertrouwd zijn met de commando’s. Dit kan voor sommige onervaren developers in hun nadeel spelen. Maar er zijn op het internet een heleboel online cursussen, tutorials e.d. te vinden die hierbij kunnen helpen.


46

6


DE WERKING VAN E-COMMERCE BEDRIJVEN


47


6 Werking van e-commercebedrijven Voordat er een algemeen besluit kan worden gevormd rond de optimalisatie van verkoopcijfers met behulp van tools, is het noodzakelijk om te bekijken hoe e-commerce momenteel functioneert. Hoe de situatie is in België is en hoe het er in de praktijk aan toegaat.

6.1 De geschiendenis van E-commerce e-commerce vond zijn oorsprong al in midden jaren zestig. Toen verliep alles via de post of fax. In 1979 vond de Brit Michael Aldrich teleshopping uit. Dit kwam wat al meer in de buurt van e-commerce. Toen werd een product op de televisie getoond. Nadien kon de klant het product bestellen via telefoon. Hiervoor werd een bestellingprogramma geïnstalleerd. Deze telefoons waren namelijk aan de televisie gekoppeld (zie figuur 29). In 1980 doken echter al de eerste e-commerce systemen op. De allereerste werd gemaakt door Redifon Computers. Michael Aldrich had vooral een business-to-consumer (B2C) idee over e-commerce. Maar de Figuur 29 Aldrich Michael met zijn eerste systemen werden echter enkel gebruikt voor business-to- uitvinding (bron: Aldrich Archives) business (B2B). De eerste e-commerce systemen bestonden uit een televisie met een simpele interface en een traditionele telefoonlijn. In 1984 werd voor het eerst online geshopt door een consument. Dit was de 82-jarige Jane Snowball. Haar eerste bestelling bestond uit boodschappen bij Tesco. Het was een sociaal experiment omtrent oudere mensen die niet meer bekwaam waren om boodschappen te doen. Over heel Europa doken er gelijkaardige systemen op. In 1982 ontwikkelde France Télécom het Minitel system. Het was een succesvol systeem was. Desondanks dit enkel ontwikkeld wasvoor B2B. Het systeem wou niet werken voor B2C. Dit kwam door het feit dat de technologie nog niet ver genoeg was gevorderd. In 1990 kwam daar verandering in. Tim Berners-Lee ontwikkelde HTML en het World-Wide-Web. Het internet mocht tot 1995 nog niet gebruikt worden voor commerciële doeleinden. In 1995 werd dit verbod opgeheven. Verschillende commerciële browsers werden ontwikkeld samen met een protocol voor de beveiliging van online aankopen. Dit betekende het begin van online shopping voor B2C. De eerste webshops doken op en in 1996 werden amazon.com en eBay geboren. Sindsdien komen er dagelijks nieuwe technieken bij die het online shoppen nog makkelijker maken.


48


6.2 Definitie van E-commerce E-commerce of elektronische commerce is het verhandelen van diensten of goederen met behulp van informatie en communicatie technologieën, namelijk het internet. E-commerce kent de laatste tijd ook een subcategorie, m-commerce. Dit is e-commerce die gebeurd via een wireless verbonden toestel. Dit gebeurt meestal via een tablet of smartphone. Momenteel zijn er vier soorten e-commerce, namelijk :    

Business-To-Business (B2B) Business-To-Consumer (B2C) Consumer-To-Business (C2B) Consumer-To-Consumer (C2C).

6.3 E-commerce in België De e-commercemarkt in België groeit dagelijks . Comeos 2doet jaarlijks een onderzoek naar e-commerce in België (zie bijlage). Hieruit bleek dat er nog heel wat toekomst in e-commerce zit. In 2014 was de totale omzet van de e-commercemarkt 5.620.000.000 euro. Ten opzichte van het jaar voordien was dit een groei van 15%. Per maand komen er 105 webshops bij. Reeds 61% van de Belgen kocht op het internet. De meeste klanten kopen kledij online. De rubriek mode is populair. Deze bevindingen werden uit het onderzoek van Comeos in 2014 gehaald (zie figuur 30). Tijdsbesparing is de grootste reden waarom mensen online producten verschaffen. Het is meestal ook een stuk goedkoper en de producten worden aan huis geleverd. Wat opvalt is dat zowel jong als oud op het internet koopt. Er is dus niet bepaald één doelgroep waarop men zich bij e-commerce mag richten. Dit wil dus zeggen dat een webshop die geen bepaald doelpubliek heeft, dus voor iedere leeftijd toegankelijk en bruikbaar moet zijn, Cool-blue is hierbij een goed voorbeeld. Zij hebben een zeer breed doelpubliek en daarom is hun webshop zo klantvriendelijk als mogelijk gemaakt.

2 Comeos is de vertegenwoordiger van de handel en diensten in België. Betere verkoopcijfers met frontend-webdevelopment tools in e-commerce

49


Figuur 30 In welke sector wordt het meeste online gekocht (bron comeos onderzoek ecommerce 2014)

De tevredenheid van de klanten was in 2014 nog nooit zo goed. Liefst 58% procent is tevreden over de ervaring die ze hadden met de webshop (zie figuur 31). Dat is zeker en vast al een mooi resultaat. Maar er is natuurlijk steeds ruimte voor verbetering. Die verbetering kan er komen door gebruik te maken van frontend development tools. Hiermee kan men de website optimaliseren, het development proces te verkorten en een betere tevredenheid te creëren. Die tevredenheid zou dan logischer wijzer moeten resulteren in een betere omzet.

Figuur 31 tevredenheid webshops (bron comeos onderzoek ecommerce 2014)


50


6.4 Hoe de e-commercewereld geld verdient Hun grootste inkomstenbron is afkomstig de online verkoop van de producten in de webshop. Maar dit is echter niet de enige methode waarmee men omzet maakt. Van zodra de bezoekers op de webshop terechtkomen, start de marketingcampagne. De eerste stap bestaat uit het triggeren van de bezoekers zodat zij een product zouden aankopen. Maar hierbij eindigt de marketingcampagne natuurlijk niet. Bezoekers kunnen zich inschrijven voor een nieuwsbrief, waardoor ze extra korting, nieuwigheden en productupdates kunnen ontvangen. Langs deze weg worden de bezoekers zelf nog na hun bezoek getriggerd om toch tot een aankoop over te gaan. De nieuwsbrieven zijn een taak voor de developers. Zij coderen namelijk deze nieuwsbrieven met tools zoals een het framework Zurb Ink en testen nadien de mails met Litmus. Wanneer er wel een bestelling wordt geplaatst, start eigenlijk een marketing-na-verkoop campagne. Dit gebeurt door mails te versturen met de vraag voor feedback of herinnering dat hun product bijna aan vervanging toe is3. Door dit te doen ontstaat er een cyclus van steeds terugkerende klanten. Stel dat een bezoeker wel dingen plaatst in zijn “winkelmandje” maar toch niet overgaat tot aankoop kan er een “abandoned cart” mail gestuurd worden. Deze mails herinneren de bezoeker dat ze geïnteresseerd zijn in een product en worden zo aangezet om het product toch te kopen. Natuurlijk is een goede webshop, waarbij een goede ux-design en klantentevredenheid cruciaal om goede verkoopcijfers te creëren. Om de bezoekers naar de webshop te lokken zijn er verschillende manieren. In E-commerce Finest 50 van Jungle Minds staan er verschillende technieken uitgelegd die extra bezoekers kan lokken naar de webshops. Dit zijn steeds ideeën die een combinatie zijn van zowel het marketingteam als het developersteam. Het is dan ook logisch dat developers een cruciale rolspelen in webshops. Een voorbeeld dat wordt besproken in Junge Minds’ E-commerce Finest 50, is het integreren van de webshop op Facebook. De webshop bol.com deed dit door een spel te ontwikkelen voor hun Facebook-pagina. In dit spel was er een mogelijkheid om producten te winnen waarin de Facebook-gebruiker mogelijks interesse zou hebben. Dit aan de hand van de typische fruitmachines die soms op kermissen te vinden zijn. Naast het spel werden er ook producten getoond die in de interesse lagen van de gebruikers zijn vriendin. Dit volledig in dezelfde layout als de webshop van bol.com.

3

Dit gebeurt meestal wanneer we spreken over verbuiksproducten. Zoals dagcreme, voedingssuplementen, kruiden…


51


Figuur 32 facebookpagina ecopharma (bron eigen materiaal)

Bij Ecopharma wordt er gebruikgemaakt van Google Adwords en een intensieve sociale mediacampagne op Facebook, waarin er drie keer per week een post wordt geplaatst die extra bezoekers zou moeten genereren (zie figuur 32). De webshop van Ecopharma heeft ook een blog die is gekoppeld aan de webshop.

AdWords is een belangrijk onderdeel van zoekgigant Google Inc.. Het laat bedrijven toe reclame te maken op de Google-websites, alsook op websites die gebruikmaken van Google AdSense. Het zijn advertenties gebaseerd op zoekwoorden gedefinieerd door de adverteerder. Als er op één van deze zoekwoorden wordt gezocht, wordt de advertentie naast of boven de zoekresultaten weergegeven. Het is de grootste bron van inkomsten voor Google Inc. (16,4 miljard euro in 2007) (http://nl.wikipedia.org/wiki/AdWords


52


6.5 Hoe worden de resultaten gemeten De resultaten worden in een webshop vooral gemeten via Google Analytics (zie figuur 33). Dit is een dienst van Google om statistieken over een website bij te houden. Er kunnen uitgebreid statistieken worden bijgehouden. Er kan bijvoorbeeld worden bijgehouden hoeveel mensen er een item in de virtuele winkelkar plaatsen en hoeveel er effectief overgaan tot aankoop. Dit wordt uitgedrukt in convertion rate. Volgens Smartinsights ligt een goede conversie rating tussen de 2,5-4% voor het verkopen en een convertion rate van 8% voor het toevoegen aan het winkelmandje. Deze conversie wordt ook in het stagebedrijf als doel voorgehouden. Wanneer de convertion rate laag ligt weten de developers dat er een probleem is. Dan kan er verder worden geconcentreerd op de Googleanalytics resultaten om bv. te zien bij welk toestel of welke browser dit zo laag is. Daarna kan men de specifieke browser te testen op fouten. In bijlage is een testing onderzoek dat werd uitgevoerd bij Ecopharma weer te vinden. Dit omdat op bepaalde browsers plots de covertje rate zeer laag geworden was en er dus een probleem waarneembaar was in de webshop. Andere technieken zoals VWO en heatmaps tonen aan hoe bezoekers navigeren, klikken of problemen ondervinden op de webshop. Dit zorgt ervoor dat de developers zien waar er bugs optreden of waar er verandering nodig is op gebied van klantenervaring.

Figuur 33 Google analytics conversion Android toestellen Ecopharma


53


6.6 Development proces in e-commerce Het development proces in e-commerce bestaat niet enkel uit het ontwikkelen van de webshop. Er zijn ook enkele andere zij-processen waarvoor de frontend-developer in staat. Dit kan bijvoorbeeld het ontwikkelen van een HTML-banners, nieuwsbrieven, productwebsites en interne toepassingen. Een e-commerce bedrijf is dus zoveel meer dan enkel webshop. Ook kan het development proces van een webshop in twee delen gesplitst worden. Het eerste deel, waarin er van nul begonnen wordt en het tweede deel dat bestaat uit kleine en grote updates van de webshop, met dar dan de aftakkingen naar de zijtaken. Het proces start zoals bij de meeste met het brainstormen, ux-design en wireframing hiermee wordt er een bepaalde structuur bepaald van de webshop bepaald, of indien het over een update gaat, wat er moet Brainstrom Fase Ux-design & Wireframing Design

Ondersteunende taken

Verzamelen Van Data Ontwikkelen Van Database

Feedback Bezoekers analyse webshop

Nieuwsbrieven Html-banners Product websites

Backend Development Frontend Development

Lancering Webshop Updaten Website

Testing & Debugging

Testing & Debugging

Prototype

Figuur 34 Development proces e-commerce

veranderd worden en hoe. Daarna kan er overgegaan worden tot het verzamelen van de juiste data, die in de database te implementeren of aanpassen. Daarna kan het backend development proces starten samen met de frontend. Het frontend development bestaat uit het slicen, het omzetten van het design naar code, van de website, SEO optimalisatie, mobiele optimalisatie, … Dit m.b.v. van de tools die reeds aanbod kwamen. Ten slotte moet er ook nog communicatie gemaakt worden met de backend van de webshop. Tijdens en na dit onderdeel is het belangrijk om de webshop grondig te testen te debuggen, dit kan ook met de tools die reeds toegelicht geweest zijn, wanneer de grootste bugs en fouten weggewerkt zijn kan er een prototype gelanceerd worden. Dit prototype, dient ook getest te worden vooral de webshop of update gelanceerd wordt. Wanneer hier ook weer alle fouten uit zijn kan de webshop of de update gelanceerd worden. Het proces is hier nog niet gedaan. Het is belangrijk om feedback van de gebruikers te gebruiken voor de optimalisatie van de webshop. Als ook zijn er nu verschillende zij-taken die in verband staan met de webshop die de frontend developer kan uitvoeren. Wanneer het proces afgerond is start meestal het proces opnieuw.


54


6.7 In de praktijk Door contact op te nemen met verschillende development bedrijven en ook door ervaring binnen het stagebedrijf blijkt dat heel veel bedrijven gebruik maken van tools. Ieder bedrijf heeft zijn eigen workflow van het frontend proces maar algemeen kan aangenomen worden dat er verschillende tools binnen in het development proces gebruikt worden, dit om snel van start te kunnen gaan met een project, enkele taken uit handen te kunnen geven. Waaronder bijvoorbeeld het compileren van sass naar CSS en het minifyen er van. Ook wordt er zeer vaak gebruik gemaakt van framework om te starten vanuit een goede basis. Er komen echter steeds nieuwe tools op de markt en het development proces kan steeds geoptimaliseerd worden door nieuwe technieken toe te voegen of bepaalde taken nog verder te optimaliseren. De e-commerce bedrijven proberen de klanten zo tevreden mogelijk te houden, dit door regelmatige updates, mobiele weergave, en een goede klantondersteuning bij het bestel proces. De regelmatige updates kunnen gerealiseerd worden met een goede workflow waarbij de tools een goed hulpmiddel zijn. De mobiele weergave kan ook met behulp van tools gemaakt en getest worden. Wat een meerwaarde biedt voor de webshop. Er zijn reeds studies op de markt die aantonen dat webshop met een mobiele weergave betere convertiecijfers behalen. Daarom is het belangrijk om in de toekomst de webshop vanuit een mobiele-first approach te maken. Dit wil zeggen dat de mobiele weergave zo optimaal mogelijk moet gemaakt worden. De frontend development tools kunnen hierbij helpen.


55

7


BESLUIT


56


7 BESLUIT 7.1 Algemeen besluit Uit de bachelorproef kan besluiten dat een goede workflow nodig is voor het realiseren van een webshop. Verschillende studies tonen aan dat vooral de mobiele weergave van de webshop noodzakelijk is voor betere verkoopcijfers. Het gebruik maken van verschillende tools kan er (snel) in dit proces zorgt voor een snelle realisatie er van. De frontend development tools helpen hoofdzakelijk bij het optimaliseren van het development proces, waarbij testing het belangrijkste onderdeel is. In deze fase is de ondersteuning van de tools van groot belang en bijna noodzakelijk, de tools zorgen namelijk voor kwalitatieve testen. Hierdoor kunnen fouten en bugs tot een minimum herleid worden. Fouten en bugs in een webshop zorgen namelijk voor ergernissen bij de bezoekers van de webshop en soms maken ze het bestellen via de webshop onmogelijk, wat nadelig is voor de verkoopcijfers. De front-end tools helpen bij het optimaliseren van het volledige development proces. Een optimaal proces zorgt vaak voor een stabielere webshop waarbij updates sneller gelanceerd worden. Deze updates spelen vaak in op de klant tevredenheid en streven dus naar betere verkoopscijfers. Tevreden klanten gaan vaak over tot kopen, dus er is wel degelijk er verband tussen werken met tools en het optimaliseren van de verkoopcijfers. Dit wordt bevestigd door het belang van de mobiele weergave en het belang van het testing-fase van een webshop. Er mag moet wel rekening worden gehouden dat tools een hulpmiddel zijn, en dat gebruik van de tools niet automatisch zorgt voor betere verkoopcijfers. Iemand die ontwikkelt zonder tools kan natuurlijk een gelijkaardige webshop bouwen. Maar hij zal heel veel tijd steken in taken die anders geautomatiseerd zijn. Als slot kan men besluiten dat frontend development tools een hulpmiddel zijn voor het front-end development proces van de webshop en dus mee helpen bij het optimaliseren van verkoopcijfers. Maar er is geen rechtstreeks verband tussen tools en de verkoopcijfers.


57


7.2 Persoonlijk besluit Deze bachelorproef was dan niet helemaal gekoppeld aan mijn stage, toch heb ik heel veel kunnen onderzoeken op de stage hierrond. Ik kreeg de kans om heel wat tools te ontdekken en aan te leren. Het was dan ook een logische keuze om een verband te zoeken rond verkoopcijfers en de tools. En rond dit verbrand mijn bachelorproef te maken. Aangezien de webshop in de eerste weken op de stage een grote update kreeg. Dit zou het mogelijk maken om een vergelijk op te stellen tussen de twee periodes. Want bij de update kwamen heel wat tools aan bod. Jammer was er een belangrijke tool vergeten. Namelijk het crossbrowers-testen via de tool Browserstack. Hierdoor werd het vergelijking tussen de twee periodes wat moeilijker. Het effect dat hierdoor ontstond, kwam pas na twee-drie aan het licht. Het werd duidelijk dat hierdoor heel wat orders mislopen waren. Dit kwam door een bug in Internet Explorer en de Android Browser. Na het ontdekken van de slechte conversie cijfers die het aan het licht bracht, kreeg ik de kans om mij hier in te verdiepen. Ik spitste de google analytics cijfers uit en testte de webshop met browserstack om de bug te vinden. Zodat de andere developers er een oplossing voor konden zoeken. Gelukkige kon ik al snel ontdekken wat voor de problemen zorgde. Waardoor het development team snel een oplossing kon. Dit is echter nog niet lang genoeg geleden om nieuwe resultaten er van te bekijken, en het verschil tussen de verkoopscijfers te vergelijken. Maar er wat ik hieruit kon ik wel een besluit vormen. Ik denk dan ook mocht er voor de lancering gebruik gemaakt zijn geweest van de tool dat de verkoopcijfers wel degelijk geoptimaliseerd waren geweest. Dit is echter maar één enkel praktijkvoorbeeld, wat het moeilijk maakt om een volledige conclusie er over te maken. Het opzoekingswerk dat ik reeds deed wijst wel uit dat tools helpen in het development proces en dat dus ook mede verantwoordelijk zijn voor het optimaliseren van de verkoopscijfers. Ik kijk met een goed gevoel terug op mijn bachelorproef, ik heb mij kunnen verdiepen in het onderwerp en hoop dan ook andere bedrijven hier inspiratie kunnen uitputten om hun development proces te optimaliseren. Dit door gebruik te maken van de frontend development tools. Met de kennis en ervaringen die ik tijdens de bachelorproef en stage op kon doen, hoop ik in mijn latere carrière nog te kunnen gebruiken. Mijn eigen development workflow is door de stage en bachelorproef alvast zeer veel veranderd en geoptimaliseerd. Bepaalde tools die ik vroeger nutteloos vond, zoals Less en Sass . behoren nu tot mijn favoriete tools. Ik ga dus zeker proberen om mijn kennis hierin zeker te verruimen.


58


Referentielijst  N.N, Supersnel HTML, Webdesigner 2015, uitgave 73, p. 34-40  Escoriza, L. L. (2014). Analysis, design and development of a web-shop template using SPHERE.IO ecommerce platform (Master thesis Degree in Informatics Engineering). Geraadpleegd van https://upcommons.upc.edu/pfc/bitstream/2099.1/20928/1/88504.pdf  Anderson, T. (2014). Experiences from the Development of a Webshop Using Scrum Methodology (Bachelor Project). Geraadpleegd van http://www.divaportal.org/smash/get/diva2:721996/FULLTEXT01.pdf  Jungle Minds. (2012). Fines 50, De 50 beste e-commerce cases 2012. Amsterdam, Nederland: BBP media. (Verwijderen | Wijzigen | Verwijzing in tekst)  Jungle Minds. (2013). Fines 50, De 50 beste e-commerce cases 2013. Amsterdam, Nederland: BBP media.  Dominique, M. (2015). E-commerceBelgium 2014. Geraadpleegd van http://www.comeos.be/files/do cs/E-commerce-2014.pdf  Bower why frontend package manager. (z.j.). Geraadpleegd van http://frontendbabel.info/articles/bower-why-frontend-package-manager/  Litmus story. (z.j.). Geraadpleegd van http://yourstory.com/2012/08/litmus/  case studies mobile convertion. (z.j.). Geraadpleegd van http://zurb.com/library/search?query=mobile%20conversion&property=quips  e-commerce. (z.j.). Geraadpleegd van http://en.wikipedia.org/wiki/E-commerce  e-commerce today. (z.j.). Geraadpleegd van https://www.digimedia.be/ecommercetoday/  ecommerce analytics. (z.j.). Geraadpleegd van http://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/  essentials tools. (z.j.). Geraadpleegd van http://code.tutsplus.com/tutorials/essential-tools-for-amodern-front-end-development-workflow--pre-66083  frontend development framework. (z.j.). Geraadpleegd van http://www.merixstudio.com/blog/frontend-frameworks-introduction-part-2/  frontend development tools. (z.j.). Geraadpleegd van https://psdtowp.net/frontend-developmenttools.html  frontend-tools. (z.j.). Geraadpleegd van http://fredsarmento.me/frontend-tools/  frontend-tools. (z.j.). Geraadpleegd van http://www.quora.com/What-are-the-best-tools-for-frontend-development  taskrunners. (z.j.). Geraadpleegd van http://blog.cozycloud.cc/technic/2014/06/18/task-runnerscomparison/  what are frameworks. (z.j.). Geraadpleegd van http://www.awwwards.com/what-are-frameworks-22best-responsive-css-frameworks-for-web-design.html  why stop using grunt. (z.j.). Geraadpleegd van http://blog.keithcirkel.co.uk/why-we-should-stopusing-grunt/


59

7


BIJLAGES


60


BIJLAGEN PERSARTIKEL Webshops zijn niet meer uit ons leven weg te denken. Je kan shoppen vanuit je zetel of gewoon aan de keukentafel, je auto nemen is niet meer nodig. Deze digitale winkels worden natuurlijk gemaakt door mensen, die zo snel mogelijk en constant aan de noden van de klanten willen voldoen en hierop willen inspelen. Het ontwikkelen van een webshop is een lang proces met verschillende onderdelen zowel langs de frontend en backend zijde. Natuurlijk eenmaal de webshop gelanceerd is moet hieraan constant gewerkt worden, de tijd staat namelijk niet stil en komen dagelijks nieuwe technieken uit en ook de klant zijn noden en tevredenheid kan ieder moment veranderen. Daarom is het noodzakelijk dat hier zo snel mogelijk kan op ingespeeld worden. We kunnen dus zeggen hoe sneller er een update is hoe tevredener de klant. Natuurlijk die updates komen er niet zomaar. Na een volledig proces te doorlopen hebben kan een update gepubliceerd worden. In dit proces zitten vele taken. Door het optimaliseren van deze taken d.m.v. tools kan het proces ingekort worden. Dit zorgt er voor dat updates sneller beschikbaar zijn voor publicatie. De updates zorgen voor een betere klanten tevredenheid, aangezien hun eisen beter ingevuld zijn. Wat dus betere verkoopscijfers zou moeten opleveren. Als we de e-commerce markt bekijken en enkele vakspecialisten raadplegen kunnen we concluderen dat er nog heel veel potentieel in de e-commerce markt zit. Meer en meer wordt de vraag voor mobiele webshop groter. Mobiele webshop zouden namelijk zorgen voor betere verkoopcijfers. Daar gebruik te maken van tools kan er op een eenvoudigere manier mobiele weergaves gegeneerd worden. We kunnen dus concluderen dat tools zeker en vast een hulpmiddel zijn voor de optimalisatie van verkoopcijfers, maar over een rechtstreeks verband kunnen we niet praten.


61


ONDERZOEK BROWSERSTACK Testen in IE 8 - XP Zeer moeilijk om iets te bestellen, je kan niet in de cart geraken, enkel door de url te veranderen.

Testen IE8 – WIN 7 Website is beschikbaar maar wanneer er op bestellen gedrukt wordt verdwijnt het paarse.

Testen IE9 – WIN 7 Bij toevoegen van een product, loopt de website vast, ze komen wel in de cart. Bestellen oke.

Testen IE10 – WIN 7 Wanneer je op de snel bestellen knop druk, blijf het wieltje draaien en lijkt het alsof er niets in de cart komt. Wanneer je dan op de cart klikt zit het er wel in. Op de detail pagina is het zelfde probleem

Algemeen Je kan ook letters ingeven bij het telefoon nr Safari in-app proberen testen, maar lukt niet. Aanmelden op facebook enz verder gaan nr de webshop opent safari gewoon nieuw ventser Betere verkoopcijfers met frontend-webdevelopment tools in e-commerce

62

Bachelorproef Jolene Fouquaert. Woord vooraf

Recommend Documents

Bachelorproef

Bachelorproef

Een eenvoudig formulier

Een eenvoudig formulier