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• Import the designer assets into the web template.
• Be able to run the site from Visual Studio.
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.• 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.
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.
Summary
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:
Post a Comment