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

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)

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

PDC09 Announcements – Day 1 Keynote

Blogged live – now complete – curiously Bob Muglia’s closing remarks were cut off on the live feed.  Very much looking forward to the Silverlight stuff tomorrow.

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.
  • Ray Ozzie wants you to bet on Windows 7, IE8, Silverlight, Windows Azure, SQL Azure, 3 screens and a cloud
  • Bob Muglia talks at length about moving existing applications to the cloud (‘move, enhance, transform’) – partnering with Avanade & Accenture
  • Cloud application aspects being covered at PDC Self-Service, Elastic, Service-Orientated, Federated, Scale-Out, Staged Productions, Always Available, Multi-Tenant, Failure Resilient

Microsoft Announcements

  • Azure platform going live Jan 1 2010, but no charging until Feb 1 2010 – this is not news btw
  • Azure projects are available in Visual Studio 2010
  • Windows Azure has RESTful service APIs to manage configuration
  • Windows Azure Pricing: $0.12ph (1×1.6GHz/1.75MB); $0.24ph (2×1.6GHz/3.5GB); $0.48ph (4×1.6GHz/7.0GB); $0.96ph (8×1.6GHz/14GB)
  • Windows Azure now supports fast CGI support, PHP, MySQL
  • Azure – auto geo-replication in pairs – 3 pairs (NA, EU, Asia) going live in Jan 2010
  • Azure Storage Updating features – entity group transactions, snapshot, copy
  • Azure Storage Accessing features – block blobs, page blobs, leases
  • Azure Storage Serving features – shared access signatures, custom domain names, content delivery network (CDN)
  • Azure Storage – X-Drives – NTFS-like drive access to cloud storage
  • SQL Azure – Fuller DB, T-SQL, Stored Procedures, ADO.NET, works against Excel, support from SQL Server Management Studio (2008 R2)
  • Some customers will be able to go live today including WordPress
  • Microsoft PinPoint – catalogue of products and services targeting developers and IT (showing in Azure portal and partner network, and later into online portal for IT)
  • Codename “Dallas” (completely on Windows Azure and SQL Azure) open catalogue for data (public and commercial) with uniform discovery, trial and licensing – touted as a game-changer
  • ADO.NET Data Services (Astoria) also now known as OData.
  • Project “Sydney” – connects Azure platform to existing private data-centre services together
  • Windows Azure creatable images (with admin access) coming in 2010 (Windows base, customise, snapshot, deploy)
  • AppFabric (Windows Server Beta 1 available now & Windows Azure Beta 1 in 2010) – create high availability, scale-out, multi-tenant, manageable apps (especially using WCF and WF) covering caching, Workflow hosting, monitoring, service bus, service hosting, access control – formerly called “Dublin”?
  • Windows Identify Foundation RTM
  • Go-live license for Visual Studio 2010 Beta 2 & .NET Framework 4 beta 2 – this is not news
  • Oslo now SQL Server Modeling Services
  • The stack is now: Applications – Exchange/SharePoint; Dev Tools – VS; Programming Model – .NET Framework; App Services, Windows Server/Azure AppFabric; DB – SQL Server/Azure; OS – Windows Server/Azure; Management – System Center
  • System Center Cloud Beta in 2010
  • SQL Server 2008 R2 RTM in 2010
  • Visual Studio 2010 & .NET 4.0 RTM March 22nd 2009 – this is not news

Demos

  • Seesmic.com demo of Twitter client using Silverlight and for Windows with WPF – will become a platform soon
  • WordPress (who hosts 10 million blogs) demo on Azure and how it can scale easily
  • OddlySpecific.com (from creators of ICanHasCheeseburger, FailBlog & PunditKitchen) launched today on Windows Azure & SQL Azure – also can use CDN
  • Codename “Dallas” – Showing discovery (by catalogue); explore data with REST, AtomPub, etc. and Excel 2010 PowerPivot; demo of service proxy it can build for you; 3D (!!) demo of mars image exploration – underwhelming reaction from audience
  • US Federal Chief Information Officer – talking about democratising information (like GPS and NASA Pathfinder);  http://beamartian.jpl.nasa.gov; Career finder application on mobile device (via data.gov) – yawn (despite the profound implications)
  • Silly fictional video about the cloud starring Bob Muglia – groan
  • Azure Low-level access (Don Box & Chris Anderson) – Windows Azure application in low-level simple C++ (and assembler!); Azure SQL accepting T-SQL from SMSS to create pdc ‘talks’ table and insert rows; Show OData javascript app (using o-auth wrap to .NET Services Access Control Service) on ‘talks’ table
  • Kelly Blue Book (kbb.com – 14M unique per month in 2 data centres) Silverlight App (showing filtering and zooming) – showing flexible cost model with Windows Azure; less than 1% code-base change plus Azure config file; also using SQL Azure (using same mechanisms as before) and showing SQL Azure Data Sync – most scripted/stiff demo of the keynote.
  • Video of how customers can use Azure platform: Dominoes (peaks on Superbowl and Friday nights); Siemens; RiskMetrics
  • Project “Sydney” demo – connection of Azure application to private data-centre SQL database
  • Increasing functional of the Tailspin travel app (.NET 3.5) with .NET 4.0 and VS 2010 tools: showing VS 2010 multi-monitor; using ASP.NET MVC diagram; adding single sign-on quickly with Windows Identity Foundation (uses AD token service); new find-in-files window; client-side validation with ASP.NET MVC 2; Intellitrace shows trace (e.g. ADO.NET) and allow navigation back to code that produced the trace; add AppFabric to use distributed memory cache feature; automated web-app UI test(!) which shows that the memory cache improved performance; new Windows Workflow 4 designer; AppFabric exposes WF 4 through a web service automatically with tracking UI shown in IIS Manager; MSDeploy integrated with Visual Studio for each single-file publish/deploy (to staging/live)
  • Moving Tailsping travel app (as enhanced above) seamlessly to Azure; creating an app model with designer in VS 2010 by adding web role, AppFabric role and database role and associating with projects; published to Azure (using Windows Identity Foundation to allow federation of AD identity); use System Center Operations Manager (SCOM) to monitor Azure application and help check for SLA violations

Windows Live Mesh Gives Legs or Wheels to Microsoft Sync and Auto PC

Microsoft Sync has appeared in some Ford vehicles and is apparently coming to at least two other manufacturers soon.

It amazes me how utterly appalling the uptake is of Windows in the car industry.

Microsoft Sync with a Microsoft’s Live Mesh client opens up the ability to take contacts, music, continuous user experiences (such as phone calls, paused music and podcast bookmarks), to your car.

Combine that with a ‘Windows Live PC’ running on an ‘Xbox portable’ or Zune in the mesh as I’ve mentioned in this series of posts on Live Mesh, and you can really see the magic of software plus services coming together for a seamless user experience.

A ‘Windows Live PC’ gives the UMPC, ‘Microsoft PC’ or Xbox Portable a Future

In this series of posts I’ve talked about my concept of the ‘Windows Live PC’ as the trojan strategy in Microsoft’s Live Mesh.

I’ve talked about how such a virtual PC could be available on an Xbox 360, a Mac or other platforms.

One of problems with the Microsoft UMPC initiate has been that cost of PC capabilities in a small form-factor, and the need to up the component cost to provide Vista in that form factor.  This has made many UMPCs (so far built not by Microsoft, but by IHVs) more expensive than many notebook computers and with less power at the same price.

With my concept of the ‘Windows Live PC’ and minimal SSD storage, the UMPC could stop growing in power (and energy consumption, resulting in longer battery life) and just turn into a ‘Windows Live PC’ client.

In previous posts I suggested that such a client doesn’t have to be very powerful.  I also said that the xbox 360 is good enough.  In fact the original xbox is likely good enough too in many ways – even perhaps a PS2 or PS3!!

How about a PC the size of a Mac Mini or the size of a Zune?

What if Microsoft sold its own UMPC with SSD storage, the form-factor of something like a Samsung Q1 Ultra but not much processing power – how about an Xbox portable?

An Xbox portable would be the ultimate convergent future of Live Mesh, Xbox, Xbox Live, ‘Windows Live PC’, Xbox portable, WPF, Remote App, Windows Server 2008, Windows licensing, ISV solution channel, etc. 

Robbie Bach, J Allard, Ray Ozzie, Bob Muglia, Steve Ballmer & Bill Gates – take a look at this series of posts on Live Mesh – I know what you’re up to 🙂 and if you’re not then you should be – it’s a vision I want to be involved in one way or another from the outside or the inside…