May 31 2008

Crónica sobre “Día W3C en España: Standars for Business”

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 12:56

El otro día comentaba que tenía intención de asistir a “Día W3C en España: Standars for Business”. Finalmente no sucedió nada de última hora y pude ir con un compañero de trabajo. La agenda del evento, dejando a un lado la presentación y la clausura, estuvo formada por 12 intervenciones agrupadas en tres grupos, Web para todos, Web desde cualquier lugar y Web como base de conocimiento.

A continuación algunas notas de las intervenciones que me parerieron más interesantes:

Acciones de INTECO para la promoción de estándares de Accesibilidad

  • La verdad es que había oído hablar muy poco de INTECO. Para aquellos que no lo conozcan es el Instituto Nacional de Tecnologías de la Comunicación perteneciente al Ministerio de Industria, Turismo y Comercio.
  • Parece ser que uno de los objetivos es crear un observatorio de la accesibilidad en España.
  • En su sitio web podemos encontrar algunos informes interesantes e información muy útil sobre legislación y normativa.
  • Creo que debería ser desde este observatorio desde el que se llamase la atención a aquellas administraciones públicas que esto de la accesibilidad y los estándares web lo tienen muy poco priorizado.

Accesibilidad y usabilidad en el Ayuntamiento de Madrid: apuesta por los estándares del W3C

  • El resultado es muy bueno. Parece que ellos sí tienen aprendida la lección.
  • Me hubiera gustado una presentación algo más técnica en la que se hubiera hablado de los retos que proyecto de esta embergadura tiene.

La Accesibilidad Web en Caixa Galicia

  • Me resultó interesante conocer la impresión de uno de los responsables de la accesibilidad y estándares web de Caixa Galicia.
  • Al parece el gran reto fue manejar el volumen tan elevado de información para su adaptación a la web.
  • La apuesta está clara, prueba de ello son sus canales para dispositivos móviles.
  • Están convencidos de que el uso de los estándares web se verá reflejado en una mejora de la satisfacción de sus clientes.

De la accesibilidad a la movilidad pasando por los estándares

  • Fue una de las intervenciones más atractivas para mi especialmente porque se habló de W3C mobileOK y Mobile Best Practices.
  • TAW amplia sus posibilidades añadiendo TAW mobileOK.
  • Se hizo una breve presentación de la solución Merkur, que es un sistema de adaptación dinámica de contenidos web. Me hubiera gustado ver una demostración.
  • A las referencias que allí se dieron añado dev.mobi y ready.mobi.

Experiencia de un proyecto desde cero: soitu.es

  • Muy buena la versión móvil de soitu.es
  • Gran parte de las herramientas han sido fruto de un desarrollo interno.
  • Me encanta su actitud, liberan conocimiento.
  • Usan soluciones libres como Apache y PostgreSQL, lenguajes como C, PHP y Perl.

Aplicaciones web - APIs y formatos para simplificar el desarrollo y mejorar su utilidad

  • Una intervención de Charles McCathieNevile estupenda.
  • Hizo una exposición sobre su visión de los estándares y de la gran cantidad de APIs que existen para trabajar en la web (dojo, prototype, etc.) y de la necesidad de estandarizar la forma en la que esas API trabajan para facilitar los desarrollos.
  • Habló sobre HTML5 y dejo bien claro que esta “nueva versión” es una revisión de lo anterior con el fin de dejar lo que vale y añadir algunas cuestiones necesarias por el momento en el que se encuentran los agentes de usuario.
  • Habló de otros estándares del W3C como MathML y SVG.

Tu ruta por la ciudad de Zaragoza: Aplicación de la web semántica en la Web del Ayuntamiento de Zaragoza

  • La presencia del Ayuntamiento de Zaragoza en eventos comienza a resultar un poco aburrida sin embargo llevan unos años haciendo muy bien las cosas y están marcando una diferencia con el resto de administraciones.
  • Con base en la web semántica han construido un servicio para ofrecer rutas turísticas. El servicio integra modelos semánticos procedentes de bases de datos (monumentos, restaurantes, etc.), agenda de actividades y datos espaciales (Google Maps y IDEZar).
  • Un proyecto más donde el uso de estándares web es crucial para garantizar la interoperabilidad entre múltiples sistemas y que posteriormente la información pueda ser consumida.

Esto sólo han sido algunas notas que me traje del evento. Si alguien quiere las transparencias de las intervenciones puede encontrarlas en la página web del evento.


May 19 2008

Día W3C en España: Standards for Business

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 21:50

El próximo martes 27 de mayo se celebra en Madrid el día W3C en España y que mejor forma de celebrarlo que organizando un evento a nivel nacional. El título del evento es “Standards for Business”. Otra ocasión más en la que el tiempo me impidió presentar algo porque en esta ocasión el evento estaba completamente abierto para que cualquier pudiera presentar algo.

Viendo la agenda, he comprobado que Yaco Sistemas participará con una presentación de 20 minutos titulada: El reto de Yaco: Estandares abiertos en un mercado liderado por lo propietario y cerrado“.

Tras el evento procuraré escribir algunas impresiones.


May 18 2008

Re:Rediseño de la web del Gobierno de Aragón

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 22:35

Hace unos días leía en el blog de Daniel Tores Burriel que el Gobierno de Aragon había rediseñado su sitio web. Al verlo se me vino a la mente lo sucedido con el sitio web del Congreso de los diputados. Durante aquella polémica Javier Cañada proponía otra forma de criticar y en esta ocasión lo he puesto en práctica.

El rediseño que se ha realizado en el sitio web del Gobierno de Aragón deja mucho que desear, tiene errores demasiado graves, sin embargo, lo que más me sigue llamando la atención es como en la administración pública siguen sucediendo estas cosas. ¿Por qué seguimos teniendo estos resultados tras un concurso público?

Durante el día de hoy he estado preparando una implementación partiendo de la idea original, simplemente me he limitado a aplicar buenas práticas que existen alrededor de los estándares web. La propuesta es muy mejorable, pero si yo que no me dedico a esto he conseguido este resultado durante un domingo lluvioso, ¿Qué no puede llegar a conseguir un desarrollador especializado en interfaces web?


Feb 24 2008

Se puede, con Plone claro que se puede

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 01:16

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.

Captura de pantalla del sitio web del Ayuntamiento de Lepe


Sep 26 2007

Fundamentos Web 2007 ya está aquí

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 19:32

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)

Logotipo del congreso Fundamentos Web

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.


Jun 18 2007

El sitio web del Congreso de los diputados es perfecto

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 21:46

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.
    Captura de pantalla del sitio web del Congreso de los diputados (referencia 1)
  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>.
    Captura de pantalla con información sobre el sitio web del Congreso de los diputados
  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.
    Captura de pantalla con información sobre la validación del sitio web del Congreso de los diputados
  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:

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.


Apr 29 2007

serestandar.es: Congreso de diseño y desarrollo web basado en estándares

Tag: Estándares webManuel Jesús Recena Soto @ 14:17

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.

Logo del congreso


Mar 25 2007

Nueva edición del curso sobre estándares web

Tag: Estándares webManuel Jesús Recena Soto @ 19:54

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.


Feb 19 2007

IMAGINATICA 2007: hacia la informática del futuro

Tag: Estándares web, HerramientasManuel Jesús Recena Soto @ 19:54

Tras algunos cambios de última hora parece que por fin puedo confirmar la fecha y el lugar de los siguientes eventos:

Ponencia: “Tuneando” la gestión de proyectos java con Maven.

  • Duración: 2 horas
  • Lugar: Salón de grados de la Escuela Técnica Superior de Ingeniería Informática de la Universidad de Sevilla
  • Fecha y hora: jueves 8 de marzo a las 16:00h.

Taller: ¡Una de MAVEN por favor!

  • Duración: 2 horas
  • Lugar: Aula F1.30 de la Escuela Técnica Superior de Ingeniería Informática de la Universidad de Sevilla
  • Fecha y hora: martes 6 de marzo a las 18:30h.

Mesa redonda: Accesibilidad web

  • Duración: 2 horas
  • Lugar: Sala de Juntas de la Facultad de Matemáticas
  • Fecha y hora: miércoles 7 marzo a las 18:30h.

En un post anterior informaba sobre una ponencia titulada “Construyendo la web con materiales sólidos”. Parece ser que por motivos internos de la organización esta ponencia ha sido sustituida por la mesa redonda sobre accesibilidad web. Personalmente creo que es un cambio acertado porque me han adelantando que es probable que venga gente en representación de la ONCE.

Dado que había comenzado a preparar material para esta ponencia, es probable que más adelante lo publique o incluso organice un seminario.


Feb 08 2007

Próxima intervención, IMAGINATICA 2007: hacia la informática del futuro

Tag: Estándares web, HerramientasManuel Jesús Recena Soto @ 20:56

Con motivo de IMAGINATICA 2007: hacia la informática del futuro estoy preparando dos nuevas ponencias y un taller. Para los que estéis interesados, los títulos son:

  • Construyendo la web con materiales sólidos. Ponencia, 2h.
  • “Tuneando” la gestión de proyectos java con Maven. Ponencia, 2h.
  • ¡Una de Maven por favor!. Taller, 2h.

La fecha exacta aun no la puedo confirmar pero lo que sí os puedo adelantar es que se celebrarán durante la semana del próximo día 5 de marzo. Es muy probable que el lugar sea la Escuela Técnica Superior de Ingeniería Informática de la Universidad de Sevilla.


Dec 18 2006

Tres capturas que hablan por sí solas

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 22:33

Ayer por la tarde estuve impartiendo una charla sobre accesibilidad web en la Universidad Pablo de Olavide. La charla fue muy interesante y todo un reto para mi porque nunca me había dirigido a un público tan dispar hablando sobre temas de accesibilidad. El resultado fue que tuve que reconducir la charla para lograr captar la atención de los asistentes. Eran varios los objetivos de la charla, pero pensé que sería satisfactorio si lograba sensibilizar a los asistentes y hacerles ver la importancia que tiene facilitar el acceso a la información a los usuarios.

Para la charla, aparte de las transparencias que usé de uno de mis anteriores seminarios, preparé algunas capturas de pantalla entre las que me gustaría destacar las tres siguientes capturas:


Oct 08 2006

Algunos ejemplos básicos empleados en el curso de Estándares Web

Tag: Estándares webManuel Jesús Recena Soto @ 15:07

Con motivo del curso sobre estándares web que estoy impartiendo en la Universidad de Sevilla, y que organiza el Centro del formación del P.A.S., he preparado algunos ejemplos básicos con los que poder asimilar mejor los conceptos que se han ido presentando durante el curso. A continuación una breve descripción de los ejemplos:

  1. Layout1: Es un layout muy básico compuesto por una sóla columna con sus correspondientes titulares (hx), párrafos, enlaces, márgenes, imágenes, etc… El layout está definido de tal forma que resulte fácil pasar a un diseño fijo (p.e. 800px o 1024px) alineadado a la izquierda, a la derecha o bien centrado.
  2. Layout2: Muy parecido al anterior pero además se ha definido una cabecera, un pie y se ha creado una estructura algo más perfilada para las imágenes que nos permite añadir un pie de foto.
  3. Layout3: A partir del ejemplo anterior hemos pasado a un layout de dos columnas en el que hemos usado la columna de la izquierda para implementar un pequeño sistema de navegación haciendo uso de listas desordenadas.
  4. Layout4: A partir del ejemplo anterior hemos pasado a un layout de tres columnas, haciendo que la columna de la derecha nos sirva para colocar nuestros banners.
  5. Layout5 y listas: Son dos ejemplos que se han desarrollado durante el curso para explicar algunos conceptos.

Las siguientes capturas de pantalla corresponden con los cuatro primeros ejemplos:


Sep 19 2006

Estándares Web

Tag: Estándares webManuel Jesús Recena Soto @ 10:33

El pasado 18 de septiembre comencé a impartir un curso sobre estándares web en la Universidad de Sevilla. La duración del curso es de 20 horas y están distribuidas en 5 cinco días. Uno de los principales objetivos del curso es proporcionar una introducción a los estándares web. Para ello prepararé algunas transparencias [PDF|ODP] para utilizarlas como guía.

Durante el curso se responderán las preguntas:

  • ¿Por qué debemos usar estándares web?
  • ¿Para qué debemos usar estándares web?
  • ¿Cómo usar los estándares web?

En la presentación se explicó el modelo de tres capas:

  • Contenido / Estructura
  • Forma / Representación / Aspecto
  • Comportamiento / Interacción

A la hora de explicar este tipo de contenidos me he encontrado con un gran reto a superar. Existen demasiados vicios a la hora de desarrollar contenidos para web. ¿Cómo le explicas a un usuario que hacer lo que hace con tablas no es correcto? Sus respuestas pueden ser muy variadas. Por ejemplo puede decirte que él sabe hacerlo así y que obtiene el resultado que desea. Que si ya hay una forma de hacerlo, para qué aprender otra. Es precisamente en este instante cuando hay que coger un papel y un bolígrafo y escribir en dos columnas “PROS” y “CONTRAS”. En este caso, gracias a documentos como “Por qué diseñar con tablas es estúpido” resulta sencillo explicar las ventajas que tiene el no trabajar con tablas para la maquetación de contenidos. Sin embargo, existen otras situaciones en las hay que buscar ejemplos para que ellos mismos descubran las ventajas. ¿Qué le impide a un usuario coger su herramienta de autor (dreamweaver, frontpage, etc…) y definir un título de un documento como un texto dentro de un párrafo con tamaño de 35? El código podría ser similar a esto:

<p><font size="35" color="red">Análisis regional</font></p>

Cuando le explicas al usuario que si en lugar de tener un solo documento HTML tiene 30 cada uno de ellos con un título y se encuentra en la necesidad de querer cambiar el tamaño y/o color va a tener que modificar todos los documentos uno por uno, entonces su nivel de atención aumenta porque espera que le cuentes cómo hacerlo con mucho menos trabajo.

Para este caso sería suficiente con algo tan simple como:

<h1>Análisis regional</h1>

h1 {
    font-size: 35px;
    color: red;
}

Es recomendable (altamente) usar medidas proporcionales (%, em).

Con ejemplos como este es cuando verdaderamente descubren todas la ventajas de hacer uso de las buenas prácticas y seguir correctamente los estándares web.


Sep 11 2006

Sólo una de las 14 consejerías ofrece internet accesible para todos

Tag: Accesibilidad, Estándares webManuel Jesús Recena Soto @ 10:51

Este es el títular de la noticia publicada en el Diario de Sevilla con fecha 13 de agosto de 2006. Parece ser que un estudio realizado sobre accesiblidad en los sitios web de la Junta de Andalucía desvela que, el cumplimiento de la Ley de Servicios de la Información y del Comercio Electrónico (LSSI) que desde el pasado 1 de Enero de 2006 entró en vigor, muy pocos la cumplen.

Aunque el estudio se basa simplemente en los resultados que genera la herramienta TAW y esto no “debe” considerarse un resultado final para medir los niveles de accesibilidad de un contenido web, los datos que se exponen en la noticia son muy desalentadores. Han pasado ocho meses desde que la ley entrase en vigor y sin embargo la situación actual dista mucho de lo que debe ser internet para las administraciones públicas.

Como personal técnico del Servicio de Informática de la Consejería de Obras Públicas y Transportes especializado en tecnologías web puedo afirmar que se está haciendo un gran esfuerzo por mejorar la accesibilidad y la calidad de los distintos servicios que actualmente se ofrecen a los usuarios.

En marzo de 2005 me propusieron adaptar el sitio web de la Consejería de Obras Públicas y Transportes con el fin de mejorar su accesibilidad, y como no, cumplir con la ley que entraría en vigor nueve meses más tarde. Sin necesidad de entrar en demasiados detalles paso a comentar algunos frentes importantes que había que resolver:

  • Gran cantidad de contenidos estáticos mal formados y sin ninguna organización en su almacen de datos. No existía una arquitectura de información que justificase cómo y dónde debían estar almacenados esos documentos.
  • Uso de formatos propietarios procedentes de la Suite ofimática Microsoft Office para la publicación de información.
  • Un gestor de contenidos implementado con tecnología Java y XML/XSLT diseñado exclusivamente y con una antigüedad de unos 4 años.
  • Un equipo de trabajo reducido, compuesto por un diseñador, un maquetador sin experiencia en estándares web y un programador.
  • Etc…

Evidentemente el reto estaba en conseguir nuestros objetivos partiendo de lo que se tenía, porque la opción de comenzar desde cero se quedó en el camino durante los primeros días de análisis. El objetivo era adaptar, cualquier otra opción hubiera implicado un mayor tiempo de desarrollo y un gasto económico muy importante.