Presentation: 3 ways to improve your website

These are my slides from today’s meeting.  I was looking at:

  • Improvement 1 – Adding hCard to Contact Details and hCalendar to Events
  • Improvement 3 – Search Auto-discovery
  • Improvement 6 – Add hint text to search boxes

It’s published under a Creative Commons licence (details on the slideshow) so feel free to use it and adapt it as required.

Cheat sheets

These are a few of the cheat sheets that I use with these technologies:

Microformats

jQuery

OpenSearch

Gareth @ St Andrews

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)