Scottish universities’ homepage Asteroids championship

Asteroids-style ship fires on university homepage

Erik Rothoff Andersson has written a fun little Asteroids-style JavaScript bookmarklet called “Kick ass”.

When you click the bookmarklet a white, triangular Asteroids-style spaceship appears on your screen, over which you have complete control. Using the arrow keys to navigate and the space bar to fire you can fly around any web page vaporizing the Web page contents.

… and now for the science bit

When you run the bookmarklet the JavaScript code iterates through the DOM adding a class of “ASTEROIDSYEAHENEMY” to each element, which is then styled to “display: none” when it detects that the bullet-thing, yeah, that fires from your white triangle intergalactic spaceship has hit it.

Or something.

High scores

So this evening (Sunday 19 December) I pitted the homepages of the Scottish universities against one another.

# Instiution Score
1 University of the Highlands and Islands 1690
2 Abertay 1550
3 St Andrews 1400
4 Scottish Agricultural College 1390
5 Aberdeen 1230
6 Edinburgh 1200
7 Glasgow 1130
8 Glagow Caledonian 1110
9 Queen Margaret University 1070
10 Strathclyde 980
11 Dundee 960
12 UWS 890
13 Stirling 870
14 Robert Gordon University 790
15 Heriot-Watt University 760
16 Napier University 690
17 Edinburgh College of Art 460
18 Glasgow College of Art 190
19 Royal Scottish Academy of Music and Drama Did not finish

The four ancient universities did well to make it into the top 10.  Not that I’m implying that their homepage designs were influenced at all by how well they score on Homepage Asteroids.

Although, of course, they should!

Gareth @ St Andrews

Browser Wars – the next generation

On Monday Steve and I attended an Opera Software University Seminar hosted here at the University of St Andrews, one of many stops on their world tour of educational institutions.

I found it an interesting and encouraging hour long presentation which looked at the Opera range of browsers (did you know that there are four main products: Desktop, Embedded, Mini and Mobile, which all use the same rendering engine?), Web Standards and a brief dive into HTML 5 and CSS 3.  I’ve blogged about it elsewhere if you want to read more.

On our way out of the PC classroom (it was hosted in the School of Computer Science) in exchange for a completed feedback slip we were given a FREE umbrella. I know! FREE!  We didn’t even have to download it from one of over 80 download locations.

Comparisons

However, the question I know you’re all asking: how does it compare with the St Andrews Web Team’s Mozilla Firefox umbrella, which was purchased from the Mozilla store a few months ago?

Mozilla Firefox umbrella next to the Opera umbrella

Mozilla Firefox umbrella next to the Opera umbrella

Size

As you can see from the image above the Opera brolly is considerably smaller than the more cumbersome Mozilla brolly.

That observation correlates with my experience of the two browsers, currently Firefox is hogging 236 MB of RAM, while Opera is displaying the same three pages using only 34 MB. This is clearly the Opera Mini of umbrellas.

Opened each fares as you would expect: the Mozilla browser is considerably larger offering protection for more than one user.  The Opera Mini umbrella is clearly designed for single tab user use.

Mozilla Firefox umbrella open

Mozilla Firefox umbrella open

Opera Mini umbrella open

Opera Mini umbrella open

Rendering

Opera has clearly taken HTML 5 and CSS 3 to heart with this umbrella as in particularly windy situations the brolly dynamically re-renders itself … mostly inside out.  Ironically, for such a stable browser their umbrella does have a tendency to ‘crash’ alot in bad weather.  I suspect, however, that the weather we threw at it just had the wrong !DOCTYPE.

The Firefox umbrella on the other hand does appear to bend and sway a little but resolutely and reliably continues to do its job.

User interface

Both umbrellas feel robust enough, although I have to say that I would feel more confident taking the Firefox brolly out in the winds whistle down the streets of St Andrews.

In fact, in tests the Firefox umbrella proved to be easier and quicker to use simply due to the sturdiness of the fastenings and other hardware.

It is said that the first umbrella was likely to be nothing more than some largely-waterproof fabric stretched over a wooden or wire frame, and both models follow this tradition in terms of construction.  However, again, the Firefox brolly feels more robust with the stretched fabric stitches into the end of the spokes; the Opera brolly relies on small metal ‘cups’ slotting over the end of the spokes, which are too easy to knock off.

Security

Clasps on Firefox and Opera umbrellas

Clasps on Firefox and Opera umbrellas

Security is no less important on an umbrella as it is on a browser, and both models’ security features are built to impress.

The Mozilla model uses the traditional ring on a piece of elastic which wraps snuggly around the shaft of the umbrella and afixes on a button, while the Opera model relies on a vecro fastening.

One particularly impressive security feature though was the clear plastic sheath that the Opera umbrella came in.  It keeps your umbrella safe and secure when not being used.

Open Source

As an open-source product you are welcome to take the code of Mozilla Firefox and redevelop it.  While the brolly is available to anyone within the Web Team we discourage any modifications to the overall structure, and as far as I’m aware there are currently no official add-ons for the brolly.

Opera is not an open-source product, which is reflected in our need to go directly to Opera to obtain it on request.  Although, as I understand it, 3rd parties such as Oxfam may be able to sign up to distribute copies.

Conclusion

Other than the fact that I clearly have too much time on my hands during the lunch hour, I’d say that the Firefox umbrella is probably the one you want if you need to stay dry (in all sorts of weather), although it is more cumbersome. Perhaps, a bit like Firefox Portable.

The Opera umbrella on the other hand is wonderfully compact, so you can take it anywhere you want … a bit like their Opera Mini and Mobile browsers.

CSS kilts for IWMW2008

KiltThere was chat at the last Scottish Web Folk meeting about wearing kilts to the next IWMW 2008 meeting in Aberdeen.

I think that’s a great idea.

Someone asked what tartan should be preferred but if you think about it, kilts are a bit like CSS: the underlying structure is the same, they just display differently.

<div id="gareth" class="delegate">
<p>Do you like my kilt?</p>
</div>

<style type="text/css">
#gareth {display: black-douglas;}
</style>

Apologies for the non-standard CSS! 😉

Real World Racer (Google maps mashup)

Real World Racers

Here’s an interesting Google Maps mashup: Real World Racer, which describes itself as “A Google Maps Racing Game”.

It takes Google Maps data and allows you to race a tiny red car against other white cars on a predetermined route (other routes are available). What is rather serendipitous is that one of the routes is the Swindon, UK: Magic roundabouts which was mentioned during a number of conversations at the IWMW2007 conference in York this week.

Not sure what practical use it might have on a university website, but it’s quite fun, none-the-less. And is totally Web 2.0, so that makes it cooler than an iPhone on ice!

(Spotted on B3ta.com.)