Adding HTML5 Support to a Silverlight Web Page (I)

 

image

Although it is great to have the might of XAML for Silverlight development the fact is that any web site also needs to target HTML if it wants to have any kind of ‘reach’. 

I recently built a web site using Silverlight 5 to test out an idea I had for promoting the use of Live Tiles in Windows Phone.  (You can view the site here). 

My plan is to add HTML5 support to this site in 3 stages:

1. Redo the header are in HTML (THIS POST)

2. Add basic HTML functionality using ASP.Net

3. Add the bells and whistles (mouse over/rotating tiles etc.) using HTML5

Here are the steps I went through with stage 1 – the header:

1. Comment out the XAML based header and check that the site still functions OK without it:

image

So far so good and this is what we end up with: http://livetiles.co.uk/Convert/1a/

2. Craft the same header using basic HTML in the host web page:

Before:

image

After: (version 1)

image

3. So my initial hand crafted effort only took a couple of minutes but is a little unsatisfactory, not to mention unsophisticated and it doesn’t properly reflect all the aspects of the Blog header on which it is based (yes, I could cheat by creating a static bitmap for the background but I don’t think that would pass muster)

So I decided to fire up Expression Web and use it to capture the header information, which I then simply pasted into my App’s host page.

The effect is good, but man, there is a lot of mark up*!! (and before anyone says anything, yes, I know that much of it can be hidden in CSS and external JavaScript files.

So at this point the live site at http://LiveTiles.co.uk has an HTML rather than Silverlight based header.

Well and good, though the code/mark-up for that header tells tales of everything that is wrong with html, It being bloated and difficult to read. Oh, and I wonder if it will be OK in Firefox, Chrome, Opera  and Safari (!)

Next time I will look at creating a basic  ASP.Net page for the Silverlight body (the meat of the application)

If you haven’t done already you can view the current version at http://LiveTiles.co.uk

* So I removed all the references to the WordPress site (where this blog is posted) and things started to look a little tidier.

Advertisements

~ by Ian on December 20, 2011.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: