Web Interface Design

Please see the My Celebrity Scrapbook Mashup page above for link to final MashUp.

Because of the intended styling and layout of my page, I needed to set a word limit for my news articles. I first looked at trying to do this through Yahoo Pipes and the Regex function, but as I’ve mentioned before, Yahoo Pipes is extremely confusing to me. I tried to use the code from an example I found on the web, but it didn’t work. Rather than wasting time tearing my hair out I set about trying to find a solution in my PHP code.

I did finally come up with a relatively simple answer, which was a little thing called ‘substr’ or substring. I just added this piece of code

$description = substr ($description, 0, 150);

And it now cuts my news articles off at 100 characters. Unfortunately this does mean that sometimes a word is cut in half. But the PHP code required to make sure it only cut off at the end of a word was just too complex for me to get my head around, so I’m sticking with this. You still get to read the full headline, so you get what the article is about, it’s only the description that gets cut off after a certain point.

After finally getting my pipe to work properly, Twitter started playing up. I was also warned that if Twitter was causing problems, it could also cause problems for the other data sources in my pipe mashup. So rather than use Yahoo Pipes I’ve just made the Twitter RSS request and extracted the data straight through my PHP code.

I also had some trouble getting this to work at first, and was a bit stumped about how to limit the results to just 1 Tweet. But the solution was a pretty easy one in the end. I thought I had to use a complicated PHP code to limit the results, but I ended up just using CSS. Because the Tweets were <li> I just gave the <li> a 100px bottom margin, then set the height of the Twitter div to 60px, and overflow to hidden. So technically I’m still getting all the Tweets in the RSS feed, but you can only see one on my page. Easy!

Although I have the main style of my mockup worked out, I’m still looking for little bits of inspiration. I’ve been enjoying looking at scrapbooking images on Flickr. Some people take this stuff really seriously! The results are really cool but I don’t think I’d ever have the patience to scrapbook myself. But it’s given me some cool ideas of how to decorate the items on my page to give it that ‘scrapbooked’ feel, even though it’s a website. 

I’ve tried to create the scrapbook look for the header/branding of my page. I used a photoshop process involving clipping masks, brushes, a nice fabric pattern and a bit of patience :) 

I’ve also used a paper texture for my background

Right, so, as good as Daylife API is at aggregating thousands of sources for news, I basically figured out it was only going to work in Yahoo Pipes for a specific search term. I tried to use the URL builder to change the query term but then figured out that the signature key that Daylife API generates for you, which has to be in the URL, changes every time you search for a different term. So it just simply wasn’t going to work.

Instead, I’ve decided to use google news, yahoo news, and then the rss feeds from the celebrity section of the age newspaper, various e-online feeds, and TMZ. I’ve tested this and I’m getting a great range of articles on basically any celebrity that I can think of, so that’s all good.

Because I made a pipe for my celebrity news, deviantart and twitter all separately, I had to then merge them all together in to the same pipe. And the moment of truth…. IT WORKED! By some miracle….  I can’t even believe it myself right now but it worked. When I type in the search term such as Britney Spears I am now getting 1 image from deviantart, 4 articles, and 1 twitter post.

SO! Now I can start on my actual web page. I will work up a proper mock up in photoshop before I do that though. I’d like to have that all ironed out so that I’m not designing as I go along.

Still having issues feeding the Daylife API into yahoo pipes, so I ended up emailing the developers at Daylife API.

This was their response:

“Sophie

Daylife API calls can give you JSON feeds or XML feeds of content about any subject. You can use a Daylife API request URL as an input to the Feed Fetcher plugin in Yahoo! Pipes to bring content from Daylife and use in your mashup with content from other APIS.”

Now, that all sounds fantastic but I still don’t really know how to make this work. The problem is, I don’t just want a feed about a particular subject. I want a feed about ANY subject, determined by the site user! I have a feeling I’m going to need some tutor guidance on this one!

After much frustration and hair-pulling, I finally got deviantart to work in yahoo pipes the way I wanted it to. Unfortunately the RSS feeds available on the site only give about 30 results, so if people are searching for celebrities through the RSS feed in pipes it would only work if the celebrity they were searching for just happened to be one of those 30 results.

Some kind, kind soul created a pipe where you can use the string builder and URL builder to create a page using text input as the query parameters, so then it shows results for any search term.

Most of this pipe is copied, I had to customize some of it, but I still don’t really understand how it works. Pipes is very, very, very confusing to me. I’m just happy it is working and crossing my fingers that I can mash this up with twitter and Daylife API.

Someone who gave me feedback on my idea raised the point that a lot of the celebrity site RSS feeds only provide the 10 or so latest news stories. This posed a problem for me as I want users to be able to search for any celebrity on my site, and that meant there would be no guarantee that there would be any results for the name they searched.

I then thought back to one of the mashups which inspired my idea, http://www.doodlebuzz.com/ and noted that no matter what topic I typed into the search box, it produced infinite results. Upon further investigation I found that this site uses the API called Daylife, which indexes thousands of news publications and archives.

I’ve emailed my tutor and fingers crossed I can use this API, and mash it up with fan art from Deviant Art and tweets from Twitter, rather than mashing up individual celebrity news sites.

If I’m able to use this API, it will ensure that no matter what celebrity name is typed into the search box, there will be results. This will provide a much better user experience. There’s nothing worse than trying to use a site and realising it won’t cater for what you want.

Anyway I’ll keep my fingers and toes crossed for now.

:)