How do I use HTML5 in Visual Studio 2010?

In 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.

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!

Visual Studio Hands On Labs for FREE!

There are a lot of different ways to learn a product or feature. You can watch videos, you can read blogs and articles. You can download training kits and developer guides. These work very well when you have a sandbox to play in, somewhere you can try out the features and code shown in the articles and blogs. But what if you don’t have anywhere to try it out? What if trying something out requires having a sample project as a starting point? Kind of hard to see how to complete testing faster using Test Manager without a project to test or Test Manager! Hard to try out software architecture features without Visual Studio Ultimate and an architecture to explore!

Technology to the rescue! With the rise in popularity and capabilities of virtual machines, more and more product groups are providing Hands On Labs inside virtual machines complete with all the software and sample projects to make it easy for you to try out lots of cool features. Case in point, Brian Keller, an evangelist for Visual studio wrote a blog announcing the Visual Studio team has a Virtual Machine with Visual Studio 2010 RTM loaded with sample data and they have even provided a set of manuals you can use to complete a series of different hands on lab experiences.

You may only use Visual Studio to edit and deploy your code, but there is so much more hiding in there!

Ever wondered how Visual Studio can help you with testing? Check out these labs

• Authoring and Running Manual Tests using Microsoft Test Manager 2010
• Introduction to Test Case Management with Microsoft Test Manager 2010
• Introduction to Coded UI Tests with Visual Studio 2010 Ultimate
• Debugging with IntelliTrace using Visual Studio 2010 Ultimate
• Using Code Analysis with Visual Studio 2010 to Improve Code Quality
• Introduction to Exploratory Testing with Microsoft Test Manager 2010
• Introduction to Platform Testing with Microsoft Test Manager 2010
• Introduction to Quality Tracking with Visual Studio 2010
• Introduction to Test Planning with Microsoft Test Manager 2010

Interested in how Visual Studio can help you discover the architecture of a project (since we have been talking about how to handle code without documentation)? Check out these labs

• Code Discovery using the architecture tools in Visual Studio 2010 Ultimate
• Understanding Class Coupling with Visual Studio 2010 Ultimate
• Using the Architecture Explore in Visual Studio 2010 Ultimate to Analyze Your Code

Has ITIL arrived at your company and is everyone asking you about your processes and configuration management? Check out these labs.

• Planning your Projects with Team Foundation Server 2010
• Branching and Merging Visualization with Team Foundation Server 2010

You can download the labs here. You can even choose between Hyper-V, Virtual PC 2007, or Windows 7 Virtual PC! There is more detail about the virtual machines, the labs and how to use them at Brian Keller’s blog post “Now Available: Visual Studio 2010 RTM Virtual Machine with Sample Data and Hands-on-Labs”.

Todays Top 5

5 Reasons to check out Tech Days Canada 2011 (in person or online)

1. For the first time, we will have Hands On Labs at the event! (See the top 5 is related to the blog post ). Bring your laptop to the show, try out the features you have been hearing about on the blogs on all kinds of products!
2. For the first time, we will have Instructor Led Labs at the event! If you find self paced labs don’t give you enough information, there will be several instructor led labs where you can bring your laptop and walk through a lab with the presenter!
3. There will be Hands On Labs online! If you can’t make it to TechDays in person, we will be hosting lots of great labs throughout the year from the TechDays website.
4. Free WiFi – yes we heard you, and yes we listened, and yes we will have free WiFi this year.
5. Bigger better TechDays Online – We will be launching an expanded and richer TechDays Online later this year to provide you with great content throughout the year!

This blog is also posted on the  Canadian Solution Developer Blog

By The Way There is Still No Documentation…

A couple of weeks ago I talked about the challenges of finding up to date documentation and showed you how to generate dependency graphs to help you figure out the structure of your code using Visual Studio 2010 Ultimate Edition.

This week I want to show you another useful feature in Visual Studio 2010 to help you generate documentation from existing code. The dependency graphs are great for big picture analysis, which assemblies are referenced and the classes in each assembly, but what if I need a lower level of detail?

Once again Visual Studio 2010 Ultimate Edition comes to the rescue with the sequence diagram generator. Maybe you’ve been asked to investigate an error message received by a user when they click on a particular button. You can just go into the event handler and generate a sequence diagram to determine the method calls from that event handler. This is much simpler than manually walking through the code class by class, method by method. Simply place the cursor in the code editor window, within the method for which you want to generated a sequence diagram and right click. Choose Generate Sequence Diagram from the context menu as shown in Figure 1.

Figure 1 Generating Sequence Diagram

When you select Generate Sequence Diagram you get a window which allows you to control the level of detail you want to include in the sequence diagram.

Figure 2 Generate Sequence Diagram Pop Up Window

 

Let’s take a quick look at the different options

• Maximum call depth controls how many calls deep you want the sequence diagram to draw. If you have a lot of nested calls and different classes you probably want to increase this from the default value of 3.
• Include calls in Current project will display only calls to methods in the same project as the method you selected
• Include calls in Current Solution will display only calls to methods in the same solution as the method you selected
• Include calls in Solution and external references will display all calls to all methods regardless of the assembly or location where they reside
• Exclude calls to Properties and events will leave out calls to get and set methods for properties or event handlers, unless you suspect the error is in a get or set method, the diagram is usually easier to read without these calls.
• Exclude calls to System namespace will leave out calls to any methods that are part of the System namespace, since most of the time the bugs are in our code, we often exclude these calls, though there are times when seeing System namespace calls can be helpful, for example when debugging localization issues or database connections.
• Exclude calls to Other namespaces allows you to explicitly list namespaces whose calls you want excluded from the diagram, this allows you to focus in on specific sections of code
• Add diagram to current project allows you to save the diagram in your project with a .sequencediagram extension

If I choose OK and generate the sequence diagram with the default values shown in Figure 2, Visual Studio generates the sequence diagram shown in Figure 3.

 

Figure 3 Default Sequence Diagram

You can see my event handler instantiates a new Student object, and then calls the Save method of the Student class which instantiates an instance of the StudentData class and calls the Add method. This is a very simple example, but shows how quickly you can outline method calls from the event handler. Generating a sequence diagram does not take very long so you can experiment with different settings to get the right level of information for your needs.

So once again, without using any external tools, we have the ability to generate documentation for our undocumented project! You already have Visual Studio, it is so much more than just a code editor! For just a quick sense of how much more it can do, just take a minute to look at the Visual Studio 2010 feature comparison chart. What features are you using? Testing? Database development? Version Control? Build Automation?

Today’s My 5 is related to documentation

5 ways to make your code more readable

1. Do not abbreviate variable names with autocomplete and intellisense features (especially the pascal case intellisense in Visual Studio 2010), you don’t need to keep your variable names 3 characters long anymore!
2. Do not call your variable “id” unless it is REALLY obvious what id is stored in that variable. The number of times I have had to read through code to figure out if id represented a StudentId, CourseId, CategoryId or ClassId, this is one of my pet peeves.
3. Start using LINQ to SQL building T-SQL statements by concatenating strings is really confusing to read and prone to syntax errors like missing spaces or commas, LINQ to SQL is easier to read and debug.
4. Use meaningful parameter names once again the intellisense is a great feature and it works for your methods as well as the built-in methods, so use meaningful parameter names so that anyone calling your method can easily figure out the expected parameter values.
5. Be consistent with casing are you going to use uppercase for constants? pascal casing vs camel casing for public variables. Be consistent and everyone will get immediately recognized the different types of variables from their names alone.

This blog is also posted on the Canadian Solution Developer blog

By The Way There Is No Documentation…

Have you ever been asked to make changes or fixes to someone else’s code? Do any of these scenarios sound familiar? A developer leaves the team and now you have to continue with their code. A consulting company develops an application and then your company decides to do the maintenance themselves to save money and now you have to maintain an application built by another team. An application developed years ago now needs updating with new functionality but all the people who originally worked on that application are now elsewhere in the company.

Yup, that’s life as a developer. To be honest I prefer to just build a new application from scratch then try to decipher someone else’s code and ad or fix their functionality. It is not because the other programmers haven’t produced good code, it’s just the extra hurdle of learning how someone else has built an application. To help with this we traditionally add comments to our code and we create documentation that explains the application. Then we starting running short on time, and the users ask for last minute changes that are have to be included. So we put off updating the documentation and focus on heads down coding to meet our deadlines. After the application goes live, there are changes and fixes to the application as well. We open tickets and create change requests and if you add comments or records to keep track of which modules were updated and why. But is the original application documentation kept up to date? All too frequently the answer is no.

So where does that leave a developer who inherits someone else’s code and needs to add an enhancement or bug fix. Well if you have Visual Studio Ultimate 2010, there is hope. When you open Visual Studio Ultimate you see a brand new menu option called Architecture. So when you open up that code in Visual Studio and you find yourself wondering how this application is designed, and you don’t want to spend hours opening up the different classes to see what is called where. Check it out!

Here’s how it works, you open up the Solution containing the code you need to update. You choose Architecture | Generate Dependency Graph | By Assembly.

Figure 1 Generating a Dependency Graph

This will generate a graph that shows you each of your assemblies and assemblies are dependant on each other. This by itself is very useful when you are trying to determine the risk and potential impact of making a change to a particular assembly. It will also help you estimate the effort that will be required to test a change to a particular assembly because you start to get a sense of where the dependencies lie.

 

Figure 2 Sample Dependency Graph By Assembly

As you can see in the dependency graph shown in Figure 2 the Registration project references the Courses assembly. So I know I need to retest parts of the Registration project if I make any changes to the code in the courses assembly.

If you want more information about the classes within the assemblies you can expand each assembly as shown in Figure 3

 

Figure 3 Expanded Assembly Dependency Graph

Unfortunately this view will not show you exactly which class within the assembly references the other classes. If you want that you need to generate a dependency graph by class. Choose Architecture | Generate Dependency Graph | By Class and you get a diagram that shows you each of your classes and the classes they reference in their code.

Figure 4 Class Dependency Graph

You can see in Figure 4, now we have an up to date view of all our classes and their dependencies. This can make it a lot easier to figure out where to find the code we need to update for a fix, or to determine the impact and effort that will be involved in a particular change.

So there you have it, there are other reverse engineering tools out there, but life is simpler if you don’t have to keep launching separate applications to do everything, so make the most out of the tool you have. Visual Studio Rocks!

Today’s My 5 –

5 ways to learn more about Visual Studio 2010 Ultimate

1. Download a free trial and play with it.
2. Read the product description (it does wayyyy more than just let you write code!)
3. Look at the Feature Comparison Chart so you can see what is available in each version of Visual Studio.
4. Check out a video on the Lab Management feature, a little known gem in Visual Studio Ultimate.
5. Check out Modelling projects, UML right in Visual Studio!

And please share your own documentation success or horror stories from your life as a developer on LinkedIn or by commenting on this blog! I am sure I am not the only one to inherit code with out of date or non existent documentation

This blog is also available on the Solution Developer Blog