Tuesday 11 November 2008

User Experience in Web 2.0 – Make your own news Cloud

The internet has come a long way from its humble beginnings and so has my website. In this article I will be talking about some of the technologies that are emerging on the internet, how website design and user experience go hand in hand and then talk about how I went about implementing the framework used in my website; http://www.mrpfister.co.uk/ and how you can make your own News Cloud using its technology.
Originally virtually all websites are just text derived from HTML developed by Tim Berners-Lee in 1980, and then along came additions to the original HTML; images, tables, formatting and then eventually style sheets. This meant that a webpage could look good however it was still only displaying static information that would only change once the webpage was reloaded.
Eventually this all changed with AJAX (asynchronous JavaScript and XML), allowing web pages to dynamically load content and ushered in Web 2.0 where programmers and web designers were free to start pushing sites to the limits of their imaginations, rather than the technical limits that prevailed.

Moving on to more recently Microsoft unveiled Silverlight; a framework to create rich online interactive experiences that tied in using the software plus services mentality to the desktop superset; Windows Presentation Foundation. One of the most predominant features of Silverlight is Deep Zoom which allows zooming in on ultra hi-res images; up to 1 billion pixels worth! The most incredible example of this can be found at the Hard Rock Cafe’s Memorabilia website - http://memorabilia.hardrock.com/

With the increase in the graphical nature of the content found on the internet – made possible partly due to tools like Silverlight and also due to the huge increase in bandwidth available to broadband customers, user experience now plays an important role in website design. It is no longer the case to have a web presence, but now it has to entertain and interest those that use the site and maintain their interest so they don’t deviate elsewhere. This brings us to user experience, it is not just the content of the website that will interest those that view the site but the way it is presented as well.

Therefore with the release of Silverlight 2, I decided to redesign my website, I wanted it to be different to virtually anything else I had seen online; so taking inspiration from Microsoft Surface and Project Mojave I created a tactile, interactive website where it takes the analogy of digging up information one step further. There is only one page to the site, however to explore more information you fly through the site going deeper and uncovering more information and eventually reaching a game.

Technically it works by extending the canvas control by creating a new control type that inherits from the Canvas type. The new control hooks mouse inputs from the Silverlight control to track whether each of the controls is being moved, resized or rotated. Whenever the mouse wheel is scrolled the cloud is re-rendered; entailing each of the controls to scale respective of their depth.
To show other uses for the display framework my site uses I have created a sample project you can take away and tinker with. The application loads a RSS feed and renders it to the cloud, so you can fly through and read the headlines you are interested in; it’s a quirky way to read the news. The project itself is written in C#. (Download Link to follow shortly)

1 comment:

Unknown said...

the rotate button doesn't seem to work - less flashy than your previous one.