Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

hCup Microformat

A new, (as yet) unofficial World Cup Microformat dubbed 'hCup'.

Driving around Engerlaaand, it's hard to miss the flags of Saint George flying from buildings and cars. Every second person is sporting a replica shirt and petrol stations are doing a roaring trade in everything from Ferdinand fragrance air-fresheners to Rooney metatarsal merchandise. So in honour of both the up-and-coming Engerlaaand victory and the visit to these shores of talented Microformat's mid-fielder, Tantek Celik for @media2006, I am pitching a new, (as yet) unofficial World Cup Microformat dubbed 'hCup'.

Now I know that Microformats normally take months of logical, reasoned argument to be finalised, but this is World Cup football (?), right? We already know what the outcome will be, so why waste any breath talking about it?

Defining the term

For those of you unsure about the term Microformat World Cup, I'll do my best to define it.

The World Cup is a competition made up of sixty-four, ninety minute games of football over a one month period, ending with a victory for Engerlaaand.

hCup

The World Cup Microformat introduces a new schema called S.V.E.N., and a series of XHTML compounds for each stage of the competition, kicking-off with the opening group stage and leading on to the play-offs, quarter-finals, semi-finals, runners-up and blowing the whistle on Engerlaaand's stunning victory over the Aargies in the final in Berlin.

Group stage

Let's start with the group stage and the XHTML compound and class names that add meaning to the elements. The group stage is marked up as an ordered list with a class of hcup and an additional class of groups to denote the group stage.

<ol class="hcup groups">

The list contains items with a class of group for the eight groups (A-H), that in turn contain a header and an ordered list of the results, starting with the winner of each group. Needless to say that Engerlaaand will win Group B by several points over Sweden. The winner is marked with a class attribute of first and the runner-up with second.

<ol class="hcup groups">
[..]

<li class="group">
<h4 class="letter">Group B</h4>
<ol class="result">
<li class="first">England</li>
<li class="second">Sweden</li>

<li>Paraguay</li>
<li>Trinidad & Tobago</li>
</ol>
</li>
[..]
</ol>

The last sixteen

The last sixteen follows a similar format (ninety minutes of classic England football action) but includes a new class="playoffs" to accompany hcup" and a class of playoff on each list-item. It also includes a stunning Engerlaaand victory over Poland on June 25th in Stuttgart.

<ol class="hcup playoffs">
[..]
<li class="playoff">
<ol class="result">
<li class="first">England</li>

<li class="second">Poland</li>
</ol>
</li>
[..]
</ol>

Quarter-finals

To implement hCup for the quarter-finals, you need only change the stage related class names to qtrs and qtr and cheer our boys on to win against the Dutch on July 1st.

<ol class="hcup qtrs">
[..]
<li class="qtr">
<ol class="result">
<li class="first">England</li>

<li class="second">Holland</li>
</ol>
</li>
[..]
</ol>

Semi-finals

The semi-finals will be a little trickier to implement. Not because the code is any more complex, but that we have that difficult game against Brazil on July 5th in Munich (my favourite German city).

<ol class="hcup semis">
[..]
<li class="semi">
<ol class="result">
<li class="first">England</li>

<li class="second">Brazil</li>
</ol>
</li>
[..]
</ol>

The one we've been waiting for since 1966

The stage is now set for the final in Berlin on on July 9th. The flags will be flying, our streets will be deserted as the whole of England squints through beer goggles at the big TV screen daarn the boozer.

<ol class="hcup final result">
<li class="first guaranteed">England</li>
<li class="second handball">Argentina</li>
<li>France</li>

<li>Brazil</li>
</ol>

No need for penalties

So there you have it, no doubts, no contest, a World Cup Microformat. Maybe hCup can be extended or developed for other sporting events? Maybe hCup will even be endorsed by the FA, FIFA or best of all by Victoria Beckham Tantek Celik.

My detailed predictions for the 2006 World Cup are fully marked-up using hCup and it would be fantastic to see yours appearing somewhere too.

Now all that is left to say is Football's coming home. Come on Engerlaaand!

Replies

  1. #1 On June 5, 2006 02:51 PM luxuryluke said:

    �and, of course, Engerlaand wins, eh? Hmmm.
    Is that a necessary result of using your (proprietary?) new format? jk.

    Actually, the microformat hCopa would have Spain as the winner.
    hCuppola would have Italy, etc.� (or whatever.)

    Brilliant!
    Bring on the games!

  2. #2 On June 5, 2006 02:53 PM trovster said:

    Haha, quality. I already know of a World Cup related Microformat enhanced website from Simon Jobling, of the Multipack. You can choose your team, group (or all) and download the vcards to your favourite characters.

    About hcup, I think instead of separating the hcup up into semis, group etc, it should be a container of those, so you can display them all, and they're all related to the same event. You can integrate vevent as well. It might be beneficial to add the days they're paying too.

  3. #3 On June 5, 2006 03:27 PM James said:

    Australia finishing bottom of group F -- that's a bit harsh. It's been 32 years since we were last in the World Cup, we're not going to quit that easily!

    Best of luck to Engerlaaand though, I can't wait to see Crouch doing that dance again and again.

  4. #4 On June 5, 2006 04:07 PM The Fan said:

    Excellent! My predictions (in hCup format) are here:

    World Cup Predictions.

  5. #5 On June 5, 2006 05:46 PM Henrique Costa Pereira said:

    Hahahahahahahahhah Sorry, but Brazil will destroy England if they can go to the finals. I'm from Brazil and believe me: There's no opponets in soccer games.

    But it was very creative the hCup :D

  6. #6 On June 5, 2006 06:42 PM Isofarro said:

    Andy - nice one. Just had to do my own predictor. I've got a Holland beating Brazil final, with a number of interesting on and off the pitch incidents (including Germany's substitute goalkeeper Faulklund suffering a serious injury against Argentina in the Quarter Finals). True as bob, the final game and the third place involve some interesting tactics.

    With this sort of microformat meta data, someone clever could produce a competition that scored these predictions against the actual results, and determine a winner. To enter, just submit the URL of your page containing the hcup microformat.

    Do you know if anyone is considering doing that?


  7. #7 On June 5, 2006 06:43 PM Malarkey said:

    @ Henrique Costa Pereira: No way! It's an England win, of that much I'm certain! :)

    @ Isofarro: Just to clarify, Tantek had no part in making hCup, infact I'm sure he'll tell me that it's not a Microformat at all but a set of semantic class names. (Actually, he just did! :))

  8. #8 On June 5, 2006 07:01 PM Malarkey said:

    Oh and no one has made any gags yet about wanting to meet someone with an hCup for real! I have to say that I'm impressed! :)

  9. #9 On June 5, 2006 09:22 PM Tomas said:

    Some quick math for you, Andy: 54 x 74 - 1990 equals what?

  10. #10 On June 6, 2006 12:00 PM Louise Dade said:

    "... our streets will be deserted as the whole of England squints through beer goggles at the big TV screen daarn the boozer."

    -Ahem- Not this particular section of England! Some of us will be desperately trying to find a football-free corner of this green and pleasant land!

    To top it all, if England lose, the country will be unbearable, but if England win the country will be even more unbearable (although on the plus side, perhaps people will stop going on about 1966).

    Now, what about a microformat for Wimbledon? It should be called 'hSW19' - SW19 being the Wimbledon postcode. Obviously it'll include:

    <li class="hSW19 earlyExit">Tim Henman</li>

  11. #11 On June 6, 2006 02:55 PM Phu said:

    Well, I'm also predicting that football's coming home... I wonder; what is it about the world cup that makes us us England fans so optimistic every bloody time?

  12. #12 On June 6, 2006 04:45 PM Daniel said:

    Oh how I would love your optimism Andy! Seriously, have you ever watched us :p

    We always seem to have a massive expectation in this country that we're going to win.... Come on England!!

  13. #13 On June 6, 2006 08:05 PM Jack said:

    If we're really realistic, England are a second tier team at best. Henrique is right, Brazil would destroy England.

  14. #14 On June 7, 2006 12:38 AM martin said:

    @ Tomas: the number of the bus you'll be going home on? ;)

    Things would seem to be pretty desperate if you've taken to numerological artifices to boost your confidence in the chances of der Nationalelf.

    But perhaps you posted your comment with the same kind of arched eyebrow that I believe Malarkey did this post. Or I need to have some of what you're drinking Malarkey - how you manage to be so confident, in the full knowledge of our footballing history (largely one of dramatic but sometimes arguably undeserved failure) I just don't know!

    Hmm... I wonder which team Sepp Blatter would want to win?

  15. #15 On June 7, 2006 09:44 AM Mats Lindblad said:

    You made a small error, it should be:
    <li class="first">Sweden</li>
    <li class="second">England</li>

    And shouldn't the classNames be implied by the teams position in the list?
    Oh well, I'll see you at @media2006 and you can guide me to a good pub so we can watch football instead of coding it. :)

  16. #16 On June 10, 2006 06:49 PM Gerben said:

    I always like a bit of cheating ;-)

    .hcup.final.result .first:before {
    display: none;
    }
    .hcup.final.result .first:before {
    content: "Holland";
    }

  17. #17 On June 10, 2006 06:51 PM Gerben said:

    Sorry. Some copy-paste-typo sneaked in.

    .hcup.final.result .first {
    display: none;
    }
    .hcup.final.result .first:before {
    content: "Holland";
    }

  18. #18 On June 12, 2006 08:03 AM Nano said:

    Indeed there's errors in the code, it should be:


    <li class="crespo hurts">Argentina</li>

    <li class="beckham back-home again">England</li>

  19. #19 On June 12, 2006 08:47 PM Dudu Figueiredo said:

    Sorry, but Henrique Costa Pereira is right, i'm from Brazil too, and our team is realy good this year... But England is not bad, may be we(equips) see each other near the finals!
    Anyway, nice exemple to explain microformats.

  20. #20 On June 14, 2006 09:02 AM Anne van Kesteren said:

    So besides the fact that the Ducth are going to rule this year you really want to escape that ampersand in the example.

  21. #21 On June 14, 2006 01:01 PM Malarkey said:

    @ Anne van Kesteren: Ducth? Ducth? ;)

This article was originally published by Andy Clarke on his personal web site And All That Malarkey and is reproduced here for archive purposes. This article is published under a Creative Commons By Attribution License 2.0.

Andy Clarke Stuff and Nonsense Ltd.
The Cow Shed Studio, Eversleigh Gwaenysgor Flintshire LL18 6EP UK

Or call us on the dog and bone on +44 1745 851848. Download our vcard.

© Copyright Stuff and Nonsense Ltd. All Rights Reserved except as noted.