PE

Code errors in “Pro Drupal Development”

paul — Fri, 03 Aug 2007 08:19:29 +0000

For those of you who may be experiencing a few errors when following the examples in the Pro Drupal Development book make sure you visit the book’s website. It has a section with known errors where you contribute you own comments for those not listed.

There’s not many Drupal books out there at the moment, but Lullabot are writing a new one called Practical Drupal with O’Reilly which will be based around Drupal 6.

Methods to hide email addresses from page source

paul — Tue, 06 Mar 2007 16:33:11 +0000

…a list of methods to hide email addresses from the page source to minimize visibility against the email harvesting spam bots. Each method has its (dis)advantages, therefore I leave it up to the reader to decide which method suits them the most, as there are many factors.

Hide email address in source code

technorati tags:Email, Spam

Blogged with Flock

XHTML column frameworks

paul — Tue, 27 Feb 2007 17:45:58 +0000

I’ve often spent time developing column structures for websites. Structure is a good thing and it’s essential to keep your design looking consistent across a number of website pages. Newspapers all run on complex column grid systems and have done for years. Websites are really no different. Even if you have an irregular design, you’ll still benefit from a little underlying structure.

The following shows one of the more common column structures, with splits for 2 to 6 equally spaced columns. It’s based on a 720 pixel width, so will sit nicely on 800×600.

There are a number of other column sets that split nicely into whole (pixel) numbers. Read on if you’re interested.

It’s all based around “60”

This number is divisible by 2,3,4,5 & 6. As long as your page width is a multiple of this number then you’ll be able to break it down into 2 to 6 equal columns with no problems.

I’ve compiled a list of the most common sets you are likely to use. Each example is based around a page width and has a diagram breaking down the column structure for the most common layouts.

2 equal columns (1:1)
3 equal columns (1:1:1)
4 equal columns (1:1:1:1)
5 equal columns (1:1:1:1:1)
6 equal columns (1:1:1:1:1:1)
2 columns (1:2)
2 columns (1:3)
2 columns (2:3)
3 columns (1:2:2)
3 columns (1:2:1)

Page widths available (in pixels):

600 (suitable for 640×480)
720 (suitable for 800×600)
780 (just about suitable for 800×600)
840 (suitable for 1024×768)
900 (suitable for 1024×768)
960 (suitable for 1024×768)

I hope this serves as a good reference. Happy designing!

Not everything needs to be social

paul — Tue, 27 Feb 2007 15:44:35 +0000

New “Social” Dictionary

A new online dictionary and thesaurus launches today called WordSource. It’s main benefit over sites like Dictionary.com is the fact that the site is very cleanly designed and contains no advertisements. You can also look up a word by simply adding it to the URL (so word.sc/example will pull up the definition of “example”).

I think I’ll stick with my Mac Widget.

technorati tags:Social, Wordsource

Blogged with Flock

Flock

paul — Tue, 27 Feb 2007 11:24:25 +0000

Always a bit dubious when a new browser comes out, but this one might be different.

With Flickr, delicious and blog integration – it’s labelling itself as the social browser. I’m posting this entry with it just to prove to myself that it might be worth adopting as my default.

Looks good so far. What do you think?

Blogged with Flock

UK law extends to online media for key information

paul — Thu, 22 Feb 2007 11:16:26 +0000

Did you know that companies in the UK must include certain regulatory information on their company websites and in their email footers from 1st January 2007 or they will breach the Companies Act in the UK and risk a fine.

Styling form buttons with CSS

paul — Thu, 15 Feb 2007 22:08:16 +0000

There’s a wide range of opinion on styling form buttons with CSS. Is it even worth it? Different platforms and browsers all render them differently, right?

This article sets out a practical example of 3 varying button styles of increasing CSS complexity and shows how these render for Submit Submit Submit

The last button element includes the embedded span tag in a hopeful attempt to see if the classic “Sliding Doors” technique could work to create nice rounded ends. Alas, this proves unfruitful, as there seems to be some kind of inherent padding inside of the button element. It works flawlessly on Opera and Safari though (bless ’em).

The following CSS rules are applied to the buttons through the s1, s2 and s3 classes:

.s1 { font-size: .8em; font-weight: bold; border: 1px solid #999; background-color: white; padding: .3em 1em .4em; } .s2 { font-size: .8em; font-weight: bold; border: 1px solid #999; background: white url(button_style2.png) bottom left no-repeat; padding: .3em 1em .4em; } .s3 { height: 35px; font-size: .8em; font-weight: bold; border: 0; padding: 0; background: white url(button_style3.png) top right no-repeat; padding: 0 20px 0 0; } .s3 span { height: 21px; padding: 7px 0 7px 15px; margin: 0 0 0 0; display: block; background: white url(button_style3.png) top left no-repeat; }

This is what we are after (Opera 8.5 Mac providing the benchmark in this case):

You can view the test page here

I’ve heard much debate on

Stripping down old code using Dreamweaver

paul — Thu, 08 Feb 2007 00:38:38 +0000

I recently acquired a job to re-write an existing web application that was written in “old” HTML code. You know the sort, inline styling, unnecessary tags, weird classes, table based layouts nested to the nth degree, etc, etc.

Rather than starting writing shiny new XHTML from scratch, I thought I’d make use of some of Dreamweaver’s capabilities for batch processing and find and replace functionality.

Looking into “Regular Expressions”, I found the answer.

Start by choosing the files you want to strip down. I’ve set up a basic example here showing just 3 HTML files under a Project called “old site html”. In reality you’d probably have a lot more to make use of the batch process.

Select the directory containing all the files you want to strip down (As shown above) and select “Find and Replace…” from the Edit menu.

The Find and Replace window is pretty straight forward.

Make sure that “Find in” is set to “Selected Files in Site”. If you forgot to select the directory you can always use the “Folder…” option here. I was just trying to save you a few clicks!
Search should be set to “Source Code”
Then make sure you check the “Use regular expression” checkbox at the bottom

Now comes the trickier part. Regular expressions. Let’s start with the table tag. The follow expression will select an entire table tag, including all it’s attributes.

]*>

Enter this expression into the “Find” field and then enter the following into the “Replace” field.

Test the expression by clicking “Find Next”. You’ll see that it’ll open up the first matching document with the first table tag selected.

Click “Replace” and the table tag will be stripped of it’s ugly, old attributes and the next match will be found. If you’re feeling confident enough, just click “Replace All” to strip all table tags in the selected folder.

You can adapt this method for different tags or opt for a catch all solution using this expression:

Find:
(<)([A-Za-z]+) ([^>]*>)

Replace:
<$2>

This will catch any tag and strip out it’s attributes leaving the existing tag in place. It uses sub expressions which can get a little complex. You should also bear in mind that there are some attributes that you will not want to strip out! (e.g. colspan, rowspan).

For further reading on Regular Expressions in Dreamweaver (including sub expressions), see Rob Christensen’s article on the Adobe website.

PE

Code errors in “Pro Drupal Development”

Methods to hide email addresses from page source

XHTML column frameworks

It’s all based around “60”

600 pixel page width (suitable for 640×480)

720 pixel page width (suitable for 800×600)

780 pixel page width (just about suitable for 800×600)

840 pixel page width (suitable for 1024×768)

900 pixel page width (suitable for 1024×768)

960 pixel page width (suitable for 1024×768)

Not everything needs to be social

Flock

UK law extends to online media for key information

Styling form buttons with CSS

Testing platforms and browsers

AOL 9.0 Windows 2000

Camino 1.0 Mac OSX 10.4

Firefox 5.0 Linux Fedora Core 4

Firefox 5.0 Mac OSX 10.4

Firefox 5.0 Windows 2000

Firefox 5.0 Windows XP

Firefox 2.0 Mac OSX 10.4

Firefox 2.0 Windows 2000

Firefox 2.0 Windows XP

Firefox 2.0 Windows Vista

Internet Explorer 4.0 Windows 98

Internet Explorer 5.0 Windows 2000

Internet Explorer 5.2 Mac OS 10.4

Internet Explorer 5.5 Windows 2000

Internet Explorer 6.0 Windows 2000

Internet Explorer 6.0 Windows XP

Internet Explorer 7.0 Windows 2000

Internet Explorer 7.0 Windows Vista

Konqueror 3.4.0-5 Linux Fedora Core 4

Mozilla 1.6 Mac OSX 10.4

Mozilla 1.6 Windows 2000

Mozilla 1.6 Windows XP

Mozilla 1.7.12 Linux Fedora Core 4

Mozilla 1.7.12 Mac OSX 10.4

Mozilla 1.7.12 Windows 2000

Mozilla 1.7.12 Windows XP

Netscape 4.78 Windows 2000

Netscape 6.2.3 Windows XP

Netscape 6.2 Windows 2000

Netscape 7.2 Mac OSX 10.4

Netscape 7.2 Windows 2000

Netscape 7.2 Windows XP

Opera 8.5.0 Mac OSX 10.4

Opera 8.5.0 Windows 2000

Opera 8.5.0 Windows XP

Opera 9.0 Mac OSX 10.4

Opera 9.0 Windows 2000

Opera 9.0 Windows XP

Opera 9.02 Windows Vista

Safari 2.0 Mac OSX 10.4

Stripping down old code using Dreamweaver