jordisan.net blog: sobre lo humano, lo divino... y lo técnico: IN ENGLISH

METAeuFORiAS: Google is like a big brain

jordisan — Thu, 07 May 2009 19:20:42 +0000

We may consider Google as a “big eye” not only because of the images provided by Google Maps and Google Earth but also because it seems “to see” everything that is written on the web. But in fact the way Google indexing process works is more like a huge brain.

[…] keep on reading in METAeuFORiAS

D'oh! The attachment! A simple solution

jordisan — Wed, 18 Mar 2009 16:14:50 +0000

A simple and easy solution to those forgotten attachments in e-mails. Hasn't it happened to you?

Has this ever happened to you? You want to send a file to someone, so you write a nice e-mail explaining what it is; then you click the send button, and some minutes later you receive the reply: "ok, very nice, but … where's the attached file?".

Yes, you forgot to attach the file. It's a common but hard to avoid problem; a good rule is always attach the file before writing the e-mail, but aren't there any better ways to avoid this?

Some systems, like GMail or Thunderbird, have options to alert you when you try to send an e-mail which includes specific words ("file", "enclose", "photo", …) but has no attached files. It's a nice idea, but far from perfect: you will still miss files if the system doesn't detect these words, or you will get an annoying alert about an attachment you don't want to send.

A simple solution

Here's a simpler solution: the user gets notified of how many attachments the e-mail has when he/she is about to send the e-mail, not using annoying alerts but simply including that information in the send button, like this (GMail example):

So when you are going to send the e-mail, you realize that the message has no attachments. Simple and effective, don't you think so?

(sigue …)

A (better) Javascript badge for Twitter

jordisan — Thu, 28 Aug 2008 17:23:17 +0000

Here you are a HTML/Javascript badge for showing your Twitter updates. Much better than the one at Twitter's web page!

So you want to show your latests Twitter updates in your web page? You can use Twitter's badge, but the look isn't great, and URLs neither @replies inside updates are not clickable.

If you want a better badge including clickable URLs and @replies (like the one at the left column of this page), just follow these steps:

(sigue …)

Wordpress: single posts using different language

jordisan — Mon, 04 Aug 2008 20:17:43 +0000

A technique to include single Wordpress posts in a different language than the main language of the blog.

Publishing a multilingual blog is a hard task; you have to translate and maintain every single post, besides translating all the interface. But what about if you have a simple monolingual blog, and occasionally want to include a post using a different language? You can just write the title and the content in that language, but, as W3C guidelines says, additionally you should…

Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). [Priority 1]

So here you are an easy way to mark a single post using a different language, using custom fields in Wordpress:

1. Modify your template file(s) (tipically single.php, index.php, archive.php) where the following piece of code appears (the div block containing every single post):


<div class="post" id="post-<?php the_ID(); ?>">

Modify them by adding the highlighted code (to check if there's a custom field called lang for that single post and include it as the language of the post, if not empty):


<div class="post" id="post-<?php the_ID(); ?>"<?php $custom = get_post_custom_values('lang'); if ( $custom != '' ) echo ' lang="'. $custom[0] . '"'; ?>>

2. For every single post written in a different language than the blog main language, add a custom field called lang and assign it the post's language code ('en' for English; 'es' for Spanish, …)

3. And that's all. Now, every post may be identified with its own language. Of course, you don't need to include that field if the language of the article is the same language than the blog, as long as the main language is identified in the header of the web page.

Please, let me know it this works for you or if you find any bugs or improvements.

Where does this wallpaper come from?

jordisan — Fri, 06 Jun 2008 16:51:36 +0000

Here you have a nice wallpaper for your desktop:

(click to enlarge)

Can you tell where does this picture come from?

What about this usability logo?

jordisan — Sat, 10 Nov 2007 19:27:47 +0000

Sometimes I have looked for an usability logo or icon, without luck. Hmmm, interesting! We have icons for almost every other issue, but why not for usability?

Let me suggest these:

Ok, usability specialists know icons and logos are overused in many sites, and they're not really important for the user; it should be so natural than there's no need to say "we care for usability". Anyway, I think it would be a good idea having a logo to identify sites related to usability aspects, or maybe to identify sites that specially care about those issues.

The teapot is from Don Norman's book 'The Design of Everyday Things', and it's sometimes used (with different designs) in presentations, web sites, etc. The 'u' is supposed to be the handle of the teapot so as to make it more usable. Wait! It's not a great logo if I have to explain this

You get the idea, don't you? Now, remember I'm not a graphic designer and leave your opinions in the comments (and feel free to use them if you want to, of course).

No more double submits in web forms

jordisan — Sat, 14 Jul 2007 20:30:00 +0000

Usually, submit buttons in web forms should be clicked just once; but many users click them twice or more. Why?

Because they're used to launch actions by double clicking (as on Windows icons).
Because the server doesn't replies instantantly, and they click again "just to see if something happens".

What's the result? The form data is sent twice to the server, and users usually don't realize it; they just get the response to one of the submits. Try this simulation to see what happens when submitting several times the form before the server response arrives:

This is not a big issue if it's, for instance, a search form: the query is being launched twice but the user simply gets the result. It may be annoying if someone is receiving the same mail several times just because users are submiting several times the contact form. And it's a real big problem when the user is submiting a payment (you can be pretty sure they don't want to pay twice the same object!).

The solution

There's an easy solution for that problem! Simply disable the button just after the form is submitted, and you can change the button text too. The result is something like this:

This is done using the onsubmit form event:

<form onsubmit=document.forms['formname'].submitbutton.disabled=true;
document.forms['formname'].submitbutton.value='Sending...';" action="action" name="formname">
  <!-- some form controls here -->
  <input value="Send" name="submitbutton" id="submitbutton" type="submit">
</form>

With this technique, you achieve two positive effects:

avoiding the double submit problem; and
giving feedback to the user confirming the submit

Of course, there's no perfect solution. If JavaScript is disabled at the browser, it doesn't works; if it's really important avoiding multiple submits (for instance, when it's an economical transaction), it should be done at server's level.

It's really simple to use and without negative effects. Try it if you are really tired of multiple submits and tell me how it goes!

Something I still miss in Google Analytics

jordisan — Sun, 01 Jul 2007 18:05:00 +0000

Google Analytics has a nice new interface, much more intuitive and usable, but I still miss something I think it would be really usefull: an integrated calendar of events.

I can select a range of dates at Google Analytics and get different statistics: visits, unique users, etc. But there are many events (internal and external) that may affect that data. For instance:

Changes at the site: contents, layout, etc.
Changes in Google Analytics configuration (for instance, in filters)
Google Adwords campaigns linking to that site
etc, etc.

Any webmaster would be happy to know how those events are related to the statistics, wouldn't they?

How could Google do that? We already have a solution: Google Calendar. So we simply would associate a site monitorized by Google Anlytics to a calendar in Google Calendar. A webmaster could add events to that calendar, and they would be shown at Google Analytics.

Here's an example; this graph shows a decrease in the number of visits on June, 2nd:

Hmmm… What happened that day? Oh, maybe that new filter to exclude inner visits. With the feature I suggest, I would link the Google Analytics account with a Google Calendar which includes events related to the site, like this:

(sigue …)

A valid (X)HTML Flash badge for Twitter

jordisan — Sat, 12 May 2007 02:41:03 +0000

Este artículo está en inglés; supongo que la mayoría no tendréis problemas en leerlo. De todas formas, espero escribir un poco más adelante sobre Twitter; si no quieres esperar, puedes leer alguna página que explique qué es Twitter. O, más fácil aún, regístrate y podrás añadirme para saber qué estoy haciendo en cada momento.

I have recently inserted the Flash badge for Twitter in my site; but the original code offered by them is not valid HTML. So why not use code that passes validation? Here it is:

<div style="width: 176px; text-align: center">
 <object width="176" height="176" title="what am I doing... (Twitter badge)" type="application/x-shockwave-flash" data="http://twitter.com/flash/twitter_badge.swf">
  <param value="http://twitter.com/flash/twitter_badge.swf" name="movie" />
  <param value="color1=255&type=user&id=USER_ID" name="flashvars" />
  <param value="high" name="quality" />
  <param value="twitter_badge" name="name" />
  <param value="always" name="allowScriptAccess" />
  <param value="transparent" name="wmode" />
  <param value="http://www.macromedia.com/go/getflashplayer" name="pluginspage" />
 </object>
 <a style="font-size: 10px; color: #0000ff; text-decoration: none" href="http://twitter.com/USER_NAME">follow USER_NAME at http://twitter.com</a>
</div>

And the result is (using my own user data):

follow jordisan at http://twitter.com

Just some comments:

Don't forget inserting your actual USER_ID and USER_NAME (and your preferred color1 parameter if you want to); you can get them at Twitter's badges page.
The & strings are not part of the URL but the correct way to write ampersands in HTML code; more information about ampersands in URLs can be found here.
More information about inserting Flash using valid (X)HTML can be found here.