Estándares Web

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.

6 thoughts on “Estándares Web

  1. Muy buenas Manuel.

    ¿Vas a repetir el curso?. La verdad es que conocer que existes, y encima en mi ciudad me ha dado mucha alegría. Me sentía un poco sólo en “la lucha”. La verdad es que llevo aproximadamente 1 año aferrado al diseño web con estándares y cada vez me engancha más.

    Encantado de que estés en la blogosfera 😉

  2. Hola Domingo:

    Efectivamente, fue en septiembre. Ya lo he corregido.
    Me alegro mucho que opines eso del curso y espero que los objetivos marcados se hayan alcanzando. Para cualquier cosa que necesitéis, sólo tenéis que escribirme.

  3. Muy buenas!.

    Ante todo!…enhorabuena por la calidad del blog, tandem estética-contenido, ya te tengo “capturado” via RSS 😀

    Una sola cuestión con el ejemplo que pones en este artículo. En lugar de “px” utiliza “ems” que es más adecuado para adaptarse a las recomendaciones WAI-WCAG 1.0

    Trabajo en accesibilidad web hace bastante tiempo y siempre es importante que, además de una buena presentación html-css semánticamente correcta, el desarrollador se preocupe por hacer su proyecto acccesible.

    Más información: http://www.w3c.es/divulgacion/guiasbreves/Accesibilidad

    Saludos a todos!.

  4. Hola Federico:

    Bueno, la calidad por ahora brilla por su ausencia. Es poco el tiempo que tengo para dedicarle, pero poco a poco.

    Con respecto al comentario sobre el tipo de medida para las fuentes tienes toda la razón, pero no pretendía explicar cómo debe hacerse, sino como algo que antes de hacía de una forma, ahora se puede hacer exactamente igual de otra forma. Durante el curso intenté explicar las grandes ventajas de hacer las cosas de esta “otra” forma.

    Un cordial saludo

Leave a Reply

Your email address will not be published. Required fields are marked *