Earlier this evening while kicking back to a movie (thanks to John P. for helping me figure out my audio), Mailplane + Growl notified me of a new message with a Subject line to difficult to ignore. George from the OS9USER News Room wrote:

We recently did a digg on the article you published on gmail (scams). We dugg your story , and wanted a picture to go with it to publish your digg with our news feeds. Your picture changed when we linked to it with your referring story. The contents of that picture is totally un-exceptable…. so we reported your site to the authorities.

We have only one question ? Why have malicious coding when we digg your story ??? We wanted a picture to include your story In Our News Room, but when our reporter was doing another story, they noticed that your picture had changed. It as a “hot link” to a picture that you used on your story, along with a dugg story …..

When your site saw the referring url from the users explorer, you switched the IMG to another picture.

Note : We dont bow down to anyone. You dont have to answer our email, but tucows , google , yahoo and a few others may ask the same questions. We have a response from Yahoo already. It was quickly answered.

Thanks for the digg on the Gmail phishing email warning. After reading the [above] email, I immediately came to my senses and understood what this comment was all about. Well George, let me introduce you to my little friend - Mr. htaccess Rewrite and the scorned in-law Ms. hotlinking.

What is hotlinking?

Defined:

Bandwidth theft or “hotlinking” is direct linking to a web site’s files (images, video, etc.). An example would be using an <img /> tag to display a JPEG image you found on someone else’s web page so it will appear on your own site, eBay auction listing, weblog, forum message post, etc.

If you’re publishing content online with an image that is served from someone else’s server, you are "hotlinking" - unless of course you are using an image hosted on public sites like ImageShack, Photobucket, or Box.

I copied an image and it changed after a refresh!

Prior to the public release of Grid Focus, I had created a few Rewrite rules to deal with individuals who had begun distributing the theme without permission. As-is customary for many situations where content is re-used or distributed without permission, images used in the theme were still hosted on the local server. With a few .htaccess rules, anyone can easily serve alternate image for any external requests.

Target specific external domains and serve an alternate image

In order to serve your own "personalized" nohotlink image for specific domains, use:

# STOP hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ nohotlink.jpg [L]

This first two lines of code tell the server to replace image requests from myspace.com & blogspot.com. The last line tells the server that for any image filetype request - jpg, jpeg, gif, bmp, and png - serve a personalized nohotlink.jpg image.

Deny all image requests from all domains other than your own

#STOP hotlinking
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com(/)?.*$ [NC]
RewriteRule \.(jpe?g|gif|bmp|png)$ nohotlink.jpg [L,NC]

The above snippet will replace external image requests from any domain other than your own with your own nohotlink.jpg image. Find more examples for preventing hotlinking here.

George, stop misinforming internet users. There are no malicious scripts that swap images here on 5thirtyone.com.

Basically your referring URL (from your explorer) is stored in a cookie, which triggers the script to do whatever. In this case, change the IMG Path to another location. Our IMG=5thiryone.com/… activated a script on that site, that adjusted your screen accordingly. This problem was caught, and luckly did not get out in our feeds what-so-ever.

The only scripts that are activated are the imaginary ones in your head, or ones from your own site.

Every week we sit down for humor/drama/angst/sorrow/disbelief with Rescue Me (starring Denis Leary as a substance-abusing, sex-addicted, post-9-11-traumatized death-wish-harboring fireman). Every week Match.com runs an ad that tries to link their brand to the Rescue Me brand.

Yes, Match.com. The site that says “Last year alone, more than 500,000 singles found meaningful relationships through Match.com’s online personals and singles ads.” Meaningful relationships? Have they ever watched Rescue Me? Here’s some of the “meaningful relationships” that the show has dealt with

• Denis Leary’s character (Tommy Gavin) lives across the street from his estranged wife, and does some very nasty stuff to sabotage her relationship (I seem to recall the man being framed for some credit fraud)
• Tommy’s brother takes up with the same estranged wife, and Tommy seems to rape her (but maybe she’s willing?) in response (oh, and the brother is killed and the wife has his baby)
• In parallel, Tommy takes up with the Sheila, the widow of his cousin (killed on 9-11) and they are on again and off again (violently) when she shacks up with a physically abusive lesbian
• Tommy gets involved with the woman who teaches Sheila’s son, who is also having sex with the son
• After finding his wife in bed with another fireman, one firefighter decides to “rescue” a prostitute from the life, only she scams him for his life savings
• He becomes an alcoholic, then gets involved with a nun who is leaving her calling but ends it when he can’t keep up with her voracious and unemotional sexual demands

This barely scratches the surface. The storylines move far and wide, but you no doubt get the point. How does this really fit with what Match.com is offering? Match.com could be a way to avoid having your life turn out this way, but that’s not how it’s presented.

Seems like stupid advertising to me.

1. Magnetic Lasso / The Quick Way To Cut Out

To get a perfect cut out I would normally use the pen tool (Hot Key: “P”), and manually draw around the subject matter (”subject matter” I sound like a pro… ahem) but today we are going to look at those little bits of Photoshop that don’t really see the light of day and we are going to use the magical and mysterious “Magnetic Lasso Tool”. Simply click and hold your curser over the lasso tool icon and a few lasso options will appear. Select Magnetic lasso, third along.

Now we’re set. Start by selecting the edge of the subject matter (there I go again), and move the curser around its edge, guess what – it does all the tracing for you! As if by magic… It’s not perfect but we’ll deal with the little bits which escape the selection later. Continue around the contour of your desired cut-out and finish up back where you started. The area will automatically be “selected”. This technique is superb for very swift cut outs which may not need to be 100% perfect. For example your cutout might be for a concept or for the web, the only limitation is that the image and the desired cut-out need to have a little contrast.

By the way, in case I forget, the image we are using here is from the free stock library people over at stock.xchange. If you want free stock images, go and check them out. Be sure to read all of their terms and conditions. This picture is no. #840073 taken by Dirk Herrmann.

Ok, so what about those areas which haven’t come out exactly as desired? For example in the image below you will see the shoulder has an area which has been trespassed upon. Well, make sure your subject matter is still selected (the dashed line) go to your paths palette (Window > Paths). Click the little arrow on the top right hand side, this will pull down the “Paths” menu. Now select “Make Work Path”. We now have a vector “path” of the cut out which will appear in the paths palette. We would have a similar looking palette if we had used the pen tool but this way, using the Magnetic Lasso Tool, it means we can do things much swifter.

Ok now we use the “Direct Selection Tool” (Hot Key: “A”) to select the vector nodes which are reproaching upon the shoulder. Click and drag over them and then hit backspace and they will disappear into oblivion. Now use the pen tool (Hot Key: “P”) to join the shape up again, this time following he contour of the shoulder. You may need to use this technique in a couple of places where the trace has not gone as well as anticipated.

You should now be left with a path which goes all the way around the subject matter and which should have taken you much less time than if you had used the pen tool. Whoopee.

2. Layer Masks / Enable Future Editing

In your “Paths” palette move your cursor over the “Work Path”. Press your “Option” key on your keyboard and click with you mouse. You will find that the path area is now “selected”. Have a look at your layer palette. To make a “Layer Mask” on a layer it cannot be locked so you might need to double click the layer and press ok on the menu to unlock it. Now go to go and create a “Layer Mask” on that layer (Layer > Layer Mask > Reveal Selection). And boom, you should have yourself a layer mask! Below is a before and after:

The benefits of a Layer Mask are quite simple, you can edit the original layer separately from the mask and visa versa. This gives you great flexibility and can save an awful lot of time. But what happens when you are done with all your editing and wish to continue without a mask? Well all you have to do is go to the little arrow on the top right of your layers palette and select “Apply Layer Mask”. This will dispose of the mask leaving you with a very respectable cut-out – see below!

3. Liquify / Smooth Those Edges

The “Liquify” filter tool is a photo-retouchers most prized possession. By mastering this tool you can make subtle but effective tweaks which can make all the difference to an image. Go to the following menu to use it: Filter > Liquify (Hot Key Combination: “Shift Option X”).

We have used the liquify tool to smarten out the clothing and hat a little. Incidentally have you ever had a look at the Filter Gallery in the “Filter” menu dropdown? Check it out as it can be quite handy in helping you find a desired filter quickly.

4. History Snapshot / Go Back In Time

Have you ever found that you go to your history palette only to find that you can’t go back as far as you wanted to? Well you need to start using the “History Snapshot” tool. The basic idea is that at any time you can make a snapshot of your document and jump back there at any time. Be warned though, if you close your document all your snapshots will be lost. This tool is very useful if you are working on an image which requires a lot of manipulation but you’re not too sure how it will turn out. If it turns out badly you can always go back a few stages if you’ve used the snapshoot tool.

So how do you use this snapshot thingy? Go to the “History” palette (Window > History). You will see what looks like a camera icon placed along the bottom of the palette. If you press this you will find that a second area will appear under the depiction of the start of your file. You can name this by double clicking on it.

So make sure you start using this as it can save your skin when you least expect it to! Donations welcome

5. Smudge / Good Hair Day

You may have wondered about the area of hair which we seem to have neglected. The smudge tool can really help in getting a cut-out of a person to look as though they have really stood in front of the backdrop. Hair tends to have an element of transparency and minuet detail which a standard cut out cannot give you. The smudge tool can help in this. For advanced users, we are aware of the “Extract” filter but have found the smudge tool is far swifter and more effective to use.

So how do we use it? Go to the “Tool” palette and click and hold over what is set to default as the blur tool. You will find a set of three options pop out of the side, the last of which is the smudge tool (Hot Key: “R”). Adjust your brush size and click and flick on the hair areas to give the effect of stands of hair. This may take a while to master but its very useful.

You can see how effective this is below:

Whilst you have the smudge tool selected you can also use the “Option” and “Space” key combination to zoom in and the “Alt” and “Space” key combination to zoom out.

6. Distort / into 3D effect

This is a tasty way of adding some zip into a design. We start of with a rectangle. We created this by adding a new layer (turning the others off) and, using the Marquee tool (Hot Key: “M”), to draw a rectangle. Fill this by hitting “Option” and “Return” together.

Now press “Option T”. You will see that some handles appear around the layer. Right click on the layer and a “transform” menu will appear. Select distort. If you put your curser over a handle you will find that you will be able to click and drag it along which “distorts” the object (now there’s a surprise!). See below for our results:

You will be able to do this on the original image as well which we have done to create the 3D Polaroid effect above.

7. Grayscale / with Hue & Saturation

I have known some people to copy a coloured image, open a new file, paste in the coulored image, then go to image > mode > greyscale, then they copy the black and white image back into the original document. That’s an awful lot of work just to make something black and white and this can be achieved very easily by using the “Hue and Saturation” settings.

Make sure the layer you want to be “greyscaled” is selected in your layer palette (or make a selection using the lasso or marquee tool) then go to Image > Adjustment > Hue/Saturation (Hot keys: option U). You will now be faced with the Hue and Saturation settings window. Move the middle “saturation” slider down to -100. Hit ok. Bing bang bong. Black and white area should now appear.

Also have a play with the hue and “colorize” options and get creative with some colour tinting!

Conclusion

So there we are. Chances are there must be something in that lot which could help you out! If anybody has any comments or questions, please be sure to make a comment below…

A beautiful young woman possesses the power to transform a legendary giant serpent into an almighty dragon who can only ascend into heaven with the woman’s ultimate sacrifice. But the forces of darkness are out to claim the young woman as their own and her reincarnated lover and his aged mentor stand in their way.

To people who have been following this blog for some time it may seem like I take every opportunity I get to mention how little attention content management system vendors in general are paying to web standards and accessibility. Come to think of it, that is probably a correct observation.

Some have suggested that I try to reach out to CMS vendors in order to educate them instead of just complaining, and they are right. I haven't quite figured out how to do that, so when I learned about a web conference focused on content management I thought that attending would give me a good opportunity to connect with some CMS people.

Content Management Forum 2007 (cmf2007) takes place in Aarhus, Denmark on November 6-8, and is the third time this content management focused web conference is held. As you can judge by its name, cmf2007 does not focus on the kind of topics that @media, Web Directions or SXSW do, but that doesn't mean it can't be interesting or useful. After all, most web professionals have to deal with a CMS of some kind every day, either as a vendor, developer, or end user.

So, why not take the chance to go to Denmark (the conference is in English), meet up with other people who spend a lot of time developing or using content management systems, and attend some interesting presentations. Check out the program and schedule to decide which tutorials and presentations look interesting, and then sign up for cmf2007.

What about me going there to reach out to CMS vendors? Well, I was given the opportunity to hold a workshop and a presentation at cmf2007, and immediately saw it as a chance to help some CMS developers understand the importance of web standards and accessibility. However, after much consideration I have decided that in my current situation I simply cannot find the time to prepare a speech and a workshop, so I have declined to participate.

If you go, take all the chances you get to try to influence CMS vendors. Ask them about the things so many content management systems are really bad at: web standards, accessibility, usability, and client side platform independence.

Add 456 Berea Street to your Technorati favorites.

Posted in Conferences, Content Management.

More Info @ ifilm

A hit man learns that the poison in his body will kill him if his heart rate drops below a certain point.

There are six-hundred-and-eighty-three proposal submissions for next year's South by South West, and once again it's up the the Internet to filter through all of them and choose which ones are worthy of becoming real events.

How absolutely absurd.

I didn't like the crowdsourced voting last year and with this astonishing amount of submissions I fail to see how the quality of the SXSW experience is going to improve. I heard a lot of complaints about the lack of quality in many of the panels so I don't understand why the conference leadership is extending the program.

The conference FAQ says:

If that was the case last year, then something about that process failed.

The biggest flaw in the current process is that panel selection is left to the general public, who have zero investment in forming the best conference possible. The only way to make this work properly is to restrict voting to persons who have paid in full to attend the conference, as they're the only ones who have a vested interest in creating the best experience possible.

So why treat it like a high school popularity contest? If SXSW really has an advisory board then they need to step up and do their job (Hugh if you need help in this area let me know, I've been dying for a good reason to buy a taser gun and/or cattle prod). Anytime you leave a portion of the curation process to the mob, it's going to severely affect quality.

Time for a bit of what in my opinion is Accessibility 101: input device independency. For some reason it is common to see otherwise nice uses of JavaScript made inaccessible by developers forgetting that not everybody uses a mouse (or some other pointing device).

There are several groups of people who do not use a mouse or pointing device to interact with Web pages. A few examples:

• Mobility impaired people who cannot use a mouse at all
• People with motor impairments who can use a mouse but lack fine motor control
• Screen reader users who do not use a mouse, or even a monitor
• People using mobile phones
• Laptop users, since most laptops have really bad trackpads or other means of positioning the cursor (ever tried using a hierarchical dropdown menu with a trackpad while riding on a train?)
• Speed typers who have learned to use keyboard navigation efficiently and are slowed down when they have to switch to their mouse (if they have one)

As you can see there are reasons that affect people with disabilities, and others that affect everybody. So when developing a user interface you have to make sure that it does not depend on a particular input device. See also WCAG 1.0 Guideline 9. Design for device-independence.

The most common problems I see are drag-and-drop functionality and onclick event handlers added to arbitrary elements. For drag-and-drop, you need to give users an alternative way of interacting. How to do that is up to you and is not something I am going to go into here.

For onclick event handlers, the solution is simple. Always use an a element with a value assigned to its href attribute. In some cases a form control is a better choice, but I'll use links here.

Doing so makes the functionality accessible to keyboard users and other people who do not use a mouse. And yes, you really need to consider those users. I was very surprised to see several people argue against supporting non-mouse users in Jonathan Snook’s SnookSurvey #2: To Link or Not?. I don’t buy any of their arguments, which mostly seem based on a misunderstanding of the problem.

I’ll illustrate the onclick case with a couple of code examples consisting of a list of terms and definitions, where the definitions are hidden until the user clicks on a term. The examples use inline event handlers, style attributes, and excessive class attributes for clarity – do not use this code.

The wrong way

Here is how to do this the inaccessible way:

1. <dl class="faq">
2. <dt onclick="showDefinition('def1')">Term 1</dt>
3. <dd class="def1" style="display:none">Definition 1</dd>
4. <dt onclick="showDefinition('def2')">Term 2</dt>
5. <dd class="def2" style="display:none">Definition 2a</dd>
6. <dd class="def2" style="display:none">Definition 2b</dd>
7. </dl>

The dd elements are hidden when the page loads (if CSS is enabled). When the user clicks on a dt element, the showDefinition() function changes the display property for the corresponding dd elements, making them visible. You could also use CSS to change the cursor property when the user places the cursor on top of the dt elements as a way to indicate that they are clickable. I don’t personally like doing so since it is very confusing when JavaScript is unavailable – it looks like you can click the text since the cursor changes, but when you click nothing actually happens.

This works fine for people who use a mouse. But what if you don’t? When you tab through the page, focus is placed on links and form controls, allowing you to interact with them. But focus is not placed on other elements, even if they have an event handler assigned to them. Because of that, it is impossible for non-mouse users to interact with the page. Bad, bad, bad.

Note: Using CSS to hide an element and JavaScript to show it creates accessibility problems since people with CSS on and JavaScript off will not be able to display the hidden elements. The way around this problem is to use JavaScript to hide the elements as well. I am doing it the bad way here since it makes it easier to follow the examples.

The better way

The simple solution is to use links. All browsing devices can follow links, and if they support JavaScript, activating a link will trigger an onclick event. With that in mind, here is the markup that is keyboard friendly (again, inline stuff to show what I mean - imagine the links and event handlers having been inserted by a script):

1. <dl class="faq">
2. <dt><a href="#" onclick="showDefinition('def1')">Term 1</a></dt>
3. <dd class="def1" style="display:none">Definition 1</dd>
4. <dt><a href="#" onclick="showDefinition('def2')">Term 2</a></dt>
5. <dd class="def2" style="display:none">Definition 2a</dd>
6. <dd class="def2" style="display:none">Definition 2b</dd>
7. </dl>

A JavaScript function runs when the page (or the DOM) is loaded, inserts the links, and cancels their default behaviour to prevent them from navigating to the URL in the href attribute. The links only trigger the showDefinition() function.

Note that neither of these examples are complete solutions. They are just meant to illustrate the different approaches. In a production situation the links would be added with unobtrusive JavaScript.

There are usability issues to keep in mind with any approach that deviates from the normal behaviour of web pages, but I’m not going into that here. The purpose of this article is to show that you must not make website interaction depend on a certain input device, and that there is an easy way to make sure everybody can use your interface.

For a more detailed and comprehensive discussion of this subject, I recommend Accessible JavaScript: Beyond the Mouse by James Edwards.

Add 456 Berea Street to your Technorati favorites.

Posted in Accessibility, JavaScript.

One week from today Mobile Web Design will be available for purchase. I've sent preview copies (full version) to +20 luminaries in the web and mobile industries, and so far the feedback has been genuinely positive. (Whew!)

Now it's your turn to preview the book:

• Preview Snippets (PDF, 4.2 MB)

August 28 will welcome a new site design, online ordering (PDF version), iPhone and other giveaways, and more. Counting down the days: 7, 6, 5...

UPDATE: According to a comment on digg, gmailupgrades.com has been taken down.

Important FYI update for any Gmail users. If you receive the following email in your Gmail account, do not follow the embedded link. With the recent announcement of Google paid Google storage upgrades, the following phishing emails will undoubtedly become more and more the norm.

Dear Gmail customer
From now if you need more than 2 GB of space use this invitation and upgrade your account to 100 GB of space also you can register one free domain name via this invitation
your account upgrade will done after 24 hours
your invitation code is: http://gmailupgrades.com/Gmail-Account-Upgrade/…/
Thank You
Gmail Support Department

The email From: address is gmail-noreply@google.com. However, the "Mailed-by:" domain is marauder.websitewelcome.com. The link redirects to a website which looks very much like Gmail.

If did follow the link and entered your Google Account username and password, immediately visit Google’s Account Management [google.com/accounts/ManageAccount] to change your password. [Digg this]