Category: Web development

A soupcon of things

Posted on by chris

I have a couple things I’d like to say. I’ll put them in a definition list, because it’s my HTML Element Of The Day*.

Royal Northern College of Music relaunches websites – with standards!
The Royal Northern College of Music has recently relaunched its website, and I took a quick look expecting to see the worst. I have a special interest in this particular site as firstly my dad works there, and secondly my ex-company went for the contract to do the site a few years ago. We didn’t get it, but I still think my design is better.
Ho hum. So I expected to see tables-galore, a feast of spacer GIFs and all manner of other nasties. Instead I find validation, sIFR and the Joomla content management system. Not quite perfect (then again, what is?) but lovely all the same. But my design is still better.
Horizontal inline stacking bar charts
OK, so the name might not be all that snappy, but I quite like my little idea for a sparkline-esque chart. I won’t bother explaining it too much, it’s just a collection of images in a line that have their total widths adding up to 100 pixels (or whatever you want to use) and the width of each individual image as the percentage of that value in the chart.
HISChart demoHere’s an example for a voting system. Users can vote good (green), average (orange) and bad (red). In this chart you can easily see that the good and bad votes are roughly equal, and the average votes are less. Easy, yes? It needs a bit of working on, but I’m fairly pleased with it.

* This probably won’t happen again, so in reality the definition list is my Only Ever HTML Element Of The Day. You get what you pay for.

PHPdom

Posted on by chris

I got a-thinking the other day (I do that occassionally) and thought how great it would be to be able to separate content from code – HTML from PHP – in a similar way to asp.net. Of course that quickly led me onto thinking about the Document Object Model, which allows JavaScript to interact with a HTML document and manipulate the content.

The obvious stuff would be there: innerHTML, getAttribute, setAttribute, appendChild, removeChild, getChildNodes etc. Fantastic, I thought, I could keep my logic and database-y stuff complete separate from nice clean template documents. It would be a revolution for PHP, and I would be hailed as a genius.

It’s a good job that I had a quick search to see if anyone else had done it, as someone definitely has. Not to mention it’s even part of the PHP5 core (OK, that’s actually for XML documents, but could be mangled to work with XHTML).

This has taught me two things:

  1. I’m not nearly as clever as I think I am
  2. Searching the web before opening my mouth proclaiming how great I am might save me from looking like a pillock

Quick introductions to web technology

Posted on by chris

A friend of mine from the GAWDs community is in the process of setting up a new directory website (well, it’s much more than that, but you’ll have to head over there to get the full picture). There are some useful articles on his site explaining various aspects of web technology, here are some you might find useful:

And there’s more where they came from. Everyone say “Thanks, Vince!”.

I’ve seen the future; garlic bread

Posted on by chris

There’s been some broo–ha–ha over the future of HTML. To say the least it’s been going on a while and has caused no small amount of disagreement in the web world. However a concensus seems to be on the horizon that HTML5 is the way forward, thanks mainly to the WHATWG.

I’ve taken a few moments to go through the specification for HTML5 and picked out some of the new structural features I’m most looking forward to using.

Pre-defined class names

I pretty much use all these class names every day, and I think that the vast majority of standards-aware developers do, too. What this amounts to is almost a kind of page-wide microformat, adding another layer of semantics to the page. Bring it on.

The nav elements (and the header and footer elements)

While I think this is a good idea I’ve got something in the back of my mind telling me that this is just over the line of too much semantics. Why I’d think that I’m not sure, probably years of writing <div id="nav">. It would make creating media-specific layouts much simpler, though.

The dialog element

This has pretty limited use, but I guess that in the future online dialogues will make up more and more of the content fo websites. That’s if people wake up to the power of user contribution. Being able to easily gather all these dialogues from across the web could provide the data needed to generate a web-wide conversation map. That’s just another way of seeing the connections that bind us all together.

The meter elements

I smell a whole new set of native graphing techniques in browsers. And here’s a prohecy for you, Apple’s Safari browser will do it first and make it look cool (closely followed by Opera).

The mighty canvas

It’s here already, thanks to support in a couple of the more forward-thinking browsers (even if it is buggy and limited) so there are high hopes for this little beauty. Again, it opens the way to all manner of graphical goodness.

The datagrid

There’s not much I can say about this as my brain has melted. If it’s implemented as thoroughly as the specs say it should be then this could revolutionise a lot of web application development by itself.

Anyway, take a look at the specs yourself. This looks like the future, and it looks good.