10 Free CAPTCHA scripts and services for websites

In the past days I received several requests from my readers to suggest some CAPTCHA scripts and services quickly to embed into a web page. This post proposes a list of ten interesting scripts and services you can use to provide protection from spam bots and ensure that only humans perform certain actions.


1. reCAPTCHA
reCAPTCHA is a free service which helps prevent automated abuse of your site (such as comment spam or bogus registrations) by using a CAPTCHA to ensure that only humans perform certain actions.

2. Securimage
Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots. It can run on most any webserver as long as you have PHP installed, and GD support within PHP. Securimage does everything from generate complicated CAPTCHA images to making sure the code the user entered was correct.

3. WebSpamProtect
WebSpamProtect allows you to instantly add verification image (CAPTCHA) to your web site and protect your forms against spam robots. In order to protect your web form, this system requires that you install a small piece of code onto your web page. The code requires that your web site support PHP, Perl, ASP or ASP.NET. Basic plan is free but you can buy a Premium, Advanced or Professional paln with a little expense.

4. Cryptographp
Cryptographp is a PHP script for generate captchas. Cryptographp limit the robots bombarding spams and automating the forms: spaces members subscriptions, guestbooks, forums... This script is free and does not use any database. It is compatible with PHP >= 4.3.0. Cryptographp also exists into plugins for WordPress, wpMu for WordPress, Symfony and Guppy.

5. CAPTCHA-Service
captchas.net provides CAPTCHA images and audio files you can use in html-forms. To use this technology, your web pages have to be generated dynamically in any programming language PHP, ASP, Perl, Python, JSP, Ruby.

6. WP Captcha-Free
WP Captcha-Free blocks comment spam by using a combination of time-based hash (a.k.a. Time Based Tokens, TBT) and JavaScript (AJAX). When a comment is posted the plugin validates a hash based on time (and some other parameters). Comments posted via automated means will not have a hash or will have an expired hash and will be rejected. Unlike using a captcha, this does not place any burden on the commenter.

7. ProtectWebForm
ProtectWebForm is a service to add CAPTCHA images and audio files on your website. You have to create an account, generate your CAPTCHA type with all the desired parameters and include it on your web pages.You can also use it on your Wordpress template with this plugin.

8. ProtectWebForm
OpenCaptcha is a simple web service which requires no special configurations or modules. Basic installation is cut-and-paste, and requires no ability to program image manipuation scripts. New fonts, image algorithms, and distortions applied weekly.

9. Form-to-email script protected by Captcha
This form-to-email script is intended to collect data from an HTML form and send it to a specified email address using a CAPTCHA script to stop spam. It works with any kind of HTML form and you can use it multiple times on your pages.

10. freeCap
freeCap is a GPL CAPTCHA script to stop spam. It has been used on any form on any kind of website. It does require some knowledge of PHP to install, though there are several captcha plugins for forum and blog software listed below.

Any suggestion? Add a comment, thanks!

Related Content

- Useful Ajax Auto Suggest scripts collection
- Interesting html FORM Validators for web developers
- Best Rich Text Editors ready to use in web projects
- File uploaders collection for web developers
- Best Image Croppers ready to use for web developers

Read More

Free resources for quickly developing AJAX applications

In this post I want to suggest you some free resources which allow developers to quickly build and mantain powerful and advanced AJAX web applications. In this list you can find advanced grid features, calendars, tab-strip and a lot of other interesting components to develop and enrich your AJAX web applications.


DHTML eXtensions
dhtml eXtension provides a set of cross-browser DHTML components for building advanced and powerful Ajax-based web interfaces. It includes advanced grids, trees, color picker, calendar, editor, combo box, advanced layout features and a lot of other interesting components to enrich your web applications. You can download the standard edition for free.

Google Web Toolkit
Writing web apps today is a tedious and error-prone process. Developers can spend 90% of their time working around browser quirks. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile. Google Web Toolkit (GWT) eases this burden by allowing developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.

Nitobi Complete UI
Nitobi Complete UI is an open source ajax components for building Ajax-powered Web user interfaces that improves user experiences for any Web 2.0 application. It include a powerful Ajax datagrid, with Excel copy and paste, in-place cell editing, and live scrolling; an Ajax-powered tab-strip component with native support for other Nitobi components, client-side statefulness, and skinnability; a full featured Calendar component with support for multi-month view, easy localization, databound events, and more.

Clean-Ajax
Clean-Ajax is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues. It's simple to install, to configure and to use;

SmartClient
SmartClient is globally deployed in thousands of enterprises, and has been incorporated as a core technology in major shipping products since 2002. SmartClient provides a zero-install DHTML/Ajax client engine, rich user interface components and services, client-server databinding systems. All components can be easily embedded in existing applications: grids, forms, trees, dialogs, wizards and other components can be added without making architectural changes.

Ample SDK
Ample SDK is a unique piece of software that runs transparently in the layer between web browser and your application. While running it provides the Logic of your application with standard cross-browser access to the User Interface. Ample Runtime, UI languages and programming model are all based on open standards. Thus a web-developer doesn't need to learn any new technologies or proprietary APIs. He can simply keep using already learnt JavaScript language, DOM, CSS, XML, XHTML and other technologies and standards.

Sigma Visual Ajax GUI Builder
Sigma visual builder is a web based tool for AJAX RIA application UI rapid design and involved scripts programming.You can do everything by drag & drop with a significant development time reduction. It provides more than 40 common components, including Tabs, Dialog, TreeGrid, TimeLine and many other web GUI components.It's also compatible with jQuery, prototype, mootools and other javascript frameworks.

SAJAX
Sajax is an open source tool to make programming websites using the Ajax framework as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

ZK - Direct Ria
ZK is the most proven Ajax + Mobile framework designed to maximize enterprises operation efficiency and minimize the development cost. With groundbreaking Direct RIA architecture, ZK simplifies and speeds the creation, deployment and maintenance of rich Internet applications.

Related Content

- 10 Beautiful Web UI libraries
- Beautiful datepickers and calendars for web developers
- 20 Great PHP framework for developers

Read More

6 Interesting online presentations for web developers

If you are looking for free resources to learn Ajax, PHP, CSS and JavaScript take a look at this collection with six interesting online presentations about these topics. The list includes a short introduction to Ajax, how to write modular CSS code, PHP Object Model fundamentals and an overview about the most popular JavaScript libraries.


1. Ajax 101 | Workshop
Author: Bill Scott | This presentation on SlideShare
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.

2. Modular CSS
Author: Russ Weakley | This presentation on Slide Share
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds.

3. Understanding the PHP Object Model
Author: Sebastian Bergmann | This presentation on SlideShare
This talk will give an overview of PHP's object model, covering both basic OOP concepts such as interfaces, classes, and objects as well as PHP's “magic” interceptor methods.

5. jQuery in 15 minutes
Author: Simon | This presentation on SlideShare
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.

6. JavaScript Library Overview
Author: Jeresig | This presentation on SlideShare
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.

Read More

Free spell checkers for HTML Forms

In this post I want to suggest you five interesting and free spell checkers for HTML Forms (input and text area) ready to use in your web projects. I also provided some suggestions regarding how to implement them on your pages using a few lines of HTML and Javascript code. Try them!

Any suggestion about this topic? Please leave a comment, thanks!

1. Spellify
Spellify is a script.aculo.us based spell checker, released by Nikola Kocic, for form fields that utilizes Google as its spell check engine. Spellify can also be configured to different languages (refer to spellify.js for more information regarding language settings) and requires:

- PHP 4+ with CURL library installed (developed using PHP 4.4.6)
- script.aculo.us 1.8.0 (only effects.js and scriptaculous.js required)
- Prototype JavaScript Framework 1.6.0

To install Spellify on your pages add spellify.js, prototype.js and scriptaculous.js on the <head> tag of your page:

<script src="spellify/prototype.js" type="text/javascript"></script>
<script src="spellify/scriptaculous.js" type="text/javascript"></script>
<script src="spellify/spellify.js" type="text/javascript"></script>

...and copy the HTML code you find in the step 3 of this page. Then add a form with some fields like these:

<input type="text" id="search" name="search"/>
<input type="text" id="city" name="city"/>

In this way, all fileds will be cheked while an user types a word into them. Spellify can also ignore a specific text field by setting its class attribute to spellify_ignore. For example, if you want to ignore the input field "city" use this code:

<input type="text" id="city" name="city" class="spellify_ignore" />

Take a look at the spellify official page for a live preview.


3. GoogieSpell
GoogieSpell is a Gmail like spell checker that you can use in your own web-application. It support for around 27 languages; well tested and works on IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera etc; generic, extendable and easy to install; AJAX based (without page-reloading; Lightweight (around 50 KB); Well documented and with GoogieSpell Multiple it's possible to spell check multiple text fields at once. Take a look here for the demo and for the code.


3. Ajax-Spell
Ajax-Spell is a useful spell checker for HTML text area which requires at least PHP 5 and either pspell or aspell. The only thing you have to do to work with ajax-spell is to include spell_checker.js and the MooTools javascript library in the tag <head> of your page and add the class spell_check to any textarea you want to have a spell checker added to.

For example, add mootools and spell_checkers.js in this way:

<script src="mootools.js" type="text/javascript"></script>
<script src="mootools.js" type="spell_checker.js"></script>

... and add a text area like te following:

<textarea class="spell_check" rows="12" cols="40" name="text"></textarea>

Take also a look at this page for other information about this script.

4. ActiveSpell
ActiveSpell is a free ajax script to implement spell checking on any text box. It's maintained by ActiveCampaign, Inc and is based off of Ajax-Spell by Garrison Locke. You can fina download it here.

5. PHP Spell Checker
This simple PHP Spell Checker is used to spell check any of the input field of the HTML form. It is useful for webmasters who want to add spell checking to any text box (textarea) on their website or corporate intranet. The script is designed not to mess any way to your main script processing of the form. It just return modified (already spell-checked) text into any input field. It is written on PHP and using JavaScript as minimum as possible. Take a look at this page for more information.

Read More

10 Beautiful and free fonts for web designers

Are you looking for new interesting fonts to make inspiration for your new website or design project? Take a look at this list with some beautiful free fonts you can download and use on your creative projects.



1. Take out the garbage
Take out the garbage is a very nice font designed by Kirk Shelton. You can use it for free for personal, non profit use. For commercial licensing, please contact the author:



2. Vegur
Vegur is a clean font set similar to Helvetica family, designed by dotcolon:




3. VTKS Animal 2
VTKS Animal 2 is a brush-style upper case only font set created by Douglas Vitkauskas. Useful to design headers with a big font-size:



4. Nevis
Nevis, this strong, angular typeface is ideal for headings. It features 96 of the most commonly used glyphs:




5. Bedini
Bedini is an elegant font similar to Bodoni. Useful to design typographic-style websites:




6. Pappo's Blues
Pappo's Blues is an original font set very useful to enrich your design with handwritten style graphic elements:




7. 309
309 is another nice upper case only font set useful to design bold headers:



8. Philosopher
Philosopher is a beauty and elegant font maked with Erico Lebedenco:




9. 2 Peas Goofball
2 Peas Goofball is a funny and tiny font designed by Lorenzo Simo:




10. Diego
Diego is another interesting handwritten font:

 

Read More

Interesting Resources to learn Object Oriented Design

In this post I want to reply to all my readers which wrote to me in the past weeks asking to me to suggest some interesting resources for beginners to learn Object Oriented Design methodology.

This is a small list with some basic references about Object Oriented Design process and it includes an UML guide, some articles about how to write OO javascript, PHP and Perl code. I also included some video tutorials about an useful introduction to OO PHP. If you have some interest link to suggest about this topic, please leave a comment, thanks!


UML Guide
The Unified Modeling Language is a standard design specification that is overseen by the Object Management Group (OMG). UML provides a nice framework for designing and analyzing process, structure and their relationships. UML is a collection of the best technical modeling specifications and practices is use today. It is mainly used in developing software requiring Object Oriented Analysis (OOA) and Object Oriented Design (OOD).

Design Patterns | Object Oriented Design
Design Patterns OODesign provides general design principles about Object Oriented Design with some well explained tutorials and examples about this topic.

Object Oriented Analysis and Design
OOAD.com provides a lot of interesting link about Object Oriented Analysis and Design resources, forums, links, basic methodology, book and programming roadmap.

Object Oriented Design with Javascript
This is a serie of three article which discuss object-oriented features of JavaScript. Part one provides background on how JavaScript supports the main principles of object-oriented programming. Part two demonstrates how JavaScript constructs can be used to build a class inheritance framework and write scripts supporting a JavaScript class hierarchy. The third and final part shows how to use the JavaScript class framework to build object-oriented client-side abstractions of ASP.NET user controls.

- Writing Object-Oriented JavaScript 1/3
- Writing Object-Oriented JavaScript 2/3
- Writing Object-Oriented JavaScript 3/3

Javascript is not a OOP (Object Oriented Programming) Language, but it supports objects, so why don’t use them? It may not be the best thing if you just want to create some small scripts, but as soon as you do a bit more than just reading some data from a form, it can definitely make sense to use objects, because it’s much easier to reuse this code later on. Take a look at this interesting post about this topic from nino.net.

- 5 reasons to write object-oriented (oo) javascript
- Create Advanced Web Applications With Object-Oriented Techniques
- Understanding scope in object oriented JavaScript

Object Oriented Ajax Application Design
Greg Brown explains how to use basic object-oriented techniques to build more robust AJAX applications. The demands on JavaScript as a development platform are growing with the increasing popularity of so-called AJAX applications. The procedural development model commonly used to add basic client-side interactivity to web pages today will not scale to support the level of UI complexity required by these applications. Fortunately, and contrary to popular belief, it is possible to apply object-oriented (OO) design principles in JavaScript, which can help manage this complexity.

SUN | The Java Tutorials
If you've never used an object-oriented programming language before, you'll need to learn a few basic concepts before you can begin writing any code. This lesson will introduce you to objects, classes, inheritance, interfaces, and packages. Each discussion focuses on how these concepts relate to the real world, while simultaneously providing an introduction to the syntax of the Java programming language.

- What Is an Object?
- What Is a Class?
- What Is Inheritance?
- What Is an Interface?
- What Is a Package?
- Questions and Exercises: Object-Oriented Programming Concepts

Object Oriented PHP for Beginners
Stefan Mischook wrote this practical tutorial to teach total beginners object oriented PHP. So before you begin, get out your favorite PHP code editor and be ready to write and run some object oriented PHP code. You can also download a PDF version of this tutorial or watch the following videos:

- Introduction to Object Oriented PHP (4:05)
- Why learn Object Oriented PHP (14:46)
- Objects and Classes in PHP (5:26)
- Build Objects in PHP - Part 1 (9:14)
- Build Objects in PHP - Part 2 (9:41)
- Build Objects in PHP - Part 3 (6:18)
- Calling Functions from Another Class (5:36)

Perl Object Oriented Programming
Most people are not aware of the fact that Perl has support for object-oriented programming. If you've used another object-oriented programming language such as Java or C++ or been exposed to object-orientation, then object oriented programming in Perl is nothing like that. To do real useful object-oriented programming in Perl take a look at this article.

Read More

Useful Ajax Auto Suggest scripts collection

This post is a collection of some interesting and useful Ajax Auto Suggest scripts ready to use (from beginner or professional web developers) in your web projects. This collection includes standard auto suggest scripts, del.icious tag suggestion, autosuggest control to search images on Flickr, and advanced table filter with auto suggest control.

If you want to suggest other interesting links please add a comment, thanks!

1. Ajax Auto Suggest v.2
The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). This auto suggest class is very simple to customize and reuse in your web pages. Take a look here for the demo.

2. Woork PHP component: Autosuggest
Woork Autosuggest is a simple "PHP component" ready to use which implement autosuggest feature using PHP and MySQL. The component is lightweight (only with 8Kb) and ready to use simply customizing some parameters.

3. Spry Auto Suggest Widget
Spry Auto Suggest Widget (provided from Adobe Labs) use Adobe Spry framework to implement auto suggest feature in a input field. This is an example of using a Spry region and non-destructive filter to create an auto suggest widget. The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li.

4. Facebook-Like Auto Suggest
Guillermo Rauch's Facebook-like Auto Suggest is another auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

5. jSuggest 1.0
jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.

6. Yahoo! UI Autosuggest Control
Yahoo! UI Autosuggest Control uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.

7. CAPXOUS.AutoComplete
CAPXOUS.AutoComplete is a standalone widget without dependencies, lightweight (only 4 kb) which provides auto suggest feature with an huge scrollable drop down list. It's simple to customize and implement on your web pages with a lot of languages.

8. jQuery Tag Suggestion
jQuery Tag Suggestion plugin simulates del.icio.us tag suggestion as-you-type feature (when you save a bookmark on del.icio.us). Tag suggestion helps you create a subset of tags that you commonly use for different types of links.

9. Google Suggest Style Filter with the AutoComplete Control
Matt Berseth's AutoComplete control provides smarter filtering capabilities for data tables which allow the user to select a filter column from a drop down list. Take a look here for the live demo.

Related Content

- File uploaders collection for web developers
- Best Image Croppers ready to use for web developers
- Beautiful datepickers and calendars for web developers
- Useful resources to improve the look and features of HTML Forms

Read More

Interesting html FORM Validators for web developers

This post illustrates how to use some interesting HTML Form validators to check FORM fields writing only some lines of HTML and JavaScript code. All these proposal are lightweight, cross-browser and simple to use and customize in your web projects in few minutes.

If you have some suggestion about this topic, please leave a comment. Thanks!

1. MooTools FormCheck
FormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm...), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.

FormCheck is really simple to implement. In the <head> tag of your page add the folloing lines of code:>

Add a link to MooTools Framework:

<script type="text/javascript" src="mootools.js"></script>

...choose FormCheck language (in this case english):

<script type="text/javascript" src="formcheck/lang/en.js"></script>

...include the FormCheck script:

<script type="text/javascript" src="formcheck/formcheck.js"></script>

... and initialize FormCheck using this code:

<script type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('formular');
});
</script>

You can use default CSS theme for your form using this code:

<link media="screen" type="text/css" href="formcheck/theme/classic/formcheck.css" rel="stylesheet" />

At this point, create a form in the tag <body> of your page:

<form action="#" method="post" id="formular" class="formular">
<form>

... and add some fields into the form like these:

<input type="text" name="user" class="validate['required','length[4,20]','alphanum'] text-input" />

How you can see in the previous code, the syntax to use this validator is really simple. You have to add this code into attribute "class" of the input field:

class="validate['required','length[6,16]','alphanum'] text-input" />

...it means: validate this field; this field is required, min lenght is 6 chars and max lenght is 16 chars; this is an alphanumeric field. When an user submit the form, the result is the following:

Simple No? Take a look at the demo.


2. Live Validation

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete. In this example you can see how to match the value contained in two fields.

In the <head> tag add a link to the livevalidation script:

<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>

...create two fields:

<input type="password" id="password" />
<input type="password" id="confirmPassword" />

...and than add this script below the second input field:

<script type="text/javascript">
var confirmPassword = new LiveValidation('confirmPassword');
confirmPassword.add(Validate.Confirmation, {match: 'password'});
</script>

This is the result if the content in the first field matches the content in the second field:

...and this is the result if the content doesen't match:

Take a look at this page for a full documentation support about LiveValidation.


3. ProtoForm
ProtoForm is an unltra lightweight, unobtrusive cross-browser and very easy to customize form validation + submit with Ajax based on prototype.js framework. It checks required fields and validate Email, Date, Telephone number and Url, send data and shows response with Ajax, highlight the form field on focus and on error.

You can implement this script on your page with only some lines of code. In the <head> tag add a link to the Prototype and ProtoForm script:

<script type="text/javascript" src="prorotype.js"></script>
<script type="text/javascript" src="prorotype.js"></script>

Then, create a form within a div with ID="box":

<div id="box">
<form action="#" method="post" id="send" class="validate">
</form>
</div>

At this point add some input field into the form like the following:

<input type="text" id="email_Req_Email" name="email" title="Required! Enter a valid email address!" />

In the propery id I highlighted in bold validation options (_Req, _Email). The ID property of fields you have to validete will be something like: name + _option1 + _option2 +....

The "title" attribute is used to display an error message. For a full documentation about this script take a look at the official page.

That's all. If you have some suggestions add a comment, thanks!

Read More