Not really a blog

Try this in firefox:

• Go to any page with lots of images.
• Delete the URL bar
• Substitute it with:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+”px”; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+”px”}R++}setInterval(’A()’,5); void(0)

Press Enter and enjoy!!!

:-)

I was trying to debug a connection to the internet that should be controlled by tc, the tool linux uses to do traffic shaping. The scenario is this:

• All outbound traffic through one interface using a specific IP port should not block the rest of the traffic.
• Some other ports and protocols are given priority (ie: interactive traffic using ssh)

But it was failing. tc is quite complicated to get it properly working. For testing purposes, we were using a combination of wireshark (or ethereal), netcat and iptraf to see how the bandwidth was used. My boss showed me a way to get all this working together which is quite handy. I hope he doesn’t mind at all if I share it with you :-).Imagine we have 3 computers:

• hostA: our personal computer
• hostB: where we are doing traffic shaping
• hostC: a test computer where we are going to send data so we can test everything.

right, imagine we want to control port 3000 on hostB. For that purpose, we will set up a netcat instance listening on hostC on such port:

golan@hostC:~$ nc -l -p 3000

So we can now send data to such port using netcat as well:

golan@hostB:~$ cat /dev/urandom | nc hostC 3000

This way we can send data and test the connection.

Capturing traffic on hostC

We can use wireshark on hostC in a tricky way to see what’s going on. So, we use something like this:

golan@hostA:~$ rm capture; mkfifo capture;

golan@hostA:~$ ssh root@hostC tcpdump -s 0 -U -n -w - -i eth0 tcp port 3000 > capture

We create a FIFO named capture and we capture traffic on hostC, on port 3000 and write it to the standard output which in fact is redirected to the FIFO we have just created.

Wireshark

So now, we launch wireshark, and configure it to capture data from the FIFO we created as the interface file:

If we now click on statistics->IO Graph we can get a nice traffic graph

which can help us to debug the application

IPTraf

Alternately we can use iptraf, where we can have a window like this one:

Measuring bandwidth consumption

Now, you can test the connection by sending data using netcat as seen above.

I guess there are many more ways to do this, but found this one to be nice. Just drop a comment if you think there are nicer ways to do this :-)

I want to change the visuals of this blog. I’ve never been really satisfied with what I had.

And my intention is to have a template as in http://roncero.org

Expect some breakage.

*Update*: This is more or less how I intend it to be…

Ok, so I upgraded typo, the software this blog is running, to the latest version, the one on the subversion repositories. And I did somethings wrong.

I lost some data from the data base migration and lost some comments although I could recover the articles, but I had to reset the date on them. Sorry about that

And, the theme I was using is no longer working. Don’t know why. I’ll have a loot at it tomorrow.

Again, sorry for the mess.

Following my last post about human-computer interaction, I am going to talk a little bit about User-Centered Design which is a methodology to achieve a good human-computer interaction.

So, what is User-Centered Design…

A design method

User-Centered Design (UCD) is a design methodology that is about
designing interactive technologies to meet users’ needs. We can divide it in
four stages:

1. Understand users’ needs
2. Establishing requirements
3. Prototyping
4. Evaluanting designs

Its key characteristics are:

• Understand users and their needs
• Focus on users early in the design and evaluation.
• Identify, document and agree specific usability and users experience goals
• Iteration

We would like to use this methodology because using it would help us to

• more likely build something useful
• manage users’ expectations
• Encourage ownership of the solution
• Easier integration

That’s it, the user is the key in the design of any interactive product, something many
vendors or software developers don’t consider quite oftenly

Understanding Users’ Needs

It is vital to understand what users would want from or would want to do with a
interactive product. Many failures in this regard leads to unused, difficult or awkward
products and basically come from ignoring what users of that specific artifact
need and want.

To achieve this, we need to use certain Data Gathering Techniques in order
to retrieve as much information as possible. So we could use a range of research methods:

• Observation: Using anthropology methods to observe people and draw conclusions.
• Interviews: They are good as an initial approach to what users want, but sometimes they might
  be unfeasible (too many people, time-consuming, etc.)
• Questionnaires: A serie of questions to elicit information from the users. They are good to retrieve
  quantitative and cualitative data.
• Focus Groups: They are group interviews, and are good to understand the users’ need from a global
  point of view. (ie. to get consensus)
• Analysis: Extract conclusions from the aforementioned methods.

Establishing requirements

This is to deal with the typical questions: What do users want?, What do users need?… etc.
As anyone who has done some software engineering, there are
different requirements:

• Functional Requirements: What the system should do…
• Non-Functional Requirements: Especifications
  about the system: memory usage, network, etc.
• Data: What kind of data to store, etc.

There might as well be other requirements, such as physical (noisy
environment, dusty, etc…), social (sharing of files, displays,
etc…) or organizational (hierarchy,
communications, etc.) that may be addressed as well.

Prototyping

It is also vital to do prototyping, that is create mockups of the
system or simmulations to test them. It does not need to be a final
prototype, it can be done with paper in its initial stages, and, once
its being defined, get a more-closer-to-the-final-product
prototype. That’s why there are different kinds of prototypes that can
be done:

1. Lo-Fi prototype: Basically made with paper, post-it notes, etc. Provides a quick and dirty look.
2. Mi-Fi prototype: simulated functionality. They are based on screen printouts or screen simulations.
3. Hi-Fi prototype: Almost like the final product, resembling it.

Evaluating Designs

There needs to be an iterative process evaluating the prototypes,
from the early stages of the project throughout the final prototypes.
This would help get the right design from the very beginning and reduce
errors or prevent from getting a final product that is unusable. Also,
it would help to extend the functionality.
We can have two different types of evaluation:

• Formative Evaluation: Done throughout the process.
• Summative Evaluation: Done when the process is finished

In order to evaluate, there are a variety of ways to do it, depending if its from a user’s point of view or from
a group of experts’ point of view. These are:

• Quick & Dirty: Informally asking users for feedback.
• Usability testing: Recording typical users’ tasks in controlled settings
• Field Studies: Observation in natural settings (where the interaction is taking place)
• Predictive evaluation: Asking experts to apply knowledge of typical users.

Disclaimer: These notes are not my own creation. They are mostly based on what I have been studying
and summaries I have been using. My sources include
John Halloran’s lecture notes and the book Interaction Design by Rogers et al.

So, as I said in a previous post, I am taking a course on Human-Computer Interaction, a subject that deals with almost everything that involves our everyday lives. Who has not used a mobile phone? a computer? a vending machine? Even a simple elevator, that would seem to most people unrelated to computers, has to do with HCI, the interaction between a person and the thing in question.

The textbook on which the course is based is Interaction Design, beyond human-computer interaction by Rogers, Sharp and Preece, on which most of these notes are taken.

Human-Computer Interaction

So, back to computer-enabled gadgets such as mobile phones, mp3 players, PDAs and, obviously computers, it is a relly really important topic. How many times have you felt awkward using a mobile phone or a program or web application? Why are some applications that make you feel easy while some others annoys you?

That’s Human-Computer Interaction and it is a topic that could be defined as

The study of interaction between people and computer-based systems

and usually concerns with the physical, psychological and theoretical aspects of this process, as Rogers defines in his book Interaction Design.

So, we should use HCI to develop usable products:

• Easy to learn
• Effective to use
• That provide an enjoyable experience

and avoid bad designs that causes problems.

How to design products properly?

Any good design involves understanding how users interact with computers and enabling them to do so effectively. Failing to do this leads to awkward designs.

There are a number of methods and techniques to make this happen. One of them is User-centered design (UCD) in which all design depends ultimately on the user’s needs, made in an iteratively way.

What to take into account

We would need to take into account:

• Who the users are
• What activities are being carried out
• Where the interaction is taling place

There are a number of usability goals that we would like to achieve:

• Effectiveness: How good a system is at doing what it is supposed to do.
• Efficiency: The way a system supports its users in carrying out their tasks.
• Safety:Protecting the user from dangerous conditions and undesirable situations.
• Utility: The extent to which the system provides the right kind of functionality so that users can do what they need or want to.
• Learnability: How easy a system is to learn to use.
• Memorability: How easy a system is to remember how to use, once learned.

So now, if you have ever developed a program, web application, think about these usability goals. To what extent were they supported in your application? Did you find it easy to use? Did other people, even non technical, find it easy to use? How would you improve it?

So…

Think about all this. I’ll think about it too ;-) and post some more info about User Centered Design and other related stuff in the near future :-) .