boogdesign posts

Longer posts on standards based web design, portable web development and Linux, intermingled with some stuff on my other nerd interests.

Rob Crowther, London, UK based Blogger, Web Developer, Web Designer and System Administrator - read my Curriculum Vitae

Buy my book!

Book CoverHello! HTML5 and CSS3 available now

Buy my other book!

Book CoverEarly access to HTML5 in Action available now

06/02/09

10:57:45 pm Permalink Blog software update

Categories: Blogging and Internet Culture

I've finally gotten around to upgrading b2evolution to a v2.x series release. In my usual manner, it took the v3.0 alpha release to spur me out of my inactivity. The version I'd been using up until today was released in November 2007, so it really was about time. Now I'm on the latest stable release which I'm sure is faster and more secure :)

One of the reasons I held off upgrading for so long is that the skins system in v2 is incompatible with the v1 skins, and it looked like a lot of work to port my custom skin over. I figured I'd wait until the next full re-design of my site, when I'd need to do a new skin anyway, but that particular project is still well and truly on the back burner. I have got the basics of the skin implemented but several of the other modifications I previously had are now absent and I've not really figured out how the sidebar works yet - so things will be looking a little different for a few weeks.


Tweet this!
Send feedback »PermalinkPermalink

18/01/09

06:42:46 pm Permalink Adventures in Web 3.0: Part 1 - HTML 5

Categories: Front End Web Development, Standards, HTML and CSS

Last week I was reading about the Event Apart re-design which uses HTML5. I have remained peripherally aware of HTML 5 (I'm on the mailing list) but mostly I've just been following the ongoing debate about adding RDFa to the spec (which has seemed, at best, like two groups of people talking at cross purposes). With major, albeit web designer focussed, websites starting to use it in production I thought it was probably time I learned a few of the nuts and bolts.

So to get started I had a quick skim through Lachlan Hunt's article 'A Preview of HTML 5' and, yes, nicked his code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>An HTML 5 Document</title>
  </head>
  <body>
  <header>
    <h1>A Preview of HTML 5</h1>
    <p class="byline">By Lachlan Hunt</p>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
  <article id="comment-2">
    <header>
      <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
          by <a href="http://example.com/">Jack O'Niell</a></h4>
      <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
    </header>
    <p>That's another great article!</p>
  </article>
  <aside>
    <h1>Archives</h1>
    <ul>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
    </ul>
  </aside>
  <footer>© 2007 Example Inc.</footer>
</body>
</html>

As you can see it's very similar to HTML 4, but with some unfamiliar elements:

  • DOCTYPE - lacks any kind of URI, it's included purely to trigger standards mode in browers
  • header, nav, article, aside, footer - new block level elements to provide more semantic structure to web pages, mostly they mean what you expect although 'aside' might be better considered as 'sidebar item'
  • time - new inline elements, although only one is shown here, to solve particular problems with, or encode common usage patterns of, current HTML, in this case the Datetime Design Pattern

These unfamiliar elements aren't a problem for Firefox, the above code displays just fine:

Unstyled HTML 5 in Firefox

So with the markup in place I started wondering about how CSS would affect things. The first thing I discovered was that Firefox doesn't have much in the way of default styling for the new elements - so setting background colours doesn't have much effect until I added some default styles:

header {
    display: block;
    width: auto;
}
nav {
    display: block;
    width: auto;
}
article {
    display: block;
    width: auto;
}
aside {
    display: block;
    width: auto;
}
footer {
    display: block;
    width: auto;
}

With these rules in place I was then able to apply a very tasteful colour scheme to my basic layout:

Styled HTML 5 in Firefox

Looks about the same in Google Chrome:

Styled HTML 5 in Google Chrome

And in Opera:

Styled HTML 5 in Opera

Unfortunately it all falls down in Internet Explorer as we're back to seeing the page unstyled. This is because IE doesn't apply CSS styles to elements it doesn't know about. Fortunately, there's a hack (which I discovered on Bruce Lawson's HTML 5 example page) - if you use document.createElement in JScript to create instances of the new elements (no need to even add them in to the DOM), IE 'learns' about them and then applies CSS rules. So I created a JS file and included it in conditional comments:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');

So now in IE7, looking fairly consistent with the other major browser engines:

Styled HTML 5 in IE7

Also in IE8b2 in 'compatibility mode':

Styled HTML 5 in IE 8

Unfortunately the workaround breaks in IE8 beta 2 in 'standards mode' - though it's been fixed for the next beta.

For extra credit I did a version of my stylesheet which used the CSS table layout rules (thanks Roger), but I think I'll save the advanced CSS, as well as the fun new HTML 5 elements, such as video and datagrid for follow up posts.


Tweet this!
1 feedback »PermalinkPermalink

10/01/09

02:57:28 am Permalink hCard Buttons Across the Web

Categories: Semantic Web and Microformats

A while back I made some buttons for various microformats, then discovered the official home for them and so added them into the wiki. This has had the side effect that many naive developers simply copy and past the code for the button from the wiki into their pages and then use the image hosted on my website. It's not a big problem for me - the image is small and it gets cached for a month whenever someone requests it so not massive bandwidth, and it's mostly just blogs and small sites which do it. Or so I thought...

hcard button on the Comet.co.uk website

This was brought to my attention this evening as I was switching my default from PHP 4 to PHP 5 and then breaking everything by putting invalid entries into my .htaccess file. After I was done I checked the error log and noticed several errors with a referrer of comet.co.uk, I went to look at the referring page and, sure enough, there was my hcard button. You'd think they'd be able to afford to host their own rather than leeching my bandwidth, but times are tough &amp;#58;&amp;#41;

I thought I'd do a little anecdotal analysis of hcard adoption so I downloaded the December log file. There were 76936 requests for microformat_hcard.png in December, 58792 from Comet - by far the most common. Next up was microformats.org itself with 8661, then one (apparently) very prolific blogger with 3715. There were a few smaller sites with a noticeable number of requests - a New Zealand electricity supply contractor had 85 hits while hcard is also popular among German universities with Universitšt Potsdam scoring 307 hits and Universitšt Bielefeld with 172 hits in what looks like an intranet application.

So not very meaningful in the grand scheme of things, but it is clear from the slightly eclectic set of sites I've listed above that Microformats and hcard in particular have seen adoption across a broad range of different websites. Hopefully we'll see more and more services which take full advantage of all this semantic data.


Tweet this!
4 feedbacks »PermalinkPermalink

22/12/08

11:02:56 pm Permalink Fedora 10: No fonts after update

Categories: Linux, Fedora / Red Hat

I setup Fedora 10 on a new (to me) IBM ThinkPad the other day. I've run into a couple of little niggles - the wireless network decided to stop working with NetworkManager, however system-config-services won't currently run so it still starts by default...

However, a much bigger issue occurred after I did an update late last week - the next time I booted up all the text had disappeared. The graphics were working fine, but there it was just blank where the text would be - in menus and dialogues as well as within applications. A quick Google revealed others with the same issue but no solutions. Finally, last night, Carter Weatherly worked out what the problem was (an issue with the latest version of the ATI driver) and posted a workaround in the bug report:

$ wget
http://download.fedora.redhat.com/pub/fedora/linux/releases/10/Fedora/i386/os/Packages/xorg-x11-drv-ati-6.9.0-54.fc10.i386.rpm
$ yum remove xorg-x11-drv-ati
$ yum localinstall xorg-x11-drv-ati-6.9.0-54.fc10.i386.rpm
$ reboot

Tweet this!
Send feedback »PermalinkPermalink

23/10/08

02:42:30 pm Permalink Internet Explorer Gets Some Oomph

Categories: Semantic Web and Microformats

Microformats are supported quite well in Firefox these days thanks to the Operator extension, but the 70-80% of web users still using Internet Explorer might have been wondering what all the fuss is about. Now, thanks to MIX Online, they finally have a chance to find out. Oomph: A Microformats Toolkit was released yesterday and can now be downloaded along with full source code.

There are various parts to the toolkit, some CSS stylesheets and authoring tools, but the main bit I'm interested in is the IE Add-in. The install is a standard MSI but, once installed, the Add-in is quite low profile - no toolbar or other buttons appear in the browser chrome. However, if you browse to a page with some Microformatted content, a little icon appears in the top left corner of the browser window.

Oomph discovers Microformats on the page

Clicking on the icon expands an overlay with an interface into the page's Microformats - it only appears to support hCalendar and hCard and you get a box for each even if there's only one type on the page. Microformats are displayed one at a time with some buttons to scroll through if there are more than one, then there's a toolbar beneath for exporting to Outlook, Yahoo! and others.

Oomph displays the Microformats found on the page

I did run into a few problems on some pages where the next and previous buttons didn't work (on this page, for example, the next and previous buttons transferred me to the blog engine skin folder) and also it seemed to be confused on my CV where I'd used the include pattern for my contact info (it's been a while since I updated it, so I'll have to check I'm doing it correctly before I investigate further). One really neat feature of Oomph is the maps interface, which you get by clicking the little globe symbol near the top left.

Map these Microformats!

As you can see above a map appears, this seems to be based on a search of the address information rather than geo but it worked pretty well for the example pages I tried. Overall, pretty good for a first release and a welcome addition to the range of user tools for Microformats.

A page with both hCalendar and hCard


Tweet this!
Send feedback »PermalinkPermalink

01/09/08

11:27:18 pm Permalink Mozilla Ubiquity

Categories: Usability & Accessibility, Front End Web Development

Mozilla announced a new labs project, Ubiquity, last week. It's intended to be a keyboard driven interface to advanced functionality in the web browser, similar to Gnome Do, which I've been using a lot recently, and the Mac application Quicksilver.

I decided to have a quick play by re-implementing part of my Use the new microformats API in your Firefox 3.0 Extensions tip as a Ubiquity command. Following the tutorial I was able to directly transplant the code, replacing only content.document with CmdUtils.getDocumentInsecure():

CmdUtils.CreateCommand({
  name: "grab-hcard",
  homepage: "http://www.boogdesign.com/",
  author: { name: "Rob Crowther", email: "robertc@boogdesign.com"},
  license: "MPL",

  execute: function() {
    Components.utils.import("resource://gre/modules/Microformats.js");
    var uFcount = Microformats.count('hCard', CmdUtils.getDocumentInsecure(), {recurseExternalFrames: true});
    if (uFcount > 0) {
        var uFlist = Microformats.get('hCard', CmdUtils.getDocumentInsecure(), {recurseExternalFrames: true});
        displayMessage(uFlist[0].url[0]);
    } else {
        displayMessage('None found');
    }
  }
})

Download grab-hcard.js Note: This command does not work in the current version of Ubiquity, a 'is not a function' error, not worked out what the problem is yet.


Tweet this!
Send feedback »PermalinkPermalink

31/08/08

10:01:24 pm Permalink IE8 Beta 2

Categories: General, Product Reviews

I previously did a review of the first IE8 beta, the second one came out a few days ago so I thought it would be worth a follow up post. Here are the main things I noticed:

  • Activities are now called 'Accelerators' though otherwise seem to be largely the same, so the main difference might be the renaming of the Firefox Add-on.
  • Suggested sites - which looks like a less interactive StumbleUpon.
  • Search suggestions - a more useful search auto-complete which looks quite cool, I've not come across any documentation on how to implement providers, however.
  • 'Compatibility' mode - the IE team have followed my (ha!) suggestion and enabling IE7 compatibility no longer requires a restart of the browser, simply click a toolbar button and the page reloads. By default it will render in standards mode on the general internet and in compatibility mode on intranets. This has not been a completely popular decision, but I'm not sure why. We all knew the main argument against 'standards mode by default' is that it would break thousands of intranets, and this seems to me like a practical solution to that problem.

Tweet this!
Send feedback »PermalinkPermalink