Graphics/CSS W3C

The semantic web gots badges

Congratulations to the W3C for finally reclaiming the semantic web back from the drug industry. Seriously, the new logos are a good idea, and they’re quite attractive.

W3C logo

The only thing that gave me pause about the logos are the terms of use:

  • When used on the Web, the logo must be an active link to
  • The logo must not be used in any manner which implies W3C sponsorship or endorsement of your product, service, or Internet site.
  • The logo may not be used to disparage W3C, its Member organizations, services, or products.
  • The logo must stand alone: it cannot be combined with any other design element such as photography, type, borders, nor can it be incorporated into another logo.

Not disparage the W3C…hmmmm. Taking a cue from my boy, Danny, who interpreted the terms of use thus and thus, I’m promoting the release of the stylish new logos in my own, uniquely Burningbird, way:

Semantic Web

W3C Semantic Web
Microformats site

More interpretations

twist and spin semantic web
2007 The Semantic Web: Do you know where your lawyers are?

Graphics/CSS Photography

Photoshop misery

I had been keeping my version of Photoshop current on my Mac, but not my Windows. When I saw an upgrade package at Amazon that would upgrade my Windows 5.0 version to CS2, I decided to get it. A day wasted later, and oddly enough, talking to what sounds like the same people Chuqui talked to, I found that there are certain installers on Windows that just won’t accept the serial number, and the support person at Adobe would have to manually generate one for me. I asked if the same number would work if I needed to re-install the CS2 upgrade, and she said no, I’d have to call in again if I needed to re-install CS2 on my Windows. I would also have to provide my complete purchase history for Photoshop on Windows, including keys for software bought 6 years ago.

For Chugui, the experience began with the mistaken belief that if all you want to use in CS2 is Photoshop, one should be able to just upgrade Photoshop, especially when Adobe sells upgrades for Photoshop. You’d think…

The first one’s job was to tell me that no, in fact I could NOT upgrade a CS2 package to just Photoshop (but, I asked, what about your web site that says I can? I never got a straight answer about that, actually, just told that it wasn’t possible). I finally decided the hell with it and decided I’d wasted enough time — and maybe I might use Dreamweaver here or there — so I went ahead and decided to go to CS3.

That third guy’s job was to let me know that they couldn’t actually just amend my upgrade, I’d have to buy the CS3 upgrade, and then they’d refund me my original upgrade.

Of course, you can imagine what happened when Chuq tried to get a refund.

Adobe believes it has a lock on the graphics and photo editing world with Photoshop, and is using it to force people into buying what they don’t need. I’ve thought about upgrading my CS2 installation on the Mac (never again on Windows), but after listening to some of the problems people have had, have been reluctant to plunk down yet more money. Especially since there’s been so many issues related to upgrading Photoshop, as compared to upgrading the CS ‘suite’.

Now, I do like Lightroom more than Aperture, and I really like Adobe Bridge. I can live without Lightroom, though, and my Adobe Bridge still works. I’m finding that what I have with my current software is more than good enough, so I’m reluctant to do anything at all; just use what I have until forcibly kicked off in some way (probably some incompatible Mac OS upgrade). Frankly, I just can’t keep up with the expense of all these upgrades — especially when I’m maintaining three computers (two Macs and a Windows).

I’m also turning to open source for my needs more frequently. I’ve made the transition to NeoOffice for my Office replacement on the Mac and have never looked back. The software is stable, easy to use, and improves with each release. I also like OpenOffice for Windows, and have had no problems using it with my Windows XP box (I also am holding on upgrading to Vista).

For the new book, instead of putting any time into Photoshop, I decided to cover GIMP and other tools, instead. There is an installer for GIMP for the Mac that works nicely, but instead I installed Darwin/Mac Ports, and then installed both GIMP and UFRaw, the wonderful tool for handling RAW images, using the Ports installation program. Both installations went through without a hitch.

I also installed GIMP and UFRaw on Windows, using the ‘dummies’ installation for the latter and, again, no problems with the installation (though I don’t know if either will work with Vista).


What do I think of the tools? I really like UFRaw, and from what I can see, it handles my Nikon NEF files to a treat. I think I actually prefer it over Adobe’s plug-in, as it seems to manage white space better.

GIMP isn’t as fully featured as Photoshop. It’s not as simple to work with as Photoshop, but much of that could be my unfamiliarity with the tool. It doesn’t have the color support, or the Smart Sharpen filter, nor does it seem to support free transformations. However, the unsharp filter seems to work decently, and I can find most of the transforms I need by looking through the other tools. In addition, GIMP is very much a ‘living’ application, which means new filters, plugins, and versions are continuously being developed.


As for graphics, I was able to immediately create a ‘shiny’ Web 2.0 button, as well as re-implement the reflection technique I had picked up for Photoshop. In other words, it provides all I need for the effects I create.

Shiny Button

You also don’t need a desktop tool. I recently discovered an online graphics tool, FixPicture that can take my Nikon RAW images in NEF format, and allow me to add any number of edits, saving the result to any number of formats.

FixPicture screenshot

I can’t speak for professional photographers and graphic artists, but I can’t help thinking the amateur photographer and web developer/designer who does some graphics, would get all they need from the open source community, rather than having to pay the Adobe tax. Not just GIMP and UFRaw–there are dozens of interesting single and multipurpose tools and utilities that allow us to create all sorts of interesting work; all open, all free except for what you can spare by way of donation.

I’m not adverse to proprietary applications or companies who profit from such, but when a company’s proprietary acts cross over the edge to the predatory, like Adobe’s has with Photoshop, I think it’s time to look elsewhere.


Fluid Elastic Static

Recovered from the Wayback Machine.

I am a good bread and butter CSS designer, and can create designs that look relatively decent in browsers and validate, but I’ve never taken my design to the higher levels. When I re-make my sites over into the new layout, I want to change the design to allow for greater accessibility.

One aspect I’m exploring is the concepts of elastic design versus fluid and static. Right now I use static settings for my column and sidebar width, which means if you open the page in a smaller browser, you’re going to get a horizontal scrollbar:

width: 650px

The fluid approach is to use percentages rather than fixed values, which means the contents resize based on the browser window. However, I hate lines of text that are too long. If the browser is opened in a high resolution monitor, the writing will become very difficult to read.

width: 85%;

Enter the concept of elastic layout, as originated in A List Apart and other posts such as this at 456 Berea Street. With this approach, a maximum width is given so that regardless of browser and screen, the container doesn’t expland past a certain point. However, if the page is shrunk, the column shrinks accordingly.

max-width: 650px;


max-width: 40em;

Unfortunately max-width isn’t supported in IE 6, which means until IE 6 is a thing of the past, I’ll have to use a IE 6 workaround. The workaround requires I use invalid CSS, though, and regardless of how that’s packaged, it’s not something I’ve not wanted to do. However, pushing horizontal scrolls on folks also isn’t what I’ve wanted to do.

I still need to work through images in the posts, but I must say that web page design and development today is a lot more intersting than it was when we were struggling with the 4.x browsers.

A member of the webdesign-l list group send around links with good liquid and elastic CSS articles. The links to these are part of a resource site maintained by the University of Minnesota. There’s an extensive section on accessibility, JavaScript, XML, PHP, and even a section on Sites & Blogs related to web design. It’s probably the best and most comprehensive Web Design Reference site I’ve seen.

Burningbird Graphics/CSS

Mary Janes and Site Design

Recovered from the Wayback Machine. The stylesheets still actually work. Pick one, and reload the page in the Wayback Machine.

This page describes both the techniques and the materials I used to create my stylesheets. At the end of the document is links to locations where I’ve borrowed photographs, technology, or graphics – whit my deepest appreciation for same. A permanent link to this page will be added at the bottom of the stylesheet option list.

My designs don’t necessarily fit the current mode popular with weblogs–shadow background, with sidebar contained within the same block as the text and floated to the left or right; large, graphical title bar at the top, all against a simple patterned or plain backdrop. Mine are centered, true; and some of the styles do have a graphic at the top. However, there’s nary a shadow anywhere, and there won’t be because shadows aren’t compatible with my ‘floating cloud’ sidebar look.

Relatively simple as my styles are, there is an interesting trick or two used in the stylesheets that I thought I would share. However, before you try any of these yourself, you might as well be warned that I’ve never used CSS in the proper manner; nor are my techniques always the proper techniques. However, they do validate, and they are accessible.

Main page elements

All of my pages have one main element, a DIV block, that’s centered in the middle of the page. The CSS for this is:

margin: 90px auto 25px auto;
width: 730px;

In this centered block are two columns: one in an element called the sidebar; the other the main content. I make use of the float CSS attribute to float the main content to the right; I set its contents to be left-justified, compensating for the parent container’s using of centered text-align. If I did not do this, the parent element’s text alignment would propagate to all contained elements:

.mainblog {
float: right;
text-align: left;
width: 450px;
font-family:verdana, arial, sans-serif;
font-size: 10px;
padding: 30px;
border:1px solid #999;

Normally, DIV elements would align vertically, but the use of float forces the main content to align horizontally with the sidebar, to the right, rather than the bar flowing beneath it. All that’s left for the sidebar then is remove its margins, set its width, and align the text to the left.

text-align: left;
width: 200px;
margin-top: 0px; margin-bottom: 0px;
padding: 0px 10px 20px 0px;
font-family:verdana, arial, sans-serif;
font-size: 8pt;

Within the sidebar, all my side images and blocks for comments and whatnot flow naturally within the tall, narrow container, each item set to a width of 200px. To see how these elements are positioned within the main web page, I’ve provided a text-based version of the index page. To see the stylesheets, view the source for this page, grab the URL for each stylesheet and view it directly in your browser.

Feel free to use any of the ideas presented in this document, or copy the stylesheets for experimentation and use in your own pages. A link back would be nice.

There’s nothing special with this layout except that traditionally sidebars items are visually contained within some overall constraining environment. My sidebar elements don’t – not even within the style designated as Walker Evans where I use what looks like a slip of film underneath the items. Even within this stylesheet, the elements break out of the boundary of the film, ever so slightly to the left. So they look like they’re layered on the film, rather than contained in the film.


Though I may make fast and loose with the rules of CSS, my CSS and XHTML is valid, as tested with the W3C validation tools. In addition, I also try to make sure the site is fully accessible. For instance, the main content page is one of the first items in the page, so that someone using a voice browser gets access to the writing, quickly.

I also provide a minimal stylesheet that doesn’t have any image downloads for those not interested in the images, or any of the specialized coloring.

If I miss something needed for accessibility, please let me know.

Sidebar images

The first trick to my stylesheets has to do with the sidebar images. Now, I could have used JavaScript to change the images based on the stylesheet picked, and this is a prefectly good approach. However, I wanted to keep my use of JS to a minimum.

What I did was create nine different DIV elements, each with a different background image. Using this approach, I can alter the images in the DIV elements for each style. If I have a style, like Old Bird or Minimal, that doesn’t use sidebar images, nothing shows for these elements in the page.

Now normally, with proper CSS and XHTML, elements contain something, but what a bother. If my sidebar image blocks must be said to contain something, then let them contain the clothes fairies wear when they’re not flying around naked on diaphanous wings.

See there? Tiny little Mary Janes.

Switching Styles

Stylesheets are linked into the page via the LINK tag, included in the HEAD section. Contrary to expectations, most browsers honor the LINK tag in the body, but not all – Mozilla is one that won’t. I found this out when I tried this shortcut, and that sharp-eyed poet, Joseph Duemer tapped me on the shoulder and asked, “Why is nothing showing?”

(Additionally, embedding a LINK element in the body is an invalid use of the element, and results in invalid XHTML.)

After resolving the issue of what to do with LINK, one stylesheet is then defined to be the primary one, pulled up by default and what people get if they don’t have access to JavaScript. I’ve settled on Fire & Ice as the default stylesheet. All other styles are listed as alternatives, and you can even access these directly if your browser supports listing of alternative stylesheets. Otherwise you can use the JavaScript to switch the styles. Very simple, very uncomplicated JavaScript.

The Javascript to run the styleswitcher comes from A List Apart, which also goes into detail on how to set a primary stylesheet, as well as adding links for alternative stylesheets. You can download the JavaScript from ALA, or here.

Add the JavaScript to the page with the following:

<script type=”text/javascript” src=””></script<

Change the “” to whatever the URL is for the JavaScript file. All that’s needed now is to add the stylesheet entries for people to choose, as mine are listed in the sidebar. The syntax for the links themselves is also listed in the ALA article.

All the elements are in place now for the static stylesheets – the main page components and how to switch between styles. To make the stylesheets dynamic requires a few additional tricks.

Dynamic Stylesheets

In the case of my site, dynamic stylesheets means stylesheets that have been modified by PHP before the stylesheet is returned to the requesting application.

Typically, a stylesheet is defined with a specific extension: css. When served there’s some assumptions associated with this extension about what the server does with the page, and then what the browser does with it. The same with a page with a PHP file extension. In this extension, the web server knows that the PHP needs to be processed before the page is returned.

The two can be combined with a simple little trick–adding the following to the very top of the dynamic stylesheet will return the page to the browser as type text/css:

// declare the output of the file as CSS
header(’Content-type: text/css’);

Now I can dynamically generate colors for Clashing Colors; or generate new sidebar images for Random Shot.

Or I can test the temperature of the post and adjust everything.

Dynamic stylesheets can have some latency problems. See the end of the post for an effective workaround for this.


The last stylesheet I’ll discuss is the Emotive stylesheet style. With this stylesheet, there’s a neutral stylesheet that’s used for the front page, but each individual post has an associated look based on the tone and content of the writing.

This particular technique used the WordPress ability to define a custom field for each post. This custom field has an associated named key/value pair in the database, the values of which can be accessed with a WordPress function, get_post_custom_values, passing in the key, in this case ‘tone’.

Once the value is accessed, it’s then passed to the emotive PHP program, using the following:

<link rel=”alternate stylesheet” media=”screen” title=”emotive” href=”/emotive.php?tone=

Since these keywords are only available within the loop to process a specific post, I had two options for handling the link/php pairing. The first is embed the LINK tag in the body and process it when I process the other individual post’s information; the second is to keep the LINK tag in the head, and move the PHP post processing up.

The first choice works, but not with all browsers, and not especially great, and it doesn’t validate. Since I didn’t want to hear from a series of people about how my page does not validate because I used the LINK tag in the body, I went with the second approach.

The how-tos on moving the loop up is specific to WordPress only, and a better approach would be to just provide a copy of the page, here. The technique can work with other weblog tools, using whatever post-specific value, such as category or other value.

Within the emotive.php itself, the code to manage the different tones is:

// declare the output of the file as CSS
header(’Content-type: text/css’);

if (isset($mood)) {
if ($mood <> “”) {
$file = $mood . “.php”;
include $file;
else {
else {

function setneutral() {
global $backgroundcolor, $blockquote, $A, $Avisited, $Ahover, $border, $img1, $image1,$img2, $image2,$img3, $image3,$img4, $image4,$img5, $image5,$img6, $image6,$img7, $image7,$img8, $image8;



Each of the tones is defined in its own file, such as thinking.php or tranquil.php and so on. The file consists of nothing more than definitions for each of the items replaced, similar to those shown in the setneutral function in the code block just shown.

If the stylesheet is called without passing in a tone, the neutral style is what shows – and it’s pretty plain. Otherwise, the associated tone file is included into the code, and its values are used as replacements in the stylesheet. For instance, the following is the CSS definitions for several elements, using dynamic values:

background-color: #<?php echo $backgroundcolor; ?> ;
blockquote {
color: #<?php echo $A; ?>;
div.update {
color: #<?php echo $A; ?>;
A {
color: #<?php echo $A; ?>;
A:visited {
color: #<?php echo $Avisited; ?>;
A:hover {
color: #<?php echo $Ahover; ?>;

You might notice from this example that the stylesheet definitions seem a little sparse. The reason for this is that the other, non-dynamic style settings for each element are defined in a second CSS stylesheet, the one known as “Minimal”.

This second stylesheet is also given the same title as the dynamic stylesheet, but it’s placed first in the header. What happens then is when the JavaScript loads the style titled ‘emotive’, both CSS files are loaded, the static one first. Since this is faster than the dynamic, and can cache, the emotive style suffers minimal disruption between pages. The only things that change are the colors and the images – not the layout or the positioning. Minimizing the changes to the latter helps minimize the latency effect with using a dynamic stylesheet that changes with each page.

In fact, using a static stylesheet in conjuction with a dynamic one, and stripping everything that doesn’t change out of the dynamic sheet, helps to control most stylesheet latency–that disruption that can occur when a stylehsheet is being loaded.


The ice photos for Fire & Ice are from the NOAA Photo Library, the Antarctica collection. There are some amazing pictures in this collection.

The fire photos for Fire & Ice are photos generously donated into the public domain by Jon Sullivan. The cherry and vegetable photos in Lemon Shake-Ups are also Sullivan’s work, and lovely work it is, too. My thanks for their use.

Most of the rest of the photos used in the sheets are mine, except for the Einstein photo in Emotive and Deep Thoughts. I found it and a couple of other computer-generated images used with Deep Thoughts at this site.

The clipart used with Lemon Shake-ups came from About’s Web clipart pages.

The cabinet member photos for the Presidential Cabinet stylesheet (which started as a gag), came from the White House, except for GW Bush on his horse, which came from the George Bush senior Presidential Library. The photo was morphed by placed Jr in front of the Alamo.

The monkey drawings are public domain drawings that can be found by searching on the terms “copyright free illustrations” in Yahoo, and then clicking on the Images tab. You’ll recognize several images used on O’Reilly books in the collections.