Wednesday, November 21, 2007

Putting code into a blogger post

It can be a bit of a faff to put code onto a blogger post. I have just found a nifty utility to convert it into the right format to make it easy.

Check out http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/.

This adds the escape characters you need to put code onto a blog. You can put the results between <pre></pre> tags.

How to hide your email address from spammers if you have to put it on the internet

When you put an email address on the internet, computer programs called 'spam robots' will find it by trawling over all the web pages they can find. Over the years these 'spam robots' have become more sophisticated but they can be thwarted to some degree. There are various ways to thwart them, one of which is to make your email address into an image which has no code equivalent that can be read by the programs. This is a bit nasty from an accessibility perspective - how do people with disabilities access this information?

Another way to do it is to assemble the email address with a snippet of javascript. Whilst a computer program could interpret this ('parse it'), it probably won't bother since there are plenty of other email addresses out there which are not protected at all and they may as well sell Viagra to those people.

Here is how my email address is protected. You will see how it appears at the end bottom of my website, www.userexperiencedesign.co.uk.

The code looks like this. It's a little more complicated looking than I would like because I have had to ensure that it is still valid XHTML. The comments in the code reference the sources of information I used in coming up with this.

You should note that this is NOT a foolproof way of ensuring you don't get spam but it should reduce the amount you get.

<!-- This Javascript hides an email address from spam robots -->
<!-- See The JavaScript Source!! http://javascript.internet.com -->
<!-- I got this to validate following advice from here http://www.geocities.com/wb7crk/ -->

<!--The 'noscript' tag provides alternative contact info for people with Javascript switched off-->

<div>
<script type=\"text/javascript\">
<!--//<![CDATA[
var user = \"carl.myhill\";
var site = \"userexperiencedesign.co.uk\";
document.write(\"<a href=\\\"mailto:\" + user + \"@\" + site + \"\\\" accesskey=\\\"9\\\" \\>\" + user + \"@\" + site + \"<\\/a> <em>[9]</em> \"); //]]>-->
</script>

<noscript>
<p><em>Contact carl.myhill at userexperiencedesign.co.uk</em></p>
</noscript>
</div>

NOTE: This bit of code also activates accesskey 9 for your email address. This is the standard (in the UK government at least) accesskey for 'feedback' and allows users to hit Alt+9 to send you an email instead of needing to navigate to the link.

Thursday, November 15, 2007

Test your web design in different browsers - Browsershots

Test your web design in different browsers - Browsershots

What a GREAT tool for testing how your website looks in multiple different browsers. Inspired!!!! Browsercam.com looks good too but is expensive, this one is free!

This post was extremely helpful...
http://www.sitepoint.com/forums/showthread.php?threadid=462563

Wednesday, November 14, 2007

base href and named anchors

This is just a rough note for now. I have always wanted to use the base href tag. With this you can have structure like this...

maindomain
maindomain\projects
maindomain\projects\bikeshop
maindomain\projects\bikeshop\map
maindomain\projects\bikeshop\about

Well, normally the root you are working with is maindomain but if you want to temporarily have your bikeshop project sitting in some sub folders you can and you can specify the base ref to acheive it, like this...

maindomain\projects\bikeshop\index.html

<head>
<base href="http://www.maindomain.com/projects/bikeshop">

And now any sub folders can be set up with relative links and will all look at the baseref. SWEET

One thing is not sweet. When you are in this file...
maindomain\projects\bikeshop\about\index.html
...and you jump to a named hyperlink within that document, you jump to the base href instead. Which is a complete pain.

After many hours of surfing it seems that good old PHP has an easy answer for us...

<p class="skiplink"><a class="skiplink" href="<?php echo $_SERVER['REQUEST_URI']; ?>#top" accesskey="2" >Skip over navigation</a></p>

This server request returns the actual URL of the document and sticks it into the page, so, your named hyperlink within the page is more fully qualified.

This probably makes no sense but it is very handy to me to write it down right now!