January 17, 2021
Hot Topics:

Web 2.0 Effects and Rich Client Applications

  • By Vlad Kofman
  • Send Email »
  • More Articles »

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).

The web effects on the social networking sites heavily rely on AJAX use to accomplish many interactions with the site without making users leave the page, and without lengthy page refreshes. Data is fetched asynchronously via Ajax from the server and manipulated with DHTML and JavaScript on the client side. Rich Client Applications also use Macromedia Flash (and its cousin Flex) to create highly interactive application, replacing part or entire web page with the dynamic app. For example, Fidelity Labs uses heavy Flash to achieve RCA.

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.

This is a rather impressive effect that immediately draws the user's attention to the dialog and forces him to interact with it. To achieve this effect, several technologies and toolkits can be used, but I will concentrate on the JavaScript and DHTML solution. The idea is the separation of the current page UI into several layers, with the dialog being the closest on the Z axis and the page content layer is the furthest.

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.

To achieve this effect using JavaScript and DHTML, the transparent layer needs to be created with the DIV element. The "filler" DIV size is set to the visible view-port of the browser window; the JavaScript logic and its background are set with the CSS.

Page 1 of 2

This article was originally published on October 15, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date