Test-drive HTML5 Development for Windows Phone & Desktop

It seems to be increasing said these days, that software solutions are moving away from the desktop and to the cloud and mobile space.  There’s more to be said about this which I’ll blog about soon, but let’s just agree that this leads to at one possible conclusion – we need to be able to develop sufficiently rich client-based solutions that run on both desktops and a wide variety of mobile devices that all connect to the cloud.  If we add the requirement that we want to reach as many users and devices as possible on the client-side, with a single ‘base’ of code (and we aren’t too fussy about immersive UI, richness of experience, deep access to local resources and to varying extents, and very high development productivity/maintainability), then we are often lead to the door of HTML.  With ‘HTML5’, we can even be fussy about a few things too.

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.

sidebyside

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

ie9td

 

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

ie9wptd

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.

Advertisements

Get Free training With Great WP7, Silverlight & Azure Sessions at Microsoft Mix11

 

300x250_Mix11_011011_US_b (2)

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.

Discover The Future of Silverlight at the Ottawa Silverlight Firestarter Event

Come to the Microsoft Ottawa office on Dec 2nd 2010 @ 11:45 am ET sharp to watch the the future of Silverlight unfold. 

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.

 

SLFirestarter_150X240

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

Discover The Future of Silverlight at Another PDC-Like Day just for Silverlight

On Dec 2nd 2010, Microsoft is running the all-day live streaming 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 running from 9:00 am PT to 5:15 pm PT. 

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.

SLFirestarter_300X250 (2)

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)

Use the WPDTPTConnect/WPConnect Tool to Debug WP7 Apps on Devices Without Running Zune

The Windows Phone Developer Tools October 2010 Update (and breath) has been quietly released.

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.

Highlights of What’s new in the Windows Phone 7 Developer Tools RTM/RTW

It’s a big day for Microsoft and I’ve had a great ride to this point.

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

See the update MSDN documentation.

Get the toolsBe 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:

Ff941104.83abaa3d-63cc-4424-b8ff-3c5ceca759c4(en-us,VS.92).jpg

Pivot Control

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

image

 

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.

Ff941093.10d7071a-c8bf-4a96-85d0-651438c449a6(en-us,VS.92).jpg

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.

3 Windows Phone 7 Developer events in Ottawa this coming week with a Developer Device!

3 Important Windows Phone 7 Events in Ottawa featuring a real developer device…

1 Microsoft Canada Windows Phone 7 Ottawa Deployment Clinic – Sep 1st 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 (5th 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 2nd/3rd 2010

clip_image001

The phone tools RTM on Sep 16th, 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 2nd 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