Pig Work

Pig Work skip to main content

Weblog of Freelance Designer Steven Clark


WordPress 1.5 and Customisation

Filed under: — 3:40 pm

Initially frustration slapped me on the head with this one until I realised how simple the WordPress crew had made it (and how extendable). I’d originally customised WordPress 1.2.2 a few times (including both my blogs as well as a friend’s). So all I’d do was basically meld my already created page straight into full morph with the WordPress template and it was up and away. Then to change different PHP functionality I’d just jump into the other folders and have a bit of a play until whatever I’d envisioned came to pass.

So I installed WordPress 1.5 for a client and initially I wasn’t very impressed. I didn’t like that on the default installation the RSS links at the bottom of the page returned 404 errors. It also took me a little bit to get used to calling the new file structure. So here’s a bit of an explanation of where I went yesterday.

First I went to the forums and found that if I commented out 4 lines in the wp-blogheader.php that seemed to call the 404 by default and then changed the links on my page to normal relative URLs the RSS worked fine. The big problem here was realising that while index.php sits in the main directory the theme, and therefore its resources, sit in a folder about 5 levels down the heirarchy. So its not good enough to reference ’style.css’ but instead you need to write ‘wp-content/themes/default/style.css’ for example.

That said, I’d been looking at doing this the same way as I’d looked at version 1.2.2 which was to just take over the default page and make it my one and only prison bitch. But WordPress 1.5 has these themes you can either make, install or choose from. Its a very powerful option once you look into it. So I guess that’s the way I’ll be going on this operation…

Well I’ve only briefly covered the top ether of what customising WordPress is about but hopefully it’s enough to get someone else up and running. To create a theme by the way just copy the default folder, change its name to your theme name and edit the top of the CSS file’s comments to reflect your theme name and description.

I’ll be the first to admit it made me squirm for the first hour but when I read the documentation and visited the forum I was up to speed fast enough. Its just a new file structure and a different (better) way of looking at things.


Some Beginner Coding Tips

Filed under: — 11:01 am

One of the first tips I can give is if you’re doing CSS layouts then either put borders or different background colours on your containers so you can see what’s pushing where because its not always obvious. Its simple and I’ve been called a ‘Duh’ but 2 seconds of putting it in can make you slap your forehead.

Document your work either internally with comments, externally or both. This will save you so much trouble when you realise last week’s pages are falling over and the form has scroll bars (don’t laugh that was me yesterday).

Get your hands dirty on the coal-face and don’t rely on WYSIWYG editors to do it all. You need to understand what the code means and how it reacts to different browsers. Try HTML Kit which is what I use or something similar. If you’re interested in Java try Eclipse.

Note that no matter what or who you do anything for you have to keep backups or previous versions if you don’t want to eventually have to go back and fix the unfixable.

If you cut and paste code (particularly with PHP in my case) either put it underneath and rewrite it by hand or paste it onto MS Notepad first and then onto your page to get rid of the invisible characters. Many a PHP line fails simply because of this.

Another PHP tip is never leave spaces before your PHP opening tag. Often simply backspacing the tag to the beginning of a line gets code working.

Do one thing at a time and then check it in several browsers. This sounds like its going to take more time than just hacking it all better at the Fantastic Code Hospital but in the long run it nearly always works out quicker to test after each change of your code.

Go to forums, good ones like Webdeveloper.com, PHP Freaks or Codewalkers. Active forums mean more likelihood of responses to your questions faster.

Use DOCTYPES and the correct validators to check your (X)HTML and CSS. Get the relevant specs for your code and keep them handy. A short list (for example of simple XHTML no-no’s) pasted to your wall will save you a lot of time.

Understand separation of content from display from behaviour (XHTML, CSS and Unobtrusive JavaScript respectively). Try not to use inline styles for example as this mixes the display within the content.

I guess that’s all I can fit in here off the top of my head while avoiding my current email issues - yet again. If you’re new to coding of any sort maybe these short tips could help you save an hour or so of work later on. Write good clean code, comment, test and be sure to backup your work. Finally, ask questions and be annoying until you get the right answers!


Absolute and Relative URLs

Filed under: — 10:19 am

Its not always easy to get the idea of absolute and relative addressing through to people at first but once it’s in there it’s like riding a bike.

An absolute URL (or URI for that matter, don’t worry about splitting hairs here) consists of something like ‘http://www.nortypig.com/graphics/pic1.jpg‘. This simply says the message is http (hypertext transfer protocol) and the file is located on the domain name of nortypig.com in a folder called graphics and that it’s a jpg file called pic1. That’s about it really. You can if you wish use this method to reference files on your site but most often it’d be for external ones.

A relative URL on the other hand is a reference to a file relative to the file calling it. So if you look at the first example and assume that we’re in the nortypig.com folder already and you want to reference that same jpg from the index page you would simply write ‘graphics/pic1.jpg‘. The server is savvy enough to know you just mean look in the graphics folder that sits next to my index.html file and get the pic1.jpg image. Likewise you’ll often have to go up a directory.

Doing that one is easy too if you can imagine another folder called test sitting next to the graphics folder and index.html. In the test folder is a file called testpage.html and you need to display the jpg on it so you would write ‘../‘ to go up a directory and leave the test folder and then ‘graphics/pic1.jpg‘. So the complete reference to do it is ‘../graphics/pic1.jpg‘. Its pretty cool really and you can always figure out any issues by looking at the actual file structure on your server to see where you’ve gone wrong.

So what about this one? I have a CSS stylesheet in a folder called stylesheets that sits next to the folders called test and graphics and next to the index.html file. The CSS file in the stylesheets folder is styles.css and it is called into the head of the index.html file with a link in the head section of the (X)HTML. If you can visualise it great but if not then draw it on a napkin while you try to work out what I’m getting at. So in my styles.css file I want to call a background image into a div perhaps. How would I do it? Is it from relative to the index.html file or the styles.css file? The answer is it’s relative the styles.css and requires you to go up a directory and into the graphics folder by writing ‘../graphics/pic1.jpg‘.

The obvious advantages of using relative referencing are that you have shorter addresses to deal with and that your site is portable. It can be moved onto another domain and will work perfectly, wheras with absolute referencing you would have to change the nortypig.com part. I guess a lot of what you do with this comes down to judgement calls and personal taste but its important you do understand the difference and how to access resources in both ways effectively.


Classes and IDs

Filed under: — 11:56 am

One of the things that most eluded me with CSS was the use of IDs (# symbol) rather than Classes (. symbol) and why they were different. Not because its complicated but because Classes had seemed to do the job up until that stage so where was the need to look? Here’s a basic view of ID’s and Classes if you don’t already know.

The most obvious difference is that while a Class can be used many times on a page an ID can only occur once on a page. This makes ID a great tool for creating your (X)HTML page sections such as banner, leftnav, content or any other section you might want. By using the ID you can easily target as an example every second paragraph in the content section or lists in the navigation section.

The next thing about the ID to note is that by using it in your (X)HTML you can target an element for DOM scripting behaviours (yeh JavaScript) by using getElementById. An example of this is the banner on Translucent where random images fade in (programmed by lavalamp over at the Webdeveloper.com forums). In the page code you’ll notice the banner image has an ‘ID=banner’ allowing the script to hook into the element in question.

They’re the main differences I can think of at the moment and enough to get you rolling off a couple of ID’s on your pages. Like anything in this business planning helps so before you start coding you can look at your design and spot good candidates for the ID attribute in advance such as a block section or an element with behaviours. Just remember Classes can have many instances on the (X)HTML page but IDs only occur once.


Alt and Title Attributes

Filed under: — 8:58 pm

Another common point of confusion for new and novice developers are the use of the alt and title attributes. So here’s my general understanding of both.

Alt attributes can only be used on img elements and are specifically to provide alternate text should the image not be displayed. Its as simple as that. An alt attribute should briefly impart what the image in question means and you should avoid using the word image in that alternate text.

Title attributes on the other hand can be used on a number of elements including img, divs and more. If you use title on an image that has an alt already the message is of course different. The title is a longer fuller description, not alternate text but a title if that doesn’t sound patronising. Where the alt will be displayed if there isn’t an image, the title should be displayed if you hover on top of an image that’s there.

The wider use of title attributes on elements isn’t a bad idea at all. Just don’t try it with the alt’s or you’ll get a rude little validation error certainly. Of course, this is just my understanding of alt and title and for a deeper understanding the W3C HTML 4 specs will certainly give you the full drill rundown.

RIP Out Those Mailto Links

Filed under: — 12:50 pm

When I look at a site nowdays one of the first things I seek out is their mail functionality - do they use the HTML mailto in a simple link to make a default popup email client do their hard work? If they do I tend to be a bit biased and unfairly think stuff like shoddy, ineffective and not enough money put into effectively creating the site functionality. In other words mailto is and always will be the easy way out particularly for those who aren’t confident programming.

Why is mailto a bad thing then when it’s legitimate HTML? For one I’d suggest there are better and more elegant ways to provide the same functionality without making something popup and steal focus from the user. But really my greatest concern is it doesn’t work effectively for a rather large number of users who haven’t configured their Outlook Express or whatever email client properly. So they fill in the popup form and press submit - then it says it couldn’t send the message! Now being that user would you go to your hotmail and zap up another email? I doubt it. Finally I’m not really too keen on sitting client email addresses all over the site for bots to pick up and create havoc with either.

So lets go server side for the answer. By using the PHP email functions you can process the contact in much broader ways and without the negatives involved with HTML mailto links. Do this simple tutorial and you won’t look back. Lets consign mailto to the grave of ‘no longer working as expected’. And if you decide to keep mailto’s on your site ask this - how many users can’t use your contact form and don’t know how to configure their email client? Its up to you as a developer to assess the level of accessibility you want to provide. And if you just must use mailto then think about keeping them as supplemental links and provide a PHP main contact as well.


Heading It Up

Filed under: — 1:20 pm

Using heading tags (H1 - H6) correctly is important as it imparts information about the content of the page. The word of the day that I do hate is ‘semantics‘ but its the word that fits best. By chunking your information with the correct headings you give a general outline of the structure of your page that goes beyond how the heading itself is displayed.

I’ve noticed a few sites that don’t seem to follow the correct use of the heading tags and although their pages validate they don’t quite get across the bar for this simple reason - they don’t actually make a lot of sense. Simple as that really. So as a general rule you should probably look at making your site name the H1 heading and work down your page to H6, although I’ve seen it argued whether or not to go 1 - 6 or make all next level headings h2 then h3 and so forth providing levels of information chunks as I tend towards.

If you only do it for the simple sake of being better understood by Google its very little effort. Headings are headings, paragraphs are paragraphs and lists are in fact and unsurprisingly lists. So by making a class called ‘.mytitle‘ and having it display just like the H1 heading, you create a situation where although they look the same they actually aren’t. One imparts meaning and the other is really just content. So be nice to boring old headings and stop that silly nonsense…


Mockups and Prototypes

Filed under: — 8:45 am

Recently there was a conversation of sorts between two developers and something tweaked my ears. One developer suggested jumping directly to XHTML / CSS prototypes and skipping the mockup stages for the simple reason at the end of prototyping they would have the shell to build, it would all be sitting there. They asked the advantages of doing mockups in FireWorks or PhotoShop rather than in code. So I guess my comment would go something like this.

Firstly to each their own and I really don’t ever want to be a soapbox guy who thinks he’s got the only answer to every single issue. But I’d suggest that its in fact quicker to get signed off on graphic mockups simply from a logistical point of view - they are much easier and quicker to come up with, they can go in the bin and start again with very little time involved (personal heartbreak aside of course) and graphic mockups can just be emailed back and forth or printed out and handed around the table. Everything I’ve been taught has actually said this is the best process to get the best software out to market, too.

Wheras with an XHTML / CSS prototype to develop the actual design takes a lot of grunt if the client is on the other end of the phone working out the look and feel as you go. What if they decide the right navigation should be top navigation or that every second paragraph in a specific section needs some special case. By this I mean that you have to hunt through the CSS trying to work out sometimes complex inheritance issues or browser bugs on the fly. I’ve chewed a lot of days doing this very same thing just because I’m the kind of guy who gets a video game and reads the instructions like next week or later when I’m stuck. But process should be about discipline and the process should make for a better product one would expect.

So personally I won’t be throwing mockups away to jump straight to prototyping as it just seems bad sense. Of course, you just might find me breaking my own rules tomorrow but hey I’m also a human lol. I make my fair share of bad moves like everyone.


URL Encoding and ASCII

Filed under: — 10:30 pm

If you ever have the validators pass you back that nasty XML error page then this article might be a bit of a clue in debugging. Say you are using url encoding, that’s where you are using PHP and passing a variable to another page simply by putting in your anchor link’s href attribute href="?name=value” for example. What this does is put the ?name=value at the end of the url when it calls the next page. Its pretty basic. Now look again. Say for some mad and sad reason you decide to pass href="?name=Sally Brown” what do you think happens? Well it’ll put that “%20″ character into the url to represent a space character. Of course, you could also put the ASCII character for a space into your url encoding to be geeky.

So that could just be why your page fails the validator and returns an XML error - if you wrote “Sally Brown” as a value in a url encoded link? The values will pass correctly and PHP doesn’t give a damn but it can actually trip the validator so keep an eye out.

There are a number of other reasons for this error page but this example will give you an idea of the stuff to look for in your XHTML page if it does.