Pig Work

Pig Work skip to main content

Weblog of Freelance Designer Steven Clark


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.


Preventing Image Theft

Filed under: — 12:25 pm

I’ve done work for artists in the past and the more astute do ask the age-old question about ‘how do I stop my images being pinched’? The best thing about the web is it lets people look at your images in the privacy of their own home - the bad thing about the web is exactly that! What stops them from using those same images for financial advantage?

Although I would have to attest there aren’t any methods to totally protect yourself from a determined thief, Tim Murtaugh’s article Protecting Your Assets pretty much covers available options. Remember a really determined thief will look in your source code or a number of devious tricks. Like I hear stated often, if you aren’t prepared to lose something then don’t put it on the web. One effective way that should be considered though, as it is already an offshoot of better web design, is the optimisation of images - create JPEGs that don’t save at the best quality but still look good.

I’m sure industrious server side programmers have effective methods as well but its really a compromise. What protects your image but doesn’t mess with user experience or accessibility?



Filed under: — 2:30 pm

A particular headache of mine is the amount of neolithic JavaScript that still kicks around the web when modern browsers support the DOM. If you haven’t been out in public for a while thats where you use getElementById to reference instead of document.all and the like. Not only on the web, practically every JavaScript book on the shelves is just plain old fashioned bad coding, too. Reading 2005: The Year of the DOM gives me just enough hope to cross my fingers and hope not to die with document.bloody.all.

The Objectgraph Dictionary toward the end of the article was a pretty useful link, too.


Unobtrusive JavaScript

Filed under: — 2:39 pm

Just as CSS separates ‘how’ something should be displayed separately from ‘what’ should be displayed there is another necessary level of what ‘behaviour’ should be applied. This is where JavaScript comes in and its a major tool in any web designers arsenal, one I need to brush up on over the next few weeks myself as it so happens. Anyway the best place to start is Unobtrusive JavaScript for just such a mission.

Frankly the majority of tutorials at this point in time still seem to be the old document.all (IE5 and below) and document.layers (NN4) variety, rather than the DOM using getElementById, which doesn’t do me that much good. So this next few weeks I’ll be delving back into JavaScripting the right way cos I’m tired of relying on forums to fix the little things.


JuicyStudio - ECMA Script Menu

Filed under: — 12:05 am

This handy tutorial ECMA Script Menu came by the way of the Web Standards Group mailing list digest this morning. Put it in your kit and kaboodle because it’ll be handy sometime. NO I’m not a great JavaScripter and don’t claim to be - I just want to be lol, when I get some time to nail it down properly. Until then great tutorials like this one are something to covet because most online are of the old school I’ve found.