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

Archive for January 2009

Archive for January, 2009

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.

New website, new blog

Monday, January 5th, 2009

Well, I finally got round to redoing my site. This is version three! I think – and hope – you’ll agree it looks much better than version two. Here are the fundamental differences:

Cleaner layout
Less text
Categorised portfolio
Stronger marketing messaging on the home page
WordPress blog

Cleaner layout

I felt version two was too cluttered. The three column layout and all the icons – which were there to make the site look clean and easy-to-use – ironically made it look messy and confused. I’ve kept the logo and the dark bar across the top but have moved the menu there to save space. Looking back at version two I see now how much of the screen was eaten up by the header. Other than the portfolio pages this version has just two columns and unlike version two, every page places some emphasis on the portfolio.

Less text

I went a bit overboard on the copy on version two. I have consolidated the services text down to one page; I think it works much better that way. People just want to know you have satisfied customers and a good portfolio of work. After that, they just want to know how to get a quote, they don’t want pages of guff about what you do and who you are.

Categorised portfolio

My portfolio was getting pretty big (which is a nice problem to have) so I have split this into sections. It works really well and I have added a neat AJAX loading feature that nicely binds all the categories together. The business/corporate section is by far the biggest, maybe version four will break them down even more.

Stronger marketing messaging on the home page

I realised there was nothing particularly impressive on the home page; I wanted something that would really make an impact to prospective customers. I do get quite a lot of qualified traffic from Google so version three really aims to monetise on that traffic.

WordPress blog

And finally there is the addition of the blog – and this is the first ever post of that blog. It uses WordPress, which I have to say is absolutely fantastic. I got the initial install running in a couple of minutes and soon had it integrated into the rest of the site; it’s a piece of cake if you know PHP. I added the blog because ‘Try out WordPress’ had long been on my to-do list and also I find as a web designer / developer there are certain issues I come across on a regular basis. The blog serves as a platform for me to address these issues and use them as a reference point for my customers. I don’t envisage blogging more than once a month or so but that should be enough.

That’s it – let me know what you think.

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