Derechos Humanos

General

Esto es algo que hasta hace muy poco tiempo en Chile parecía imposible y que personalmente jamás pensé que podría ver. Hoy se notificó de sus condenas y encarceló a los máximos diregentes de la disuelta Dirección de Inteligencia Nacional, DINA, responsable bajo mando directo del General Augusto Pinochet de las más aberrantes violaciones a los derechos humanos cometidas en nuestro país durante la dictadura militar. Los arrestados son Manuel Contreras (12 años), Marcelo Moren Brito (11 años), Miguel Krassnoff Marchenko (10 años), Fernando Laureani (5 años) y Gerardo Godoy (5 años).

Esto no es un juicio político, ellos fueron enjuiciados y encontrados culpables, en este caso, de la desaparición desde enero de 1974 hasta la fecha de Miguel Angel Sandoval, un militante de izquierda. La desaparición significa que, como más de 3.000 otras personas en Chile y otras en latinoamérica principalmente durante los 60 y 70, fue asesinado y su cuerpo escondido o destrozado de modo que nunca volviera a aparecer. Los ahora reos tienen cada uno una serie de otros juicios en curso por causas de derechos humanos.

Comparto esto con ustedes porque la violación a los derechos humanos no tiene fronteras. Así como resulta horrible cualquier atentado contra la dignidad y vida de las personas en cualquier parte del mundo, sea 9/11, 11-M o aquéllas producto del golpe de estado de 1973.

No todo es acerca de las máquinas y el web.

Más información en Google News Chile.

Las siguientes imágenes son fotografías que tomé con mi cámara digital de la cobertura de esta noticia por diversos canales de televisión chilenos.

DSCN7967

La imagen muestra la llegada de la caravana que transportaba a Manuel Contreras a la cárcel. Un número importante de personas esperaba su llegada para celebrar su arresto y condena.

DSCN7973

Otro canal cubre la noticia, la caravana que transportaba a Manuel Contreras llegando a la cárcel.

DSCN7976

Ya dentro de la cárcel Contreras es bajado de la camioneta.

DSCN7977

Contreras es conducido hacia el interior de la cárcel.

DSCN7991

Éste fue uno de los hombre más temidos durante los primeros años de la dictadura militar en Chile, entre 1973 y 1976.

Home Page e Internacionalización

General

homepage-icons

Ejemplos diversos de aplicación del ícono home page.

Estos días he estado ocupado resolviendo el diseño de un sitio. Mientras pensaba en una solución para el menú de navegación secundario, compuesto por elementos auxiliares como ayuda, contacto, en fin, aquellos elementos que entregan una funcionalidad diferente o complementaria a la de navegar contenido, me detuve a pensar en el ya clásico ícono de portada del sitio o home page.

Sucede que el ícono típico para representar la función de ir a portada o inicio del sitio se representa frecuentemente con una casa pequeña, simple, claramente reconocible. Sin embargo, su uso es una herencia directa del uso anglo, en que la casa, home representa la portada, home page. Pero, ¿qué significa eso para cualquiera que no sea angloparlante? Absolutamente nada. Nosotros no utilizamos el concepto de página hogar, y hogar del sitio para referirnos a la portada. Por lo tanto la metáfora queda invalidada.

Este es uno de esos clásicos problemas de internacionalización (i18n) en que sin pensarlo, asumimos como propios conceptos que no se aplican correctamente a nuestros contextos. La pregunta es ¿por qué lo hicimos, por qué asimilamos el concepto de home page tan fácilmente? Se me ocurre que se trata de una cuestión práctica: no puedo pensar en representaciones gráficas directas y simples para portada. Y hasta donde conozco, no hay muchas más variantes del concepto: página de inicio, página de entrada, menú (muy confuso!), página principal.

Para averiguar la frecuencia de uso y las aplicaciones del ícono home realicé una exploración no demasiado extensa, pero sí considerable. Revisé aproximadamente unos 100 sitios vinculados desde news.google.com, news.google.es, news.google.cl y una serie de directorios de yahoo.com y yahoo.es.

Lo primero que observé, y que seguramente debió haber sido algo obvio, pero no había reparado en ello, es la marcada tendencia a utilizar vínculos textuales en lugar de íconos. En general, los menús compuestos por íconos son muy pocos. En consecuencia, me costó bastante conseguir ejemplos de algo que supuse iba a ser más fácil. Esto, sin embargo, no desacredita el punto de fondo que estoy tratando, el uso de home en lugar de portada u otro término similar.

Como nota curiosa, me sorprendí con el uso de la palabra home como elemento de navegación en un par de sitios en que no se utilizaban íconos, para referirse a su página principal. No quiero que se me malinterprete, no tengo nada en contra del inglés y la adopción de neologismos cuando es apropiado. Pero creo que portada o página de inicio dejan bastante claro el concepto.

En concreto, las observaciones de mi revisión (completamente no-científica) son:

  • del total de sitios revisados, una minoría utilizaba íconos para su navegación;
  • las aplicaciones son diversas, en algunos casos sumado a la ambigüedad del propio concepto home los gráficos resultan casi incomprensibles;
  • la tendencia mayoritaria es a usar los términos portada e inicio;

Para ser honesto, no he resuelto el problema de encontrar una representación que me satisfaga. Y para este proyecto decidí no utilizar íconos, sólo un vínculo a portada.

Estrategias de Organización de CSS

General

El Principio

Desde que comencé a utilizar CSS, hace ya algunos años, he buscado formas más eficientes de estructurar las hojas de estilo. En el principio todo se reducía a una hoja de estilo (normalmente llamada principal.css,main.css o diferentes variantes) que internamente estaba organizada de modo que las definiciones de elementos de HTML (body, p, h1h6, etc.) estaban al principio, luego los IDs y finalmente las clases.

Aparece CSS 2

En algún momento, mientras comenzaba a incorporar elementos de diagramación y posicionamiento, las hojas se hicieron cada vez más complejas. La organización interna se hacía gradualmente más difícil de seguir y determinar los pesos de cada elemento en la cascada resultaba una tortura.

A la vez descubrí el potencial de CSS para generar opciones para distintos dispositivos de salida y comencé a incluir print.css, en la que desde entonces defino el estilo de impresión importándola con el atributomedia="print".

La Separación

El siguiente paso fue bastante lógico: separar el archivo principal en dos. Uno manejaría los aspectos básicos de estilo para los elementos de HTML, esencialmente fuentes, colores y tamaños. El otro se encargaría de la definición de elementos de diagramación y posicionamiento. De este modo se generaba una situación en la que la primera hoja, que seguía llamándose main.css, contenía casi exclusivamente CSS 1, y la segunda hacía fuerte uso de CSS 2. Esta estrategia inicial tenía mucho sentido para aislar a browsers antiguos como Netscape 4.x, más aún si lo combinabamos con el hack @import que éste no reconoce, por lo que esas definiciones de estilo le resultan invisibles, pero el usuario puede de todos modos acceder al contenido sin estilo, o al menos parcialmente estilizado. Esto es lo que llamamos degradación positiva o graceful degradation.

En ese momento ya coexistían tres archivos de estilo, main.css, layout.css y print.css. Con el uso y el tiempo surgió la necesidad de modularizar aún más esto y nacen hojas como forms.css para manejar exclusivamente los elementos de formularios.

Nace el Color

Actualmente estoy yendo un paso más allá: para agregar una capa adicional de abstracción o separación, estoy utilizando una hoja llamada color.css, en la que defino sólo los colores. Cuál es la ventaja? Sencillo, si quiero o necesito modificar la paleta completa de colores de un sitio, sólo tengo que modificar color.css. Esto facilita la tarea de proveer diseños alternativos, realizar actualizaciones rápidas e incluso modificar plantillas prearmadas para propósitos específicos, personalizándolas con colores propios.

Modularización

El concepto clave detrás de toda esta estrategia de manejo de estilos es la modularización: agrupar los elementos comunes y aislarlos de los demás para conformar estilos pequeños, fácilmente manejables y altamente reutilizables. Estos son conceptos prestados de programación, pero resultan sumamente apropiados en este contexto.

La modularización de los estilos no sería lo mismo sin una cuidadosa estrategia de manejo de CSS. Mi técnica favorita consiste en vincular sólo una CSS externa en el HTML mediante el elemento link:

<link href=”styles/main.css” rel=”stylesheet”
type=”text/css” />

De este modo el HTML permanece limpio y efectivamente separado de la presentación. Las demás hojas se vinculan desde el archivo main.css:

@import URL(“layout.css”);
@import URL(“forms.css”);
@import URL(“color.css”);
@import URL(“print.css”) print;

Esto último tiene una flexibilidad enorme: puedo agregar o quitar hojas de estilo sin siquiera modificar el HTML, porque éste siempre vincula sólo a main.css, lo que allí ocurra es harina de otro costal.

Cambios en Navegación de Amazon

General

¿Alguien más notó el cambio en Amazon.com? Aparentemente desde el 22 de Octubre se publicó un nuevo sistema de navegación global diferente del clásico sistema de pestañas. Parece ser que los cambios están siendo presentados a los clientes (he comprado varios libros en Amazon.com) y los usuarios nuevos ven la interfaz tradicional.

Jugando un poco con los parámetros he comprobado que se puede forzar la vista de categorías con esta URI.

Actualización: Aparentemente el mecanismo de despliegue es aleatorio, es decir, se presenta la interfaz nueva a un grupo de usuarios seleccionados al azar, por lo que la URI del párrafo anterior puede no funcionar.

amazon-nav-01

El antiguo sistema de navegación por pestañas de Amazon.com se había sobrepoblado haciéndolo recargado y menos eficiente que al principio [d].

amazon-nav-02

Nuevo sistema de navegación global en Amazon.com que reemplaza al tradicional sistema de pestañas [d].

El nuevo sistema presenta sólo dos pestañas, una con la etiqueta Welcome y la otra All Categories. La primera contiene opciones de navegación relacionadas con elementos globales como las tiendas internacionales, productos destacados, etc., en suma, un criterio transversal de contenidos. La segunda no tiene opciones secundarias, pero nos conduce a lo que puede ser el cambio más interesante: un sistema de categorías como el directorio de Yahoo! o Google con todas las áreas de Amazon.com.

amazon-cats-01

El nuevo rediseño de Amazon.com presenta un sistema de categorías que permite navegar todo el sitio [d].

El cambio me parece positivo hasta ahora, se observa un sitio más organizado y limpio. La estética del sitio continúa siendo la misma: la paleta de colores y los elementos secundarios son los mismos, el cambio es más bien en la navegación global.

Cabe señalar que el nuevo encabezado de Amazon.com incorporaba hace unos días una interfaz de búsqueda del recientemente lanzado producto de Amazon, A9.com, pero mientras reviso el sitio no puedo encontrarlo, es posible que haya sido removido.

Si te interesa revisar el sitio antiguo para constatar las diferencias, está disponible vía Internet Archive Wayback Machine.

Descripción de Imágenes

  1. Descripción de imagen 1: La imagen presenta un menú de navegación de pestañas formado por dos niveles, el superior muestra las categorías de navegacion principal y el inferior las opciones secundarias. El primer nivel contiene las opciones Welcome, Your Store, Books, Apparel and Accesories, Electronics, Toys and Games, DVD, Baby. La selección actual es Welcome, que presenta las opciones International, New Releases, Top Sellers, Sell Your Stuff.Las pestañas son una forma habitual de presentar muchas opciones alternadamente.
  2. Descripción de imagen 2: La imagen muestra el nuevo sistema de navegación de Amazon, que conserva las pestañas pero esta vez con sólo dos ítemes: Welcome y All Categories. La pestaña seleccionada esWelcome y las opciones al igual que en la versión anterior son International, New Releases, Top Sellers, Sell Your Stuff.
  3. Descripción de imagen 3: La imagen muestra el listado de categorías de Amazon.com dispuesto en cuatro columnas y dividido en dos secciones horizontalmente. La parte superior contiene productos y la sección inferior muestra servicios e información.

Google y Accesibilidad

General

Durante el desarrollo de una serie de sesiones de capacitación que estoy realizando como parte de una asesoría de accesibilidad he hecho más consciente algo que es evidente, pero no había terminado de racionalizar. Me refiero a la relación entre las prácticas de accesibilidad y la optimización para motores de búsqueda.

Sucede que en la medida que utilicemos prácticas simples de accesibilidad como el uso de gramáticas formales, de implementaciones tecnológicas que se degraden apropiadamente, no dependan exclusivamente de tecnologías de cliente o creamos sitios que consideren el uso de diferentes dispositivos estamos permitiendo a un rango mayor de usuarios que accedan a los contenidos. La clave está en que cuando hablamos de usuarios no sólo estamos hablando de personas: cualquiera que se dé el trabajo de revisar las estadísticas del servidor de cuando en cuando notará que gran parte de las visitas se deben a robots, web crawlers y otras alimañas. Una de ellas, la más importante en muchos aspectos, es Googlebot. Googlebot es el bot de Google, y es quien realiza gran parte del trabajo casi silenciosamente. Es él quien clasifica cada sitio, trata derelacionar los contenidos, y de asignar puntajes. Lo que nosotros usualmente vemos al buscar en Google es la interfaz del buscador, pero los resultados aparecen gracias al trabajo realizado laboriosamente por Googlebot.

La relación es simple: Googlebot tiene varias discapacidades.

Además de lo anterior, no es un browser tradicional con soporte de JavaScript y no es capar de acceder a los contenidos de muchos plugins comunes.

Googlebot es ciego porque no es capaz de reconocer o entender las imágenes, de hecho tampoco ve una página del modo que nosotros lo hacemos, usando un browser u otro tipo de dispositivo: solicita una página al servidor como cualquier browser mediante HTTP, la analiza y procesa, pero nunca la dibuja en un monitor. Por qué habría de hacerlo, no es necesario. Sólo necesita el texto, al igual que Lynx y Jaws. Cabe señalar que la búsqueda de imágenes de Google utiliza la información del contexto de una imagen, su nombre de archivo, ALT y descripciones extensas cuando existen para clasificarlas e indexarlas. Google no es capaz dever una imagen.

Es sordo, porque no es capaz de comprender archivos de audio. No tiene idea de los contenidos de un archivo MP3 u otros formatos. Cualquier contenido que se encuentre en este modo, sea un discurso, una conversación o música no será analizado. Esto también se extiende a cualquier formato multimedia que contenga audio.

Por si fuera poco, Google no reconoce JavaScript. En rigor, lo que no hace es ejecutarlo. Googlebot podrá analizar código JavaScript como texto, pero no lo ejecutará como un browser tradicional. Por ejemplo, si se utilizan técnicas como:

document.write(’<h1>Título principal</h1>’);

Googlebot jamás se enterará de que el texto correspondía al título principal, puesto que no lo ejecutará. Es capaz de leerlo, pero sólo como parte del texto y no está muy claro de que esto sea así si está dentro de un archivo JavaScript externo. Esto es sólo un ejemplo, lo mismo ocurrirá con todos los contenidos dinámicos generados vía JavaScript e incluso vía CSS.

Es cierto que muchas de las técnicas que utiliza Google son secretas y se conservan en ese estado por razones de marketing y para disminuir la posibilidad de explotación ilegítima. No obstante existen presunciones fundadas sobre varias de las reglas que aplica Google para indexar y asignar puntajes a las páginas que analiza. No nos sorprenderemos, entonces, de descubrir que muchas de las técnicas que benefician a un usuario con algún tipo de discapacidad también ayudan a Google a entender mejor un sitio y a asignarle un mejor puntaje, por lo tanto, aparecer mejor posicionado en los resultados de búsqueda:

  • Títulos bien redactados
  • Palabras clave utilizadas en títulos
  • Contenidos estructurados semánticamente
  • Uso de descripciones alternativas para imágenes y otros medios
  • URIs legibles y significativas

Conclusión:

  • la accesibilidad beneficia a usuarios que por condiciones propias se ven limitados para usar sitios que no se construyan técnicas apropiadas;
  • beneficia a usuarios que por situaciones o circunstancias específicas navegan en condiciones no tradicionales, como el uso de dispositivos móviles (PDAs, WAP, WebTV, etc.), conexiones de baja velocidad, computadores de baja capacidad;
  • facilita la labor de los robots indexadores como Googlebot, lo que te beneficia porque genera mejores puntajes y posicionamiento en los resultados de búsqueda, por lo tanto, más visitas.

Esta relación, independientemente de cualquier argumento humanista que se pueda hacer al respecto, es desde ya un muy buen argumento de ventas de la accesibilidad

Taxonomía y Navegación

General

Para algunos esto puede ser obvio, pero para quienes recién se introducen en Arquitectura de Información es una fuente de confusión constante: la estructura de contenidos no necesariamente es equivalente a la estructura de navegación de un sitio.

La estructura de contenidos o taxonomía de un sitio no tiene por qué, obligatoriamente verse fielmente reflejada en la estructura de navegación principal de un stio. De hecho, un sitio puede presentar múltiples formas de navegación, desde el clásico menú principal, pasando por menús contextuales, vínculos en el contenido, etc., hasta sistemas de búsqueda.

El objetivo de la taxonomía es organizar los contenidos de manera lógica utilizando diversos criterios. Esto permite ordenar los contenidos en un sistema estructurado, relacionado y eventualmente jerarquizado. Pero los modos que dispondremos para utilizar estos contenidos siguen patrones diferentes.

En el caso específico del patrón de menú de navegación principal se presentan secciones o categorías de contenido que se desea destacar, pero que pueden no corresponder exactamente a la misma estructura de clasificación de la taxonomía del sitio.

pict.taxynav.01

El diagrama muestra una estructura simple de contenidos en una relación jerárquica.

El diagrama anterior nos presenta una estructura de contenidos simple con subcategorías. No todas las categorías de primer nivel formarán parte del menú principal de navegación, sólo aquéllas que sea necesario destacar.

pict.taxynav.02

La ilustración muestra un esquema simple del patrón menú de navegación principal que utiliza algunas de las categorías representadas en el diagrama de contenidos anterior.

El esquema de navegación que presentamos arriba pretende ilustrar la situación que estoy tratando de exponer: la estructura de navegación utilizará algunas de las categorías de la taxonomía, pero no necesariamente todas y tampoco será necesario que pertenezcan al mismo nivel.

El criterio mediante el que seleccionaremos los contenidos de la navegación estará relacionado con el modo en que pretendemos guiar el recorrido de los contenidos, aquellos aspectos que necesitamos destacar particularmente. La taxonomía, en tanto, utilizará criterios de organización lógica.

La taxonomía, en cambio, tendrá un rol relevante en el uso de otros mecanismos, como los motores de búsqueda y sistemas facetados de navegación, como catálogos de productos y directorios entre otros. Uno de los lugares en que más probablemente observemos la evidencia de la taxonomía de un sitio será en el uso de los menús de rastros, que representarán la jerarquía de los contenidos en forma descendente hasta la página actual.

Menú de Navegación Principal

General

Problema

Se necesita un mecanismo que permita al usuario navegar globalmente los contenidos de un sitio de un modo consistente y visible desde todas la páginas.

Por qué

El sitio posee un número de categorías de contenidos que se desea destacar y exponer al usuario para facilitar la navegación directa y la localización de la información deseada.

Cuándo

Cuando la estructura de contenidos de un sitio presenta múltiples secciones o categorías que deben ser localizadas fácilmente por el usuario, permitiendo de este modo un acceso directo a las páginas interiores del sitio.

Solución

Utilizar un listado de las secciones más destacadas a las que se desea dar acceso directo. Este listado de categorías o secciones suele presentarse como una barra horizontal en el sector superior de la página, con nombres suficientemente breves, aunque clarificadores y en un número normalmente no superior a 7 ítemes. Aunque el modo más frecuente de disposición es horizontal, también es común que se le utilice verticalmente.

Es común, aunque no particularmente recomendado por factores de usabilidad y accesibilidad, el utilizar sistemas jerarquizados que permiten desplegar subniveles mediante tecnologías de scripting.

Este patrón de navegación está compuesto principalmente por vínculos textuales, sea en forma de texto real o mediante imágenes que representen textos para obtener efectos gráficos específicos.

Ejemplos

pict.menunav.05

La ilustración presenta un menú de navegación en su forma más común por su disposición (cafebabel.com).

pict.menunav.06

Menú de navegación principal en disposición horizontal simple de (zdnet.com).

pict.menunav.01

Wired.com utiliza un menú de navegación principal apoyado en íconos.

pict.menunav.02

AFP.com utiliza un menú de navegació principal jerárquico con el despliegue de un nivel adicional de contenidos.

pict.menunav.03

bews.bbc.co.uk presenta un menpu de navegación principal en disposición lateral a la izquierda de las páginas, en que despliega un número considerable de categorías de navegación.

pict.menunav.04

En computingcentral.msn.com se utiliza un menú de navegación principal lateral simple.

Observaciones

Existen variaciones de este patrón que trataremos separadamente, como aquéllos que utilizan una combinación de tabs o pestañas o sistemas jerárquicos complementarios para permitir el acceso a subniveles.

Referencias

Los logos y marcas que aparecen en esta página son propiedad de sus respectivos dueños. Las capturas de pantalla de sitios de terceros se presentan para efectos ilustrativos y no representan vinculación, aprobación ni otro tipo de relación.

Menú de Rastros

General

Problema

Se necesita un sistema que permita orientar al usuario sobre la ubicación de la página que está leyendo en un sitio web, respecto a la estructura de contenidos global. Esta información debe estar disponible en el contexto de la propia página, por lo que el mapa del sitio no soluciona el problema.

Por qué

Normalmente la estructura de navegación de un sitio no otorga información suficiente que permita ubicar precisamente una página dentro del contexto global de los contenidos de un sitio. Cuando el sitio tiene una estructura de contenidos compuesta de múltiples niveles resulta difícil reconocer la ubicación de las páginas interiores respecto a la arquitectura de información del sitio. Este problema se hace más evidente cuando un usuario ingresa al sitio desde páginas interiores, por ejemplo mediante un vínculo en una página de resultados en un buscador, pero es igualmente relevante para los usuarios que navegan el sitio de modo convencional.

Cuándo

Cuando la estructura de contenidos de un sitio presenta una profundidad mayor a dos niveles y resulta necesario entregar un refuerzo sobre la ubicación de la página respecto a la estructura de contenidos del sitio.

pict.breadbrumbs.01

El diagrama de arquitectura de información simplificado muestra una estructura de contenidos de varios nieveles de profundidad.

Solución

Proveer un sistema jerarquizado de vínculos a las secciones o páginas padre desde la página actual hasta la portada. El sistema debe:

  • Representar claramente la jerarquía descendente hasta la página
  • Utilizar un elemento separador que refuerce esa jerarquía entre cada vínculo
  • Estar orientado de izquierda a derecha y en la parte superior de la página, normalmente bajo el encabezado de la página y sobre los contenidos.

Ocasionalmente se observa el uso de textos como Usted está en: para reforzar la funcionalidad ubicación de este elemento.

pict.breadbrumbs.02

El diagrama muestra la ubicación común de los menús de rastros en una página.

Ejemplos

pict.breadbrumbs.03

Ejemplo de menú de rastros en NYTimes.com.

pict.breadbrumbs.04

Ejemplo de menú de rastros en PCWorld.com.

pict.breadbrumbs.05

Ejemplo de menú de rastros en Reuters.com.

Observaciones

Es preciso hacer notar que el nombre en inglés, breadcrumbs así como la traducción de menú de rastros resulta confuso, dado que el objetivo de este patrón no es informar sobre la ruta de navegación que ha seguido el usuario para llegar a la página en cuestión, sino que informar sobre la ubicación de la página en el contexto de la estructura de contenidos del sitio.

Esto último incluso nos lleva un poco más lejos: en un sitio con una cantidad importante de contenidos, la arquitectura de información no necesariamente reflejará la estructura de navegación. La clasificación de los contenidos puede generar una estructura que no se refleje fielmente en el menú de navegación, por cuanto éste estará compuesto por categorías de navegación que idealmente contendrá accesos directo a zonas de interés específico en el sitio. La decisión entonces es ¿usar categorías de navegación o la clasificación de los contenidos del sitio? Creo que se debería utilizar la clasificación de contenidos del sitio, así como en el mapa del sitio.

Cabe también citar el ejemplo que presenta Jesús Carreras del uso para representar navegación en Tipos de Breadcrumbs, o cómo orientar al usuario, aunque personalmente no estoy consciente de haber encontrado otros ejemplos similares.

Referencias

Los logos y marcas que aparecen en esta página son propiedad de sus respectivos dueños. Las capturas de pantalla de sitios de terceros se presentan para efectos ilustrativos y no representan vinculación, aprobación ni otro tipo de relación.

Patrones y Diseño Web

General

En un Alertbox reciente, Nielsen evidencia la importancia de los estándares en el diseño web:

Users expect 77% of the simpler Web design elements to behave in a certain way. Unfortunately, confusion reigns for many higher-level design issues.

Los estándares se refieren a elementos o funcionalidades comunes utilizados frecuentemente y que por la exposición, uso y finalmente acostumbramiento, los usuarios terminan identificando y utilizando de modo espontáneo, asumiendo naturalmente sus características. Por el contrario, cuando un usuario espera que algo opere de un modo específico y esto no ocurre, se genera confusión y pérdida de confianza.

Estos estándares y convenciones constituyen patrones de diseño, que contribuyen a la generación de modelos mentales respecto a elementos específicos o incluso a tipos de sitios en general. La importancia de los patrones radica en la automatización del uso de las interfaces e interacciones, lo que simplica la realización de tareas y permite que el usuario se concentre en los aspectos más importantes, más que en resolver cómo resolver los problemas más básicos, como lograr completar correctamente una tarea específica.

Como indica Nielsen en el artículo antes citado, el uso de estándares o patrones garantiza que los usuarios se sentirán en control, sabrán qué esperar de una tarea particular, se sentirán cómodos y utilizarán de un modo más apropiado un sitio web.

La lógica detrás de un patrón de interacción está dada por la construcción de modelos mentales, que nos permiten identificar y reconocer fácilmente aquellos elementos que hemos aprendido y asociado a través de la experiencia. En la medida que este proceso se concreta, se eliminan una serie de factores innecesarios, asociados a procesos congnitivos que se traducen en que nos enfrentamos a esquemas similares, conocidos, de resolver un problema. Este proceso nos permite pasar de un mecanismo que podría tomas algunos segundos, a un reconocimiento que ocurre en fracciones de segundos. Esto no es irrelevente si pensamos en que estos segundos de diferencia, y la calidad de la experiencia que ellos constituyen, tienen una relación directa con el éxito de una venta en linea, el envío correcto de un mensaje de contacto para un potencial negocio, la venta de una suscripción para un medio de noticias, etc.

Los patrones en el diseño web son precisamente uno de los aspectos que me interesa cubrir y explorar en EFH. Si el tiempo me acompaña, espero pronto comenzar a publicar temas relacionados con estos patrones. Mientran eso ocurre, los dejo con un conjunto interesante de sitios dedicados a la exploración de patrones en el web:

CSS y Semántica

General

Uno de los aspectos más importantes de la separación de contenido y presentación mediante el uso correcto de HTML, es la descripción semántica del contenido mediante elementos con valor propio. De este modo el contenido gana una nueva dimensión.

El uso apropiado de HTML para marcar los contenidos nos permite asignarle un valor especial a cada elemento, que lo contextualiza, le asigna jerarquía y lo describe. Un ejemplo típico es el de los títulos: el apropiado uso de h1 nos indica explícitamente que lo que está contenido en este elemento es un título de primer nivel, que la página trata sobre este tema. Luego, un h2 nos dirá que este contenido es importante, aunque no tanto como el h1. Así, prácticamente todos los elementos presentes ya en XHTML tienen un valor semántico específico.

En este contexto, CSS nos permite modificar la apariencia de cada elemento, sin necesidad de contaminar el contenido con elementos presentacionales. Esto lo hacemos mediante una serie de recursos, aunque los más comunes por el soporte existente actualmente son los siguientes:

  • Selectores de elementos
  • Selectores contextuales
  • Selectores de ID
  • Selectores de clases

La forma más pura de modificar la presentación sin alterar en lo más mínimo el HTML es a través de los selectores de elementos. Para especificar reglas para el cuerpo del documento, por ejemplo los márgenes, usaremos body { margin: 10px; }.

Los selectores contextuales nos permitirán referirnos a elementos según su ubicación o contexto. Por ejemplo, para modificar el color a los vínculos que se encuentren exclusivamente dentro de un párrafo, usaremos:p a { color: #0000FF; }

Un elemento que declare el atributo id podrá ser referenciado mediante el valor de éste. Por ejemplo, un div id="menu" será afectado por una regla como #menu { display: block; }.

Es común que utilicemos el atributo id para identificar de modo único a un elemento dentro de un documento y esto es totalmente legítimo. Pero cuando comenzamos a hablar del último recurso que mencionamos antes, el atributo class, nos acercamos a tres de los problemas más comunes al trabajar con CSS. Me refiero primero a su uso para reemplazar la función de elementos legítimos de HTML. Un ejemplo clásico es usar engendros como <p class="titulo">. Esto es un error serio porque al reemplazar la función de un elemento perfectamente legítimo, como h1, por p class="titulo", estamos perdiendo la calidad semántica inherente al elemento h1: p class="titulo" no significa nada más que esto es un párrafo, no se entiende de ningún modo que tratamos de crear un título, en consecuencia, esto afectará a los robots y a los indexadores de los buscadores como Google que no podrán comprender la supuesta estructura que acabamos de crear. Esto finalmente nos creará problemas de indexación y malos resultados en los buscadores.

El segundo problema común que se comete al usar CSS es usar clases con un valor descriptivo visual específico, como class="izquierda", class="verde" o class="grande". El error aquí se produce porque aún no se logra generar la separación mental entre contenido y presentación. Las clases deberían llamarse según la función o contenido que describen. Si por class="izquierda" nos referimos a un grupo de vínculos que mostraremos como una columna a la izquierda, como un menú de navegación contextual o secundario, entonces usemos class="menu-navegacion". El problema práctico fundamental que ocurre en estos casos es que cuando nos enfrentemos a un rediseño de la presentación del sitio, es muy posible que el elemento con class="izquierda" termine arriba, abajo o a la derecha y la clase no tenga ninguna relación con el nuevo diseño.

Finalmente, el otro problema común es la clasitis, o la utilización en exceso de clases. En muchos casos se recurre a un uso exagerado de clases cuando es perfectamente posible utilizar selectores contextuales, de elementos o una combinación de selectores que no alteren el HTML. Nuevamente es necesario recordar que CSS debería utilizarse para separar la presentación del contenido. Con el soporte actual de selectores en los browsers más utilizados (si aún no queda claro, me refiero a IE), tarde o temprano recurriremos al uso de alguna clase que con un soporte completo de CSS sería innecesario usar. Pero la idea es reducir al mínimo la intervención del HTML. Para esto, una buena planificación de la estructura de nuestros documentos es esencial.

Hemos cubierto algunos de los problemas más comunes en el uso de CSS que de un modo u otro afectan al HTML de un documento y con esto al valor semántico de sus elementos. Para quienes ya han dado el paso de asumir el uso de estándares con la combinación de HTML y CSS, espero que estos detalles contribuyan a mejorar la estructuración de los documentos con todos los beneficios que esto conlleva. Para quienes están comenzando el camino, bienvenidos, espero que esto les ayude a evitar algunos de los problemas más frecuentes.