Three layers of the Web

Inspired by Simply Javascript, it is true that the Web has 3 layers: Content (HTML), Presentation (CSS) and Behavior (Javascript) which are very similar to MVC we often do in web application.

Figure 1: Three Layers of the Web

Web designers realized that the code they write when putting together a web page does three fundamental things:

    * It describes the content of the page. (HTML)
    * It specifies the presentation of that content. (CSS)
    * It controls the behavior of that content. (Javascript)

They also realized that keeping these three types of code separate, as depicted in "Separation of concerns", When building a site, we work through these layers from the bottom up:

   1. We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.

   2. With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.

   3. Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.

The key to accommodating the broadest possible range of visitors to your site is to think of the Web in terms of three layers, which conveniently correspond to the three kinds of code I mentioned earlier. These layers are illustrated in Figure 1, “The three layers of the Web."

Due to the popularity of Web 2.0, there are many books about HTML/CSS/Javascript, and there are also many javascript frameworks to affiliate the development of the Web. In "Simply Javascript", it provides javascript explations and examples using a few Javascript frameworks:

    * Prototype
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

    * script.aculo.us
A collection of Web 2.0 style JavaScript libraries that help web developers to easily add visual and ajax effects to projects. Requires Prototype.

    * Yahoo! User Interface Library (YUI)
The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

    * Dojo
Unbeatable JavaScript Tools

    * jQuery
A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

    * MooTools
Mootools, a super lightweight web2.0 javascript framework.