Bachelorproef Jolene Fouquaert. Woord vooraf

Transcriptie

1

2 1 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 e- commerce 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.

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

4 3 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.

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

6 5 Inhoudsopgave Inleiding De context Het bedrijf Het belang van tools De verschillende tools die gebruikt kunnen worden Het belang van projecttijden De projecttijd test Opgave Besluit Classificatie van de tools Taskrunners Package management Scaffolding tools Debugging Preprocessors Framework De populairste merken Google Development Tools Geschiedenis De werking Emmet Geschiedenis Emmet en HTML Emmet in CSS Grunt Installatie van Grunt Bower Yeoman Less Bootstrap Geschiedenis Hoe werkt het Litmus Geschiedenis testing... 39

7 Besluit Besluit Wat is het voordeel van het gebruik van tools Werking van e-commercebedrijven De geschiendenis van E-commerce Definitie van E-commerce E-commerce in België Hoe de e-commerce wereld geld verdient...fout! Bladwijzer niet gedefinieerd. 6.5 Hoe worden de resultaten gemeten Development proces in e-commerce In de praktijk Besluit Algemeen besluit Persoonlijk besluit Referentielijst Bijlagen... 61

8 7 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 e- commerce 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

9 1 DE CONTEXT Bachelorproef Jolene Fouquaert 8

10 9 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.

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

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

13 2 DE PROJECT TIJD TEST Bachelorproef Jolene Fouquaert 12

14 13 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

15 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 Met tools Zonder tools

16 3 CLASSIFICATIE Bachelorproef Jolene Fouquaert VAN DE TOOLS 15

17 16 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

18 17 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.

19 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: 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:

20 4 DE Bachelorproef Jolene Fouquaert POPULAIRSTE MERKEN VAN TOOLS 19

21 20 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 Geschiedenis Zoals de naam het al vermeld zijn deze tools ontwikkeld door Google. Deze tools werden samen met de Chrome browsers gelanceerd in Door de jaren heen waren er regelmatig updates die van Google Devtools krachtige tools maakten De werking De tools kunnen worden geopend door een simpele klik op F12 of via het Chrome menu 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. in Figuur 3 Google DevTools (bron:google) Wanneer de tool open is zijn er verschillende tabs te zien. Elke tab heeft een specifieke functie.

22 21 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.

23 22 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)

24 23 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)

25 24 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)

26 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 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: 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> <div> <h1></h1> <p></p> </div>< <aside> </aside> </section>

27 26 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 > <h1>bachelorproef </h1> <p> Lorem ipsum dolor sit amet, consecteteur adipiscing elit. </p> <aside class= sidebar ></aside> </section> 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 > <h1>bachelorproef </h1> <p> Lorem ipsum dolor sit amet, consecteteur adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consecteteur adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consecteteur adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consecteteur adipiscing elit. </p> <aside class= sidebar ></aside> </section>

28 27 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-methode 1. 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 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.

29 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 Installatie van Grunt Vooraleer Grunt kan worden geïnstalleerd hebben we node nodig. Dit is zeer eenvoudig te installeren via de website van node ( 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.

30 29 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.

31 30 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. (

32 31 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> Besluit Figuur 12 Runnen van een grunt-task 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

33 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 ( 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.

34 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 :

35 34 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

36 35 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. #5B83AD; + #111; #header { } Heeft als uitput #header { color: #6c94be; } Het grote voordeel van Less is dat er gebruik kan worden gemaakt van variabelen (starten 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 }

37 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( 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 Tot heden zijn Marc Otto en Jacob Thornton nog steeds verantwoordelijk voor dit project Momenteel zitten we al aan de 3 de 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.

38 37 Figuur 18 Voorbeeld bootstrap 3.0 Template (bron : Hoe werkt het Bootstrap kan gedownload worden via de 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

39 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 <h1> Een eenvoudig formulier </h1> <form> <label for=" ">uw adres</label> <input type=" " id=" " placeholder="uw "><br> <label for="exampleinputpassword1">uw Naam</label> <input type="text" id="wachtwoord" placeholder="uw wachtwoord"><br> <label><input type="checkbox"> Ik zal aanwezig zijn</label><br> <button type="submit" >Verzend</button> </form> Figuur 19 Eenvoudig formulier zonder opmaak (bron: eigen materiaal) 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 <link href="css/bootstrap.min.css" rel="stylesheet"> Stap 2 : Het formulier opmaken volgens het bootstrap framework Form-groups toevoegen Bootstap-Klasses toevoegen aan de element <h1>een eenvoudig formulier</h1> <form> <div class="form-group"> <label for=" ">uw adres</label> <input type=" " class="form-control" id=" " placeholder="uw adres"> </div> <div class="form-group"> <label for="naam">uw Naam</label> <input type="text" class="form-control" id="naam" placeholder="uw naam"> </div> <div class="checkbox"> <label> <input type="checkbox"> Ik zal aanwezig zijn </label> </div> <button type="submit" class="btn btn-default">verzenden</button> </form> Figuur 20 Formulier opgemaakt met het bootstrap framework ( bron: eigen materiaal)

40 39 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 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 -testing. Litmus is geen gratis tool. Maar om te testen bieden ze een trailer versie aan. Deze trailer is zeven dagen geldig 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 testing bleef. Na het afwerken van hun persoonlijke projecten, richten ze samen Litmus op dat tot op vandaag gespecialiseerd is in testing testing Het testen van 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 adres 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 in de verschillende browsers/mailcients.

41 40 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 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 Test te klikken (zie figuur 22) Figuur 22 Litmus startscherm

42 41 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 HTML naar het opgegeven adres. 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 Litmus

43 42 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 toch juist wordt getoond (zie figuur 25 en 26). Naast de verschillende screenshots kan men het inladen van de , de onderwerplijn en de linken testen (zie figuur 27). Figuur 25 Overzicht van de verschillende screenshots Figuur 26 Evaluatie van een screenshot in Litmus

44 43 Figuur 27 testen van afbeeldingen in litmus Besluit Litmus is een uitgebreid online tool die het makkelijk maakt om een 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 sneller de mail zullen openen of dat de 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 s 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)

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

46 5 HET Bachelorproef Jolene Fouquaert VOORDEEL VAN HET GEBRUIK VAN TOOLS 45

47 46 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.

48 6 DE Bachelorproef Jolene Fouquaert WERKING VAN E-COMMERCE BEDRIJVEN 47

49 48 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 Figuur 29 Aldrich Michael met zijn uitvinding (bron: Aldrich Archives) vooral een business-to-consumer (B2C) idee over e-commerce. Maar de eerste systemen werden echter enkel gebruikt voor business-tobusiness (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.

50 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 2 doet 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 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ë.

51 50 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)