Mi espacio

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.