HTML5 development with Visual Studio 2010 Service Pack 1

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 !!!

Print | posted on Saturday, March 26, 2011 9:54 PM

Comments on this post

# re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
the MSFT and you have a pity small thought that Developer need intellisense in HTML as well as they work in C#. well C# developer never work without intellisense but HTML5 is browser based don'thing that it's compile based so they work even you have intellisense in VS , VWD , EW4 or not.

that is enough that VS or VWD never tell or warning when we use HTML5 feature and VS just disturb for certain HTML5 feature.

How IE9 support H.264 why not talking about that. Are MSFT itself made it.
Left by antony on Mar 26, 2011 10:37 PM

# re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
HTML is used is scripting language it is used for the web designing.You provides such a nice peace of information about it.
Left by bird feeders on Apr 19, 2011 2:26 PM

# re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
I like to use the HTML5 and it newest version of the HTML. HTML is used is scripting language. It is very easy and simple language.
Left by events savannah ga on May 14, 2011 9:50 AM

# re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
Well according to recent announcements that HTML5 will be the main technology Microsoft endorses for cross platform we development it has a lots of good application for the updation of templates.
Left by frequent urination in women on May 27, 2011 11:35 AM

# re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
without intellisense but HTML5 is browser based don'thing that it's compile based so they work even you have intellisense in VS , VWD , EW4 or not..
Left by maquinas de coser on Mar 20, 2012 5:22 PM

# # re: HTML5 development with Visual Studio 2010 Service Pack 1

Requesting Gravatar...
Wow! Thank you! I constantly needed to write on my website something like that. Can I take a portion of your post to my blog………..
Left by Technology Blog on Apr 23, 2012 4:27 PM

Your comment:

 (will show your gravatar)