Características básicas

Ésta es una introducción al desarrollo de páginas web basado en los estándares del World Wide Web Consortium. Esto significa que las páginas deben cumplir una serie de características que podemos resumir en cuatro reglas fundamentales, aunque obviamente el tema es más amplio.

Contenido y presentación

Tiene que haber '''separación entre contenido y presentación'''. El contenido se refiere al texto y el código HTML con que lo marcamos. La presentación es el diseño que le agregamos usando CSS. El mejor ejemplo de esto es Zen Garden, proyecto basado en la contribución –por parte de diseñadores de todo el mundo– de diferentes hojas de estilo para una misma plantilla HTML. Allí mismo, desactivando las hojas de estilos, se puede apreciar cómo el contenido no tiene ninguna información de diseño.

Código semántico y válido

La función del código HTML es marcar semánticamente el contenido. Esto significa que debemos marcar cada elemento del texto con el elemento HTML más apropiado a su función y significado. Como resultado, el documento debe tener una estructura lógica y estar organizado en secciones con sus respectivos encabezados. Finalmente, el código debe estar bien formado y por lo tanto cumplir las reglas de sintaxis establecidas en la especificación del lenguaje. Para comprobar esto usamos el servicio de validación del W3C.

Desarrollo cross-browsing

El diseño debe verse correctamente en todos los navegadores. Para esto debemos comenzar escribiendo la CSS de acuerdo con la especificación del lenguaje en cuanto al comportamiento que se espera de cada propiedad. Y luego aplicar las correcciones necesarias para asegurar compatibilidad con navegadores antiguos o con un soporte pobre de CSS. Para comprobar que la hoja de estilo cumpla las reglas de sintaxis también existe un servicio de validación del W3C.

Contenido accesible

La página debe ser accesible. Esto significa que todas las personas deben poder acceder al contenido independientemente de sus capacidades sensitivas o del medio que utilice para ello. Para conseguir esto se han elaborado las Directrices de Accesibilidad del Contenido Web y existen herramientas, como eXaminator, que nos permiten hacer una revisión automática de la accesibilidad de nuestras páginas.

Conocimientos iniciales

No es fácil aprender a desarrollar páginas web de acuerdo con los estándares. No existe una carrera universitaria específica de la disciplina y estudiar las especificaciones puede ser bastante tedioso. No obstante, en la Web podés encontrar buenos tutoriales y cursos con explicaciones prácticas para no desalentarte antes de comenzar. En principio, el artículo de Daniel Clemente funciona como una buena introducción; luego, como él mismo recomienda, conviene leer luego el curso de Juan R. Pozo y volver al primero para aclarar algunas dudas. Finalmente, el curso de Carlos Benavídez permite conocer las hojas de estilo.

Proceso de desarrollo

Al comenzar el armado de una página, la gran mayoría de las veces tenemos un mockup o maqueta preparado por los diseñadores. Con el diseño a la vista, identificamos el contenido y las secciones en que se divide el documento. Luego vamos agregando y marcando el texto de acuerdo con su función y significado en el documento.
Las secciones se marcan usando el elemento DIV con su respectivo nombre en el atributo id. Luego el documento mismo y cada sección deben tener un encabezado que marcamos con los elementos H1, H2, H3, etc. de acuerdo a su jerarquía. Si tenemos un menú de navegación lo marcamos con UL, para los párrafos o líneas de texto usamos P, etc. Las tablas, que son el elemento más común al armar un sitio en una herramienta WYSIWYG, las usamos solamente para datos tabulares.
Luego pasamos a maquetar, es decir darle al documento la estructura gráfica planeada en el diseño. Entonces recurrimos a las propiedades de posicionamiento de CSS para conseguir que las secciones se distribuyan en ''cajas'' y ''columnas''. Nada mejor que hacer paso a paso el tutorial de Russ Weakley para entender este proceso y comenzar a practicar el proceso de armado.
En la etapa final se completa la maqueta con los detalles visuales del diseño, usando imágenes o colores como fondo, agregando bordes y finalmente completando todos los detalles de color, tamaño y estilo del texto.

Herramientas

Antes de comenzar con el armado de páginas basado en estándares, hay que olvidarse de la vista de diseño de, por ejemplo, Dreamweaver; o bien reemplazarlo por alguno de los muchos editores de texto que existen. Luego, a medida que vamos armando una página, debemos probarla en diferentes navegadores. Los navegadores con mejor soporte de CSS son Safari y Chrome, ahora disponible para Windows. Pero el más útil es Firefox, que permite instalar una serie de extensiones que hacen nuestra vida más fácil. Por último, no queda otra que tener varias versiones de Internet Explorer para testeo completo.