For those of you who are fans of the BBC show Top Gear, you may remember the Cool Wall, and now you can get your very own Cool Wall along with the launch of IE9 beta and BBC’s Top Gear site.
I have been very fortunate to be a member in the team to develop and deliver this site alongside Christopher Owczarek, Martin Grayson, Jag Dua, Sam Gates, Steve Loader, Tom Eddings and Simon Middlemiss. For this blog post I would like to point out some of the key features of the site and a little about the technologies used.
When you get to the site you see one of the first cool features of IE9 and HTML 5, which is the embedded video. This comes out of the box with IE9, and does not require any other addins such as Silverlight or Flash to play. The second cool thing is the HTML 5 canvas, it isn’t obvious here what we are using the canvas for, but one thing it allows is transforms of visuals. What we are doing here is projecting our html video onto a canvas which will render the images, but also add a rotate transform to it. While this is quite a subtle change, the application of filters and other transforms allows very powerful modifications which would only be possible in Silverlight or Flash based sites which, again would require an addin.
As we move on to create our Cool Wall, we are presented with a list of cars we can choose to place onto the wall, we have added some transforms and animations to show the names and a slightly bigger image of the cars. We have also added some rotation on these cards of the cars to make it look more like the actual Cool Wall from the show. The hardware graphics acceleration of IE9 also allows a much smoother animation of the car positions when clicking between “My Wall” the “Community” wall and the “TG Rating” or Top Gear wall. The other cool feature of IE9 and HTML 5 is Local Storage; when a user has created a Cool Wall, and they go away from the site, they would expect the Cool Wall to be how they left it when they return. By utilizing the local storage aspect of IE9 we are able to easily convert the positions of the cars into a JSON format for storage and then read it back from Local Storage when we come back to the site.
Another feature of the flyout is a video from the show, like the Cool Wall video at the start of the page, this uses the inbuilt video player with the IE9 tags, so again no addin’s are required to view these videos, another plus point is all the controls on these videos come out of the box with IE9, so you don’t have to spend time designing and developing a custom video player for your site.
Being signed in means that you will also be adding your opinion to the community wall, which takes an average of the user’s ratings of cars. The final tab along the top is the TG Rating, or Top Gear Wall. This relates directly to the rating given from the show and the TG Rating shown on the car’s flyout.