Playing with Silverlight, flickr & HTML 5.0

May 7th, 2010 → 1:40 pm

I got this email saying check out Microsoft Internet Explorer (IE) 9.0 http://ie.microsoft.com/testdrive/ last month.

The html 5.0 abilities are amazing, but with IE commanding roughly 60% of the market (losing ground as we speak) I didn’t think to much about it until I saw IE 9.0 was coming soon and it would support HTML5 & CSS3.

Now I have been a little obsessed with HTML5.

In a previous post (This is not your Fathers HTML) you can see my quick little demo of Animation using HTML5, CSS3 & Canvas, that I created.

Then the ipad came out and people screamed “where’s my flash!!” and then Steve Jobs posted this http://www.apple.com/hotnews/thoughts-on-flash/ coupled with rumors of Silverlight on the iphone http://mashable.com/2009/11/27/silverlight-iphone/ , causing fan boys, conspiracy theorists and hacks from across the globe to freak.

So all this talk and hope of the internet future motivated me to code something….but what….

I have been organizing all our photos on flickr so I thought; why not write something that uses the flickr API.

Well the flickr API is huge and robust! Check it out: http://www.flickr.com/services/api/

The first challenge: Query flickr for a list of my photos and then display them in Silverlight!

Flickr has implemented a simple REST based web service that brought XML in to my C# application with ease. Then I hooked up XML —> MS LINQ and I was quickly parsing through all the data.

Displaying the photos 1 at a time was easy work for Silverlight & C#.

Check out the sample here: http://code.jameseisenhauer.com/flickr/d/default.aspx

The 2nd challenge. Query flickr and randomly display photos it finds!

I ran into some challenges with Silverlight and couldn’t quite get the layout and layering to easily come together. I found ways to do it, but that sounded like too much code so I turned to HTML5 to solve my problems.

JQuery & JSON made child’s play out of getting the data from the flickr api. Implemented a simple canvas tag and looped over the data using Java Script and BAM done!

Check out the demo as it queries flickr for “Apple” http://code.jameseisenhauer.com/flickr/default.aspx