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

Advertisements

Learning jQuery

Learning jQuery book cover

Did you get anything exciting and geeky for Christmas? I got a copy of Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques by Jonathan Chaffer and Karl Swedberg (Packt Publishing, 2007).

jQuery is an open-source JavaScript library that makes adding cross-browser compatible effects to your website really simple.

It’s written in such a way that it makes it really easy for web designers (rather than being aimed simply at experienced JavaScript code monkeys) to understand and write as most of its concepts are borrowed from the structure of HTML and CSS.

Example

Here’s a quick example: say you have a table of data to which you wish to apply a striping-effect to alternate rows. All odd rows you wish to display with a pale yellow background, all even rows with a pale blue background.

The traditional, coding-by-hand HTML method you’d manually have to add a class to each table row. If you were then to add a new row in the middle of the table you’d then have to again manually re-edit the code in each and every row.

You could, of course, write a PHP or JavaScript solution, but that would take quite a while, particularly if your 1337 g33k 5killz aren’t up-to-scratch or are in a hurry to get the job done.

jQuery offers the following solution:

  1. Download the jQuery library (about 14 KB compressed) and link it to your HTML document
  2. Write a new JavaScript file containing your striping code and link it to your HTML document
  3. Create new classes in your CSS file for styling the .odd and .even rows.

Here’s the jQuery code you’d need:

$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});

Four lines of code is all it takes, and it’s almost self-explanatory too.

The code says:

  1. Wait until the DOM is ready then execute the code
  2. Then add class=”odd” to all odd table rows
  3. Add class=”even” to all even table rows

The book

The book is very easy to read, taking everything step-by-step and arranged in a very logical and easy to follow way.

Chapter 1 introduces the reader to jQuery

Chapter 2 covers selectors, the building-blocks of a jQuery function

Chapter 3 looks at events: when to start your jQuery code (e.g. on page load, when you click a link, etc.)

Chapter 4 examines Effects, e.g. fading in and out

Chapter 5 covers DOM manipulation: how to change your page on command

Chapter 6 promises to make your website buzzword-compliant with AJAX

The following chapters cover table manipulation, enhancing forms, shufflers and rotators, and extending the built-in functionality of jQuery with plug-ins.

You can see the book examples in action at http://book.learningjquery.com.

I can’t wait to get started and incorporate some of these techniques into my websites.

(Gareth J M Saunders)