An Example of How Graphics Enhance Your Message

Graphics such as clip art, colors and text can turn a boring message or chart into something visually interesting that people remember.  When your viewers walk out of the room or surf to a new Web page, will they remember what they learned?  Graphics can help increase the chance they will if done right.

I was on-line the other day and I came across a graphic from this post that was noteworthy for all the wrong reasons.  Take a look below.  The aesthetic is not too bad and you see a nice style to the art work.  But if you’re like me, you had to do a few double-takes before the core message revealed itself.

I just didn’t pick up the the purpose of the graphic from this image.  If not for this post about graphics, I would never have taken the time to think about the message let alone remember it for later.  The actual intent was to represent what is essentially a bar chart like the one below.  Take a moment yourself and see what elements from above communicate this chart.  You can ignore the chickens as I did when I first saw this.

Most artists rely on the fact that the eye, in conjunction with the brain, does inherent pattern recognition.  They introduce graphics to make images more interesting while trying not to obscure the patterns the eye must see to appreciate the primary message of the image.

What happened in this case?  The pattern the viewer is expected to recognize is that the hill and trees represent increasing values over time.  This didn’t work so well for me probably because there is too much noise on the image and too many changes from left to right.  The eye needs similarities and some level of consistency to make the desired connections.

Let me demonstrate what I mean with an example you may have seen before.  Look at the silhouette of a face below.  You notice a head, hair, eyes and lips as elements of a face even though you can’t see the actual person.  Your brain easily recognizes the pattern of a face.

Now look at two people facing each other using the same exact image.  Is this two people in black or is it a white vase on a black background?  The more you stare at this, the more you will notice that some times you see people and some times you see a vase.  The dual image creates a challenge for pattern recognition because the image equally represents both two faces and a vase.

Graphics can provide the visual clues people need to see the right pattern.  For example, depth, color and secondary graphics such as flowers push the eye toward the vase pattern as with this next image.  Most people would not even see the original faces.

Back to our graphic, the artist could help the viewer make the right connections while creating something aesthetically pleasing with just a few small changes.  The following version of the original image preserves much of the aesthetic, but introduces some consistency and effects to help the viewer register the core message.

Here’s what was changed:

• The background is one color so it stays in the background and the eye is not distracted moving left to right.  The hill is one color as well.
• The trees are more similar in shape and color to help the viewer see they are related. The left tree is unchanged though to keep some playfulness and because it didn’t impact the overall message.
• The font of the amount increases left to right and the last tree is thinner to make it appear taller.  These changes, along with the previous two, help the viewer’s eye connect to the pattern of increasing amounts or values over time leading up to the 1.2 billion dollar amount.
• The white text is now a single title at the top to clarify the purpose of the chart.  The labels at the bottom are in a similar font to make them more noticeable.
• There are far less paths and rocks and bushes and markers.  In fact, I didn’t even realize the coloration on the hills represented paths until I started making changes!
• And finally, I put in a jogger and a family on bikes.  A family out for a weekend ride creates a nice image, and the active people reinforces the message this chart is about walking and biking programs.

Interesting and playful graphics definitely create a nice aesthetic.  Pleasing imagery increases the chance your viewers will remember your message provided you don’t over power the message.

Run Mac OS X on PC Hardware

This post is from our software engineer Hugo (pictured below).

You can now run Mac OS X in PC and thus gain immediately the benefits of costs and space saving at home or work. Just VMware software and a pre-installed Mac OS X is needed. Here is my story and the required steps.

When the time to start learning a new technology based on a different hardware platform came, I faced the necessity to migrate and leave the comfort of using a very familiar environment as Linux is. One solution to this matter was going to be software virtualization, so I began a research consisting in trying to boot a virtual machine with a pre-installed Mac OS X. Unfortunately, my Dell laptop and other Dell models wouldn’t work since the VMware software was responding with the following error message, “Mac OS X is not supported with software virtualization. To run Mac OS X you need a host on which VMware Workstation supports hardware virtualization.” (See the image below)

Many boot and even Setup-level options had been commented by (IT) people in forums and blog posts, but they wouldn’t work either in my attempts. However, the last chance was waiting for me. The brand new Dell Optiplex 380 resulted to have a full hardware virtualization support built-in, and I could confirm this by booting successfully the Mac OS X on it!

So now I’m working with both Linux (as my base/host system) and Mac OS X (as guest system) running on a same PC, with no need of a Mac machine (nor Mac devices).

To achieve this, the following steps should be enough (allowing you to run a pre-installed virtual machine with Mac OS X in a PC Dell Optiplex 380):

Steps:
1. Install and open VMware Workstation or VMware Player.
2. In the Home section, click on “Open a Virtual Machine”.
3. Choose the .vmx file (in my case, “Mac OS X Server 10.6 (experimental).vmx”) and accept.
4. In the section opened for the selected VM, click on “Edit virtual machine settings”. A window will appear.
5. In the Hardware tab, click on the “CD/DVD (IDE)” option.
6. At the right side, click on “Use ISO image” option, click on the “Browse” button, and select the .iso file (“darwin_snow.iso” file, which is in the “bootloader” directory, in my case).
7. Save the changes and click on “Play virtual machine”. The VM should start booting.

There are still more tests to do within the virtualized Mac OS X, but at least we have more than the basic functionality of this system running on our PC (see image below).

Avantica engineer Hugo, author of this post.

Bitmaps from Cloud Resources on Android

This technology post was written by Andrés Luque, one of our best mobile developers who also worked on the iPhone application for hinventory.com.

A couple of days ago I received the requirement for displaying an image that’s stored somewhere in the cloud. The idea for the solution is pretty straight forward:

1. Define the URL to fetch the image
2. Create the connection
3. Get the input stream of the result
4. Use Android class BitmapFactory to decode the stream to a bitmap.

And that’s exactly what I wanted to achieve with the following code:

URL imageUrl = new URL(imageUrlString);
HttpURLConnection httpConnection = (HttpURLConnection)imageUrl.openConnection();
httpConnection.setRequestMethod("GET");
httpConnection.setDoOutput(true);
httpConnection.connect();
InputStream imageStream = httpConnection.getInputStream();
Bitmap bmp = BitmapFactory.decodeStream(imageStream);

This worked great for small pictures.  However, it didn’t work consistently for larger images. The Android Log showed the following message when it did not work:

decoder->decoder return false

The UI showed an empty box and the debugger showed the bitmap was not decoded and kept with a null value. My first thought was that it was probably a “size-related” problem, but after running more tests I noticed the program sometimes showed the bigger images successfully and failed displaying the medium-size images. The problem was related to how to retrieve content from the url and not the input stream itself.

The solution was in the android class BufferedHttpEntity. This class is a wrapper that buffers the content if it’s necessary.

URL imageUrl = new URL(imageUrlString);
HttpGet httpRequest = null;
InputStream imageStream = null;
Bitmap bmp = null;
try {
httpRequest = new HttpGet(u.toURI());
HttpClient client = new DefaultHttpClient();
HttpResponse response = (HttpResponse) client(httpRequest);
HttpEntity entity = response.getEntity();
BufferedHttpEntity httpEntity = new BufferedHttpEntity(entity);
imageStream = httpEntity.getContent();
bmp = BitmapFactory.decodeStream(imageStream);
} catch (URISyntaxException e) {
Log.d("Downloading image for preview","Check the url!");
}

This works great and has worked flawlessly so far.

I must thank the coder who posted the idea to use the BufferedHttpEntity class in the android developer mailing lists.

Efficient Ajax with .NET

This technology post was written by Jorge Cotillo, one of our engineers in Peru who is also a .NET expert.

I use AJAX with .NET to create highly interactive experiences for users in almost all the projects I’ve been working on, but sometimes using AJAX can be a really problem.  Here I will show you a really simple and efficient way to accomplish this kind of implementation using HttpHandlers!

Using HttpHandlers helps you to centralize all your AJAX calls to a Server Side methods, returning a Json Serialization of a entire Business Object(B.O), a Generic List of Business Objects or you can return a whole rendered Html page just by calling RenderControl() method of a UserControl called from an HttpHandler class.

At this point maybe you are wondering, when I should use this RenderControl() method and an HttpHandler class?  Well the answer is simple!

• You want to have the server side to do all the effort to render a page instead of making the client side to render Html tags from a Json Serialization
• You want to reduce the server response

Talking more about the second point I can say that, sometimes maybe you want to use only one or two properties from a Business Object and returning it using Json will serialize the entire object.  This means that it will return some properties that maybe you don’t want to use increasing the server response (if you want to avoid this you can use a DTO – Data Transfer Object but that is a topic for another blog entry).

It is really simple to use an HttpHandler, you can just create a Generic Handler class (*.ashx) or just create any class (*.cs) and implement IHttpHandler interface with ProcessRequest method an IsReusable property. If you implement this interface or you are using your Generic Handler class and you are rendering a user control you can do the following:

public void ProcessRequest(HttpContext context)
{
UserControl _userControl = (UserControl)LoadControl(“Url of your user control");
StringBuilder output = new StringBuilder();
UserControl.PublicProperty1 = "Public Property";
UserControl.PublicProperty2 = "Public Property";
//This public property is going to be used if you want to inject any value to your user control, let's say an ID, and this ID
//is going to be used later to generate a datasource.
_userControl.DataBind();
using (TextWriter myTextWriter = new StringWriter())
{
using (HtmlTextWriter myWriter = new HtmlTextWriter(myTextWriter))
{
_userControl.RenderControl(myWriter);
output.Append(myTextWriter.ToString());
}
}
_userControl.Dispose();
context.Response.ContentType = "text/javascript";
context.Response.Write(output);
}

Then in your web.config you need to configure something like this: (at httpHandlers section)

<add verb=”GET” path=”Page.aspx” type=”Namespace, App_Code”/> (add App_Code if you are working in VS .NET 2005)

And that’s it, if you write: http://localhost/Page.aspx then your handler is going to be called and the html (from your user control) is going to be written.  You can use this approach if you want to create a widget for example.  You only need is to call this page and simply pass the needed parameters and that’s it.  Also maintaining a .cs is easier than maintaining a javascript!