Sustituir capas por tablas para una maquetación accesible

julio 7, 2008

Aún siendo una de las deficiencias mas comunes en el diseño web en lo que a la accesibilidad se refiere, existen todavía profesionales empeñados en seguir maquetando sus páginas mediante tablas.

En general, no se permite su uso para maquetar a menos que cuando se alinea una tabla, los contenidos de las celdas se convierten en series de párrafos (es decir, de arriba hacia abajo) uno tras otro. Las celdas deben tener sentido cuando se leen en orden horizontal y deben incluir elementos estructurales (que creen párrafos, encabezamientos, listas, etc.) de modo que la página tenga sentido al ser alineada (p.e cuando el usuario desabilite el uso de tablas en su navegador). ver mas aquí.

En realidad, transformar una maquetación realizada con tablas a capas no es tan complicado. Básicamente se trata de  jugar con los estilos CSS “float” y “clear”, y una vez entendido nos puede resultar incluso más cómodo e intuitivo que hacerlo mediante tablas.

Float: Sirve para alinear un elemento, haciendo que los elementos que le rodean se alineen con respecto a él. Sus posibles valores son “left” (para alinear el elemento a la izquierda) y “right” (para alinearlo a la derecha).Un elemento con “float” debe tener definida su anchura.

Clear: Se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante “float”) dejen de alinearse junto a él. Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado)

Vamos a comenzar con un ejemplo sencillo. Dos columnas.

<table>

<tr>

<td style=”width:40%”>Columna Izquierda</td>

<td style=”width:60%”>Columna Derecha</td>

</tr>

</table>

La transformación es muy sencilla y se va a repetir básicamente en todos los casos:

  • Las etiquetas <table> y </table> las sustituremos por <div> y </div>.
  • La etiqueta <tr> será eliminada
  • Las etiquetas <td> y </td> serán sustituidas por un <div> flotante alineado a la izquierda: <div style=”float:left; width:xxx;”> y </div>
  • La etiqueta </tr> será sustituida por un <div> que no permitirá flotantes a ningún lado: <div style=”clear:both; padding:0px; margin:0px;”></div>

Este sería el ejemplo completo:

<div>

<div style=”float:left; width:40%;”>Columna Izquierda</div>

<div style=”float:left; width:60%;”>Columna Derecha</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

</div>

En este otro ejemplo mostramos una página con cabecera, tres columnas y pie de página.

<table>

<!– Cabecera de Página –>

<tr>

<td colspan=”3″></td>

</tr>

<!– Cuerpo a 3 columnas –>

<tr>

<td>Izquierda</td>

<td>Centro</td>

<td>Derecha</td>

</tr>

<!– Pie de Página –>

<tr>

<td colspan=”3″></td>

</tr>

</table>

La transformación a capas …

<div>

<!– Cabecera de Página –>

<div>Cabecera</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

<!– Cuerpo a 3 columnas –>

<div style=”float:left; width:33%;”>Izquierda</div>

<div style=”float:left; width:33%;”>Centro</div>

<div style=”float:left; width:33%;”>Derecha</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

<!– Pie de Página –>

<div>Pie de Página</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

</div>

En este caso, nos ahorramos incluso la necesidad de añadir el atributo colspan de la celda que conforma la cabecera y el pie de página.

Los estilos han sido definidos en línea para que quede más claro. En vuestra mano está definirlos en un CSS externo mucho mas elegante.

Anuncios

Manual de Usabilidad Web

junio 10, 2008

No cabe duda de que la accesabilidad es un tema indispensable para todo desarrollador web. Y dentro de todo lo que abarca el conseguir diseñar un sitio web accesible, la usabilidad del mismo juega un papel fundamental.

Un modo de introducirse en este tema es a través de este manual repartido en la ponencia Como crear sitios web de exito,usabilidad web en la practica, celebrada en el Parque Tecnológico de Alava el dia 26 de mayo de 2008, y organizada por Araba Enpresa Digitala.

Los autores; Miguel Sanchez y Javier Eguiluz.

http://www.enpresadigitala.net/euskera/biblioteca/mostrar_fichero.jsp?id=1127