How do I use HTML5 in Visual Studio 2010?

By: Susan Ibach, February 23, 2012

cadhtml5coaLots of tools out there support HTML5, but since I already have Visual Studio 2010 at work, I figured I would see how I could avoid downloading yet another tool on my laptop.

I started trying out HTML5 a few months back. I’ve been using Visual Studio for years at work. I figured it should be simpler to keep working with the developer tool I already know rather than learning a new one. Besides, I use ASP.NET so I also want the option of incorporating HTML5 coolness into those applications.  It took me a bit of messing about to get up and running, and I know there will be greater support for HTML5 in Visual Studio 11. But for now I am working with Visual Studio 2010.  I thought I would share what I learned so hopefully it will be easier for you if you want to try it.

Here’s what you need to do:

  • Add HTML5 validation and intellisense
  • Create an HTML5 project
  • Set up for <video> and <audio>
  • Play!

Add HTML5 Validation and Intellisense

You will definitely want to make sure you have Service Pack 1 installed! By installing Service Pack 1 you get both intellisense (can’t live without that anymore) and validation for HTML5. Don’t forget after you install Service pack 1 to go to Tools | Options | Text Editor | HTML | Validation and set the validation to HTML5 or XHTML5 or the HTML5 validation won’t work.

First of all there is a really great blog by Burke Holland on how to use the MVC HTML5 template for Visual Studio 2010 here.

Create an HTML5 project in Visual Studio

You have a couple of choices here.

  • Modify an existing template to be HTML5 or create your own template. There is a great blog describing how to do that here.
  • Download the MotherEffin ASP.NET MVC HTML5 template that Jacob Gable was kind enough to post on the VisualStudio Gallery.
  • Download the mobile ready ASP.NET MVC HTML5 template that Sammy Ageil was kind enough to post on the Visual Studio Gallery

Set up for <video> and <audio>

The first tags I started playing with in Visual Studio were the video and audio tags. I immediately had problems getting an actual video to display on my web page it was really frustrating. Here is what I had to do to get everything working. The basic problem was with the MIME types. When a .avi, or .MP3 file was used on my website, the web server didn’t recognize that those were video and audio files. To get it working I had to edit my web.config file and make sure I had IIS express running in the development environment instead of the development server built into Visual Studio to ensure that my web.config file was being used to figure out the MIME types. You need to do this for the WOFF fonts as well.

  • Install IIS Express
  • Specify the mime types you will be using in your web.config file. Here’s an example:
        <system.webServer>
          <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".m4v" mimeType="video/mp4" />
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
            <mimeMap fileExtension=".webm" mimeType="video/webm" />
            <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
            <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
          </staticContent>
        </system.webServer>

    .csharpcode, .csharpcode pre
    {
    font-size: small;
    color: black;
    font-family: consolas, “Courier New”, courier, monospace;
    background-color: #ffffff;
    /*white-space: pre;*/
    }
    .csharpcode pre { margin: 0em; }
    .csharpcode .rem { color: #008000; }
    .csharpcode .kwrd { color: #0000ff; }
    .csharpcode .str { color: #006080; }
    .csharpcode .op { color: #0000c0; }
    .csharpcode .preproc { color: #cc6633; }
    .csharpcode .asp { background-color: #ffff00; }
    .csharpcode .html { color: #800000; }
    .csharpcode .attr { color: #ff0000; }
    .csharpcode .alt
    {
    background-color: #f4f4f4;
    width: 100%;
    margin: 0em;
    }
    .csharpcode .lnum { color: #606060; }

Change the project settings, by right clicking on the project and changing the settings to Use IIS Express when debugging in Visual Studio.VisualStudioDevelopmentServer

Play!

Once you have it up and running you can start exploring the world of HTML5. There are some great resources on learning HTML5 here. Make sure you read up on feature detection since different browsers will support different HTML5 features and because you will need this for backwards compatibility as well!

If you want to experiment with <video>, I found it handy to just download Big Buck Bunny since you can get it in multiple formats so it’s great for experimenting with the fallback features of HTML5 <video> for different browsers.

Since a big part of HTML5 is the cross browser support, make sure you try it out in different browsers, or use the F12 developer tools in Internet Explorer to test how your code will work in different browsers or older browsers.

Most of all have fun!

Tagged with: , ,
Posted in Miscellaneous

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Susan Ibach

Susan Ibach

What people are saying about #webnotwar

.@trishgarner thanks! How can one thing be so awesome and stupid at the same time? Lol #OGT14 #webnotwar

It's official. I've bought my new bike for the Open Government Tour! I pick it up next week :-) 3.bp.blogspot.com/-LiV9zIcK4wk/U… #OGT14 #webnotwar

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar Retweeted by Make Web Not War

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar Retweeted by GTEC

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar

As part of #OGT14, I will be hosting 2-3 "practice events" in June in Southwestern Ontario...here is why: youtube.com/watch?v=OT4y2N… #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Susan Holt

RT @richardpietro: Here's a scary #OGT14 reality check: for a period of 3 months, I will be "Richard Pietro of no-fixed address" #webnotwar

Here's a scary #OGT14 reality check: for a period of three months, I will be "Richard Pietro of no-fixed address" #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Nick Scott

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar

The new #webnotwar community camera has arrived. I had no idea gopro was that small... It's like a pygmy camera lol pic.twitter.com/ecYz6CH48X

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Alexis Smirnov

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Victor Stinner

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Montréal-Python

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If