Mashup

Chris Harwood (21108489)

Original idea

My first idea was to graph financial stock data onto a html5 canvas. This way I could plot the data and animate the graph in an interesting new way. However I hit a number of problems. The first was it was incredibly difficult to find a website that would give away its API for free. The commercial value of the data is very high. The second is that the html5 canvas turned out to be way above my ability. Also the fact that the project would be very bland I decided to change my idea. You can see the design process and ideas on my blog.

Revised Idea

I wanted to create a mash-up of Twitter feeds and pictures from Twit-Pic. Users could use the site to “stalk” their favorite celebrities. For example if you entered rabbit_stu, you would get my twitter feed and any twit-pics I have. Both use different API’s so it satisfies the requirements of the assessment. The “Stalk” aspect is meant to be a light-hearted hook of the website or trade mark. I think my website provides a new service using these 2 APIs.

What API’s?

Twitter

TwitPic

Design

Design cont.

I wanted to create a simple/elegant but striking theme that would be original. The yellow background really makes the text stand out. The black strip breaks up the page in a sensible way so users know where they should be focusing.

Beginning of code

I started out by simply outputting the data into a simple webpage.

Code ExampleTwitter API

For my Twitter API I used a php to build a url to get tweets through JSON.'http://api.twitter.com/1/statuses/user_timeline/%s.json?count=20', $usernameUsing the Twitter API documentation, I used “statuses”, “user-timeline” and of course through a JSON request. ?count= simply limits the amount of tweets returned. To format the data I used a loop for each tweet and inserted the result into a div witch I could format with a div – class. <?php foreach($tweets as $tweet) { ?>

<div class="tweet"> <img src="<?php echo htmlSpecialChars($tweet['user']['profile_image_url']) ?>"/>

<?php echo htmlSpecialChars($tweet['text']) ?></div>

<?php } ?>

The $username var would later get it’s value from the user.

Future development

I want to call Google’s maps API and location data from tweets or pictures and then map them. So the user could see where in the country, the person their following has tweeted from.

Links/Notes

Due to the lack of curl support of zappa, this project will have to be run in a local area. I have included the zip folder containing all the .php files.