Browse > Home / Web-Dev-Design / Web 2.0 - What is it all about?

Web 2.0 - What is it all about?

August 6, 2006

by Roger Riche

There has been a new term thrown around the internet describing the next phase in website development and design. Web 2.0. But what exactly defines a Web 2.0 website? In this article, I will attempt to cover what aspects of design and development would be considered as this second generation of websites.

“The term Web 2.0 refers to a second generation of services available on the World Wide Web that lets people collaborate and share information online. In contrast to the first generation, Web 2.0 gives users an experience closer to desktop applications than the traditional static Web pages. Web 2.0 applications often use a combination of techniques devised in the late 1990s, including public web service APIs (dating from 1998), Ajax (1998), and web syndication (1997). They often allow for mass publishing (web-based social software). ” - Source: Wikipedia

Basically, Web 2.0 websites are simplistic and concise in design and more concentrated on functionality and user experience. Emily Chang, award-winning web and interaction designer, has built a fantastic portal for websites built on Web 2.0 ideals. Check out Emily Chang’s eHub to get a better idea of what the industry would consider a Web 2.0 Application or website.

Pre-made Javascript effects libraries have made building Web 2.0 applications and websites less of a chore. Below, we will show you where to find well-known web 2.0 libraries to apply effects and functionality to your website.

Javascript Effects Libraries - Web 2.0

So now that we have a basic understanding of what a Web 2.0 website or web application is, let’s have a look at the tools that developers use.

Prototype
Prototype is the javascript base code that many effects libraries have been written on. The Prototype framework is intended to simplify development for dynamic web applications. Basically, it reduces many of the repetitive javascript code pieces that you would commonly use for creating dynamic effects and other javascript-based applications.

» Download Prototype
Scriptaculous
The Scriptaculous Javascript Library is the most widely used and distributed of the web 2.0 effects libraries. It contains many cool features and effects such as dragging and dropping, grow/shrink, animate position, highlighting and much more.

» Check out Scriptaculous

Rico
Rico is another very popular web 2.0 effects library. It’s an open-source javascript library providing full ajax support, drag and drop management, cinematic effects and more.

» Get Rico

There are other effects libraries out there, but most of them do nothing beyond what is available in Scriptaculous or Rico. However, once you become familiar with the Prototype library you will find that it may not be that difficult for you to write your own effects library!

Now let’s step onto the next section to see an example of how we can use the libraries to create a cool effect on your website.

Web 2.0 Effect Example — A Growing, Fade-in BoxLet’s get into a hands-on example. Create a new folder called growbox anywhere on your computer. Now create a new blank HTML file called index.html in this folder.

Assuming you have already downloaded the Scriptaculous library, extract the contents of your library into this folder. Your folder contents should now look something like this:

  • scriptaculous-js-1.6.1 (folder)
    • lib (folder)
    • src (folder)
    • test (folder)
    • CHANGELOG (file)
    • MIT-LICENSE (file)
    • README (file)
  • index.html (file)

The HTML
Paste the following code into the index.html file you created:

Basically, the custom function called fadeBox utitlizes the ‘Appear’ effect from the Scriptaculous library. Check out the working example to see this effect in action.

Roger Riche writes for BraveNet.com, a great repository for a ‘Glut’ of web tools. Get free web services & tools, click here. Everything you’ll ever need to build the perfect website!

Written by James Opiko · Filed Under Web-Dev-Design 

Comments

Got something to say?

You must be logged in to post a comment.