Posts Tagged ‘HTML5’

How do I use HTML5 in Visual Studio 2010?

cadhtml5coaIn this post, I’ll share what I learned about how to get started writing HTML5 code in Visual Studio 2010.

HTML5 seems to be everywhere these days! I started trying it myself a few months back and I quickly decided that if possible, I wanted to play with it in Visual Studio. I’ve been working with Visual Studio for years, it’s got to be simpler to keep working with the developer tool I already know and love rather than moving to a new tool. Besides I want to be able to incorporate HTML5 into ASP.NET applications!  It took me a bit of messing about to get up and running with HTML5 the way 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.

Here’s what you want 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!

Nero JSFiddled while Rome burned

If you haven’t found it yet and you are doing HTML, javaScript or CSS development, check out jsfiddle!

Sometimes you hear about a cool new HTML5 feature and you want to explore it, but you don’t want to go through the hassle of building and deploying a web page to do it. This is when I love JSFiddle. It’s a sandbox for web development!

Let’s start with something really simple.

Go to jsfiddle and in the HTML pane type

<h1>Hello World</h1>

Then hit the Run button

image

 

 

 

Now you can see how your web page would look with that HTML in the Result pane!

image

Then maybe you want to try out some CSS3 features, so you add a little CSS to the CSS pane, maybe the border radius for creating rounded rectangles

image

If you want to try a little javaScript you can add that to the javaScript pane so you can even try out HTML5 features like Canvas!

image

When you are done you can  share your code with others! Cool tools make it easier to explore!

This blog is also posted on Make Web Not War

Modernizr love – lets me use HTML5 on any browser

HTML5 is so awesome, but doesn’t work on all browsers, modernizr is the first step to supporting old browsers when you write HTML5 code

HTML5 really does rock, with so many great features like the <video> tag, <Audio> tag, new elements like <header>, <footer> and attributes to do cool validation on <input>. But Internet Explorer doesn’t support the same HTML5 features as Firefox. IE10 doesn’t support the same features as IE9. Older browsers don’t support HTML5 at all! Ironic that we have all these hassles with a language that is supposed to make coding for multiple browsers easier.

So where does that leave us, well in familiar territory really. You have to do feature detection so you can run different code for different browsers.

Feature, not browser detection! If you are still doing that, please stop now!!! More and more browsers keep coming out with more and more versions and variations, you are better off doing feature detection so you can just say “hey I want to use this feature,  and if this browser doesn’t support it, here is a backup plan.” Okay I’ll get off my anti-browser detection soapbox now.

You can write little JavaScript functions to check if a feature is supported, say for example you decide you want to check if canvas is supported, this would work:

function supports_canvas() {

return !!document.createElement(‘canvas’).getContext;

}

This little function will create a dummy canvas, then uses a getContext to see if it was created (which it wouldn’t be if the browser doesn’t support HTML5), so basically it returns True if the browser can create a canvas, and False if it can’t. Voila! You now have feature detection for canvas.

But I am wayyyyy to lazy to write a function like that for every single HTML5 feature I want to use, which is why I LOVE modernizr. They basically wrote an entire library of functions like that for me (thank you! thank you! thank you!)

Modernizr creates a global object called ..you guessed it… Modernizr that contains a set of boolean properties for each feature it can detect. So if we want to check if canvas is supported instead of writing our own function, we just check the boolean property

if (Modernizr.canvas) {

   //…do the cool canvas stuff

} else {

   //…do something else ‘cuz canvas won’t work

}

So if you are thinking of playing around in HTML5, step 1: go get Modernizr!

This blog post also appears on Make Web Not War