How to Convert a PSD to XHTML

Nettuts.com is one of my new favorite web development blogs. One of their recent posts is pretty cool, especially for those new to web development.

http://nettuts.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/

Transparent PNGs in IE6

For some unknown reason, a significant amount of people still use Internet Explorer 6 as their browser of choice. Since that’s the case, web developers such as myself have to continue to test our websites in IE6 to make sure they work as desired. The majority of the problems in IE6 caused by CSS can be resolved by using a Global Reset Stylesheet and by building in valid, clean code. However, problems still remain, such as IE6’s inability to support alpha-channel transparency for PNG image files.

There are a number of options for getting PNG transparency to work in IE6:

pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm) – This is the first “hack” I came across a year or so ago and it’s been the one that I continue to use. It’s a simple JavaScript file that seems to do the job for most regular transparent PNG files in IE6. The biggest downfall I’ve had with it is that it does not support the background-repeat property for tiled backgrounds. Also, on the author’s homepage, he explains how the script hasn’t been updated since 2004 so he suggested to try out the SuperSleight filter.

SuperSleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – I’ve also used this before but it’s a bit awkward and clunky since it uses a proprietary filter called AlphaImageLoader. It might be worth looking into if you’re looking for something that has been updated more recently than 2004, but it still does not support the background-repeat property, which is the only reason I would not use the initial pngfix.js.

IE PNG Fix (http://www.twinhelix.com/css/iepngfix/) – This one uses CSS behaviors, which is a custom Microsoft extension to CSS. It apparently also uses the AlphaImageLoader filter that SuperSleight uses. Most importantly, the IEPNGFix v2.0 Alpha version found on the test site apparently now supports the background-repeat property. If that’s the case, then I have found a new PNG fix! I haven’t used it yet but once I do, I’ll update the blog with my observations.

Until Microsoft requires users to update their browsers from IE6, we will always be presented with the problem of PNG transparency. Hopefully, the options above will help!

Keyword Questions from Wordtracker

Here’s a sweet keyword research tool from Wordtracker. Plug in a keyword for a list of the most frequently searched questions containing your keyword.

http://labs.wordtracker.com/keyword-questions/questions

Stop Dreamweaver 8 From Creating _notes Folders and dwsync.xml File

Ever since I upgraded to Dreamweaver 8, I’ve been annoyed by the _notes folders that are automatically created in each directory of the site. Of course, they are hidden in the Dreamweaver file view but they are visible in Windows Explorer if you are not hiding hidden file types. I often find myself having to delete these folders whenever I package up website files to send to other developers or designers. This link below provides a solution so that Dreamweaver 8 never creates the _notes folders and dwsync.xml files in the first place.

“Macromedia Dreamweaver 8 creates an _notes folder, even when you have the preference turned off in the Design Notes category of the Site Definition dialog box. Dreamweaver also creates a dwsync.xml file inside the _notes folder. When you run Clean Up in the Design Notes category of the Site Definition, Dreamweaver does not delete the dwsync.xml file or the _notes folder. (Ref. 196185)

Dreamweaver 8 keeps file synchronization information in the dwsync.xml file which is located in the _notes folder. Although the dwsync.xml file resides in the _notes folder, it is not a Design Note. The Clean Up design notes command only cleans up MNO files.

If you don’t use Dreamweaver’s Synchronize feature, you can disable the “Maintain synchronization information” option from the Remote Info category of the advanced view of the Site Definition dialog box. This will delete all of the existing dwsync.xml files and stop the creation of future dwsync.xml files and _notes folders.

Note: Disabling the “Maintain Synchronize Information” option will prevent you from using Dreamweaver’s Synchronize functionality.”

http://kb.adobe.com/selfservice/viewContent.do?externalId=91b33859&sliceId=2

How to Stop Contact Form SPAM

The majority of the websites I develop for clients have contact forms on them for a variety of reasons. First, it’s more convenient for users to fill out a form within their browser window as opposed to requiring them to open up their email software to write an email from scratch. Second, it’s the primary method of measuring generated leads/conversions, and clients can require exactly the information they need to qualify leads. Third, by using a contact form, clients won’t have to publish an email address on the site for spam bots to harvest. However, contact forms are definitely vulnerable to being flooded with spam and that’s why I am writing this post on how to prevent exactly that. I use a variety of methods which tend to prevent 99% of automated spam submissions:

Step 1. Validate The Form Fields – Check to make sure all required form fields are filled out before processing the form. I posted about a generic form validation script awhile back, and I would still recommend it. It uses JavaScript to check that every required field is filled out and checks that the email address is formatted correctly. It’s simple and nothing fancy. However, it would not be very effective on its own since most bots bypass any JavaScript security measures.

Step 2. Validate The Referrer – If you are using a separate file to process the form, make sure to validate that the form is being submitted from the page with the contact form. This will prevent bots and spammers to automatically access the processing file to spam it. However, the referrer can easily be spoofed and often is, so this method alone is certainly not bulletproof.

Step 3. Hide Fields with CSS – Most bots and spammers will automatically fill out every form field that is on the page. One way to stop them is to insert a blank field in the form but hide with CSS “display: none;”. Add some code to your form processing file to check to ensure that the hidden field remains empty; if it’s not, it’s most likely filled out by a spammer and thus should not be processed.

Follow those 3 steps and you’ll be much better protected against contact form spam.  There are definitely additional measures you can use such as more complicated JS validation, CAPTCHAs, and asking simple questions that only humans can answer (1+2=?, what color is a cardinal?, etc.), but I’ll write more about those in another post.