Update to the WebSockets prototype on HTML5 Labs site

Last week the Interoperability team at Microsoft released the fourth update to the WebSockets prototype on our HTML5 Labs site, bringing the implementation in line with the recently released WebSockets 07 Protocol Specification.

This latest release updates both the server and client prototype implementations based on 07 specification. The majority of the changes in this update are around client-to-server masking. 

The team is also hosting a WebSocket endpoint, which implements the proposed IETF interop tests, which are defined here

You can find the WebSocket endpoint here: ws://html5labs.cloudapp.net:4502/interoptests.

In addition, our client and server implementations continue to be interoperable with Firefox and Jetty, an open-source project providing an HTTP server, HTTP client, and javax.servlet container, developed by the Eclipse community.

You can read the full announcement on the Interoperability team blog -  here.

This prototype forms part of our HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

This is the fourth update to our WebSockets prototype since it was released on the HTML5 Labs site in December, the IndexedDB prototype has been updated to bring it in line with the latest version of the specification, and we recently added a new WebSockets demo.

The team anticipates further HTML5 Labs prototypes of WebSockets when the current Last Call review is completed and an updated draft comes out. 

We will also update the prototype when the W3C Web Applications Working Group updates the API specification to reflect the resolution of a currently open bug.  There appears to be an emerging consensus in the discussion and we expect an update of the editor’s draft soon.

Coming next is the Media Capture API prototype, a draft specification that defines HTML form enhancements to provide access to the audio, image and video capture capabilities of a device.

The first release of the prototype includes Audio capabilities only, but we plan to add video support shortly after the release of the first version.

So, stay tuned for the Media Capture prototype and other new ones that we are working on right now.

HTML5 Prototypes–FileAPI, IndexedDB, Media Capture

The  Interoperability team recently made available an update to the FileAPI prototype released on HTML5 Labs last month. The File API prototype is based on the evolving W3C specification that provides an API for representing file objects in web applications.

This update implements  the changed behavior in File.slice and also includes a minor update to the existing features by adding support for selecting and reading multiple files sequentially via the FileList Interface.

The prototype includes a simple demo that shows how FileAPIs can be used to select images on the local machines, preview them on the browsers, and it can easily extended to add the ability to upload the images on the server.

As you likely know, HTML5 Labs is the place where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience.

So far, there3 have been three updates to the WebSockets prototype since it was released on the HTML5 Labs site in December, the IndexedDB prototype has been updated to bring it in line with the latest version of the specification, and the team recently added a new WebSockets demo.

Coming next is the Media Capture API prototype, a draft specification that defines HTML form enhancements to provide access to the audio, image and video capture capabilities of a device.

The first release of the prototype includes Audio capabilities only, but the team plans to add video support shortly after the release of the first version.

So, stay tuned for the Media Capture  prototype and other HTML 5 work that is in process !

Use HTML5 Video Tags in your ASP.NET Applications

Internet Explorer 9 arrived this week with HTML 5 features galore.

Visual Studio 2010 SP1 recently shipped with HTML5 support as well.

So, lts get started adding HTML5 features to our ASP.NET Web Sites.

In this post – we’ll play video in the browser using HTML5 Video Tags.

Before you continue – I suggest you read this post on writing HTML5 markup that degrades gracefully.

The good news is that the HTML5 Video tag has backward compatibility support built in.

The bad news is that we need to do a little more than just write code.

Different browsers support different video formats and HTML5 lets you specify multiple source video files so the browser can use the one it supports.

Example:


<video width='640' height='360' controls>

   <!-- Safari / iOS video    -->
   <source src='SomeVideo.MP4' type='video/mp4' />

   <!-- Firefox / Opera / Chrome10 -->
   <source src='SomeVideo.OGG' type='video/ogg' />

   <!-- fallback - no support for the HTML Video Tag -->
   <img src='NO-VIDEO.JPG' width='640' height='360'
        alt='No HTML5 VIdeo Support'
        title='No video playback capabilities' />
</video>

By default, IIS won’t be configured for certain MIME types that we will want to use with HTML5 video, like .OGG

The built it Visual Studio Web Server doesn’t let you configure your own MIME types so you’ll need to use IIS.

You could use the Web.Config file to specify new mime types [ READ HERE ], but lets make it permanent.

Fire up the IIS Manager and locate the MIME Types Button

Open the MIME Types dialog and add an .ogg MIME type.

Now we’re ready to code.

Create a new ASP.NET WebForms Web Site using the default Web Site template and add this markup to the Default.aspx page.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
       <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <video src='windowsmedia.ogg' controls='controls'>
    </video>
</asp:Content>

Don’t forget to change the name of your .ogg file to one you have coppied to your project directory.

Read the rest of this entry »

WebSockets Release Interoperates with Firefox, Eclipse’s Jetty

Today the interop team at Microsoft updated, for the fourth time since December, the WebSockets prototype on our HTML5 Labs site, which brings the implementation in line with the recently released WebSockets 06 Protocol Specification. 

They extended our interoperability testing so that now, along with LibWebSockets, they have tested interoperability with Jetty, an open-source project providing an HTTP server, HTTP client, and javax.servlet container, developed by the Eclipse community, and they accepted the invitation of Patrick @Docksong.com to test our code with a Firefox Mindfield version he built with an implementation of the 06 Protocol Specification.

They tested the WebSockets interoperability between our HTML5 Labs prototype client and Jetty server, which recently added support for the 06 version of the spec and also tested the WebSockets interoperability with a test Firefox build that supports the 06 protocol specification.

We are hosting a chat demo page on Azure, which can be opened in Firefox and will use native browser WebSocket instead of the Silverlight-based one.

This update of the WebSocket prototype brings ping-pong support: automatic client to server ping every 50 seconds. It also now supports the binary and fragment frames feature defined in the WebSocket protocol specification, but they are not yet exposed to javascript because the W3C API working group is still working on defining a set of APIs that can work with binary data.

This prototype forms part of Microsoft’s HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

You can read more about all this on Claudio’s blog post or on Port 25.

Please visit the links above and join us in discussions that will help drive the specifications under development and Microsoft related implementations.

HTML5 versus Silverlight–Is Silverlight Dead?

In a world NO, NO, NO !

I got this email from a developer that I have corresponded with for several years.

I know this guy to be smart and experienced, so this is not a “newbie” question but rather an example of how difficult it is to understand the new technology that is constantly emerging in the software development industry and what they mean for our future work and choices.

From:

Sent: Friday, February 18, 2011 12:00 PM

To: Joe Stagner

Subject: Html 5 causing Silverlight Dev to End?

Joe,

I heard from someone that Html 5 is eliminating the need for Silverlight, such that Silverlight development might stop. Any truth to this???

Phil

In the interest of transparency, I don’t work in in the Silverlight team. I’m not even the Silverlight guy on my team, but I am a technical strategist and have been developing web applications since before Windows even had a TCP/IP stack !

What follows is MY opinion and may not exactly “jive” with Microsoft Official position.

> Note to Tim Heuer, Hey old buddy – I’m sure you’ll email me if I’m WAY off base Smile 

HTML5 is interesting – period.

I’m building developer guidance right now using HTML5, but HTML5 is NOT a Silver Bullet.

Certainly there are some scenarios for which HTML5 feature will displace the need for a RIA type plugin like Silverlight.

In most cases though, I don’t think this is true.

What HTML can “do” – Silverlight can do really well !

In my humble opinion,  I’m not sure that we (Microsoft) have done a great job demonstrating the high end of what can be done with Silverlight. The more advanced the application scenario, the more Silverlight excels.

Late last year there was a lot of noise on the web suggesting that Microsoft was disinvesting in Silverlight.

I know it’s hard to believe, but everything you read on the internet is not necessarily true Smile 

So, what are some of the scenarios that I personally would require Silverlight.

Audio / Video

Yes, I know, you can play video with HTML5, welcome to the 1990s Smile 

I need to do MUCH MORE than just “play” video.

Example: Completely separate from my job at Microsoft I create training and educational video for athletes. I want offer that video on a web site but don’t want that video to be swiped, edited, copied, etc all over the web.

HTML5 does not support DRM or other media related security initiatives so remove most of the media produced by the Movie, Television, and Training Industries from use with HTML5 (as well as mine.)

What’s more, I need to do A LOT MORE then just play video. I want to record usage data, allow user annotations, insert context specific ads, links, etc, and much more which means I WANT a custom player that can make my user’s video experience ROACK.

Performance

Historically, most browser applications are really single tier. All the executable logic runs on the server and the browser just displays the results.

We’re finally starting to catch up and architect web applications with “Federated Logic”.

It only makes sense. Lets run as much code as we safely can in the browser so as to off load the required processing power from our servers to the clients computer.

HTML5’s facility to enable this is present, but inferior.

True, JavaScript execution has been a point of focus in HTML5 compliant browser implementations and HTML5 has “Web Worker” Processes. (It’s acually a seperate spec – http://www.w3.org/TR/workers/)

Web Workers, in particular, are very interesting but require certain restrictions in terms of interacting with the User Interface. This is another example of how HTML with fit well in certain scenarios and not others.

There is also the issue of source code protection which is virtually impossible in JavaScript.

Communications

HTML WebSockets was my favorite feature. Unfortunately it looks like WebSockets won’t make it into the final HTML5 specification. In fact – it’s a whole different spec http://dev.w3.org/html5/websockets/. That means it’s implementation may vary from browser to browser if it gets implemented at all.

Silverlight has a complete network stack today and it works in all the most popular browser currently in use. 

Off Line

HTML5 has Off-Line application considerations.

An offline application cache and local storage will suffice for some applications but if you think about such usage scenarios a little further things start to get more complex.

For example, if our application implements a rich user interface using AJAX techniques, as users today expect, what happen to those interactions when the user is off line. Can you really just “turn them off”, or do you need to provide a set of disconnected logic?

We might be ale to do this, but if our application will be use significantly off line (as well as on) Silverlight offers significant advantages. (If you haven’t toured Silverlight recently Silverlight now has a strong Out-Of-Browser capability (meaning run as a desktop app, no browser involved) .

Touch / Multi Touch Interfaces

User interaction continues to evolve and Computers, Tables, and Dedicated devices often lend themselves to Touch or Multi-Touch User Interfaces. Lets plan ahead, shal we?

WebCam / Microphone

Tack specific applications, social networking, etc. ?????  Cool.

And More.

Work with Ink? call the Operating System’s API ? Silverlight.

And lest we forget. Silverlight is THE applications development model for Windows Phone 7 applications (though if you’re building games you may be using XNA)

Windows Phone 7 is enjoying rapid success and growth. Not only does that alone insure the continued evolution of Silverlight, but the ability to share code between your Phone, Browser and Desktop Applications.

So no Phil….

HTML5 will enjoy enthusiastic adoption but will not eliminate Silverlight. In fact, as HTML5 helps us push the edges of web applications design and architecture, the opposite might be true. We may find ourselves envisioning more and more functionality for which Silverlight is the ideal enabler.

del.icio.us Tags: ,

Microsoft WebSockets Prototype

Last week Microsoft released an update to the WebSockets prototype, which was first released late last year (December 2010).

This update brings the implementation in line with the WebSockets 04 Protocol Specification.

It’s important to note that the spec is still evolving, with the 03 version released in December, the 04 version last month and the 05 spec which just shipped yesterday. The plan is to continue to rev the code going forward and to bring the implementation in line with the just released WebSockets 05 Protocol Specification.

If you’re not familiar with WebSockets, it is a technology designed to simplify much of the complexity around bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket.

WebSockets  can be implemented in web browsers, web servers as well as used by any client or server application. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

This prototype comes from Microsoft’s HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. We believe that the HTML5 Labs approach has advantages over placing unstable specifications directly in browser.

First, developers can build on Internet Explorer 9 without worrying that their site will break as the underlying specs change. Second, we will iterate very quickly in HTML5 Labs and expect the standalone approach with prototypes to be closer to the latest specs.

As an example with WebSockets, most browsers are still on the outdated versions of WebSockets-00 or older.

Updating the prototype is a great way to continue to test the spec as well as let users play with new features to make sure they work the way they are supposed to and to provide feedback.

As part of the update, we posted new demos, including a casual game that shows users how WebSockets can enable new scenarios.

Building these prototypes in a timely manner will help us have informed discussions with developer communities, and give implementation experience with the draft specifications that will generate feedback to improve the eventual standards.

You can read more about this on Caludio Caldato’s blog and at the HTML5 Labs site.

HTML 5 Markup that Gracefully Degrades

As I continue preparing developer guidance for ASP.NET Developers who want to use HTML features in their ASP.NET applications, I’m reminded that public facing web sites need to support legacy bowsers while offering the up-to-date visitors with the better experience that the latest technologies can provide.

Though we might keep a server-side index of supported features on a per browser basis, it makes more sense to dynamically detect feature support on an as-needed basis.

Why ?

  • Feature detection by JavaScript in the browser is the most accurate, up-to-date means to determine the availability of a feature.
  • You only have to write the detection code once for each feature.
  • You don’t need to create and continually update the server side feature matrix on a “per browser” basis.

I’ll be sharing code snippets and blogging about using HTML5 specific features but in this post I’ll be sharing a sample of using HTML feature detection.

The code below is intended as a generic example bit I will use the HTML5 Video Tag to demonstrate the techniques.

EXAMPLE: Some browsers simple do not support the HTML5 Video Tag at all. Others support the Video Tag but only render specific video file types.

Rather than only support users who are using our favorite browser, wehave several options to provide the broadest possible browser support.

Our fist option is to write some JavaScript code to find out if the specific features (HTML5 Video in this case) is available.

Read the rest of this entry »