Kinect hack to manage home lighting system

No I’m not obsessed with the Xbox, I don’t even have one, but this is pretty cool, where you can see that the Kinect (with major hacking and programming) is used to manage the whole lighting system within the flat…

Simple really, lol ;)

Experience Architecture in website designing

The importance of experience architects in creating or updating a web site is often underestimated. There is a general tendency to fudge the initial user experience phase (sitemaps, personas with their specific user journeys and wireframes) or even skip it and jump straight to concept designs that are then fleshed out to ‘wow’ the client. The whole rationale that consists in understanding what functionalities and services are required on the site and structure them in a coherent manner, hopefully even test them before designing commences, is omitted. Defining the main functionalities of a site, then having an experience architect (who worked on that first phase) to sketch it out and analyse it should precede the functional specifications but most of all the design phase. Designers that have extensive web design knowledge as well as experience architecture knowledge are few and far between so you are unlikely to obtain the optimum result by starting with the design.

Card Sorting
The initial phases, when analysing the structure and organisation of an existing site in view of updating it ‘can’ benefit from card sorting. This consists of taking the different sections and seeing how users sort the different sections / areas into groups. It can help you understand how users would expect these different areas to be organised and therefore, where they would expect to find them. Different logical taxonomies may appear following the analysis as different user groups may sort cards in different ways. There are also 2 different types of card sorting, ‘open’ where no structure is predefined and ‘closed’ where participants are asked to place the cards in a pre-defined structure. Card sorting is not recommended to simply test a current site but should be considered as part of the process involved in defining the structure of a site that is being created or updated / redesigned. It can also help when adding or updating a new area to a site. As Nielsen explains more users are required in card sorting than in usability testing though. A fair amount of analysis is required to obtain useful findings.

Sitemap, user journeys, wireframes
By creating the recommended set of ‘sitemap / user journeys / wireframes’ you are capable of seeing black on white the optimum route a person will take. The organization and categorization of content blocks should be logical but can be modified to optimise the user journey outcome. A site should usually provide several optimised user journeys for the different types of target users / personas that have been identified.

Simplify the site and structure
Generation Y as opposed to generation X and the baby boomers are more net fluent and savvy online, capable of delving through content until they find the information they feel relevant and trustworthy. Their experience and knowledge provides near instantaneous gut feeling about a site. Uncluttered, simple pages with straightforward navigation principles just feel good. A pleasant experience on a web site that easily allows you to find what you are looking for is memorable simply because it is unfortunately a rare experience. This new generation and generations to come are a primary targets, neglecting them is not an option.

Simplify the design and content
Simple ways of communicating, avoiding the “noise” traditional designers want to apply in order to personalise or own their design can complicate things. Twitter, like SMS are two extremely simple ways of communicating, their restrictions simplify the communication.
Now is this to say that design is just powder in your eyes? Well, when applied by talented designers that know their target audience, how to play and innovate with the chosen medium and how to further optimise the previously crafted user journey, then obviously no.
A friend of mine works at the “Musée des Arts Décoratifs” in Paris, we discussed this concept when applied to modern decorative art. I was comparing the concept to artists capable of choosing specific material(s) and their ability to amplify the user experience and overall design through the selection of specific material(s). The technology but also the interfaces mechanisms of web sites are in this perspective key elements that a great designer will know and use to further his / her design.

Accessibility, standards, usability and web 2.0
Web applications are becoming more and more complex to the extent that they are starting to compete with desktop applications (ex. Google Maps and Mail, Flickr etc.). The interaction provided as well as both usability and accessibility when relying on standards are far better. Although the ‘web 2.0′ term is often used as a buzz word (see Zelman’s web 3.0 article) the term has undoubtedly helped spread the idea of more savvy websites, thought through and help improve user experience.

Twitter turns to Scala

You may have read articles explaining Ruby on Rails was the system behind Twitter and how there were numerous issues, for such a demanding and successful service as Twitter. In an article from Technology Review, Alex Payne from Twitter explains how they hope to replace a lot of the back-end systems in Ruby on Rails by Scala based services by the end of the year. Extract to understand what Scala is :

So the Twitter team turned to Scala, a programming language with its origins in work by Martin Odersky, professor at EPFL in Lausanne, Switzerland, around 2003. During his presentation, Payne, who’s also writing a book on the language, explained that Scala has many of the benefits of other languages but without the drawbacks. Some of the characteristics that make Scala so appealing to Twitter is that it’s able to efficiently handle concurrent processing–that is, separate instructions that need to use the system’s resources at the same time. This is useful when messages from millions of people need to be sent out instantly to different devices all over the world.

Although Scala has, like any language, it’s weak points, it seems that the language has great advantages for a company like Twitter. It is a leap of faith though for the company, since there are few, to no examples out there comparable to Twitter.

Chrome shines with experiments

Yes it’s the weekend and another video following the Ray Ban viral video. This however is a far more geeky video, as it demonstrates the ability of Google Chrome with it’s super fast Javascript Engine (codename V8) to really show off.

You can also go and check these experiments out. Believe me though, not using Google Chrome, shows how good Google Chrome is. A clever way of showing how good Google Chrome is. And obvioulsy it shows up browsers like IE. Don’t even dream of trying it with IE6, once again life would be so much better without IE6… No but seriously, don’t try it with IE6; you’ll either crash/freeze your computer, or spend 10 minutes clicking ‘No’ on the Javascript debugging Console.

Enough of IE6 already

Let’s all shout loud and clear that we have had enough of having to cater for Internet Explorer 6, the quirks, the endless limitations and overall reduced user experience. Found this on Bowman‘s site. It is a link to a manifesto / petition to encourage people to move away from IE6, get a life and make the life of people creating HTML just that much easier and interesting for end users. IE6 does not comply with any standards other than those of Microsoft and now more than ever just hinders user experience in general. So please spread the word about the issues that IE is creating.
Do check out the site. It looks great and has a wonderful quote from Jeffrey Zeldman, (I translated his witty article Web 3.0 a while back):

“IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web”

Bring IE6 down screenshot

Bring IE6 down screenshot

Bring down IE6 logo

Hilarious note: Pierre from work, has the same unfortunate task as myself, of having to spend ages testing and modifying HTML templates so they will work in IE6. Take a look at this very funny set of IE6 splash pages, Pierre sent me:

Using AJAX properly, the way Google likes it

A very interesting article has been posted over at about using AJAX so that your site isn’t hiding content from the likes of Google : How to : Get Google and AJAX to play nicely.
The article gives some good examples of what to avoid doing and alternative methods to those generally used that will probably be more efficient. AJAX is a great addition to have, just make sure that you are not blinding the search engines from reading your content when you use it !

Google SEO Lessons

Google, via it’s evangelist Adam Lasnik is starting to provide SEO classes. As you can see here the seminars are cheap and open to all.
It begs the question about Google asking people to create web sites for people and not for their robots. However, it is true that the best idea is to build your web sites for your target population while respecting W3C standards, and then optimise your code for search engines.
Once you have read a fair amount about Search Engine Optimization, you realise that most people are just guessing what is working and then try to make you think they have the real deal when it’s likely that they only have half the story. Optimising pages is partly logical on the basics and then guess work on what may be used by Google to define the order of their results. I personally think they should spend more time dealing with the weeds like domain name parking with pages full of adverts/links…

Spying on your visitors

Jeremiah Grossman demonstrates an issue with CSS and visited links which allows sites to verify the sites you have visited prior to theirs.

The issue/bug/vulnerability isn’t new, as comments explain, it was first discovered in 2002 and is well documented here at the site.

CSS has a feature that can be abused to exactly the same ends. It is simpler, more accurate, and more easily abused than the timing attacks described in the above paper.

There is a demonstration here of how it works, on top of the Grossman post :

It seems variations enable this hack on IE, FireFox, Opera and Mozilla unless there are plug-ins that block the browser from comparing with its history function…

Image flicker in IE 6

I’d had this problem before and it still seems to come back and bite you. Internet Explorer 6 is still going to be around for a while so you can’t just ignore it.

I was at one of my best mates, showing him a personal site I’m working on.
As you can see below the initial state of the menu is all grey. When you move it’s supposed to bring the menu to life with colours ;)
However from State 0 (initial state) to State 2 (expected effect) there is an intermediary state in IE 6 State 1, where the little (icon) column preceding the menu elements is not visible, but should be!

Initial state (0):
Initial State before mouse hover

Mouse over effect (2):
Mouseover effect

IE6 flicker effect (1):
IE6 flicker Effect

The flicker effect in IE is consistent. Every time you hover over the image it calls the server to download a the hover state image once again. So if you go up and down a menu with 5 elements twice IE 6 will go and fetch the hover image 20 times !

I initially started with the column, preceding the menu elements, slightly smaller. Then I tried to do a cross type icon for elements with sub menus. The problem was that it looked like a RIP symbol so I moved back to a square type icon. I realised I liked the taller column (without the horizontal line) and kept a smaller (square type) one for the ‘active’ click by mistake. The active effect, moving from the tall to the square column, looks nice so I kept it like that.

Active, mouse down effect (3)
active mouseover

I remembered having come across a fix for this on a previous site that required a few lines of code in the httpd.conf or .htaccess

This is the code that needs to be added :
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

You can also add this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

And as a comment on explains you can also use this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif "access plus 4 hours"
ExpiresByType image/jpeg "access plus 4 hours"
ExpiresByType image/png "access plus 4 hours"

You can also use “access plus 1 month” for example…

If you have access to the httpd.conf (I couldn’t get this to work via a vhost file) then you can add :
LoadModule expires_module modules/

This ‘should’ stop the constant calls to the server. There may be an initial case of the image missing on the first hover (before it has loaded the image) but then it should no longer call the server for each hover.

Code was found at Dean Edwards, the IE guru and a comment posted on Jon Hicks blog in an article about a menu that wasn’t behaving

A word of advice : if you are developing a site, test this and then comment it out until the site is finished. It’s highly likely you will ‘have’ to refresh the page by using a force refresh page each time you change any images. And sometimes you forget and then discover the changes when you restart the browser. Although that seems to be necessary in Opera 9 all the time anyway ! PS : Opera 9 is still my preferred browser, maybe until FireFox 2 ?

One other thing I noticed with Opera is that the animated gifs that have been defined to cycle though the frames in the animation say seven times like the one above start all over again if you page down and then back to the animation. It’s a kind of now you see it, now you don’t thing that cleans the slate of the animation. Not really always desirable and I feel it counteracts the whole concept of defining how many times an animated gif should loop !

Hacks and phishing, more and more sophisticated

An article on explains how a security flaw in Powerpoint has enabled hackers to infiltrate companies and retrieve vital information in a specific espionage case. It seems that the criminals using this hole in Microsoft PowerPoint wait until Microsoft have just released their security updates, and this is becoming a trend. In the wake of new updates they launch their attacks knowing full well that updates have not dealt with the flaw they have identified !

Andreas Marx of notes that hackers appear to be surfacing with new exploits just days after Microsoft’s monthly Patch Tuesday cycle has passed, possibly to have more time to exploit vulnerable systems before Redmond issues its next round of updates.

Attacks like this and phishing techniques are well thought-out and often extremely complex operations that require skills that even some of the top computer companies would rather have in-house than having to battle against them. A recent MITM (Man in the Middle) attack against Citibank, rather Citibank customers, used an extremely sophisticated system that could easily fool savvy IT folks ! This attack is also explained in detail in’s Security Fix section.

Banks are now faced with traditional scams and the new extremely sophisticated cyber-scams like the above phishing techniques.

It’s a good idea to remember that banks will (should) never request your pin code over the internet and checking the domain name is a good idea. In the above example the domain name used was “” and not “”.