Microsoft Surface - a screen at the booth's wall on which you can see the actual table

First of all: The Multitouch-technology is simpler than the one in the iPhone. Instead of some complicated sensor-surface-stuff it has five infra-red cameras integrated which shoot what your fingertips are doing on the table. I’ve already seen that in a YouTube video:

Now, I thought – well, the Multi-Touch technology isn’t innovative, but the communication with things that are put on top of the table is cool! For example: If you put your camera on it, the camera’s photos burst out immediately. If you put your cash card on it, you can see how much money you’ve got in your account or what the heck – stuff like that, you get the idea! So, I thought there’d be sensors spread all over the table which recognize these things and somehow connect to the chips integrated in cameras, cards, whatever. But Nope! It’s way simpler: These things (cameras, cards, …) have some kind of “Barcode” underneath - in this case a “Dotcode”. The cameras inside the table can recognize the code and with it identify the thing that lays on top. If the cameras recognize the code for a camera “Surface” connects to it via integrated Bluetooth, downloads the photos and shows them around the camera.

Barcode or Dotcode - Surface

So, everything’s done with these cameras in connection with Bluetooth. Don’t get me wrong: I don’t doubt about the new possibilites which are opened up with “Surface” and I like the the simplicity of the technique – the easier the better! But what annoys me is: Why the hell does it cost more than 10.000€ although there’s no expensive high-tech built in?! They could make it so much cheaper! And with a lower prize they could adress more than just the few business-people! …

And another thing! “Surface” runs on Windows Vista… and you were able to see that: It wasn’t able to perform quick animations smoothly, it has always juddered a bit… (oh, macintoshy spitefulness, how gleeful I am right now…!)

[Zeige als Diashow]

When you want a picture to change, while the cursor hovers over it, you usually use JavaScript’s <onMouseOver> in this way:

<img src=”picture.jpg” onmouseover=”this.src=’hover-picture.jpg’;” onmouseout=”this.src=’picture.jpg’;” />
 

Although this is the common way, there’s actually another, better and way simpler way to accomplish this hover-effect, which also works when JavaScript is turned off in the browser. It’s – as you can guess from the headline – via CSS:

<div id=”avatar”></div>

<style type=”text/css”>
#avatar {
width: 64px;
height: 64px;
background-image: url(gravatar1.jpg);
}
#avatar:hover {
background-image: url(gravatar2.jpg);
}
</style>

It uses the :hover-funtion in CSS. The picture is actually just a background-image which is swapped, when the cursor hovers over the div. Many sites already use this method. Some even just have one background-image which is relocated via background-postion-y or -x. Facebook does that: The logo is actually two logos – the first one is the normal logo, the second one is with a “Home”-icon. When you hover over the logo background-position-y: -17px; is executed. Although it’s actually the background-image which is repositioned, for you it looks like a house is simply added behind the logo.

Facebook-logo background-picture with and without house

And this leads me to another CSS-thing: Instead of relocating a background-image you could indeed add a house behind the facebook-logo by means of the rather unknown tags :after in combination with content: …;:

<div id=”add-content”> Facebook </div>

<style type=”text/css”>
#add-content:hover:after {
content: “house”;
}
</style>

Though this example works with text, you could easily change that to use images. Now, why does Facebook used the other way to add the house behind the logo and not this, simpler one? Because crappy Internet Explorer can’t interpret :after and content! These tags are actually official web-standards, but -hey- the IE doesn’t give a fuck about web-standards! Instead Microsoft invents its own standards like filter:Alpha(opacity=50, finishopacity=20);… Oh, dude, I hate the IE! From the bottom of my heart! But 66% of all Internet users are still using the IE, because they don’t even know about Firefox or Opera or Flock or Safari…