Craig Grannell reveals quick, efficient ways to add interactive components to websites.
From a user standpoint, Web 2.0 is about community and networks. It’s MySpace and Facebook, Flickr and YouTube – a feast of opportunities for sharing, and for taking streams of data and rearranging them, via user-friendly and flexible online tools. There’s a design ethic of sorts – bright colours, reflections, far too many gradients – but the core foundation of Web 2.0 is technology.
A free-for-all attitude to coding has always existed online but, while sharing code and ideas is admirable, code can be complex: unless you have a strong understanding of the relevant technology it’s hard to understand. But new developments are changing this and taking the pain out of development. Several free and open-source tools are available to designers, enabling complex, animated effects and slick presentation to be integrated just by adding a few lines of code.
Web 2.0 frameworks
Web 2.0 frameworks are code libraries that encompass various technologies, such as Ajax, and are both based around and work in tandem with existing web standards. The advantage to the casual developer who just wants to get something that works is that they hide the more gruelling and complex aspects of development, such as dealing with browser quirks and compatibility issues, allowing you to concentrate on the job at hand. To use an analogy, if JavaScript, XML, HTML and CSS are a big bag of nails and some wood, frameworks are flat-pack furniture; not the final item, but creating the end result is easier than building it from scratch.
Ajax (Asynchronous JavaScript And XML) is the core of several popular frameworks. Based on existing web standards (primarily JavaScript and XML, but also CSS and HTML), it differs from Web 1.0 technologies in one very important way. With traditional JavaScript, the user sends information to the server (via, for example, a form’s Submit button), the server responds and a new page is loaded, or the existing page is reloaded. With Ajax, scripts can communicate directly with a server, using the JavaScript XMLHttpRequest object, sending and receiving data without the page reloading. Ultimately, we’re talking dynamic content here – pieces of data can be brought in as needed in the background, thereby making the user experience richer and friendlier than Web 1.0 sites.
The script.aculo.us framework (http://script.aculo.us) is a set of JavaScript libraries that enables web designers and developers to easily add Ajax features to web pages. Based around the Prototype framework, script.aculo.us is mainly focused on visual effects, user interface controls and the dynamic creation of Document Object Model (DOM) objects (see What is the DOM?, opposite).
The scope within script.aculo.us is massive, but we’ve created several examples here that provide an insight into how the library can improve a site’s visual design and features. To work through them, you’ll need an understanding of HTML and CSS. We’ll also use a little JavaScript, but it should be pretty much self-explanatory. To get script.aculo.us up and running, see the walkthrough on p67.