Front-end, Estándares web y Accesibilidad

¿Os acordáis que hace un tiempo hablábamos sobre ‘el duelo’ xHTML2 vs. HTML5?

Parece que el W3C se había quedado solo con la especificación xHTML2, mientras que otras empresas como Opera, Mozilla y Apple siguen trabajando por y para HTML5. Luego llego la incorporación de Google apostando fuertemente por HTML5 con proyectos como Google Wave.

Finalmente el W3C ha anunciado que cuando se acabe el plan de trabajo del Grupo de XHTML 2, planeado para el final de 2009, el Grupo no será renovado. En cambio destinará sus recursos al Grupo de Trabajo de HTML.

Con ello el W3C espera acelerar el progreso del HTML 5 y clarificar su posición sobre el futuro del HTML.

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado.

• IETester
• MultipleIEs

Sin embargo, las dos soluciones presentan algunos problemas.

• El primero de ellos en determinados casos no suele emular muy certeramente.
• El segundo no soporta Windows vista. Al menos no por ahora…
• El soporte javascript es bastante pobre, incluso es bastante complejo llegar a probar soluciones del tipo PNGFIX.

Virtualización de WinXP + IE6

Por desgracia debemos tener en cuenta a Internet explorer 6, sigue teniendo una cuota de mercado considerable.

La mejor forma de emular este navegador es realizando una virtualización de Windows XP y IE6.

Hace un tiempo que Microsoft parece que nos ha puesto las cosas más fáciles (un poquito solo).
Únicamente tenemos que instalar VirtualPC y la imagen que deseemos, en este caso concreto descargaremos ‘IE6-XPSP3.exe’.

• Virtual PC 2007
• Internet Explorer Application Compatibility VPC Image

Outline nos permite crear un contorno dinámico (que bien suena esto ) alrededor de los objetos, imágenes, controles de un formulario, etc.

La propiedad de CSS “outline” es una gran desconocida, creo que le hace sombra la famosa propiedad “border” aunque de forma mal interpretada.

¿Qué es un contorno dinámico?

Es aquel que se forma alrededor del elemento sin afectar a la maquetación. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado de los elementos afectados ni adyacentes.

Cabe destacar que el contorno se dibuja justo fuera del limite del “border”.

Las propiedades hijas de outline

• outline-width
• outline-style
• outline-color

Outline vs. Border

Son propiedades diferentes:

• Los contornos no ocupan espacio.
• Los contornos pueden ser no rectangulares.
• No existen outline-top, outline-left.
• La propiedad outline-style no acepta el valor “hidden”.

Usando outline

Yo recurro mucho a esta propiedad para la interacción con los controles de un formulario.

input:focus[type=text], 
textarea:focus, 
select:focus { 
	outline: 1px solid #3EB3D6; 
}

En este CSS indico que a través de los pseudo-selectores:

• input:focus[type=text]: controles de entrada de datos (solamente de tipo text, no botones)
• textarea:focus: áreas textuales
• select:focus: controles de tipo desplegable con varias opciones.

Cuando estos controles reciben el foco se dibuja un contorno dinámico de 1px de grosor, de estilo solido y con el color #3EB3D6.

Hace tiempo escribí el artículo “WAI-ARIA, una aproximación” publicado en la revista no solo usabilidad (centrada en el diseño de interacción).

En el artículo intentaba explicar la forma de crear un control de tipo “Slider” que fuese accesible gracias a la ayuda de las técnicas ARIA.

Hoy he descubierto una herramienta experimental “ARIA Slider Generator” que crea el control en base a unos parámetros dados y a las indicaciones aportadas por The paciello Group en el post ARIA Slider.

Reconozco haber pasado cientos de horas intentando entender a nuestro inseparable compañero Internet Explorer, he pataleado y hasta desearía hacerle budu. Pero hay que reconocer que no todo lo malo es tan malo, y ahora que ha salido el nuevo Firefox versión 3.5 es para dar cuenta de ello.

Añadir tab en Internet Explorer

Añadir tab en Firefox

Siempre que instalaba una versión de Firefox repetía la tarea de poner el icono “añadir pestaña”, y el caso es que me parece incomprensible que este navegador no pusiera algo tan usual por defecto hasta ahora; Por fin!

Recuerdo que Yusef Hassan comento esto mismo y alguien menciono que Firefox si tenía ese botón, pero la verdad es que yo no lo descubrí hasta la nueva versión, donde ya aparece bien clarito y posicionado.

En esta ocasión Firefox llego después que otros navegadores, aunque hay que reconocer que lo hizo con fuerza, a mi parecer la posición y la icono-grafía es mucho más intuitiva que la del resto.

Desde el 11/12/08 las directrices WCAG 2.0 ya son una recomendación W3C. Recordemos también que en este blog hemos comentado algunas diferencias frentes a WCAG 1.

Ahora la Fundación CTIC ha desarrollado una nueva versión del analizador de accesibilidad TAW (www.tawdis.net) que permite revisar la accesibilidad de páginas web sobre la nueva normativa WCAG 2.0.

Hace poco tiempo hablábamos del código optimizado para diseñar e-mails y newsletter, ahora le toca el turno al formato de impresión.

Por cierto, entre tantas versiones (pantalla, e-mail, impresión) cabe recordar eso de “una web única” tan promulgado por la W3C. Bueno, lo que si es cierto es que las ventajas de los estándares web permiten una mejor adaptación al dispositivo o medio final y esto conlleva un ahorro de trabajo enorme.

Vamos al ataque con el CSS optimizado para la impresión.

Media

Evidentemente lo primero que tenemos que hacer es indicar el medio al que van destinadas las hojas de estilo.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Estilo

• Para la impresión viene bien dejar elásticos los contenedores, no fijar tamaños y menos aún bajo unidades en pixeles.
• Evitar el uso de float y position absolute.
• Aplicar bordes a los elementos que lo requieran, por ejemplo contenedores (div) o tablas.
• Eliminar todos los elementos de: navegación, menús, tags, opciones (compartir, enviar por e-mail, saltar al contenido, subir, etc.) Lógicamente todo aquello que no podamos usar en papel. Para esto podemos hacer uso de display: none;
• También podemos ahórranos los comentarios.

Al igual que en otras muchas situaciones menos es más, así que evitar estilos innecesarios todo lo posible.
Y en cuanto al contenido, cuanto menos se imprima mejor!, tengamos presente la naturaleza

Textos

Hace mucho mucho tiempo (en mi época de estudiante) recuerdo haber leído acerca de la legibilidad de fuentes para pantalla o impresión.

• Sans-serif: más legibles en pantalla.
• Serif: más legibles en papel.

Había mucho escrito sobre este asunto, pero me quede especialmente con una cosa; Los trazos acabados en remates ayudan a la legibilidad y son más apreciables en papel, en cambio se produce el efecto inverso en pantalla. Por esta razón los remates de Sans-serif son recomendables para papel y no tan legibles en pantalla (a muy grandes rasgos y teniendo en cuenta el tamaño de letra).

Por cierto, recomiendo el libro “Manual de tipografía, del plomo a la era digital”. Yo tengo la edición 2001 supongo que saldrían nuevas ediciones, es buenísimo!

Imágenes

Una regla que puede servirte es pensar que las imágenes que no aporten información y sean meramente decorativas deben ir como estilo (background-image).

Dos enlaces interesantes al respecto:

• Un test, web sin imágenes, sin CSS, sin JavaScript, plugins, etc.
• Accesibilidad en imágenes

En versiones antiguas de Opera, creo recordar que también imprimía el background-image, en cualquier caso aquello era modificable mediante una opción.
Hoy en día y contemplando la mayoría de navegadores no tendremos problemas.

Enlaces

En papel vemos un enlace de color azul y subrayado, pero desconocemos donde obtener esa información y no podemos ver el recurso al que apunta.

Para evitar esto podemos tomar con ayuda los pseudo-selectores de CSS y hacer que los enlaces sean acompañados de la URL.

a { text-decoration: none; }
	a[href]:after { content: " (" attr(href) ")"; }

Con ello mostraríamos un enlace así: aurea webdesign (http://aurea.es).

Como ya sabemos XHTML Strict no permite el atributo target, así que por descontado no podemos usar target="_blank" como antaño. Sin embargo existen situaciones en las que puede ser conveniente abrir una nueva ventana.

En muchos sitios web se usa rel="external" para identificar aquellos enlaces que deben abrirse en nuevas ventanas a través de una solución en Javascript. El problema es que algunos de esos enlaces no son recursos externos sino páginas dentro del mismo dominio, lo cual resulta contradictorio.
En estos casos _blank y rel="external" son parecidos pero sustancialmente diferentes.

Independientemente de si el recurso es externo podemos añadir una clase “tblank” y mediante jQuery abrir el enlace en la nueva ventana. Este método no interfiere en la semántica del sitio web y la funcionalidad es similar.

Código en jQuery:

<script type="text/javascript">
	$(function() {
		$('a[class="tblank"]').click( function() {
			window.open( $(this).attr('href') );
			return false;
		});
	});
</script>

Con estas pocas líneas, jQuery se encarga de recopilar todos los enlaces que tengan una clase “tblank”, les adjunta un evento “click”, que al dispararse abre una nueva ventana con el enlace contenido del atributo “href.” Desde luego es más fácil verlo que explicarlo

Enlace interno en nueva ventana:

<a href="/legal" class="tblank" title="Ver en nueva ventana la nota legal">nota legal</a>

Enlace externo en nueva ventana:

<a href="http://aurea.es" class="tblank" rel="external" title="Abrir en nueva ventana aurea.es">http://aurea.es</a>

Ya se encuentra abierto el periodo de inscripción para Subflash 2009.

Un evento que año tras año ha ido ganándose una gran reputación, así que tened cuidado que las plazas son limitadas a 50 privilegiados

• Lugar: Alicante, en la Villa Universitaria en San Vicente del Raspeig.
• Fecha: viernes 28, sábado 29 y domingo 30 de Agosto de 2009.
• Precio: 100€ (con un evento así y precios tan irrisorios no hay disculpa que valga).

Más información del los talleres Subflash 2009.

Esto es un micro-post sobre un Iniciador al que asistí y no quería dejar caer en el olvido puesto que la charla de Ángel María Herrera, enfocada en su trayectoria profesional, ha sido de esas pocas perlas que te encuentras de vez en cuando y te hacen reflexionar profundamente sobre tu propia carrera.

Ángel María Herrera es CEO de Bubok, de Evoluziona y de Medios y Redes. También es el fundador del propio evento Iniciador.