Que son los estandares de la web, concepto y beneficios de validar una web

[Alejo]

En este primer artículo sobre el tema presento a los estándares web, los beneficios de su uso, como empezar a trabajar con ellos y algunas conclusiones importantes para todo aquel que desea crear sitios web usables, fáciles de mantener.

 

Después de más de dos años trabajando con estándares web he querido compartir algunos comentarios al respecto.

 

En este primer artículo sobre el tema presento a los estándares web, los beneficios de su uso, como empezar a trabajar con ellos y algunas

conclusiones importantes para todo aquel que desea crear sitios web usables, fáciles de mantener y creados para el futuro. Al final incluyo una

lista de recursos sumamente útiles.

 

¿Qué son estándares web?

 

 

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web.

 

Son un conjunto de tecnologías orientadas a brindar beneficios a la mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado en el Web.

 

El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.

 

Los beneficios del uso de estándares web Un sitio basado en estándares web mostrará una mayor consistencia visual. Gracias al uso de XHTML para el contenido y CSS para la apariencia, se puede transformar rápidamente un sitio, sin importar que se trate

de una página web o miles, realizando cambios en un solo lugar.

 

Los documentos que separan apariencia de contenido usan menos código, además, CSS permite conseguir efectos que antes requerían el

uso de Javascript e imágenes, por lo que los sitios basados en estándares utilizan menos ancho de banda y se muestran más rápido a los usuarios, mejorando dramáticamente la experiencia de estos.

 

Los documentos basados en XHTML válido son más relevantes para los motores de búsqueda, contienen mayor información y menos código, por lo que un sitio basado en estándares web tendrá una mejor posición.

 

De igual manera, la posición en directorios, editados por humanos, se verá beneficiada pues el sitio será más usable.

 

XHTML es una aplicación de XML, por lo que el contenido puede ser procesado de muchas formas, permitiendo la creación de sitios extensibles.

 

El uso de validadores nos permite crear XHTML bien formado.

 

Un sitio basado en estándares web es compatible con todos los navegadores actuales, y lo será con versiones futuras. Funcionará tan bien

en un PC, un navegador aural y un teléfono móvil dentro de diez años.

 

Un sitio basado en estándares web es más fácil de mantener y actualizar, el código es más simple, de esta forma se elimina la dependencia de un solo desarrollador.

 

Un sitio basado en estándares web es más accesible, permitiendo a personas con discapacidades utilizar su contenido.

 

Diseñando estructuralmente

 

Hasta ahora gran parte de los diseñadores web creaban sus documentos desde una perspectiva visual.

 

Luego de crear nuestro boceto, cortamos y decidimos cuantas tablas crear y en que celda insertaremos tal o cual parte del diseño. ¿Necesito

un borde de color rojo?, no hay problema, ¡crearé una tabla dentro de otra y listo!

 

Cuando se diseña utilizando estándares web se empieza con la estructura de un documento.

 

¿Cuales son las piezas de información?, este texto es un título, estos serán párrafos, aquí tengo una lista ordenada, la frase siguiente es una cita y aquí insertaré un subtítulo.

 

Primero se crea la estructura y luego el estilo, o apariencia.

 

En otras palabras, empezamos con la estructura del contenido y luego vamos trabajando el diseño visual, en vez de hacerlo al revés.

 

Esta forma de trabajo puede resultar extraña para todos aquellos acostumbrados a “dibujar” sus páginas web, puedo escuchar a algunos usuarios gritando “blasfemo!, hereje!”. Las ventajas de diseñar con estándares web compensarán con creces el tiempo invertido en aprender el nuevo método, creanme.

 

Consideremos el siguiente ejemplo:

 

Hemos creado un diseño en el cual tenemos un bloque de contenido, compuesto por texto e imágenes. Ese diseño se utiliza en veinte

páginas diferentes del sitio. Nuestro cliente está de acuerdo en todo salvo que desea que el fondo del bloque no sea azul sino verde, que

los textos empiecen un poco más a la derecha y… “Ah!, ¿Podríamos ver como queda con un borde fino marrón?”.

 

Si trabajamos de la forma “tradicional” deberiamos abrir cada una de las veinte páginas, encontrar el código de las tablas y celdas correspondientes

a la sección por modificar, cambiar algunos bgcolor, modificar el cell padding (quien pensó en modificar el ancho está peor de lo que pensaba!) y, tristemente, crear una tabla dentro de otra si queremos “simular” un borde de un pixel.

 

Este cambio, repito, se debe realizar en cada una de las veinte páginas. Cuando volvemos a visitar a nuestro cliente este nos dice: “Perfecto, pero

podríamos probar con rojo en vez de verde y el borde en negro?”. Suele pasar, lo he vivido cientos de veces.

 

Creo que va quedando clara la idea.

 

Si hubieramos diseñado de acuerdo a estándares web no deberiamos tocar el código HTML, bastaría con cambiar tres líneas en nuestro archivo CSS, algo como esto:

 

#contenido {
background-color: #336699;
padding-left: 5px;
border: 1px solid #336699;
}

 

El cambio se notaría automáticamente en todas las páginas usando ese estilo, sean veinte o mil, y no habría necesidad de una segunda

reunión con nuestro cliente (todos sabemos que este proceso de revisión y reuniones puede ser, a veces, interminable), los cambios se pueden hacer al instante.

 

Estoy convencido, ¿Cómo empiezo?

 

¡Por el principio!

 

Lamentablemente muchos diseñadores web solamente conocen las aplicaciones, no menciono nombres pero todos sabemos cuales son, que les permiten generar sus páginas web y no conocen, o no les interesa conocer, el código que hace que esas páginas funcionen.

 

Para poder desarrollar sitios web es necesario tener un conocimiento a fondo de HTML (Hipertext Markup Language) para crear documentos y CSS (Cascading Style Sheets) para manejar su apariencia.

 

En un mundo ideal, un diseñador web debería ser capaz de crear sus páginas utilizando cualquier editor de texto ASCII.

 

HTML ha sido actualizado en múltiples ocasiones y existen varias versiones, cada una con diferentes reglas. Estas reglas son indicadas en documentos conocidos como DTD (Document Type Definitions).

 

Recomiendo aprender XHTML 1.1, el sucesor de HTML 4. Una combinación del clásico HTML y el muy potente XML.

 

Luego debes aprender el uso de CSS, hojas de estilo en cascada. Empieza con cambios simples, modificar los fonts y colores de textos, por ejemplo. Luego entiende los conceptos de cascada y el modelo de cajas (box model).

 

Cuando estes familiarizado con el poder de CSS, puedes empezar con los conceptos de posicionamiento.

 

Recuerda probar tus diseños en un navegador compatible con estándares web: Mozilla (especialmente el excelente Firefox), Opera o Safari son los recomendables.

 

También es bueno probar como lucen en navegadores que no soportan completamente los estándares, como Internet Explorer.

 

Es obvio, pero vale mencionarlo: Los navegadores 4.x constituyen una minoría y ninguno interpreta correctamente estándares web. Si tus visitantes usan navegadores de 1997, la sugerencia lógica es una actualización.

 

En todo caso, lo bueno de usar estándares web es que el contenido será accesible incluso para navegadores antiguos, aún cuando los efectos de diseño no sean los deseados, recuerda la primera ley del Web: El contenido es rey.

 

Otras sugerencias útiles:

 

Utiliza el tipo correcto de documento (doctype): Cada página debe contener, como primer elemento, información sobre el DTD usado. Esto

es importante para que los navgeadores sepan como comportarse, además, los validadores no podrán verificar las páginas si no se indica

un doctype.

 

Valida tu código:

 

Este paso es sumamente importante para confirmarque nuestros documentos han sido creados correctamente, respetando los estándares

recomendados. Al final de este artículo podrás encontrar las direcciones de los principales validadores.

 

Elimina todos los elementos de HTML relacionados a la presentación (como b, i, font, color, bgcolor) y utiliza CSS.

 

Utiliza tablas HTML para lo que fueron creadas: Presentar datos de forma tabular, como hojas de cálculo. Muchos aún las utilizan para lograr efectos de diseño.

 

Un amigo me comentó que prefería seguir con su diseño “full tablitas” pues CSS era muy complicado y no le gustaba. Aprender a utilizar

adecuadamente CSS toma tiempo y requiere paciencia, pero no culpemos a la tecnología de ser complicada o inútil simplemente por ser diferente a lo que estamos acostumbrados, o mejor dicho: Mal acostumbrados.

 

Muy interesante pero…

 

Sé lo que estas pensando: ¿Vale la pena complicarme con todo esto?

 

Esto no se trata simplemente de diseño gráfico, estamos hablando de crear sitios web fáciles de usar y mantener. Al separar estructura

y contenido obtenemos grandes beneficios, podemos cambiar completamente el aspecto de un sitio en solo horas. Podemos diseñar para todo tipo de navegador y dispositivo, sin crear múltiples versiones, y además tener páginas más usables y rápidas en la descarga.

 

Para decirlo directamente: El diseño web “tradicional”, basado en HTML de presentación, y no de estructura, será obsoleto en muy

poco tiempo, muchos sitios están siendo rediseñados basados en estándares web y el paso lógico es aprender, o mejor dicho re-aprender, los conceptos de diseño web.

 

Además, ¿Porqué debemos seguir diseñando de manera errónea para navegadores que no interpretan adecuadamente los estándares?, ¿No

sería mejor diseñar correctamente y obligar a los fabricantes de software a crear mejores productos?

 

Considera las nuevas leyes sobre accesibilidad, en muchos paises los sitios gubernamentales están obligados a ser accesibles.

 

Como Jeffrey Zeldman comenta: “Por años nos han obligado a ser los pequeños y buenos diseñadores web, construyendo sitios que luzcan bien en navegadores que no funcionan”, ahora tenemos navegadores que por funcionan, empecemos a diseñar correctamente!

 

Finalmente, he visto comentarios acerca de la simplicidad en el diseño de los sitios basados en estándares web. Hace dos o tres años,

cuando muchos desarrolladores dieron el salto al uso de estándares web, esto podía ser cierto, en la actualidad creo que un link vale más

que mil palabras: Zen Garden.

 

Conclusiones

 

El uso de estándares web y la separación entre estructura y presentación ofrece múltiples beneficios para hoy y mañana.

 

Hoy: Acceso a una mayor audiencia, menor costo de producción y cumplir con los requerimientos de accesibilidad.

 

Mañana: Reducir costos de mantenimiento, así como la dependencia de algún producto de software, flexibilidad para los cambios de presentación

y una puerta abierta al uso de tecnologías como XML.

 

 

Fuente