Web Interface Design

Completed MashUp

Sat, 26 May 2012 22:35:00 -0400

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

Limiting word count in my news results

Fri, 18 May 2012 08:06:00 -0400

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.

Twitter and Yahoo Pipes don't play well together

Tue, 15 May 2012 02:00:00 -0400

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!

Design inspirations

Sat, 12 May 2012 11:16:00 -0400

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.

Scrapbook - Look

Thu, 10 May 2012 02:22:00 -0400

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

Different approach to celebrity news retrieval

Sun, 29 Apr 2012 01:22:00 -0400

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.

Daylife API into Yahoo! pipes

Thu, 26 Apr 2012 19:53:17 -0400

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!

DeviantArt issues

Thu, 26 Apr 2012 19:50:39 -0400

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.

Celebrity news - solving dilemmas

Thu, 19 Apr 2012 20:16:25 -0400

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.

Proof of concept PDF

Thu, 05 Apr 2012 05:37:41 -0400

Proof of concept PDF

Design for my idea

Sun, 01 Apr 2012 21:12:27 -0400

I’ve been mulling over how I could merge the celebrity news and deviant art portraits in a really clever way. I decided that the news on its own was definitely not strong or interesting enough.

I think the way I’m going to do it is by creating a celebrity ‘scrapbook’ website.

The user will type in the name of the celebrity, then a page will load with latest news and the portrait. The design will be like a scrapbook, so the news headlines will be delivered in a newspaper clippings style pasted into a scrapbook, and the portrait will be on the facing ‘page’ of the scrapbook like it’s been drawn in or stuck in.

I really hope what I’m planning to with the design is achievable, because without the design, the idea goes down the toilet.

Pushing my idea further

Thu, 29 Mar 2012 00:38:00 -0400

So I still like my idea about the celebrity news mash up, but how can I push it further?

I can’t figure out any way to incorporate something interesting like Google maps.

What about a site that delivers celebrity news, but also popular trends for the day/week/month?

A search function?

Just stumbled across this mashup http://www.doodlebuzz.com/ which is a news delivery site, but instead of just streaming the news onto the page, you search for a topic, such as ‘Obama’ then you create a doodle on the page by just clicking and dragging the mouse around, then it delivers the headlines around the path of your doodle. I really like the idea however when I actually tried to read the individual articles it was very hard and I couldn’t quite work it out.

I would like to use some feature like this, but I also want people to be able to read the news, so I guess from this I can start thinking about more interesting ways for the news to be delivered but keep in mind that I don’t want this to get in the way of the site actually being functional.

Maybe people could search the site for news, but it could also pull artwork of the famous person from deviant art, and show the news in an interesting way combined with the image? There are about a million portraits of every celebrity I can think of off the top of my head. So that should work quite well. But how can I combine the news and the portrait in an interesting way?

The five dollar comparison

Tue, 27 Mar 2012 20:28:07 -0400

On a more serious note… this is a mash up with a social conscience.

“An exploration of the relative value of five dollars by collecting Flickr photos from around the world of things that cost the equivalent of $5.”

That’s a mash up that really gets you thinking. For some reason it looks like this site is no longer functioning, but I read about it on the mashup awards site.

Just a thought...

Tue, 27 Mar 2012 20:22:01 -0400

I decided the easiest way to come up with an idea for my mash up was to think of things that would actually find useful in my daily life.

I was trying to think about what kind of things I waste a lot of time doing on the internet that could somehow be condensed into one place.

Don’t laugh at me, but one of those things is reading celebrity gossip on various websites. I don’t know why I love doing this, I can’t explain it, but I just do. Especially around the time that assignments are due, I could waste hours on end reading about things like Kim Kardashian’s love life.

I wonder if I could create a mash up where news feeds from various celebrity gossip sites were filtered into one (such as TMZ, Perez Hilton, ninemsn, even twitter). It could also contain a search function where you can search for gossip on a particular celebrity or particular topic.

What do you think, Kim????

Looking at mash ups - lolwr.us

Tue, 27 Mar 2012 20:07:00 -0400

I think this mash up is quite innovative and funny at the same time - http://lolwr.us/ -

It pulls pictures of cats from Flickr under the creative commons license (smart!) then you can search for keywords from Twitter posts such as “kitty” and match the twitter post with a cat picture which may or may not result in a hilarious LOLCAT.

This is a good example of a mash up that doesn’t take itself too seriously, but is still extremely clever and well thought out.

The site is very simple to use - I had no idea what I was doing but I managed to make a LOLCAT within about 1 minute. So obviously the way they have designed the site works really well too.

The navigation is plain and simple: “make one!” “log in” “about”

It doesn’t get much easier than that. There is very little room for error when navigating this site, so it makes the experience and the mash up all that more appealing.

You can have the most amazing mash up idea in the world and ruin it with a badly functioning site. In the same way, you could have a relatively simple mash up idea and make it awesome with an awesome, easy to use site. I guess that was the point of the first assignment task! It’s not just about the idea, it’s about executing it well.

Web Interface Design Initial Analysis - PDF

Mon, 19 Mar 2012 04:38:00 -0400

Web Interface Design Initial Analysis - PDF

Example of websites providing users with...

Sun, 18 Mar 2012 04:05:00 -0400

Example of websites providing users with feedback

www.dropbox.com

No one likes waiting, but every application has features that take time to load. That is why responsive websites are so important, especially for a website like drop box. It provides the user with progress on where their download is up to, when it is completed and whether the files have loaded successfully.

Example of social connectivity www.orangedigital.com.au This web...

Sun, 18 Mar 2012 03:50:00 -0400

Example of social connectivity

www.orangedigital.com.au

This web design company uses Twitter, Facebook and a newsletter subscription to empower their brand through social media. By having a Facebook Business page, for example, it allows them to have their own influence over what the public are saying and thinking about them on social media platforms.

Example of website using RSS to their...

Sun, 18 Mar 2012 03:46:00 -0400

Example of website using RSS to their advantage

http://www.apple.com/rss/

Apple uses RSS feeds to notify consumers about top new songs, new apps, products, etc. They use this very effectively as a marketing tool.

Example of portable browsing...

Sun, 18 Mar 2012 03:36:00 -0400

Example of portable browsing capability

http://forefathersgroup.com/

This website uses flexible layouts, images and media queries so that it can be viewed on a variety of different platforms without sacrificing usability. The key is for the website to look good on any screen size.