Geek adventures in Glasgow

Glasses

Yesterday I travelled through to Glasgow (by railway) to attend the Scottish Web Folk forum meeting at the University of Strathclyde.

The Scottish Web Folk group is an open forum for all the web managers and web developers from the 22 Scottish Higher Education Institutions. Yesterday’s meeting was attended by representatives from

(Apologies if I’ve missed anyone.)

Of course, before I got there I had to make sure that I wasn’t killed in transit.

Shortly after leaving Queen Street station I stepped out onto North Hanover Street, en route to the University of Strathclyde’s Collins Building on Richmond Street, only to be stopped suddenly in my path as a Strathclyde Transport bus came swinging around the corner.

I stepped quickly back onto the pavement and stood looking at the side of the bus, which had paused, unable to turn the corner completely because of a car on the opposite side of the road which had stopped for the traffic lights.

Right in front of me — blocking both the road and my line of view — was a lingerie advertisement for Matalan: five or six scantily-clad ladies, who would have caught their death (not to mention would have been arrested) if they had been wandering around Glasgow in person dressed that way.

Imagine if the bus had knocked me down, I thought. Imagine if that had been the last thing I’d seen as I shuffled off this mortal coil. Depending on one’s theology, in comparison heaven may have been a sorry disappointment! But thankfully for me it wouldn’t have been, and since I wasn’t mown down in my prime I’ll live to see another day (and presumably another similar advertisement on the side of another similar bus).

The first item on the agenda at the Scottish Web Folk meeting was an excellent presentation by someone from SAC about CSS which led to a minor debate as to whether the XHTML <br /> tag is a block-level or an inline element.

David, who was making the presentation, had copied a list of block-level elements from somewhere which had included the BR tag. A number of us questioned this and so I decided to settle the matter and sent a text to Any Question Answered (63336).

Ten minutes later I had a reply:

AQA: Within XHTML the <br /> tag is a block element. Block elements define a discrete block of text, whilst inline elements are used to style content.

Which is just so wrong on so many levels (‘block’ or otherwise!). I suspect yet another £1.00 refund winging its way to me shortly from AQA.

Here’s what the W3C — the internet body that sets standards, such as HTML, CSS, etc. — says about inline elements. This is from section 3 “XHTML Semantic Modules” within the document “Modularization of XHTML™“:

3.3. Inline modules

Inline modules defined elements and their attributes that, when used in a document, effect their contents but do not cause a break in the rendered output.

Within both block and inline modules there are three subcategories of module:

  1. Phrasal
  2. Presentational
  3. Structural

And paragraph 3.3.3 shows that <br /> is an inline XHTML element:

3.3.3. Inline Structural Module

This module defines inline level elements to help control the structure of their enclosed content. Elements included are:

  • bdo
  • br
  • del
  • ins
  • span

So, David owes me a new kidney (he’d offered me a pint, but I don’t drink because of my dodgy kidneys so I felt that that was the next best thing) and AQA owes me a quid!

A fine day all round, then.

(Incidentally, the early time of this posting (pre-05.00 am) is courtesy of a nocturnal “meet the neighbours” incident involving our two cats and another similar beast in the utility room.)

Designing With Web Standards (Second Edition)

Spot the difference:

Designing With Web Standards (First Edition) Designing With Web Standards (Second Edition)

In the three years since Jeffrey Zeldman wrote his first edition of Designing With Web Standards his book cover has now turned green, the content has been printed in full technicolour and it appears (from the cover photo at least) that he now looks like Bob Carolgees in a beanie hat!

My copy of the new edition arrived last Saturday and I’m really looking forward to the opportunity to get into it. Not literally, I mean “read it”. I took the first edition on holiday with me, a few years back, to Tenerife. While Jane and her parents explored the island I sat on a balcony reading about the importance of Web standards. It’s not as sad as it sounds.

Well, okay, maybe it is but I certainly learned a HUGE amount from that book. I don’t think I’m exaggerating to say that that one book turned my life around entirely and helped to make me a completely different person.

Well, okay, maybe I am exaggerating a little, but that book gave me a new insight into what was possible with Web design. It gave me an insight into the importance of writing good, logically structured documents which are then displayed using Cascading Style Sheets. I’d read alot about both before but no-one had explained it to me quite so clearly and entertainingly as Mr Zeldman did on that balcony in the Canaries.

If you already have the first edition you probably don’t need this one (except for completeness) as you’re probably aware of the importance of standards and are keeping up with what’s going on (at places like A List Apart, for example). But this edition has been brought completely up to date. It even talks about Internet Explorer 7.

I thoroughly recommend this book to anyone vaguely interested in Web design and standards, and particularly if you are the kind of person who thinks that it’s okay to write Web pages with a class or div for everything and who uses H1, H3 and H4 tags without H2.

CSS walk-through tutorial

Snippet of CSS code
Snippet of CSS code.

For those who’ve ever wanted to get into Cascading Style Sheets (CSS) coding, but never quite got around to it, or couldn’t quite grasp what it was all about; or perhaps you just want to know what it is that some of us coders are going on about, Albino Blacksheep’s Live Design tutorial is for you.

What is CSS?

In recent years there has been a drive to separate the content from the design of web pages. That way updates to the look of a site can be made quickly and efficiently. This is done largely using Cascading Style Sheets: text files that explain to the web browser how to present the information on a page, eg make all links blue and underlined, make all headings black, Arial and 24 pt, etc. That way one change of the code in one file can update the look of an entire website.

There is a really good introduction to CSS at www.cssbasics.com. To see a website being transformed step-by-step with CSS look no further than Albino Blacksheep.

In 18 steps Albino Blacksheep (for that must be his/her name) walks visitors through the redesign of the ABS website.

From…

You can see how ABS started like this, with a basic, ‘no-frills’ marked-up page…

screenshot

To…

… to this, graphically pleasing offering. Using nothing more than the power of Cascading Style Sheets (CSS).

screenshot

CSS Zen Garden

Another impressive site, for those who’re unfamiliar with it, is the CSS Zen Garden. The premise of this site is that within each design the HTML page code is always the same, all the designers are allowed to change is the CSS file. Impressive stuff.