Thalia Giannake - KIB204

Thalia Giannake n7475527

[kib204thalia]

Final Submission: LOCAL.LIVE

LOCAL.LIVE is my final mashup!

Link: http://thaliacamille.com/sites/mashup/index.php

LOCAL.LIVE is a live music mashup intended for Australian music fans. It sources data from Flickr, Twitter, Fasterlouder, Rave and Youtube via RSS feeds, and condenses it into a straightforward, "one-stop" interface.

Focusing on state capitals, it's easy for the user to navigate to view information on the different cities. At this stage, only Brisbane, Sydney, Melbourne and Adelaide are available, but it is feasible that with more time, knowledge, skills and info other cities could be added.

The site aims to show a snapshot of the live music scene in the selected city. It shows photos of recent gigs, music news, reviews and upcoming events, as well as video footage. It's intended for people who want to know what's on in their area, as well as people who may have missed a recent show or want to see or read someone else's perspective on one they've been to.

Created using php, CSS3 and Yahoo! Pipes, this was a huge undertaking for me that tested skills I didn't think I had. I learned a lot of cool CSS tricks (no more images as header text!) and some php (a prospect I still find frightening), and think this will definitely be useful in future endeavours.

I did have a few issues with Pipes (slight understatement), mainly Twitter and Youtube. At the time of writing this, Twitter is still sometimes not returning any results (although I know it works), and Youtube still occasionally shows irrelevant results. I've excluded some search terms that seemed to be coming up a lot (Iranian soccer games, anyone?), but it's hard to completely avoid inappropriately-tagged videos. I definitely feel like this is something I'd like to have gotten better control over, but it's really too far above my head, and I'm reasonably happy with how things turned out anyway.

I've enjoyed finding good data sources, and struggled with some of the less convenient ones. As evidenced in this journal, I went through quite a few ideas and used my data sources as inspiration to help me narrow it down. I think that stylistically, my final mashup comes quite close to my initial mockups and is true to the look I was going for.

On the whole, I'm proud of the way my mashup has evolved and the final product of my hard work. Despite some small issues, I've achieved my main goal of bringing together many sources to give an overview of live music on a city-by-city basis, in a user-friendly way.

[kib204thalia]

Final Notes

A few quick notes before revealing the final product.

I thought I would have some issues with the background image (apparently older versions of Firefox and IE, like those on the uni computers, don't like svg) but decided I didn't need any extra measures to accommodate this. Most up to date versions of Chrome, Firefox and Safari are able to view my site perfectly: I tested on all 3 browsers on my computer (Mac) and my partner's (Fedora/Linux), as well as using browsershots.org. 

I had originally planned to do all state capitals, but finding information on the less populous cities proved difficult. I eventually ended up doing Brisbane, Sydney, Melbourne and Adelaide (which was a stretch...). I would like to provide a more comprehensive resource, but that would take more time and knowledge than I currently have at my disposal.

[kib204thalia]

Running list of Things To Do

Will continue editing this list as I go, until it's finished.

- Give the damn thing a name! - DONE

- Maybe work on that header text; see if there are other fancy CSS3 features that could make it look better. DONE

- Add a menu bar with drop-down for cities. DONE

- Flickr section: display actual images (not thumbnails) so they can be made bigger, and into clickable links. Work on the sizing, see if possible to get all landscape/portrait only. DONE

- Do I want Twitter section smaller? DONE

- Gigs: work out how to lessen number of words in description of each item. DONE

- WHY THE HELL IS TWITTER RETURNING RANDOM SPAM AND YOUTUBE RETURNING FOREIGN SOCCER MATCHES? Stupid Pipes...URGH

- Youtube: make identical to Flickr (larger preview images and clickable to go to video). Decided to just embed two videos. Much easier, no time to do something more complex. DONE

- Make sure all pipes are returning relevant items. Done, except for Twitter which still returns no results sometimes. DONE(SORTA)

- Find out how to style scrollbars? This looks hard...TOO HARD BASKET!

- Add a footer with credits. DONE

- Make an About page. DONE

- Final check for style, make sure everything looks right. DONE

- Backup plan for the background image. DEEMED UNNECESSARY

- The most time-consuming step: once it’s all done, copy this page 7 times and alter slightly for all the other state capitals. Do the same for Pipes (that’s a lot of pipes!). Link them all together in their menu bars. OR find a better way? DID 4 CITIES ONLY, TOOK FOREVER

- Host everything. DONE

- Tumblr! (inc. Progress Reporting tag)

[kib204thalia]

Progress!

I've made some changes to the appearance of my site. So far:

- Made an svg image for the background: this auto-scales to suit any screen, and is also fixed so the background stays in place when scrolling (I know, very Myspace: but it was necessary to make it work).

- Played with fonts. The custom font I'm using isn't large (in terms of file size) so shouldn't be a problem.

- Neeeeeeeeearly made pipes behave. As you can see, it still picks and chooses when it will work.

Things left to do:

- Give the damn thing a name!

- Maybe work on that header text; see if there are other fancy CSS3 features that could make it lok better.

- Add a menu bar to display current city, and drop-down for other cities.

- Flickr section: display actual images (not thumbnails) so they can be made bigger, and into clickable links.

- Do I want Twitter section smaller?

- Gigs: work out how to lessen number of words in description of each item.

- Small amount of formatting for News and Reviews sections, otherwise they seem fine.

- Youtube: make identical to Flickr (larger preview images and clickable to go to video).

- Make sure all pipes are returning relevant items.

- Find out how to style scrollbars?

- Add a footer with credits.

- The most time-consuming step: once it's all done, copy this page 7 times and alter slightly for all the other state capitals. Do the same for Pipes (that's a lot of pipes!). Link them all together in their menu bars.

Aaaaaand then that should be it!

[kib204thalia]

Midsem Feedback

Following feedback on my midsemester assessment, I've decided to further focus and refine my idea.

Instead of encouraging users to search both locations AND artists, I'm going to make the mashup based around Australian capital cities. It will focus solely on Live music (rather than music in general). To do this, I'll have a menu where the user can select their city, which will then bring up the appropriate page/information.

I'm still wrestling with pipes, but am making some progress in terms of layout etc. now that I know what I'm doing. Aiming to get as much done in HTML/CSS as possible, before reluctantly using PHP or Javascript (if I haaaaaaaaaaave to!).

[kib204thalia]

Changing some of my sources...

Found a pretty decent RSS feed of gig guides and reviews from Rave.

Now I have:

Flickr: Photos

Youtube: Videos

Twitter: "Buzz"

Rave: Gig Guide

Rave: Reviews

Fasterlouder: News

Wondering if I should use this many, or cut it down a bit.

[kib204thalia]

Seeing what I remember about Yahoo Pipes, and putting them into a quick HTML mockup.

Source, left to right:

Flickr (Invisible, because Pipes is giving back timeout errors and generally being irritating)

Fasterlouder

Twitter

Youtube

Now just have to work on adding pipes with user input (a search bar) and combine them all to use the same single search. And make it look good. And not go insane.

[kib204thalia]

Urrrrrgggghhhhhh Pipes!

Keep getting "Read Timed Out" errors at the most random times. Pipes is so temperamental! It's impossible to make much progress, because a pipe that's working one minute can return no results the next, without anything having changed.

Plan of attack for the assessment due week 9: change my focus to doing an HTML mockup, and hope I can get a bit more work done with Pipes if it decides to play nice before then!

[kib204thalia]

Proof of Concept Poster.

[kib204thalia]

Mockupssssss.

Pretty stoked on them, if I'm honest.

[kib204thalia]

Wireframes: my initial sketches as I was coming up with my design and layout.

[kib204thalia]

POC: Final Concept

The concept for my (as yet unnamed) music mashup is as follows.

Description

A music mashup site based around live music. It provides images, gig guides, reviews, videos and "buzz" all in one place.

Use Cases

1. Search by band.

On the front page, the user has the ability to type in a band/artist name. This is a one-click process, laid out very clearly on the homepage. The results returned include images, Tweets, Youtube live clips, reviews of gigs they have previously done, and a list of their upcoming shows. All information is displayed in one place, and wont require the user to navigate away.

2. Search by Location.

Similar to the above, the user can search by location (eg. "Brisbane"). The results are then based on live music in general in that location, with the same data sources used.

Data Sources

Flickr - photos from recent gigs.

Fasterlouder - Photos, reviews and gig guide

Twitter - Tweets ("buzz")

Youtube - clips of live performances

[kib204thalia]

Moodboard compiled for my music mashup. I always associate red and black with live music. I find the propaganda-style posters to be an interesting style, and it's something I'd like to experiment with.

[kib204thalia]

Case Study 2: Foodspotting

http://www.foodspotting.com/

Foodspotting goes one step further than your average restaurant review site. Rather than just being able to search through restaurants, users can also search dishes. If, for example, the user craves Gyoza, they can type it in and find restaurants near them that do good gyoza.

Information Sources

Include:

Twitter

Foursquare

Google (Maps/Geolocation)

Use Case

The user can search by dish, restaurant or location.

The default location is the user's location, unless they enter different information. The results are returned in both a map and list formats. A list of related "guides" (eg. "Brisbane's Best Breakfast") are also listed down the side. The results are very easy to read, and can be clicked to find more information, images and in-depth reviews.

Assessment

This site is part of the reason I chose not to do a food-related mashup. It's hard to find fault, or anything lacking, with this site: the range of information sources, the ways information is presented, and the user interaction are almost flawless. I will certainly be taking some cues from this site when I create my mashup.

[kib204thalia]

Case Study 1: SoundReady

http://soundready.fm/

SoundReady is a website that generates setlists for bands as requested by the user. It analyses trends and looks at previous setlists to determine what a future setlist will consist of, and allows the user to listen to playlists matching this.

Information Sources

SoundReady uses a variety of APIs, including:

rdio

echonest

songkick.com

setlist.fm

Use Case

The home page is easily navigable: the user is prompted to enter the name of a band or artist.

The results show what is likely to be the setlist at an upcoming gig for that artist. The user can listen to the songs right in the browser, without navigating to a different page. There is also some information on the artist, and a list of their upcoming gigs.

Assessment

This site provides all the information that someone looking forward to a concert could want. I personally have looked up setlists before, and would definitely use this tool in the future. It also incorporates many of the features/expectations of web interfaces that I discussed a few weeks ago: social connectivity, live/current data, cross-browser/platform compatibility and usability.

[kib204thalia]

Refining My Ideas and Making A Decision

Decision time!

Now that I've done research regarding data sources, I've established the following sources, and which of my 3 ideas they would be suitable for.

Ideas:

1. Restaurant idea

2. Recipe idea

3. Live Music idea

Data Sources:

Twitter - suits 1, 2, 3

Flickr - suits 1, 2, 3

Foursquare - suits 1, 3

local.google.com - suits 1

Yelp - suits 1

Taste - suits 2

Fasterlouder - suits 3

Looking at this, it's clear I have more data sources for my Restaurant and Music ideas than my ingredient/recipe-based mashup. So, idea #2 is now eliminated.

Refining the Idea

This leaves two ideas.

1. My Dining Out Mashup

Data sources: Twitter, Flickr, Foursquare, local.google, Yelp

Idea: I want to expand this idea, so it's not just restaurants that are searchable, but also dishes/cuisines. The user can search for either a specific restaurant, or a type of restaurant. Results would include reviews, images and location details. I need to figure out how to streamline this best to include location etc.

2. My Live Music Mashup

Data Sources:Twitter, Flickr, Foursquare, Fasterlouder

Idea: Allows users to find images, reviews and gig guides, pertaining to either a specific location or a specific band/artist.

Decision

After looking around at a few different mashup sites, and considering the potential for what I want to do, I have decided to go with the music-oriented site. I have seen too many good examples of food-related sites similar to what I want to do (examples to follow), and think I'll be able to be more creative with my music site.

[kib204thalia]

Research: Data Sources

Having come up with 3 different ideas for my mashup, I am now looking at the data sources that I might use, to help determine which idea I will select.

Proposed data sources:

Twitter

Flickr

Foursquare

Urbanspoon (or similar?)

A recipe site (taste.com.au?)

Fasterlouder (or similar?)

So, beginning with the easiest...

Twitter

https://dev.twitter.com/docs

The documentation for the Twitter API is EXTENSIVE! This seems to be one of the most commonly used data sources for mashups, and there are many apps, widgets etc. created using this documentation. It appears to be easy to use, and would be helpful in providing community-based "buzz" about the subject of the mashup. Getting real-time opinions and info seems like something that would be valuable in any of my 3 mashup ideas.

Flickr

http://www.flickr.com/services/api/

The Flickr API is also one of the most commonly utilised in mashups (as evidenced by the large number of search results if you look up "Flickr" on Yahoo! Pipes). This is one data source that I experimented with in class when we looked at Yahoo! Pipes, and it does seem to be quite straight-forward. I can imagine that this would work well to provide images in whichever of my mashups I choose to do - it's easy to find gig photos (there are many!), and it's equally easy to find images about food and restaurants. As an experiment, I searched some of my favourite small local restaurants and there, and got a surprisingly large number of results. I will definitely use Flickr, regardless of which mashup idea I choose.

Foursquare

https://developer.foursquare.com

Foursquare has been suggested to me as a possible data source. While researching, I was suprised to learn that popular iPhone app Instagram uses Foursquare as a data source (see: https://developer.foursquare.com/appsshowcase/instagram). I can definitely see the use of location as being beneficial to each of my mashup ideas, as well as the fact that the number and nature of "check-ins" could definitely be of use in my restaurant mashup.

Urbanspoon (or similar)

In all my research, I COULD NOT find a feasible way to incorporate Urbanspoon into my mashup. No RSS feeds, no API, everything is closed off to developers. Some alternatives I came up with are:

local.google.com: the Google API has quite extensive documentation, but I'm not 100% sure how I'd implement this.

yelp.com

http://www.yelp.com/developers/documentation/examples

Similar to Urbanspoon, but seemingly less popular in Australia.

I will definitely have to assess whether this will affect my choice of Mashup theme.

Taste

http://www.taste.com.au/feeds/

After the frustration of Urbanspoon, it was a huge relief to find that one of my favourite (and one of the largest) recipe websites, taste.com.au, has a heap of usefull RSS feeds. This bodes very well for my ingredient-based mashup idea.

Fasterlouder

http://www.fasterlouder.com.au/

Fasterlouder is one of Australia's foremost music sites. With a built-in RSS feed, this one should be fairly easy to build in if I choose to make the live-music-based mashup.