Que son los Estandares Web. Una explicacion sintetica de lo que abarca el termino

Artículo escrito por
Robert Nyman

Versión original en:
What are Web Standards?
A comprehensive explanation of what is comprised in the term.

Traducción al español: Alfonso Catrón

El término Estándares Web aparece por todas partes en internet, en reuniones con clientes y entre diseñadores web en general. Sin embargo, el problema es que todos tienen diferentes perspectivas sobre lo que el término realmente significa y abarca.

Por eso voy a tratar de explicar mi punto de vista sobre el tema, y lo que de hecho la gente quiere decir cuando se refiere a Estándares Web.

No existen Estándares Web, sólo recomendaciones

Primero, no existen Estándares Web en el sentido estricto respecto a las tecnologías que utilizamos. Lo que existe son órganos de estandarización, como los que promueven los estándares ISO y Ecma. Cuando la gente se refire a Estándares Web, generalmente está hablando del trabajo del W3C.

La diferencia es que el W3C no fija estándares sino recomendaciones. En sus propias palabras:

Una recomendación del W3C es una especificación o un conjunto de lineamientos que, luego de un extenso proceso de construcción de consenso, ha recibido el apoyo de los miembros del W3C y su Director. W3C sugiere la aplicación global de sus Recomendaciones.

Lo que la gente quiere decir con Estándares Web

Los estándares Web se utilizan como referencia para desarrollar HTML/XHTML, aunque se debe tener en cuenta que el trabajo de W3C involucra, además, una amplia variedad de informes y publicaciones técnicas. Generalmente, lo que el término “Estándares Web” abarca incluye las siguentes áreas:

• Código HTML/XHTML válido
• Código semánticamente correcto
• Separación del contenido (HTML/XHTML), presentación (CSS) e interacción (JavaScript)

Para alguna gente, significa todas las áreas antedichas, y para otros apenas una de ellas. Lo que es importante saber, es que las tres áreas son cruciales para desarrollar un sitio web realmente bueno.

Código HTML/XHTML válido

Empecemos por el principio: principalmente a lo que la gente (colegas, clientes, etc) se refiere cuando pregunta por Estándares de Web, es a que el código del sitio debería validar. Aunque para la mayor parte de las personas esto sólo se refiere al código HTML/XHTML, hay también instrumentos para validar el código CSS. Básicamente, validar el HTML/XHTML consiste en verificar que el código de la página web esté escrito de acuerdo a las definiciones dadas por el doctype que se ha elegido para el documento.

Es muy importante elegir el doctype con cuidado, porque va a afectar la manera en que el código HTML/XHTML es interpretado y qué modo de layout va a ser activado en los distintos navegadores web. Teniendo código válido, no va a tener que apoyarse en los mecanismos de manejo de error que varían en cada navegador web, sino que el código se supone va a ser renderizado de la misma manera por todos.

Validando su código, muy probablemente encontrará errores y resolverá problemas de diseño que de otra manera nunca habría pensado que estaban relacionados con el código HTML/XHTML. Esto hará más fácil identificar errores potenciales, acelerando el desarrollo y preparando bases sólidas para el mantenimiento futuro.

Lecturas adicionales sobre por qué debería validar su código

• ¿Por qué validar? (en inglés)
• ¿Por qué validar su HTML? (en inglés)
• ¿Por qué validar sus páginas? (en inglés)

Herramientas para validar código

Hay numerosos instrumentos de validación en línea, así como complementos para varios navegadores web. Los más populares:

• Servicio de Validación de Código del W3C (en inglés)
• Servicio de Validación de de CSS del W3C (en inglés)
• WDG HTML Validator (en inglés)
• Firefox HTML Validator add-on (en inglés)
• Internet Explorer Developer Toolbar (en inglés)

Lea más sobre doctypes

• Arregle su sitio con el DOCTYPE adecuado! (en inglés)
• Activando el modo de layout correcto usando la declaración Doctype (en inglés)
• Listas recomendadas de DTD según el W3C (en inglés)

Código Semánticamente Correcto

Algo que a menudo es pasado por alto, es el significado del código semánticamente correcto. La idea es que cada contenido en una página Web debería estar marcado con una etiqueta que comunique su sentido, su valor y objetivo. La explicación de esto es que se deben usar elementos apropiados según el contexto.

Ejemplos de código

Este código es pobre semánticamente

Este código es rico semánticamente

Las pautas y las recomendaciones para escribir código semántico correctamente son bastante fáciles de seguir.  Simplente usar etiquetas de encabezado (h1-h6) para los diferentes tipos de títulos, etiquetas de párrafo (p) para párrafos de textos, etiquetas de listas (ul, ol, li, etc.) para cualquier clase de listado de tenga, y así sucesivamente.

Esto además le ayudará a identificar con más facilidad las partes de una página Web, y va a disminuir el tiempo de carga del documento porque estará utilizando menos código. Al mismo tiempo simplificará notablemente el mantenimiento de su sitio. Y, no hay que olvidarse de algo muy importante: esto le también ayudará con el SEO (optimización para motores de búsqueda), porque el código semántico ayudará a Google y otros motores de búsqueda a entender correctamente e indexar cada trozo del código, maximizando los resultados.

Es importante advertir que la semántica apropiada no debe confundise con cómo está siendo renderizado, o presentado visualemente por el navegador, el sitio. Los elementos serán mostrados de manera diferente según el navegador web utilizado, pero no es por fallas del código semántico; son sólo diferencias en las implementaciones de cada navegador web. La solución a esto no es cambiar el código semántico, sino lograr una presentación unificada a través de hojas de estilo (CSS).

Lea más sobrmore about semantics

• El Sentido de la Sémantica
• Sémantica, HTML, XHTML, y Estructure
• Código Semántico: Qué? Cómo? Por Qué?

Separación de contenido (HTML/XHTML), presentación (CSS) e interacción (JavaScript)

Hay varios motivos que fundamentan por qué es vital separar el HTML/XHTML, el CSS y el código JavaScript. Estos tipos de código tienen objetivos muy diferentes, y cómo usarlos debe ser pensado con cuidado.

Razones principales para la separación

• Velocidad: los archivos externos .css y .js se guardan en el caché del navegador del usuario después de la primera carga, esto disminuye los tiempos de carga y mejorará la experiencia de uso.
• Claridad: es más fácil saber donde buscar y colocar el código, cada parte cumple su propio objetivo.
• Reusabilidad: puede fácilmente comentar y referenciar el codigo. Y reutilizarlo en todo el sitio.
• Mantenimiento: El código HTML o XHTML está en una ubicación central, y se desprende el código de presentación (css) e interaccion (js) en archivos externos. Siendo muy fácil aplicarlos a todas las páginas del sitio.

Leer más sobre separación de HTML/XHTML, CSS y JavaScript

• Los tres niveles del diseño web
• Separando comportamiento y estructura
• AJAX, JavaScript y accesibilidad

Qué Pasa con la Accesibilidad?

Existe un concepto erróneo, muy extendido, que es que el desarrollo de un sitio web accesible involucra mucho trabajo suplementario. En realidad, si se asegura que cumple con las tres categorías mencionadas en este artículo, ya ha realizado gran parte del trabajo necesario para hacer un sitio web accesible.

Validando el código, sobre todo en conjunto con un doctype estricto, le ayudará a encontrar errores de contenido y textos alternos no existentes. El código semántico bien escrito facilitará el acceso desde cualquier dispositivo de asistencia, o de manera plana visualizando la pagina sin CSS, haciéndolo mucho más fácil y comprensible.

Finalmente, separando el código de interacción (JavaScript) del código HTML/XHTML, el sitio funcionará sin JavaScript si está bien construido. Entonces, puede mejorar progresivamente la de uso de su sitio Web añadiendo JavaScript, pero un sitio Web nunca debería ser totalmente dependiente de javascsript para que las partes básicas funcionen.

Lea más sobre accessibilidad

• Que es Accesibilidad?
• Evaluando la accesibilidad de un sitio web.
  
• Qué es Accesibilidad Web?

Cómo continuar desde acá

Abajo he reunido una lista de recursos para aprender mas sobre cómo trabajar en base a los Estándares Web definidos antes:

• Developing With Web Standards
• Web standards checklist
• Zeldman: Designing With Web Standards, 2nd Edition
• The business case for Web standards-based development
• Unobtrusive Javascript