“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 @
* “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
Hits from Javablogs this week
Gone are the @@ tags, the @border=@ attribute, the useless @
.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.
magpiebrain 
2 Responses to “Better markup for Javablogs graphs”
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. 🙂
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…