Alberto Fortes

si, estoy hasta los…
[Gracias David]

Las nubes de tags se pueden hacer en listas, listas ordenadas, párrafos, span o sencillamente con “aes” flotantes. Yo ya las he hecho de todas las formas y colores posibles, pero muchas veces me encuentro con que el cliente o desarrollador me dan su opinión pensando en que la suya es la manera correcta. Me ha pasado que entregando las nubes de tags en listas, de esta forma:

<div id="tagCloud">
   <ul>
      <li><a class="tag_7" rel="tag" href="#">CSS</a></li>
      <li><a class="tag_1" rel="tag" href="#">xhtml</a></li>
      <li><a class="tag_5" rel="tag" href="#">Ajax</a></li> 
      <li><a class="tag_1" rel="tag" href="#">accesibilidad</a></li> 
      <li><a class="tag_5" rel="tag" href="#">diseño de interacción</a></li> 
      <li><a class="tag_3" rel="tag" href="#">usabilidad</a></li> 
      <li><a class="tag_4" rel="tag" href="#">PHP</a></li> 
   </ul>
</div>

Me han dicho que no la hasga así porque blablabla y me las han pedido sencillamente con “aes”. pero a veces cuando las he presentado sin listas, esto es así:

<div id="tagCloud">
   <a class="tag_7" rel="tag" href="#">CSS</a>
   <a class="tag_1" rel="tag" href="#">xhtml</a>
   <a class="tag_5" rel="tag" href="#">Ajax</a>
   <a class="tag_1" rel="tag" href="#">accesibilidad</a>
   <a class="tag_5" rel="tag" href="#">diseño de interacción</a>
   <a class="tag_3" rel="tag" href="#">usabilidad</a>
   <a class="tag_4" rel="tag" href="#">PHP</a>
</div>

Me han pedido luego que las haga con listas.

Luego están los frikis que las hacen con listas ordenadas, que sin que nadie se moleste, me parece que es ya mear fuera del tiesto.

Como suelo decir cuando surge esta discusión, nos metemos en el terreno de la “metafísica del marcado semántico”, no tengo muy claro de que desde el punto de vista semántico exista una ventaja real de una respecto a la otra, seguramente me equivoque, pero es mi opinión, y al final la hago al gusto del consumidor, como si de un entrecote al punto se tratara. Yo personalmente suelo hacerla con aes porque me ahorra simplemente unas líneas de código, tan pocas que ni siquiera merecen una defensa real.

Pero realmente me interesa muchísimo saber la opinión de los demás, realmente quiero aclarar de una vez si existe una ventaja real de una sobre la otra.
¿Y tu como haces las nubes de tags (tag clouds)?, y ¿Por qué?

Dice el blog de google que han desarrollado un nuevo algoritmo capaz de indexar contenidos textuales, tales como textos, menús, botones o banners.
Vamos una de cal y otra de arena.
Es una magnífica noticia que sitios web en flash puedan indexar, y contenidos antes invisibles empiezen a ser visibles. Todavía hay mucha web en flash y esto supone un gran adelanto.
Lo malo sería que se retrocediera tanto camino conseguido. Uno de las grandes hitos conseguidos por los estandaristas, separar contenido de presentación, algo imposible en flash, puede verse afectado: ¿Qué pasara cuando el típico cliente hortera que quiere mariconadas en flash se entere de que flash sindica algo? Y digo algo, porque no me creo que flash indixe jamás a más de un 10%, al menos en muchos años.
Tendremos que seguir convenciendo acerca de que tecnología se adapta a sus necesidades, pero ahora los horteras tienen un as en la manga.
Por cierto no quiero decir que usar flash sea de horteras, al contrario flash es diseño puro y la mayoría de los sitios web en flash son auténticas maravillas desarrolladas por grandísimos profesionales y creativos. Me refiero a hortera cuando quieren una web en flash porque no saben hacer otra cosa y se rinden a un cliente que lo único que quiere es musiquita, intros en flash y banalidades varias. Para ejemplos varios de a lo que me refiero podeis daros una vuelta por QueWeb.
Quizá resurja de nuevo la lucha por convencer al cliente de que sitio web con contenidos igual a tecnología de desarrollo basada en estándares web. Los dioses no lo quieran.

(Lo que sigue es un borrador de un epígrafe de una extensa guía de usabilidad. Se admiten comentarios para mejorarla. ;-)

La regla de los tres clics forma parte del folklore de la usabilidad web, y sostiene que cualquier informaciónen un sitio web debe ser accesible desde la página principal en tres o menos clics.
Es una regla a tener en cuenta, aunque sólo en la mente ya que los estudios realizados por el Nielsen Norman Group demuestra su ineficacia cuando la arquitectura de la información se ve forzada para cumplir esta regla. Así pues, esta regla no debe utilizarse si para ello hay que forzar la estructura.
Los estudios del Nielsen Norman Group demuestran que la habilidad de los usuarios para encontrar productos en un sitio de comercio electrónico aumentaba un 600 por cien después de rediseñar un sitio web para que los productos se encontraran a cuatro clics en lugar de tres, ya que los usuarios no tenían que pensar al hacer clic.
El principio base del diseño de interacción será el de no hacer pensar a los usuarios, si por ahorrar pasos, el usuario tiene que interpretar el enlace, entonces la regla de los tres clics se convierte en un error en lugar de una ventaja.
Aquí tiene mucha importancia la miga de pan (breadcrumb) de la web, de forma que el usuario sepa dónde se encuentra en cada momento y cual es la categoría padre de dónde se halla en la actualidad, y pueda volver sobre sus pasos con tan sólo un clic.
Las migas de pan no son exactamente las migas de pan sobre las que Pulgarcito podía desandar el camino recorrido, para ello están ya el botón de atrás o adelante del navegador, son más bien el “Usted está aquí” de un mapa, donde se muestra la situación exacta dentro de la estructura del sitio. De hecho, los usuarios pueden no haber navegado hasta la página actual, sino que pueden haber llegado a través de un enlace o un buscador, de esta manera la miga de pan como flechita de “usted está aquí” de un plano adquiere su verdadero valor.
Una vez más debemos no hacer pensar al usuario y hacer la cosas como él espera que ocurran. La convención es que las migas de pan tengan esta forma:

Como afirma Yusef Hassan, Las migas de pan deben tener siempre esta forma, o al menos una muy parecida, con un texto “Usted está aquí:” o “Estás aquí:” o similar, con las secciones separadas por el símbolo > y con un hipervínculo relativa a la misma. Puede utilizarse cualquier símbolo que denote jerarquía, como una flecha, pero utilizar símbolos que carecen de esta, como | o – es un serio error ya que estos símbolos denotan una relación de igualdad o equivalencia jerárquica, por lo que si bien pueden utilizarse en menús, nunca deben utilizarse en breadcrumbs.
No debemos apartarnos de esta forma de presentación porque es la manera en que un usuario espera encontrarse una miga de pan, nada más verla el usuario dice “mira una miga de pan”, aunque realmente no sepa que este elemento se llama así.
En una prueba real, el usuario Juan, de 26 años, músico de profesión, con estudios medios, usuario medio-avanzado que pasa una media de 4 horas en internet diarias, ha respondido: “Esto es para saber donde estás… para volver a las secciones más rápidamente.”
Se han presentado tres ejemplos:

A)

B)

C)

De los tres ejemplos el óptimo ha sido el primero, el usuario lo ha visto e identificado en seguida. El segundo pese a estar bien posicionado se ha quejado comentando que “no se vé bien, el fondo es muy oscuro”, a pesar de ello lo identificó y supo usarlo. El ejemplo C, presenta un grave problema y de hecho pese a estar bien contrastado el color del texto con el del fondo, el usuario comentó “Se ve mal, no está bien puesto”, simplemente por el hecho de que el usuario espera encontrárselo en la parte derecha de la pantalla (su izquierda), debajo de la barra de navegación principal.
El ejemplo C puede convertirse en una miga de pan ejemplar con sólo posicionarlo bien, y respetar márgenes y rellenos de celda (padding), de forma que guarde una sincronía de la separación de los elementos y su disposición en la cuadrícula, como por ejemplo:

[...]

****
Bibliografía:

NIELSEN, Jakob y LORANGER, Hoa, Usabilidad: prioridad en el diseño web, Anaya Multimedia, Madrid, 2007
GARRET, Jesse James, The Elements of User Experience. User-centered design for the web, New Riders, New York, 2003
KRUG, Steve, No me hagas pensar, Pearson, Madrid, 2001
LYNCH, Patrick y HORTON, Sarah, Manual de estilo web. Principios de diseño básico para la creación de sitios web, Gustavo Gili, barcelona, 2004
WODTKE, Christina, Information Architecture: Blueprints for the web, New riders, new York, 2003
HASSAN MONTERO, Yusef y MARTÍN FERNÁNDEZ, Francisco, Elementos de navegación y orientación del usuario, No Solo Usabilidad journal, nº 1. 1 de Diciembre de 2002. ISSN 1886-8592. (http://www.nosolousabilidad.com/articulos/orientacion_usuario.htm)
GARRIDO, Marcelo, Antes de la usabilidad, dos claves: propósitos y destinatarios., (http://www.capire.info/2008/06/18/antes-de-la-usabilidad-propositos-y-destinatarios)
PRAVIA, Ramón, Migas de pan, (http://simplelogica.net/caoticoneutral/?p=7)

Ser autónomo es una suerte de declaración de intenciones, es como emanciparse del Estado de bienestar. Y encima, salvo que cierres la empresa que has creado, no hay vuelta atrás…
Ser emprendedor, o autónomo, en este pais, es un atrevimiento.

Luis Alonso-Lasheras Alén, en Las paradojas de ser autónomo

• http://ascarida.net/html5/
• http://html5.esbudellat.net/
• http://html5.mcdave.net/
• http://html5.scriptia.net/
• http://html5.striptm.com/
• http://www.albertofortes.com/html5/

¿Y tu que dices?

[Vía Dizque]

Tra obra maestra de Sin accesorios:

A mi que ya me mataron de éxito, y este es mi último mes como autónomo, los transportistas no me dan mucha pena, la verdad

Por cierto mi gata se tiró del sexto piso la semana pasada, está viva pero con una pata destrozada… la culpa es de Zapatero, fijo ;-)

¿Qué no me crees?
Entra en el club karacol de MTB de Madrid.
Que alguien le diga al webmaster que quite ese blink, por Dios.

En un artículo de José Pita me he encontrado con la noticia de la renovación de la web del Ayuntamiento de Granada.
Para que no nos sorprendamos, las espectativas se han cumplido: la web está mal hecha: errores de código, sin doctype, imposible de navegar sin javascript, imágenes o css desactivado, hojas en estilo en cascada propias de un novato (lo que no está mal en si, pero no es correcto para una web institucional), una de las descripciones en el head más estúpidas jamás vista…
Pero mi lo que me ha chocado es una de esas cosas que se hacen en aras de ser más experto en accesibilidad que nadie y que revela que no tienes mucha idea de lo que estás haciendo, esto:

A parte del fallo en la maquetación de las listas, que es lo de menos a estas alturas, es esto lo que me causa desconcierto:

Se trata de un configurador de tamaño de pantalla, dónde puedes elegir si quieres que la página web ocupe el 100%, el 60%, 1000px o 1100px o la configuración estándar a 800px…
Mmmm ¿me puede decir alguien a que clase de experto se le a ocurrido esto?

Cuando un usuario llega a una página web quiere encontrase con la información que busca o llegar a ella en la menor cantidad de pasos y con la mayor claridad posible. El hecho de que el diseño de la página sea flexible, ayuda y mucho pero eso no significa, ni mucho menos añadir semejante funcionalidad extra: el diseño debe o debería ser flexible pero no superconfigurable, ya de paso, ¿por qué no cambiamos el fondo de color y lo ponemos rosita o verde fluorescente?. Sencillamente porque eso no es serio, está bien para tu página, o para una web desenfadada pero ni muchos menos para el ayuntamiento de un ciudad seria.
Por si fuera poco, dicha herramienta está oculta tras un icono sin texto en una barra de herramientas sin texto que acompañe a la función: Los iconos deben apoyar el referente del anchor del enlace, pero no sustituirlo, un icono que represente la idea y apoye el texto al que acompaña, si está bien elegido no deja de ser un acierto, pero eliminar el texto en pro de ese icono, es errar el tiro de una forma epectacular.

¿Más cosas?

cuando activas otra configuración de pantalla diferente a 800px la barra de herramientas y buscador se desmaqueta, ahí no han sabido aplicar bien las css.

El buscador: mal muy mal. Al menos han sabido dejar espacio para 15 caracteres, lo que te deja escribir una frase, pero una vez que le das a esa flechita el buscador desaparece. Muy mal, por dos cosas:

1. El botón de buscar debería ser un botón de con la palabra buscar dentro, y ni mucho menos un flechita, ya estamos dejando otra vez la funcionalidad en manos de la intuición, déjate de intuiciones: que haya un botón con el texto “buscar” dentro,


2. Cuando aceptas la busqueda, desaparece la cajita del buscador. ¿Por qué? Esta claro que la búsqueda avanzada sólo debería ofrecerse cuando ya has buscado algo, eso es un acierto, pero ocultar la búsqueda principal es un gasto innecesario. Y mucho menos cuando posicionas mal y haces mal una búsqueda avanzada.
   La búsqueda avanzada debería ofrecerse antes de los resultados, de la forma menos intrusiva posible y con la posibilidad de ocultarla, y desde luego esta debe ofrecer ayuda ya que si realmente no va a existir una mejora, mejor no ponerla. Además está muy mal estructurada, con los inputs y enlaces ordenados anárquicamente, simplemente, la búsqueda avanzada o está maquetada.



Otro error de libro es que el logo no ofrezca un acceso directo a la portada. Yo soy un usuario experto , he navegado mucho y paso más de 12 horas al día delante de un ordenador conectado a internet, y os juro que para volver a la pantalla inicial he tenido que buscar hasta pinchar en la miga de pan. Lo primero que he hecho es intentar pinchar en el logo, nada. Luego he ido al menú de navegación, pero no había enlace a la home. después he visto la miga de pan y he accedido. Unos minutos más tarde he visto ese icono de una casita junto a la flechita del buscador. uff vaya torpe que soy. Si yo he dado tres pasos, no quiero saber los que dará un usuario inexperto.

Y para terminar: aumento del texto. Aquí aprueban, con un 5 pelado pero aprueban al menos. Probad a aumentar el texto, todo se desencaja, pero no demasiado. Además tienen un acierto, no ofrecen esos innecesarios iconos de aumentar o disminuir tamaño de letra: para eso ya están los navegadores y una maquetación tipográfica basada en em´s. ¡Bien!, pero ya puestos a preocuparse por tamaños de pantalla, por qué ofrecer una maquetación flexible, de manera que cuando el texto aumente las áreas se expandan.
Volvemos al inicio, mal muy mal: la caja de herramientas para cambiar el tamaño del área de la pantalla es un gasto innecesario de esfuerzos, para eso, hacer las cosas bien. ¿O es que los desarrolladores de la nueva web no están cualificados para ello?

“En el 2004, cuando la construcción estaba en pleno boom, el sector inmobiliario pidió al gobierno que no interviniese en el mercado de la vivienda al que calificaban de un sector fuerte y sólido. De haberse tomado medidas entonces, tal vez una parte del ajuste actual podría haberse evitado.

Después de años de crecimiento desmedido de los precios y una construcción de viviendas por encima de las necesidades de nuestra sociedad, ahora el sector se muestra preocupado ante la negativa del gobierno a influir en el ajuste inmobiliario y critican a Solbes por su negativa a acudir al rescate”.

Interesante reflexión de Jesús Encinar de obligada lectura.