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

Quick Tip for Silverlight 4 Runtime Version Matching Issue

Today I opened a few of my Silverlight 4 projects only to be greeted by the following error when attempting to start debuggin:

"Unable to start debugging. The Silverlight Developer Runtime is not installed. Please install a matching version"

What?!

The tools were installed.

I remembered that I’d recently installed a new version of the Silverlight 4 runtime that had been required to view this new theme:

http://www.silverlight.net/content/samples/sl4/themes/jetpack.html

I’d have included a screenshot of the theme, but that would mean using a VM and going through the ordeal again.

I searched around and found a few notes on this forum…

http://forums.silverlight.net/forums/p/188683/433695.aspx

It is true that the tools include a special debug version of the silverlight runtime, however, it’s missing an important step:

You need to uninstall the currently installed Silverlight 4 end-user runtime before re-installing the Silverlight 4 Tools for Visual Studio – http://go.microsoft.com/fwlink/?LinkID=188039 – otherwise you haven’t reverted to the older developer runtime required and just waste a good 10 minutes for nothing.

I’m not sure how Microsoft is going to handle this going forward.  The builds are just slightly different, but the tools will not tolerate the difference.

Getting Started with PHP on Windows Azure

This post will get you started with PHP development in Visual Studio for deployment to Windows Azure.

Using the FastCGI capabilities of IIS you can run PHP application on IIS and Windows Azure (in your local Development Fabric on in the Windows Azure cloud).

So, here’s how to create a simple PHP application in Visual Studio 2010 on Windows 7.

If you want to see this in video, check out my screencast interview with Dot Net Rocks TV on Azure and go to point 48:40.

  • Download the latest Windows ZIP files from http://windows.php.net/download/ (currently 5.3.2).  You should get for the VC9 x86 Non Thread Safe version.  The FastCGI system on IIS makes the use thread-safe.  Unzip the files into a folder somewhere on your system and rename the folder "PHP".
  • Ensure you have everything for IIS and CGI (i.e. FastCGI) is activated on your system for local development. 
  • Install the latest Azure SDK (checking the system requirements) – currently 1.1 (Feb 2010).
  • Start Visual Studio 2010 (which must be in run as an Administrator for the current version of the SDK) and create a new VS Cloud Project…

azphp1

  • Add the CGI Web Role…

azphp2

  • Open an Explorer window and locate your downloaded and extracted PHP folder.  Do a Copy on the PHP folder.
  • Open the folder for the web project…

azphp3

  • Paste the PHP folder (and therefore subfolders) into the web project folder and then select the Show All Files option in Solution Explorer so you can see the pasted PHP folder…

azphp4

 

  • Use the "Include in Project" option on the php folder to include it in project files, and therefore in the files deployed to Azure.

azphp5

  • Edit the Web.roleconfig file, (putting a new <application/> tag in place like this which tells IIS (locally or in the cloud) about the FastCGI interpreter for PHP…

azphp6

  • Edit Handers section of the Web.config file to include this new <add/> tag which tells IIS to use the PHP interpreter for files ending with .PHP…

 azphp7

  • Also add the new <defaultDocument/> tag above to set up "index.php" as the default document for the web application.
  • Finally add a basic index.php file using Add New Item on the web project; since there is no .PHP item – use a .TXT item (in the General category) and give the new file a .PHP extension…

azphp8

  • Enter this basic PHP code:

<? phpinfo(); ?>

  • Start up the application and you should see something like the following:

azphp9

You can now deploy this (or a real application) to Azure using the Publish function on the Cloud project as usual.

Check out this MSDN page for general help on using FastCGI interpreters with Azure.

Enjoy! 🙂

Microsoft and Open Source Communities are sponsoring the Make Web Not War conference on May 27th 2010, showcasing the latest cross-platform techniques and technologies, including presentations, panels, workshops, a codefest, the FTW coding competition and a party!  Open Data, HTML 5, PHP, JQuery, Mobile, SEO and the Cloud, are amongst the topics being covered.  Speakers and panelists will include myself, Microsoft Canada team members and many open source experts.

Make Web Not War

Released Today: Silverlight 4 RTW, Tools RC & Blend 4 Preview Update

Silverlight 4 went RTW (Release to Web) today – you can find it on the silverlight.net site.

What was not widely discussed is the fact that the Silverlight 4 Tools for Visual Studio 2010 release is officially an Release Candidate, not yet officially an RTW quite yet, though may be declared one if no major issues are found.

Scott Guthrie detailed this in the Channel 9 Live broadcast following the Silverlight 4 launch event.  Go to the Silverlight 4 launch video and select the Channel 9 Live On Demand option, then skip ahead to 01:34:30 where he talks about these 3 things.

Quick Tip: Add OData to your Windows Phone 7 CTP Silverlight Application in VS2010 RC

So you downloaded the cool new tools for Windows Phone 7 Development and you want to connect to one of those amazing OData feeds… (okay probably just the NetFlix one right now), but perhaps you’ve hit a snag or need a little help getting started..

First point:

You need OData client support, so:

  • Download the OData client for WP7
  • Run the downloaded file to extract a copy of System.Data.Services.Client.
  • Add a reference to the DLL to your project.
  • Add an imports/using state for System.Data.Services.Client.

Second point:

If you are still using the VS2010 RC (which you probably are as of today, as the current WP7 phone CTP is not compatible with the new VS2010 RTM), then you may have had a problem with “Add Service Reference”, specifically that it’s not appearing…

From the release notes:

The Add Service Reference option is not supported in the Windows Phone add-in to Visual Studio 2010. Workaround: Use Visual Studio 2010 Express for Windows Phone to add service references

So you can open up your project with VS 2010 Express for WP, which should also be on your machine.  However, if you have a solution with other projects, they may not be supported in the Express SKU… life is getting complicated.

So, you can easily add the reference manually:

  • Open the VS2010 command prompt from the Start menu.
  • CD to your project directory
  • Issue a command similar to: datasvcutil /uri:http://odata.netflix.com/Catalog/ /dataservicecollection /language:CSharp /Version:2.0 /out:NetFlixRef.cs
  • Use Add Existing Item to add in the the proxy class (in this case NetFlixRef.cs). 
  • You then add an imports/using statement for the namespace in the class and off you go…
  • Add code similar to this to get started on the binding…

var Container = new SomeContainer(new Uri("http://odata.netflix.com/Catalog/", UriKind.Absolute));

var query = linq query on SomeContainer.SomeEntitySet;

var collection = new DataServiceCollection<SomeProxyEntity>();

someListBox.ItemsSource = collection;

collection.LoadAsync(query);

  • … and then bind away in your XAML.

Visual Studio 2010 to Release on April 12 2010

Microsoft previously announced a push-back before the US holiday season, and the addition of a Release Candidate in February 2010.

“In order to ensure that we are able to receive and react to this feedback, we will also be moving the launch of Visual Studio 2010 and .NET 4 back a few weeks.”

Since the RC hasn’t happened yet and the “receive and react to” window is a fixed length of time, it makes me believe that Microsoft is now confident enough about its solution to the performance issues that it can announce a final date with at least the perception of a reaction to the added RC.