Project A Rational- Music Arena

With this project, I found I had to adjust my original idea several times.

This was due to either time constraints or personally not knowing enough programming to implement what I wanted to do. However I was able to adjust my idea enough that it really emphasised something I really enjoy- music.

I really like music and have always enjoyed reading reviews for albums before I go and pick it up myself whether I agree with the review does not matter as much as I have the chance to see in a summary the types of things they did on the record and it’s this type of thing that I wanted to explore with my webpage.

Problems I encountered during programming

• I did not know how to have content separate from the navigation bar.
• having a chat window where readers could comment directly onto the site
• alignment of media
• Implementing a custom search on the site,

Through talking to the lecturer, tutor and friends I was able to solve most of these problems.

For the navigation problem, I had considered using frames and Sharon had suggested that I use nested groups but it was during one of our updates where we got to see how everyone else was doing that I was able to solve this problem. I ended up using tables to create sections that would divide up my navigation bar and my review. This turned out to be good way to set up a basic template for the pages.

The chat window was a difficult one, I had viewed the source on several sites trying to decrypt their programming however this did not go anywhere as it looked as though I would need to set up some sort of array work which I think was delving into so Javascript. So I improvised, I knew I had to link my webpage to my blog. So, I utilized what I already had. The readers are able to access my page to comment on the reviews or make suggestions via my blog. This also makes this easier for me to manage as I can read the one page instead of ‘x’ number of reviews.

The alignment of media was something that also took me a while to get my head around. I spent some time searching code that would align the embedded files for me and I ended up using align=right in to get it on the right side of the page. However this proved troublesome with screens with a larger aspect ratio and when people used full screen. Luckily, I was able to ask Michael during his online sessions and solved it by creating a div class for the media. In that I specified the position to be absolute and the left alignment to be larger than my box which had the review. This then fixed it neatly to the right of the review.

Lastly, the problem with implementing a custom search was one that I was unable to solve. My original idea I had a custom search that would search the contents of the site and if the review you were looking for did not exist then it would redirect to a page where you could suggest that we do a review. I tried looking at source codes, went to friends who are programmers but they could not help me, I read numerous tutorials on how to create one but nothing explained how I could get the fields to work. Finally, emailed Michael about it and he suggested that I look at implementing custom search and look at Google custom search bars, if that did work then Javascript could do it though he did not expect me to be able to do that. Well, I looked into the Javascript, Perl and PHP. These proved to mean little to me as I have not programmed enough and with the project due date I had to look to Google. This however required me to be online so webs.com looked like the way to go.

I did play around with it a bit and webs.com was fine, Google Custom Search Bars proved to be a little more difficult. I tried to set it up to search the site, I read review on how to get Google Custom Search to work but it was not searching my website. I was just left with the cold words ‘could not find- mayday parade’. So I had to resolve to not having that set up and writing about it here. Hopefully, I will eventually understand how to program my own and will not have to deal with Google.

I understand that there are other sites that do similar things, such as Ultimate Guitar who review albums, instruments and is a database of tablatures for guitarists. There is also Song-meanings which is a database and a forum for discussing lyrics. Design conventions I have differed from these two sites. I have used a vertical navigation bar instead of the horizontal. This will allow me to add new pages to the site without compromising the content. Other conventions I have followed webpage logo is a link to the main page and content is in the centre with media to the right. Another think I have done is linked the album covers to the band’s myspace pages. That way the readers can find out more specific information about them such as tour dates and upcoming events

There is certainly a big audience for a website like my webpage to take part in. The way that I have tried to differ is opening up the ability to review to the readers. This way they play a larger part in the musical community by voicing their opinions and creating my own community or following with my page.

 Justin Yip u3053445

Music Arena Blog

This is your space to get your requests in for music reviews, send me your own reviews or chat to others's about bands that are currently on your playlist!

It's a free for all here so post them up!

Music Arena

Lecture Week 6- Carving Up The World

This weeks lecture was really interesting. Really liked having some philosophy thrown into the course breaks something I enjoy doing with something equal enjoyable. Anyway to the point, today's lecture examined humanity's innate need to categories everything and anything. So the actual meaning of the Cascading in CSS refers to the ability the code has in the CSS. If the code specifies in the body (being the largest tag) the font-family and font-size then that will apply to all of the style sheet because it was placed in the body. It now does not need to be specified anywhere else.

So, carving up the world was the idea we focussed on. We have created conventions that we just take for granted such as clothes, books, which side of the road we drive on and cuisine. These are all things that we have developed over time and its these conventions that we let define us. The same thing happens with creating interfaces we have a general idea what a web-page should look like because of all conventions that have been developed  since the internet's creation. However we have a fantastic opportunity at this current stage of the internet. While books for instance have been finished in design the internet's has a different set of affordances and limitations to the real world. Thus we are able to constantly develop new ideas for this technology as the physical limitations do not apply. As Michael said we can now move a hundred documents with a single drag where you would not be able to lift a hundred documents all at once in the real world.

A designing point, Michael made 'Sometimes conventions are worth following, until you are comfortable to break them.' I thought was really cool because what that meant was when we felt comfortable with the design conventions that there is always a place for us to create new ones. This is especially exciting as the idea that one of our designs could replace a current convention was mind-boggling.

Also, while looking at machine tags I wondered whether this what what I needed to incorpotate the search bar option in my web page. I have been investigating hopefully I can find something to get it running before the due date. Heres hoping.

HTML + CSS Semantic Mark-up

The Semantic Mark-up is definitely much easier than Presentational mark-up. Though I never really thought of HTML Semantic Mark-up cause I have always used it. Not to say that I knew that it was called that or anything just it was shown to me as a basic thing in HTML couldn't really imagine doing anything without it. Semantic mark-up is tags that help describe what is happening in the code. Such as when you use This is bold you are telling the computer that the text in between the 'B' tags are bold. Another one for instance is  This is emphasised here the text has been emphasised.

As for Non-semantic mark-up, I'm just going to take a stab at it but I think that presentational mark-up is a form of non-semantic mark-up. As Semantic means logical and reading presentation mark-up does not really come off logical to read. Welcome to the site  It's pretty messy and hard follow, you can decode it but far simpler and much more logical to assign tags. 

Cascading in Cascading style sheets refers to the fact that multiple style sheets can be applied to a single web-page.

My Assignment is coming along well still have a few things I would like to set up such as a Search Bar. Though I think that I will probably spend the most of the final week writing content for the each artist.

Week 4 Lecture- APIs and Mash Ups

Today at our lecture, we were looking at APIs, Mash ups and we also touched on Java Script.

Now, API  (Application Programming Interface) is a interface for between programs so that they can share data. This is really cool because the example given was that we could store photos on Flickr and then in our HTML for our web page we could write a line of code that can request the image or image set from Flickr. This I think is really nifty (a very technical term) as I don't need to store all my photos on my own server. API is all about accessing data in a functional way.

Another thing that I am looking forward to incorporating in my Project A is the use of

tag (division tag) to make my scripting a whole lot neater! So I can put this around content that I want to do stuff with later.

tags are styled with #ids or .classes. We then can assign our own tags in HTML rather than h1 or p and then we add style to these new tags using css.

Another enlightening fact we were told today is that we can actually have more than on CSS file. Admittedly this hadn't occurred to me in the slightest. #ids however can only have one meaning assigned. So we need to assign a class which can handle many.

Another cool trick was using the source file to get the extension to see the CSS file for the web page. so if we find anything that we like style wise we can check it out by adding the extension into the URL. Wolfenflickr I think is pretty cool, APIs could be used for all sorts of things. 'New ways of experiencing content" was the main idea that went with using APIs. Every Block is cool too however knowing about how many fire department dispatches their were between 1 and 4 baffles me at the moment. But who knows that might be something really important when collecting data about an American city (Everyblock not available anywhere else yet). But essentially it collects data from APIs about your local area and arranges them in a feed so you can see what is happening in your local area.