Web Design Magazine | News, Tips, Blogs, Articles & Insights

10 Practical Prototype Extensions for Designers & Developers

Written by Pete Prestipino | Jan 29, 2009 6:00:00 AM

You might have noticed that Website Magazine routinely features interesting jQuery plugins. There are options to jQuery however that Web designers and developers should seriously consider and one of those powerful alternatives is the Prototype Javascript framework.

The Prototype JavaScript Framework provides an Ajax framework (and other utilities) implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone (prototypejs.org), but also as part of larger projects such as Ruby on Rails, script.aculo.us and Rico. Prototype provides various functions for developing JavaScript applications and features range from programming shortcuts to major functions for dealing with XMLHttpRequest.

Let's look at several interesting Prototype extensions for designers and developers.

3D Image Reflection: This handy script can help to add another dimension to images. Designers and developers can create a (3d) image reflection using Prototype and Scriptaculous.

Fisheye: The Fisheye control allows developers to present icons (vertical or horizontal) which react to the user's mouse - similar to the Mac OSX "Dock" effect. This component adds a professional degree of interactivity that improves usability.

Phototype: Supporting various kinds of image manipulations, designers can rotate, resize, flip and do some other cool effects to images.

Proto Check: This extension enables developers to improve check boxes and radio buttons visually by replacing the controls with images. Proto Check also supports mouse and keyboard selection, as well as normal, read only and disabled controls.

Gplottr: A Javascript object which provides a simple interface to plot markers onto Google Maps using a simple XML file. The interface allows the user to write a few of lines of Javascript to provide this cross-browser functionality.

CoolTips: CoolTips is used to replace conventional web-browser tooltips. The tooltips get contents of title attribute, so they're fully unobtrusive.

LivePipe: LivePipe user interface components are a suite of widgets and controls for Web 2.0 applications built using the Prototype JavaScript Framework.

Starbox: Starbox allows you to create all kinds of rating boxes easily using just one PNG image. For some extra effects you can add Scriptaculous as well.

Plotr: Plotr is a charting framework for Prototype. It is based around PlotKit. This enabled developers to use Canvas or SVG elements for rendering bar, line and pie charts. The result is a lightweight charting framework (12kb!) named Plotr.

Carousel: A highly configurable extension for Prototype with various options and parameters, similar in functionality to that of a normal carousel. It can be used in various forms of navigation (maps, image galleries, etc.).

Marquee: Allows for the display of a series of messages on a web page inside of a specified container. It supports any number of messages and can be configured with multiple options.