Texelate - the Leeds Web Design StudioHomeAbout MeServicesTestimonialsPortfolioBlogQuoteContact
My BlogGet a free quote now

Tutorials and How-Tos

Archive for the ‘Tutorials and How-Tos’ Category

How to prevent spam form submissions

Monday, January 12th, 2009

Most webmasters will have a form – or forms – on their site. And most of those forms will get targeted by spam software bots looking for any way whatsoever to get links to their spurious offerings onto the World Wide Web. And it’s not just one-offs either; once found this abuse will be relentless and over time, downright irritating. Ask any web developer and they will talk to you with great vigour about spam and their vendetta against it.

There are many steps a webmaster can take to prevent unsolicited form submissions and everyone has their own opinion as to which one works best. This post will outline five of the main methods and will also outline their respective pros and cons.

1. CAPTCHAs

A CAPTCHA is an image that contains a verification code; the user must enter the code to prove they are not spam. Since some spam bots have basic optical character recognition capabilities, some CAPTCHAs attempt to obscure the code by warping the figures or setting them against a ‘noisy’ background.

How effective is it? Since spam bots are acquiring increasingly sophisticated levels of character recognition, CAPTCHAs are being presented in increasingly more obscured formats. The result is that while many of them are very effective in deterring spam, they are also very difficult for humans to read too.

2. Hidden Form Field

This simple method involves adding an extra text input element to your form. In an external style sheet you set the element to display: none; thus making it invisible to all users with CSS enabled. Since spam bots will usually fill all fields in a form you know that any forms submitted where this invisible field is not empty are spam.

How effective is it? In most scenarios, this method will filter out the majority of spam. However, many bots are wise to this method as it is relatively easy to parse the CSS and determine if it is hidden. The extra field will also display for users that have CSS disabled. In its credit, this is by far the most unobtrusive as most users will not even know a spam check is taking place.

3. User Authentication Link

Lots of forums use this method (in combination with a captcha). The form must ask for a valid email address; when the form is filled out an email is sent to that address along with an activation link, which the user must click for the submission process to be completed. This means that spam bots fill out the form but since they don’t give out a valid email address – and they aren’t human – they never complete the process.

How effective is it? This works very effectively but taints the user experience as further action is required from them even after they have submitted the form.

4. Use JavaScript

You can render your entire form simply by document.write() for each line of the HTML form. The function that writes the form can be placed in an external JavaScript file. Since you’re using JavaScript you can store each line in a variable and mix them up a little to confuse any bot that does actually attempt to parse the source code.

How effective is it? If the bot can’t parse basic JavaScript – the general consensus is that most cant . . . yet – then this one works well (and the bots are less likely to find it in the first place). The downside is the bots are getting smarter – so this method isn’t so future-proof. So unless you obfuscate your code you may not stop all the spam. Another con is that if the user has JavaScript disabled they cannot access the form either.

5. Ask A Simple Question

Add a simple question to your form; it can be anything that you’d assume everyone knows the answer to. For example, what colour is the sky? Then add an extra text input element to your form.

<input type=”text” name=”spamanswer” value=”" />

Then add a hidden input element that states the answer.

<input type=”hidden” value=”blue” name=”spamsolution” />

Then all you need to do is check whether the POST values of spamanswer and spamsolution are the same. If they are, it’s a legitimate submission. You can add further spam protection by removing the hidden input element and keeping its value server-side (in a text file or database). If you use this method, you should make sure that the answer is obvious to anyone, regardless of their academic background. And you should also compensate for common typing errors and case sensitivity.

How effective is it? Using a simple mathematical question such ‘What is the sum of one plus seven?’ is arguably the most effective way of filtering out spam submissions. If you use words for the numbers (e.g. seven instead of 7) you will make it even harder for the spam bots to decipher. And seeing as it involves adding two numbers together it is even accessible to people who perhaps don’t speak your language as their first language.

Conclusion

There are other methods of course and these can be combined for extra effectiveness. We should exercise caution however. Any spam filtering we do, should do just that. Filter spam. The moment legitimate visitors fill a form out that gets sent to its destruction – along with all the other spam – or the moment a legitimate visitor gives up trying to fill the form out means we’ve taken our vendetta against spam too far.

Blurred reflections in Photoshop

Thursday, January 1st, 2009

Note to the reader: This tutorial is written for those who have a good knowledge of the fundamental tools used in Photoshop. The instructions are written for Photoshop CS 2 on Mac OS X but can be easily adapted for other versions and platforms.

The tutorial will teach you how to take an image and create a blurred reflection effect. This tutorial uses the text below but you can apply it to any image. In this tutorial the image is quite bright so it is set against a dark background; the principals in this tutorial will also work for a dark graphic on a light background.

The end result in this tutorial:

finish

If you wish to use the image in the tutorial save the image below to your hard drive. Otherwise, you may use an image of your own as long as it has some transparency.

start

1. Create a new canvas 250 pixels by 250 pixels. Ensure the Colour Mode is set to RGB.

2. Select the Paint Bucket Tool and set the foreground colour to 47484a. Fill the Background layer with this colour.

3. Open the image you are going to apply the reflection effect to in Photoshop. You can either choose File > Open or you can drag the image to the Photoshop icon in your dock (Macs only). Once opened in Photoshop drag the image into the canvas you created in step 1. Using the Move Tool position the image in the centre of the canvas and just above halfway as in the image below. Rename this layer to Image.

3

4. Right-click the Image layer and choose Duplicate Layer… and name the layer Reflection. Note, if you don’t get the choice to rename the layer on its creation you can simply double-click the layer name in the layer window.

5. With the Reflection layer selected choose Edit > Transform > Flip Vertical. Ensure the Move Tool is selected and press the down arrow until the layer mirrors the original like in the image below.

5

6. In the layer window reduce the Opacity of the Reflection layer to 30%.

6

7. Now it’s time to blur it. Still with the Reflection layer selected choose Filter > Blur > Gaussian Blur. Set the Radius to 1.0 and click OK.

7

Tip: If you want a crisp glass-like reflection leave the above step out.

Tip: The radius of the blur should reflect the size of the image. The larger the image the larger the radius of the blur should be.

8. In the Layers window click the Add layer mask button and then select the Gradient Tool (it shares the same space as the Fill Tool). In the tool bar at the top ensure the colour is set to go from black to white and that it is set to Linear Gradient. It should look like this:

8

9. With the Gradient Tool and Reflection layer selected drag from the bottom of the Reflection layer (where the text ends) vertically in a straight line up to where it starts (at the top) as illustrated below. It must go from bottom to top else the fade will go the wrong way.

9

10. Your reflection should now fade like this:

10

11. The reflection is now complete but further visual tricks can be added to increase the sense of depth. Firstly, select the Background layer and then select the Rectangle Tool. Set the Foreground Colour to black (000000) or any colour that will stand out. The colour is not important as it will change later. Then draw a rectangle that covers the whole bottom of the canvas up to the bottom of the Image layer.

11

12. Rename this layer Floor. With this layer selected choose the Add a layer style button and choose Gradient Overlay. Apply these settings:

12

13. This subtle effect gives an illusion of depth. For a further illusion of depth right-click the Image layer and choose Duplicate Layer… and name the layer to Shadow.

14. Choose Edit > Free Transform and hover your mouse over the top-middle box. Drag down until the layer is severely squashed and hit Enter. It should look like this:

16

15. Choose the Move Tool and hit the up arrow a couple of times to line the Shadow layer with the bottom of the Image layer.

16. With this layer still selected choose Add layer style and choose Colour Overlay. Set the colour to black (000000) and choose OK.

17. Set the Opacity of this layer to 50%. Then choose Filter > Blur > Gaussian Blur and choose 1.0 for Radius. Your effect is finished.

finish

 
Click here to start your web project
Texelate - the Leeds Web Design / Web Design Leeds Studio Site Map © 2010 Texelate