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.


Sprites (Espectros) de CSS, botones con efecto rollover sin Javascript

enero 16, 2008

Interesante artículo escrito por Daved Shea en el que se explica una interesante, accesible y limpia forma de realizar botones con efecto rollover (o lo que nuestra imaginación nos permita) utilizando la antigua técnica de la retícula de sprites sin la necesidad de utilizar JavaScript.

La idea básica es la de agrupar los distintos gráficos utilizados en cualquier animación básica de nuestro sitio web en un único archivo de imágen. Los distintos gráficos o Sprites serían las distintas celdillas que conformarían ese archivo de imagen al que se le llamará retícula maestra.

El modo de mostrar las distintas imágenes consistiría en ir moviendo horizontal y verticalmente esta retícula aplicada como background de un elemento div de determinadas dimensiones.

Merece la pena echarle un vistazo.

www.alistapart.com/articles/sprites

En Castellano: www.vectoralia.com/manual/html/sprites.html


Listamatic, Una lista múltiples opciones

noviembre 30, 2007

Interesante sitio en el que nos muestran el poder del CSS ofreciéndonos distintos tipos de menus creados con listas escritas en XHtml totalmente válido y accesible.

Merece la pena echarle un vistazo.

css.maxdesign.com.au/listamatic


www.librosweb.es, la información libre

noviembre 20, 2007

Interesante web con posibilidad de convertirse en una fuente importante de conocimiento.

Que sean sus autores quienes la definan:

“LibrosWeb.es publica gratuitamente todo el material que utilizan sus autores en los cursos que imparten.
Además, publica traducciones de libros gratuitos relacionados con el diseño y la programación web.
Siempre se podrá acceder gratuitamente a toda la información de este sitio, ya que creemos que la información debe ser libre.”

Por mi parte tan solo me queda daros las gracias y desearos mucha suerte.

www.librosweb.es