Monthly archives: October, 2006

Sometimes “random” is the best choice

…as nature does. Create something from random numbers.

Here are a couple of examples, from a Sunday morning programming session (plus 1 extra hour from the daylight savings change):

Random bubbles
Random trees

Each time you reload the page, a new drawing appears.
To see them correctly, you need Firefox or Opera, because the images are SVG (Scalable Vector Graphics).

Have fun!

Thoughts about Icons on User Interfaces

Bathroom heater's icons What do you understand from this picture?
It’s the switch of my bathroom heater. It has 4 positions: 0, fan, 1 and 2. It’s easy, isn’t it? Even though, last week I had to open it to try to repair it, and I discovered that one of the two small radiators, it has inside, was not working. I tried to repair the damaged one, but finally I gave up. So I drew two black icons next to the switch, an arrow and a cross, to inform that only the position “1” works.

Surprisingly, my flatmate didn’t understand it. It is easy for me: an arrow is marking the correct choice, and a cross is marking the wrong one. But somehow it’s not as easy for other people, who have not a wide knowledge about “User interfaces”. This is a quite interesting question to think about, when we are creating UIs: “is the user going to understand the interface?

Combos squaresA trivial example. Look at these two boxes. You can guess the first one is a combo box, or drop-down, or something like this. The second one seems a text box with a drag-and-drop element. Can you see it? We decide the second box is drag-and-drop because it has four arrows instead of one arrow (or this triangle representing an arrow head). Honestly, it’s totally ridiculous!

The essence of the question, when you are working on an UI, is to assume nothing. Quite difficult anyway.

SVG: The vectorial graphic format… for the Web?

I’m learning to use Inkscape, an open source application to draw graphics. It saves your drawings in SVG format. For some reason, I’ve discovered that this format is a really interesting standard for the future of the WWW. The Scalable Vector Graphics (SVG) is an extension from XML to define, as its name says, vectorial graphics. The W3C standard is quite wide, with a lot of options which define from simple circle shapes to text following a curved path. Because it is XML, you can open in your text editor and see the source (try to see the source code of the image/frame above, if you can see it).

As you can know, nowadays there is not a free option to use vectorial graphics in websites. The only real choice is to use Flash, which is a propietary technology (with the benefits and problems which it carries). Another option, a bit weird, is to use java applets to draw in the screen, but it seems like overconsuming resources without sense.

The good news is that Mozilla and Opera are working hard to support SVG. In fact Firefox paints SVG quite well. But there are more: you can use Javascript to change the elements inside a SVG, like DOM Objects, so you can create animations, add events, and such things. And even more: being vector graphics you can resize without a loss of quality; it supports creative commons definitions; the texts within it can be indexed easily by Google (because actually it’s XML); and so on.

The bad news. The guys from Microsoft are too busy to think about SVG support. Internet Explorer 6 cannot manage SVG, neither does IE7. And they have no plans about it. Why?