Front-end, Estándares web y Accesibilidad

A continuación recopilo algunos consejos beneficiosos para evitar el Spam y mejorar la Usabilidad del Newsletter, en algunos casos también aplicables a un simple e-mail enviado al usuario. Leer más »

Me he encontrado con un problema que parece afectar exclusivamente a Gmail y que ocurre al recibir un mail que contiene la etiqueta pre.

La misión de esta etiqueta es pre-formatear su contenido, con lo cual mantiene en el texto los espacios en blanco, saltos de línea, etc. Y es justamente por esa razón por la que debemos tener mucho cuidado (no soy muy amigo de emplearla).

En Gmail, por ejemplo se producía un desbordamiento horizontal, donde salia el scroll y el texto continuaba a lo largo y ancho de la ventana

Como solución, sustituir pre por un simple div en conjunción con una de estas dos opciones para el contenido que albergará:

• Formatear el contenido con PHP: Podemos ayudarnos de la función nl2br que insertará los saltos de línea.
  
  Ejemplo:

      nl2br('texto con formato');

• Formatear el contenido con CSS: Podemos usar la regla white-space: pre; para simular el comportamiento de la etiqueta pre.
  
  Ejemplo:

      <div style="white-space: pre;">
          texto con formato
      </div>

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor.

5 errores típicos

• Un 42% de páginas no comprimen su contenido con GZIP.
• Un 44% de páginas enlazan a más de 2 ficheros CSS.
• Un 56% no sirven el CSS con cookies (o no la entiendo, o esta la veo complicada de evitar sin CDN).
• Un 63% no minimiza sus ficheros con herramientas como YUI Compressor.
• Un 21% de páginas tienen ficheros CSS con más de 100K de peso (esta es de escándalo).

Si en nuestros CSS sumamos: demasiada atomicidad, normas, duplicación, conflictos y lo aderezamos todo con algo de impredecibilidad, tendremos por resultado un enorme e incontrolable CSS.

5 buenas maneras

Lo que debemos evitar es:

1. La Atomicidad

Imaginemos una página Web como si fuera un coche. Para crear ese coche usamos piezas de lego, una a una las vamos posicionando hasta crear la figura del coche.

• Con CSS básicamente hacemos lo mismo, podemos ir pieza a pieza posicionando y creando el sitio web. Y es justamente el planteamiento que debemos cambiar.
• La idea es evitar pensar en pequeñas piezas (átomos) y pensar en objetos que se puedan reutilizar. De esta manera podemos por ejemplo crear con CSS una rueda del coche, que a su vez bastaría para simular las otras tres restantes.
• Esto se podría considerar una evolución de la forma de pensar en el CSS.

2. Normas desfasadas

Que van acumulandose, que no se reutilizan, que son incrementales en el tiempo, muy especificas, etc.

3. Normas imprevisibles

Que no pueden ser reutilizadas y que son totalmente dependientes de su ubicación.

4. Guerras de especificidad

Nodos hijos de hijos de otros hijos, hacks, estilos con #ID que no pueden ser reutilizados, la sentencia !important no tiene cabida (si se usa bien la cascada), etc.

5. Duplicidad

Definir en numerosas ocasiones reglas como: margin, float, font-size, etc. Como solución tenemos:

• Algunas técnicas para resetear el CSS.
• Pensar en global, en todo el sitio web. Para ello ayuda mucho seguir una metodología como la DCU, para abstraer el futuro marcado de los mockups y ejecutar nuestro “CSS kung-fu”!

Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG.
Para solucionar este problema existen varias técnicas:

• A través del filtro Directx AlphaImageLoader.
• Con Behaviors.
• El conocido pngfix (con la ayuda de JavaScript).
• Algunas implementaciones pngfix para frameworks de JavaScript, como jquery.pngFix.js

Todas ellas presentan pros y contras. Dependiendo del proyecto puede que venga mejor uno u otro, o que simplemente alguno no funcione por conflictos de JavaScript o misteriosas razones que solo las meigas de IE conocen. Así que la única solución es probar y probar…

A continuación voy a desarrollar la primera de ellas.

AlphaImageLoader

#logo  { 
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
		src='http://..../logo.png', 
		sizingMethod='crop'
	); 
}

El primero de los pasos es indicar que no hay ningún fondo background-image: none;, a continuación usamos filter y la llamada Directx de Microsoft para cargar imágenes que incorporan factor alfa. En el parámetro src va la ruta absoluta al fichero png.

Conflicto con los enlaces

Con lo dicho anteriormente el PNG es mostrado con transparencia y sin errores, pero los enlaces no realizan el comportamiento adecuado si se encuentran en el interior de un elemento que tenga aplicado el filtro AlphaImageLoader.

Para solucionar este último problema podemos recurrir al siguiente código CSS:

#logo a { 
	position: relative; 
	z-index: 1; 
}

Cuando se aplica un filtro el elemento tiene una posición estática y esto presenta problemas en los enlaces, por ello se fuerza por medio de CSS a que los enlaces dispongan de una posición relativa y con z-index en una capa inferior.

Solo para Internet Explorer

Otros navegadores modernos (Firefox, Opera, Safari, Chrome) soportan perfectamente el formato PNG y su grado de transparencia, por tanto sería bueno pensar en ofrecer esta técnica únicamente cuando el usuario se encuentra navegando con Internet Explorer. Para lograrlo podemos recurrir a los comentarios condicionales:

<!--[if lt IE 7]><link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" /><![endif]-->

Mediante este comentario condicional ubicado en el head podemos indicar que solo aquellos navegadores que sean inferiores al Internet Explorer 7 [if lt IE 7] se enlace el fichero de esitlo “ie6.css” que a su vez contiene los códigos comentados para esta técnica.

De esta forma:

• No obligamos a que se interprete código propietario (no estándar) como el filtro AlphaImageLoader por parte de otro navegador que no sea IE6 o inferior.
• El sitio Web será estándar y válido según el W3C – Validator.
• Reducimos el código CSS innecesario para otros navegadores y con ello logramos una mejor optimización.

El atributo alt de una imagen u otro elemento debe proporcionar un texto alternativo que contenga la información que se pretendía transmitir. No olvidemos que la información textual es la de mayor grado de accesibilidad.

Usar textos alternativos lógicos y coherentes

• Si la imagen contiene texto, por ejemplo un número de teléfono, debemos transmitirlo completamente, alt="Teléfono: 000 000 000".
• Si la imagen es un icono de error, el texto debe transmitir esa misma idea, podemos usar simplemente alt="error".
• Si se trata de un icono “ZIP”, podemos usar algo como alt="fichero comprimido en ZIP".
• En el caso de una fotografía podemos describir lo que vemos, alt="Asturias, tierra de altas montañas".
• Si la imagen transmite acción, por ejemplo un enlace que tenga un icono de una impresora, debemos indicar dicha acción y no la descripción del icono, alt="imprimir".
• Si una imagen transmite lo mismo que un texto contiguo, debemos dejar el texto alternativo vació para no caer en redundancias, alt="".

Las votaciones

Supongamos que tenemos el clásico sistema de votaciones con estrellas:

Siguiendo las directrices de WCAG2 lo que podemos hacer es usar el atributo alt de la primera imagen para describir a todo el grupo e indicar la puntuación global. El resto de las imágenes que deberían estar situadas de forma contigua, tienen que tener alt="" vacio y no llevar ningún title, de esta forma son obviadas. Con ello se consigue que las ayudas técnicas (como por ejemplo lectores de pantalla) únicamente “lean” el texto alternativo de la primera imagen donde se da toda la información necesaria al usuario.

Ejemplo

<img src="star1.png" alt="puntuación 4 de 5" />
<img src="star2.png" alt="" />
<img src="star3.png" alt="" />
<img src="star4.png" alt="" />
<img src="star5.png" alt="" />

Los emoticonos

Se tiene que transmitir de forma textual el mismo sentimiento que el representado. Por ejemplo: alt="Feliz".

<img src="http://aurea.es/wp-includes/images/smilies/icon_smile.gif" alt="Feliz" />

Supongamos que en vez de una imagen usamos texto (ASCII). En este caso podemos marcar los emoticonos como abreviaturas (semánticamente podrían ser considerados así) y con el atributo title="sentimiento"
Por ejemplo:

<abbr title="Feliz">:-)</abbr>

En la vieja escuela estábamos acostumbrados a identificar y definir cada abreviatura y acrónimo con intención de aportar más semántica a nuestro contenido.
Usamos el atributo title con la versión textual completa, dentro de las etiquetas abbr y acronym, para explicar el término sin interrumpir el flujo del documento.

Ejemplo de abreviatura – abbr

<p><abbr title="Teléfono">Tel</abbr></p>

Ejemplo de acrónimo – acronym

<p><acronym title="Real Academia Española">RAE</acronym></p>

Abreviaturas o acrónimos en otro idioma

Si el idioma de la abreviatura o el acrónimo es diferente al del documento, se debería indicar con los atributos lang y/o xml:lang.

Por ejemplo en el caso del documento siguiente en XHTML Strict en Inglés:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" >

El marcado de la abreviatura sería:

<p><acronym title="Real Academia Española" lang="es" xml:lang="es">RAE</acronym></p>

Y ahora viene lo bueno…

Según la nueva escuela todo es abreviatura

• Se llama acrónimo a la palabra que se forma a partir de las letras iniciales de un nombre compuesto y a veces por más letras. Por ejemplo: RADAR (RAdio-Detection And Ranging).
• Se llama sigla al término que se forma a partir de la inicial de las palabras claves que forman el título o el nombre completo de algo. Por ejemplo: RAE (Real Academia Española).

Ambos casos (acrónimos y siglas) son considerados abreviaturas y por ello en la práctica se permite usar abbr para todo tipo de formas abreviadas.

Además, en las especificaciones HTML5 y XHTML2 queda eliminado el elemento acronym a favor de estándarizar únicamente abbr.

Me parece bueno todo lo que sea ahorrar confusiones y malos usos, por eso me gusta la interpretación de la nueva escuela

* A tener en cuenta: Como no podía ser de otra forma las versiones anteriores a Internet Explorer 7 no reconocen abbr.

Hace ya un buen tiempo descubrí de forma totalmente fortuita la página web de Los colores olvidados, cuyo diseño e ilustraciones me llamaron la atención. Navegaba y babeaba al mismo tiempo. Otro claro ejemplo de que el diseño no esta reñido con la usabilidad.

Leer más »

Retomando a Lev Manovich, descubro que habló sobre la usabilidad en una entrevista publicada por ArtNodes de UOC: Definitivamente, creo que estamos en el principio.

En una de las preguntas Manovich comenta que no le gustan los defensores de la usabilidad web, pues cree que no tienen ningún criterio estético y están proponiendo algo que resulta extremadamente aburrido.

En mi opinión, no puedo estar más en desacuerdo con esta postura.
El primer pensamiento que puede tener tanto un diseñador como un usuario es que la usabilidad puede mermar la creatividad y que las convenciones de diseño que a su vez favorecen al campo de la usabilidad van en detrimento de las posibilidades creativas. Se puede llegar a pensar que incluso si seguimos todas las convenciones favorables en usabilidad acabaríamos con un diseño global homogéneo y aburrido.

Nada más lejos de la realidad. Los diseñadores siempre han estado expuestos a convenciones y también a restricciones en todos los medios de expresión, desde la pintura en lienzo al diseño web. De hecho el diseño web es diseño de interacción por lo tanto estamos expuestos a tener en cuenta la conducta humana en este medio.

Las convenciones de usabilidad y las restricciones impuestas por el diseño de interacción más que minar nuestra creatividad la agudiza, haciendo que sigamos siendo creativos pero teniendo en cuenta dichos factores.

Recuerdo una cita que lo ilustra perfectamente:
Diseño es arte optimizado para conseguir objetivos Shimon Shmueli

Inclasificable, aunque interesante lo que voy a escribir en este post sobre mis interpretaciones de Lev Manovich y la relevancia que tienen en la actualidad la socialización en internet.

Leer más »

Son como su propio nombre indica comentarios interpretados únicamente por Internet Explorer e incrustados en el código HTML, generalmente en el apartado HEAD y realizan su función únicamente si la condicional se cumple atendiendo al navegador y su versión.

Este mecanismo fue “un invento” de Microsoft (Internet Explorer), que en númerosas ocasiones no han seguido los estándares y pautas marcadas por la W3C. Mediante los comentarios condicionales podremos crear estilos propios atendiendo a las diferentes versiones de este navegador.

Las condicionales llevan un operador: “!” (negación), “lt” (menor que), “lte” (menor o igual que), “gt” (mayor que), “gte” (mayor o igual que). Con los operadores y las diferentes versiones del navegador ya podemos definir estilos atendiendo a las diferencias de cada caso.

Ejemplos

<!--[if !IE]> Cualquier navegador pero NO (!) Internet Explorer <![endif]-->

<!--[if lt IE 6]> Solo versiones MENORES de la 6 <![endif]-->

<!--[if lte IE 6]> Solo versiones MENORES o IGUAL a la 6 <![endif]-->;

<!--[if gt IE 5.5]> Solo versiones MAYORES a la 5.5  <![endif]-->

<!--[if gte IE 5.5]> Solo versiones MAYORES o IGUAL a la 5.5  <![endif]-->