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.

Live Tile Browser

 

With the release of Silverlight 5 I thought I would take this opportunity to demo up an idea I have had to promote Live Tiles for Windows Phone (and Windows 8 I guess)*.

image

The idea is quite simple – a marketplace for Live Tiles for Windows Phone (and Windows 8 maybe). 

So I have put together an initial page featuring around 200 Live Tiles but can’t help thinking that something along these lines could be produced by Microsoft (or Nokia – that would be cool) to much better effect – and to the benefit of many Windows Phone developers! (Not to mention being a neat way to highlight one of the coolest features of the phone itself!)

Try it out and please feedback your thoughts, either via email (rd3d2@hotmail.co.uk) or by comment below.


Here is the link for Silverlight 5 users: http://livetiles.co.uk


1There is also a free app for windows phone here
(with more info on the app and developer opportunities here)

NB If you like the concept and would like to see Microsoft get behind it vote it up here

Update:

After getting some great feedback via the Channel 9 Coffeehouse (Thanks Maddus and ZippyV) and MVP “Joost” the design is coming on in leaps and bounds.  Still a way to go but it is starting to look like something useful! 

I kind of want to run it on one of those fancy BUILD Samsung slates  and start flicking the tiles around.  Sadly no fancy BUILD slate (and no touchscreen come to that since my faithful PDC laptop gave up the ghost last week)

So what have I learned so far?  If nothing else I am constantly reminded that I need to spend more and more time on design and promotion, less on coding (but no can do)! .

Live Tile Sport

The latest sporting news courtesy of the BBC comes in a unique format that allows up to eight ‘Live Tiles’ of your favourite sports to be pinned to your phones home screen.  News is updated constantly throughout the day and night to ensure that you don’t miss a thing of interest.

SPORTBOXINGSPORTFOOTBALLSPORTGOLFSPORTMOTORSPORTSPORTRUGBYLEAGUESPORTRUGBYUNIONSPORTSPORTSPORTTENNIS

Inside the app the innovative tile based panoramic interface allows each stream of sporting content to be flipped over with a quick flick of the wrist to reveal more sporting news on the rear of the tile!

123456

8

 

Click on a tile to get more detail or to read the original source story on the BBC web site

 

 

 

 

 

Try it now for free or purchase the ad free version now:

http://windowsphone.com/s?appid=bc49906b-e2a4-47ee-a9ea-8adde437b6b5

Live Tile News – Update

 

Utilising the excellent BBC news feeds this app provides up to 8 live tiles showing the latest news split by topic.  With regional variations for the UK, USA and Australia the app automatically picks up the region from your phone and presents the most relevant news to you. 

The innovative Panoramic display presents two images of recent news with the option to ‘flip the tile over’ with a flick of the news stack (an interesting variation on the standard scrolling Listbox)

81234567

What is “App Aid” and what is a “ChApp”?

The term ChApp comes from the two words – Charity & App.  It means that all or a part of the proceeds from this app will go to charity. Multiple ChApps combine into the concept of “App Aid” 

NB In the case of this app proceeds will be split evenly between :

1. Alexheimer’s Society (www.alzheimers.org.uk)

2. Parkinsons UK (http://www.parkinsons.org.uk)

3. Multiple Sclerosis Trust (www.mstrust.org.uk)

Where does the money come from?

Initially proceeds will come from the non intrusive advertising within the App with a ‘non-ad’ version of the App allowing users to donate all the proceeds from their purchase (the 70% portion that goes to the apps developer) to the 3 charities above.

Download

Free: http://windowsphone.com/s?appid=798a731f-c0f0-4c2a-b8b1-c1590a0d66ac

5th January 2012 – Update.

3 Days ago I submitted the latest update to Live Tile News, including an option to donate by purchasing a paid version of the App.

This update was largely in response to excellent feedback from the development community (Particular thank you Channel Niners and MVP Joost):

“Inconsistent approach to the Panorama interface”

I have consolidated individual panorama pages and created a consistent approach to the headings.

“The fluid flow of the app is broken when navigating to the ‘more apps’ page.

The original idea of the dialog hat pops up before navigating to the more ‘apps page’ was designed to allow users to skip the page should they wish. However I recognise that this breaks the ‘fast & fluid’ doctrine and I have removed the dialog from this release.

“I would like to be able to pin tiles to my homepage from the originating page rather than from a dedicated page.”

You can now pin and remove tiles by dragging down and holding the relevant feed (this replaces the option to refresh individual feeds which was felt to be an unnecessary feature).

In addition there are a number of minor bug fixes which should go to improve the overall application.

NB The donation version of the App can be downloaded here, once it progresses through Microsoft’s App QA process.

Thank you for your support.