Archive for XHTML

Hide email addresses with ISO Characters

// March 17th, 2010 // No Comments » // Development, Javascript, XHTML

Putting email addresses on websites is easy pray for screen scraping spam monserts. There are various techiques out there such as using graphics instead of text, or using javascript. The technique I like is to convert individual characters in an email address into ISO characters. Einstein once said that never memorise anything you can look up in a book, so I don’t want to walk around with ISO character numbers in my noggin. I created this little tool to convert email addresses into ISO codes. Just put in your email address. It will prefix your email with a “mailto:” too.




Opening a browser in a new window

// February 5th, 2010 // No Comments » // Development, Javascript, JQuery, XHTML

For a long time target=”blank” has been redundant for accessibility problems. However, there are situations when opening a new window is neccessary. One technique I used is attaching a class of “external” to each link, and then usung javascript descibed in my get elements by class name example, attach a “window.open(this.href)” to each one. I now use JQuery, so that code has been superceded with just 2 lines of JQuery code.

Link Relationships

Links are used to locate web resources, so good use of the rel attribute enhance the logic and semantic meaning of these resources. Using the rel attribute for things such as pagination i.e. “next” and “prev” are standard link types, so where does “external” fit into this?

You can define additional link types not described in the specification. If you do you should use a profile to cite the conventions used to define the link types. You do this in the meta data profile attribute of the HEAD element:

1
<head profile="http://www.yoursite.com/profiles/core">

You can either use XML for this, or XHTML. A good XHTML example can be found at gmpg.org and at w2.org. As for an XML example, I can’t find one.

Styles and Accessibility

From an accessibility point, you should differentiate external links by some sort of style or description such as (opens new window). So, in order to do that you might want to add a class of external anyway.

JQuery

The actual code in JQuery is very concise. For each a tag with a rel of external, a new window will be opened:

1
2
3
4
5
$('a[rel="external"]').click(function()
{
	window.open(this.href);
	return false;
});

Firebug in Chrome, IE, Safari, Opera?

// January 8th, 2010 // No Comments » // Development, Javascript, Web Development, XHTML

I love Firebug. I wouldn’t say it makes debugging a pleasurable experience, but it makes it a hell of a lot easier than if you didn’t have it. This is fine when you are working explicitly in Firefox, but what happens if you need to debug something in other browsers? Nightmare. IE has the developer plugin, but if I love Firebug, I hate IE developer plugin (I won’t say how much I hate explorer though tee hee). So, what’s a guy to do? Firebug lite . Firebug lite is a JavaScript file you insert into your pages to simulate some Firebug features in browsers other than “Firefox”. This will be really handy!

Special Character Replacement Tool

// December 15th, 2009 // No Comments » // Development, XHTML

We have been doing a lot of work with a French website at the moment and adding the special characters can be a real pain, especially the odd one that manages to evade you. My good friend at work created this dynamic special character replacer.

Sample Accesskey List

// November 2nd, 2009 // 1 Comment » // Accessibility, Development, User Experience, XHTML

Access keys are simply keyboard shortcuts. They are defined combinations of keys, Alt + a key which allows the user to access that field or section of a webpage.

You impliment accesskeys using the accesskey attribute on links and forms fields. If the access key is defined on a link, the browser will follow the link. If defined on a form field, the browser will set focus on that field.

To use accesskeys on Windows, press ALT + an access key. On a Mac press Control + an access key.

There are no access key standards, so here are some commonly-used keyboard shortcuts:

  • Alt + 1 – Home (yourdomain.com)
  • Alt + 2 – Skip Nav
  • Alt + 3 – Site Map
  • Alt + 4 – Search
  • Alt + 5 – Products
  • Alt + 6 – Forums
  • Alt + 7 – Blogs
  • Alt + 8 – Privacy
  • Alt + 9 – Feedback
  • Alt + 0 – Accesskey List

Browser Compatibility Tool

// September 2nd, 2009 // No Comments » // CSS, XHTML

I came across a great browser compatibility tool to check websites for IE browsers such is IE6, IE 5.5, well, all of them in fact. What is really great about it is that it is FREE! Great to work with this along with hacking bits of CSS, thanks again Wikipedia!

The Best Firefox Plugins

// March 5th, 2009 // No Comments » // Development, Web Development, XHTML

A lot of plugins for firefox are labour and time saving. Some are a godsend. Here is a list of the ones I use a lot.

Firebug

Firebug is a development tool that you use directly in the browser. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It is great for traversing xhtml and css, as well as seeing what is going on when debugging javascript.

Web Developer Toolbar

The web developer toolbar is a very handy tool for interrogating elements within a web page, both xhtml and css. It is great because you can highlight elements, instead of adding border: 1px solid #f00; in the style sheet.

Measureit

Measureit is a cool tool that lets you draw out a rectangle right on any webpage in order to establish the width and height. It is great as I used to take screenshots, put them in photoshop, then measure the elements in that. This saves tonnes of time.

Firebug autocompleter

Firecookie

Foxyproxy

Jsonview

Colorzilla

Colorzilla

HttpFox

HttpFox

LinkChecker

LinkChecker

Bottom Error Console

Bottom Error Console

FireFTP

FireFTP is a free, secure, cross-platform FTP client which is very easy to set up. It is ideal when you want something uploaded fast. It is quite slow when transferring a lot of files however.

View Source Chart 2.7

View Source Chart 2.7 is a really cool plugin for displaying html when you view the source.

WAVE accessibility plugin

The WAVE plugin is really good for accessibility and SEO checking.

XHTML Table

// February 17th, 2009 // No Comments » // CSS, XHTML

Standards based web development and the semantic web call for markup language which matches the stucture and semantic meaning of the data. Screen readers are also an important aspect which need to be catered for. This does not mean that the tables cannot be “beautified” so I have included some CSS for the table.

Table Caption
Staff ID Staff First Name Staff Surname
Staff ID Staff First Name Staff Surname
1111 Mark Robson
2222 Paul Diston
3333 John Grisdale

Here is the table XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="0" summary="This is an example table demonstrating thead, tfoot, and tbody."><caption>Table Caption</caption>
<thead>
<tr>
<th id="id">Staff ID</th>
<th id="firstname">Staff First Name</th>
<th id="surname">Staff Surname</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Staff ID</td>
<td>Staff First Name</td>
<td>Staff Surname</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1111</td>
<td>Mark</td>
<td>Robson</td>
</tr>
<tr>
<td>2222</td>
<td>Paul</td>
<td>Diston</td>
</tr>
<tr>
<td>3333</td>
<td>John</td>
<td>Grisdale</td>
</tr>
</tbody></table>

And the style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
table
{
border-top:1px solid #999;
border-left:1px solid #999;
border-collapse:collapse;
}
caption
{
letter-spacing: 5px;
font-size:14px;
padding-bottom:5px;
color:#930;
}
th, td
{
padding:5px 10px;
border-right:1px solid #999;
border-bottom:1px solid #999;
}
th, tfoot tr td
{
background:#ccc;
font-weight:bold;
}

Handy Special Characters

// February 17th, 2009 // No Comments » // XHTML

&#8211;
EN dash: –

&#8212;
EM dash: —

&#8217;
Apostrophe: ’

&#8220;
Open double quote: “

&#8221;
Close double quote: ”

&#8722;
Hyphen: −

&#8216;
Open single quote: ‘

&#8217;
Close single quote (Apostrophe): ’

&#8230;
Ellipsis: …