April 2009 Blog Posts
Monday, April 20, 2009 12:11 AM
Some weeks ago, I discussed about how to put a backround image in a hr for IE with jQuery.
I used the word "semantic" in not clear way, so I discussed, in the comment, whether HR is a semantic tag or not.
When I designed the code of my blog, I choose some tag instead of others, why?
We usually forget the history of web and HTML language, when websites were only simple white pages with text and images. A lot of time has passed and we got used to complex graphic design.
We put all of our attention in it and when we design the code, we focus only in the graphic design and in building it in the best possible way. But we often forget to choose the right tags to translate the design in the code.
Every single element of the layout has a meaning and we can choose the right tags to translate the sign language of design in our code.
For example we use to identify our title with H1, H2, etc, but when we have a phrase, we have to think about: what type of sentence is it? How can I translate it in the correct XHTML to show its meaning throughout code?
This is my design:
I translate this design in XHTML as:
</h2>
<small>5 Giugno 2008 </small>
<div class="entry">
<p>
<strong>Provenienza</strong>
: Isole Mauritius
<br/>
<strong>Portata</strong>
: Contorno
</p>
<p>La ricetta più richiesta dai nostri amici! Viene benissimo da portare alle cene estive o invernali che siano.</p>
<h3>Ingredienti x 4 persone</h3>
<ul>
<li>4 manghi verdi</li>
<li>2 cipolle</li>
<li>3 spicchi d’aglio</li>
<li>10gr di zenzero</li>
<li>2 peperoncini verdi piccanti</li>
<li>1/2 cucchiaino di senape</li>
<li>1 cucchiaino di zafferano</li>
<li>4 cucchiai di olio</li>
<li>aceto</li>
<li>sale</li>
</ul>
<h3>Preparazione</h3>
<p>
Sbucciare i manghi e tagliarli a fiammifero. Privare i peperoncini dei semi e tagliare anche loro a fiammifero. Preparare un trito di aglio e zenzero.
</p>
<p>
In una padella far saltare le cipolle e poi aggiungere il trito, i peperoncini e lo zafferano stemperato in un cucchiaio di acqua calda. Aggiungere quindi i manghi, l’aceto, la senape e il sale. Rimestare ancora qualche minuto e servire con del riso bianco a chicco lungo (tipo
<a href="http://www.cookingpiyo.com/2007/06/03/basmati-chawal-riso-basmati/" title="riso basmati">basmati</a>
).
</p>
</div>
Probably this isn't the only way to write this code and maybe, it isn't the better way, but I try to find the tags that show the meaning of the information that they have inside. What is important here is the decision, the process that we made to choose the right tag to match content and design.
Other example is to correct our behavior to use
<B> in any case: we could use
STRONG or
EM instead of it!
The same thing happens with the tag SPAN: it isn't a semantic tag, we can choose a better way to translate the phrase or the word inside of it focusing on the meaning of the role that it has inside the contest.
This is only simple and common example, but there are a lot of forgotten tasg in the (X)HTML as
TH,CAPTION, DT/DD, SUB and
SUP and so on: finding the right way to use them is up to you!
Technorati tags: semantic tags
Monday, April 06, 2009 11:45 PM
Recently I read Ambient Findability again. I think that this book is still good today, the same as when it was written, in 2005.
At page 45, Peter Morville, the author, says: "Technology moves fast. Evolution Moves slow."
He refers to Calvin Moores and put our attention to the social context of the users that need to retrieval information.
What's the deal with User interface design?
A lot of famous designer tell to us that the most important thing is designing simple interface. But simple is not the same of "for dummies". It's like something that follows our instinct.
A lot of our action are not immediately rational, we move fast at the beginning of an action (like to retrieve an information from a system) and than we use our rationality to understand it.
The designer has to stay in the middle: the design must be easy to understand and must allow an easy start of operations, but then must allow the user to wander through the design and use his intellect to understand the next steps.
It is very difficult understand the borders and stay within them. There are some books and authors that mark this way to me.
Here some of them.
The theory of Pirolli about Information Foraging. He says that the way humans search information is the same as our ancient instinct to search food and adapt ourselves to the ambient to survive. Information in our daily life is essential to work and live.
Many people that work in the UI design doesn't know him directly, but thought the words of someone else. Reading him is more interesting and better than through the books and posts of many other more famous author that cite him.
- Ambient findability, the chapters about human behavior
- Bruno Munari. He talks about simplicity in design with enchanting way. Anyone of his books about design is good!
- Information Foraging, Peter Pirolli
These tree books are for me more important and useful than the thousands books from famous designers: they let me find my way to design in simplicity without direct laws.
Technorati tags: UIX