How to Create a Visual Library of Images in HTML5 Canvas
written by David Catuhe
As a user interface fan, I could not miss the development with HTML 5.
We will produce an application that will let us display a Magic the Gathering ©(courtesy of www.wizards.com/Magic) cards collection. Users will be able to scroll and zoom using the mouse (like Bing Maps, for example).
You can see the final result here: http://bolaslenses.catuhe.com
The project source files can be downloaded here: http://www.catuhe.com/msdn/bolaslenses.zip
Cards are stored on Windows Azure Storage and use the Azure Content Distribution Network (CDN : a service that deploys data near the final users) in order to achieve maximum performances. An ASP.NET service is used to return cards list (using JSON format).
To write our application, we will use Visual Studio 2010 SP1 with Web Standards Update. This extension adds IntelliSense support in HTML 5 page (which is a really important thing ).
Debug with Visual Studio 2010
Debug with Internet Explorer 9 (F12/Developer bar)
So, we have a modern developer environment with IntelliSense and debug support. Therefore, we are ready to start and first of all, we will write the HTML 5 page.
This article was reprinted with permission from Microsoft Corporation. The original is available here. This site does business with Microsoft Corporation.