This time around I think I’ve got all the details right. Well, if that’s not Kaizen, what is?

The old article

In the original article, Ultimate Site Logo, I described how to code a site logo to meet these needs:

• Search engine optimized
• Clickable
• Accessible
• Looks good
• Hover effect

If you haven’t already read it, this could be a good time to do so to fully grasp the concept. But if you feel confident enough, then by all means, do read on.

The semantic problem

In my first solution I suggested that <h1> would be an appropriate element to host the logo. Even though I already back then felt that a different element could be used, I personally was leaning more towards <h1>.

After reading up a little and listening to remarks from others I have now changed my mind. Especially after reading Chris Pearsons article The Definitive Guide to Semantic Web Markup for Blogs.

I now believe that <h1> should be reserved for the most prominent heading on each individual page. So for the front page, the logo (e.g. site name) might as well be the most prominent one, while on sub pages such as an article page, the articles title should be the most prominent one.

Therefor I now recommend using a div to hold the site logo. The code for this would be:

<div id="branding">
	<div id="logo"><a href="#"><span></span>In usability we trust</a></div>
</div>

Note: I haven’t actually implemented this technique on this site yet, but I will do so in an upcoming redesign. Still you can watch it in action on the example page for this article.

The flicker problem

In my last solution I changed the background-image of the <span> displaying the logo, when hovering over it. The problem with this is that if the hover-image wasn’t cashed, there would be an occasional flicker revealing the text underneath it, before the image was loaded. To solve this issue I now use CSS sprites instead.

A sprite is basically an image that contains several images, in this case two. The trick is to, with the help of CSS, just show a part of it at a time. By aligning the background-image to either the left or the right side of the <span>, a roll-over effect is created.

As you can see this image contains two version of the logo, one in normal state and one in hover-state. By making the container only half the width of the complete image, it’s easy to show the different versions by either aligning the background-image to the left or to the right side of the container.

The logo in it’s normal state, where only the left part of the image is visible in the containing <div> (the red area).

The logo in it’s hover state, where only the right part of the image is visible in the containing <div> (the red area).

The CSS to accomplish this is:

#logo span {
	background: url(../img/logo_sprite.png) left top no-repeat;
}
#logo a:hover span {
	background-position: right top;
}

It was actually a comment from r-doll on a different article of mine that made me realize that CSS-sprites would be the way to go in this solution too. Thanks a lot!

The (almost) complete CSS

I say almost complete because there is two additional Internet Explorer fixes, that is best put in a separate CSS-file only served to IE.

#logo {
	position: relative;
	margin: 0;
	width: 442px;
	height: 125px;
}
#logo a {
	position: absolute;
	width: 100%;
	height: 100%;
}
#logo span {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: url(../img/logo_sprite.png) left top no-repeat;
}
#logo a:hover span {
	background-position: right top;
}

Note: For a full explanation of the CSS and the additional fixes needed for IE, read the old article, Ultimate Site Logo.

Further improvements

If you can think of further improvements I would be more than happy if you would share it with me.

One issue that I’m aware of is when printing the web page. The logo just shows if you have print background images turned on, otherwise the text underneath the logo will show. If you have a solution for this, please let me know!

The files

• Watch the live demo
• style.css [The main style sheet]
• ie.css [Style sheet fed to IE alone]

What is Spotify?

Spotify is a music player that allows you to play music from the Internet without any restrictions. Here’s how they describe it at spotify.com.

Spotify is a new way to enjoy music. Simply download and install, before you know it you’ll be singing along to the genre, artist or song of your choice. With Spotify you are never far away from the song you want.

There are no restrictions in terms of what you can listen to or when. Forget about the hassle of waiting for files to download and fill up your hard drive before you get round to organizing them. Spotify is instant, fun and simple.

Essentially it’s all about playing music and to share songs and musiclists with others.

The User Interface

At first glance it looks a lot like a slimmed down iTunes. It’s a simple and functional interface but still visually compelling. I find it very intuitive and easy to use. It simply enables me to what I want to do with minimum effort.

Synchronization

If you create a new playlist on one computer it pops up in other computers that runs your account. But you can only play music on one computer at a time. If you start playing at another computer the music stops at the first and a message is displayed.

Nice, unobtrusive and easy to understand!

Share music with others

One cool thing with it is that you can easily share music and playlists with others. This is something that I find very nice since it makes me discover new great music.

Speed

I’m astonished by the speed of the application. Even though it’s a Web based software it responses immediately, like if the songs were on my computer.

Price

Spotify is free to use, but then it plays a commercial every five song or so. To get rid of the commercials you can either pay 99 SEK per month (about 10 Euro) or buy a daypass for 9 SEK (about 1 euro).

Compared to iTunes

I can’t help but compare Spotify with iTunes. Even though iTunes is packed with a lot more features it’s much more intrusive and above all, slower than Spotify. Why is it that iTunes is so much slower playing and displaying music on my harddrive than Spotify, doing the same with stuff from the Internet?

This leads me to believe that the responsiveness of an application is one of the most important factors for how much we appreciate it.

Conclusion

I think the reason that I like Spotify so much is that it supports me so well in the things I want to do with music.

• I have instant access to the music I want to listen to
• I can easily find the music I want to listen to
• It’s fast
• I don’t have to worry about files or copyrights
• It let’s me explore music and helps me find new music that I might like.
• It let’s me share music with others.

I can’t see any reason that Spotify wouldn’t be a huge success. I think it’s one of the best software I have ever used and I highly recommend it.

Now I’m just waiting for a mobile version so that I can use it on the go as well.

Learn more at www.spotify.com.

Please read about my first take in Using microformats to populate Google Map.

The demo is still in Swedish since I originally made it for a lecture here in Sweden about using Microformats. But despite that I think it’s fairly easy for all you non-swedes to follow the code.

Watch the live demo

So what have I done in this new version?

Updated the Google Maps code

In the old demo I used some deprecated Google Maps 1.0 methods. In the new demo these are replaced with Google Maps 2 methods.

GPoint is changed to GLatLng
GMap.centerAndZoom() is changed to GMap2.setCenter()

Switched Javascript Library

I have switched Javascript library from DOMAssistant to jQuery. Lately I’ve been working a lot with jQuery so it seemed like a natural switch.

Added a slider

I wanted to be able to easily filter the result by month using a slider. Since jQuery UI features a nice Slider I went with that.

Adding the slider was fairly easy. I used the default graphics and just tweaked the slider-background a little bit in Photoshop.

To put the slider in place all that is needed is to add a div with id="date_slider" to the HTML-document and the code below:

$('#date_slider').slider({
	handle: '.handle',
	steps: 3,
	min: 5,
	max: 8,
	startValue: 8,
	slide: function(e, ui) {
		// Changing the label to the selected monthname
		$('#selected_month').html(monthName(ui.value));
	},
	change: function(e, ui) {
		// filtering event list
		filterEventList(ui.value);

		// filtering markers on map
		filterMap(ui.value);
	}
});

Scrolling the list

When you click on a marker in the map the appropriate element in the sidebar list is highlighted. When the list is long enough to be scrollable it sometimes means that the highlighted item isn’t visible. I wanted a way to make the list scroll so the item came into view.

The jQuery plugin ScrollTo came to the rescue. It’s a really nice plugin that makes it easy to do just this. The syntax is: $(element).scrollTo(obj);

Where element is the list and obj is the selected item.

The files

If you want to try the demo and check out the files, please use the links below.

• View the Live Demo
• map.js
• style.css

On World Usability Day on 13 of November we gathered a bunch of people to put focus on usability. The event which we called A nice cup of coffee on Usability Day, was held at my former employer, Visma Spcs office in Växjö. Chris Jangelöv was host for the event.

Here’s some pictures taken by from the event along with some comments. The pictures are taken by Ola Karlsson. Thanks a lot Ola!

Chris Jangelöv welcomed everyone and held a short introduction. Later he talked about one of his cars and some usability problems with it. He also talked about ventilation systems and water taps.

About 25 people showed up at the event.

I talked about usability in general but also about some usability issues I’ve encountered in my daily life.

Andreas Nivard from Visma Spcs talked about the design of his and his wifes cars, packaging of different sorts and how to keep warm in the office. A both humorous and interesting talk that was highly appreciated by the audience.

I haven’t got a picture of him but Staffan Gustafsson from Visma Spcs talked about how much he appreciated the possibility to import all settings to one Mac from another. Very handy when you’re buying a new computer. He only wished that it was possible on Windows machines, cause then he wouldn’t have to spend so much time acting computer support for his parents.

After the talks we had interesting discussions about different aspects of usability. All in all it was a really nice get together with lots of good conversations.

More info

For more information on World Usability Day please visit their web site at www.worldusabilityday.org. There’s also a Swedish site at www.wud.se.

If you’re living in the area and wish to participate in future events, contact me through my Contact page.

Here in Växjö, Sweden we’re going to celebrate this with a get together where I’m going to talk a little about usability in general and a few others are going to talk about specific usability problems and solutions. Other than that we’re just going to have a nice cup of coffee, some cookies and a nice chat. The event takes place at Visma Spcs at 15.00 and will last for about one and a half hour.

If you’re in the area and are interested in participating, sign up by leaving a comment or by contacting me through this blog’s contact page. It’s completely free of charge but you have to let us know in advance that you’re coming.

Encoding polylines on the fly

When dealing with dynamic data you may have to encode the polylines on the fly. In this example I will use PHP to perform the encoding. I have rewritten a php script made by Jim Hribar and built his functions into a class for more convenient use. I’ve also made some small changes to the code. The code itself is essentially a rip-off from Mark MacClure’s Javascript class.

The PolylineEncoder Class

To use the class is simple. First you need to call the constructor of the class: $polylineEncoder = new PolylineEncoder($point);

The constructor

PolylineEncoder optionally takes four other arguments. When they are left out these default settings are used:

• numLevels = 18
• zoomFactor = 2
• verySmall = 0.00001
• forceEndpoints = true

numLevels and zoomFactor controls how many zoomlevels the encoding should take account for and in which intervals the map should change the number of displayed coordinates.

verySmall controls what distance between coordinate the algorithm should regard a short enough distance for a coordinate to be removed. So if you want to decrease the number of coordinates used, you should set the verySmall argument to a higher number.

forceEndpoints is a boolean and if set to true ensures that the two ending points of the polyline are displayed at all zoom-levels. I really don’t see a reason to set this to anything but true.

I myself tend to use the default settings since they provide a good result.

Encoding the points

The $encoded_polyline = polylineEncoder->dpEncode() method returns an associative array with the following keys.

• Points
  A string containing the encoded points
• Levels
  A string containing the encoded levels
• ZoomFactor
  The applied Zoom Factor (Same as passed to the constructor)
• NumLevels
  The applied NumLevels (Same as passed to the constructor)

A complete call to the EncodePolyline could look something like this.

// Include the file containing the class
include("PolylineEncoder.php");

// Create a nested array containing the coordinates
$points = array(
	array(
		59.6919,
		17.8582
	),
	array(
		59.3030,
		18.0395
	),
	array(
		58.9789,
		17.5341
	)
);

// Create a new instance of PolylineEncoder and supply the array
// as an argument to the constructor
$polylineEncoder = new PolylineEncoder($point);

// Encode the coordinates by calling dpEncode(), it returns an array containing the
// encoded coordinates and levels.
$encoded_points = $polylineEncoder->dpEncode();

// The resulting output
$encoded_points["Points"]; // "kqikJw|~kBr}jAclb@rh~@xuaB"
$encoded_points["Levels"]; // "PMP
$encoded_points["ZoomFactor"]; // 2
$encoded_points["NumLevels"]; // 18

Note: To learn more about how to use the optional settings for tweaking the encoded polyline, read A description of Google’s encoded polylines and The encoding algorithm for the levels string.

Download the class

The PolylineEncoder class is released under GPL and may be used and changed freely.

Download PolylineEncoder.php.txt

Making use of the encoded polyline

Now that we have an encoded polyline its time to make good use of it in Google Maps. To create a GPolyline from the encoded coordinates you use the method GPolyline.fromEncoded().

// Creating an encoded GPolyline
GPolyline.fromEncoded({
    color: string,
    weight: number,
    opacity: number,
    points: string,
    levels: string,
    numLevels: number,
    zoomFactor: number
});

As you can see it takes an object literal as an argument. The first three keys are purely for how the polyline will be styled. The keys points and levels are the ones that will be fed with the encoded polyline. The last two keys, numLevels and zoomFactor should match the settings you used when encoding the coordinates. If they don’t match, the polyline will not be rendered correctly.

Adding it to the map

So adding an encoded polyline to your map is very much like adding a normal polyline to it. The only difference is that instead of creating the polyline with the constructor of GPolyline(), you call the GPolyline.fromEncoded() method and pass the encoded points and levels to it.

// Instanciate a new map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(59.3219, 17.6165), 8);

// Create the polyline from the encoded points
var polyline = GPolyline.fromEncoded({
    color: '#FF0000',
    weight: 6,
    opacity: 0.6,
    points: 'kqikJw|~kBr}jAclb@rh~@xuaB',
    levels: 'PMP',
    numLevels: 18,
    zoomFactor: 2
});

// Add the polyline to the map
map.addOverlay(polyline);

Watch the live example.

Even better performance

To get even better performance you have to use a pre-encode polyline to serve directly to the Javascript. This way you save the time the PHP-script takes to execute the encoding. In many cases this might not be possible, but if it is, it delivers the best performance.

Watch the pre-encoded example.

The improved load-time is pretty big. When I compare this example with the one encoding the polyline in the browser using Javascript, I get load times that’s range from 2 seconds (Safari) to over 20 seconds faster (IE).

All test scenarios

Here’s all the tested cases, from both this and the previous article.

• Simple unencoded polyline
• Complex unencoded polylines
• Complex encoded polylines, encoding done in browser with Javascript
• Complex encoded polylines, encoding done dynamically on server
• Complex pre-encoded polylines

Other resources

There are several server-side classes in different languages for encoding polylines, including Perl, Java and Ruby, available at Encoding polylines for Google Maps, a website by Mark McClure.

I have yet to find a class written in C#. If you find one or has written one yourself, I would be more than happy if you could tell me about it.

I’m for one hate shopping for groceries. If I could have a system like this that remembers what groceries I normally buy and suggests a shopping list according to my dinner plans, I would be more than delighted. In fact, if I didn’t even had to physically go to the grocery store, I would be even more delighted.

The UI

From what I can tell from the video it’s very much inspired by the iPhone interface. It’s probably the touchscreen and visual effects that gives that impression. The user interface looks really cool, but it do seem to lag and respond a little slow.

The UI has a lot of 3d effects. One pretty cool thing is that you can choose a product and then rotate it to read the text on the package. I’m not sure though, if that’s the optimal way to display that sort of information, but it sure looks cool.

Technology

Apparently it’s built with Microsoft’s WPF technology, the same technology that Silverlight is built upon. I haven’t seen much built with this technology so it’s nice to a example of what you can do with it.

In the video Paul Dawson and Matthew Adams demonstrates and explains how it’s all supposed to work. They also tell some about how they built it.

Right now it’s an early beta, but they’re soon going to perform trials with customer.

Read more about Conchango and the Tesco project on MSDN.

Thanks Peter, for showing me this.

Let’s say that you have a number of markers on a map and you want the map to be displayed so that they all fit inside the viewport. You could of course experiment with center point and zoom levels to get it right. But what if the markers are put there dynamically so you don’t know beforehand where they’ll show up?

That’s where this trick will come in handy.

Using a Bounding Box

First you have to calculate the bounding box. That is, the coordinate for the south-west and north-east corners. In this case the coordinates for the marker that’s most south and the marker that’s most west provides the coordinates for the south-west corner. And vice versa for the north-east corner.

Now that you know the coordinates you just have to create a GLatLngBounds object, define it’s coordinates and serve it to GMap2.setCenter().

GLatLngBounds takes two optional arguments. A GLatLng for the south-west corner and a GLatLng for the north-east corner.

GMap2.getBoundsZoomLevel() calculates the appropriate zoom level to fit the bounding box in the available viewport. It also adds some extra padding around the box.

map = new GMap2(document.getElementById("map"));

// Define the two corners of the bounding box
var sw = new GLatLng(59.0, 13.12);
var ne = new GLatLng(60.35, 16.90);

// Create a bounding box
var bounds = new GLatLngBounds(sw, ne);

// Center map in the center of the bounding box
// and calculate the appropriate zoom level
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

Watch the live demo

I was shown this technique by my good friend Fredrik Jonsson, who writes about programming on freddes.se.

A basic polyline

Polylines consists of several points forming a line. Like for example a road on a map.

Normally you create a GPolyline and add it to the map using GMap2.addOverlay().

// Create an instance of Google map
var map = new GMap2(document.getElementById("map"));

// Tell the map where to start
map.setCenter(new GLatLng(59.3324, 17.8857), 9);

// Create an array with points
var points = [
   new GLatLng(59.6919, 17.8582),
   new GLatLng(59.3030, 18.0395),
   new GLatLng(58.9789, 17.5341)
];

// Create a new polyline
var polyline = new GPolyline(points, '#ff0000', 5, 0.7);

// Add the polyline to the map using map.addOverlay()
map.addOverlay(polyline);

As you can see GPolyline takes four arguments. The first one is the only required one, and it’s the coordinates for the polyline. The other ones are optional and are settings for how the polyline will appear. They are, from left to right, the color, the thickness and the opacity of the polyline.

Watch the small polyline example.

This works fine as long as the polyline doesn’t consist of too many coordinates. However when the polyline is more complex the rendering becomes really slow.

More complex polylines

Here’s an example of five polylines with a total of 7841 coordinates which are added to the map the same way as the previous example. You’ll notice that the performance is really starting to degrade. The load time is longer and when you zoom in or out on the map you’ll notice a significant delay.

Watch the complex polylines example (Warning: The loading time can be long)

The performance vary from browser to browser. So if you try the example with Internet Explorer it’s really slow, but with Safari or Google Chrome it’s still pretty fast.

Data format

In the example the coordinates are fetched through an AJAX call to a file containing the coordinates in JSON format. The data structure looks like this:

[{
    "Name":"Section 1",
    "Geom":[[59.1949,17.6596],[59.1942,17.6591],[59.1941,17.659]]
},
{
    "Name":"Section 2",
    "Geom":[[59.3819,18.0088],[59.3819,18.0089],[59.3818,18.0091]]
},

I only show three points per Section here but in the used file there a total of five Sections with thousands of points each.

Better performance

Decrease the number of coordinates

One easy way to make it faster is to try to limit the number of coordinates that you serve to the map. You gain some performance but loose accuracy, especially when you zoom in on the page.

Encoded polylines on the fly

A far better solution is to encode the polylines. It provides much better performance than just decreasing the number of coordinates plus you get better accuracy. The algorithm that encodes the coordinates removes some coordinates but more importantly decreases the number of coordinates when you zoom out, and increase them when zooming in.

Here’s how it’s done.

Instead of just feeding the map with coordinates you first encode them. An excellent encoder is Mark McClure’s PolylineEncoder class. It’s available from Encoding polylines for Google Maps. You can also download PolylineEncoder.js from there.

The encoder doesn’t make a very big difference on the loading time of the page, but when you start zooming and panning, the difference is huge.

Encoding the coordinates

Put all your coordinates in an array and feed it to dpEncodeToGPolyline() in the polylineEncoder class. The coordinates should be in the GLatLng format.

As you may notice dpEncodeToGPolyline() takes exactly the same arguments as GPolyline() and returns a GPolyline. So basically you just call dpEncodeToGPolyline() instead of GPolyline() and then add it to the map with addOverlay(), just like you did with the regular polyline.

// Create an array that will hold the coordinates
var points = [];

// Loop through the coordinates.
// In this case the coordinates are in a JSON object
for(var j = 0; j < json[i].Geom.length; j++) {
    var coords = json[i].Geom[j];
    //Convert the coordinates to GLatLng and insert into the array
    points.push(new GLatLng(parseFloat(coords[0]), parseFloat(coords[1])));
}

// Create a new instance of PolylineEncoder
var polylineEncoder = new PolylineEncoder();

// Assign the array to dpEncodeToGPolyline  to get an encoded polyline
var polyline = polylineEncoder.dpEncodeToGPolyline(points, '#ff0000', 5, 0.7);

// Add the returned polyline to the map with map.addOverlay()
map.addOverlay(polyline);

The performance boost with this technique is enormous. The loading time can still be quite long but interacting with the map is a totally different experience. Watch the encoded polylines example to see what I mean.

Encode polylines on the server

Loading time could still be too long, especially in Internet Explorer which has a a notoriously slow Javascript engine. To improve on that you should perform the encoding server side. In the second part of this article I describe how to do just that using PHP, to get dramatically shorter load-times.

Further reading

Mark MacClure, as I’ve already mentioned, has written a lot on the subject and also provides several examples, so don’t miss checking Encoding polylines for Google Maps out.

Peter Chng has written an article about encoded polylines, Playing with Google Maps and encoded polylines, that helped clear a lot of my confusion.

In the ASP.NET MVC Framework, passing JSON from the server to the client script is almost too easy. In this article I will walk you through the code required to make it work.

The back end

Suppose we have a class named Cars like the one below. We want to feed our web page with a list of cars that we want to display AJAX style, preferably by sending the list as a JSON object.

public class Car {
	public string Name { get; set; }
	public string Color { get; set; }
}

With the ASP.NET MVC Framework it’s a breeze. In your Controller you simply create a method of the type JsonResult which returns a JSON object. You then use the Json() method to transform the class to JSON.

public class CarsController : Controller
{
	public JsonResult GetCars()
	{
		List<Car> cars = Cars.GetCars();
		return this.Json(cars);
	}
}

Calling this method will return JSON that looks something like this:

[{"Name":"Saab","Color":"Red"},{"Name":"Volvo","Color":"Blue"}]

Making the AJAX call

To get the list of cars on the client side, you want to make an AJAX call to the Controller method GetCars(). This is done by calling the URL /Cars/GetCars/.

First I’ll walk you through how to do it with pure Javascript. Then I’ll show you how to do it with the jQuery library.

The Classic Javascript way

First of all you have to create an instance of the XMLHttpRequest object. It’s through this object that you communicate with the back end. Since IE 6 doesn’t support this object but do have support for an ActiveX object that essentially does the same thing, we initially have to do some checking to make sure that we use the correct object. I’ve created a wrapper function that with the help of object detection determines which object to use and then returns it.

function getRequestObject() {
	var req = false;
	if(window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return req;
}

I use the getRequestObject function to get the correct Request Object and then gets on with setting up the request.

var request = getRequestObject();
request.onreadystatechange = handleResponse;
request.open('GET', '/Cars/GetCars', true);
request.send(null);

Note: If you’re unfamiliar with AJAX and find this code really strange, I recommend that you read getting started with AJAX from Mozilla Developer Center.

Ok, so the AJAX Call is all set up. The last thing to do is to create the function handleResponse that takes care of the request and the received data.

function handleResponse() {
	if (request.readyState == 4) {
		var cars = eval('(' + request.responseText + ')');

		for each(car in cars) {
			alert(car.Name + ', ' + car.Color);
		}
	}
}

The object is received as JSON text through the responseText property of the request object. To convert it to a JSON object you can use the Eval() function. It will parse the text and produce an object structure. This is a fast and convenient way of doing it, but be aware of that it has potential security issues. Only use it if you know that you can trust the source. Otherwise you should use a more robust JSON parser.

The code in this example will throw an alert for each item in the JSON object and display it’s properties. This is done by looping through the received object. Notice how we can access the properties of the object through convenient dot notation.

The jQuery way

The client side scripting is even easier using jQuery. All the Javascript code above can be replaced with this.

$.getJSON("/Cars/GetCars", null, function(data) {
	$.each(data, function(index, car) {
		alert(car.Name, car.Color)
	});
});

jQuery handles everything that happens in the background, like instantiating the request object and parsing the received JSON object. So it does all the heavy lifting and leaves the fun stuff to you, like doing creative things with the received data.

Note: For brevity I have excluded all error handling in this example. This should naturally always be considered in a live application.

The problem

At first I coded each custom icon individually, creating massive amounts of code. I then had to have a huge If-else statement to determine which icon to use on each type of marker. This didn’t feel right and also made the application unnecessarily bloated and redundant, so I started looking for a better way of doing this. Eventually I stumbled upon this solution in one of Mike Williams excellent Google Maps tutorials.

The solution

The solution is all about storing the icons in an associative array that you later on call to get the correct icon.

Defining the icon

Start of by defining a “template”-icon that you base your other icons on.

var custIcon = new GIcon(G_DEFAULT_ICON);
custIcon.iconSize = new GSize(16, 16);
custIcon.shadowSize = new GSize(0, 0);
custIcon.iconAnchor = new GPoint(0, 0);

I’m using the optional copy argument in the GIcon constructor. You don’t have to do this but it’s convenient since all the properties of the icons are otherwise empty and you have to manually define them yourself.

Note: To learn more about how markers and icons works in Google Maps read the section on overlays in the Google Maps API documentation.

Creating the array

The next step is to define an array and start adding icons to it. Since it’s an associative array I use labels instead of numbers to identify each item.

Also notice that I add my template icon and a specific image for each individual icon in the GIcon constructor.

var myIcons = [];
myIcons['house'] = new GIcon(custIcon, 'house.png');
myIcons['castle'] = new GIcon(custIcon, 'castle.png');

Putting the array to use

Later on when you want to place a marker in the map and assign it one of your custom icons you just write this.

var marker = new GMarker(point, { icon: myIcons['house']});

In the application I’m currently building I give the array-items the same label as the type they represent. So instead of using a huge if-else statement to get the right icon, I just have to write one line of code where I insert my type as label for the array.

var marker = new GMarker(point, { icon: myIcons[type]});

Simple, effective and elegant.

Since Preview Release 5 of the ASP.NET MVC Framework, the handling of User Controls have changed a bit. The helper method RenderUserControl have been replace by RenderPartial. A little annoying thing when a User Control is imported into a View is a tiny difference in how it’s coded that is easily overlooked. So if you get this cryptic error:

CS1502: The best overloaded method match for ‘System.IO.TextWriter.Write(char)’ has some invalid arguments

It’s because you’ve been inserting the User Control with <%= RenderPartial("ViewName") %>, instead of <% RenderPartial("ViewName"); %>. (Note the equal sign before the method call and the semicolon after).

Passing a Data Object from the Controller to the View

Suppose you have a class called Car with the properties Make and Color, that you want to render using a User Control.

In order to pass data to the User Control, you first have to pass it from the Controller to the View. This is done by either sending the Data Object in the Return statement in a ActionResult method like this:

public ActionResult List() 
{
	List<Car> cars = cars.GetCars();
	return View(cars);
}

Or assign it explicitly to the ViewData object like this:

public ActionResult List() 
{
	List<Car> cars = cars.GetCars();
	ViewData["Cars"] = cars;

	return View();
}

I often find it more convenient to do it the first way, but when you have several data objects that you want to pass, you’ll have to use the second way too.

Passing DataObject to the User Control

Like I mentioned earlier in this article, the MVC Framework has a useful helper method for inserting User Control into Views. It’s called RenderPartial. Before the Preview Release 5 it was called RenderUserControl and was used a little different. So don’t confuse the two.

It’s used like this:

<% Html.RenderPartial("~/Views/Cars/List.ascx"); %>

To pass a list containing several instances of Car from the View to the User Control is easy. You just add it as the second parameter in the RenderPartial call like this:

<% Html.RenderPartial("~/Views/Cars/List.ascx", ViewDataModel); %>

or if you explicity assigned it to the ViewData object:

<% Html.RenderPartial("~/Views/Cars/List.ascx", ViewData["Cars"]); %>

Displaying the data in the User Control

In the User Control you have to first add a reference to the class Car in the CodeBehind. And since you want a list of it you have to use List<> around it:

public partial class List : System.Web.Mvc.ViewUserControl<List<Car>>
{
}

In the .ascx you then access the data by referencing to the ViewData.Model, just like you would in a View. So rendering a simple list of cars would look something like this:

<ul>
<% foreach(Car car in ViewData.Model) { %>
	<li><%= car.Make %>, <%= car.Color %></li>
<% } %>
</ul>

What’s up with the name?

I find it a little confusing that the Helper method is called RenderPartial when it’s actually a User Control that you render. Wouldn’t it be more logical to call the User Control, Partial View or something instead? Or have I missed something?

To read more about the ASP.NET MVC Framework and how to pass data objects, check out Scott Guthries excellent blog post, ASP.NET MVC Framework (Part 3): Passing ViewData from Controllers to Views. It’s on an older release but most of it still applies.

Happy coding!

For me personally, who’s already using jQuery along with ASP.NET, the main difference will be the intellisense annotation support for jQuery. This will be a welcomed enhancement of my development environment. Needless to say the asp.net team at Microsoft will also build ready-to-use controls in the ASP.NET AJAX Control Toolkit that builds upon jQuery.

According to Scott Guthrie there will be a free download with the jQuery Intellisense support in a few weeks. The ASP.NET MVC download will also contain it and the jQuery library.

Read more about it on Scott Guthrie’s blog and in John Reisig’s blog post on jQuery.com.

In the real world it’s not a problem. Physical objects, like paper, clearly wears the mark of time. Paper turns yellow and get torn. Other things get scratched or changes it’s appearance in some other way that makes it obvious that it’s not new.

The digital world

There are a few pretty common ways of displaying the age of content on web pages. These are primarily date stamps, telling when something was created or last edited. There’s also different color on visited links, that in a sense also is a way of telling that content is older. At least you know that you’ve already visited the page.

But that’s about it. And often, even those cues aren’t used.

New ideas

Robert Hoekman Jr. has written some about in the book, Designing the Obvious and in the article Design Stories: Sorted link-lists using “ambient signifiers” on rhjr.net. His idea is to show the age of links by displaying them in different colors. The older they are, the lighter the color.

The term to describe this is ambient signifiers. It’s not restricted to just illustrate the age of content but is the concept of giving subtle cues, to help people interpret context.

Ross Howard has written about this in the article Ambient Signifiers on Boxes and Arrows which, I think, is where the term got coined. He describes his experiences with the Tokyo subway system, where a unique chime is played on each station, giving a subtle cue for the frequent commuter of where he currently is. This gave him the idea of ambient signifiers in digital media.

Currently there are some use of ambient signifiers in the applications we use. In Firefox for example, the address bar turns yellow when you enter a secure site. On sites the current status is often visualized in some way, like if you’re logged in to a site or not.

Aurora - Mozilla Concept Browser

Adaptive Path and Mozilla Labs has developed a concept of a future browser with lot of new ways of interacting with data. It’s kind of a zooming interface where you can browse your content in a 3d view where the z-axe represents time. They visualize the age of content in two ways. First of all the farther away the content the older it is. Secondly the content fades with time. I think that is a very natural way of visualizing it and a great illustration of how ambient signifiers can be used.

Watch the concept in action in this video from Adaptive Path.

Aurora (Part 1) from Adaptive Path on Vimeo.

At first I thought that this was a either a major bug that slipped in the new release, or maybe some clever enhancement a´la the Awesome bar. But after checking with a coworker, who’s also got the new version but still has the buttons, I suspect that this might be something strange happening on my computer.

I don’t think Jakob Nielsen will take lightly on this as he says that according to his research, the back button is the second most used navigation feature. The back button indeed act as sort of an undo function. Enabling the user to back out from unwanted pages.

I’ve tried to restart Firefox but that didn’t help. Maybe rebooting the computer can fix it?

Does anyone else experience the same problem?

Position

According to Jakob Nielsen, the order of the buttons doesn’t matter that much. Both positions has it’s pros and cons. The important thing is to be consistent and if possible follow platform GUI standards [1].

Outside the web world there are GUI standard. The problem is that they are different on different platforms. On the Windows platform the GUI guidelines state that OK should be positioned to the left and Cancel to the right. On the Apple platform it’s the other way around.

On the Web there really is no standard on how to do this, so we have to try to find out which position is the smartest on our own.

Luke Wroblewski elaborates on this topic in his article Web Application Form Design [2]. His recommendation is to position the Primary action (OK) aligned to the left part of the form and the Secondary action (Cancel) to the right.

He elaborates even further on this topic in the book Web Form Design [3], where he presents the finding from a usability test performed on a form with different designs. What the test showed is that having the Primary action left-aligned and the Secondary action to the right of it makes for the fastest performance.

Robert Hoekman, jr. has also thought a lot about this and presents his thoughts in the book Designing the Moment [4].

He agrees with Luke Wroblewski that the Primary action should be left-aligned with the form. The reason for this is that this forms a nice line for the eye to follow, working it’s way down the form, thereby making it easy to scan. Another reason is that if the user is navigating the form with the tab-key, the Primary action comes before the Secondary action in the tab order.

Labeling the actions

Robert Hoekman, jr. also have some thoughts about the labeling of buttons. Instead of just labeling the buttons OK and Cancel it’s better to label them after what they actually do [4]. If it’s to save a note, then why not label the OK-button “Save note” instead. Jakob Nielsen also recommends using a label that explains what it does instead of just a generic label [1]. By doing this the user is more confident using the form since he knows what to expect when he pushes that button.

Visual distinction

One other thing Robert Hoekman, jr. discusses is to visually distinguish the actions making it easier for the user to pick the right one.

Luke Wroblewski also concludes that making the Primary action stand out more than the Secondary action is a good thing. In the findings of the usability test, he finds that it takes the user a little more time to complete the form if the Primary and Secondary action has a different design. But on the other hand it makes the user more confident and less prone to choose the wrong one. He suggest making the buttons in different colors or making the Secondary action a plain link.

A simple way to visually distinguish the two that I sometimes do, is to use a bold font weight on the Primary action and a normal font weight on the Secondary.

Robert Hoekman, jr. recommends using a plain link for the Secondary action [4]. He’s arguments for this is that it makes it clear which one is the most prominent. But it also applies to Fitt’s Law, which suggest that the distance and the size of a target determines how long it takes to reach it and click it. The bigger the target the faster. The Primary action should therefor be bigger than the Secondary action.

In user tests that I’ve conducted I’ve found that some users can get a little confused by a plain link “acting as a button”. I think that this might be because of never having encountered it in a form before. But as this practice gets more common in both web- and windows applications, I think that this is probably not a persistent problem.

The Reset button

The Reset button is used to reset an entire form. It was pretty common in the early days of the web but is rarely seen nowadays. Nevertheless I thought I would say a few words about this button too since when it appears in a form, it’s usually paired with the Primary action.

In most situations it’s best not to use this button at all. All to often users click the Reset button by mistake thereby deleting everything they’ve entered. (I did it as I wrote in Confusing Northface contact form) And seriously, how often do you want to reset an entire form, and if you do, how hard is it?

The risk with this button is simply to big compared to the possible benefit of it. Plus in most cases it just adds more clutter to the form.

Or as Jakob Nielsen put it in his alertbox column Reset and Cancel Buttons [5]:

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

Possibly the only time when a Reset button is called for, is when a form is used repeatedly by the same user and the information entered differs from each use.

Luke Wroblewski has an idea about the Reset button [3]. He thinks that if you provide one you should also provide an undo for it. By changing the Reset button into an Undo after being clicked the user can restore the form. This means that you have to temporarily store the form data, but that’s a small price to pay for the convenience of the user.

Best practices

Taking all of the opinions above in consideration, plus my own experience in using and designing web forms, I’ve come up with these best practices.

• Position the Primary action to the left

  Having the buttons aligned with the left side of the form makes a clear path for the eye to follow. By putting the Primary action to the left of the Secondary action it’s also positioned first in the tab order.

• Label the actions in a natural language

  By describing what the action actually does, the user feels more comfortable using it since he know what to expect.

• Make the Primary action stand out

  This makes it easier for the user to choose the option that’s most likely without making it harder to find the other option.

• (Almost) Never use a Reset button

  Reset buttons often hurts user more than it helps them. The only time it’s called for is in a form that the same user uses over and over again with different input. If you use a Reset, also try to provide an undo function.

Do you agree with my conclusions or do you have a different opinion about this? Please share!

References

1. OK–Cancel or Cancel–OK?, Jakob Nielsen 2008
2. Web Application Form Design
3. Web Form Design, Chapter 6, Luke Wroblewski 2008
4. Designing the Moment, Chapter 13, Robert Hoekman, jr. 2008
5. Reset and Cancel Buttons, Jakob Nielsen 2000

Studies have shown that completion rates of forms can be increased by 10-40 percent by designing them using best practices. If the form is the check-out form on an e-commerce site you can easily see that this potentially can be a good investment.

Luke makes the observation that most forms suck. Therefor it should be every designers mission to make them suck less. Exactly how to do this is explained in great detail throughout the book.

The structure of the book

The book is divided into three sections, each penetrating a different aspect of web form design:

• Form Structure

  This section focus on why form desing matters and the basic principles of good form design.

• Form Elements

  The use of different form elements is thoroughly investigated in this section. The question of which element to use in different situations is discussed.

• Form Interactions

  This part is about the process of filling out forms, how to handle form validation, giving proper feedback and help the user fill out the form.

Each chapter ends with a list of best practices on that particular topic.

On several places in the book there are small articles called “Perspectives” that give a guest writers view on a particular topic. These a written by experienced professionals and authors in the industry.

The book is written in an easy to read style with lots of pictures showing examples and illustrating the points being made. This makes it easy to follow and easy to grasp the different concepts. All images and illustrations in the book can be found on Flickr.

User tests

Some of the recommendations in the book are backed up with user tests. By using eye tracking studies, interviews and evaluation of performance of different tasks different approaches have been tested to come up with a set of recommendations. One example of a test is where the best place to put buttons in a form are. Another is where it’s most effective to place the label to a form element.

You can read about some of the conclusions Luke comes up with in the article Web application form design and in Web Application Form Design Expanded on his personal web site, www.lukew.com.

Summary

I think it’s admirable that someone has actually made a book on such a narrow but still important topic as web form design. I don’t know of any other book, making this one a must-read if you’re serious about designing excellent web sites and/or web applications.

The book contains lots of good tips, insights and best practices on how to design effective web forms that work with, instead of against the user. And I myself have found that I’m already making good use of several of the proposed solutions in my work.

Title: Web Form Design - Filling in the blanks
Author: Luke Wroblewski
Publisher: Rosenfeld Media, 2008
ISBN: 1-933820-24-1
ISBN-13: 978-1-933820-24-8

Gradual Engagement is simply the concept of not throwing a big fat sign-up form in the face of the first-time visitor before he has a chance to try out the site. A better approach is to try to get him engaged in what the site is all about before trying to get tons of information from him.

Luke Wroblewski is also using Geni, among a few other sites, as an example of this concept.

The Geni example

In the Geni example it’s an almost transparent sign-up process since you immediately start to build your family tree, naturally starting with yourself, thereby entering your name and email-address. You’re instantly engaged in building your tree and are investing time and effort in the web site.

An email is sent to you with a temporary password and a link back to the site where you can set a permanent password. Making it easy for you to get back to the site and continue where you left off.

Conclusions

This is still the best example I seen so far in getting the user to interact with the product right away. They sure have nailed the concept of Gradual Engagement, but also manages to clearly communicate what the site is all about in a single page.

It’s probably not a coincident that they’ve managed to get over 20 million profiles. Trying to remove as many barriers as possible in getting the user engaged is crucial for the success of web applications.

I think this is something we all can learn from, especially when it comes to social media and web applications.

Do you know of other examples of Gradual Engagement?

In a recent project I was building a map where different regions of a map would highlight when you hover with the mouse over it. Using an imagemap in combination with CSS and Javascript seemed like the natural way to do it.

I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.

This is what I had in mind when I first started of.

• Use an image of a map.
• Make it into an imagemap and define the clickable areas.
• Do images of the different parts that is to be highlighted.
• Position them with absolute positioning.
• Use Javascript to show or hide them when the user hovers with the mouse over them.

The XHTML

I started of with a regular imagemap. (Some code is removed for brevity). I use a map over Scandinavia as the the image for the imagemap.

<div id="map">
	<img src="img/scandinavia.png" alt="" usemap="#scandinavia_map" />
	<map name="scandinavia_map" id="scandinavia_map">
		<area id="area_finland" shape="poly" coords="193,64,207,[...]" alt="Finland" href="finland.html" />
		<area id="area_sweden" shape="poly" coords="192,65,206,[...]" alt="Sweden" href="sweden.html" />
		<area id="area_norway" shape="poly" coords="187,64,194, [...]" alt="Norway" href="norway.html" />
	</map>
	<ul>
		<li id="finland"><a href="finland.html">Finland</a></li>
		<li id="norway"><a href="norway.html">Norway</a></li>
		<li id="sweden"><a href="sweden.html">Sweden</a></li>
	</ul>
</div>

As you can see I also made a list with links. This list serves a dual purpose. First of all I’m using the list items as hooks for the “highlight images”. But they also serves as a backup, in case the user doesn’t have CSS and images turned on.

The CSS

First of all I style the containing <div> with position: relative. This is necessary in order to later on position the different regions with absolute positioning. I’m also defining it’s width and height which is the same as the size of the map image.

#map {
	position: relative;
	width: 340px;
	height: 438px;
}

Then I style the unordered list. The important details here is to give the <li> an absolute positioning to be able to position them on the right spots, a text-indent so that the text won’t show and display: none to hide them. (They will later be displayed with the help of Javascript.)

#map ul {
	list-style: none;
}
#map li {
	position: absolute;
	z-index: 20;
	text-indent: -1000em;
	display: none;
}

Finally I style the different regions giving them the right image as a background, the right dimensions and the right position over the map. It can take some trial and error to get them in the right position. Temporarily set display: block while you position them.

Here are the images that I use as backgrounds on the elements I position over the map. (Well actually these are smaller version of the once I use)

#sweden {
	background: url(../img/sweden.png) no-repeat;
	width: 158px;
	height: 374px;
	bottom: 0;
	top: 64px; 
	left: 80px;
}
#finland {
	background: url(../img/finland.png) no-repeat;
	width: 148px;
	height: 283px;
	top: 27px;
	right: 0;
}
#norway {
	background: url(../img/norway.png) no-repeat;
	width: 292px;
	height: 362px;
	top: 0;
	left: 0;
}

That sets the looks of the map. Now we just need some Javascript to make the rollover effects.

The Javascript

I use the DOM Assistant Javascript library to help with the DOM manipulation. If you prefer you can just as easily use jQuery, Prototype or any other similar Javascript library to do the same thing. Still, to use this example, be sure to include a reference to DOM Assistant in the head of the HTML document.

The script is pretty straightforward. What it basically does is that it loops through the list elements and assign mouseover, mouseout and click events to them. Review the comments in the code for a deeper explanation.

// When the DOM is loaded, initilize initPage
DOMAssistant.DOMReady(initPage);

function initPage() {
	// Get a reference to the containing div with id='map'
 	var map = $$('map');

	// Check if map exists
	if(map) {

		// Get all the areas of the imagemap
		var country_list = map.getElementsByTagName('AREA');

		// Loop through all areas
		for(var i=0; i<country_list.length; i++){
			$(country_list[i]).style.display = 'none';

			// Assign an action to the mouseover event
			$(country_list[i]).addEvent('mouseover', function(e) {
				// Get the id from the hovered area
				var country_id = this.id;

				// Extract the "country"-part of the id = the id of the list-item
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length);

				// Set the <li> to "display: inline" = show it
				$$(country_id).setStyle('display', 'inline');
			});

			// Assign an action to the mouseout event
			$(country_list[i]).addEvent('mouseout', function(e) {
				// Get the id from the hovered area
				var country_id = this.id;

				// Extract the "country"-part of the id = the id of the list-item
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length);

				// Set the <li> to "display: none" = hide it
				$$(country_id).setStyle('display', 'none');
			});

			$(country_list[i]).addEvent('click', function(e) {
				var country_id = this.id;
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length);
				alert('You clicked ' + country_id)
				DOMAssistant.preventDefault(e);
			});
		}
	}
}

This should do it one should think. But here’s where strange things starts to happen. The highlighted image flickers constantly as if the mouseOver and mouseOut events are triggered over and over again. Watch it in action.

Solution to the flicker problem

After some experimenting I came up with a solution where I use a transparent image as an overlay on the map image. I then assign the imagemap to the transparent image and voilà, the problem is solved.

<img src="img/transp.gif" id="transparent_map" alt="" usemap="#scandinavia_map" />

It’s important to give the transparent image the same dimensions as the image of the map.

#transparent_map {
	position: absolute;
	z-index: 30;
	width: 340px;
	height: 438px;
	border: none;
}

With that fix the map works just fine. View a live demo.

Accessibility

My conclusion is that this solution, if not perfect, is still pretty accessible. With CSS turned off, the list is visible and even though the map isn’t clickable you can click the links in the list. With Javascript turned off, the different parts of the map doesn’t highlight but they are still clickable.

For those who uses the keyboard to navigate, it’s still usable, but I haven’t been able to find a way to highlight an area when it’s “active”. If anyone has an idea of how to do this, please tell me.

I found one other weakness and a more serious that is. If you browse with images turned off and CSS enabled, neither the map nor the list of links is visible thus you can’t use it. If you have a solution to this, please let me know!

The files

• Download map.js
• Download map.css

The basic concept is to allow users to subscribe to a part of a page. Similar to how you subscribe to RSS feeds. This is done by making parts of a web page into WebSlices. For example if you interested in an object on eBay, you can subscribe to the information about that particular object if it’s marked up as a WebSlice.

Because it has the form of a Microformat it’s a very safe technique to use. If your browser is WebSlice enabled you will benefit from it, if it’s not you won’t notice anything unusual.

The WebChunks add-on

There’s already an add-on for Firefox called WebChunks that handles WebSlices in a similar way that IE8 does. I wouldn’t be surprised if the next version of Firefox also will handle this (and other Microformats) natively.

Actually Firefox has something similar which they call Microsummaries. It works just about the same way but is trickier to implement, plus the feature is hidden deep inside the browser where no one, except geeks, will find it.

In this example I add a Suunto watch from an eBay auction to my WebChunk toolbar. You can try it yourself at eBays WebSlice enhanced search page.

When you put the mouse cursor over a WebSlice, a blue icon appears next to the content (in IE8 it’s purple).

You store the Webslice by clicking on the icon.

With WebChunks you get an extra toolbar in Firefox where your saved “chunks” appears, kind of the same way as Active bookmarks does. If the content has changed since you last looked at it, the text will be bold. You access the Webslice by clicking on it and are presented with just that part of the original web page, readily accessible regardless of what page your currently at.

Other pages you can try this on is an article on Wikipedia about the Acid3 test and Internet Buzz on StumbleUpon. Of course you first have to install either Internet Explorer 8 Beta 1 for Developers or the WebChunk Firefox Add-on.

How to code it

Like all other Microformats, WebSlices relies on standard HTML elements and attributes to mark up the content.

WebSlice

First of all the WebSlices must be contained inside a containing element with the attribute class="hslice". This element must also have an unique id attribute.

Entry Title

It also have to have an Entry Title. This could for example be the name of an eBay object and could be contained in a <h3> with the attribute class="entry-title". This is the same as the hAtom standard property.

Entry Content

There’s a third optional attribute that’s also important, and that’s Entry Content. It contains the content of the WebSlice and is marked up with the attribute class="entry-content". Preferable inside a <div>.

This results in the very simple code below. It has all the ingredients of a nice WebSlice.

<div class="hslice" id="item-1">
	<h3 class="entry-title">Suunto X-lander watch</h3>
 	<div class="entry-content">
		<img src="x-lander.jpg" alt="" />
		<p>Nice wristop computer watch. Price: $229.99</p>
	</div>
</div>

Other optional attributes are:

Expiration

This optional attribute indicates the end time of an object. Like for example when an auction is finished. It’s expressed with the attribute class="endtime".

<p>End time: <abbr class="endtime" title="2008-08-28T12:00:00-05:00"> 6 hours</abbr></p>

Bandwidth

This optional attribute indicates how often the item is updated. It’s value must be an integer and expresses the number of minutes before update. It’s expressed with the attribute class="ttl". (ttl=Time To Live)

<p>This item updates every <span class="ttl">15</span> minutes.</p>

Feed URL

This optional attribute indicates if there’s a different source to get updates from. It’s contained in an anchor element <a> with the attribute rel="feedurl".

<a rel="feedurl" href="http://www.ebay.com/feed.xml">Subscribe to Feed</a>

If you’re familiar with the concept of Microformats, this is very straight forward and easy to code.

Conclusions

Will WebSlices catch on? Who knows? I think that because it builds on existing standards it might stand a chance. The beauty and simplicity of Microformats will make it easy for web developers to implement. But of course, in the end it’s up to the web surfers if they find this technique useful or not, that will ultimately determine it’s future.

Will it evolutionize RSS? Personally I think that if WebSlices catch on, RSS will probably coexist with it
since it’s more lightweight presentation is more suitable for some types of content.

Anyway I think it’s nice to see that Microsoft is doing an effort in the same direction as the Microformat initiative, elevating existing standards instead of trying to do something completely propitiatory. I think that they are starting to play well with the rest of the web development community and that’s really nice to see.

Further resources

• Internet Explorer 8
• About Webslices on MSDN
• Download whitepapers
• Demo Video: how to use Webslices in IE8 Beta 1

Finally I’d like to thank Fredde, for showing me this technology and pointing me in the right direction.

Here’s a simple tip on how to loop through elements with jQuery that I thought I’d share.

An example

We start with a simple unordered list.

<ul id="my_list">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

What we want to do now is to change the color of each list item to red. With regular DOM scripting this would probably take a few lines of code but with jQuery we need just one.

$('#my_list li').css('color', 'red');

This would result in:

• Item
• Item
• Item

If you want to do something a little more fancy, like something different with each item, you have to write a little more code, but not much. First you have to grab the the list elements like in the previous example by using selectors. By using the each() method, you are then able to loop through each item. By assigning an anonymous function to each() you get access to every individual item by using $(this).

Notice that in the anonymous function there’s an attribute i. That’s the number of each item, just like in any normal array, starting from 0 and incrementing.

$('#my_list li').each(function(i) {
	$(this).append(i.toString());
});

The result is a list with the item number attached to the text inside the elements like this:

• Item0
• Item1
• Item2

The really cool thing about this is that each iteration has it’s own function scoop. If you ever tried to do this with regular DOM scripting and a standard for loop you’ve most likely ran into some kind of scoop problem when dynamically assigning values to an object. They all end up getting the same value. jQuery elegantly solves this and makes you’re coding life a little bit easier.

Pretty cool don’t you think? Happy coding!