At TechEd India 2011 I presented on HTML5 Development with Visual Studio 2010 SP1.   I wanted to cover the aspects that were discussed in my session.

HTML5

1. HTML5 is the emerging but promising trend in web development

2. Some of the standards have got green signal i.e. they are candidate recommendations.

3. Some others are still work in progress.

4. IE9 implements standardized HTML5 specifications.

Visual Studio 2010 and HTML5

Visual Studio 2010 Service Pack 1 comes from basic HTML5 support.    Having said that, apart from lack of intellisense, nothing stops people from developing HTML5 based websites even today.

I had earlier written a post around this.  It was during VS 2010 SP1 Beta but holds good even now.  You can read it at http://geekswithblogs.net/ranganh/archive/2011/02/07/html5-and-visual-studio-2010.aspx

One of the popular tags in HTML5 is the Video tag.  The ability to run videos on web pages without the dependency of plugins/Silverlight/Flash makes it exciting for web developers.  HTML5 Video specifications are a little complicated at the moment.  H.264 encoded MP4, OGV, WEBM formats are the major video formats going around the industry.

Microsoft supports H.264 encoded videos and also has extended support for WebM format (Read the IE Team’s post here http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx)

I showcased the Video playing capabilities and also the mechanism to fall back on Silverlight based player in case the browser doesn’t support HTML5.  I had written this post earlier.  So, you can find the sample from http://geekswithblogs.net/ranganh/archive/2011/02/22/playing-html5-video-with-fall-back-for-ie8ie7-and-earlier.aspx 

Browser detection vs. Feature detection

Its safe to test for features in a browser rather than simple browser detection and rendering accordingly.  This is particularly important given that various versions of browsers support various levels of HTML5/JavaScript and limiting the functionality based on just browser version would miss out on stuff that the browser actually supports.

here below is the code snippet for checking the video playing capabilities of the browser

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Video Codec Detection</title>
</head>
<body>
    <video id="myVideo">
    </video>

    <script type="text/javascript">

        var player = document.getElementById('myVideo');

        alert("Is <video> supported? " +
            (player.canPlayType != null));

        if (player.canPlayType) {

            alert("Is an unknown format supported? " +
                player.canPlayType('NoWay/VidXF'));

            alert("Is mp4 supported? " +
                player.canPlayType('video/mp4'));

            alert("Is H.264 Baseline supported? " +
                player.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
        }
    </script>
</body>
</html>

Expression Web 4 SP1

Expression Web 4 SP1 has support for HTML5.  This would allow you to create HTML5 based websites/layouts and validate them using the snapshot/ Super Preview.  Read the Expression Web blog post here http://blogs.msdn.com/b/xweb/archive/2011/03/21/expression-web-4-service-pack-1.aspx 

Cheers !!!