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)! .

Video Podcasts on TV

Yay! Well this is a big deal for me. I’ve had the BT engineers out a couple of times in the last 2 months looking at our internet connection. (I live in the Country and historically have always had very poor connectivity).

But, …For the first time I can now stream video in real time! Just in time for BUILD!

So the first thing I did was set up the Channel 9 RSS Blog feed in Media Center (using the excellent Media Browser add-in). and now I have a nice list of streamable videos:

image

Already finding that I am watching more videos (as opposed to downloading them overnight and forgetting about them)

WP_000029

Laura on my TV! (don’t tell the wife)

image

The Chops:

Media Centre Plugin (recommended even without the Podcast capability)

http://www.mediabrowser.tv/download

Channel 9 blog feed (just add the feed to the blogs in the above plugin):

http://channel9.msdn.com/Feeds/RSS

Silverlight TV:

http://channel9.msdn.com/Shows/SilverlightTV/RSS

Inside Windows Phone:


http://channel9.msdn.com/Shows/Inside+Windows+Phone/RSS

NB Zune and/or iTunes are great sources for other video blogs


UPDATE: Channel 9 picked up on this post and did a walk through here:

http://channel9.msdn.com/coding4fun/blog/BUILD-in-your-Media-Center-with-MediaBrowser


How I got my Internet Speed Boost:

Before:

After:

 

 

NB in case anyone is interested the engineer found a couple of line faults between the house and the exchange – this gave most of the speed boost – but I also stripped out all the internal wiring in the house (we had 3 lots of internal cabling) and asked the engineer to reconnect the line to a box located close to the external connection point.


Mango Beta App Submission Walkthrough

Lots of interest in the Augmented Reality YouTube video on my previous post and although it isn’t anywhere near beta status I decided to publish “Goblin Attack” on it’s own for anyone with an interest.

This post is a walkthrough of the process I went through:

image
Marking the App as a ‘private beta’

image

NB the workaround if you receive the above error is documented here anApp:d involves setting a default Language for the http://forums.create.msdn.com/forums/t/87530.aspx

image
Project Properties Options dialog

image
As you might expect this is the same as with a standard submission

image
Here you have the opportunity to invite your beta testers individually

image

image

It is then a question of monitoring the lifecycle page until the App is through the ingestion process for beta apps.

image
The initial lifecycle page

image

When the app is ready you will receive the above notification via email.  (It may still be some time before the App is available via Zune)

Download Link (Mango with Motion API requirement)

Moving fast with development on this app – there are already a few features and bug fixes that are not in this beta – but all feedback will be gratefully received.

In an ideal world the Goblin would be a little more 3D, made in XAML and swipe his sword / die more effectively – anyone with the appropriate graphics skills please get in touch!

[tweetmeme only_single=”false”]

Goblin Harvest – Augmented Reality Demo

Time for another progress update, this time looking at the early stages of augmented reality within “Goblin Harvest”.

Conceptually the game is a card / board game but with a few interesting “extras” for Mango based phones.  The opportunity to fight off Goblins in ‘hand to hand combat’ arises when one of the task cards is overturned. ( Additional points can be earned relating to the number of Goblins killed or the seriousness of wounds inflicted).

“Goblin Attack”

NB the above is conceptual at the moment – I hope to be able to improve animations and sound effects as we go.

Download Link (Mango with Motion API requirement)

[tweetmeme only_single=”false”]

Filtering your wp7 App Hub Data in Excel

With the new update to the App Hub comes the option to download your data for offline analysis.

One of the most effective ways to do this is also one of the quickest.  Utilise two of Excels’ built in analysis features – “autosum” and “autofilter” by following the following two videos which show this can be achieved within a matter of seconds. (With apologies if I am teaching Granny to suck eggs).

This will then allow you to ask questions of your data such as:

  • How many paid version of a particular app have been downloaded?
  • Which Country is the primary user of my apps?
  • Which apps are the most popular?
  • What is the ratio of free to trial to paid apps ?

(and many more …)

Creating an autosum field

AutoSum Exported Data
AutoFilter Exported Data

NB To filter by date simply bring down only the data required and go through the two steps above again.

 

No doubt we will see a multitude of Excel templates that make detailed analysis of this data  a breeze, but for a quick and dirty analysis you can’t beat the basics of this method!

WP7 Launchers – Mango (Windows Phone 7.1)

Launchers are a set of APIs that Windows Phone applications can use to enable common tasks such as making a phone call or sending an email. Unlike Choosers, Launchers do not return a value back to the calling application.

If you are developing an application that uses a Launcher or Chooser, you should be aware that these features behave differently on a physical device and on Windows Phone Emulator. For a detailed list of the behaviour of each Launcher and Chooser in both environments, see Launcher and Chooser Support in Windows Phone Emulator.

This topic contains information about the following launchers:

  • BingMapsDirectionsTask

  • BingMapsTask

  • EmailComposeTask

  • MarketplaceDetailTask

  • MarketplaceHubTask

  • MarketplaceReviewTask

  • MarketplaceSearchTask

  • MediaPlayerLauncher

  • PhoneCallTask

  • SearchTask

  • SmsComposeTask

  • ShareLinkTask

  • ShareStatusTask

  • WebBrowserTask

Using Launchers in Your Application


The Launcher APIs belong to the Microsoft.Phone.Tasks namespace. You need to add a using directive for this namespace to the PhoneApplicationPage class file. All of the Launcher APIs function in a similar manner. First, you create an instance of the Launcher class you want to use. Next, you set properties of the Launcher object that will determine the behaviour of the task application when it is invoked. For example, you can specify a phone number that will be displayed when the Phone application launches. Finally, you call the Launcher’s Show method to launch the task application.

It is important to note that when you use a Launcher, a separate application is launched to complete the task. For example, the EmailComposeTask invokes the Messaging application. When the separate application is launched, your application is deactivated and is no longer running. After completing the task, the user can return to your application, at which point it is reactivated. For information about handling the activation and deactivation of your application see, Execution Model for Windows Phone.

BingMapsDirectionsTask

BingMapsDirectionsTask launches the Bing Maps application and displays driving directions between two points. If you do not set the start or end point, Bing Maps will use the user’s current location for the one that is not set. If you omit both the start and the end point, an exception will be thrown when you call Show().

The start and end points are LabeledMapLocation objects that contain a string label and a GeoCoordinate specifying the latitude and longitude of the location. You must add a reference to the System.Device assembly to your project and include the using directive referencing the System.Device.Location namespace to your page in order to access the GeoCoordinate API.

BingMapsDirectionsTask bingMapsDirectionsTask = new BingMapsDirectionsTask();         
GeoCoordinate spaceNeedleLocation = new GeoCoordinate(47.6204,-122.3493);
LabeledMapLocation spaceNeedleLML = new LabeledMapLocation("Space Needle", spaceNeedleLocation);
bingMapsDirectionsTask.End = spaceNeedleLML;
// bingMapsDirectionsTask.Start is not set. The user’s current location is used as the start point.
bingMapsDirectionsTask.Show();

BingMapsTask

BingMapsTask launches the Bing Maps application. You can optionally set a Center point for the map that is displayed. If you do not set this property, the user’s current location is used as the center point of the map. You can also provide a search string that will be used to mark locations on the map. The ZoomLevel parameter allows you to specify the zoom level that is initially displayed when the map is shown.

The center point is specified using a GeoCoordinate object. You must add a reference to the System.Device assembly to your project and include the using directive referencing the System.Device.Location namespace to your page to access the GeoCoordinate API.

BingMapsTask bingMapsTask = new BingMapsTask();
// Omit the Center property to use the user’s current location.
// bingMapsTask.Center = new GeoCoordinate(47.6204, -122.3493);
bingMapsTask.SearchTerm = "coffee";
bingMapsTask.ZoomLevel = 2;

EmailComposeTask

EmailComposeTask launches the Email application, which displays a new email message. You can optionally specify recipients, a message subject, and a message body that are prepopulated in the new message. You can also specify a code page for the new message. The message is not sent until it is initiated by the user.

EmailComposeTask emailComposeTask = new EmailComposeTask();
emailComposeTask.Subject = "message subject"; 
emailComposeTask.Body = "message body";
emailComposeTask.To = "recipient@webservicesuk.com";
emailComposeTask.Cc = "cc@example.com";
emailComposeTask.Bcc = "bcc@example.com";
emailComposeTask.Show();

MarketplaceDetailTask

MarketplaceDetailTask launches the Windows Phone Marketplace client application, which then shows the details page for a product specified by the unique identifier you provide. If you do not provide an identifier, the details page for the calling application is shown. The only allowed value for the ContentType property is Applications.

// Show an application, using the default ContentType.
MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask();
marketplaceDetailTask.ContentIdentifier = "<ID>";
marketplaceDetailTask.ContentType = MarketplaceContentType.Applications;
marketplaceDetailTask.Show();

MarketplaceHubTask

MarketplaceHubTask launches the Windows Phone Marketplace client application. Set the ContentType property to a value from the MarketplaceContentType enumeration to launch the Hub to a particular type of content.

MarketplaceHubTask marketplaceHubTask = new MarketplaceHubTask();

marketplaceHubTask.ContentType = MarketplaceContentType.Music;

marketplaceHubTask.Show();

MarketplaceReviewTask

MarketplaceReviewTask launches the Windows Phone Marketplace client application, which then displays the review page for your application.

MarketplaceReviewTask marketplaceReviewTask = new MarketplaceReviewTask();

marketplaceReviewTask.Show();

MarketplaceSearchTask

MarketplaceSearchTask launches the Windows Phone Marketplace client application, which then shows the search results based on search terms you provide. You must provide a value for the ContentType property to specify what type of content you are searching for unless you are searching for an application, which is the default content type.

To search for an application, use the following code.

//Search for an application, using the default ContentType.
MarketplaceSearchTask marketplaceSearchTask = new MarketplaceSearchTask();
marketplaceSearchTask.SearchTerms = "Apple Watch";
marketplaceSearchTask.Show();

To search for an application author, use the following code.

//Search for an application, using the default ContentType.
MarketplaceSearchTask marketplaceSearchTask = new MarketplaceSearchTask();
marketplaceSearchTask.SearchTerms = "Web Services UK";
marketplaceSearchTask.Show();

To search for a music item, use the following code.

//Search for a music item.
MarketplaceSearchTask marketplaceSearchTask = new MarketplaceSearchTask();
marketplaceSearchTask.ContentType = MarketplaceContentType.Music;
marketplaceSearchTask.SearchTerms = "Teenage Kicks";
marketplaceSearchTask.Show();

MediaPlayerLauncher

MediaPlayerLauncher launches the Media Player application and plays the media file you specify. Media files are stored in isolated storage when saved to disk by the application and are stored in the application’s installation directory if they are bundled into the applications .xap file. You must specify one of these locations using the MediaLocationType enumeration. You can optionally specify that one or more controls should be shown by the Media Player using bitwise OR combinations of the MediaPlaybackControls values. You can also specify a preferred orientation for the player when it is launched.

MediaPlayerLauncher mediaPlayerLauncher = new MediaPlayerLauncher();

mediaPlayerLauncher.Media = new Uri("MyVideo.wmv", UriKind.Relative);

mediaPlayerLauncher.Location = MediaLocationType.Data;

mediaPlayerLauncher.Controls = MediaPlaybackControls.Pause | MediaPlaybackControls.Stop;

mediaPlayerLauncher.Orientation = MediaPlayerOrientation.Landscape;

mediaPlayerLauncher.Show();

PhoneCallTask

PhoneCallTask launches the Phone application and displays the specified phone number and display name. The phone call is not placed until it is initiated by the user.

PhoneCallTask phoneCallTask = new PhoneCallTask();
phoneCallTask.PhoneNumber = "55555555555";
phoneCallTask.DisplayName = "Gage";
phoneCallTask.Show();

SearchTask

SearchTask launches the Search application and performs the search query you provide.

SearchTask searchTask = new SearchTask();
searchTask.SearchQuery = "XBox game trailers";
searchTask.Show();

ShareLinkTask

ShareLinkTask launches a dialog that enables the user to share a link on the social networks of their choice.

ShareLinkTask shareLinkTask = new ShareLinkTask();
shareLinkTask.Title = "Code Samples";
shareLinkTask.LinkUri = new Uri(http://rd3d2.wordpress.com, UriKind.Absolute);
shareLinkTask.Message = "Here is a blog all about Windows Phone.";
shareLinkTask.Show();

ShareStatusTask

ShareStatusTask launches a dialog that enables the user to share a status message on the social networks of their choice.

ShareStatusTask shareStatusTask = new ShareStatusTask();
shareStatusTask.Status = "This is my current status.";
shareStatusTask.Show();

SmsComposeTask

SmsComposeTask launches the Messaging application, which displays a new SMS message. You can optionally specify recipients and a message body that are prepopulated in the new message. The message is not sent until it is initiated by the user.

SmsComposeTask smsComposeTask = new SmsComposeTask();

smsComposeTask.To = "5555555555";

smsComposeTask.Body = "Check out this new app.";

smsComposeTask.Show();

WebBrowserTask

WebBrowserTask launches the Web browser and displays the URL you provide.

WebBrowserTask webBrowserTask = new WebBrowserTask();

webBrowserTask.Uri = new Uri("http://webservicesuk.com", UriKind.Absolute);

webBrowserTask.Show();

Apple Watch

“Keep your friends close, and your enemies closer” So said Sun TZU.  While most Windows phone developers don’t actually consider Apple to be an enemy it is still not a bad idea to keep an eye on what is going on in that camp.  This was the thinking behind this App which collects together relevant news and information surrounding “Apple” and presents it using the unique pleasantries available to the Windows Phone platform.

1

3

5

At the moment the App has the following ‘pages’ :

  • News (relevant third party news from around the web )
  • Device news (news specific to the iPad and iPhone)
  • Twitter (Apple specific tweets)
  • Propaganda (News as Apple would have you ingest it)
  • Top Paid  (Current top 25 paid Apps)
  • Top Free (Current top 25 free Apps)

The App is available for 99c here

Marketplace Tips – Avoid negative feedback!

I’ve seen this happen a number of times, both to my own apps and to others and there is nothing quite so frustrating – you spend months developing and testing your apps and finally have a version 1.0 ready for release – you pass ingestion and await the rewards with anticipation!  Next thing you check out your App in the Zune marketplace and .. horror of horrors .. someone has given you a low rating and negative comment!  What’s worse is that you know that their comment has its roots in something unfounded (I once had this happen on a large App where the user complained they couldn’t download over 3G – this is actually Microsoft policy in order to save on potential ISP charges, but as far as the user was concerned it was an issue with my own app and they made it clear that they were not happy!  This comment was from a US user and I watched sales rise in all other markets but this one!)

So how can you stop this kind of thing happening?  The short answer is that you can’t, but what you can do is mitigate this by offering users an easy way to feed back directly to you in the first place (rather than to your entire potential customer base!).

I now have a templated page which I use on my recent content oriented (read easy to develop) apps which offers a couple of options from within the phone App itself (and importantly, they are not hidden behind a secondary menu):

image

Behind these two buttons the code is quite simple:

private void Review_Click(object sender, RoutedEventArgs e)
{
    MarketplaceReviewTask mRTask = new MarketplaceReviewTask();
    mrTask.Show();
}


private void btnfeedback_Click(object sender, RoutedEventArgs e)
{
    EmailComposeTask ecTask = new EmailComposeTask();
    ecTask .To = “IanWalker@WebServicesUK.com";
    ecTask .Subject = "Feedback on My App Name";
    ecTask .Show();
}

The hope is that the user will choose the first option to provide any negative feedback.  (Of course if they provide positive feedback you can always invite them to review your App!)

NB You can see this in action on the following Apps: