February 2009 Blog Posts
Friday, February 27, 2009 10:17 AM
Today i read an interesting article about Agile UI design: in the last months there has been a lot of talking about Agile even in design sphere. It is not easy to apply this methodology into a project. You (and all the team) must have an open mind and management that is willing to try new approaches and that doesn't have a big hierarchy
I work in a kind of media agency inside a big consulting company and I saw the following behavior: you have to to use Agile methodology with your team when you are in the development phase of a project, but the management behavior and the documentation required has to be written in a standard old and complex mode, like if you were adopting a waterfall approach, like Rational.
I think that talking and applying Agile practices even in little steps can create an interest about Agile also for the management side...hopefully :). And if that fails it takes us into different way of thinking.
Technorati tags: UI design, Agile
Wednesday, February 18, 2009 10:28 PM
For years data visualization had a secondary position in the graphical area. It was the kingdom of pie chart.
Data visualization has a lot of importance in the scientific field, where it is important to understand at the first glance the meaning of a lot of data without having to read through them: in this case a visualization creates a map that represents numbers and words in way that makes aggregate information emerge.
For two years I was in a project for a scientific data visualization and I had the chance to dig into the theory of information visualization. I discovered a new world and a lot of paper wrote on this topic.
Nowadays, with new tools and framework for developing UI like WPF and RIA, it is becoming easy to develop interesting data visualization also for "everyday" applications.
But this requires a big mindshift in the way we design the user experience and we, as designers and developers, have to change the approach we use to represent data, and find more creative and meaningful way to represent complex data.
I think that data visualization is an important step in the future development of UI construction and for this reason I want to share with you some pointers that I found very useful during the studies in the last years.
Here are some books I recommend:
R. Spence [2007], Information Visualization, Design for Interaction – 2nd ed., Perason Educated Limited
E. R. Tufte [1983], The visual display of quantitative information, Graphic Press
E. R. Tufte [1990], Envisioning Information, Graphic Press
Stuart K. Card, Jock D. Mackinlay, Ben Shneiderman [1999],Readings in Information Visualization, Morgan Kaufmann
A good online resource is
http://www.visualcomplexity.com/ that contains a collection of many data visualazions, grouped by types and shapes.
And if you have the chance to attend to
MIX09, there are a few sessions about data visualization as well.
Technorati tags:
UIX,
WPF,
RIA,
data visualization
Sunday, February 08, 2009 10:00 PM
In this post I want to share with you a solution I found to workaround a bug/problem that IE has with <hr>: it doesn't render the background image.
For the new skin of my blog I tried to use the "good old" simple tags, which I choose based on the content.
For example I preferred to use semantic tags if they were good for the content I wanted to display, like cite and quote for a citation rather than a using a generic span. This a thing that most web designers forget: there are tons of tags, but most of us always use div, span, p and lately the ul/li. But that's the topic for another post.
I developed the skin on a Mac, so I developed it using Firefox, and then I tested it on Safari and then Opera and the skin was looking good on all these browsers, without any change needed. But then I fired up with Windows VM to test it with IE7... and here came the problems.
I accepted some differences, but I didn't want to change my idea of using a definition list (<dl> with nested <dt> and <dd>) for the list of photos and titles.
The problem is that IE renders a definition list completely different from the other three browser. So, to solve the problem I decided to change the way I implemented the graphic separator between the images: instead of just having a background on the <DL> I decided to use a <hr /> to separate each item group (description + title) and then to give it a background in order to have the graphic rule instead of the usual boring solid line.
And again there was a problem: IE doesn't render the background of the <hr />. A simple solution would have been to drop the line, replace it with a generic div, and give it a background. But then I would have missed the clean markup given by the <hr />.
So I decided for a mixed solution: I just write the hr in the html, to keep it clean, but then make it a div with a background at runtime, using jQuery.
Let's start with the HTML markup that we want to achieve:
<div class="hr"><hr class="Img"></div>
But I don't want to write that code, so here is the markup that I write:
<hr class="Img" />
And the CSS that I used to style the <hr>. Notice that this style applies both to the <hr> and the div that will wrap it.
The height property is set to the height of the image that I want to use to replace the <hr>.
hr.Img, div.hr {
background:#FFFFFF url(images/coolHr.gif) no-repeat center bottom;
height:20px;
}
Then it's time for the javascript.
First in the <head> I called the library (here I used the minimized version of jQuery hosted on Google):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
And finally, in a script block, I put this javascript function:
$(document).ready(function(){
$("hr.Img").wrap("<div class='hr'></div>");
});
That code just selects the <hr> I want to replace and wraps it with the
container div.
The results of all this work is the dark green line you see down below.
Technorati tags: css, IE, jQuery, hack
Monday, February 02, 2009 10:50 PM
In my past article I wrote about CSS framework. I used YUI grid, but I'm not totally satisfied with it, so I'm looking around to find a new CSS Grid to use.
Today I read this post on Noupe and I found something quite interesting:
- SenCSs that can give you a basic styling for forms, common classes and typographic standard across browsers, it's very clear and basic and does not have grids;
- From the comment that I had read and by what I saw the 960 Grid System and Blueprint are very good and rich CSS grid framework.
- YALMseems good too, but you have to purchase the license if you want to use for commercial purpose.
SenCSs introduced a good idea: it builds a library of common element, but it is not a full grids system.
As I already said in a
previous post, I think that CSS frameworks are very important because they allow a fast and easy start, but you have to chose the one is most suitable for your style of development. So, if you are not already use one, try to find some time to look for alternatives and play around a bit with them before you use them in a real project.
Technorati tags: frameworks, CSS, SenCSs, 960 Grid System, Blueprint, YALM