http://www.developer.com/

Back to article

Web 2.0 Effects and Rich Client Applications


October 15, 2007

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.

Here is one example of setting a style for the DIV and the overlaying popup dialog. Notice that the z-index property (in green) of the "filler" DIV is smaller then z-index of the dialog, but both are higher then the page (which is 0 by default). Also, notice that the "filler" DIV is set to be transparent with the alpha channel opacity; the same effect can be reliably achieved by setting a transparent image as a background for the "filler" DIV.

<style>
.shade{
   background-color black;
   position:absolute;
   top: 0px;
   left: 0px;
   width:100%;
   height:100%;
   filter:alpha(opacity=25);
   -moz-opacity:.25;
   opacity:.25;
   z-index:5;
   padding: 0px;
   margin: 0px;
}
.popup{
   background-color:#EEEEEE;
   position:absolute;
   top: 200px;
   left: 200px;
   width:200;
   height:100;
   border:1px solid black;
   padding:5px;
   z-index:10;
   text-align:center;
}
</style>

<body>
<textarea rows="5">Type here if you can...</textarea><br>
<!–Visible Shadow Glass element that will cover the whole page –>
<div class="shade" id="smokeglass"
     style="visibility:hidden"></div>

<!– Sample PopUp Dialog box –>
<div class="popup" id="box"
style="visibility:hidden">

</body>

If the browser window is resized, the "filler" DIV also needs to be resized accordingly.

Here is a JavaScript function to calculate visible view-port dimensions:

And here is the call back function assigned to the window.onresize event.

function calcSize() {
   var myWidth = 0, myHeight = 0;
   if( typeof( window.innerWidth ) == 'number' ) {
   //Non-IE
   myWidth = window.innerWidth;
   myHeight = window.innerHeight;
   } else if( document.documentElement &&
      ( document.documentElement.clientWidth ||
        document.documentElement.clientHeight ) ) {
   //IE 6+ in 'standards compliant mode'
   myWidth = document.documentElement.clientWidth;
   myHeight = document.documentElement.clientHeight;
   } else if( document.body && ( document.body.clientWidth ||
              document.body.clientHeight ) ) {
   //IE 4 compatible
   myWidth = document.body.clientWidth;
   myHeight = document.body.clientHeight;
   }
   return [myWidth, myHeight];
}

window.onresize=function captureResize(){
   document.getElementById("smokeglass").style.width =
      calcSize()[0];
   document.getElementById("smokeglass").style.height =
      calcSize()[1];
   };

So, when all of these pieces come together, the result will look something like this:

Or this:

Conclusion

In this article, I have covered the evolution of the Web UI effects and effect technologies. I have described what Web 2.0 effects are, which toolkits help with their creation, and how they are used on the popular sites. So far, the evolution of the Web UI has been a slow process, with periods of acceleration brought upon by the new technologies such as AJAX or Flash. It will be interesting to see how the Web UI evolves in the future and what our interaction with the computers will be like five or ten years from now.

References

About the Author

Vlad Kofman is working on enterprise-scale projects for major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.

Sitemap | Contact Us

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