Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for octubre, 2007

Usabilidad: El uso de la voz pasiva

Fecha de publicación: 2007/10/23

Según Jakob Nielsen el uso de la voz pasiva en los contenidos de una web es poco adecuado:

Active voice is best for most Web content […].

Y propone algunos ejemplos:

  • Worst: The passive voice should be avoided.
  • Bad: The passive voice should be avoided by writers.
  • Better: Writers should avoid using passive voice.
  • Best: Writers should use active voice.

Los mismos ejemplos pero en idioma español:

  1. Peor: La voz pasiva debe ser evitada.
  2. Malo: La voz pasiva debe ser evitada por los autores.
  3. Bueno: Los escritores deben evitar el uso de la voz pasiva.
  4. Mejor: Los escritores deben utilizar la voz activa.

Estos ejemplos muestran en primer lugar que es mejor utilizar voz activa que voz pasiva. De esa forma el usuario comprenderá con mayor facilidad y rapidez el texto.

En segundo lugar queda reflejado que es mejor el uso de frases afirmativas, como el ejemplo número 4, que la utilización de frases negativas, como en el ejemplo número 3.

Y en tercer lugar, cuando se usa la voz pasiva es mejor que aparezca el complemento agente (quien realiza la acción), como en el ejemplo número 2, ya que ayuda un poco más a comprender la frase.

Voz pasiva en los encabezados

Active voice is best for most Web content, but using passive voice can let you front-load important keywords in headings, blurbs, and lead sentences. This enhances scannability and thus SEO effectiveness.

La voz activa es mejor para los contenidos, pero en encabezados y otros textos destacados puede resultar más adecuado el uso de voz pasiva, ya que las primeras palabras de esas frases, que serán en las que más se fijen el usuario y los motores de búsqueda, tendrán mayor relevancia y darán más información.

Nielsen propone el siguiente ejemplo:

Yahoo Finance follows all 13 design guidelines for tab controls, but usability suffers due to AJAX overkill and difficult customization.

A primera vista parece que se trata de información sobre la aplicación Yahoo Finance, no sobre sus contenidos, como podría parecer a primera vista.

El mismo contenido que antes pero en voz pasiva:

13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers due to AJAX overkill and difficult customization.

En este segundo ejemplo se usa la voz pasiva y se consigue el efecto deseado: resaltar que se trata de un artículo sobre la aplicación.

Conclusiones

  1. La voz activa es la forma adecuada en el texto de contenido.
  2. La voz pasiva es adecuada en encabezados, enlaces a otros contenidos y otras frases destacadas.

Referencias y enlaces relacionados

Datos del artículo:

Borrar carpetas y archivos en Tortoise CVS

Fecha de publicación: 2007/10/22

Tan sencillo como darle a "Eliminar" y después a "Confirmar".

Datos del artículo:

RDP en Linux

Fecha de publicación: 2007/10/17

Es posible utilizar el protocolo RDP en Linux.

Basta con instalar rdesktop y ejecutarlo (en la ayuda de la aplicación hay más información sobre opciones no utilizadas en este ejemplo):

rdesktop -g 1192x700 -a 24 192.168.0.25

En este caso la resolución es de 1192×700 y 192.168.0.25 sería el nombre del servidor.

Captura de pantalla de Windows XP en Linux mediante RDP

Datos del artículo:

Cellspacing mediante CSS

Fecha de publicación: 2007/10/15

El atributo cellspacing en las tablas HTML es prescndible.

Supongamos un cellspacing que valga 7px:

<td cellspacing="7">Contenido de la celda</td>

En CSS se prescinde del atributo, y se usan las propiedades border-collapse y border-spacing:

table {
border-collapse: separate;
border-spacing: 7px;
}

Hacer esto por CSS tiene la ventja de poder definir la separación por arriba, por abajo, a la izquierda y a la derecha:

table {
border-collapse: separate;
border-spacing: 7px 1px 2px 1px; /*arriba, derecha, abajo, izquierda*/
}

Enlaces relacionados

Datos del artículo:

Usabilidad en los sitios web de las universidades de Galicia

Fecha de publicación: 2007/10/13

Hace casi un año tuve que presentar un trabajo para una asignatura de la licenciatura en Documentación. Dicho trabajo debía ser planteado como si de una tesis doctoral se tratase, pero con la limitación temporal que imponía el que la asignatura fuese de un solo cuatrimestre (entre unas cosas y otras había un par de meses, y si además se añade que me gusta dejar estas cosas muy para el final…).

Se me ocurrió como tema la usabilidad en los sitios web de universidades públicas gallegas (la región la escogí totalmente al azar). El análisis de esos sitios web, por la limitación de tiempo, no fue muy fiable, pero si conseguí, creo, una interesante lista de puntos de verificación de usabilidad.

Así que pongo ese documento aquí, por si a alguien le resultase interesante (bajo la misma licencia Creative Commons que este sitio).

Descargar Evaluación de usabilidad en sitios web de universidades de Galicia (2007) en formato PDF (1,2 MB). También disponible en formato Open Document (635 KB).

Datos del artículo:

Enlaces como bloque en Internet Explorer 6

Fecha de publicación: 2007/10/03

El problema

Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.

Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block; .

En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.

En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}

La solución

Darle una anchura fija al enlace:

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}

Ejemplo de funcionamiento

Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.

Enlace sin anchura definida

Enlace con anchura definida

Datos del artículo:

Información del sitio