Mi espacio

En los últimos años he visto como desde universidades hasta empresas, pasando por administración pública, han elegido Plone para gestionar sus contenidos y modelar sus servicios a partir de los productos con los que Plone trabaja. Dejando a un lado cuestiones técnicas del core y la filosofía que esta solución fomenta (durante la versión 2.x), los acabados de la interfaz de usuario no eran muy buenos. Evidentemente, he visto acabados muy buenos, sin embargo, la tónica habitual no era esa. Inicialmente pensaba que la forma en la que Plone trabajaba y las herramientas que proporciona dificultaban mucho la implementación de buenos interfaces web. Veía con cierta frecuencia una mala semántica del marcado, los layouts o bien fijos o anchos al 100%, el aumento de las fuentes en la mayoría de los casos destrozaban el layout, etc. Esta fue mi primera impresión sin conocer Plone con mucha profundidad (sigo sin conocerlo todo lo que me gustaría), sin embargo creo que aunque Plone tenga cosas que mejorar con respecto a la forma de trabajar en la interfaz de usuario, se puede hacer cosas bastante aceptables.

Recientemente se ha publicado el sitio web del Ayuntamiento de Lepe. Este proyecto ha sido realizado por la empresa en la que actualmente trabajo y tengo que reconocer el excelente trabajo que mis compañeros han realizado. Evidentemente hay cosas que se pueden mejorar, pero bueno, ahora por fin sé que no era una cuestión de Plone. Hoy por hoy estoy convencido de que se pueden conseguir buenos interfaces de usuario haciendo uso de estándares web y buenas prácticas en accesibilidad web. En esta ocasión se ha comprobado la interfaz de usuario en multitud de agentes de usuario y con distintas configuraciones (versiones, sistemas operativos, etc) y el escalado de la fuente es uno de sus puntos fuertes.

Uno de los congresos con mayor proyección dentro del diseño web con estándares se aproxima. En su tercera edición el programa es increíble. Para más información sobre el evento os animo a visitar el sitio web oficial, que por cierto, tiene una estética muy atractiva.

Del 3 al 5 de Octubre de 2007, Gijón, Asturias (ESPAÑA)

Este año no podré asistir porque me coincide con un curso, una lástima. Confío en que los blogs de los asistentes se inunden de comentarios, opiniones, etc.

Me reafirmo en el título del post, el nuevo sitio web del Congreso de los diputados es perfecto. Es perfecto para usarlo como material tanto para preparar un curso o un seminario sobre estándares web, accesibilidad o usabilidad. Hay ejemplos sensacionales para explicar y exponer como no hacer las cosas. La verdad es que mientras escribo estas líneas sonrío porque estoy realmente alucinado de que este tipo de barbaridades salgan a la calle. Estos proyectos no valen ni para estar escondidos.

Ayer precisamente escribía un comentario en el blog de Luis Villa sobre su post titulado Grandes mentiras: la accesibilidad no es un coste añadido. Es evidente que si ponemos como ejemplo al sitio web que estoy comentando, la accesibilidad tiene un coste añadido. Por un lado hacerlo mal con un coste de casi 14 millones de euros , y por otro lado, hacerlo bien. Sospecho que el importe por el que se ha adjudicado el concurso público incluye otras cosas a parte del sitio web. Con independencia de la partida presupuestaria dedicada a la ejecución del nuevo sitio web, lo que si tengo claro es que se ha hecho con dinero público y el resultado es lamentable. Personalmente creo que se ha mal gastado dinero público y deberían dar explicaciones.

Después de estas impresiones creo que es el momento de aportar algunas cuestiones técnicas que justiquen por qué pienso que el resultado es lamentable. Como he comentado, sólo voy a enumerar algunas cuestiones relacionadas con estándares web y accesibilidad, justo las que me de tiempo antes de comenzar a cenar. Porque no es justo que encima les hagamos el trabajo a la UTE adjudicataria. Menuda pareja.

1. El layout es fijo a 800 pixeles y centrado. Inicialmente esto no tiene por qué ser un problema, aunque para este tipo de contenidos un layout elástico hubiera resultado más interesante teniendo en cuenta la disparidad de configuraciones que los usuarios usan. Precisamente las consultorías previas están para este tipo de cosas, para obtener indicadores con los que posteriormente tomar decisiones. ¿Habrán realizado algún estudio sobre los agentes de usuario, resoluciones, sistemas operativos, javascript habilitado, java habilitado, etc…?
   A pesar de haber elegido este tipo de layout, a una resolución de 800 pixeles de ancho aparece la barra de desplazamiento horizontal cuando no es necesario porque el contenido ocupa 765 pixeles. Evidentemente, el layout está mal implementado.
   
2. Viendo la cabecera HTTP se comprueba que detrás de todo esto hay un producto comercial, en este caso de Oracle. Tampoco tiene nada de malo, pero parece contradictorio que haya tantas iniciativas y proyectos relacionadas con el software libre o de fuente abierta subvencionados por la administración pública y que luego se opte por soluciones comerciales para un sitio web como este. ¿Quizás el software libre sea argumento con fines únicamente políticos? En fin, esto es otra batalla.
   Lo que pretendía comentar es que el servidor HTTP está devolviendo información con una codificación UTF-8 y sin embargo en el Content-type indica que es text/html; charset=windows-1252. Además lo indica cuatro veces. Pensaba que este meta se definía una única vez en la sección <head>.
   
3. El documento que recibe nuestro navegador web no es un documento HTML, es algo que parece ser un documento HTML por las etiquetas de marcado que usan pero desde luego dista mucho de ser un documento HTML bien formado. No son son muchas las ocasiones en las que uno se encuentra una declaración de documento (DOCTYPE) en la línea 665, y en la línea 787, y en la 877, y en la 1409, y en la 1582. Un total de 5 apariciones. Desde luego se han tomado al pie de la letra el concepto de componente con los portlets.
   
4. El layout está implementado usando tablas.
5. Acopamiento máximo entre el contenido y su representación.
6. Malas prácticas en el uso las hojas de estilo en cascada. No sólo no aprovechan su potencial, sino que la estrategia que han seguido les dificultará muchísimo el mantenimeinto. Más de 400 clases CSS y estilos inline lo dicen todo.
7. Mínima accesibilidad en las URL del sitio web. ¿Qué sentido (semántico, claro está) tiene está URL: http://www.congreso.es/portal/page/portal/Congreso/Congreso? ¿Qué sentido tiene? Que nos encontramos en el congreso, que a su vez está el congreso en un nivel superior, que es un portal, que el portal es una página, que pertece a un portal, y todo ello en el nombre de dominio www.congreso.es. Desde luego existen otras URL que el gestor de contenidos genera que son un jeroglífico. ¿Dónde están esas URLs de la forma: http://www.dominio.es/seccion, http://www.dominio.es/noticias/54, http://www.dominio.es/contenido/2007/05/01?
8. Carencia de contenido sindicado. Está claro que proporcionar canales alternativos de comunicación facilitan el acceso a la información. ¿Y eso no tiene algo que ver con la accesibilidad?
9. Carencia absoluta de definición semántica de abreviaciones y acróminos.
10. Ausencia de textos alternativos, descripciones contextuales (title, lengdesc) y otros elementos que ayuden al acceso de la información.
11. Uso indiscriminado de javascript a lo largo de todos los documentos.
12. Mal funcionamiento de los sistemas de caché por el uso inline tanto de las hojas de estilo como del código javascript.

Habría otras muchas cuestiones que comentar pero no voy a dedicarle más tiempo. Otros compañeros también lo han comentado:

• Daniel Torres Burriel
• Andrés Nieto Porras
• usalo.es

Me pregunto qué pasa con la Legislación Española sobre Accesibilidad para la Sociedad de la Información. En fin, algo no va bien.

Hacía unos días leía en varios medios que se va a celebrar en Sevilla, durante los días 27, 28 y 29 de junio, un congreso de diseño y desarrollo web basado en estándares. Hacía ya algún tiempo me habían llegado rumores de que algo se estaba organizando. Fue Daniel Torres Burriel quien me lo confirma hace no demasiado tiempo.

Como no puede ser de otra forma me parece una iniciativa estupenda y más cuando se celebra por el sur de España. En alguna que otra ocasión he hecho constar la carencia de formación que muchas empresas del sector tienen en lo que estándares web se refiere. Esperemos que iniciativas como esta hagan que las empresas tomen medidas al respecto. Particularme “no me importa demasiado” que los productos o servicios que estas empresas ofrecer hagan un uso correcto de los estándares web, sin embargo, estas empresas pueden tener como cliente a la administración pública. Y ahí, sí me puedo ver afectado como usuario final.

Viendo el perfil de los ponentes observo que los estándares web que se tratarán serán los que normalmente se suelen tratar en eventos de este tipo. Quizás echo en falta otros estándares web que no se “ven” tanto, pero que no son menos importantes. En el desarrollo web no todo es la capa de representación e interacción, hay más cositas por detrás.

Con motivo de una nueva edición del curso sobre estándares web aprovecho para retomar mi blog. Ayer hizo un mes desde mi último post en el que escribía sobre Opina. Durante estas últimas semanas me ha pasado de todo un poco. El 1 de marzo me incorporaba a GMV-SGI y días después caía enfermo con amigdalitis aguda sin poder salir de casa por la fiebre. Creo que he visitado más veces el servicio de urgencias durante los pasados tres meses que en el resto de mi vida. Esta amigdalitis tuvo la culpa de que no pudiera intervenir en IMAGINATICA 2007. Me supo muy mal porque llevaba colaborando con la organización algunas semanas y finalmente, tanto la mesa redonda sobre accesibilidad web, como la ponencia y taller sobre Maven, se tuvieron que anular. Me quedé con las ganas de conocer a algunos de los ponentes, era una oportunidad estupenda para conocer a gente que no conozco personalmente pero a la que leo desde hace años.

El jueves pasado terminó una nueva edición del curso sobre estándares web que he impartido en la Universidad de Sevilla. Para esta nueva edición no he preparado transparencias nuevas, usé las mismas que en la edición anterior [PDF|ODP]. Sin embargo, sí se han preparado nuevos ejemplos básicos (textos, listas, tablas, etc…) y se han revisado los 5 layouts de la edición anterior. Este material está disponible en un sistema de control de versiones. Los datos para acceder son:

• SCM: Subversion
• HOST: https://svn.scenesp.org/repos/EstandaresWeb/trunk
• USER: anonymous
• PASSWORD: anonymous

Esta edición se ha desarrollado durante tres jornadas de 5 horas. El guión del curso ha sido:

Primera jornada: Introducción

• ¿Qué son los estándares web? ¿Qué debemos entender por estándares web?
• La importancia de independizar contenido/estructura, forma/representación/aspecto y comportamiento/interacción.
• ¿Por qué y para qué debemos usar estándares web?
• Metodología, una propuesta para alcanzar nuestros objetivos con estándares web.
• Herramientas (Aptana IDE y algunas extensiones para Firefox)

Segunda jornada: Lenguaje de marcado

• Estructura global de un documento HTML y XHTML.
• Importancia del DOCTYPE, opciones y recomendaciones
• Texto
• Listas
• Tablas
• Vínculos
• Importancia de una semántica correcta.

Tercera jornada: Hojas de estilo

• Selectores
• Modelo de caja
• Contenido generado, numeración automática y listas
• Colores y fondos
• Fuentes
• Textos

En esta edición hice bastante hincapié en la importancia que tiene que nuestros documentos sean sintáctica y semánticamente correctos. Para la sintaxis nos ayudamos del servicio de validación del W3C para lenguaje de marcado y de la extensión Tidy Validator, sin embargo para la semántica hicimos varios ejercicios y visitamos algunas páginas sobre las que discutir acerca de su marcado. Una vez que se vieron las etiquetas a partir de las cuales íbamos a construir nuestras páginas, tratamos cuestiones como por ejemplo:

• Por qué si estamos maquetando un artículo es conveniente que el títular esté marcado como <hx>.
• Por qué es correcto usar una lista para implementar un menú de navegación.
• Por qué etiquetas como <i> o <font> están definidas como no recomendadas.
• Por qué atributos como “align” en las tablas no deben usarse.
• XHTML como una formalización de HTML. Principales diferencias desde el punto de vista sintáctico.

Una vez vistos los conceptos teóricos comenzamos con algo de práctica. El primer ejercicio consistía en implementar el siguiente layout:

Les entregué el layout impreso en un A4 y les propuse que cogiesen un bolígrafo y que marcasen la información que tenían delante de ellos en el A4. El objetivo del ejercicio era hacerles pensar qué etiquetas debían usar y cómo usarlas. Creo que fue un ejercio muy interesante porque ellos mismos se preguntaban si el hecho de que el título estuviera centrado era contenido o forma o si la imagen iba dentro del párrafo. Tras resolver algunas dudas y debatir sobre algunas cuestiones, nos dispusimos a transladar el marcado que habíamos definido sobre el papel a un documento XHTML. A continuación un ejemplo del marcado sobre el papel:

Tras la implementación vinieron las preguntas: ¿Cómo centro el título? ¿Por qué la imagen descuadra el texto y no sale donde la he colocado? Antes de comenzar con esas cuestiones les enseñe el ejercicio resuelto (XHTML + CSS) y les mostré como todo lo que tenía que ver con la representación y la forma, iba en la hoja de estilos. Haciendo uso de la extensión de Firefox, Web Developer, desactivé la hoja de estilos del ejemplo y lo que vieron era justo lo que ellos habían hecho.

Con este ejercicio les intenté mostrar esa separación entre contenido y forma de la que habíamos hablamos y la importancia de definir una semántica correcta, entre otras cosas, para que agentes de usuario como los lectores de pantalla puedan funcionar correctamente. Les planteé la siguiente cuestión: “Si el título del artículo en lugar de marcarlo como <h1> lo hubieramos marcado como <p>, ¿Qué implicaciones tendría?”

La verdad es que si en ediciones futuras tengo la oportunidad y los medios para grabar algunos ejercicios, lo haré. Creo que puede ser un material muy didáctico e interesante para transmitir los conceptos básicos sobre estándares web.

En cuanto tenga un hueco os hablaré sobre un nuevo juguete para virtualizar llamado Xen que un compañero de trabajo me ha enseñado y sobre el que estamos montando cositas.