Web 2.0 Effects and Rich Client Applications
There are many technologies on the market that are geared toward improving your user's web experience. Numerous companies that have made the Internet an essential part of their business model utilize such technologies to increase their user base and retain customers. For example, YouTube, Amazon and Yahoo all recently introduced Macromedia Flash, in the form of widgets with dynamic content, on their main web properties to improve their users' experience. Another name for the Web effects is Rich Client Application. The idea behind rich client applications is putting more logic on the client site to increase interactivity without reducing the application's responsiveness.
This article will discuss the various new web effects that appeared with the wave of the Web 2.0 movement. I will show how to implement some of them in your project, and because these effects are based on existing standards, they are safe to use in both enterprise and personal sites. Many modern AJAX frameworks have large modules specifically dedicated to the Web effects that may or may not even use AJAX. The Web 2.0 effects not only look "cool," but are also very functional and represent the next step in the evolution of the Web UI.
Evolution of the Web UI
Since the early days of the static web, developers were constantly improving user interaction with the web sites. One of the early examples are MIDI music files that loaded in the background to entertain (or annoy) web users with their monotonic rhythms. Another example is animated GIFs or images composed of several frames that loop in the browser, creating an illusion of a movie. Still used on some sites, animated GIFs are gradually replaced by modern technologies such as Video plug-ins (Quicktime, DivX, WMA) and Flash.
The Internet dot com bubble of the late 90s laid the foundation for many of the modern Web IU technologies, and the explosion of eCommerce sites gave rise to the dynamic web. Static content was intertwined with server generated sections, and the new web effects proliferated. Many of these effects—such as mouse rollover, image maps, or drop-down navigation menus—were greatly improved in the current Web 2.0 sites. Many web effects are evolutionally improvements to the desktop application's effects, such as drag-and-drop or transparency, but many also represent an advance in the user computer interaction in general, because they were invented in the web medium and are not applicable to the desktop applications, such as Google Maps draggable image area.
Web 2.0 Effects, Technologies, and Frameworks
So what are the Web 2.0 effects? Why are they a hot topic? And why does the bloggosphere literally light up when someone introduces a new effect? The Web 2.0 effects are a unique way to represent user interaction with the site and its underlining data. Some effects accommodate navigation, save web page real estate, show data in a distinctive way, or are a combination of several action steps. For instance, the Google "Suggest" feature pre-fetches popular queries as the user types them, making the user type less and the search simpler. The Dell and Amazon sites have small links that open dynamic "div" dialogs (without leaving the page), to save web real estate and give users a richer experience (Dell has one for the shopping cart and one for the site login; Amazon has one for the Wish list).
Case Study: Glass Shadow Effect
The "glass shadow" (or "smoked glass") effect has been introduced on several popular sites such as Yahoo, Kayak.com, and DealOgre.com. The idea behind this effect is to show some information to the user while making the rest of the page inaccessible. There are many variations of this effect, but all the implementations have some dialog appearing (with a message), and the rest of the page blurred and/or darkened behind it.
The page layer is "covered" with another "filler" layer that is usually transparent, and obstructs the user's interaction with the underling page. The Dialog layer is on top of the "filler" layer and may or may not be draggable, resizable, and so forth.