M I K E
R U B I O
E X A M E N
2 0 1 4
K E R N T A A K 2 1
Inhoudsopgave Inventarislijst...............................................................03 Begeleidt Uitbestedingen............................................05 Logboek Back-ups.......................................................07 Protocol & Bestaden....................................................09 Testplan..........................................................................11 Website..........................................................................15 Applicatie......................................................................18
2
Inventarislijst MIKE RUBIO | NMVGA01A
De website wordt gemaakt in Adobe Muse. Adobe Muse is een software waar je website’s kan maken, zonder dat je veel codes moet gebruiken. Hierbij gaat het meer om het ontwerpen, en wanneer je klaar bent, kan je de website exporteren naar een html bestand. Dit is de inventarislijst van de website. In de inventarislijst staan de bestandsnamen van de(alle) beelden en objecten die gebruikt worden om mijn website te maken, wat voor bestanden ze zijn, de locatie waar ze terug te vinden zijn, waar ze op de website geplaatst worden en in welke software ze zijn gemaakt.
De Demo van de applicatie wordt gemaakt in invisionapp.com. InVision is een website waar je een interactieve versie van een applicatie kan maken zonder met codes te werken. Je kan verschillende soorten hardware kiezen om een interactieve applicatie te maken en ik heb voor de hardware Ipad gekozen. Hierbij is de inventarislijst van de applicatie te zien. In de inventarislijst staan de bestandsnamen van de beelden en objecten die gebruikt worden om mijn applicatie te maken, wat voor bestanden ze zijn, de locatie waar ze terug te vinden zijn, waar ze in de applicatie geplaatst worden en in welke software ze zijn gemaakt.
3
Bron http://interfacelift.com/wallpaper/Da94886a/02067_fallenleaf_1920x1080.jpg http://freehdwalls.net/deer-look-hd-wallpaper/ http://freehdwalls.net/forest-deer-hd-wallpaper/ http://wallpaperswide.com/peaks_in_himalaya-wallpapers.html http://www.wallpaperup.com/uploads/wallpapers/2013/07/18/120148/ ffea8fc4bc09aa1cff0e1064dc791dc7.jpg http://st.gdefon.com/wallpapers_original/wallpapers/545981_campfire_night_trees_stars_roche_lake_ provincial_p_6016x4016_(www.GdeFon.ru).jpg http://1hdwallpapers.com/wallpapers/flags_flapping_before_the_great_himalayas.jpg http://naturallorephotos.files.wordpress.com/2012/02/tipi-at-solberget-vildmarksbyn.jpg http://alpha.wallhaven.cc/wallpaper/69740
4
Begeleidt Uitbestedingen Voor de website heb ik foto’s gebruikt die ik van het internet heb gehaald. Maar ik moet natuurlijk wel rekening houden met copyright. Ik heb een andere keuze, door online bij www.istockphoto.com een paar foto’s te kopen die bij het verhaal passen (om de website te maken). Ik vind dat dat het beste is, omdat het dan niet zo veel tijd kost en je krijgt de foto’s gelijk na de betaling. En ze zijn ook verkrijgbaar in alle formaten. Na onderzoek te hebben gedaan ben ik erachter gekomen dat het mij rond de 100/200 euro per maand zal gaan kosten. Het is best wel duur, maar in een maand kan je 750 foto’s downloaden. Dan kan ik genoeg foto’s downloaden, voor de website en applicatie. De applicatie die ik had gemaakt in InVision is een demo versie van de applicatie zelf. Om de applicatie te realiseren zal ik iemand of een bedrijf, die applicatie’s maakt, in moeten huren. De reden hiervoor is omdat de applicatie vloeiend moet lopen en professioneel eruit moet zien en moet ook meer aansluiten bij de doelgroep. Bij het kiezen van een opdrachtnemer let ik dus vooral op de prijs, levertijd, techniek en hun (eerdere werk) referenties. Hieronder zie je de selectiecriteria. Selectiecriteria Creativiteit Hier wordt vooral naar gekeken of de opdrachtnemer de emoties van de gebruiker met de techniek dat ze gaan toepassen, op een positive manier. Communicatie en samenwerking Hier wordt gekeken of ze hun creativiteit in dienst kunnen stellen van de opdrachtgever (mijzelf) en beschikken over de communicatieve vaardigheden om met de opdrachtgever samen te werken. Kennis Hierbij is het belangrijk om te weten of de opdrachtnemer genoeg technische kennis bezit, zowel in programmeertalen als software programma’s. Oorspronkelijkheid en eigenzinnigheid De opdrachnemer weet binnen de gestelde eisen oorspronkelijkheid(originaliteit) en eigenzinnigheid bij hun techniek toe te passen.
5
Hier krijg U drie bedrijven te zien waar ik de applicatie kan laten maken.
Bij dit bedrijf kan ik de applicatie laten maken. Hier is het duidelijk te zien hoeveel het gaat kosten om een applicatie te laten maken. Je kan je eigen applicatie maken met hun platform voor € 199,-. Dit bedrag kan ook in termijnen worden betaald. Maandelijkse kosten € 29.95,-. Je kan ook je applicatie laten maken voor € 999,-, de maandelijkse kosten hiervoor zijn dan € 29.95,-. http://uwbedrijfsapp.nl/
Bij dit bedrijf is het ook duidelijk hoeveel het kost om een applicatie bij dit bedrijf te laten maken. Je kan je eigen applicatie maken met hun platform, maar daarvoor moet je eerst contact met hun opnemen. Een applicatie laten maken door AppConcurrent kost u eenmalig € 999,- . Deze prijzen zijn exclusief btw, en de jaarlijkse service- en hosting kosten. http://www.appconcurrent.nl/
ItNext maakt super mooie apps. Om te weten te komen wat de kosten zijn voor het maken va je applicatie moet je je gegevens en de gegevens over de type applicatie die je wil maken invullen en dan deze insturen. Hier is het niet mogelijk om je applicatie zelf te maken met een platform. http://www.itnext.nl/ Ik zou eerder de applicatie laten maken bij Uwbedrijfsapp dan bij AppConcurrent. Uwbedrijfsapp is duidelijker, je hebt meerdere keuzes en het is ook mogelijk om in termijnen te betalen. Ik zou het pakket kiezen van € 999,- en in termijnen betalen. Ik hoef dan heel weinig te doen alleen maar uitleggen wat ze moeten maken.
Opdrachtbeschrijving De applicatie wordt gemaakt door Uwbedrijfsapp. Ik zal informatie naar hun sturen hoe ik wil dat de applicatie eruit gaat zien. Het boek, de auteur en de uitgeverij moeten gepromoot worden. In de applicatie moet een media player komen voor het luisterboek en de mogelijkheid om het boek te lezen. Er moet ook een link komen waar ze de volledige versie van het boek en luisterboek kunnen kopen. 6
Logboek Back-ups
Er moet een back-up gemaakt worden voor alle bestanden en van de website. Dit is de lijst met de lokatie van de bestanden en een omschrijving van de type bestanden. Ik heb ook een logboek van de back-ups gemaakt, waar je ziet op welke dagen de bestanden zijn gekopieerd naar Onedrive en USB.
Veiligheid Bestanden De veiligheid van mijn bestanden zijn tot nu toe goed beveiligd. Op Onedrive staan mijn bestanden online, om erbij te komen moet ik inloggen met mijn Hotmail/ Outlook account. Ze staan op een beveiligde server online. Ik heb ze ook op mijn USB stick voor als ik geen internet heb, dan kan ik nog bij mijn bestanden komen. En dat telt ook voor de back-up bestanden op mijn externe harde schijf. Verder blijven de bestanden op mijn laptop staan.
7
Logboek
8
Protocol
One Drive
external hard drive
USB
Laptop Hierboven ziet u in beeld wat ik gebruik om een backup te maken van de website. Alles maak ik op mijn laptop. Elke dag, van maandag tot en met Vrijdag , maak ik een backup van de folder genaamd Interactive_Examen naar mijn USB stick en One Drive. One Drive is een online server van Microsoft waar je je bestanden kan opslaan. Als ik een andere computer gebruik kan ik altijd mijn usb stick gebruiken, en als ik die niet bij mij heb, kan ik altijd online op One Drive mijn bestanden downloaden en verder aan de slag gaan. In het weekend maak ik weer een back-up van alles naar mijn Externel Harde Schijf. Op deze manier heb ik overal een back-up van de bestanden van de website. De website is online op een server. Via Filezilla kan ik de bestanden ook weer terug krijgen.
9
Bestanden Hier krijg je meer informatie over alle bestaanden die gebruikt word op de website en de applicatie. JPEG auteur_lea khan: Dit is de foto van de autur. Dit staat op de home pagina. Background_1: Achtergrond voor de Home pagina. Het staat ook in de slider. Background_2: Achtergrond voor de Home pagina. Het staat ook in de slider. Background_3: Achtergrond voor de Home pagina. Het staat ook in de slider. Background_4: Achtergrond voor de Luisterboek pagina. Background_5: Achtergrond voor de Home pagina. Het staat ook in de slider. Background_6: Achtergrond voor de Forum pagina. PNG Book_logo: Het boek logo. Dit wordt gebruikt voor bij het menu. het is ook klikbaar. als je er op klikt ga je naar de home pagina. logo_veldhoen_outline: Het logo van Velhoen uitgevers. Deze gebuik ik bij de Footer van alle web pagina’s. fb-logo: Het logo van Facebook. Deze gebuik ik bij de Footer van alle web pagina. Als je erop klik, ga je naar Facebook. Het is de bedoeling dat je naar de facebook pagina gaat van het boek. twitter_logo_blue: Het logo van Twitter. Deze gebuik ik bij de Footer van alle web pagina’s. Als je erop klikt, ga je naar Twitter. Het is de bedoeling dat je naar de twitter pagina gaat van het boek. wood_title: Een titel bij de Home pagina. Book_1: Een beeld van het boek. Dit staat bij de Home pagina, naast de informatie van het boek en website. App_Icon: Het icon van de boek applicatie. Dit staat op de Applicatie pagina. Voorbeeld_ipad_App: Dit is een voorbeeld van hoe de applicatie eruit ziet. Deze staat op de applicatie pagina. app_store_icon: Dit is de originele App store icon van Apple. Iedereen mag het gebruiken. Deze staat op de applicatie pagina. als je erop klik ga je naar de Apple App Store. book_cover_title_black: Dit is de titel van het boek. Het staat boven de media player bij het luisterboek pagina. book_cover_autor_black: De naam van de autor. Dit is bij de luisterboek pagina, boven de titel van het boek Book_2: Een andere beeld van het boek. Dit staat bij de Forum pagina naast de commentaren. Forum_info: Informatie in het kort over de forum. Deze staat op de forum pagina.
10
Testplan De website en de applicatie moeten ook getest worden. De bedoeling is om de website en de applicatie te laten testen door de doelgroep en mensen die kennis en ervaring hebben met het maken van websites. Domeinnaam Als eerste moet de domeinnaam duidelijk zijn voor de gebruikers. Ik had een subdomein gemaakt met de naam hetlaasteword.pe.hu. Het is anders dan bekende websites met een domeinnaam die eindigen met .com of .nl. De reden hiervoor is dat je dan voor een domein moet betalen en bij een subdomein is het gratis, alleen kan je je eigen domeinnaam niet helemaal verzinnen. Ik heb testers gevraagd of ze de domeinnaam kunnen onthouden. Tester 1: tiener van 15 (doelgroep) Tester 2: interactive designer Tester 1; “De eerste keer is het moeilijk om te onthouden omdat het niet met .com of .nl eindigd, maar als ik het vaker bezoek lukt het mij wel”. Tester 2; “Het is inderdaad moeilijk te onthouden, want je weet dat je ‘hetlaatstewoord’ in moety typen, maar wat achter de naam komt, onthoud je niet zo snel.” Het probleem kan op verschillende manieren opgelost worden. Door de link op papier te geven, de link te promoten op verschillende sociale media of het opslaan in hun webbrowser geschiedenis. Webiste. Voordat de test voor de website begint, kijk ik of het makkelijk is om te gebruiken, of alles duidelijk is en dat het te maken heeft met het onderwerp van het boek. Tijdens het testen kijk ik naar de reacties van de testers wanneer ze de eerste pagina van de website zien. Ik kijk ook hoelang ze op de pagina blijven. De vragen die ik ga stellen na de test zijn als volgt: 1. Wat was je eerste impressie van de website? 2. Was alles duidelijk? 3. Trekt het onderwerp jou aan? 4. Zou je het boek willen kopen?
11
De antwoorden. Tester 1. “Ik vind de achtergrond van de home pagina heel mooi. Ik vond alles duidelijk, het boek ziet er ook mooi uit, maar als ik wil kopen, weet ik nog niet. Ik zou liever de applicatie downloaden, dan het echte boek kopen. Bij de forum pagina vind ik het goed dat je met je facebook account een commentaar kan achterlaten.” Tester 2 “Website ziet er mooi en simpel uit. Ik kan heel snel er door heen. Het enigste probleem zijn de taal fouten, die moeten gecorrigeerd worden. Ik zou het boek kopen, omdat het verhaal mij interessant lijkt en de boek cover ziet er tof uit.” Met deze feedback kon ik de website aanpassen. Met de hulp van anderen had ik de taal duidelijker en begrijpelijker gemaakt. Je ziet ook bij het testen wie wel een echte boek zal lezen en wie liever een de applicatie zou gebruiken voor de digitale versie van het boek. Applicatie Bij de applicatie had ik deze vragen gesteld: 1. Wat was je eerste impressie van de applicatie? 2. Was alles duidelijk? 3. zou je het vaker gebruiker? 4. Zou je het volledige digitale versie van het boek willen kopen? De antwoorden. Tester 1. “De applicatie is makkelijk om te gebruiken. Het was ook duidelijk hoe ik de applicatie moet gebruiken. Het is net als andere ebooks applicaties maar met een mooie beeld. Jammer dat je de volledige versie van het boek moet kopen. ” Tester 2 “De applicatie is mooi, strak en makkelijk te gebruiken. Bij de informatie pagina is het heel duidelijk hoe ik de applicatie kan gebruiken. De gebruikersomgeving van de applicatie is mooier dan andere ebooks applicaties en dat maakt het leuker om te gebruiken. Of ik de volledige versie van het boek wil kopen, daar moet ik over na denken. Verder vind ik het goed.” Zo te zien was er bijna niks aan de applicatie om te veranderen. Alles was duidelijk en gebruiksvriendelijk.
12
Veranderingen Bij kerntaak 1 heb ik de concept art van de website en de applicatie laten zien. Toen ik met de website begonnen was, kreeg ik meer (andere) ideeen. Ik heb wat verandering gebracht aan de website en de applicatie. Ik laat hier het eerste concept zien en daarna de veranderingen en het waarom van deze veranderingen.
Home
Home
Applicatie
Logo
Luisterboek
Forum
Logo De Home pagina wireframe. Hier kwam ik met het idee om de afbeelding van het boek en de foto van het auteur te centreren op de home pagina. De foto van de auteur links, de afbeelding van het boek groot en midden in de website met texten erbij. Terwijl ik bezig was met de website vond ik dat de tekst en de beelden te druk waren en heb het daarom weer aangepast.
13
Hier zie je de veranderingen die ik had gemaakt voor de Home pagina wireframe. Nu is het minder druk, strak en modern. De foto van de auteur en het boek zijn evengroot en de tekst met informatie staan rechts.
Luisterboek Home
Applicatie
Logo
Luisterboek
Forum
Logo Bij de luisterboek pagina vond ik het ook een beetje te druk. Het zag er niet zo strak en modern uit.
14
De verandering werd simpel, strak en modern. Je ziet gelijk dat het iets te maken heeft met geluid. Middenin komt een balk met een oppacity van 25%. Hier in komt de titel van het boek, de naam van de auteur, de media player met het luisterboek en daaronder de informatie over het luisterboek.
15
Forum Home
Applicatie
Logo
Luisterboek
Forum
Logo
De forum pagina, vond ik goed. Maar toen ik de website ging maken, kwam ik erachter dat het mij zoveel tijd gaat kosten om een forum te maken. Dus ik had ook het design moeten veranderen.
Wat ik had veranderd is, inplaats van een forum te gaan maken,gebruik te maken van de Facebook widget. Hier kunnen bezoekers met hun Facebook account commentaar of ervaring delen met anderen. Naast de Facebook widget krijg je een ander voorbeeld te zien van het boek en boven de widget krijg je informatie van wat je kan doen in de Forum pagina. 16
Website
Home pagina
17
Applicatie pagina
Luisterboek pagina
18
Forum pagina
19
Applicatie
Intro pagina
20
Informatie pagina
Luisterboek pagina
21
Boek pagina
22
