1A. ASP.

NET Web forms
ASP.NET Web Forms is a part of the ASP.NET web application framework. It is one of the three different programming models you can use to create ASP.NET web applications, the others being ASP.NET MVC and ASP.NET Web Pages.1 Web Forms are pages that your users request through their browser and that form the user interface (UI) that give your web applications their look and feel. These pages are written using a combination of HTML, server controls, and server code. When users request a page, it is compiled and executed on the server, and then it generates the HTML markup that the browser can render2. Using Visual Studio, you can create ASP.NET Web Forms using a powerful IDE. For example, this lets you drag and drop server controls to lay out your Web Forms page. You can then easily set properties, methods, and events for controls or for the page in order to define the page's behavior, look and feel, and so on. To write server code to handle the logic for the page, you can use a .NET language like Visual Basic or C#3.

ASP.NET Web Forms offer:
   

Separation of HTML and other UI code from application logic. A rich suite of server controls for common tasks, including data access. Powerful data binding, with great tool support. Support for using Ajax, even if you don't know JavaScript.

A new version of ASP.NET web forms is out. It is called the ASP.NET 4 WEBFORMS. ASP.NET 4 Web Forms is part of the .NET 4 framework, which is included with Visual Studio 2010. To download ASP.NET 4 and Visual Studio 2010, visit (http://www.asp.net/downloads/) page. The ASP.NET 4 Webforms coms with the following functionalities:
Easy to start, develop, and deploy With new project templates, smaller configuration, improved IntelliSense, and enhanced snippets in Visual Studio 2010 — along with ASP.NET 4 Web Forms improvements — you can now create and build Web applications easier than ever. Visual Studio 2010 makes deployment simple by allowing you to transfer all your files and code, make configuration changes, and more.  Cleaner HTML ASP.NET 4 Web Forms gives you more control over the markup generated by server controls, which helps you create standards-compliant web pages. For example, you can more easily use CSS, generate semantically correct markup, and handle the IDs created for HTML elements.  Optimize URLs for search engines Using URL routing in ASP.NET 4, you can develop and manage human-readable, SEO-friendly URLs. New features in ASP.NET 4 Web Forms also let you create cleaner HTML that can help optimize your pages for search engines.  More productive and extensible Enable dynamic data in your existing web applications and take advantage of automatic generation of the validation UI. And with the new QueryExtender control, you can easily incorporate filtering functionality and create custom filters and other custom entity templates.
1 2

ASP.NET http://www.asp.net/web-forms/what-is-web-forms Ibid 3 Ibid

1B . ASP.NET MVC
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller4. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication5. The Diagram below shows the MVC framework with components

Figure1: Invoking a controller action that expects a parameter value6
 Models: Model objects are the parts of the application that implement the logic for the application s data domain. Often, model objects retrieve and store model state in a database. For example, a Product object might retrieve information from a database, operate on it, and then write updated information back to a Products table in SQL Server.  Views: are the components that display the application s user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Products object.  Controllers: are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string 7 values, and passes these values to the model, which in turn queries the database by using the values. The MVC pattern helps you create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. The pattern specifies where each kind of logic should be located in the application. The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model. This separation helps you manage complexity when you build an application, because it enables you to focus on one aspect of the implementation at a time. For example, you can focus on the view without depending on the business logic.

The ASP.NET MVC framework provides the following features: The ASP.NET MVC framework provides the following features:  Separation of application tasks (input logic, business logic, and UI logic), testability, and testdriven development (TDD) by default. All core contracts in the MVC framework are interface-based and can be tested by using mock objects, which are simulated objects that imitate the behavior of actual objects in the application. You can unit-test the application without having to run the controllers in an ASP.NET process, which makes unit testing fast and flexible.
4 5

ASP.NET http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview Ibid 6 ibid 7 ibid

An extensible and pluggable framework. The components of the ASP.NET MVC framework are designed so that they can be easily replaced or customized. You can plug in your own view engine, URL routing policy, action-method parameter serialization, and other components.  A powerful URL-mapping component that lets you build applications that have comprehensible and searchable URLs. URLs do not have to include file-name extensions, and are designed to support URL naming patterns that work well for search engine optimization (SEO) and representational state transfer (REST) addressing.  Support for using the markup in existing ASP.NET page (.aspx files), user control (.ascx files), and master page (.master files) markup files as view templates.  Support for existing ASP.NET features. ASP.NET MVC lets you use features such as forms authentication and Windows authentication, URL authorization, membership and roles, output and data caching, session and profile state management, health monitoring, the configuration system, and the provider architecture.

2. Difference between ASP.NET webforms and MVC
WEBFORMS Advantages of web forms based web application  It supports an event model that preserves state over HTTP, which benefits line-of-business Web application development. The Web Forms-based application provides dozens of events that are supported in hundreds of server controls.  It uses a Page Controller pattern that adds functionality to individual pages.  It uses view state or server-based forms, which can make managing state information easier.  It works well for small teams of Web developers and designers who want to take advantage of the large number of components available for rapid application development.  In general, it is less complex for application development, because the components (the Page class, controls, and so on) are tightly integrated and usually require less code than the MVC model. 8 ASP.NET MVC Advantages of ASP.NET MVC based web application  It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.  It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behaviour of an application.  It uses a Front Controller pattern that processes Web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure.  It provides better support for test-driven development (TDD).  It works well for Web applications that are supported by large teams of developers and Web designers who need a high degree of control over the application behaviour.9

8

IBID

3A. Knouckoutjs.com (Explore and check tutorials (learn.knockoutjs.com))
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically for example changing depending on the user’s actions or when an external data source changes. Features:

Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.  Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct complex dynamic UIs easily using arbitrarily nested binding contexts.  Trivially extensible - implement custom behaviours as new declarative bindings for easy reuse in just a few lines of code. Benefits:
 

Pure JavaScript library - works with any server or client-side technology Can be added on top of your existing web application without requiring major architectural changes  Compact - around 13kb after gzipping  Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)  Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms EXAMPLE 1. VIEW HTML <!-- This is a *view* - HTML markup that defines the appearance of your UI --> <p>First name: <strong data-bind="text: firstname"> Ahmad </strong></p> <p>Last name: <strong data-bind="text: lastname"> Waziri</strong></p> 2. View Model Javascript // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.firstName = "Ahmad"; this.lastName = "Waziri";} // Activates knockout.js ko.applyBindings(new AppViewModel());10

9

10

Ibid KnockoutJS http://learn.knockoutjs.com/

3b. Explain MVVM
The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the presentation model design pattern introduced by Martin Fowler11. Largely based on the model–view–controller pattern (MVC), MVVM is targeted at modern UI development platforms which support Event-driven programming12, such as HTML5, Windows Presentation Foundation (WPF), Silverlight and the ZK framework13. MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model). The view model of MVVM is a value converter meaning that the view model is responsible for exposing the data objects from the model in such a way that those objects are easily managed and consumed14. Sample application of MVVM pattern can be downloaded at codeproject website http://www.codeproject.com/KB/WPF/MVVMMadeSimple/SIMPLE_MVVM_SOURCE.zip

4a. Extjs.com/sencha.com
Sencha GXT uses the Google Web Toolkit (GWT) compiler that allows you to write your applications in Java and compile your code into highly optimized cross-browser HTML5 and JavaScript. Sencha GXT gives you high-performance widgets, feature-rich templates, advanced charting, and much more.15 Sencha GXT is the fastest, most powerful way to create rich web-based applications using Java. Sencha GXT uses the Google Web Toolkit (GWT) compiler that allows you to write your applications in Java and compile your code into highly optimized cross-browser HTML5 and JavaScript. Sencha GXT takes GWT to the next level, giving you high-performance widgets, feature-rich templates and layouts, advanced charting, data loaders and stores, and much more. Sencha GXT provides a comprehensive library of high-performance data widgets that are fully themed and customizable. These include data trees and tree grids, lists, forms, menus, toolbars, panels, and windows. And even if it's not in the core library, you're almost certain to find it in the hundreds of user extensions from our Sencha GXT community. It is currently the only enterprise class UI framework for building amazing HTML5 web apps using Java. Sencha GXT high performance UI widgets coupled with GXT's full interoperability with Google Web Toolkit components accelerate your web apps development process to increase your productivity.

11 12

The presentation Model Design pattern (http://martinfowler.com/eaaDev/PresentationModel.html) Rafael Weinstein. "Google mdv" 13 Steve Sanderson. "KnockoutJS" 14 Google groups. "Thought: MVVM eliminates 99% of the need for ValueConverters" 15 Sencha.com

5A. Explain HTML5: HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software16. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997)17 and, as of September 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML 5B. Explain HTML4 In addition to the text, multimedia, and hyperlink features of the previous versions of HTML, HTML 4.0 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. HTML 4.0 also takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide. Introduced in December 1997, HTML 4.0] was published as a W3C Recommendation18. It offers three variations:    Strict, in which deprecated elements are forbidden, Transitional, in which deprecated elements are allowed, Frameset, in which mostly only frame related elements are allowed;

Initially code-named "Cougar", HTML 4.0 adopted many browser-specific element types and attributes, but at the same time sought to phase out Netscape's visual mark-up features by marking them as deprecated in favour of style sheets. HTML 4 is an SGML application conforming to ISO8879–SGML

5C. Difference between HTML5 and HTML4:  Multimedia Features: With HTML 4, developers had to use third-party software, such as Adobe Flash, to incorporate audio and video files into HTML pages. In HTML 5, developers can directly add audio and video files using the new video specifications without the need of any third-party software. Content Description: HTML 4 is limited in describing data. Streaming audio and video and rich internet applications cannot be accurately described using HTML 4. HTML 5 gives developers a precise way of describing the structure of data, resulting in more semantic markup and precise ways of traversing data, for either databases or Web applications.

16

http://dev.w3.org/html5/spec/introduction.html#introduction http://www.w3.org/TR/2011/WD-html5-diff-20110405/ HTML4 Specification http://www.w3.org/TR/REC-html40-971218/

17

18

Web Form Handling: HTML 4 developers were required to use scripting to validate required fields. They either had to use pre-made scripts or write their own validation code. In HTML 5, additional elements, such as "required" and "email" attributes, automatically check for the valid user name and email format without the need for any additional validation script. The code below shows how to use HTML 5 to accomplish this: <form> <label> My Form</label> <input name= "HTML 5" required type= "type"/> <label>HTML@gmail.com required email type= "text" /> <input name= "submit' type= "submit" value= "submit" /> </form> User Interaction: With HTML4, implementing constantly changing data, for example a database-driven pie-chart, was not possible. HTML 5 comes with the "<canvas>" element that applies constantly changing data to a Web page and allows users to interact with it. For example, users can click on different sections of a pie-chart or edit certain parts of a Web page using these new interactive features.