Monday, December 26, 2011

Mobile & Global with HTML5, MVC & Windows Azure, Step 2: Web Project

In this series of posts we’re progressively demonstrating a mobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at

Here in Step 2 of 7 we’re going to focus on taking design assets and creating a web project, using open standards on the web client and the Microsoft web platform on the web server. In this step we will:

• Create a web project from a template.
• Import the designer assets into the web template.
• Be able to run the site from Visual Studio.
HTML5/MVC Web Project Template
In Step 1 we were fortunate to be working with a progressive design outfitted with good designer tools, and so the web developer receives designer assets already in the form of HTML5, CSS, JavaScript, and media files. They’ve already been coded for responsive web design that will adapt to desktop, tablet, or phone size screens.

It’s now the web developer’s job to take these assets and put them into a web project. In this scenario we’ll use a Visual Studio template for our project we use at Neudesic that combines open standards on the web client with the Microsoft web platform on the server side. Specifically, on the front end we’ll be using HTML5, CSS3, JavaScript, and the popular libraries Modernizr and jQuery. On the back end we’ll be using Windows Server, IIS, ASP.NET, MVC3, and the Knockout.js library.

Importing the Designer Assets into the Web Project
It’s not difficult to move the designer assets into this project format, but it does require being careful and paying attention to detail. Here are some of the things that need to be done in order to move the assets into the web project:

• CSS files need to be moved from the includes folder to the project’s CSS folder.
• Script files need to be moved from the includes folder to the project’s scripts folder.
• Image files need to be moved from the images folder to the project’s images folder.

• The index.html and map.html markup need to be turned into Home and Map MVC views.
Of all of the above, it’s converting the HTML pages into views that is the most work. Our template wants well-separated sections, so we must surgically move sections of the original HTML markup into the view pages.

When we’re done, we have fitted our design assets into a well-factored MVC3 project organization:

Result: A Web Project for Developing the Application
The final result of all this is a project we can run out of Visual Studio with F5. It doesn’t look or act any differently from the designer assets produced in Step 1, but we now have a web project and server back end in place. This gives us the foundation to turn this site into a real application.


In Step 2 we created a web project from design assets, with open standards on the web client and the Microsoft web platform on the server. Our site now has the following functionality:
• Embodies responsive web design and runs on desktops, tablets, and phones.
• Uses HTML5 and open standards on the web client
• Uses the Microsoft web platform on the web server.
In the next step, we'll bring the application to life by implementing dynamic content.

No comments: