Microsoft is making its platforms capable of running those HTML5 solutions.  Currently this means IE9 on the Windows desktop and now also IE9 on Windows Phone 7.5 (now RTM’d and due on phones this fall).  We’ll likely see more native platform support for HTML5 solutions in Windows 8 with IE10.  Given the right use of HTML of course, a solution for Windows desktop and phone, should also work on a large range of HTML5-compatible desktop browsers and mobile devices.

Here’s the same hardware-accelerated HTML5 content running on IE9 and Windows Phone Mango.

Getting started with HTML5 development on Windows

So what do you need?  On the desktop you can get IE9 and start ‘coding’ in something as simple as Notepad(!).  Use the free included F12 developer tools to explore and even debug your solution.  For something a little more productive, you can go for the free Visual Studio Web Developer 2010 Express SP1 largely for the HTML editor support and test web-server, plus you’ll want the community-based Web Standards Update for Microsoft Visual Studio SP1 for IntelliSense support.  For testing on Windows Phone, go to http://create.msdn.com to get the latest Windows Phone Tools/SDK (currently Windows Phone SDK 7.1 Beta 2) to be able to run the emulator on your machine which includes the mobile browser.  If you are not connecting to any web-based data services, or you are connecting to existing services, you may not need any other tools, but you’ll probably want the jQuery library to be more productive with your JavaScript.  Want some great slides on jQuery (from a Microsoft guy)?  Download Joe Marini’s Mix 2011 jQuery bootcamp slide deck.

Doing rich HTML5 stuff

The easiest way to learn about new HTML5 is to see some in action and check behind the scenes.  To demonstrate the great HTML5 and hardware-accelerated capabilities of IE9 on the Windows desktop and Windows Phone, Microsoft created two ‘testdrive’ sites.  They include some great and diverse examples as well as links to useful resources.

http://ie.microsoft.com/testdrive for IE9 on the desktop

http://ie.microsoft.com/testdrive/mobile (which works on the phone and the desktop)

Detecting desktop vs. mobile browsers

One of the key issues to tackle when creating an HTML5 application that will work on the desktop and on mobile, is getting the right layout experience for the screen size, ideally using the same markup.  CSS3 Media Queries are a great solution here.  The test site includes an example of this (see entry in screenshot above).  In addition I’d suggest watching this video from Mix 2011 as well as this blog entry from the Windows Phone team (by the same Joe Marini that did the jQuery bootcamp at Mix).

Dealing with down-level browsers/capabilities

Of course a good solution should deal gracefully with down-level browsers and missing HTML5 capabilities, especially given that the specification is still in flux.  On many existing websites, this is still handled on the server side by looking at the User Agent string provided by the browser application, and delivering browser-specific content.  In the new client-side world, it’s often better to detect the browser capabilities in the client code and enact progressive enhancements to the user experience based on what specific features the browser has.  If the browser cannot do some of the new HTML5 goodness, you may want to consider a ‘Polyfill’.  To help detect browser capabilities, there’s a library called Modernizr, and a number of Polyfills available to handle missing capabilities that Modernizr can detect.

I hope this has given you an idea of how you can start to test drive HTML5 experiences and development on the Windows desktop, upcoming Windows Phone 7.5/Mango phones and beyond on to other ‘HTML5-ready’ browses and devices.

This year’s Microsoft Mix 11 conference is taking place from April 12th to 14th in Las Vegas.

I have 4 sessions proposals that have been selected for voting by the Mix panel, and with your help, I can present them at the conference for you to see in person or for free on-demand shortly afterwards.

As well as from commercial projects and published articles/shows, these sessions are based on my expertise as a Microsoft MVP for Silveright, a workshop trainer for Microsoft on the Windows Azure Platform & the developer of the first WP7 training bootcamp delivered across North America.

To vote for sessions by Feb 4th…

For each of the web links below, click on each one and then vote by first clicking on all of the animal pictures of the indicated type (usually cats awww) and then clicking “vote for this session”.  Repeat for each of the 4 links.  The picture clicking thing is to make sure you are human and not a cheating robot of course.  If you select the wrong animation by mistake, you can click it again to unselect it.

Thank you for your interest and support!

0 to Phone App in 60 Minutes (based on a popular TechDays session)

Windows Phone 7 devices are out there. Will you have an application in the marketplace this year? The tools are free to download but it helps to get a jump-start to get moving. Do you understand the MVVM design pattern and how it applies to Windows Phone? Would you like to see how it’s done from scratch? Come along and see Microsoft MVP for Silverlight and leading WP7 trainer, Colin Melia, show you how to build an application step-by-step and answer questions along the way.

Getting to grips with MVVM on Windows Phone

You’ve downloaded the phone tools and created your first project. Now you’re venturing into the other project templates and have found all kinds of extra xaml files, bindings and classes. You’re in the world of MVVM architecture and you feel like you’ve fallen down the rabbit whole. The MVVM patterns in the templates are there to leveraged, but you need to know how to work with it. In this session Microsoft MVP for Silverlight and leading WP7 trainer, Colin Melia, will cover the MVVM concepts, the templates and go beyond viewing data to using commands and explaining key choices.

Windows Azure Platform as the backend for Windows Phone experiences

The launch of Windows Phone has been a source of much interest and developer enthusiam. There are 1,000s of appplications in the Windows Phone Marketplace. However, not many of those applications interact with a service created by the same developer. In this session, Microsoft MVP for Silverlight and leading WP7 trainer, Colin Melia, will show you how the Windows Azure Platform is a natural backend for Windows Phone experiences and how to use the various components.

On-Premise Data to Cloud to Phone – Connecting with Odata

You have corporate data to disseminate into the field, or service records that need to be updated in the field. How can you quickly make that data accessible from your on-premise system to Windows Phone users? Come take a look at OData with Microsoft MVP for Silverlight and leading WP7 trainer, Colin Melia, and see how you can expose data and services into the cloud and quickly connect to it from the phone, from scratch

These are 4 of just 14 sessions by Canadian-based developers highlighted by Microsoft Canada.  You can vote for all to 10 in total.

On Dec 2nd 2010, Microsoft is running the all-day Firestarter event about Silverlight.  It opens with a keynote from Scott Guthrie (Corporate VP of the Developer Division) on the Future of Silverlight and features various sessions from renowned speakers.   It’s like another day of PDC just for Silverlight. 

We’ll be watching and discussing the morning portion of the live event as a group.  As a Microsoft MVP for Silverlight I’ll be there along with Microsoft’s Christian Beauclair to discuss the event and answer questions.

Silverlight is THE developer platform for rapidly building and deploying UI- and media-rich data-connected business and consumer applications for the web, the desktop and the phone.  It’s available today.  Microsoft has invested and will continue to invest in Silverlight, and in products that use it including LightSwitch, Lync, Windows InTune, the new Azure Portal, etc.

No registration is required.

Dec 2nd 2010

11:45 ET (event started at noon)

100 Queen Street (the World Exchange Plaza – with underground parking)
Suite 500 (5th floor)
Ottawa, ON
K1P 1J9

Silverlight is THE developer platform for rapidly building and deploying UI- and media-rich data-connected business and consumer applications for the web, the desktop and the phone.  It’s available today.  Microsoft has invested and will continue to invest in Silverlight, and in products that use it including LightSwitch, Lync, Windows InTune, the new Azure Portal, etc.

This Firestarter event was announced before PDC and with the recently announced keynote on the future of Silverlight, it emphasizes Microsoft’s commitment to Silverlight.

Want more commitment?  Read or see what Microsoft executives have had to say:

The State of Silverlight with Scott Guthrie and John Papa (Oct 21 2010)

PDC and Silverlight – by Bob Muglia, President, Server & Tool Business (Nov 1 2010)

Silverlight Questions – by Scott Guthrie, Corporate VP, Developer Division (Nov 4 2010)

Also, here’s a great post on the subject:

Silverlight’s Bright Future – by Ward Bell (Nov 10 2010)

It includes a major tool for debugging applications on devices, that was mentioned back in the Summer during Microsoft WP7 Jump Start training, but not publically released.

It allows you to debug WP7 applications on a connected device without running the Zune software.

This is a good thing for two reason (personally to me at least):

• You don’t have to launch the huge Zune software to do device debugging
• It allows debugging of applications using certain features that could not be used when the Zune software was running with a connected device: Media Launchers or Choosers; XNA Framework playback of song objects; Silverlight playback of video or audio content using the MediaElement control

To use it:

Connect your device

Close the Zune software if running – and you can prevent it from launching on device connect by going to Settings->General and uncheck the appropriate box.

Open a command prompt and navigate to:

• For 32-bit OS – %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect
• For 64-bit OS – %ProgramFiles(x86)%\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect

Run WPConnect.exe

That’s it – now you can debug on the device without the Zune software ‘in the way’.

To go back to using Zune, just launch it again.

The RTM of the Windows Phone 7 Developer Tools have now been released.

See the update MSDN documentation.

Get the tools.  Be sure to correctly uninstall previously installed versions of the tools (see the release notes) before installing.

Read the release notes.

Let’s take a look at the highlights of what’s new in RTM of the WP7 Developer Tools, largely from a Silverlight application development point of view.

Panorama Control

There have been a few 3rd party open source goes at a Panorama Control (and no-one can blame them for getting a little impatient – it’s like the Office ribbon), but now there’s an official one (which was explain recently in a blog entry by Jeff Wilcox).  You can include one by starting with the new dedicate Visual Studio template (under File->New Project), use the one in the toolbox, or add it via XAML.  See the documentation.  Use it to get UI like this:

Pivot Control

The new official Pivot control is just as easy to use.  See the documentation to produce things like this:

Bing Maps Silverlight Control for Windows Phone

While the previously available control worked on the phone, it was not optimized for the phone.  This new version rocks!  Check out the docs.  You’ll also want to get yourself a developer key.

Other changes:

The tools and emulator have performance improvements.  Check out Microsoft’s paper on creating high performing Silverlight apps.

The documentation has been updated.

Be sure to read the release notes.

What’s missing to round out the platform? 

I’ll do another post on this topic soon.

1 Microsoft Canada Windows Phone 7 Ottawa Deployment Clinic – Sep 1^st 2010

So you have a WP7 application in development, but you need to see how it works on a real device ahead of the marketplace opening in October?

The emulator currently available as part of the Windows Phone Developer Tools Beta, provides a great testing environment for many, but not all, of the platform’s features.  The capabilities of your application may necessitate testing on a real device.  Devices are available to purchase at retail in the November so you may need access to a real device for testing in the meantime.

Over the next few months Microsoft Canada will be holding a series events in Ottawa where you can try out your WP7 apps on a real device.

The first one will be held at the Microsoft Ottawa office (5^th floor at the World Exchange Plaza) on Wed Sep 1 2010.  To request a testing slot, please contact Christian Beauclair, let him know about your application and why you’d like to test on a real device.  You should bring along a developer machine if you’d like to make revisions while testing.

Not ready to test on a device yet?  Future events will be held at the office and at coffee and code events around town.  Watch http://colinizer.com and http://blogs.msdn.com/b/cdndevs/ for details.

2 DevTeach Windows Phone 7 Boot Camp Sep 2^nd/3^rd 2010

The phone tools RTM on Sep 16^th, the marketplace opens in October and devices expected in November.

Do you have?

· The developer knowledge to build apps for this platform

· Access to device to test your application

· Assistance with getting your application in the marketplace.

With this boot camp you get::

· 2 solid workshop days to rapidly build your WP7 Developer knowledge and beyond – covering major topics in depth, samples, exercises and expertise in Microsoft technologies

· Face-time with a developer device

· 50!! Demos/Examples

· Priority invite to Microsoft Canada’s deployment clinics to test your application(s) on a real device - unless you have a relationship with Microsoft, these events may be your only opportunity before retail device availability!!!

· FREE go-to-marketplace support from Microsoft to get your application into the marketplace and potential promotion – you’ll be connected with a Microsoft evangelist to help you with getting your application(s) into the marketplace with potential for application promotional

· Information, 40+ samples & exercises to walk away with

Register today!  Use the code WP7BOOTCAMP to save $100.

http://winphone7bootcamp.com

3 Microsoft Canada Windows Phone 7 Night in Ottawa (featuring a developer device!) – Sep 2^nd 2010

Join Christian Beauclair & Rick Claus from Microsoft Canada, along with Colin Melia from DreamDigital, for an evening about Windows Phone 7 in the flesh.  That’s right, they’ll be there in person, oh and so will a real developer device!

In October, Microsoft will start accepting application submissions on the mobile marketplace for Windows Phone 7 applications, with devices being available at retail shortly thereafter.

Will you be one of the first developers selling a cool application? Are you an IT Pro that wants to figure out how these devices fit into your organization?  To get to grips with this new mobile platform and build on your existing .NET and infrastructure knowledge, you’ll need to know the features of the new phone platform.

Visual Studio 2010 together with the WP7 tools make building applications a delightful experience. During this evening event, you’ll have the opportunity to see the phone in action, learn about the tools and understand how the phone integrates into your enterprise.

You absolutely must be registered to attend.

Register here: https://www.clicktoattend.com/invitation.aspx?code=150519

Time is running out to get in on the launch and test device access is vital for some applications.

Get these benefits from the Windows Phone 7 Boot Camp that I’m running, sponsored by Microsoft at their Canadian offices:

• 2 solid workshop days to rapidly build your WP7 Developer knowledge and beyond – covering major topics in depth, samples, exercises and expertise in Microsoft technologies
• 50!! Demos/Examples
• Priority invite to Microsoft Canada’s deployment clinics to test your application(s) on a real device - unless you have a relationship with Microsoft, this may be your only opportunity before retail device availability!!!
• FREE go-to-marketplace support from Microsoft to get your application into the marketplace and potential promotion – you’ll be connected with a Microsoft evangelist to help you with getting your application(s) into the marketplace with potential for application promotional
• Information, 40+ samples & exercises to walk away with

Due to a shortage with devices, Microsoft Canada has withdrawn the loaner program (substituting the deployment clinics) and a device cannot be present in all bootcamp cities.

There are many free resources on the web, but none offer these benefits along with interactive learning.

Want More?  How about, all this for less?  Use the promo code WP7BOOTCAMP to get $100 off.

Register today.

• Sept 2010Oct 2010 Confirmed by Microsoft – Mobile Marketplace opens for Windows Phone 7 application submissions
• Sep 16th 2010 Confirmed by Microsoft – Tools RTM
• Oct 2010 – Windows Phone 7 devices retail in Europe
• Nov 2010 – Windows Phone 7 devices retail in North America

Are you ready to ride this huge opportunity?

To be at the front of the line you’ll need these key things:

• WP7 Developer Knowledge and beyond

  The developer tools for basic WP7 application are free and easy to start with.  That’s a great story for your fart application, but not for building fully cloud-integrated applications where you have to build cloud services and/or understand the cloud space, especially if you want to use notification services.  You’ll need in-depth knowledge for this and expertise extending all the way to developing for 3-screen & the cloud in some cases.  Plus, do you really have weeks to spend researching all this stuff?

• Access to Windows Phone 7 devices to test your application(s)

  The developer tools for WP7 include an emulator which provides a great experience, far more useful that its predecessor for Windows Mobile 6.x, and even more graphically powerful that Virtual PC since it integrates with the host’s graphical hardware acceleration and multi-touch (if available).

  However, the tools will not allow you to get a good sense of performance, test under real network conditions, or get real data from built-in devices like the accelerometer, GPS, compass, and multi-touch (this last one would require a multi-touch capable developer machine).  If you are building a game (with XNA) for WP7, you definitely want to get your hands on some real hardware.

  Do you have access to a device before retail availability?

• Assistance with getting your application into the marketplace and potential promotion

You can get help with these things by attending the Windows Phone 7 Boot Camp that I’m running

Boot Camp participants get:

2 solid in-depth workshop days covering major topics in depth, samples, exercises and expertise in Microsoft technologies at Microsoft offices – see agenda below

50+ Demos/examples

40+ Samples

Priority invite to Microsoft Canada’s deployment clinics, for invaluable application testing on a real device.  Unless you have a relationship with Microsoft, this may be your only opportunity before retail device availability!!!

FREE go-to-marketplace support from Microsoft – you’ll be connected with a Microsoft evangelist to help you with getting your application(s) into the marketplace with potential for promotional assistance

Due to a shortage with devices, Microsoft Canada has withdrawn the loaner program (substituting the deployment clinics) and a device cannot be present in all bootcamp cities.

Want More?  How about, all this for less?  Use the promo code WP7BOOTCAMP to get $100 off.

A whole new market is approaching…  Register today.

If the package, location, timing or content does not suit you and/or you want a tailored training experience, go ahead and contact me.

Current Agenda

Day 1

Day 2

Getting Started Tools Hardware Emulator Architecture Application Types Services   Visual Basics XAML Controls Layout Drawing, Brushes, Styles, Resources, Media   Applications Stack Model Projects Navigation Threading   Builds & Deployment Debug XAP Files Deployment Localisation Porting, Compatibility & Re-use   Application Layouts Orientation Transforms Hubs, Panorama & Pivot   Data Binding Essentials, Hierarchies, Lists Converters LINQ   Data Services Service Proxy WebClient HttpWebRequest OData

Design Guide Theming Blend MVVM Control Templates   Platform Integration Launchers Choosers Application Bar Settings   Device I/O SIP Touch Accelerometer Location Services Network Maps   Storage Isolated Storage Perst Cloud Syncing   Application Lifecycle In-depth   Notification Services In-depth   Performance   Web Integration Browser Control Integration   XNA Basics   Marketplace Registration Requirements Process

The Microsoft wifi at the event is great considering the sea of laptops here.

I’ll be live tweeting (@colinizer) for Day 2.

Today’s keynote is likely going to be about IE9 and design – not as exciting as yesterday.