Some Beginner Coding Tips

March 18th, 2005

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, 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!

Never Did Hear from ALA

March 17th, 2005

Admittedly I’m just a poor bugger from the penguin infested legume growing from Australia’s buttock but I’d kind of hoped a trickle of my question regarding A List Apart’s article on Dynamic Text Replacement with PHP written by Stewart Rosenberger would make it back to them and they’d eventually know - problemo - there is an issue for quite a few people with getting it to work.

So I’m kind of yell-beg-hairpulling it into the blogosphere as an open question still?

Why does IE show the alts but only red X’s and why does FF display the words in the original font and bunched together without spaces between them? I figure there has to be a logical technical fixable answer to that one that maybe someone’s discovered since it was posted.

My frustration comes from having read the entire 28 pages of comments a number of times and having no way to contribute to that closed thread. So if you know Stewart’s number or have your best mate at ALA you can tell them I think they’re legends but I’m absolutely out of my depth here. Is it my server, as I’d suspect? If so, what needs to be done to fix this one identifiable problem…

Ball of knowledge thrown into the blogosphere to be caught (hopefully) by someone who knows how to fill it and send it back to me. If you do you’re a legend because it’d be sooo bloody handy.

May 1st Reboot

March 16th, 2005

Here’s an interesting concept that I’d never known about until this month - the May 1st Reboot.

The idea is an international array of web designers register with Reboot and commit to creating a new design to be launched simultaneously on May 1st and its been happening since 2000. So on April 25 all the sites that are participating in this year’s Reboot will go down and just have a Reboot holding page. On the 1st they’ll all upload their index pages at exactly the same time and voila! Yep I’ll be checking out their work bigtime.

Uber-cool way to get yourself out there with something new, experimental or innovative.

WSG - Two Years Down

March 15th, 2005

Having been a subscriber of the Web Standards Group mailing list digest for about a year and a half (a year at least on my current subscription) its been a valuable ongoing resource of links, information and sometimes even advice (oddly enough) about not only CSS but all web standards. In two years the list (from Australia) has grown to nearly 1500 members with about half in the USA and a good smattering from around the globe.

The first meeting of the Web Standards Group originally met on March 19th, 2003 and are about to see in the beginning of their third year.

Apparently I was the only person ever to send them a Christmas card too which quite surprised me. Maybe other members might think of dropping Russ, Peter and the others a Happy Birthday card in the next few days.

Absolute and Relative URLs

March 13th, 2005

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 ‘‘. This simply says the message is http (hypertext transfer protocol) and the file is located on the domain name of 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 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 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

March 12th, 2005

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 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.

Communication Glitch

March 11th, 2005

The best laid plans of mice and me (n) definately don’t forsee every contingency. I recently had a slowing of communication with the Harvest Supplies people in Queensland. At present I’ve uploaded a simple text page but I’m designing and will be building a decent site that caters for ordering and has a member login area and some other stuff . But why was it looking like it was out to sink?

The clues were my email client sent the Harvest emails - the emails never arrived at Harvest. So where did they go? Well a few months back the Harvest account was moved to another server and a not unusual thing to do in this evolution is to retain the original mail box until the new one was properly established. So what was happening was I would send my email, it’d look to see if the address was on the same server (which the old one surely was) and just place the email there. So nobody elses email disappeared just mine. Unfortunate to say the least.

So there goes a couple of months of sending user questionnaires and reports and trying to establish information to develop personas, a couple of proposed site maps of course. Its a good tap on the shoulder that all business correspondence really needs to use digital signatures or other means of verification of receipt. This small oversight just in hours worked that had no value, the slightly corroded but fixable business image it portrayed and the simplicity with which it could have been detected and solved in the shorter term are indicative of a need for better lines of communication with interstate clients. We’re meeting in Sydney for a face to face in late April and hope to hammer out the last of the design elements there.

$500 Sites With Documentation?

March 10th, 2005

I’ve asked this question a lot this year and how do people create AU$500 sites with documentation and research and testing and the gamut of pieces that make up the whole? Well they don’t, lets be honest. If your client asks for a AU$500 five page site then you have to gather the content from them, source graphics, answer emails and phone calls, most likely attend at least one meeting, provide a technical specification report as well as questionnaires and surveys, do an information architecture report of some sort investigating the information your client has and evaluating the competition and probably much more. Which to my estimate on AU$500 sites says to me you’re broke before a line of code is written.

So its OK to make a site 5 pages long for AU$500 but don’t make me believe you’re doing the whole shebang there. On those new terms yes I could produce for clients without too much stress a basic and static well laid out standards compliant website.

The difference between a AU$400 and AU$4000 site becomes apparent when you see the paperwork involved and look at the site map. The AU$4000 site will likely offer a level of programming, target your clients directly instead of merely displaying static information, it would include e-commerce and some database wizardry that makes users want to give you money - even helps them give you money. And that’s where the buzz is really, its in success. But now I think about it I see the other side of the coin too which is making a static site for $500 is quite practical if that’s what the client insists on to save money in the short term. I think I’ll have to do a couple, not put my name to them and see how the whiskey tastes when its payday. I also love Porche 911’s if you’ve got one for my wish list lol… never know your luck ay.

Alt and Title Attributes

March 9th, 2005

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

March 9th, 2005

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.

Page: 1 | ... | 69 | 70 | 71 | 72 | 73 | ... | 75