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
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 confirmar
que 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.
Recursos importantes
Algunos recursos útiles para continuar tu estudio del uso de estándares
web:
Libros:
O’reilly no podía faltar en esta lista, así que empiezo con
dos títulos que deben estar en toda biblioteca:
HTML & XHTML:
The Definitive Guide, si no has leido esto aún, no deberías
hacer nada antes, este, en mi opinión, es el primer libro que todo
diseñador web debe conocer.
Cascading
Style Sheets: The Definitive Guide de Eric Meyer, la referencia obligada
para CSS.
Otro libro muy bueno:
Designing
With Web Standards de Jeffrey Zeldman. En un lenguaje claro y directo
Zeldman nos explica porqué diseñar con estándares web
es la elección adecuada.
Online:
El weblog de
Steve Smith ha recolectado una lista de links que podrían ser considerados
la crema y nata del diseño basado en estándares web.
La mejor lista de discusión sobre CSS: CSS
Discuss.
La guía
de estilo de la biblioteca de Nueva York tiene una serie de reglas sumamente útiles
para el uso de XHTML.
Si quieres entender CSS rápidamente, Wendy Peck nos explica lo básico
en CSS 101
Validador HTML.
Validador CSS.
Mayor información sobre estándares web en los sitios de Web
Standards Project y World Wide Web Consortium
W3C
FUENTE: http://www.maestrosdelweb.com/editorial/estandaresweb/
