We'll be switching to HTML5 next year, as part of our realign, and I'm thinking about the best way to mark up some of the elements that will be surviving. Working from the bottom up, I'm starting with our site's footer, and the featured vehicles, events and jobs.

Each of our featured items - be it a vehicle, an event or a job listing - are marked up in a similar way. Vehicles have a photo, which the other items do not, and events have a date next to them, which the other items do not. With styles applied, they look a bit like this:

The markup we use to get this isn't pretty and, because HTML - prior to HTML5 - didn't allow block level elements to be nested within an anchor tag, we had to mark items up inside them using different methods. For instance, for events, we use the following markup:

For a vehicle, we currently use this markup:

As you can see, neither takes advantage of the new elements that HTML5 has to offer.

But what elements to use?

In the quest to be as semantically correct as possible, it's easy to get bogged down in the choices on offer. Do we carry on using unordered lists, or switch to articles? The latter is arguably a better choice, since each item that we link to is atomic. Each item will either be a vehicle, a job listing or details of an upcoming event.

Currently, each of the featured sections is marked up like this:

Switching that to sections, using articles inside each section currently seems to me like the way we'll go. But marking up the individual items - the vehicles, updates and job listings - seems like the next hurdle. I'm sweating the details right now - but am I going over the top?

What markup would you use?

It's that time of year again:

In it's fourth year, the A List Apart Web Design Survey gives us all a chance to stand up and be counted, and offers valuable insights into the state of our profession.

The ALA team released the results from 2009's survey last month, something they promise will take a lot less time with this iteration, and the findings are interesting and just might be incredibly useful to you or your team.

If you work on the web, take 5 minutes out of your busy day and take this year's survey.

Last week, whilst searching around, for the umpteenth time, for an application or website that would help me search through my tweets, I came across a wonderful web application called Tweet Nest. 

Made by Andy Graulund (who has a lovely visual blog), it is a beautifully designed web application designed to work on your own LAMP stack. Following a very quick and easy-to-follow install. Tweet Nest grabs your tweets and your profile and stores them locally in a MySQL database and allows you to browse through them using a simple interface. 

Of course, you don't need to expose your archive to the web, as I have done, and can instead choose to run Tweet Nest locally on your own computer. This comes with its advantages and disadvantages, the most glaring being that you need to have your computer with you whenever you want to use your archive of tweets.

Sadly, because Twitter only exposes your last 3,200 tweets via the website and the API, you'll only be able to retrieve your most recent 3,200 tweets. At the time of writing, I've amassed over 4,500 since January 2007 when I signed up, which means that over 1,300 of my earlier ephemeral musings are, for the time being, unavailable to the general public. Twitter say they'll eventually give us access to these tweets.

For now you're safe, and despite the fact that this is probably no bad thing right now, I can think of at least two main reasons why you'd want to keep hold of your entire twitter history:

Twitter won't go offline tomorrow... right?

I'm sure many people thought exactly the same thing about ma.gnolia. The number of factors affecting an application's availability is probably as huge as the amount of faith each of us puts in the online services we use on a daily basis. 

While Twitter is unlikely to go out of business tomorrow, there's always a possibility that they'll be acquired by a bigger fish at some point in the future - a fish whose privacy policies and track records make it difficult for some of us to continue using the service.

Tweet Nest means that, in the unlikely event that my tweets disappear from their original source overnight, I'll at least have all of my tweets up to the last half hour. 

Cloudy, with a chance of missing tweet history

When Twitter Inc. acquired Summize, I believed that Twitter's search engine would become much more useful. Sadly, there's still no built-in way to search your tweets further back than 10 days in the past, so a huge draw for me would be an application that allows me to do just that - search through my older tweets.

On a number of occasions, I've used Remy Sharp's excellent Snap Bird service to attempt to look into my twittering past. Snap Bird is, essentially, a version of Tweet Nest that's built to run within your browser, powered by JavaScript. It's also open source, just like Tweet Nest, which means that if you wanted to tweak it, to use HTML5 local storage for instance, you'd be able to.

Sadly, because there's limited error handling built into the app - something you'd be able to fix, if you wanted to contribute to the project - it becomes frustrating when the Twitter JSON API craps out midway through a search. This happens to me at least once every time I use it, something which probably won't with Tweet Nest.

Fire and Forget

Finally, once set up, with the addition of adding a couple of cron jobs, I never need to worry about the application again - bar updates, of course. By adding two lines to my crontab, my tweets are fetched every half hour between 6am and 1am, and my user profile is updated once a day.

If you're not familiar with the syntax necessary to create a cron job, just follow these instructions once you've installed Tweet Nest:

• Open up a terminal window and, if your solution is hosted on a server, ssh into your server using your normal account.
• Type crontab -e and hit enter.

• Add the following lines to the text editor that apepars

  0,30 0-1,6-23 * * * php /tweetnestpath/maintenance/loadtweets.php > /dev/null 2>&1
0 0 * * * php /tweetnestpath/maintenance/loaduser.php > /dev/null 2>&1

  Note: Obviously, you'll want to replace /tweetnestpath/ with the actual path to your installation.)

• Save your changes (usually CTRL-O) and exit the editor (usually CTRL-X)

Your new crontab will now be installed, and you should find your new tweets added to your local database every half hour. This is what works for me, but you may find that your server won't allow you to run custom cron jobs. If in doubt, you could always ask a bunch of people who know what they're talking about.

Looking forward to looking backward

I've only been playing with Tweet Nest for a few days, so I'm still finding things out. Already, however, I can see that it's a well made piece of software and I'd recommend it to anyone who values their tweeting history.

If you're not quite ready to take the plunge yourself and would just like to take a look at how it works, head over to http://tweetnest.abitgone.co.uk.

Whilst I'm no conference speaker, I've had the privilege of being invited to stand up in front of a group of my peers and talk about what I do on a few occasions. You won't need to view all 25 minutes of my session at The Multipack Presents to realise that, when it comes to delivering a talk, I'm firmly placed within the amateur group:

However, whilst I'm more of an attendee than a speaker, I'm also a relative newbie when it comes to conference attendance. My first, in October 2007, was in London at the Future of Web Apps Expo. Even as a lone delegate, I managed to become acquainted with a few other delegates who made the three days a little more interesting.

Choosing a conference

As a newbie, and even as a seasoned conference attendee, my thoughts are that the decision to attend a conference will be based on a few things:

• How much?
• What is the conference's primary theme or subject?
• Is it a multi-track conference?
• Who is speaking, and what are their talks about?

If the conference demonstrates value, I'll often approach my boss, but even before I'll think about doing that, I'll be asking myself whether I think the conference is affordable and offers good value for money, or whether it's just paying for a few people to come a long way.

Secondly, and most importantly, it's subject and theme. More and more conferences are moving away from the typical designer/developer divide and focusing on a theme or a subject. Instead of being developer-focused, for instance, a conference may lean towards development, but include a few talks on design that would be of benefit to the developers attending - and vice-versa, of course.

As for multiple track conferences, I'm not sure I'll visit another. FOWA London 2007 and 2008 were good, but the complexity of having a one-for-all type conference diluted the effectiveness. There were talks I wanted to see that overlapped which meant I missed some. Perhaps I'm lazy and don't want to move around too much, but a focussed event, with a single track, catering to a theme instead of splitting the audience needlessly, seems like a more successful idea to me.

Finally, which speakers will be there, and what are the subjects of their talks.

Who are you and what are you talking about?

I'm going to be really clear here. I cannot fucking stand it when I am sat in the audience, looking forward to a topic - based on the title, and what little blurb we're given - only to be let down by the speaker, who is only on stage to sell their product, doesn't really give a shit about the topic, and is talking to the wrong audience. On more than one occasion at the Future of Web Apps conferences, I simply got up and walked out of the hall, disgusted at this tactic.

Instead of entitling your talk "Special Announcement" when it's a sales message, or "Cloud Computing in the Enterprise" when it has nothing to do with cloud computing, but is more about using your SAAS offering instead of Microsoft Outlook, do the honourable thing - tell us it's a sales presentation.

Conference organisers should be ashamed of this too. Knowing, full well, that your sponsor is going to try to pull this tactic and doing nothing about it smacks of a lack of integrity. The right thing to do would be to approach your sponsor and suggest a different title of the topic. If it's a sponsorship message, let your audience know.

Lastly, the most important thing to do is to make me, as an audience member, interested. I go to conferences for two reasons - knowledge and networking. If you're up on stage and you're not being clearly labelled as a sponsor who is giving a sponsorship message, I'd really like it if I came away from your session having learned something new, or shown a new way of looking at something. 

Giving to your audience without asking in return

Of the three big conferences I've been to, the person who stands out the most for me in terms of giving knowledge to the audience without asking for anything in return, was Matt Biddulph. As CTO of Dopplr - before he became software designer and creative technologist for Nokia after they bought Dopplr in 2009 - I was witness to two fine talks in two consecutive years.

On both occasions, Matt's talks were completely different. In 2007, he spoke about getting the best out of third-party widgets on your site, and helping other sites when you offer widgets. In 2008, his talk was about messaging, about modern successful applications being a collection of small parts, loosely coupled, and about using n-tier mentality when designing apps, even when you're using a single server.

In both talks, he showed insight, delivered tips on good development practices, but most importantly he gave. Sure, he mentioned he was from Dopplr, and he explained what Dopplr was, but at no point during any of his talks did he try and sell you anything. More importantly, his 2008 talk was completely different to the one he'd given in 2007.

The problem of being a conference regular

To someone attending their first conference, everything is new - the experience, the speakers and the talks themselves. 

If you go to a lot of conferences, particularly in the same area and in the same few months, there's a good chance you'll see some familiar faces on stage. There's good reason for that - the ones that appear at multiple conferences are there because they have something to give: knowledge, a good message and passion about their topic.

The more conferences you go to, and the more thinly-veiled sales presentations you're coerced into sitting through, the more cynical you become. I took a year out of attending conferences last year. My reasons were mostly due to having constrained budgets, a trip to Australia and New Zealand, a wedding and a honeymoon, but for the conferences I could have attended, there was no reason for me to go back. In the majority of cases, I saw a worrying trend of similar subjects, similar talk titles, and a lot of the same people.

Let me be clear, however: I would happily sit in an audience and listen to Relly Annett-Baker talk about copywriting; Matt Biddulph about anything related to application architecture; Stuart Langridge, Remy Sharp or John Resig about anything related to JavaScript; Bruce Lawson about emerging web standards; and - in fact - anyone talk passionately about a subject that excites and intrigues them.

After all, isn't that one of the reasons you go to conferences?

Less of the same, please

In 2008 at FOWA, I saw Francisco Tolmasky demonstrate the Cappuccino framework and his company's 280 Slides application, built the aforementioned framework and "Objective-J". 280 Slides is, at it's core, a clone of Apple Keynote that works within a browser that will support it. I also recall Ryan Carson coming onto the stage shortly afterwards, proclaiming that 280 Slides was really the future of web apps. 

I remember how Microsoft tried to get the Visual Basic community building web apps using ASP.NET in the early days - drag and drop components, absolutely positioned onto an HTML document - and Objective-J and Cappuccino seem, to me, to be very similar to that approach. Tolmasky spoke with passion and knowledge about his product, but I didn't take much away from his presentations at FOWA because Atlas, Cappuccino and Objective-J strike me as technologies that just aren't relevant to me as a web developer.

His talk at FOWA 2009, which I didn't attend, was based around Atlas, his company's web-based development environment for Cappuccino apps. This year, he's back at FOWA, with another talk on how to write 'stunning' apps with less code. Sound familiar?

Please don't misunderstand me here - I'm fully aware that, as an invited speaker or expert in a particular topic, you're going to talk about the same subject. As I said above, I'll happily listen to a person talk about a subject that ignites them for hours on end, again and again, but delivering the same talk - or a talk which is only slightly different to your last one - at different conferences is, as far as I'm concerned, lazy. Sure, you may be talking to a different audience this year than last, but you've got to plan for some overlap between new and old attendees.

As someone paying to attend a conference, I expect - with reason, I hope you'll agree - that the talks I'm listening to will be informative, entertaining and, above all, original.

Honing your craft

The one exception to this rule, in my opinion, is where talks are given at grassroots and free conferences. If the speaker isn't being paid to attend, or is giving their time up for free, or if the event itself is organised by a grassroots organisation such as The Multipack, then a degree of repetition can be acceptable, giving the speaker a a chance to test out a new talk with a smaller, willing bunch of enthusiasts, some of who may be able to give constructive feedback.

Photo Credit: Andy Higgs

I'm grateful to have had the chance to hear Drew McLellan, Jon Hicks, Stuart Langridge, Bruce Lawson, Remy Sharp and Simon Collison (pictured above) talk about their subjects, all for free, thanks to the Multipack Presents and Geek in the Park events that I've been involved in, and I think more events like this will help up-and-coming speakers talk about what matters to them.

Giving people the opportunity to talk is what will make for greater conferences in the future, with fresh ideas from fresh people. I'd love to see an event whereby groups of established speakers team up with relative newbies - one pair per subject - to present a talk and chair a relaxed, discussion, very similar to some of the Multipack Presents events that have been held in the past, but with an opportunity to promote more speaking.

Don't judge a conference by it's speakers

But importantly, the quality of a conference can't be calculated solely on the speakers that are attending. I did some research on people who have spoken at some of the more established conferences since 2006 - dConstruct, Future of Web Apps, @media. When I looked at the line-ups for the upcoming conferences that I have the option of attending in the next six months, I checked to see who I've seen before or who I've no interest in seeing again.

When I used this method against FOWA London 2010, dConstruct 2010 and New Adventures in Web Design 2011, the results were as follows (where SB/NI means Seen Before or Not Interested):

The raw speaker data is available as a Google Spreadsheet, which you're more than welcome to append to as time goes by. I simply looked at the speakers that I've seen before and the talks that I would not be interested in and tallied them together.

Of course, if I used this method alone, I'd be suggesting that seeing Matt Biddulph a second time would be a bad idea, but speakers such as Biddulph show that a good speaker will tailor new talks to his audience. God knows that there are conferences out there who bring out the 'big' names, like Kevin Rose, Gary Vaynerchuck and Mike Arrington, but I'm not sure I'm bothered about hearing from that kind of internet celebrity anymore.

I've never attended a barcamp or an unconference, despite the fact that I'd very much like to be involved in one. I feel that the interaction between speaker and audience is one of the most important parts of learning, and a smaller number of speakers, with short, sharp presentations would allow for more interaction, and a better chance of taking something valuable away.

Simon Collison, who spoke at Geek in the Park last year, has created something a little different - the New Adventures conference, starting with New Adventures in Web Design in January 2011, and it looks like it could be exactly what I'm hankering for:

New Adventures... will be carefully curated; chock-full of integrity, opinion, and fresh content, with an emphasis on shaking things up and challenging convention. This event has inspiration, thinking, and intelligence at its core. It will encourage debate, enthuse, excite, ask questions, and look for real outcomes.

Simon Collison — New Adventures in Web Design

I'm sure that Colly will pull it off. His intention of working closely with the speakers and ensure that they're sticking to the principles of the conference will pay dividends, and given the price and location, I expect it will be a very popular event.

The proof of the pudding

I'm sincerely looking forward to both dConstruct and New Adventures in Web Design for different reasons. dConstruct has always attracted me but, until this year, I've never been able to attend. The type of talks and the fact that the talks are very much cross-discipline means I'm hoping to come away inspired in many different areas of my craft.

New Adventures excites me because it could turn the idea of the conference on its head - the format and the whole idea that the event will be curated makes me think it will address the problems with many of the conferences that I've outlined above. I really do wish Simon well with the event and look forward to being in Nottingham in January.

However, as mentioned at the beginning of this post, my attendance of multi-track super-conferences - like FOWA, @media and the like - has come to an end. Smaller events, focussed on a single theme, as opposed to being all-encompassing developer- or designer-only events, are where I'll be spending my time in the future.

Along with grassroots events, I expect they're also where I'll be finding the most value.

Having spent the first two weeks of June running both sites in tandem, Murdoch finally called time on timesonline.co.uk a couple of weeks ago. The switch was flipped, registrations became mandatory and the great experiment began.

The graph above, from Experian Hitwise, shows what happened in fairly bleak terms. If you average that line out, prior to the launch, you get a daily market share of around 4.5%. Fast forward to June 2nd, when thetimes.co.uk launched, and the migration begins, but the mass exodus in the week commencing June 16th is incredible, suggesting that the website has lost over 50% of its regular daily traffic.

A lot of people - myself included - believed this would happen, but the worrying factor is this: the drop you see in the graph above isn't the result of Murdoch asking people to pay, but the result of forcing people to register.

It'll be interesting to see how much of the 1.8% market share remains now that people are being asked to pay.

Had I known that Microsoft was planning on releasing another platform preview of IE9, I'd have waited before publishing yesterday's post on the performance of filters in the major browsers. There doesn't appear to be any support for the filters, but there is a huge jump in the level of support for SVG.

Consider the results seen in IE9 Platform Preview 2:

Now look at the same page, rendered in IE9 Platform Preview 3:

What a difference! In this particular example, I'd say this compares almost identically to Safari's support - I've used the Windows version to take this screenshot so that you don't see the difference between Helvetica and Arial on the OS X version:

Forgiving a couple of artefacts on the pie vectors, this is stellar stuff from Microsoft - and about bloody time too!

Filters are a really powerful addition to SVG's toolkit, allowing you to apply effects similar to those found in Adobe Photoshop, using techniques including displacement maps, colour matrices, simple image merging, transforms and gaussian blurs.

You'll remember that we're creating a new dashboard - and various associated reports along with it - for our intranet (and if you don't, you can take a look at all the SVG-related posts on this blog to refresh your memory). This means, for some people, replicating as much as possible from existing Excel spreadsheets that currently do the job.

One particular report contains a bunch of single slice pie-charts, which tells people how they're performing in a particular area of the business:

Given our recent successes with SVG, when I saw this report, I knew it'd be dead easy to replicate in SVG so, once again, I fired up TextMate and threw some code together. The original report has a drop shadow underneath the pies themselves, which is fairly easy to replicate using SVG filters:

<filter id="dropShadow">
    <feOffset in="SourceAlpha" result="Shadow" dx="0" dy="1" />
    <feColorMatrix in="Shadow" result="FadeShadow" type="matrix" values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0" />
    <feGaussianBlur in="FadeShadow" result="BlurShadow" stdDeviation="3" />
    <feBlend in="SourceGraphic" in2="BlurShadow" mode="normal" />
</filter>

All of the other drop shadows on the intranet are 25% black (though for demonstration purposes, I've used 50% in this example), use a 1px vertical offset and 3px blur. Using SVG filters, this means we need to apply four steps:

• Use the offset filter - feOffset - to take the source alpha of our element, and move it 1 pixel down
• Use the colour matrix filter - feColorMatrix - to reduce the shadow to 50% of it's intensity
• Use the blur filter - feGaussianBlur - to blur the shadow
• Use the blend filter - feBlend - to add both graphics together to achieve the drop shadow effect

The feBlend filter can use different modes, much in the same way as Photoshop, to achieve different effects - in this particular case, I've just used a normal mode. As you can see from the images below, the results look pretty good in Chrome, Opera and Firefox, but the effect fails to render in Safari, SVGWeb or IE9 Platform Preview 2. Support still feels a very long way off in IE9 (update: see Massive leap for SVG support in IE9 Platform Preview 3):

(download)

Click here to download:

support-for-svg-filters-in-the-major-browsers-wssopmAJJDbnbIgrBoDD.zip (423 KB)

It's a real shame that, whilst filters which are available in WebKit, they don't appear to be supported in the current releases of Safari for both Windows and OS X. A lot of focus appears to be put on the canvas implementation, but little things like this, which could easily be switched on, don't appear to get any love.

So whilst SVG filters are really very powerful, for the time being they're still not supported fully across all browsers - but just like HTML and CSS, that doesn't stop us from using the features for those browsers that do support it.

SVGWeb continues to impress

I'm still very much impressed with SVGWeb, in that it can take the SVG and translate it into something that most Internet Explorer browsers can stomach - an Adobe Flash movie which will display it relatively well. But it's still Flash, and in some cases where the SVG markup is particularly heavy, it can take a second or two for the image to display.

There are other ways, I know. Libraries such as Raphaël are available that will create SVG and VML for IE, but this requires us to switch away from using actual SVG markup and move to a more API-like way of creating graphics - I don't really want to go down that route - not just yet anyway.

So I just can't help but wonder if there's something which would perform the same process as SVGWeb, but output VML instead. If you know of any projects, then I'll be happy to be a willing beta tester, evaluate it and report back.

In the meantime, we'll be sticking to SVGWeb.

Gauges, the types of which I discussed in my last post, are pretty useless without target zones showing people where the needle should be pointing. With that in mind, it's probably a good idea that we add them to our gauges before they become part of the dashboard. This, of course, means drawing SVG arcs. Which means I need to know where a particular point is on the circumference of a circle.

Which means trigonometry.

I really enjoyed maths at school - two really great teachers helped - even going so far as to enjoy trigonometry. Sadly, as I only use a small portion of the maths I used to be quite fluent in at school on a day-to-day basis, most of the things I used to know now escape me, without a quick trip down Google's memory lane.

Even a fairly basic task - finding the x and y coordinates of a point at a given angle, on the circumference of a circle of radius r, centred at the coordinates cx,cy - saw me grind to a halt for a minute or two this morning. Then you find what you were looking for, and you remember it was dead easy all along:

Adding the zones to a circular gauge means I need to know where the arc starts, and where it finishes. Fortunately, SVG will worry about the rest for me, but I need the x,y co-ordinate pairs for four points on the zone.

Sure, we could calculate these by hand and hard-code them in, but given that the gauge is going to change and be re-used, it's better - and easier - to get some code to do the calculations for us. Good job that SVG supports JavaScript, then:

    function c_xy(r, a, cx, cy) {
        var cx = 110 + (r * Math.cos(a * (Math.PI/180)));
        var cy = 110 - (r * Math.sin(a * (Math.PI/180)));
        return { 
            x: cx,
            y: cy
        };
    }

This function will return an object with the x and y coordinate of a point at angle a on the circumference of a circle of radius r. All it's doing is exactly what the equations on the chart above show.

So now we have a way of finding the co-ordinates of the points on the zone, let's create a function that will add a zone to the gauge:

    function gauge_addZone(pct1, pct2, fill, className, r1, r2) {
        var a1 = (-270*(pct1/100))+225;
        var a2 = (-270*(pct2/100))+225;
        var c1s = c_xy(r1, a1 % 360, 110, 110);
        var c1f = c_xy(r1, a2 % 360, 110, 110);
        var c2s = c_xy(r2, a2 % 360, 110, 110);
        var c2f = c_xy(r2, a1 % 360, 110, 110);
        
        var zone = document.createElementNS("http://www.w3.org/2000/svg", "path");
        var d = " M " + c1s.x + "," + c1s.y +
                " A " + r1 + "," + r1 + " " + (pct2-pct1 > (200/3) ? "0 1" : "1 0") + " 1 " + c1f.x + "," + c1f.y + 
                " L " + c2s.x + "," + c2s.y + 
                " A " + r2 + "," + r2 + " " + (pct2-pct1 > (200/3) ? "0 1" : "1 0") + " 0 " + c2f.x + "," + c2f.y + 
                " Z";
        zone.setAttribute("d", d);
        zone.setAttribute("fill", fill);
        if (className != null) {
            zone.setAttribute("class", className + " gaugeZone");
        } else {
            zone.setAttribute("class", "gaugeZone")
        }
    
        document.getElementById("gaugeBack").appendChild(zone);
    }

This function does all the heavy lifting. The gauges I'm creating all work on the theory of ranges from 0% to 100%, so by passing in the starting and finishing percentages - pct1 and pct2 - of the target zone, I've a good idea where I'm expecting the zone to be drawn.

The fill value allows me to pass in a colour, if I so desire, and I'm hoping className should be fairly self-explanatory too. The r1 and r2 values allow me to set the thickness of the zones. For the zone in the example above, I've used 80 and 55, but if I want a thin zone to be drawn, I could specify radii of 80 and 75, resulting in something like this:

Now it's time to use our c_xy function to get our co-ordinate objects for the four points. The zone is created as a path element, and we draw using the d attribute. I won't go into the actual syntax, but it's safe to say that it's fairly simple to pick up. SVG Basics has some good tutorials on paths and arcs that you can read if you're so inclined.

Finally, because we don't really want to hard-code the position of the pointer, let's create a function that will move the pointer for us. This one's really basic, but you could extend it to make a smoothly animated pointer with minimal fuss:

    function gauge_setPointer(pct) {
        var a = (270 * (pct/100));
        document.getElementById("gaugeNeedle").setAttribute("transform", "rotate(" + a + ",110,110)");
    }

All we're doing, because we know that the angular range from 0% to 100% spans 270°, is multiplying that angle by the percentage, and then applying a transformation to the gauge needle. Very simple.

Finally, we actually call the functions:

    gauge_addZone(80, 100, "#0f0", "zoneGood", 80, 55);
    gauge_setPointer(83.5);

Which gives us exactly what you've seen above:

The code I've used above means that we can also add multiple zones, should we wish. If, as well as showing a safe zone, you want to also add a zone which should be avoided, you can do that. All we'd need to do would be to add another gauge_addZone line, and we're done:

    gauge_addZone(80, 100, "#0f0", "zoneGood", 80, 55);
    gauge_addZone(0, 40, "#f00", "zoneBad", 80, 55);
    gauge_setPointer(36.8);

This would result in the following example:

I'm really enjoying using SVG, and I'll probably post more on it as time goes by.