After the usability tests I started to work on what needed improving, I start with the colours creating something that wasn't so pastel like, I use colours which are bolder. I also redesigned the logo, so it looks better, and instead of using a grid icon I have changed this to a star. I've kept the previous, play, stop and next button the same as they are now, this makes them stand out within the page becoming more obvious that they are click able. The font has also been changed to white which makes it easier to read. The search music still isn't working neither is the submit button on the form, however I have included a little music note at the top, so on tabs it will appear.
After carrying out 5 usability tests I have had some results, I tested on 5 people: Results Q.1 Can you get to the navigation menu? All 5 people that tested could reach the navigation menu. Q.2 Are you able to use the play, stop, next and previous buttons easily? All 5 people that done the test said yes. Q.3 Is the colour scheme consistent and used wisely throughout the app? All 5 people tested said yes. Q.4 Are you able to get to about, so you can read about the app and fill the feedback form in? All 5 people tested said yes. Q.5 What would you change? This question gave the most results all the users that where tested all asked the colour scheme to be changed to make it feel more like a music app. It was also suggested that there was too many colours within the app and the logo was different. I was asked to centre the music playing in the centre of the body as well, however jQuery wouldn't let me do this. A volume control was also suggest which I am working on designing but won't be complete in time for submission.
Overall I have really enjoyed doing this project. Down to the fact that jQuery Mobile is so simple and so well documented. This has made learning the language very quick. What would you improve? I'd like to improve the design more using CSS3 Psuedo classes to change the background with every click to show the different album art on everysong. I also want to make it a little bit more punchy and get the search bar working as well as the feedback form! What have you learnt? I've taken from this that I have a better than basic understand of jQuery and JavaScript and I am able to use jQuery Mobile efficiently without overdoing with having too many features within the app. User testing, Where is that? That is coming in tomorrows blog post. I have created a questionnaire which I will take people through. Q.1 Can you get to the navigation menu? Q.2 Are you able to use the play, stop, next and previous buttons easily? Q.3 Is the Colour Scheme consistent and used wisely throughout the app? Q.4 Are you able to get to about, so you can read about the app and fill the feedback form in? Q.5 What would you change? I will test this on 5 users tomorrow, before I hand this in for submission.
I had problems with styling within my own music app because I'm using jQuery mobile and its very reluctant to let you style your own work, which makes me sad.
This is what I have used, ideally If i was using just a html page and jQuery this would have been easier to style. But everything within this works, when you import mp3, be sure to import .ogg as well. As some browsers don't use .mp3 files. It's hard to show in this blog but everything is working as intended. The styling needs improving by a lot but as it stands it isn't awful to look at.
I've included a search bar as you can see, but because I'm not using any backend code It doesn't do a lot, the search is full with the current music which is on the app. So if you search for cold it will pop up with coldplay underneath the idea is to make that come from using AJAX suggestions, like google does. You then press the link and it will play the song I tried linking it but couldn't mange too, but with more time and research I will be able to do this. In the about page I have filled out what the company does, I then have spoken about the future of Muwa and where I would like to take it. I've used jQuery forms to include a form into this app, I attempted to use a mailto on the submit button to try and make it send the results to my personal email. However I will need to use backend scripting to get this to work, as mailto just pops into your e-mail program and won't send me the actual results.
The tutorial that I have previously mentioned has come in very handy, basically I followed it step by step pausing as and when and created the most basic music player ever! However it worked which is something! So how did it work? So it is done by using an array, we start off by declaring the number the array starts at, which in jQuery is 0 because 0 = 1, confusing but it goes up in increments of 1 so not too bad. We also had to declare a variable which we did at the top of the code. We then told the varible to look through the page by using GetElementByClass, which is similar to ID, but instead of ID's we used classes, ID's could have been used also. The tutorial first started with a play button, which is simple enough. Originally the tutorial has used divs but because of the way I have styled I've changed to <li> List items set within a <ul> Unordered List.
We can see here that I have set them all using the classes that I want to use. At the top of the page I have the jQuery to go with this.
Within this snippet lies the play and stop class.
Top of the page
Using jQuery we have made this on-click functions which basically mean, when you click on something it will do something. Now we have created that inside of it we are able to program it. What I have asked the play to do is look at the array. Its worth noting at the top of the page I've loaded the array into the variable. So now that when you click play it looks at the array and see's what is number 0 and plays that song.
This is the first song in the array, the way jQuery defines this is by going through the DOM and looking for the first object with the class 'playsong'.. Like we told it to earlier. And because this is the first object it can find it will play this first, it knows to play this as a song because of the <audio tag> It does the same with stop also.
This snippet of code is different. We will start with next. So it's talking to the next class we can see this at the top and we have set it as a on-click function. Inside the function we have said for the function for each audio tag with a class of playsong. When clicked pause the song. We then come out the function but stay inside the other function we tell it increment in the array by using ++i. We then tell it to load the next song and then to play it. The previous is the same as next however instead of telling it to increment we tell it to decrement by using --i. Using this code, we have created an array which will increment and decrement as told. In the next part it will tell you how to change the song name, song artist and artwork.
So in this we have called the function callMeta, because we calling Meta Data, we have 3 variables in this function. They all do the same just to different parts. Starting off with trackTitle, we have declared the variable here and we then link it through to our array, but then by using .attr we tell it to look into the array for the attribute 'data-songtitle' once we have done this. We need to write this class down in our list.
So we written the class in our list then by using .html it will override everything thats in that tag and change it to trackTitle which we have declared above it. The same principle applies to the next tag, in the img one because we are using images some things change and we have to say looking for the images in album.art then we use attr('src', albumArt) So basically the image in album art. We then need to callMeta in our play, pause, next and previous variables so that they know to change. Once you have done this you will have a working music player. It will look so basic but it will be present.
I've used a previous template that I used for a previous jQuery Mobile project, just so that I don't have to waste time writing code that I already have. I've start off buying just building a simple nav panel with nothing more that a Music Player and About in. I plan to keep this through out my application. Before I went further because I knew that I was going to create another page, I copied what I had and pasted it below. And shock it didn't work... but only because I had forgot to close off a div, once I had fixed that it worked fine.
I'm not the best at keeping my code tidy, so I am making an effort at trying to with this. We can see here that all i've done is make a navigation panel which will pop out and have a little grid as it's icon. This is exactly what I want and don't plan to change this at the moment, I've also named the home page "home" in the id so when I refer to it in the controlgroup it know's where to look and will navigate to it.
I have done the same here, except I've just called the page About rather than Home. This is all working fine now, I need to go to Themeroller for jQuery mobile and select my theme. I want a Blue head, and orange with everything else. I have also created a logo for my fictious company.
All I did was combine the word Music and Web Application to achieve this. I then created the tagline Soundtrack Your Day.
This is how it is looking so far, I am happy with how it looks and will keep this theme throughout the whole application. Themeroller is very simple to use all it requires is for you to drag and drop colours into places you want, you then download it, give it a name and import the CSS into your html page. Inserting the img into the header was simple, it's the same as inserting an img in any webpage. I did make this responsive first by adding; { Width: 100%; height: auto; } However, it scaled incredibly badly so I just kept it as it was.
After doing some research into Music players, I need to start creating my own. I trawled through the web trying to look for information to help me. I found some decent enough things that other people have put out there, however nothing that I really want to use. Also because they have written the code, and a lot of them are just variations of jPlayer, which is nice but I don't want to use jPlayer. I wanted to create something of my own. I used this link http://www.jquery4u.com/media/10-jquery-html5-audio-players/ which has plenty of examples on, but I wouldn't be learning if I was to just copy from them and paste it into my own application. I carried on searching and remembered Youtube is quite a good place to get tutorials on how to create things within any sort of language!
I watched this 2 part tutorial, on how to create a fully customisable one. This tutorial was very helpful and really renewed my knowledge of JavaScript and jQuery. It also reminded me that I aught to start using the languages a lot more than I already do. The tutorial doesn't cover everything for example it doesn't cover a previous button but will cover a next button. It also doesn't show you how to customise what you have built. Now I understand that I have to create a web application using jQuery Mobile, but what I've tried is to put it within a jQuery Mobile template and see if it works!
I also redesigned the logo, so it looks better, and instead of using a grid icon I have changed this to a star.
