icono_twiter icono LinkedIn
Rubén Aguilera Díaz-Heredero

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero en Informática, especialidad en Ingeniería del Software

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2009-05-25

Tutorial visitado 18.169 veces Descargar en PDF
Tabla de datos accesible con paginación y ordenación

Tabla de datos accesible con ordenación y paginación


0. Índice de contenidos.

1. Introducción

En la charla que tuvimos recientemente en Autentia sobre accesibilidad web se habló de tres conceptos fundamentales a la hora de implementar una web accesible:

  1. Implementación de la vista en tres capas: esto es la separación del código correspondiente a la vista en: contenido (XHTML), estilo (CSS) y funcionalidad (Javascript).

  2. Progressive enhancement: esto es el concepto de mejora progresiva, es decir, primero tenemos que tener toda la información codificada en formato XHTML 1.0 Strict y debemos estar seguro de que pasa los validadores de la W3C y que cumple las pautas de accesibilidad, después ya nos preocuparemos de añadirle el estilo (CSS) y la funcionalidad (Javascript).

  3. Javascript no obstrusivo: esto es utilizar Javascript para proporcionar un valor añadido a las personas que dispongan de él, pero que no impida el acceso a la información a las personas que no lo tienen.

Pues bien, en este tutorial lo que se pretende es crear un pequeño ejemplo que cumpla las premisas anteriores, y que se ajuste a un problema muy común en la mayoría de proyectos web que es el de paginar y ordenar una tabla de datos.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Asus G50Vseries (Core Duo P8600 2.4GHz, 4GB RAM, 320 GB HD).
  • Sistema operativo: Windows Vista Ultimate.
  • Mozilla Firefox/3.0.6 

3. Creamos el contenido XHTML

Como ya hemos comentado, tenemos que crear un contenido que sea válido utilizando la gramática XHTML 1.0 Strict y que cumpla con las pautas de accesibilidad. En este caso vamos a crear una tabla de datos, por lo que los puntos de verificación que debemos cumplir son:

  • (5.1) En las tablas de datos, identifique los encabezamientos de fila y columna [Prioridad 1]: esto es utilizar <td> para identificar las celdas de datos y <th> para los encabezamientos; este punto ya lo cumplimos.
  • (5.2) Para las tablas de datos que tienen dos o más niveles lógicos de encabezamiento de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos [Prioridad 1]: esto es utilizar <thead>, <tfoot> y <tbody> para agrupar filas, <col> y <colgroup> para agrupar columnas y los atributos “axis”, “scope”, y “headers” para describir relaciones más complejas entre los datos; nuestra tabla no es muy compleja aún así utilizamos las etiquetas <thead> y <tbody>.
  • (5.3) No utilice tablas para maquetar [Prioridad 2]: este punto no aplica, ya que la tabla la utilizamos para visualizar datos.
  • (5.4) Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato [Prioridad 2]: este punto no aplica.
  • (5.5) Proporcione resumenes de las tablas [Prioridad 3]: esto es establecer el atributo “summary” del elemento <table>.
  • (5.6) Proporcione abreviaturas para las etiquetas de encabezamiento [Prioridad 3]: esto es establecer el atributo “abbr” del elemento <th>

Atendiendo a estas premisas nuestro contenido debería de ser algo muy parecido a esto:

Si comprobamos este código contra el validador de la W3C veremos que es un código válido y que cumple con los puntos de verificación vistos anteriormente. El aspecto sería este:

4. Añadimos la funcionalidad

Ahora es el momento de introducir la funcionalidad que aporte un valor añadido a nuestra tabla, esto es que se capaz de paginar y ordenar por un campo cualquiera.

Para ello vamos a hacer uso de YUI que es una librería Javascript desarrollada por el equipo de YAHOO y que tiene como característica pincipal que ha tenido en cuenta el concepto de “progressive enhancement” para su desarrollo.

Otra de las ventajas que presenta es que sus librerías están publicadas en Internet, por tanto no tenemos porque descargar ningún fichero sólo referenciarlo. Es obvio que esta no es la situación ideal en entornos de producción por lo que nos podemos descargar la librería desde la dirección http://developer.yahoo.com/yui/.

Entonces lo que vamos a hacer es modificar nuestro código XHTML para añadir en la cabecera, esto es entre las etiquetas <head> y </head>, las referencias a las librerías necesarias, que en el caso de una tabla con ordenación y paginación son:

Como se puede apreciar también se incluyen unas CSS necesarias para la correcta visualización de la tabla, pero que podremos sobreescribir como veremos en el apartado de añadir estilo. Lo que si es importante, para aplicar estilos con YUI es añadir la clase “yui-skin-sam” al <body> del contenido HTML.

La última referencia Javascript establece el fichero .js que va a contener nuestra funcionalidad específica , donde se va a hacer uso del resto de librerías. El código de este fichero es el siguiente:

Para comprender mejor este código ir a la documentación de YUI que se encuentra en http://developer.yahoo.com/yui/datatable/. Después de aplicar la funcionalidad este es el aspecto de la tabla:

Esta tabla ya es perfectamente funcional, gracias a Javascript podemos ordenar cada uno de los campos y paginar por el número de registros que establezcamos en el configuración del elemento Paginator del Datatable.

Pero y ahora qué ocurre si yo deshabilito el Javascript de mi navegador, pues nada, la tabla se muestra y se interpreta tal cual esta en el contenido HTML.

5. Añadimos el estilo

Por último, podemos centrar esfuerzos en modificar el estilo. Para ello, podemos crear un nuevo fichero .css en el que ir introduciendo las variaciones que creamos oportunas. Para ver que clases maneja YUI lo mejor es abrir alguno de los ficheros .css que importabamos en el código anterior y modificar alguna de sus propiedades. Por ejemplo, si quisiéramos que el color de los textos de la tabla fuera en rojo, el fondo de la primera columna amarillo y el de la última rojo, este sería el código CSS necesario:

Y el resultado es algo tan espantoso como esto:

Sólo espero que vosotros tengáis más estilo que yo ;)

6. Conclusiones

Como hemos podido ver, tampoco es tan difícil hacer las cosas accesibles, sobre todo si contamos con una librería como YUI, que es de las pocas que tienen en cuenta el “progessive enhancement”. Actualmente, la última versión de esta librería es la 2.7 que va a ser la última de lo que ellos llaman YUI 2, para pasar a YUI 3, donde por lo que he podido ver van a empezar de cero haciendo especial hincapié en la accesibilidad, así que esto promete.

Este tutorial no pretende explicar la librería YUI sino aplicarla en un caso particular. Si queréis que inicie una serie de tutoriales para hablar específicamente de esta librería y de todas sus bondades como por ejemplo la selección de filas de la tabla o la edición en linea de las celdas o cómo crear un campo que se autocompleta a medida que vas escribiendo, sólo tenéis que escribir a raguilera@autentia.com. Si veo que hay suficiente gente que muestra interés por la librería, hablaré de ella en próximos tutoriales.

Para comunicarme cualquier problema o sugerencia de mejora utilizad la zona de comentarios, de este modo todo el mundo se podrá aprovechar de las respuestas.

Saludos

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2012-05-16-17:23:56

Autor: nova

[Nova] Hola! He seguido los pasos del tutorial pero no funciona, sale solamente la tabla simple. Ya verifiqué mi conexión a internet, y la clase "yui-skin-sam" como atributo de la etiqueta body, pero sigue sin funcionar... Que me puede estar faltando?

Fecha publicación: 2009-07-28-09:08:12

Autor:

[Rubén Aguilera] Hola androx, Para cambiar los textos 'next' y 'previous' tienes que modificar la configuración del elemento Paginator que encuentras en esta línea: paginator : new YAHOO.widget.Paginator({ rowsPerPage : 4 }); Tienes que añadir las propiedades 'previousPageLinkLabel' y 'nextPageLinkLabel' quedando de esta forma: paginator : new YAHOO.widget.Paginator({ rowsPerPage : 4, previousPageLinkLabel:"anterior", nextPageLinkLabel:"siguiente"}); Espero haberte ayudado. Saludos.

Fecha publicación: 2009-07-28-01:46:06

Autor:

[androx] Hola Ruben, excelente tutorial, una pregunta, como puedo cambiar el nombre dentro de la hoja de estilo para que pueda yo visualizar las palabras next prev en español, algo como esto: dt-first = primero Gracias

Fecha publicación: 2009-07-06-01:49:11

Autor:

[Javier] Lo siento por el mensaje anterior, ya que no aparecen los saltos de línea. Para solucionar el problema con "tutorial.js": 1.- Se debe subir la línea 6 para unir con la 5 (falla por el salto de línea) 2.- Lo mismo de la 8 a la 7 y de la 11 a la 10. 3.- Se elimina la línea 25 (incluye solo el texto "parser". Con esto me funciona sin problemas. Espero que os ayude con esto. Saludos.

Fecha publicación: 2009-07-06-01:44:18

Autor:

[Javier] Hay varios errores en el último fichero, el que sería "tutorial.js". Lo he modificado dejándolo como muestro a continuación, y así me funciona: YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.EnhanceFromMarkup = function() { var myColumnDefs = [ {key:"due",label:"Fecha de vencimiento",formatter:YAHOO.widget.DataTable.formatDate,sortable:true}, {key:"account",label:"N.C.", sortable:true, abbr:"Número de cuenta"}, {key:"quantity",label:"Cantidad",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true}, {key:"amount",label:"Total que adeuda",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true} ]; var parseNumberFromCurrency = function(sString) { // Remove dollar sign and make it a float return parseFloat(sString.substring(1)); }; var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts")); myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; myDataSource.responseSchema = { fields: [{key:"due", parser:"date"}, {key:"account"}, {key:"quantity", parser:"number"}, {key:"amount", parser:parseNumberFromCurrency} // point to a custom ] }; var tblConfig = { paginator : new YAHOO.widget.Paginator({ rowsPerPage : 4 }), initialRequest : '', selectionMode : 'single' }; var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,tblConfig); return { oDS: myDataSource, oDT: myDataTable }; }(); });

Fecha publicación: 2009-06-26-08:05:16

Autor:

[Rubén Aguilera] Hola fer, efectivamente no hay paginación del lado del servidor, pero no puedes decir que esto no es accesible, ya que lo que pretendo demostrar con este tutorial es que Javascript debe ser entendido como un valor añadido que le puedes dar a los usuarios que lo soporten, pero nunca un impedimento para que les llegue la información (Javascript no obstrusivo). En caso de usuarios que no soportan Javascript, no tienen paginación pero si pueden acceder al contenido, de hecho ya te digo yo que a una persona que utiliza un lector de pantalla, la paginación es un impedimento más que una ayuda. Saludos.

Fecha publicación: 2009-06-25-05:13:38

Autor:

[fer] el javascript no es accesible, ¿donde esta la funcionalidad de la paginación del lado del servidor? Esto no es accesible

Fecha publicación: 2009-06-18-11:05:05

Autor:

[Rubén Aguilera] Hola giorgio, Pueden estar fallando varias cosas: primero comprueba que tienes conexión a Internet, ya que a la librería de YUI accedemos de forma remota. Otra cosa puede ser que no hayas puesto la clase "yui-skin-sam" como atributo de la etiqueta &lt;body&gt;. Prueba estas dos cosas y si no se resuelve vuelve a escribir. Muchas gracias.

Fecha publicación: 2009-06-18-02:28:40

Autor:

[giorgio] Hola, he seguido los pasos del tutorial pero no funciona, sale solamente la tabla simple, sin el javascript ni estilos. que es lo que me puede estar fallando? un saludo