Let’s suppose I want to have a “Weighted Pipeline” Dashlet which shows the weighted pipeline for all users in one chart.

STEP 1

Create directories (if not already present)

./custom/modules/Charts

./custom/modules/Charts/Dashlets

./custom/modules/Home

./custom/modules/Home/language

STEP 2

Copy the whole directory

./modules/Charts/Dashlets/MyPipelineBySalesStageDashlet

to

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet

STEP 3

Rename the files

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/MyPipelineBySalesStageConfigure.tpl

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/MyPipelineBySalesStageDashlet.en_us.lang.php

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/MyPipelineBySalesStageDashlet.meta.php

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/MyPipelineBySalesStageDashlet.php

to

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageConfigure.tpl

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.en_us.lang.php

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.meta.php

./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.php

STEP 4

Edit ./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.en_us.lang.php

Change

$dashletStrings['MyPipelineBySalesStageDashlet'] = array(’LBL_TITLE’ => ‘My Pipeline By Sales Stage’,

‘LBL_DESCRIPTION’ => ‘Vertical Bar Chart of My Sales Stage Pipeline’,

‘LBL_REFRESH’ => ‘Refresh Chart’);

to

$dashletStrings['WgPipelineBySalesStageDashlet'] = array(’LBL_TITLE’ => ‘Weighted Pipeline By Sales Stage’,

‘LBL_DESCRIPTION’ => ‘Vertical Bar Chart of Weighted Sales Stage Pipeline’,

‘LBL_REFRESH’ => ‘Refresh Chart’);

STEP 5

Edit ./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.meta.php

Change

$dashletMeta['MyPipelineBySalesStageDashlet'] = array(’title’ => ‘LBL_TITLE’,

‘description’ => ‘LBL_TITLE’,

‘icon’ => ‘themes/default/images/icon_Charts_Funnel_32.gif’,

‘module’ => ‘Opportunities’,

‘category’ => ‘Charts’);

to

$dashletMeta['WgPipelineBySalesStageDashlet'] = array(’title’ => ‘LBL_TITLE’,

‘description’ => ‘LBL_TITLE’,

‘icon’ => ‘themes/default/images/icon_Charts_Funnel_32.gif’,

‘module’ => ‘Opportunities’,

‘category’ => ‘Charts’);

STEP 6

Edit ./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.php

Change

class MyPipelineBySalesStageDashlet extends Dashlet {

to

class WgPipelineBySalesStageDashlet extends Dashlet {

Change

function MyPipelineBySalesStageDashlet($id, $options) {

to

function WgPipelineBySalesStageDashlet($id, $options) {

Change

$this->title = translate(’LBL_MY_PIPELINE_FORM_TITLE’, ‘Home’);

to

$this->title = translate(’LBL_WG_PIPELINE_FORM_TITLE’, ‘Home’);

Change

return parent::displayOptions() . $ss->fetch(’modules/Charts/Dashlets/MyPipelineBySalesStageDashlet/MyPipelineBySalesStageConfigure.tpl’);

to

return parent::displayOptions() . $ss->fetch(‘custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageConfigure.tpl’);

Change

$this->loadLanguage(’MyPipelineBySalesStageDashlet’, ‘modules/Charts/Dashlets/’);

to

$this->loadLanguage(’WgPipelineBySalesStageDashlet’, ‘custom/modules/Charts/Dashlets/’);

Change

$cache_file_name = $current_user->getUserPrivGuid().”_”.$theme.”_my_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”;

to

$cache_file_name = $current_user->getUserPrivGuid().”_”.$theme.”_wg_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”;

Change

if(is_file($sugar_config['tmp_dir'] . $current_user->getUserPrivGuid().”_”.$theme.”_my_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”))

unlink($sugar_config['tmp_dir'] . $current_user->getUserPrivGuid().”_”.$theme.”_my_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”);

to

if(is_file($sugar_config['tmp_dir'] . $current_user->getUserPrivGuid().”_”.$theme.”_wg_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”))

unlink($sugar_config['tmp_dir'] . $current_user->getUserPrivGuid().”_”.$theme.”_wg_pipeline_”.$dateFileNameSafe[0].”_”.$dateFileNameSafe[1].”.xml”);

STEP 7

Now we change the logic of the dashlet.

Edit ./custom/modules/Charts/Dashlets/WgPipelineBySalesStageDashlet/WgPipelineBySalesStageDashlet.php

Find the SQL statement

 $query = " SELECT opportunities.sales_stage,
users.user_name,
opportunities.assigned_user_id,
count( * ) AS opp_count,
sum(amount_usdollar/1000 * probability/100) AS total
FROM users,opportunities ";

As we want to have the weighted sum of all opportunities with no user information we must change it to

 $query = " SELECT opportunities.sales_stage,
count( * ) AS opp_count,
sum(amount_usdollar/1000 * probability/100) AS total
FROM users,opportunities ";

The additional group statement

// $query .= “,users.user_name,opportunities.assigned_user_id”;

must be commented out.

The user-selection in the statement block

/****
//build the where clause for the query that matches $user
$count = count($user_id);
$id = array();
$user_list = get_user_array(false);
foreach ($user_id as $key) {
$new_ids[$key] = $user_list[$key];
}
if ($count>0) {
foreach ($new_ids as $the_id=>$the_name) {
$id[] = "'".$the_id."'";
}
$ids = join(",",$id);
$where .= "opportunities.assigned_user_id IN ($ids) ";

}
****/

must be commented out because we want to see all opportunities not only the own.

The salesstage selection

$where .= “AND opportunities.sales_stage IN ($dataxArr) “;

must be changed to (remove AND)

$where .= ” opportunities.sales_stage IN ($dataxArr) “;

At last you should remove the user paremter from chart link by commenting it out:

// $sugarChart->url_params = array( ‘assigned_user_id’ => $current_user->id );

STEP 8

Create an empty file with following content:

<?php
// Title of Dashlet "Weighted Pipeline:
$mod_strings['LBL_WG_PIPELINE_FORM_TITLE'] = 'Weighted Pipeline';
?>

and write it to

./custom/modules/Home/language/en_us.lang.php

Now you are ready to test your new Dashlet.

STEP 9

Call “admin” - “repair” - “Clear Vardefs Data Cache”

and

call “admin” -”repair” - “Rebuild Dashlets”

READY TO GO

Have a lot of fun writing your own chart dashlets.

Expertz ]]> http://blog.expertzweb.com/archives/270/feed http://blog.expertzweb.com/archives/253 http://blog.expertzweb.com/archives/253#comments Fri, 21 Nov 2008 10:53:50 +0000 admin http://blog.expertzweb.com/?p=253

Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty cool results. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.

The list below is made up of the best 50 FREE scripts available, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Ajax Forms

Submitting a form with AJAX doesn’t get any easier than this!

1.1 Server side jQuery with Jaxer

Create one ‘master’ form, and use server side DOM manipulation with Jaxer to disable, or completely remove certain form elements before they reach the client’s browser. We can then use jQuery on the server side to select these elements and disable them, or even completely remove them from the DOM before they reach the clients browser.

• Demo can be found here.
• Download Jaxer here

1.2 Ajax login form (PHP & Javascript)

A nice ajax login form using 3 javascript files, 2 php files and 1 stylesheet.

• Demo can be found here.
• Download Jaxer here

1.3 Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.

• Demo can be found here.
• Download Jaxer here

2. Ajax ShoutBox

2.1 wTag (Ajax shoutbox)

wTag is a shoutbox (chatbox or mini chat) that is written in JavaScript and PHP, and using Ajax to exchange data with the server without need to reload an entire page. Uses MySQL database as backend. Features Include: Anti-spam filter, CSS based drop-down smileys menu, Bad-word filte, form validation.

• Demo can be found here.
• Download wTag here

2.2 Shoutbox Ajax

Shoutbox Ajax script is based on jQuery library and Form plugin and allows you to implement a shoutbox on your website. This jquery shoutbox is file based, but it’s very easy to write a few more lines to keep your messages in a database.

• Download Code here

3. Validate a Username AJAX

3.1 Validate a username using Javascript and PHP ( AJAX )

Learn how to check if a username is valid without leaving the page using ajax.

• Demo can be found here.
• Download Code here

4. Ajax Instant Messenger

4.1 Ajax Instant Messenger

Ajax im (”asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript.

• Demo can be found here.
• Download Code here

4.2 Ajax and XML: Ajax for chat

Learn to build a chat system into your Web application with Asynchronous JavaScript™ + XML (Ajax) and PHP.

• Download Code here

5. Ajax Tabs Content

5.1 Ajax Tabs Content

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. Features Inlcude:

Fetch and display an external page, Supports auto mode, Ability to also expand/contract arbitrary DIVs, Ability to dynamically select a tab, Supports nested Ajax Tabs.

• Demo can be found here.
• Download Code here

5.2 AjaxControlToolkit TabContainer

TabContainer themes for some of the other tab-style controls that is floating around the web.

• Demo can be found here.
• Download Code here

6. Ajax Shopping Carts

6.1 Drag and drop shopping cart

An interesting script.aculo.us Shopping Cart with drag and drop feature.

7. Ajax Star Ratings

7.1 Starbox

Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework.

• Demo can be found here.
• Download Code here

7.2 Unobtrusive AJAX Star Rating Bar

This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is unobtrusive, meaning that if Javascript is off it will still work.

• Demo can be found here.
• Download Code here

7.3 CSS: Star Rater Ajax Version

Uses komodomedia’s star rating technique. Works on a database without having to refresh any pages (but updating the database with AJAX). In this version it uses for rating an image (with unique id = imgId).

• Demo can be found here.
• Download Code here

8. Ajax Inline Edit

AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.

8.1 Easy AJAX inline text edit 2.0

A small piece of javascript reads al SPAN tags, checks if it has class=”editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

• Demo can be found here.
• Download Code here

8.2 Ajax.InPlaceEditor

The in-place “text edit” testing allows for Flickr-style AJAX-backed “on-the-fly” textfields. The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options. The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

8.3 Edit In Place with AJAX Using jQuery

An AJAX (or AHAH) proof-of-concept page that allows the visitor to edit the very (x)HTML page they are viewing, without leaving the page. Click the text to be edited and magically a textarea appears with buttons beneath to save or cancel the changes. Changes are sent via AHAH to a PHP script which normally would be used to update a database (MYSQL or flatfile).

• Demo can be found here.

9. Ajax Progress Bar

Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Here are very interesting Progress bars using ajax instead of flash.

8.1 jsProgressBarHandler

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

• Demo can be found here.
• Download Code here

8.2 A YUI Loading Panel Widget

A web page which is processing a lengthy Ajax request and doesn’t provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here’s a very handy loading indicator widget for Ajax programmers who use YUI.

• Download Code here

10. Ajax Pagination

10.1 Ajax Pagination Script

This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth.

• Demo can be found here.
• Download Code here

10.2 Preloading Data with Ajax and JSON

It’s a paging demo that shows how we can preload in the background the next and previous queries from a database. When the user pages through, they can do so quickly without having to wait for an Ajax call to finish.

• Demo here
• Download Code here

11. AJAX File Browser & Manager

11.1 jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso.

• Demo can be found here.
• Download Code here

11.2 jQuery File Tree

KFM is an online file manager which can be used on its own, or as a plugin for a rich-text editor such as FCKeditor or TinyMCE. Features include: drag-and-drop everything, icon-view, list-view, plugins, image manipulations…

• Demo can be found here.
• Download Code here

12. Ajax Calendar

Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. Check out these excellent ajax calendars.

12.1 Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

• Demo can be found here.
• Download Code here

12.2 Quick Calendar Using AJAX and PHP

Learn how to create an interesting calendar using Ajax and PHP. You will be able to navigate through the calendar months without refreshing the page.

• Demo can be found here.
• Download Code here

13. Ajax Photo Manipulation

13.1 Phototype

A client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images.

• Download Code here

13.2 mooImageCrop

An easy-to-implement image cropper based on the mootools framework and php. This demo shows you how to use ajax and php functions to create cropped areas from images and return them directly. You can specify the width and the height of the overlay, which is used to crop that part then. This can be come in handy if you wish to let users create avatars from uploaded images with a certain with and height or any other process of cropping images.

• Demo here

14. Ajax Dynamic Image Gallery and Slideshows

14.1 Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features.

• Demo here
• Download Code here

15. AJAX File Upload

15.1 Max’s AJAX file uploader

Max’s AJAX file uploader is a simple and easy to use script, which allows you to upload files to your webserver without reloading the current page. During the upload an animated progress bar is shown. The server side is written in PHP.

• Demo here
• Download Code here

15.2 Ajax Multi Image File Upload

Ajax driven image file upload with thumbnail view and delete function.

• Demo here
• Download Code here

15.3 jQuery Multiple File Upload Plugin

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

• Demo here
• Download Code here

16. AJAX AutoCompleter

16.1 Autocomplete Control Version Released

Now you can change the look of the suggestion item with your own customizable template. Also it is possible to pass your own suggestion items from the server and work with all their properties on the client side.

• Demo here
• Download Code here

16.2  

FaceBook Like - jQuery and autosuggest Search Engine

An autosuggest search engine inspired by facebook for design while using jquery.

• Demo here
• Download Code here

17. AJAX CMS

17.1 NicEdit

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

• Demo can be found here.
• Download Code here

17.2 FCKEditor

This plugin makes it easy to install FCKEditors on your page the jQuery way. It integrates FCKEditors with the jQuery Form Plugin and enables the contents of FCKEditor to be submitted via ajax.

• Demo can be found here.
• Download Code here

18. AJAX Polls

18.1 Ajax Poller

This script requires that you have PHP installed on your server and access to a mySql database.

• Demo here
• Download Code here

18.2 Creating a Dynamic Poll with jQuery and PHP

In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

• Demo here
• Download Code here

19. AJAX Tabular data manipulations

19.1 Sorttable

Create clickable headers that sort the table by the clicked column. Note how the numeric and date columns all sort properly, too, rather than sorting alphanumerically.

• Demo here
• Download Code here

19.2 FlexiGrid

Lightweight but rich javascript data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

• Demo here
• Download Code here

19.3 DDDrasticGrid

DrasticGrid is an Ajax-based datagrid with editing support. It uses MySQL as a data source and it supports pagination, sorting, editing records, adding records and removing records.

• Demo here
• Download Code here

19.4 Improving Extra wide Grid View

Refactored the Tablecloth example to use the ASP.NET AJAX client side API.

• Demo here
• Download Code here

20. Miscellaneous

20.1 Ajax Scrolling pages

This script loads content from the server and inserts it into an empty HTML element(example a DIV tag) on your page. New pages can be appended dynamically and the script will scroll down to the content of the new pages.

• Demo here
• Download Code here

20.2 jTip – A jQuery Tool Tip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string.

• Demo here
• Download Code here

20.3 Ajax Broken Link Checker

This module checks your links on the current page by requesting them and reading the server response. If the server returns 200 OK the link gets ‘active’ class, if other header - the link marked as inactive.

• Download Code here

20.4 Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s easy to use and easy to drive programmatically — use it for error messages, confirmations, previews, galleries, etc.

• Demo here
• Download Code here

20.5 Drop Down Panel script

Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content.

• Demo here
• Download Code here

Posted By: Expertz ]]> http://blog.expertzweb.com/archives/253/feed http://blog.expertzweb.com/archives/248 http://blog.expertzweb.com/archives/248#comments Tue, 18 Nov 2008 16:53:54 +0000 admin http://blog.expertzweb.com/?p=248 Site building > Modules. After enabling the module, set the correct permissions by visiting Administer > User management > Permissions [...]]]>

This Post provides help documentation for modules that ship with Drupal core. When you install Drupal, these modules are automatically installed. To make use of a module:

1. Make sure the module is enabled by visiting Administer > Site building > Modules.
2. After enabling the module, set the correct permissions by visiting Administer > User management > Permissions (Drupal 5: > Access control).

You can further extend the features and functionality of Drupal by using contributed modules.

If you need help with a module, you can use various support resources.

Posted By:Expertzweb. ]]> http://blog.expertzweb.com/archives/248/feed http://blog.expertzweb.com/archives/245 http://blog.expertzweb.com/archives/245#comments Tue, 18 Nov 2008 16:34:06 +0000 admin http://blog.expertzweb.com/?p=245 Below are listed the top Drupal Modules to help you Out.

• Drupal Core
• CVS Integration / Project / Project Issue Tracking
• Views
• CCK
• Pathauto
• Devel
• ImageCache
• TinyMCE
• API
• Organic Groups
• Panels
• Actions
• VotingAPI
• i18n
• Ecommerce
• Audio
• Calendar
• Date
• Codefilter
• Video
• Image Field
• Open ID
• Content Templates
• Event Module
• Node Profile
• Five Star
• Token
• Zen/Zengine
• Akismet
• Automatic Node Titles
• Workflow
• Diff
• Custom Links/Custom Pagers/Custom Breadcrumbs
• Amazon Associate Tools
• Simplenews
• Porter Stemmer
• Case Tracker
• Revision Moderation
• Location
• XML SiteMap

Posted By: Expertzweb

It seems that frameworks are one of the next big things. With the meteoric rise to fame of Rails, Django, and other MVC frameworks, developers have learned that they can build websites much faster with the help of these tools. Frameworks help you cut out much of the repetitive tasks that normal custom programming would require. Having knowledge of the top frameworks (Rails, Django, CakePHP, Symfony, and a few others), can give you a whole other dimension to your skill set.

2. Widget development

Widgets have changed how web development has been done in the past couple of years. With the advent of widgets, data has become more portable, interactive and most importantly, viral. It’s in almost every web startup’s business plan to include a widget or two at some point, mainly because it helps increase their audience and puts more eyeballs on their content.

Widget development requires knowing Javascript and/or flash, not to mention knowledge of the regular language that the parent site is built in.

3. Custom CMS themes

Designers and developers can always find work creating or customizing a CMS theme. As the popularity of CMS like Wordpress and Drupal have risen over the past years, so has the demand for creating themes for the software.

Many people use CMS to power their personal or business websites, so this work is always going to be around. A decent website needs a unique and usable design that reflects well on the brand behind it.

4. CMS Customizations and plugin development

CMS are great because it gives site owners with little technical know-how the ability to change aspects of their site on the fly with the help of modules. While most CMS platforms have a long list of modules to offer, many businesses and personal sites need more, and custom modules or plugins are the perfect solution.

Developers can have thriving businesses in CMS development and customization alone. Here are a few (and by no means all) of the top CMS platforms that could use plugin development and other customizations:

• ExpressionEngine
• Wordpress
• Drupal
• MovableType
• Joomla

5. PSD to XHTML services.

Another one of the more popular skills needed is converting Photoshop files (PSD) to XHTML files for template use. Because designers don’t always know how to convert Photoshop layouts into template files, a CSS and XHTML ninja can always find work. Because of the array of browsers now in common use and the niggling differences in how they render sites, you want to be a web developer who can build-out sites that display the same in any browser. This kind of design to code service is the most sought after of them all.

6. Javascript Plugin creation

Much like the rise of CMS and MVC frameworks, Javascript frameworks are just as popular. These Javascript frameworks are built with the ability to add custom functionality in the form of modules. If you’re a developer who knows how to build custom Javascript modules for frameworks like jQuery or Dojo, you’ll have plenty of work available. Here are some of the most popular Javascript frameworks you might need to get a handle on.

• jQuery
• Scriptaculous
• Dojo
• MooTools

7. Facebook/MySpace applications

Facebook and MySpace have both opened up their platform to allow developers API access, and the demand for social network apps has been huge since then. A whole new industry for web development sprang up overnight, and hundreds of applications are now added on a daily basis. The social media application platform has been found to be very viral and potentially very lucrative.

Some of these applications are built to make money or drive brand awareness, but ultimately the applications can be very successful and viral if they’re done properly. A solid developer can make a decent living creating Facebook and MySpace applications.

Social networks like Facebook require that you learn their own language of syntax, like the FBML (Facebook Markup Language), so there is a small learning curve to this skill.

8. iPhone applications

Yet another platform-specific skill set, building iPhone applications can be very profitable, and much like the social media applications, a great skill for any developer to know. Making an iPhone app that is accepted into Apple’s platform has an excellent chance at making great money or receiving tons of downloads.

This is a great thing for web developers because companies are starting to see the value in developing iPhone and other mobile technologies, and consequently will be wanting more and more applications developed in the future.

9. Ecommerce integration

Business web sites are always going to need ecommerce integration. Essentially, if you can take a language or framework (PHP or Rails) and fuse it with a payment gateway (like Paypal or Authorize.net), you’ll do well for yourself. I’m predicting that we’re going to see more paid services than free, ad-supported services being developed in the near future, as less money is being doled out to startups.

As the economy turns sour and the ad industry starts to get a little tighter, websites that use a subscription-based revenue model will start to become more common. Having the knowledge to piece together integration with online banking services like Paypal and Google Checkout will be great skills to have.

Photo by Andre Charland

10. Flash and Actionscript Knowledge

Flash animation can do a lot for a website. Flash can be used to create videos, interesting navigation, fun animated sequences, widgets, and many other useful things on the Internet. The flash technology can add a very professional dimension to any website, and large websites and corporations always pay to have their sites look professional, and often commission Flash animated interfaces to showcase their products. With search engines working on ways to have Flash communicated better with them, this is a skill that’s sure to boom as the search technology advances.

Conclusions

Learning frameworks is one of the best way to increase your skill set and potential work as a freelancer. Whether it’s a Javascript framework, CMS, or MVC framework, taking the time to learn a new skill can be a huge advantage to finding work. Also, website owners pay big bucks for development that allows them to make money, because they see it not as a regrettable expense, but as an investment in future profit. Services like ecommerce integration, creating iPhone apps and flash knowledge will also be much-needed skills, and people will always pay for those skills.

• Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

Glen Stansberry is a web developer and blogger who’s struggled more times than he’d wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

OkayDave

OkayDave.com
I’ve noticed Dave Werner’s portfolio mentioned in passing on Smashing Magazine before and thought it was well worth a closer look, even if it dates to 2006. One basic way to provide focus and emphasis is to desaturate everything except the target element. On OkayDave, all is in black and white until you mouse over an element.

Things get startlingly more vibrant when you actually click something; a burst of colored particles brighten the screen before transitioning to the selected media. It’s a tad on the over-compressed side but only lasts a second. What a great way to combine very artificial and earthly organics (see Dave’s handwriting and scratchy notes, in particular). And, rewarding visitors for clicking will encourage them to spend more time discovering your content.

Vimeoland

Vimeoland
Video-sharing website Vimeo is known for a number of things, foremost among them being an astoundingly consistent user interface, an example being its very user-friendly roadmap. Vimeoland is a playful form of data visualization: little figurines teleport in, representing unique website users and their status. For example, hearts appear above their heads when they like a video. From time to time, an airplane will fly by.

YouTube may be the biggest video website, but its user interface falls short of Vimeo’s elegance. Vimeo’s video quality, which can go up to true high definition, is superior, too. Something worth thinking about the next time you want to make a film easily accessible.

Grooveshark

Grooveshark.com
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora and Muxtape have run into legal tangles because of archaic copyright laws, Grooveshark claims to be in the clear, compensating artists for their work.

Alas, this also means that unlike other services, such as imeem, you can’t (at least yet) embed music on your blog. But I was surprised by how many rare tracks that I searched were already available (they apparently reward people for uploading). Two problems I noticed: (1) some broken help files, and (2) the circular progress indicator will keep going infinitely if it can’t play a song. Hopefully they’ll be smarter about that in the future.

But overall the player is very slick: queued songs visually lock together like Legos, elements slide horizontally to show and hide controls and hierarchies as needed, and the overall blue and gray theme — like a shark! — is sleek.

If you want to download songs, your registration needs to be approved. It’s not an automated process yet, and I’m still waiting for my approval.

SpaceCollective

SpaceCollective.org
Into trans-humanism, fringe science, and the far reaches of space? Space Collective bills itself as “a cross-media information and entertainment channel for post-ideological, non-partisan, forward-thinking terrestrials”. And its website is a joy to visit: in the new posts section, fresh content is arranged in a curved-corner matrix, with green tabs to indicate specific projects.

It seems pretty far out at first, and you may not buy some of the beliefs, but even a glimpse of this imagery will uplift your perspective on humanity’s creativity in the cosmos.

Funnel Design Group

FunnelDesignGroup.com
Do you remember the bizarre devices in the first Myst game that combined familiar elements, and by doing so, came off as alien? The “dentist-chair planetarium” hybrid was a striking example of that. When you visit Funnel’s website, you’ll sense a similar atmosphere: gears are churning away, and a little automaton with a lightbulb for a head is there to help you view its work. It’s almost Steampunk-ish.

I appreciate the detail they’ve gone into: selecting a different section makes the art in the O-shaped viewfinder spring a little, and the title up top closes and opens, as if it were a piece of paper in a rotating carousel. (The old-time Glenn Miller music and whirring sounds are fitting, too.)

Viewzi

Viewzi.com
Finally, in the visual search arena, Viewzi’s results aggregate other websites (like Google and Amazon) and present them in the most sensible context it can detect. For example, searching for “Royksopp” (whose “Remind Me” video has been popular on Smashing Magazine) brings up the album view first. Clicking on it brings up a list of the group’s CD covers.

If that doesn’t suit you, multiple other views — like the traditional “Simple Text” and the pseudo-3D “Photo Tag Cloud” — allow you to explore the same data in different ways. They have other views for specialized searches, so try them all out for appropriate media.

GoDesignate

GoDesignate.com
Here’s another fine example of a goodie-hook. The Web developers at Buffalo were inspired to create this after a “‘discussion about whose turn it was to make the tea.” It provides a clean twist on the old “cards in the hat” process and takes seconds to use. The reference to Buffalo at the bottom is a compact pixelfont, a subtle reassurance that they’re not intrusive marketers.

I couldn’t help but ask if this was actually used by the company, and Dan Griffiths, Managing Director, graciously replied:

“Glad you like it! We do use it for all sorts of things still. You should see some of the things people use it for. :)”

“Should I leave my husband?” was one of the strangest ones I have noticed!

Some more from a list of highlights Dan shared with me:

“Why does my boss call me lady?”

“Will Chris ever regain his masculinity?”

“Should I make a new site design based on Buffalo’s design?”

When hooks like this are in tune with your company’s overall image and sense of humor they build brand familiarity through repeated usage, not to mention subsequent smiles.

Hypnoteis

Hypnoteis.nl
Teis Albers is fond of splashy color. His style is more about grungy splashes of paint and pseudo-decoupage, as demonstrated in his gritty depictions of font flourishes set against a backdrop of various animal and human body parts. But similar to Pagano’s website, clicking on any thumbnail will dynamically zoom and enlarge that picture without refreshing the page. While Pagano’s zooms are Flash-based, Albers uses the magic of Highslide JavaScript.

Serge Seidlitz

Serge Seidlitz
But sometimes you want to make everything stand out, and that’s what this guy is here for. Using a mess-on-the-bedroom-floor approach similar to Werner’s, Seidlitz has nothing fancy in the way of mouse-overs. But his motley assemblage of mayhem does invite clicking: he even urges you to “click on things.”

Needless to say, if you keep updating your portfolio with new stuff, maintaining a website like this could become a time-consuming jumble. But if you already have a wealth of work to show off, the discover-my-creative-chaos approach might work for you.

Six Pixels of Separation

Six Pixels of Separation is Mitch Joel’s showcase of social media insights. It looks pretty usual and boring at the first glance, but a closer look reveals a close attention to detail. Consider how sparse graphical elements are used for maximum effect. Embedded podcasts fit perfectly into the theme; it’s relatively easy to navigate, despite the large amount of links; and leaving a comment rewards you with a surprising (but non-annoying) pop-up; try it!

There are too many social media blogs out there that buy into the same generic “Web 2.0? conventions. Six Pixels bucks that banality with a layout that doesn’t get in the way of “the meat” and is all the better for it.

Fontpark 2.0

Fontpark 2.0
When I see Web typography guides, they’re often in the Roman characters that I’m well familiar with, so it’s refreshing to look beyond this style and bask in what else is happening around the world.

Japan’s Morisawa is a venerable typesetting company, and in addition to a brief but helpful primer on Japanese Kanji Culture, they have created Fontpark, a unique way of looking at characters with hundreds of years of history. Sit back and watch pieces be animated into animals and faces, or be an active participant and submit your work to the gallery.

Like FontStruct, this is a novel way of promoting your paid products with a quality freebie, another kind of goodie-hook. It may not be as funny as CSS Homer, but finding faces in the swashes and strokes is enlightening nonetheless.

Picnik

Picnik.com
Staying on the food theme, here is a Picnik of a very special sort. Sure, you rely on Photoshop for your more heavy-handed tasks, and rising Web-based image editors such as a.viary boast complex features. But when you want to retouch photos in a jiffy, Picnik is nothing short of a usability dream!

From the smooth registration form (observe how password and email confirmation fields are hidden until you need them, reducing the perception of complexity) to the actual “in-the-basket” look and feel of this Flash application, Picnik is a joy to use inside and out. It simply puts other Web-based image editors to shame — or at least inspires them to do better.

Bestiario

Bestiario.org
Fancy more data visualization? This isn’t as playful as Vimeoland but is substantial in its own right. At first, the lack of anti-aliasing may hurt your eyes, but scroll over (or down) the projects and watch the collection unfold. It’s almost like a very graphical elevator.

It’s fun to move your cursor to the right, whereupon the whole gallery will tilt, as if to look at you askance and ask “Now what?” Well, there’s a pop-out collection of tags on the far right, containing another way to navigate the set. And if you love mathematical visuals…

Phatterism

Phatterism.com
This website is one of the neatest ways I’ve seen (even if somewhat impractical) to share a blog (and other media). Upon visiting, Luis Santi Jr. will greet you with ample white space, fidgeting and occasionally gazing to his left, imploring you to check out his stuff. Like Funnel Design, he’s got his own head-bopping music, which reminds me of the Austin Powers movies.

Click “TXT” and Luis goes to work for you, pulling out an index card of his journal entries. His hand even moves a bit unsteadily, adding to the realistic feel. If you click on a title, you’ll see him scribbling a note, then hold it up for you. The shakes are gone now and the handwriting is obviously a font, but what impressed me is how he presents his comments; they, too, are shown as separate note cards.

What a fun way to show yourself off! For more of Santi’s work, see his main portfolio.

Energi Design

Clickenergi.com
From the get-go, Steve Holmes’ compact Flash website doesn’t have very much, but what’s on it is amazing. He has done video tutorials for well-known stock content provider ArtBeats, and you owe it to yourself to watch his demo reel. The earlier, more up-tempo music he used when I first saw this a while ago was better, but the visuals are captivating nonetheless. If you enjoy type-in-motion videos like Justice’s “DVNO,” this will definitely appeal to you.

Mirror’s Edge

MirrorsEdge.com
It seems like every big game title coming out nowadays needs a Flash website. They’re usually very glossy and don’t have a lot of content, but the techniques involved are well worth experiencing. Mirror’s Edge, which is due for release in November 2008, has already been acclaimed for its aesthetics. Promoting a game with authoritarian cyberpunk gloom but set in a very clean white-blue city, the website complements it almost perfectly.

The waving of the main character’s hair and the slow rotation of the city are nice little touches. Games with such a striking and individual look are rare (some of my favorites include the Wipeout series and Ico) and beg to be copied. Of course, the irony is that copycatting leads to angry cries that the spawns are too derivative.

Observe also that the buttons and headers are slightly askew but not horrendously so, lending a certain sense of dynamic imbalance that reflects the fleet-footed parkour seen in the game.

Like.com

Like.com
Visual search continues to rise. A couple of decades ago, the mere idea of searching through thousands of catalogued images seemed improbable. Today, we can enjoy it everyday on websites like Flickr. Websites such as Riya’s Like.com go a few steps further, and they claim to be “slowly innovating” by improving facial and object recognition. Like a handbag but think the material’s a bit too shiny? Narrow not just by color but by style, and feel like you have more investment in (and control over) the overall search process.

Someday, this will be commonplace too, but until then, it’s flirty fun to drill through look-alike Halloween costumes to pick out one that’s just right for you.

Navigaya

Navigaya.com
Think visual search is too quiet? Navigaya is another value-added search aggregator with a twist: by default, as you search, a halftone-mottled music video (from YouTube) plays in the background. Most of the selections are electronic dance, and, while not immediately obvious, you can reveal the transport controls by moving your cursor to the top of the screen.

Highlights to look out for: the blurred in-and-out (not just faded) effect for hover tips and certain menus, and dotted icons for arrows and other buttons. It’s a tight, dark design that gives the appearance of staying in the background even when it’s in the foreground.

Overall, Navigaya is too claustrophobic at times for my taste compared to Viewzi, because it mainly shows its search engine results in windows within windows. But if you like your search activities to be an information onslaught, give this a spin.

What common threads can you identify running through different design styles? The surfaces may look different, but the underlying spirits and code may have more in common than you think. Take a moment to gaze, absorb, and mentally deconstruct; it will increase your overall understanding of why great Web design works.

Literal Text

All these special symbols might leave you feeling a bit worried: What if you don’t want to discombobulate FileMaker’s finding. Instead, you actually want to find an @ sign? Believe it or not, another symbol comes to the rescue: The “literal text” symbol. Just put your punctuated find criteria in quotes:

“mr_magoo@sixfriedrice.com”

When FileMaker sees those quote marks, it dutifully ignores the symbols inside. In fact, this is just what you should do if you’re searching for an email address.

If @ means “any character” then what does it matter? The @ in mr_magoo@sixfriedrice.com will happily match the @ sign in the email address, won’t it? Unfortunately, no. The @ sign (when in regular field data) is not indexed. In other words, FileMaker tosses it out when it takes its speed-search notes about your records. So to FileMaker, the email address “mr_magoo@sixfriedrice.com” is really three words: “mr”, “magoo”, and “sixfriedrice.com” So there’s nothing in there for the @ symbol to match. You can prove this yourself: When you need to find an email address, just put a space in place of the @ sign. It will find without a hitch.

Source

<?php
if(isset($_POST['username']))
{
	require_once('db_config.php');

	$email=$_POST['email'];

	$email=str_replace("@", " ", $email);

	$request = $fm->newFindCommand('users');

	$request->addFindCriterion('Email', $email);

	$result = $request->execute();

	if (FileMaker::isError($result)) {
			$error=$result->getMessage();
			header("location:forgotPass.php?err=Email+addess+do+not+exists+in+the+Database.");
			exit;
		}

		$records = $result->getRecords();

		//echo "<pre>";		print_r($records);		die();		

		foreach($records as $rs)
		{
		$email1=	$rs->getField('Email');
		$user_name=	$rs->getField('UserName');

			$id=$rs->getField('id');

			header("location:forgot_pass_mail.php?uid=".$id);
			exit();

		}
		header("location:forgotPass.php?err=Please+provide+valid+username+and+email.");
		exit;
}
else{
header("location:index.php");
exit();
}
?>

The Range Symbol

As you just saw, the ... symbol — better known as the “range” symbol — lets you specify a range of values to match. It isn’t limited to dates. You can provide a range of numbers in a number field:

22...36

Or a range of times:

9:00 AM...5:00 PM

You can even provide a range in a text field:

Adam...Bernard

FileMaker thinks about text ranges alphabetically. In other words, if you put all your names in alphabetical order, the range above would include every name between Adam and Bernard.

It is important to remember that the range symbol is inclusive: A value that matches either end exactly will be included in the found set.

Tip: It’s a small concession, but if you’re keystroke-conscious, you can trim one . from your Range symbols. It is perfectly valid to use just two dots: 3..7

Comparison Symbols

The next-most-common symbols are <, ≤, ≥, and >. These symbols are like the range symbol with only one end. For example, to find everyone born after Star Wars came out:

>5/25/1977

These symbols are pretty self explanatory: “Greater than 5/25/1977.” Some people prefer using the range symbol instead of ≤ or ≥. For example, this will find every order placed after January first:

1/1/2007...

Note: On Mac OS X, the “less than or equal” symbol looks like this: ≤. On Windows, it looks like this instead: <=. But both versions have the exact same meaning. (And in fact, the Windows style symbol will work perfectly on the Mac too.) The same goes for “greater than or equal.”

Exact Match

One of the most useful symbols is =, or the “exact match” symbol. Normally, FileMaker is pretty forgiving about field matches when performing a find. For instance, if you put San in the City field, FileMaker will consider each of these a match:

• San Francisco
• Santa Clara

If you want to be technical, FileMaker does a word-based prefix match, meaning if any word in the field starts with the value you type in your find request, FileMaker considers it a match. The “exact match” symbol lets you be more specific. If you use this find criterion:

=San

FileMaker will still match San Francisco but it won’t match Santa Clara. With =, it only matches whole words.

Field Content Match

If you want to be even more specific, you can use the “field content match” symbol: ==. This little buddy tells FileMaker you know exactly what you’re looking for, and it only finds records where the entire field matches your find criterion exactly.

For example, if you did your San search this way:

==San

Then you’d only find people in the city of San. (More likely you’d find nothing, since San isn’t a city.) You would use this symbol when you are looking for something very specific and a normal search finds too many records.

Wildcards

Going the other direction, sometimes you want FileMaker to be less restrictive. FileMaker has three so-called wildcard symbols:

• *: zero or more characters
• @: one character
• #: one digit

These symbols stand in for data in the field. For example, if you want Cities that end with “son” you can do a search like this:

*son

That search will find the mythical city of Son (sister to the city of San), as well as:

• Tucson
• Wilson
• Orson

Note: As soon as you add a wildcard symbol, FileMaker starts doing an exact match as well. In other words, the whole word prefix mumbo jumbo no longer applies. *son will not match Wansonsy.

The * symbol will match any number of letters or numbers. It will even match no characters (that’s why *son finds the city of Son). The @ symbol, on the other hand, matches exactly one character. Try a search like this:

Sant@

And FileMaker will find:

• Santa Clara
• Santo Domingo

But it won’t find “Sant” because the @ symbol expects exactly one character (not zero or one).

Tip: Sometimes these symbols aren’t flexible enough. For example, you might want “one or more characters.” You can combine @ and * to get what you want: San@*. That criterion will find “San” followed by at least one character, and possibly more. If you want “zero or one character” your job gets a little tougher. Your best bet is to use two find requests. In the first, put =San and in the second, put San@. The first request will match every record with “San” and the second will match “Sans”, “Sand”, and “Sang.”

Finally, the # symbol works like @ but is only matches a numerical digit. This find:

##

Will match only two-digit numbers.

Literal Text

All these special symbols might leave you feeling a bit worried: What if you don’t want to discombobulate FileMaker’s finding. Instead, you actually want to find an @ sign? Believe it or not, another symbol comes to the rescue: The “literal text” symbol. Just put your punctuated find criteria in quotes:

“mr_magoo@sixfriedrice.com”

When FileMaker sees those quote marks, it dutifully ignores the symbols inside. In fact, this is just what you should do if you’re searching for an email address.

If @ means “any character” then what does it matter? The @ in mr_magoo@sixfriedrice.com will happily match the @ sign in the email address, won’t it? Unfortunately, no. The @ sign (when in regular field data) is not indexed. In other words, FileMaker tosses it out when it takes its speed-search notes about your records. So to FileMaker, the email address “mr_magoo@sixfriedrice.com” is really three words: “mr”, “magoo”, and “sixfriedrice.com” So there’s nothing in there for the @ symbol to match. You can prove this yourself: When you need to find an email address, just put a space in place of the @ sign. It will find without a hitch.

Duplicates

The most esoteric find symbol is !: the “duplicates” symbol. You don’t put this next to any text. Instead, you put it in a field all by itself in Find mode. FileMaker will then find every record that has duplicates in that field. In other words, if your database has two Andy’s and no other duplicate first names, if you perform a find with ! in the First Name field, FileMaker finds both Andy’s but leaves everyone else out. If you later add a second Vincenzo, it will find both Andy’s and both Vincenzo’s.

Today’s Date

The // symbol is really just shorthand to save you some typing. (Truthfully, it is also useful when scripting, but we’ll get to that in a future article.) When you put // in a find request, FileMaker acts just like you had meticulously typed out today’s date. To find every invoice due today, just bounce to Find mode, pound // in the Due Date field, and press Enter.

You can, of course, combine this symbol with others:

# find every invoice due after today
>//

# find every event between now and christmas
//..12/25/2007

Invalid Date or Time

The last symbol is ?. It’s another funny one. Sometimes (if you import data from some other system, or change field types) you might wind up with bogus data in your date field. For example, Microsoft Excel is glad to let you type “sometime next week” in a column that normally holds dates. If you then import this into a date field, FileMaker accepts it (what else is it going to do?) but considers the value invalid. Later, you can switch to Find mode, put ? in the date field, and perform the find. FileMaker finds every record with an invalid date like this.

The ? symbol works for time and timestamp fields as well.

A Few Examples

Find symbols are flexible and powerful. Chances are you’ll dream up ways to use them that I’ve never thought of. But here are a few examples that might come in handy:

If you have a Full Name field and you want to find everyone with an initial, try this:

@

It will find exactly one character. Since periods aren’t indexed, it will find all of these:

• J. K. Rowling
• Charlotte A. Cavatica
• A. A. Milne

To quickly find everything up to today, put this in a date field:

..//

Likewise, if you want everything today or later try this:

//..

1. TextboxList meets Autocompletion

Auto-completing fields in a form can be a huge time saver and a major benefit to the user. For example, searching for email addresses is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to autocompletion. The implementation is crisp and useful, not to mention easy on the eyes.

2.Ajax IM

Ajax IM is an incredible Ajax instant messenger that works just like Yahoo! messenger or any other IM client, except it’s embedded on the website as opposed to a desktop client. Ajax IM is incredibly robust, and could add quite a bit to your user’s experience. If you’ve got a social networking site or any site where it’s encouraged for users to interact with each other, an IM client could be a great way to increase interaction.

3. LiveValidation

Web forms can be one of the most frustrating aspects of the Internet. Most are too long and try to collect too much information, and sometimes make it very hard for a valuable user to fill the form out. Possibly one of the most frustrating aspects of filling out a form is hitting “Submit” and getting errors that have to be corrected.

One way to ease the pain of web forms is to add Ajax validation that tells the user instantly when he’s made a mistake. LiveValidation is an excellent Ajax script that can make adding Ajax form validation super easy for the developer. A must-have for any project that uses forms.

4. Inline Editing

The ability to edit something inline is a small aesthetic feature that can really add to the user’s experience. There’s something much niftier with being able to click a text field and instantly have the ability to edit it.

Manoloweb has a great little Ajax implementation of an inline editor. It’s a tiny script, but it can be modified to be as simple or complex as you wish.

5. Ajax Upload

Uploading files with Ajax is so much nicer than the boring, old alternative. It’s nice to see the progress of the upload, and it can be much handier for the developer to be able to use Ajax uploads that only modify small sections of the web page.

Because there are many different flavors of Ajax uploading, a simple example that can be added to. AnyExample has a quick and excellent tutorial on how to make a basic Ajax upload that you can use as is or expand upon. If you’re looking for an immediate solution, check out jQuery’s jqUploader or the multiple file upload scripts.

6. Fancy Upload

Now that we’ve covered the basics for file uploading with Ajax, check out the excellent Fancy Upload. It’s built off of the excellent Javascript framework MooTools and can be styled and modified almost endlessly. It’s unobtrusive, can be placed inline and is server independent, so integrating this script to an existing app is relatively easy.

7. ClickHeat Clicks Heatmap

Heatmaps are an underused aspect in web development. While this may not be a wildly-popular feature that your users are begging for, heatmaps are excellent for the developer to see just what the site users are clicking on. While there are plenty of hosted services out there like crazyegg, you can also use your own hosted, Ajax-powered heatmap that’s completely free with ClickHeat.

ClickHeat is very simple, but also very powerful. It shows who’s clicking on what part of your page in a given date range. This can add plenty of insight as you tweak your layouts for the best performances. Knowing where your visitors click is absolutely essential information. You can visually see what ads are performing best, what links people like to click on, and much more data.

8. Ajax Mail Form

There’s nothing more valuable to a startup or brand new website than a simple form for your visitors to sign up for launch dates and site updates. If you can add Ajax to dynamically process the information, it’s a huge bonus. NinjaDesigns has a nifty little PHP script that allows you to add a signup form on your website that uses Ajax to send the information, so a new page isn’t loaded. Extremely valuable for any web developer.

9. Ajax Directory Manager

Navigating a traditional hierarchy or folder tree can be quite a pickle for a web user. Each click on a folder requires a page reload, and you can kiss drag-n-drop functionality goodbye. If you want to add a user-friendly directory manager, use Ajax.

Relay is a robust directory manager built on ajax that features an interface with features like:

• drag-n-drop file and folders
• dynamically loading file structure
• uploads with file progress bar
• user accounts

.. and more. Relay is totally fully featured, and can be used as a standalone application or a compliment to an existing site.

10. Ajax Email Client

Who doesn’t love Gmail? The email service by Google completely changed the way we use and think about email, and it also forced others like Yahoo! and Hotmail to play catchup and try to compete with Gmail’s features. Google accomplished all of this with a little help from our friend Ajax.

If you wanted to mimic Gmail and create your own Ajax email client, it’s a fun experiment and could be used for many applications. DevArticles has an “oldie but goodie”, a somewhat older but excellent article on how to set up your own Gmail clone.

11. Improve Form Usability with Auto Messages

Many of the scripts listed in this article deal with improving user forms, as it’s a big trouble spot for many web developers. The last thing a site owner wants is for people to abandon the website as they’re signing up for the service! If you can make the process of filling out the web form easier, you’ll have a much higher form completion rate.

Using auto messages for forms is an excellent way to give guideposts to the user. Woork has a stellar tutorial on how to add automatic messages to form fields, so that when they’re hovered on a little popup shows below the input. It’s a small feature to add, but huge for improving the user’s experience.

12. qGallery

While it isn’t a full-featured gallery, qGallery is an excellent example of using Ajax to request photos and media. It’s based around the prototype Javascript framework, and it’s a perfect little script for showcasing images. It even has cache functions built in to save bandwidth.

13. Ajax Star Rating

It seems that people almost always want to give their opinion on something. Having a simple way for users to create ratings is a great way to add interactivity to your website, and also gives the users a “voice”.

There is a simple Ajax script that will do this called the unobtrusive ajax start rater. This nifty little script allows users to rate just about anything you specify. It’s not tied to any platform, so you could literally use the script for anything that used PHP and MySQL.

14. CakePHP Ajax Form

If you’re a user of the web framework like Django or CakePHP, you’ll appreciate the tutorial by CakeBaker on how to submit a form with Ajax. It’s actually quite simple to do, and only requires a few lines of code. One especially useful function of this code is that it’s unobtrusive, meaning that if Javascript is disabled in the browser, the form will still submit, just not with Ajax.

15. Amberjack Site Tours

In terms of web developers, Amberjack is one of the most impressive Javascript libraries to date. Amberjack allows you to quickly and easily create site tours for your users that make using your website less of a mystery. The best part of Amberjack is that the whole library is less than 4kb in size! It’s incredibly easy to customize, and can really make a huge impact on your site visitors with only a little bit of work.

16. Prototype UI

Prototype UI takes all of the hard work out of creating visual Ajax elements like carousels and modal windows. The script is based off of Prototype and Scriptaculous, and it’s essentially a library of user interface classes. The library is constantly growing, and all of the features are highly skinnable and easy to customize.

It’s always hard to find different libraries for things modal boxes and carousels, so it’s nice when they’re all bundled together.

17. JCrop

Photo editing online is typically a rather involved process. Either you use a service like Picnik or you just fire up ‘ol Photoshop to edit your images. Wouldn’t it be nice if the website allowed you to crop the images that you were uploading?

This is now possible with a jQuery plugin called JCrop. JCrop allows your users to crop any image that’s been uploaded to your servers, using a powerful Ajax cropping engine. Brilliant.

18. jQuery Auto-tabbing Plugin

Like we’ve stated earlier, the job of the web developer is to make filling out forms as easy as possible for the site user. That means adding even the smallest feature if it enhances the user’s experience. One such example is using auto-tabs on things like phone number input fields and social security numbers. Lousyllama has an excellent jQuery plugin that allows you to auto-tab form fields that you specify.

19. Sort Table Rows with Ajax

Sorting table elements is an incredibly useful feature to have with pages that showcase lots of data. The Daily Inspired has a nifty tutorial that shows how to achieve this effect with Stuart Langridge’s sortable.js.

Tables are great at organizing data, but being able to further drill-down the information gives your users many more options to viewing the data they way that they want to.

20. DrasticMap

Google Maps is yet another revolutionary product from Google that relies heavily on Ajax to power the site. DrasticMap is a stellar Javascript/Ajax script that allows you to map coordinates stored in a MySQL database on top of a Google map. It’s highly flexible and configurable, and the possibilities are endless in the ways that it can be used.