Web Development in HTML5 using Visual Studio 2010.

HTML5 is the new buzz all around. And because I use day-in , day-out Visual Studio 2010 for developing Silverlight and WPF applications, I gave a try whether HTML 5 websites be created in Visual Studio 2010.

And the answer is Yes 🙂

This blog is dedicated to understand how Visual Studio 2010 helps to create HTML5 Websites.

Creating Project Templates in Visual Studio 2010.

Steps to follow :

Create an empty ASP.NET Website .

NewWebSite

Create a folder structure .Place the files in folder.

FolderStructure

 

Select File – > Export Template -> Project Template

ExportTemplate

TemplateDescription

Fill the details

  • Template Name
  • What the template does
  • Set the icon image ( .ico file)(optional)

There you go!!! You have template ready to add HTML5 websites to the solution with a readymade structure

HTML 5 WebSite

Creating Item Templates for HTML 5 in Visual Studio 2010.

Every time when we add HTML pages to the folder, we get a default structure for the HTML page. Now if we wish to have customized HTML 5 page with a structure, it would be great if we have option to ADD NEW ITEM and we have the HTML 5 page structure ready in place.

Steps to follow:

Create desired structure for your HTML 5 page in the website. Following is the structure for the web page.

<!DOCTYPE html5>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <header> HEADER </header>
    <nav>
        <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="ContactUs.html">Contact Us</a></li>
            <li><a href="About.html">About Us</a></li>
        </ul>
    </nav>
    <footer> FOOTER </footer>
</body>
</html>

Select File – > Export Template – > Item Template . Refer above image for same step.

Select the file where the structure is created.

ItemExportTemplate

You come across the window which allows the references to be added. But for HTML 5 sites there are no references required at least for simple site. So click Next without checking the checkboxes.

SelectItemReferences

Fill the details as shown in next window.

  • Template Name
  • What the template does
  • Set the icon image ( .ico file) (optional)

SetTheItemDescription

 

There you go!!! You have template ready to add HTML5 pages to the project with your structure code.

HTML5Template

Visual Studio 2010 Beta2 new features.

Visual Studio 2010(Beta2) is an (IDE)Integrated Development Environment with new features  targeted for everyone involved in Application LifeCyle Management.
The concerns are separate but well integrated for Architects,Developers,Testers and Database Managers.
Here are some of the  new features listed in Visual Studio 2010. 

Architecture Diagrams
VS2010 has got a new template called as Modelling Project where Architecture Diagrams  like UML 2.x diagrams,Layer diagram etc…. can be kept together. 
Diagram types Img2

Img3 Img4

Call Hierarchy Window

Consider your application to have many functions. To know the hierarchical relationship between two or more functions you will first “Go to definition” of a function and  then do “Find all references” for other functions which it is calling and vice versa.
VS2010 has a new Call Hierarchy Window. Right clicking on a function will give you a view of who made calls to it and which other functions is this particular function calling.
Img1

Sequence Diagram
You can also generate a  sequence diagram from  code written by right clicking  a particular function.
Img_Sequence

Dependency Graph.
This is excellent. As a developer you surely come across this error “ Cannot find the required assembly file or dll ……….”. Wouldn’t it be nice to get a visual of the assemblies and the namespaces that your project is referring to .
VS2010 generates an excellent dependency graph and  you can easily track which namespaces,assemblies ,functions ,types and external references are there for your project .
Img1

Test Impact View
In unit testing you might want to know what is the impact of test methods on a particular function.
Right Clicking the function and selecting “Show Calling Tests”  shows a Test Impact Window. 

Img1Img2 Img3

Performance Wizard
There is no point in creating a project which is eating your CPU cycles. You might also want to  check the amount of memory utilized by your objects. 
Multithreading applications do have concurrent execution of threads.
To get solution to above issues VS2010 has a new addition called “Launch Performance Wizard”.
This wizard after selecting the appropriate option will profile your code by collecting samples as your application is running. Once the application exits or selecting “Stop profiling ”option,  a report will be generated which gives you the performance related metrics for your application.
Code that I wrote surely was not CPU intensive,so just profiled  it for some seconds.But report is really self explanatory.
Img4 

Silverlight and WPF applications.
This is what I was waiting for… Dragging  and dropping controls from toolbox  for Silverlight and WPF applications is now possible in VS2010.
StaticResources likes styles,datasources can be easily bound to the controls in the properties panel..
I guess this should be my next blog topic..

So go ahead and explore Visual Studio 2010.
You can download an iso image or run the web bootstrapper(which I did) from MSDN site.
http://msdn.microsoft.com/en-us/vstudio/dd582936.aspx