Web 2.0 - almost everyone have heard the term - but few are sure about its meaning. Unfortunately, it cannot be defined easily. People in different fields have their own unique definitions for the term. In this article, I will attempt to define the term at three different level - the Philosophy, the Technology and the Design.

Disclaimer: Before anyone reacts violently to the term Web 2.0, let me make myself very clear…
Web 2.0 is an ambiguous buzz word. It has been used and abused so many times that it does not have a consistent meaning - so people are free to interpret it as they see fit. And this is how I interpret it.

Philosophy

The design philosophy of a web site can make it a Web 2.0 site. This is perhaps the key difference between a Web 1.0 site and a Web 2.0 site…

Web 1.0 is a web site where there is a one way communication between the web master to the visitor. A Web 2.0 site is a site where the visitors can communicate with each other.

For example, compare the Encyclopedia Britannica to Wikipedia. In Encyclopedia Britannica, the web master creates the content and gives it to the visitor - the visitor has no way of talking back. But in Wikipedia, the visitor create the content for other visitors.

Technology

The keyword here is “Internet as a platform”. In Web 2.0, the net became the platform rather than just a data transfer mechanism. For a simple example, when you visit a site, the videos in it come from YouTube, the images from Flickr, the search is done using Google API and you can bookmark pages using the API from del.icio.us.

Some technologies that are described as Web 2.0…

• Ajax
• Valid Markup
• Microformats
• Tagging, Tag Clouds
• APIs
• Feeds
• Mashups

Some features that makes a technology Web 2.0…

Speed

For example, Ajax makes simple tasks much faster.

Ease of Use

A good example of this is Tagging. It is a much easier approach when compared to hierarchies.

Enabling Mashups

APIs, Feeds, etc. makes this possible.

Bringing Web Apps closer to the Desktop

Ajax, AIR, etc.

Design

This is perhaps the only area where the term Web 2.0 can be defined with a reasonable level of accuracy. A site with a Web 2.0 design is one that has at least some of these elements…

Simple Design

Lots of white space

Nice Icons

Violators/Badges/Star Flashes

Big Fonts

Gradients

Reflections

Shadows

And More…

Web 2.0 Design Style Guide

For More Information

• Web 2.0 Wikipedia
• Web 2.0
• What Is Web 2.0
• Not 2.0?
• Web 2.0 Design Style Guide

In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

<link href="css/style.css” rel=”stylesheet” type=”text/css” />
<link href=”images/themes/crystal/theme.css” rel=”stylesheet” type=”text/css” />
<!–[if IE]>
<link rel=”stylesheet” href=”css/style_ie.css” type=”text/css” media=”all” />
<![endif]–>

PHP Code

Very little PHP is involved to creating this system - I depend on it just to change the path of the CSS Stylesheet. The code used is…

<link href="images/themes/<?=$theme?>/theme.css" rel="stylesheet" type="text/css" />

The $theme variable will change if the user changes the theme.

Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned a simple trick that made using icons with CSS much easier.

Go to Nexty to see the icons

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit’(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

<a class="icon edit" href="edit.php?project=6">Rename<a>

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

<a class="with-icon tasks" href="tasks/new.php">Create New Task...</a>

CSS Code

.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus - Sections, Projects and Contexts are created using this technique.

XHTML code

<ul class="menu-with-icon projects">
<li>...</li>
<li>...</li>
</ul>

CSS Code

.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels - if you are using icons with a different size, you will have to change the amount accordingly.