magpiebrain

Sam Newman's site, a Consultant at ThoughtWorks

“Charles Miller”:http://fishbowl.pastiche.org/ has posted up on the Javablogs confluence wiki some information on “including Javablogs generated statistics graphs”:http://confluence.atlassian.com/display/JAVABLOGS/Including+Javablogs+Statistics+Graphs+on+Your+Blog on your site. The example HTML mixes the semantics of the markup with the presentation logic:

Entries Added

There are several issues with this markup. Firstly, there is a @

@ with no purpose other than to center our image. Secondly it uses a font @@ tag to create a title. Finally it uses the @border@ attribute on the image. All of these aspects are presentation logic, and as such should really be moved into CSS. The benifits of seperating presentation from content using proper semantic markup and CSS are many and varied, and I won’t go into them in depth here, suffice to say that if you’re intersted in the topic, grab a copy of Jeffrey Zeldman’s “Designing With Web Standards”:http://www.zeldman.com/dwws/, or checkout any of these sites:

* “A List Apart”:http://www.alistapart.com/
* “Mezzoblue”:http://www.mezzoblue.com/
* “The Daily Report”:http://www.zeldman.com/

Not being the one to point out the flaw and offer no better alternatives, I went about producing some nice compliant markup. Firstly, I started with the HTML itself:

Entries to Javablogs over time

Entries to Javablogs over time

Hits from Javablogs this week

Hits from Javablogs this week

Gone are the @@ tags, the @border=@ attribute, the useless @

@ tag. On its own, this looks pretty uninspiring. For a start, by putting the graphs in a @div@ they appear below each other. This is easily fixed with a bit of css:

.graph {
  float: left;
  margin-left: 30px;
}

The @margin-left@ gives a bit of a gap between the two graphs which now sit next to each other. This can introduce another problem however – any @div@ following the @graph@ will also appear on the same line – in my case my related entries @div@ was at fault – this was fixed using @clear@:

.related {
  clear:both;
}

Next, we want our graphs to be centred:

.graph img {
  text-align: center;
}

And finally format our caption:

.graph .caption {
  text-align: right;
  text-style: italic;
  font-size: 90%;
}

Net result? The HTML is smaller, and yet more meaningful – the presentation is entirely within CSS meaning we can easily use the same styles elsewhere, and we can also change styles quickly (and even have different styles for specific users). You can now see the end result on my “Site Statistics”:http://www.magpiebrain.com/archives/000227.html page.

Advertisements

2 Responses to “Better markup for Javablogs graphs”

  1. Charles Miller

    In my defense, I should, in fact, have written _worse_ markup. I threw that page up in 5 minutes, and didn’t really do anything except cut and paste what we were using on the site already.

    What I should have done was spend the time to come up with something that would have worked on any tag-soup site that it was pasted into. The assumption is that people who care about valid HTML will know enough to write their own code. 🙂

    Reply
  2. Sam Newman

    No need to defend yourself – it wasn’t meant as an attack! And I certainly take your point about people who care about valid HTML would write it themselves (although I found several validation bugs in my site whilst writing this post). I have been attempting to get people interested in the whole ‘seperate your presentation from your content using XHTML and CSS’ thing but it hasn’t been easy – fantastic sites like the CSS Zen Garden certainly help to a point, but people take one look at the sometimes complex CSS and assume its not for them…

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS