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

All I want for Mix-mas this March at Microsoft Mix10

So the seasonal gift giving has now passed, but I’m hoping for a few good prezzies for Microsoft’s Mix conference.

  • Windows Mobile 7 rocking a .NET ‘Mobile’ (not compact) Framework programmable Silverlight 3+ interface, Xbox mobile games (like Zune games programmable with the free XNA Game Studio), Zune Interface, Media Center extender abilities, and a marketplace with no publishing gauntlet for music, games and apps, and real devices available by Oct 2010.  A full marketplace in Canada is a must!
  • ‘Visual Mobile 2010 Express Edition’ – I don’t need this since I’ll have VS 2010 Premium/Ultimate, but Microsoft needs to release a free mobile development tool (with Silverlight designer support presumably) that will launch 100,000 apps
  • Decent replacement for the Live Framework (which was withdrawn) including free Bing Maps API usage up to a decent ceiling
  • Consistent mobile and desktop Live Services and Framework experience
  • Live Mesh Release (with better-than-hopeless user documentation)
  • Better free and on-ramp deal pricing for the Windows Azure Platform
  • Microformat & Live Clipboard SDK for IE 9.  Ray Ozzie blogged and tinkered (including a subsequent SDK and runtime) about ‘Wiring the Web’ with a ‘Live Clipboard’ using microformats back in 2006.  Skip to the present day and go to this Microsoft Canada blog post this week promoting my Mix session proposals (thanks Joey) and look at the Mix-powered Microformat tool that appears at the top left ;-)  Accelerators for IE8 just didn’t do it.
  • Oh, and of course for one or more of my Mix sessions (see below) to be selected by the public through the voting that ends tonight! 🙂

Not too much to ask for right?

 

Looking to learn more about the Windows Azure Platform, Silverlight, Windows Touch or Windows Identify Foundation?

If you’d like to see these sessions in person at Microsoft’s Mix 2010 conference or the recordings that will likely be made available for free later on, please vote for the sessions before January 15th 2010, by going to the site, adding the 3 sessions to you ballot and submitting it

PDC09 Announcements – Day 2 Keynote

Blogged live – now completed.

Check out further PDC coverage

Background

  • Everything is about 3 screens (desktop, phone and TV) and the cloud.
  • Day 1 focus – Backend, i.e. Azure.
  • Day 2 focus – Office, Silverlight & Windows focus on Day 2.
  • Microsoft emphasis will be on IE + Silverlight for all 3 screens – desktop, phone and TV.

Announcements

  • Not going to announce Windows 8 stuff in the interests of being ‘responsible’ and ensuring that what is disclosed is actionable – not ready for that yet.
  • FREE Windows 7 ‘PDC laptop’ (Acer machine with Microsoft’s preferred software image, resistive multi-touch, accelerometer) available to all paying PDC attendees (!!!).  Conditions apply ;).  Is this Oprah?
  • ‘3 weeks’ into IE 9 development – Standards progress (HTML 5); performance improvements in JavaScript; Hardware-accelerated DirectWrite/Direct2D Graphics & Text
  • IE9 already on 32/100 on Acid3 test, up from 20/100 on IE8
  • Channel9 videos on IE9 being posted today
  • Silverlight will be used this Winter for Victoria’s Secret Fashion Show and Winter Olympics
  • Silverlight will be used by Bloomberg, National Instruments, Siemens (medical diagnostic imaging)
  • Silverlight now on 45% of the world’s internet-connected devices (up from 33% in the summer)
  • Silverlight 4 – Media, Business Applications, Beyond the Browser
  • Silverlight 4: Webcam & Microphone on the machine (including raw access); multi-cast streaming; offline DRM support
  • Silverlight 3 media framework on codeplex this week
  • Next version for IIS Media Services will support IPhone clients as streaming client – see iis.net/iphone.
  • Silverlight 4 introduces support for: printing; rich text; clipboard access; right click; mouse wheel; implicit styles; drag/drop; bidi & rtl; html hosting (including content as brush); commanding/mvvm; additional controls (including rich text)
  • Silverlight 4 includes: compile once, use in both SL and .NET 4; UDP multicast (p2p); rest protocol enhancements; improved WCF support (inc. TCP channel support); RIA Services; works better with OData (Astoria)
  • Visual Studio 2010 Silverlight support: WYSIWYG Design Surface (not news), XAML IntelliSense Improvements; Improvements for Data Binding, Layout & Styles; WCF RIA Services Integration
  • Silverlight 4 offline includes: Windowing APIs; Notification popups; HTML hosting; Drop Target
  • Silverlight 4 offline ‘elevated’ includes: Custom Windows Chrome, Local File System, Cross-Site Network; Keyboard in Full Screen Mode; Hardware Device Access; COM Automation of local objects (and location APIs).
  • Silverlight 4: Twice as fast; 30% faster startup; new profiling support
  • Silverlight 4 supported on Google Chrome.
  • Silverlight 4 still under 5MB to install.
  • Will ship the Silverlight 4 Facebook-integration demo as reference sample
  • 70% of voted-for Silverlight 4 features (including 9 of top 10) included
  • Silverlight 4 Beta – announced as NOW AVAILABLE!!!!!!! at http://silverlight.net/getstarted/silverlight-4-beta/ and see http://channel9.msdn.com/learn include (what’s new)
  • Silverlight 4 RC – No Date
  • Silverlight 4 Final Release – No Date (I think perhaps March 22nd with VS 2010)
  • Office 2010 Beta and SharePoint 2010 Beta general availably announced – http://www.microsoft.com/office/2010/en/default.aspx – no new announcements yet though
  • Silverlight can use client-side object model to talk to SharePoint 2010
  • Office 2010 Mobile available on Windows Market Place for Mobile on 6.5 devices
  • Outlook Social Connector (part of Office 2010 Beta): Get social networking in Outlook with people info, history, activities; SharePoint 2010 Provider, Windows Live Provider in 2010; Linkedin Provider in 2010; has general SDK for making providers

Demos/Information

  • Silly video from Windows Management Team about collecting feedback/error report information – new non-lethal torture methods? 😉 – complete with entertainment-only disclaimer
  • Lots of telemetry data from the Windows development cycle – they even monitored stuff like number of presses on Start button and Aero Snap/Shake uses.
  • They analyzed the audio of the audience at the last PDC – best reaction was to the new Windows 7 slider control for UAC levels.
  • Various usability study videos cut out from live feed to protect IP.
  • Various demos of W7 new hardware-supporting features – touch, sensors, hardware-accelerated encoding, directx 11, etc.
  • Using yesterday’s IE9 build: Acid3 test results’; GDI vs. Direct2D smooth text rendering and animation; Bing maps jittery in software vs. smooth in hardware (60fps)
  • Recap video of SketchFlow in Expression Blend 3.
  • Silverlight 4 demos: video/image capture from local webcam; live preview of effects on webcam capture (incl. chromakey, bulge effect based on sound level, alien effect) using pixelshader effects; opensource barcode scanning with demo of scan of barcode goes to amazon page.
  • Silverlight 3 Demo (not shown on live stream) of PVR functions including pause and slow motion on live and pre-recorded events.
  • Silverlight 4 Demo of rich text control (including direct copy from grid selection in Excel)
  • Silverlight 4 Demo of Bing, Flash and even Silverlight hosted inside Silverlight including using it as a live brush (!!!).
  • Demo of VS2010 features for Silverlight 4: RIA data services; OData in data sources (and drag/drop to design surface); datagrid; implicit styles; new resource picker; new databinding picker; client-side validation from entity attributes
  • SnapFlow Silverlight app that allows building of online business applications hosted on Azure: DirectBuy example; HR example
  • Silverlight 4 Demo of elevated app integrated with Facebook including: local automation of Office; webcam photo upload; supper thumbnail listing performance; drag and drop of pictures; direct device photo import (!!!)
  • Demo of SharePoint 2010 Development with race track engineering/telemetry app: SharePoint on Vista/Win7; Sandbox solutions; VS Debugging; Read data from Azure; SP 2010 & Excel 2010 Client Object Models in Silverlight; show telemetry against video playback