Home arrow DHTML arrow A Basic Method for Building Noisy Images

A Basic Method for Building Noisy Images

Noisy images (used for captchas) are one way to help insure the security of online forms and prevent them from being abused. In this article, the first part of a three-part series, you will learn how to build noisy images with a simple combination of CSS, (X)HTML and a friendly scripting language, such as PHP. This method offers less complexity than the more conventional methods of building noisy images.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
May 14, 2007
  1. · A Basic Method for Building Noisy Images
  2. · Creating a simple contact form
  3. · Defining a simple PHP script
  4. · Completing the creation of a noisy image

print this article

A Basic Method for Building Noisy Images
(Page 1 of 4 )

A downloadable zip file is available for this article.

Undeniably, for a long time the Internet has been considered to be a pretty insecure network, and this infamous attribute, for better or worse, is a direct consequence of its intrinsic nature. After all, theoretically it's a worldwide open system, where a massive number of computers are interconnected with each other, thanks to the implementation of set of standard communication rules known popularly as protocols.

Unfortunately, as you know, these protocols are actually quite far from being completely invulnerable. This issue continues to give headaches to a huge number of Internet users, ranging from seasoned system administrators and developers to average people. Logically, all of these concerns are automatically transferred to specific areas of the global network, where the web is perhaps the most affected, since it has the largest number of visitors.

Of course, from a web developer's point of view, building secure web sites should be a primary goal (again, here I'm speaking only in a theoretical aspect). That's the main reason for the existence of a vast arsenal of tools and applications aimed at improving the overall level of security of those web sites.

Naturally, the grade of security of a given system is determined by its weakest element, and this principle also applies to web sites. But, if you rethink this concept carefully, I'm pretty certain that the first thing that will come to your mind when you consider one of the most vulnerable components of a website, is...online forms. 

Yes, once a web site is up and running, it must provide its visitors with a straightforward method of contact, regardless the nature of the site. If a web form was already set up a for that purpose, here is where problems start to show up. This fact is widely known by most developers: along with the flow of legitimate emails that are received via an online form, you will probably get faked messages, which are sent out by malicious users or by automated systems.

In either case, a simple yet effective method for preventing, at least partially, the submission of automated email via web forms is the implementation of so-called noisy images. In most cases, these are surprisingly easy to create. Since this technique is becoming extremely popular with many modern web sites, over the course of this three-part series I'm going to walk you through the process of building these images. I'm going to use a slightly different approach that eventually might be quite appealing to you.

As you know, noisy images are generated mostly by server-side image libraries; nonetheless, in this series I'm going to show you how to build them by utilizing a simple combination of CSS, (X)HTML and a friendly scripting language, like PHP, so you don't need to deal with the complexities of an image library.

Speaking more specifically, first I'm going to use a procedural approach to create the images in question, and then follow an object-based approach, in this way providing you with a decent number of methodologies for implementing this handy mechanism into your own web sites.

So, are you ready to learn how to create noisy images in a few easy steps? Okay, let's begin now!

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials