BACHELOR TOEGEPASTE INFORMATICA. Bachelorproef. Muziekgenre website in HTML5. Dirly De Schrijver

BACHELOR TOEGEPASTE INFORMATICA

Bachelorproef Muziekgenre website in HTML5 Dirly De Schrijver

Promotor: Dhr. J.K. Van Den Meersche Academiejaar 2011-2012 Bachelorproef ingediend tot het behalen van de graad van bachelor in de toegepaste informatica

MUZIEKGENRE WEBSITE IN HTML5

Synopsis Het verslag bevat een

studie over de mogelijkheden van HTML5 en zijn

aanvullende technologieën. Er is een onderzoek gedaan naar de verschillende functionaliteiten

die

HTML5

aanbiedt;

tevens

is

er

ook

een

uitgebreid

gebruikersonderzoek uitgevoerd met het oog op het vaststellen van het doelpubliek en de taken van het systeem. Tijdens dit onderzoek werd er ook veel aandacht besteed aan de vormgeving van de website en werd er getest of de website gebruiksvriendelijk is. Door de implementatie van de back-end in PHP en de gegevensbankstructuur is er een goede basis gelegd voor de front-end implementatie van de website in HTML5. De aanvullende technologieën, jQuery, JSON en CSS3, ondersteunen de HTML5-basis goed en creëren samen een dynamische website. De vastgestelde taken van het onderzoek zijn geïmplementeerd in de website; bij

de

gebruikersinterface

gebruiksvriendelijkheid

van

is de

er

veel

aandacht

functionaliteiten

die

de

besteed website

aan

de

aanbiedt.

Zoekopdrachten worden makkelijker voor de gebruiker door de automatische aanvulling, het invullen van formulieren gaat sneller door de real-time validatie, etc. Het resultaat is een gebruiksvriendelijke website waar de gebruikers makkelijk kunnen rondsurfen en informatie aan kunnen toevoegen. De website vertoont de muziekgenres dynamisch door de positie van de tijdslijn te veranderen door te scrollen. Op basis van het jaar zullen de muziekgenres worden vertoond. De website is online beschikbaar op nuGenre.net.

2


Voorwoord Naar aanleiding van mijn bachelorproef in het derde jaar toegepaste informatica op de Erasmushogeschool Brussel heb ik een systeem uitgebouwd dat muziekgenres op een vernieuwende manier dynamisch vertoont. Het was een zeer interessante ervaring en het project heeft me veel bijgeleerd over de verschillende webtechnologieën die steeds meer worden gebruikt op het internet. Langs deze weg wil ik een paar mensen bedanken voor de hulp bij het maken van deze bachelorproef. Allereerst zou ik meneer Van Den Meersche willen bedanken als promotor, zonder zijn hulp zou de ontwikkeling van mijn bachelorproef ongeorganiseerd zijn verlopen. Ook wil ik Rui Pedro Duarte bedanken, die me heeft aangetoond wat het nut is van een goed en uitgebreid gebruikersonderzoek; hij is een mentor geweest en zonder zijn advies en begeleiding zou ik een heel andere weg zijn ingeslagen. Vervolgens wil ik Roel Heremans bedanken om me te helpen met de inhoud van de applicatie; ondanks het feit dat het werk niet is goedgekeurd voor zijn bachelorproef bij het RITS heeft hij steeds veel interesse getoond en hulp aangeboden. Verder wil ik Xavier Goás Aguililla bedanken voor het verslag na te kijken op schrijf- en taalfouten. Tot slot wil ik alle testers bedanken die de applicatie online op nuGenre.net hebben getest; zonder hun constructieve kritiek zou de webapplicatie nog talloze mankementen vertonen.

3


Inhoudstafel 1  Inleiding................................................................................... 5  2  Beschrijving ............................................................................. 6  3  Usability onderzoek .................................................................. 7  3.1  ROI (Terugverdieneffect van Usability) ................................................. 7  3.2  Taak analyse..................................................................................... 7  3.3  Conceptueel model .......................................................................... 10  3.4  User interface storyboard.................................................................. 11  3.5  Prototype ....................................................................................... 11  3.5.1  Besluit ...................................................................................... 12  3.6  Grafisch Ontwerp............................................................................. 12  3.6.1  Tijdslijn .................................................................................... 13  3.6.2  Muziekgenres ............................................................................ 15  4  Model View Controller (MVC).................................................. 16  4.1  Model............................................................................................. 16  4.1.1  Zend Framework ........................................................................ 16  4.2  View .............................................................................................. 16  4.2.1  HTML5 ...................................................................................... 16  4.2.2  CSS3 ........................................................................................ 17  4.3  Controller ....................................................................................... 17  4.3.1  Canvas ..................................................................................... 17  4.3.2  Autocomplete ............................................................................ 17  4.3.3  Modernizr.................................................................................. 18  4.3.4  Muis eventen ............................................................................. 18  4.3.5  Direct linken .............................................................................. 18  5  Databaseontwerp ................................................................... 19  6  Probleemstellingen................................................................. 20  6.1  De capaciteiten van HTML5 ............................................................... 20  6.1.1  Verschillen tussen de webbrowsers ............................................... 20  7  Resultaat ................................................................................ 22  7.1  Prestatie website ............................................................................. 22  7.2  Validatie ......................................................................................... 23  7.3  Mogelijke uitbreidingen..................................................................... 23  8  Besluit .................................................................................... 24  9  Bibliografie............................................................................. 25  10  Bijlage .................................................................................. 27  10.1  The ROI of User Experience ............................................................. 27  10.2  Papieren prototype......................................................................... 29 

4


1 Inleiding Het concept van de website werd samen met een student van het RITS, Roel Heremans, bedacht. Hoofddoel is het onderbrengen van alle muziekgenres en hun subgenres in een gegevensbank, waardoor gebruikers van het systeem makkelijk een duidelijk overzicht kunnen krijgen. Het Internet bevat een overvloed aan websites die statisch muziekgenres vertonen, zoals bijvoorbeeld AllMusic (http://www.allmusic.com). Hier wordt een overzicht op gegeven van alle muziekgenres, maar dit zonder verbanden te leggen tussen genres. Het vooropgestelde systeem zal de muziekgenres dynamisch vertonen, waarbij de nadruk zal staan op het muziekgenre en niet op de verschillende artiesten. Doordat gebruikers hun kennis over muziekgenres kunnen delen zal de website steeds groeien en mogelijk een uitgebreider collectie van muziekgenres kunnen aanbieden dan zijn statische concurrenten. Het systeem zal worden ontwikkeld op basis van een schema gemaakt door Gert Keunen1 en vertoont een tijdslijn en de connecties tussen alle muziekgenres onder de categorie Pop. De technologieën dat werden gebruikt voor het ontwikkeling van het systeem zijn HTML5 en PHP. Door het systeem online aan te bieden kan men een grotere doelgroep bereiken; de gebruiker moet niets lokaals opslaan en kan alles via de browser raadplegen. Dynamische websites in HTML5 verschijnen steeds meer op het net, maar ze zijn nog steeds schaars. Dit eindwerk zal de mogelijkheden van dynamische websites in HTML5 onderzoeken en vergelijken met andere technologieën. HTML5 is zeer afhankelijk van webbrowsers, daarom zal er een onderzoek worden gemaakt welke webbrowser het best werkt met de technologieën en wat de verschillen zijn tussen de meest gebruikte webbrowsers.

1

KEUNEN (G.). POP! Een halve eeuw beweging. België, Uitgeverij Lannoo en Gert Keunen, 2002, pp. 480-483.

5


2 Beschrijving Het doel van de bachelorproef is een studie van het dynamisme van HTML5. Hierbij zal er een onderzoek gevoerd worden naar de nieuwe front-end technieken die HTML5 aanbiedt. HTML5 wordt vaak gebruikt in marketing om ook de omliggende technieken zoals CSS3, JavaScript, XML, SVG en JSON te beschrijven; om eventuele verwarring te vermijden zal in dit verslag het onderscheid worden gemaakt tussen de verschillende technologieën. Als opdracht van de bachelorproef zal er een systeem worden ontwikkeld waar de gebruikers gemakkelijk door verschillende muziekgenres en hun subgenres kunnen navigeren; het jaar en de plaats van totstandkoming, de muziekgenres waarvan het muziekgenre is afgeleid, etc. De website zal zo gebruiksvriendelijk mogelijk de muziekgenres dynamisch vertonen. Daarnaast zal de website bijkomende informatie zoals beschrijving, moeder- en subgenres bevatten. De gebruikers kunnen hun kennis delen door informatie toe te voegen aan het muziekgenre. De uitdaging van het project is dat HTML5 nog niet stabiel is. Door het feit dat er nog geen W3C norm bestaat, reageren sommige browsers anders op verschillende functies. Het doel is dat alle bekende browsers (Firefox, Internet Explorer, Google Chrome en Safari) compatibel zijn met de website. Om het beste eindresultaat te verkrijgen zal er een uitgebreid gebruikersonderzoek worden gemaakt. In dit onderzoek zullen de profielen van de verschillende gebruikers worden vastgesteld en op basis van de resultaten zal er een systeem worden ontworpen dat het best werkt voor de doelgroepen.

6


3 Usability onderzoek De grootste uitdaging van het ontwerpen van een webapplicatie met deze doelstellingen is dat het nog steeds gebruiksvriendelijk is voor de bezoeker. Door een goed gebruikersonderzoek uit te voeren voor de implementatie van de applicatie kan men veel tijd besparen.

3.1 ROI (Terugverdieneffect van Usability) Vijftien percent van de projecten worden tijdens de ontwikkeling stopgezet. Het IEEE (Institute of Electrical and Electronics Engineers) heeft een onderzoek gemaakt om te onderzoeken waarom sommige softwareen websiteontwikkelingen falen.2 De programmeurs spenderen vijftig percent van hun tijd aan het herwerken van een bepaald deel van de applicatie dat kon vermeden worden mits voorafgaand goed gebruikersonderzoek. Een fout die voorkomt tijdens de implementatie kost honderd keer meer dan een fout die tijdens de voorstudie van de applicatie wordt gevonden. Drie van de twaalf grootste redenen dat projecten hebben heeft direct verband met slechte vooronderzoeken. 1. Slecht gedefiniëerde doelstellingen; 2. Slechte communicatie tussen ontwikkelaars, klanten en gebruikers; 3. Teveel fouten tijdens het productieproces. Door een goed vooronderzoek te maken kan men een groter doelgroep bereiken, zal het productieproces sneller gaan en zullen er minder probleemstellingen tijdens het productieproces voorkomen.3

3.2 Taak analyse De studie onderzoekt hoe mensen reageren op bestaande systemen om dan de beste methodes te ontwikkelen voor ons systeem. Het onderzoek kan simpel worden uitgevoerd door elf analysevragen grondig te beantwoorden.4 Door deze vragen te beantwoorden moet men het perspectief van de gebruiker op het systeem voorstellen. Een analyse mag geen rekening houden met de implementatie van het systeem; uiteindelijk werden slechts een paar taken geïmplementeerd in de webapplicatie omdat de omvang van het volledig project te groot is.

2

CHARETTE (R.). Why Software Fails, spectrum.ieee.org/computing/software/whysoftware-fails. Datum van raadpleging: 24 augustus 2012 3

WEINSCHENK (S.). The ROI of User Experience, http://www.youtube.com/watch?v=O94kYyzqvTc. Datum van raadpleging: 24 augustus 2012. Transcript en beschrijving in bijlage pp. 27-28. 4

DUARTE (R.). Cursus Usability, Chapter 1 - Task Analysis 1, Viseu (Portugal), 2012, pp.11-12.

7


1. Wie gaat het systeem gebruiken? Mensen die geïnteresseerd zijn in muziek, meer bepaald muziekgenres. Deze worden opgedeeld in twee grote groepen, muzikanten en muziekluisteraars.

Afbeelding 1: De gebruikers van het systeem

2. Wat zijn de huidige taken? ○ ○ ○ ○ ○ ○ ○

De link vinden tussen de muziekgenres en zijn subgenres; Een muziekgenre opzoeken via een naam of gedeelte van zijn naam; Moeder- of dochtergenre vinden van een muziekgenre; Meer informatie te weten komen over het muziekgenre: alternatieve benamingen, bloeiperiode, plaats en een korte beschrijving; Muziekgenres opzoeken op basis van jaar; Voorbeelden beluisteren van een muziekgenre; Informatie toevoegen over een muziekgenre.

3. Wat zijn de toekomstige taken? ○ ○ ○

Muziekgenres met elkaar vergelijke; Verband leggen met de moeder- of dochtergenres van het genre; Voorbeelden van verschillende muziekgenres vergelijken.

4. Hoe worden taken geleerd? Door een muziekgenre op te zoeken in het systeem kan de gebruiker zien welke muziekgenres gerelateerd zijn aan zijn huidige muziekgenre en kan hij een verbindingen tussen de muziekgenres leggen. Hier kan de gebruiker ook meer informatie vinden over het betreffende genre.

8


5. Waar worden deze taken uitgevoerd? Om meer te weten over muziekgenres gaan de mensen naar de bibliotheek om boeken te vinden over de geschiedenis van muziek. Ook gaan sommige personen naar muziekwinkels om het verband tussen muziekgenre en de artiesten te vinden. 6. Wat is de relatie tussen de gebruiker en informatie? Alle informatie op het systeem is open; modificatie treedt op wanneer de gebruikers meer informatie over een muziekgenre toevoegen. 7. Zijn er andere benodigdheden nodig voor het systeem te kunnen gebruiken? Neen, het systeem is onafhankelijk. 8. Hoe kunnen gebruikers met elkaar communiceren? Gebruikers kunnen niet direct communiceren met elkaar, ze kunnen wel indirect hun mening geven over een bepaald genre door te stemmen of de informatie over het muziekgenre betrouwbaar en objectief is geschreven. 9. Hoe vaak worden taken uitgevoerd? 10. Zijn er tijdsgrenzen? Hoe vaak worden taken uitgevoerd? 1(vaak)4(nooit)

Zijn er tijdsgrenzen?

De link vinden tussen de muziekgenres en zijn subgenres.

1

Neen

Een muziekgenre opzoeken via een naam of gedeelte van zijn naam.

1

Neen

Moeder of kind genre vinden van een muziekgenre.

2

Neen

Meer informatie weten over het muziekgenre: andere benaming, jaar, plaats en korte beschrijving.

1

Neen

Muziekgenres opzoeken op basis van jaar.

1

Neen

9


Muziekvoorbeelden beluisteren van een muziekgenre.

3

Neen

Informatie toevoegen over een muziekgenre.

3

Ja

Muziekgenres met elkaar vergelijken.

3

Neen

Verband leggen met de genre zijn moeder of kind genres.

3

Neen

Muziekvoorbeelden van verschillende muziekgenres vergelijken.

4

Neen

11. Wat gebeurt er als er iets verkeerd loopt? De gebruiker zal een instructies.

foutmelding

te

zien

krijgen

met bijhorende

Dankzij dit onderzoek, gebaseerd op de usability-onderzoeken van Jakob Nielsen, kan men exact de soorten gebruikers van het systeem definiëren. Door de doelgroep beter te begrijpen kan men een systeem maken dat daarmee rekening houdt.

3.3 Conceptueel model Het conceptueel model omschrijft de gegevens van het systeem. Men analyseert de soorten gegevens en de verbinding tussen hen. Dit model is de basis voor veel verschillende ontwerpen tijdens de ontwikkelingsfase, zoals databaseontwerp en grafisch ontwerp.

Afbeelding 2: Conceptueel Schema: de relatie tussen de concepten

10


3.4 User interface storyboard Het storyboard schema geeft de verschillende statussen van het systeem weer. Dit is de basis voor het prototype en grafisch ontwerp; door het storyboard goed uit te werken kan men alle pagina’s van de website nauwkeurig bepalen.

Afbeelding 3: Storyboard schema: mogelijke pagina’s van de webapplicatie

3.5 Prototype Het prototype is het eerste model van het systeem; in deze fase kunnen al potentiële problemen worden vastgesteld. Er werd geopteerd voor een low fidelity prototype; dit is een prototype dat het systeem simpel voorstelt door middel van papier. Het voordeel van een papieren prototype is dat het makkelijk te maken is, goedkoop en objectief. Door het prototype kan men vroeg ontdekken wat de gebruiker echt nodig heeft en of het goed wordt ingevoerd in het systeem.

Afbeelding 4: Papier prototype: login Raadpleeg bijlage pp.29-30 voor alle statussen van het prototype.

Het prototype vertoont de gebruikersomgeving goed weer. Het gedeelte van de website waar men de genres dynamisch vertoond door middel van jaartal is moeilijker te onderzoeken. 11


Tijdens het testen van het prototype, met mogelijke gebruikers van het systeem, zijn er mogelijke probleemgevallen aangetroffen. ● ● ●

De helpknop werd bijna nooit gebruikt en is grotendeels overbodig in het design; Als de gebruiker zijn paswoord vergeet kan hij het niet oproepen; De zoekfunctie kan niet worden gebruikt als er een genrevenster actief is.

3.5.1 Besluit Het prototype heeft een duidelijk inzicht gegeven in hoe het systeem moet worden verwezenlijkt. Dankzij dit onderzoek heeft men een goed zicht op de mogelijke gebruikers en kan men goed inschatten wat de doelgroep verwacht van het systeem. Een uitgebreider onderzoek kan men raadplegen bij de electronisch afgegeven bestanden.

3.6 Grafisch Ontwerp Het grafisch ontwerp werd op basis van het papieren prototype ontworpen. Hier wordt de nadruk op de vormgeving gelegd. Dit ontwerp toont een nauwkeurig voorontwerp van het uiteindelijk product. In het grafisch ontwerp werd er veel rekening gehouden met de gebruiker; zodat hun bezoek op de webpagina makkelijk verloopt. Het concept van de website is het zo simpel mogelijk te houden, zodat de gebruiker niet wordt overweldigd door alle mogelijke opties. De website is opgebouwd zodat de gebruiker de opties ziet als zij van toepassing zijn; men kan denken aan bv. het toevoegen van een nieuw muziekgenre. De gebruiker zoekt een specifiek muziekgenre op en merkt op dat de zoekresultaten niets weergeven; dan pas kan de gebruiker een muziekgenre toevoegen aan de website.

Afbeelding 5: Muziekgenre toevoegen

Ook werd er veel aandacht gegeven aan kleinigheden die de gebruikservaring verbeteren. Het is mogelijk paswoorden te tonen als de gebruiker zich wilt inloggen. Volgens een onderzoek brengt het verbergen van paswoorden veel moeilijkheden met

12


zich mee.5 Gebruikers maken meer fouten als ze iets moeten typen dat ze niet zien, daardoor worden ze minder gemotiveerd. Door deze dubbele degradatie van gebruiksvriendelijkheid is de kans groter dat de gebruiker niet gaat inloggen of de site verlaat.

Afbeelding 6: Register formulier paswoord

Paswoorden verbergen is sinds het begin van het web een standaard geworden, zonder enige studie achter het fenomeen. Het geeft een vals gevoel van veiligheid, want de bijzitter kan evengoed meevolgen wat de gebruiker intypt. In 95% van de gevallen zijn er geen bijzitters en zit de gebruiker alleen achter het scherm; dus dan is het overbodig.6

Afbeelding 7: Register formulier paswoord

Via een checkbox kan de gebruiker kiezen of het paswoord zichtbaar is of niet. Een formulier invullen met controle op de ingevoerde waardes kan soms hinderend werken op gebruiker. Validatie van formulieren gebeurt daarom in realtime. Dit bespaart de gebruiker veel tijd en frustratie. 3.6.1 Tijdslijn De tijdslijn is een vectorafbeelding, de reden daarvoor is dat de afbeelding leesbaar is in elk beeldresolutie zonder kwaliteitsverlies. Ook is de afbeelding niet complex, hierdoor zal die snel ingeladen worden in het browserscherm. De tijdslijn toont aan waar de gebruiker is in het systeem. Het jaartal kan worden veranderd door te scrollen. 5

NIELSEN (J.). Stop Password Masking, www.useit.com/alertbox/passwords.html. Datum van raadpleging: 29 augustus 2012 6

ONBEKEND. Wachtwoorden: tonen of niet? usability-blog.be/wachtwoorden-tonen-ofniet. Datum van raadpleging: 29 augustus 2012

13


Als nieuwe bezoeker van de website moet de gebruiker ontdekken wat de website doet. Door een pijl te tonen zal de gebruiker intuïtief beginnen naar beneden te scrollen; door naar beneden te scrollen zal de pointer op de tijdslijn ook bewegen en zal het jaartal veranderen. Zo leren bezoekers de website correct te gebruiken.

Afbeelding 8: Pijl dat gebruiker aantoont dat hij moet scrollen

Wanneer de gebruiker begint te scrollen zal de pijl niet meer verschijnen. De tijdslijn zal een vergrootglas weergeven dat het exacte jaar weergeeft. Ook wordt het huidig jaar op de achtergrond weergegeven. Als de gebruiker stopt met scrollen zal het vergrootglas na 3 seconden verdwijnen.

Afbeelding 9: Een schermopname tijdens het scrollen

Hierdoor weet de gebruiker beter waar hij zich bevindt in het systeem en zal eventuele verwarring ontweken worden.

14


Als de gebruiker over een object gaat zal de cursor veranderen, dit duidt aan dat het object kan worden bewogen. Ook zal in het object een aanduiding staan waar de gebruiker kan lezen dat als men dubbelklikt erop er meer informatie over het muziekgenre zal verschijnen. Als de gebruiker een muziekgenre opzoekt zal de tijdslijn naar het jaar van ontstaan van het muziekgenre verplaatsen. Als de gebruiker dan het venster sluit, zal hij de andere muziekgenres kunnen bekijken die in dat jaar ontstonden. 3.6.2 Muziekgenres In het geanimeerde gedeelte van de website, waar de muziekgenres worden vertoond volgens het jaar, wordt er gespeeld met de graad van doorschijn en diameter van de cirkel. Dit geeft de illusie dat de muziekgenre groeit. Op het jaar van ontstaan is dekt het object volledig en zal het op zijn grootste diameter zijn. De kleuren van de muziekgenres worden willekeurig gekozen, er werd geopteerd om limieten te zetten op het aanbod van kleuren. Hierdoor worden alleen pastelkleuren in de kleurfamilies geel en grijs vertoond. Deze kleuren geven een goed en duidelijk contrast met de achtergrond en tekst in het object.

15


4 Model View Controller (MVC) De website is ontworpen volgens het Model View Controller designpatroon. Dit wil zeggen dat het model de relatie van data en logica is; de gegevens die zijn opgeslagen in de database zullen door het model worden opgehaald en omgezet worden naar ruwe data en omgekeerd. Hierdoor blijft de code georganiseerd en leesbaar.

4.1 Model Voor het model gedeelte werd er gebruik gemaakt van PHP. De keuze geen framework te gebruiken is gewild; er worden geen zware verbindingen gemaakt met de databank, een framework is dus onnodig. Het nadeel van gebruik maken van een website met een framework is dat men leert werken met een framework in plaats van met de programmeertaal.7 Om meer over PHP te leren is er tijdens het onderzoek naar de verschillende soorten PHP-frameworks besloten om er volledig van af te stappen. Voor sommige delen van de website in PHP werd er wel gebruikt gemaakt van een extensie. 4.1.1 Zend Framework Zend_Mail is een component van het Zend Framework om e-mails te versturen via een SMTP-verbinding. SMTP (Simple Mail Transfer Protocol) is de standaard voor het versturen van e-mails. Via SMTP Authenticatie is de kans lager dat de mail door spamfilters geblokkeerd wordt.8 Dit werd gebruikt voor het registreren van gebruikers; door een grote overvloed aan ongebruikte accounts te vermijden moet de gebruiker zijn e-mails bevestigen voordat men zich volledig kan aanmelden. Deze extensie is ook gebruikt om het paswoord door te sturen naar de gebruiker als hij het paswoord is vergeten en als de bezoeker het contactformulier invult op de website.

4.2 View 4.2.1 HTML5 De view is het deel waar de elementen van de gebruikersomgeving worden gedefiniëerd; in dit project is dat in het HTML5 bestand zelf. Omdat de website een SPI (Single Page Interface) is, werd alles gedefinieerd in één bestand. De view is zeer afhankelijk van de controller. Voor het HTML5 gedeelte wordt alles weergegeven in de canvas-tag. “Canvas is een dichtgeweven stof - meestal gemaakt van vlas, hennep, jute of katoen - die wordt gebruikt voor zeilen, dekkleden en stoffering en als ondergrond voor olieverfschilderijen. Door dat laatste gebruik is het ook de

7

D’OLIVEIRA (R.). Pros and Cons of Using Frameworks, www.1stwebdesigner.com/design/pros-cons-frameworks. Datum van raadpleging: 22 augustus 2012 8 EDELL (D.). How to Avoid Spam Filters with PHP mail() Emails, www.velvetblues.com/web-development-blog/avoid-spam-filters-with-php-mail-emails. Datum van raadpleging: 22 augustus 2012

16


aanduiding beelden.” 9

geworden

voor

de

beeldschermachtergrond

bij

grafische

Dit is een element dat 2D vormen dynamisch kan renderen. Het canvas-element in de view is een transparante rechthoek zonder inhoud; de context zal door de controller worden doorgegeven. 4.2.2 CSS3 CSS3 is zoals HTML5 nog geen officiële norm, maar wordt al door verschillende webapplicaties gebruikt. In het project wordt er gebruikt van nieuwe CSSopmaakstijlen; zo werden bijvoorbeeld de afronding van div-elementen en de transparantie van elementen veel toegepast in het project. Er wordt ook gebruik gemaakt van de pseudo elementen before en after. Dit maakt opmaak voor bepaalde div-elementen makkelijker.

4.3 Controller 4.3.1 Canvas HTML5 wordt gebruikt voor het dynamisch gedeelte van het systeem. Op het canvas wordt een object aangemaakt die een muziekgenre voorstelt. Tijdens het laden van de website worden alle muziekgenres uit de database gehaald en worden de objecten aangemaakt. Het cirkelobject slaat naam, jaar, kleur, transparantie, grootte en positie op. Het eigenlijke tekenen op het canvas gebeurt niet met HTML, maar met JavaScript. Voor er objecten op het canvas kunnen worden getekend moet men eerst de tekenomgeving initialiseren; voor het project is er gekozen om in twee dimensies te tekenen omdat dit in de meeste browsers reeds mogelijk is. Alle objecten worden door een methode op het canvas getekend maar zijn niet zichtbaar voor de gebruiker. Door op het canvaselement te scrollen zullen de verschillende muziekgenres vertoond worden voor de gebruiker op basis van het jaar. Dit gebeurt door de transparantie en grootte aan te passen van het object en het canvas volledig te hertekenen. Doordat de positie van de objecten willekeurig wordt berekend als de website wordt geladen is er een kans dat twee of meerdere objecten elkaar overlappen. Dit probleem werd simpel opgelost door de objecten versleepbaar te maken. 4.3.2 Autocomplete Autocomplete is een jQuery uitbreiding, dat de ingevoerde waarde bij een zoekopdracht in reële tijd gaat vergelijken met andere elementen. Het automatisch aanvullen van zoekopdracht wordt gebruikt bij het zoeken van een muziekgenre en het toevoegen/aanpassen van moeder- en subgenres. De muziekgenres worden eerst uit de gegevensbank gehaald door middel van PHP, vervolgens wordt de lijst van resultaat elementen met JSON verstuurd naar de functie dat de zoekopdracht automatisch aanvult. 9

HOLLANDER (A.). Aan de slag met HTML5. Amsterdam, Pearson Education Benelux B.V., 2010, p. 123.

17


Op basis van de doorgestuurde elementen dat het achterliggend systeem uit de gegevensbank heeft gehaald kan jQuery de ingevoerde waarde in reële tijd aanvullen. Door de automatische aanvulling kan de gebruiker makkelijker een muziekgenre opzoeken. 4.3.3 Modernizr Modernizr is een simpele JavaScript-uitbreiding die nakijkt of de browser nieuwe webtoepassingen ondersteunt. In het project wordt het gebruikt om te na te gaan of de browser het HTML5-element canvas ondersteunt. 4.3.4 Muis eventen Om een functie op te roepen wordt er veel gebruik gemaakt van mouse events. Door een muisklik, muisbeweging, etc. zal er via jQuery een functie worden opgeroepen. De animatie van de tijdslijn wordt door middel van de muiswiel event opgeroepen. Als het event toegepast wordt, zal er een instantieparameter aangemaakt worden die bijhoudt wat de gebruiker met zijn muiswiel doet. Dit wordt opgeslagen in de Delta variabele. Als Delta een negatief getal is scrolt de gebruiker naar beneden; als het een positief getal is scrolt de gebruiker naar boven. 4.3.5 Direct linken Het project is een one-page website, dit betekent dat er slechts één HTMLrequest zal worden gemaakt op de website. Hierdoor is direct linken naar een pagina standaard niet mogelijk. Ook zal de status van de pagina niet in de URL staan. Om dit probleem op te lossen werd er een hashtag-waarde in de URL toegevoegd. De hashtag-waarde kan makkelijk worden toegevoegd via JavaScript. Tijdens het inladen van de website zal er worden gecontroleerd of er een hashtag is gedefiniëerd in de URL; als dat zo is zal de website direct de gegevens van de hashtag opvragen.

18


5 Databaseontwerp

Afbeelding 10: Entity Relationship Diagram (ERD)

Er wordt gebruik gemaakt van de open source database MySQL. MySQL is een relationele gegevensbank die aanvullend werkt met PHP en is zeer stabiel. Bespreking van de verschillende tabellen. User Heeft als primaire sleutel “Name”, omdat alle gebruikersnamen unieke waardes zijn. De kolommen “Active” en “Controle” zijn toegevoegd om de bevestiging het e-mailadres van de gebruiker op te slaan. Controle is een variabel getal dat verhindert dat de gebruiker via het oproepen van het PHP bestand in de browser de account kan activeren. Objective/Trustworthy Deze tabellen slaan de stemmen van de leden op. De primaire sleutels zijn “User”, foreign key van de tabel User, en GenreID, foreign key van de tabel Genre. Session De tabel Session slaat de laatste sessie van de gebruiker op. Als de gebruiker op een andere computer/browser aanmeldt zal de vorige sessie verlopen. Subgenre/Genre Genre bevat alle informatie van een muziekgenre, de tabel Subgenre maakt de connectie tussen parent en child genre.

19


6 Probleemstellingen 6.1 De capaciteiten van HTML5 HTML5 maakt een grote opmars op het internet maar het bevindt zich nog steeds in de ontwerpfase. Er is een voorstel dat min of meer uitgekristalliseerd is, maar het is nog geen vastgestelde norm. Ian Hickson, de secretaris van de normalisatiecommissie, heeft het jaar 2022 genoemd, als het jaar waarin HTML5 helemaal af zou zijn.10 Door geen vaste W3C-normen te hebben reageren verschillende browsers anders op bepaalde functies. Hierdoor is het zeer browserafhankelijk en kunnen tijdens het implementeren veel complicaties optreden. Een update van een browser kan direct leiden tot incompatibiliteit met een webapplicatie. Het zwaar gevecht tussen de verschillende browsers draagt ook niet bij aan compatibiliteit. Veel JavaScriptontwikkelaars gebruiken tussenlagen om problemen met de updates te ontwijken. De verantwoordelijkheid wordt dan doorgeschoven naar degenen die bibliotheken voor JavaScript ontwikkelen zoals jQuery; dit is een goede techniek maar zeker niet de oplossing. HTML5 is een zeer interessante taal maar heeft nog een lange weg te gaan om sterkere programmeerplatformen zoals Flash van de markt te stoten; maar omdat Flash niet werkt op iOS neigen ontwikkelaars over te stappen naar HTML5. Volledig onterecht, want ondanks het feit dat de website wel zal werken op iOS zal hij meestal niet gebruiksvriendelijk zijn. De prestaties van JavaScript op iOS zijn zeer slecht tegenover de desktop en de canvas prestaties zijn nog erger. Elk platform heeft zijn bugs en HTML5 is geen uitzondering op de regel; probleem is dat HTML5 wordt geprezen in de webontwikkelingwereld maar nog niet aan de verwachtingen kan beantwoorden. Het blijft nog steeds een platform dat zich in bèta fase bevindt. 6.1.1 Verschillen tussen de webbrowsers Zoals eerder vermeld in dit verslag reageren niet alle browsers hetzelfde op sommige functies. De webbrowsers Google Chrome en Safari werken in algemeen het best met de nieuwe technologie en houden zich goed aan de voorlopige normen.

Percentage 11 marktaandeel

van

Firefox 13 +

Chrome 20 +

Internet Explorer 9

Safari 5.0 +

14,72 %

25,83 %

15,05 %

03,81 %

Dit zijn de browsers die grondig zijn getest tijdens de ontwikkeling van de webapplicatie. In totaal zou bijna 60% van internetgebruikers de website correct zien. Veel internetgebruikers werken hun huidige webbrowser niet bij en zo 10

HOLLANDER (A.). Aan de slag met HTML5. Amsterdam, Pearson Education Benelux B.V., 2010, p. 12. 11 ONBEKEND. When can I use..., caniuse.com/usage_table.php. Datum van raadpleging: 23 augustus 2012

20


worden nieuwe technologieën zoals HTML5 niet correct vertoond in het browserscherm. De website zijn getest met de verschillende browsers; de browsers Internet Explorer en Google Chrome werken beduidend het best met de website. Verouderde versies van browsers zullen een waarschuwing krijgen dat hun browser niet compatibel is met de technologie dat op de website wordt gebruikt.

6.1.1.1

Internet Explorer

Sinds Internet Explorer 9 werd uitgebracht heeft Microsoft andere browsers goed bijgebeend. Sinds deze versie kan Internet Explorer gebruik maken van CSS3. Er zijn nog steeds wat verschillen maar IE heeft zeker een grote vooruitgang geboekt. Internet Explorer bewaart de volledige website steeds volledig in het tijdelijk geheugen voordat het wordt weergegeven in de browser, hierdoor worden de jQuery functies onload() en load() volledig nutteloos. De website is volledig compatibel met Internet Explorer 9. Toch gebruikt meer dan tien percent van de internetgebruikers nog steeds Internet Explorer 8.12

6.1.1.2

Mozilla Firefox

Firefox is de browser die tijdens mijn project het meeste problemen veroorzaakte. Basis events zoals “onmousewheel” werken niet; Mozilla heeft een eigen event ervoor gecreëerd, “DOMMouseScroll”, deze event handler kan alleen bij Firefox worden uitgevoerd. Dat geeft een situatie waarbij er verschillende codes en benaderingen worden geschreven om eenzelfde functie op te roepen. Canvas werkt ook beduidend trager op Firefox dan zijn concurrenten. De haperingen die tevoorschijn komen tijdens het scrollen worden veroorzaakt door de garbage collector van Mozilla.13 Bij elke update van Firefox verbetert de garbage collector wel, maar het probleem komt steeds terug als de achterliggende berekeningen voor het canvas te zwaar worden.14

12

ONBEKEND. When can I use..., caniuse.com/usage_table.php. Datum van raadpleging: 23 augustus 2012 13

MANDELIN (D.). Mozilla Javascript 2011, blog.mozilla.org/dmandelin/2011/04/22/mozilla-javascript-2011. Datum van raadpleging: 23 augustus 2012 14

MANDELIN (D.). Incremental GC now in Firefox Aurora, blog.mozilla.org/dmandelin/2012/07/20/incremental-gc-now-in-firefox-aurora. Datum van raadpleging: 23 augustus 2012

21


7 Resultaat 7.1 Prestatie website Uit onderzoek is gebleken dat de gemiddelde gebruiker 6-8 seconden wacht voor een website te openen.15 Als de website dan nog niet is geladen heeft de gebruiker de neiging om een andere website te bezoeken. Conclusie is dat de website snel moet ingeladen worden in het browserscherm zodat de website zo aantrekkelijk mogelijk wordt gemaakt voor de bezoekers. Dit kan op vele manieren getest worden. De addon YSlow test de website en geeft een waardering (van A best tot F slechtst).

Afbeelding 11: Schermopname resultaat van YSlow (developer.yahoo.com/yslow)

De website heeft als resultaat een B; dit is een goed resultaat. De website is dynamisch en zeer afhankelijk van externe JavaScript en CSS documenten en dit doet website trager inladen. Door externe documenten te hebben heeft de browser meer tijd nodig om alles op te vragen. Kleine aanpassingen kunnen de website zijn prestaties verbeteren. Externe JavaScript bestanden op het einde van een HTML document inladen, zal de gehele website sneller doen laden omdat er dan geen twee documenten tegelijkertijd worden ingeladen in de browser.16 Ook zijn er online diensten voor snelheidsoptimalisatie waar de site op getest is; de website analyseert het ingegeven website en stuurt een rapport met te verbeteren punten terug (www.websiteoptimization.com). Het rapport geeft weer dat er te veel externe JavaScript bestanden zijn, dit doet de website trager inladen. Voor leesbaarheid te behouden zijn de JavaScript bestanden niet aangepast. Er wordt ook aangeraden minder verbindingen aan te maken met de gegevensbank. De website zoekt uit hoe lang de ingegeven URL erover doet om in te laden, hier ook behaalt de website een goed resultaat. Volgens de website duurt het 8.10 seconden om de website in te laden met een verbindingssnelheid van 1.44Mbps. Een onderzoek uit 2010 duidt aan dat de gemiddelde verbindingssnelheid wereldwijd 1.8Mbps is.17 Dit duidt aan dat de website gemiddeld minder dan 8 seconden zal nodig hebben om volledig in te laden in de webbrowser.

15

KASSENAAR (P.). Usability. Nederland, Van Duuren Media B.V., p. 151.

16

ONBEKEND. Best Practices for Speeding Up Your Web Site, http://developer.yahoo.com/performance/rules.html#js_bottom. Datum van raadpleging: 1 september 2012 17

ONBEKEND. The REAL connection speed for Internet users across the world, http://royal.pingdom.com/2010/11/12/real-connection-speeds-for-internet-users-acrossthe-world/. Datum van raadpleging: 1 september 2012

22


7.2 Validatie De website is getest op de de W3C validator (validator.w3.org) waar het wel een paar fouten aantoont. Alle fouten hebben iets te maken met verouderde attributen en hebben een vervanging in CSS. Toch is er soms gekozen om oudere attributen zoals align te gebruiken omdat ze anders werken dan de CSS eigenschap text-align. Deze verouderde attributen zijn nog steeds bruikbaar op alle webbrowsers en veroorzaken geen hinder.

7.3 Mogelijke uitbreidingen Het ontwerp zou geweldig goed aansluiten met aanraakschermen. De platformen met aanraakschermen hebben extra uitbreidingen en CSS aanpassingen nodig om het goed te doen werken. Daarom werkt de website niet op tablets.

23


8 Besluit Het doel van de bachelorproef was de mogelijkheden van HTML5 te onderzoeken en die toe te passen in een dynamische systeem met een achterliggende gegevensbank. Daarom ben ik aan een literatuurstudie begonnen die mij een eerste indruk over de HTML5-technologie kon geven. Hieruit heb ik geleerd dat HTML5 nog niet op het niveau is van concurrerende platformen zoals Flash. Het is zeer afhankelijk van de browsers en is onstabiel. Desondanks ben ik overtuigd dat HTML5 nog veel gaat groeien en verbeteren in de komende tien jaar. Als de W3C norm voor HTML5 wordt vastgelegd gaan nog meer webontwikkelaars deze technologie zeker toepassen. De ontwikkeling van een systeem in HTML5 verliep goed. Na een grondige studie die de soorten gebruikers en taken vastlegde kon ik een goede basis bouwen voor het starten van de implementatie van de webapplicatie. De uitdaging was om de webapplicatie compatibel te maken met de meest gebruikte webbrowsers. Dit was moeilijker dan verwacht, er zijn veel verschillen tussen de webbrowsers. Toch is het gelukt een website te ontwikkelen die bij de recente versies van de meest gebruikte webbrowsers foutloos wordt voorgesteld. De website toont de muziekgenres in een dynamische manier weer, het geeft ook meer informatie over de muziekgenres en biedt de mogelijkheid aan de gebruiker om makkelijk muziekgenres en informatie toe te voegen aan de gegevensbank. Ik vind het nog steeds een goede keuze dat ik ervoor gekozen heb geen PHPframework te gebruiken: hierdoor heb ik veel bijgeleerd over de werking van PHP en hoe het kan worden gebruikt met andere technologieën. Naast de gebruikte technologieën heb ik veel bijgeleerd op gebied van time management; een goed opgestelde planning is nodig. Een duidelijke beschrijving van doelstellingen en tussentijdse deadlines in het begin van de ontwikkeling vastzetten maakt het proces overzichtelijk en makkelijk te evalueren. Ik heb geprobeerd rekening te houden met eventuele probleemstellingen die tussendoor konden optreden. Het dynamisch gedeelte van de website was het meest uitdagend gedeelte, omdat ik niet op voorhand kon inschatten hoe de verschillende webbrowsers gingen reageren op de code en zijn achterliggende berekeningen. Dit viel allemaal goed mee en het eindresultaat is een website dat op een unieke manier verschillende muziekgenres vertoont. Ik ben zeer tevreden met het eindresultaat en ben trots dat ik alle doelstellingen heb kunnen bereiken. De website heeft volgens mijn mening een goede mogelijkheid om een deftig aantal gebruikers aan te trekken.

24


9 Bibliografie 

CHARETTE (R.). Why Software Fails, spectrum.ieee.org/computing/software/why-software-fails. Datum van raadpleging: 24 augustus 2012;



D’OLIVEIRA (R.). Pros and Cons of Using Frameworks, www.1stwebdesigner.com/design/pros-cons-frameworks. Datum van raadpleging: 22 augustus 2012;



DUARTE (R.). Cursus Usability, Chapter 1 - Task Analysis 1, Viseu (Portugal), 2012, p.38;



EDELL (D.). How to Avoid Spam Filters with PHP mail() Emails, www.velvetblues.com/web-development-blog/avoid-spam-filters-with-phpmail-emails. Datum van raadpleging: 22 augustus 2012;



HOLLANDER (A.). Aan de slag met HTML5. Amsterdam, Pearson Education Benelux B.V., 2010, p. 204;



KASSENAAR (P.). Usability. Nederland, Van Duuren Media B.V., p. 351;



KEUNEN (G.). POP! Een halve eeuw beweging. België, Uitgeverij Lannoo en Gert Keunen, 2002, p. 477;



MANDELIN (D.). Incremental GC now in Firefox Aurora, blog.mozilla.org/dmandelin/2012/07/20/incremental-gc-now-in-firefoxaurora. Datum van raadpleging: 23 augustus 2012;



MANDELIN (D.). Mozilla Javascript 2011, blog.mozilla.org/dmandelin/2011/04/22/mozilla-javascript-2011. Datum van raadpleging: 23 augustus 2012;



NIELSEN (J.). Stop Password Masking, www.useit.com/alertbox/passwords.html. Datum van raadpleging: 29 augustus 2012;



ONBEKEND. Best Practices for Speeding Up Your Web Site, http://developer.yahoo.com/performance/rules.html#js_bottom. Datum van raadpleging: 1 september 2012;



ONBEKEND. The REAL connection speed for Internet users across the world, http://royal.pingdom.com/2010/11/12/real-connection-speeds-for-internetusers-across-the-world/. Datum van raadpleging: 1 september 2012;



ONBEKEND. Wachtwoorden: tonen of niet? usability-blog.be/wachtwoordentonen-of-niet. Datum van raadpleging: 29 augustus 2012;



ONBEKEND. When can I use..., caniuse.com/usage_table.php. Datum van raadpleging: 23 augustus 2012;

25




WEINSCHENK (S.). The ROI of User Experience, http://www.youtube.com/watch?v=O94kYyzqvTc. Datum van raadpleging: 24 augustus 2012. Transcript en beschrijving in bijlage pp. 27-28.

26


10 Bijlage 10.1 The ROI of User Experience In de geanimeerde video toon Dr. Susan Weinschenk hoe een goede vooronderzoek in gebruiksvriendelijkheid een groot terugverdieneffect heeft.

Scribe created by www.PopulationDesign.com

© 2010 Human Factors International, Inc. All rights reserved. www.HumanFactors.com | 800.242.4480 USA & Canada | +1.641.472.4480 International

(http://www.humanfactors.com/ROIposter.asp) Transcript: “User experience is the science and art of designing a product like a website or a software application so that it's easy to use. So that it fits the expectation that the user has for it, and so that it meets business goals. There's a whole methodology around designing a user experience, and sometimes people ask me is it worth it to do all that work to design a user experience? So let's talk about the return on investment, or ROI, of doing user experience work. IEEE is a professional organization that puts out reports and does research for programmers, developers, and engineers, and they put out an article called "Why Software Fails". Here's some interesting data from that article.

27


They estimate that the amount of money that is spent worldwide in information technology is estimated at one trillion dollars a year. The percent of projects that are abandoned because they are hopelessly inadequate is up to 15 percent of all projects. The percent of revenue that goes to the IT group is five percent of a company's total revenue and up to ten percent if it's a financial or telecommunications company. The amount of time that programmers spend on rework that is actually avoidable is 50 percent of their time. The cost of fixing an error after development is 100 times that of fixing an error before development of the project is completed. Of the top 12 reasons that projects fail, three of the top 12 are directly related to what we would call user experience or user-centered design work, and those three are badly defined requirements; poor communication among customers, developers, and users; and stakeholder politics. So the kind of work that, that user experience professionals give, stakeholder interviews, user research, user testing, user centered design. These are all things that can fix at least three of those 12 reasons why software fails. You actually can calculate the savings or additional revenue or benefit that you get from approving your user experience in the product.”

WEINSCHENK (S.). The ROI of User Experience, http://www.youtube.com/watch?v=O94kYyzqvTc. Datum van raadpleging: 24 augustus 2012.

28


10.2 Papieren prototype

Afbeelding 1: Beginpagina

Afbeelding 2: Registerformulier

Afbeelding 3: Zoekresultaten

Afbeelding 4: Informatiepagina van muziekgenre

Afbeelding 5: Het toevoegen van moeder en kind genres.

Afbeelding 6: Het aanpassen van de bijkomende informatie van een muziekgenre.

29


Afbeelding 7: Contactformulier

Afbeelding 8: Informatievenster

Afbeelding 9: Loginvenster

Afbeelding 10: Beginpagina met login

30

BACHELOR TOEGEPASTE INFORMATICA. Bachelorproef. Muziekgenre website in HTML5. Dirly De Schrijver

Recommend Documents