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

From 0 to Windows Phone ‘Mango’ in 1 Day at DevTeach

 

Next week will be an awesome week in Montreal.  DevTeach, the premier level-300/400 developer conference in Canada is on from Tuesday 31st to Thursday June 2nd.  This includes a complete additional MobileTeach track around Android, iPhone & Windows Phone. 

Not only that, but I’ll be running the 1-day post-conference training session on Friday dedicated to Windows Phone

This week Microsoft announced news about the upcoming Windows Phone ‘Mango’ release that really seals the deal on possibly the greatest smartphone user experience to date and enhances arguably the best mobile developer experience even further.

In this comprehensive 1-day post-conference for the agile mind, I’ll start by showing attendees (familiar with .NET), how to create a Silverlight application from scratch using the MVVM pattern (including advanced features like a templated items control and a custom panel), making design decisions for the phone and how to get an application published.  We’ll then dive into the platform features, figure out data access, sensors, location and notifications, conquer storage and tombstoning and wrap up with other new major Mango features.  Attendees will get access to samples.

Introduction

From 0 to published WP7 MVVM Silverlight app including:

  • Development Tools
  • Silverlight Development
  • MVVM
  • Data Binding
  • Timers
  • ItemsControl
  • Custom Layout Panel
  • DataTemplates
  • Phone UI Design
  • Marketplace policies

Accessing device features including:

  • Input
  • Shell Integration
  • Sensors
  • Location

Getting data and notifications from the cloud including:

  • Data Access
  • Building Phone-compatible Services
  • Notification Services

Application Lifecycle & Tomb-stoning

Local Data Storage (including isolated storage, 3rd party and Mango options)

Other new major ‘Mango’ features

You can add on that extra bumper day to the 3-day main conference price at a discount or purchase direct 1-day access for $399.

As if that’s not enough, I’ll also be doing a demo in the conference keynote and a session on Silverlight 5 features in the conference Silverlight track (which I also lead).

Hope to see you there!

What’s Coming for WP7 developers in Mango

Blogged from the Microsoft Mix 11 Day 2 Keynote in Las Vegas

On day 2 of Microsoft’s Mix 11 conference, they explain how they will (in May) be “Delivering happiness” to Windows Phone developers. New Windows Phone end-user features will be announced at a later date.

Opportunity

Ecosystem

· Nokia will be bringing mobile billing expertise

Countries

· 16 more languages

· Developers in 38 (up from 30) countries can register to publish applications

· Phone users in 35 (up from 16) countries will be able to purchase apps

Discoverability

· New Program list – has the ‘long list’ initial letter jump buttons, a search button (inc. access to marketplace search in the results)

· Marketplace – Separates Apps, music, & Podcasts (US this fall)) and shows more details in list with publisher/price/rating

· Marketplace App page has a pivot: details, reviews, screenshots, related

· One-click install for free apps

· Auto-nav to apps list after install

· Search Extras – A Bing Search result can have extras deep linking into an app

Capability

Browser

· Browser uses same IE9 code-base for HTML5, JavaScript, CSS3

· Address bar at the bottom

· Background audio for HTML5 in browser (use phone controls too)

· H.264 video in video tag in full screen with controls

Phone integration

· Sockets

· SQL CE Database with ORM and Linq to SQL

· More launchers & choosers (inc. deep link to directions)

· Better access to contacts and calendar

· Pin to start of application deep links

· Raw camera access

· Access to compass

· Access to gyro (new optional hardware coming this year)

· Motion Sensor API (for ease of using compass and gyro)

· Ringtone API

Multi-tasking:

· Fast app switching – apps are suspending, and only terminated if necessary

· Background audio from apps (leveraging the standard phone media controls)

· Background downloads

· Setup alarms

· Live tile updating including animations

· “Live agents” occasionally run by a battery friendly scheduler (with user control of which ones can run this way) – gets events and can get location

Dev Experience:

New emulator features for Accelerometer (with 3D model of position) and location (with Bing maps input)

Performance improvement (for list)

· Scrolling and input

· Image decode

· Garbage collector (no pausing)

· Memory usage

Built on Silverlight 4 including RichTextBox

Local Database using SQL CE with ORM and LINQ to SQL

Can compose UI with Silverlight and XNA

Profiler (still free)

Upcoming Ottawa Windows 7, Windows Phone 7 & Silverlight Events

Tue Nov 30th 2010 at 5:00pm

Windows Phone 7 Developer Briefing

Thu Dec 2nd 2010 at 11:45am

Silverlight Firestarter (with roadmap announcement)

Thu Dec 2nd 2010 at 8:30am or 5:00pm

Building Awesome Apps for Windows 7! Community Tour

You can stay for the Windows 7 and Silverlight events on Dec 2nd at the same venue!!

Details below…

Tue Nov 30th 2010 – Windows Phone 7 Developer Briefing

Get Your App in Gear – Register today and join us at the Windows Phone 7 Developer Briefing

Join us for an informative Windows Phone 7 Briefing to learn more about developing on Microsoft’s latest mobile platform. The briefing will cover the two application frameworks available for Windows Phone 7, where to find developer resources, how to submit apps into Marketplace, and much more!

Register here:

Ottawa, On – November 30, 2010 at 5pm

AGENDA
Registration
5:00pm

Start
6:00pm

Introduction
Apps with Silverlight
Break/Q&A
Games with XNA
Next Steps/Q&A

End

9:00pm

Apps with Silverlight
Silverlight provides standard user controls and an event-driven model suited to building apps that bring information to the user. In this session, you’ll see an app or two built right in front of you, and learn about many aspects of Silverlight development for Windows Phone, including controls, laying them out, the model-view-viewmodel pattern, resources, themes, data binding and data templates, making asynchronous web requests, LINQ to XML and more.

Games with XNA
XNA is a game loop-based framework that makes it easier to build 2-D and 3-D games where gameplay, graphics and sound are key. You’ll watch the construction of a 2-D game and in the process learn about XNA’s game loop, resources, screen management, sprites, getting input from the accelerometer and touchscreen, collision detection, making use of game code libraries and other aspects of game development with XNA.

Next Steps
You’ve now had a taste of developing for Windows Phone with both Silverlight and XNA. What now? At this session we’ll cover where to get the tools and hardware, where to find additional developer resources such as tutorials, books and communities, how to register with the App Hub, how to submit an app to Marketplace and even talk about ideas for new apps.

Thu Dec 2nd 2010 at 12pm – Silverlight Firestarter (with roadmap announcement)

Come to the Microsoft Ottawa office on Dec 2nd 2010 @ 11:45 am ET sharp to watch 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.  Colin Melia (Microsoft MVP for Silverlight), will 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.

100 Queen Street (the World Exchange Plaza – with underground parking)

Suite 500 (5th floor)

Ottawa, ON

K1P 1J9

AGENDA
Welcome
11:45am

Live Broadcast start
12:00pm

End – continue watching at home

4:45pm

What is the Silverlight Firestarter?

· An Event. A one day, global, live streamed and on demand event keynoted by Scott Guthrie.

· Training. New self-paced labs and walk through videos.

· Interactive. Watch live and ask the Silverlight product team and local experts questions during the event.

· Why Silverlight? Silverlight is a powerful development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline.

Full streaming event details – http://www.silverlight.net/news/events/firestarter/

Thu Dec 2nd 2010 – Building Awesome Apps for Windows 7! Community Tour

Windows® 7 represents an amazing opportunity for application developers. Since shipping just one year ago, more than 240 million licenses of Windows 7 have been sold. (That’s roughly seven copies of Windows 7 sold every second!). Windows 7 is also an amazing platform. Through integrated capabilities through the Windows Taskbar, sensors, text, and speech, it blends the best technology, innovation, and creativity to empower developers to create awesome apps.

Join Kate Gregory or Richard Campbell in five cities in Canada for the Building Awesome Apps for Windows 7 tour. Come hear how you can start taking advantage of the capabilities of Windows 7 in your new/existing applications TODAY. (Registration is free).

Register here:

Ottawa, On – Dec 2nd 2010 at 8:30am.

Ottawa, On – Dec 2nd 2010 at 5:00pm.

AGENDA
Registration *
8:30am/5:00pm

Start
9:00am/5:30pm

A Lap Around the Windows® API Code Pack

Building Touch-First Applications with Windows® 7

Q&A

End

11:30am/8:00pm

A Lap around the Windows® API Code Pack

The Windows API Code Pack for the .NET Framework is a managed library for building applications that light up on Windows 7. It provides access to new user interface features (taskbar jump lists, libraries, sensor platform and more) as well as "behind the scenes" features that make your applications more aware and responsive (restart and recovery, power management and more). This is a must-have library for developers targeting Windows 7 with managed code. In this session, you’ll learn how to quickly incorporate the Windows API Code Pack into your applications to take advantage of features in Windows 7.

Building Touch-First Applications for Windows® 7

In Windows 7, innovative touch and gesture support enable a rich and natural interaction with applications. Are your applications ready to support this new wave of PC form factors? Are they finger-friendly to support interactions and gestures on Windows 7? This session highlights the new multi-touch gesture APIs and explains how you can leverage them in your applications.

Got questions about this event? Email John Bristowe (Sr. Developer Evangelist, Microsoft Canada) – john.bristowe@microsoft.com / @jbristowe / blogs.msdn.com/cdndevs

*Light refreshments and snacks will be available

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)

Waiting for Windows Phone 7

Windows Phone 7 phones are set for release next Monday, Nov 8 2010 in North America (though my local store seems very uninformed) and are already available in various other parts of the world.  Luckily I’ve had developer device access since September, so I’ve been able to share information with you along the way in various articles (see below) and publish a few basic applications.

If you are in North America and waiting for Windows Phone 7, particularly if you are a developer, here are a few things for you to consider doing while you wait:

  • Get an App Hub subscription to publish software for the phone.
  • Prepare your social and ID accounts
  • Pick a phone
  • Build applications
  • Submit application to the marketplace via App Hub

Get an App Hub subscription to publish software for the phone

It’s US$99 (with specific local currency variations) a year to get an App Hub subscription which now allows you to submit and sell both Windows Phone 7 and Xbox 360 Arcade applications for sale.  That includes the ability to publish up to 5 free applications on WP7 (US$20 for additional ones).  If you are a student you may be able to sign up for DreamSpark and get a free subscription.  Set up takes a few days including identity (personal or business) verification.

20101105 apphub

There’s an App Hub Developer Registration Walkthrough available on the process for registering for a subscription.

Prepare your social and ID accounts

WP7 brings data down automatically from various services that are associated with a single Live ID that you can optionally register on the phone.  This includes services from any associated Zune and Xbox LIVE accounts (as well as Hotmail and associated social networking site accounts).  You can also add feeds, email, calendar and contacts from optional additional accounts from various providers.  You’ll want to get your primary Live ID and service associations in a row before you get a phone.  This may take some careful planning and account configuration.

For the details on how this works, I’d suggest Paul Thurrott’s article – Getting Ready for Windows Phone 7

Pick a phone

There are a decent number of phone available at launch though there are spread over various wireless service providers.

You can go to the official Windows Phone 7 site, select your region in the top right corner and click the Buy link to see which devices are on offer.

20101105 phones

Mobile Tech World has published a handy specification table that may help with your selection.

20101105 comparison

 

Build applications

So far I have 4 basic utility applications in the marketplace (with other more sophisticated apps on the way) which you are welcome to purchase Winking smile by clicking the links below on a phone or with Zune 4.7 installed.

The first one is free of charge and you can see how it was built step by step from scratch in an article I recently published on DZone.

I’d also suggest you grab the free e-book from Microsoft Press, by Charles Petzold, Programming Windows Phone 7.

I’ve also authored a number of articles on DZone and Mobile Developer Magazine (free subscription required) including:

On Nov 15th 2010, a handy reference card will also be published on DZone for Windows Phone 7 development by .NET developers.

Submit applications to the marketplace via App Hub

There are important certification requirements you must comply with before submitting your application.

For a step-by-step example of building and submitting an application and submitting it you can see an article I recently published on DZone.

There’s also an official Windows Phone 7 Application Submission Walkthrough

The indicative certification turnaround time is 5 working days, though there are 1000+ applications queued for certification right now, so the timing may vary.

 

It’s almost time, so take the time to get yourself ready.