Arranged Delirium

Students in web design are creating (possibly) a new web site for the ITL department. But one thing that is always important to me is making sure that everyone know how to publish email links without just putting them out there for spam-bots to harvest. There are all sorts of complicated ways to prevent this; but there are also some very simple ways that can limit the nefarious spam industry. Here are the simple ones in order of complexity:

1) You simply use the [amp#64;] character instead of the @ sign in your code. This is quite easy; but there are numerous email harvesting spiders that can reconstruct this, so the amount of protection is very minimal.

2) You could also use characters or even type the address differently to obfuscate the address: name (at) washjeff _dot_ edu. This works a bit better, but depending on the formulae, most of these have been cracked; and from a user-interface perspective it can create effort on the part of the sender. This is a less than ideal solution if you actually want people to contact you. Plus, its pretty easy to de-munge.

3) In your code you could replace the actual text with hex values for the characters. This provides a bit more protection that the steps above, but there are still bots that can crack it. That being said, unless you are attracting spammers, it’s probably enough protection. Most certainly, it’s better than nothing! You can find tools online that will generate this for you. This is probably the course of action that you want to take if you are avoiding javascript.

4) You can use javascript to obfuscate the email address. As long as users have javascript enabled, they will see a clickable email address, but the bots will encounter javascript. It’s only a matter of time until this process becomes less effective; but thus far it still works well for me and the organizations I’ve done development for. I use the online tool Enkoder to generate the javascript for me. Supper-easy.

Of course there are better ways to do this - you could create a form, use captchas (annoying), or use a php script to protect email addresses. But truthfully, the javascript method works well enough unless you are being targeted and it is much better than just posting the email address out there where anyone can see it. Publicly broadcasting email addresses is a sure indicator of novice development - you don’t want to do it.

I had a student yesterday that needed to resize a good number of images. I told him to go look for some online tutorials (and there is 1 good one) but many of them were, well, more difficult than they needed to be. So, for student of new media, here’s how you resize multiple files at once:

Step 1) File menu -> Scripts -> Image Processor…
Step 2) Identify the source directory
Step 3) Identify the destination directory
Step 4) Make your desired changes
Step 5) Click the Run button

Thats it. There are a number of other options you can select if you know what you are doing, and as usual - you’re mileage many vary if you are using earlier versions. (For instance, I think the sub-folders option only came around in CS4, so if you are using the machines downstairs with CS3 you are out of luck.) Another tip: If you are at all confused about file locations and directory structures, do yourself a favor and just make two folders on the desktop: one with all the images you want to modify, and another one for where you want the new images to appear.

Rounded corners should be easy. As I’ve been doing more work with mobile app development, I’ve realized that I have a number of old ways to do it, but I want to get it done fast. So, I’ve put together this little example for making quick rounded edge icons for mobile apps; but you can extrapolate the process for about any image.

First some assumptions: we’ll want to save this as a 24-bit png file - don’t worry, it’s so small it wont make any appreciable difference as far as file size is concerned. Speaking of which, I’ll be using a resolution of 114X114 pixels which will ensure the image looks good on high resolution displays (others will simply render it down to the right size). Lastly, I’m assuming we’re all working in RGB mode. If you are taking an image you’ve already used and indexed (as a gif or png file) make sure you change the mode you are working in or you’ll be flummoxed.

OK, so here we go:

1) Open your file and re-size to 114X114 pixels.
2) Select your Rounded Rectangle tool. You’ll want the defaults for the tool selected in the options bar - specifically, ‘shape layers’ - and set the radius to your desired amount (I recommend 20px).
3) Draw your shape - this will create a new layer for you, with a vector mask. How convenient!
4) CMD-click on the vector mask (in History, you’ll notice this loads a new selection).
5) Click on the original background layer and press CMD-J (this copies the selected pixels to a new layer).
6) Make the original layer and the layer with the vector mask invisible, then Save for Web as a 24-bit png file with transparency.

Of course, as with anything Photoshop, there are a dozen ways to do this. I’ve just found this to be the most efficient for me. I could have made a selection, inverted it, and smoothed it out, and then deleting the pixels in that inverted selection. But I wasn’t as pleased with the edges of the corners, and I found it usually left me with additional trimming work to do. So, I think this works most efficiently.