The Inside Out

Diseño Web

11/02/2004

Acabo de terminar el rediseño del sitio web de mi gran amigo Buanzo. Aunque todavía es un sitio "accent-free", ha pasado a cumplir con los estándares de diseño web: XHTML 1.0 Strict, CSS 2, limpieza, estructura... Lo que están acostumbrados a ver aquí, por ejemplo.

Mi familia está contenta, y tengo un par de proyectos de ellos. El problema es que no me dan la carne para hacerlos. Y con nada no se hace nada.

Si mi hermano, por decir algo, quisiera una página para mostrar las fotos de granitos de arena que sacó en la playa el año pasado; podría crear un sitio. Si mi madre quisiese mostrar en todo su obsceno detalle una nueva técnica psicoanalítica, podría crear un sitio.

Sin embargo, caen a decirme "todavía no hiciste mi página". La respuesta es siempre la misma: "Vos no me diste la carne. Los datos". Sin ellos, crear sitios es como diseñar una casa sin saber quién va a vivir allí (y todos sabemos lo cómodos que se sienten los Roldán en su casa nueva).

Tal vez se pregunten qué es eso del diseño siguiendo estándares. Esa mitológica bestia nace de la idea desquiciada de algunos diseñadores y activistas, que pretendían y pretenden una red accesible por todos y no dominada y dividida por algunos. Llegaron incluso a convencer a las dos potencias en el tema (Microsoft, Netscape) para que siguieran dichos estándares en lugar de lo que se les viniera en gana.

El resultado es que hoy en día es más fácil y limpio escribir código HTML. Explorer 6, Netscape 7.1, Mozilla (cualquier versión) y sus hijos, Opera, son navegadores para los cuales escribir es lindo. El problema principal lo plantea la supervivencia de Netscape 4.x y de Explorer 5.x, que no se han puesto al día.

Pero basta de software, hablemos de algo más interesante: el diseño de páginas. Actualmente, el diseño de una página se divide en tres partes: el contenido, escrito en lenguaje HTML o XHTML (veremos luego la diferencia); la presentación, escrita en lenguaje CSS; y el comportamiento que se expresa en ECMAScript (la versión estándar de JavaScript) a través del DOM.

Whoa. Esas fueron demasiadas siglas juntas. Veámoslas, con un poco más de calma.

• El lenguaje HTML es un lenguaje de marcas que permite mostrar texto estructurado en internet: párrafos, listas, definiciones, etc. XHTML es una expansión/extensión del lenguaje que lo acerca a su primo XML. Lo que nos interesa saber de esto es que este cambio hace al lenguaje XHTML más limpio y claro. Por darles un ejemplo técnico, antes algunas tags podían no cerrarse (e.g. <p>, <li>). Ahora, toda tag debe tener su tag de cierre (<p></p>). Incluso aquellas que no tienen tag de cierre cambian para "cerrar": <br> ahora se escribe <br />.
• CSS (Cascading Style Sheets) es lo que verán si hacen click en este enlace. El lenguaje CSS permite dar a cada tag HTML un estilo: puedo decir si los párrafos llevan bordes, márgenes, si el texto de un área debe verse color verde cata o lila violento...
• ECMAScript / JavaScript son lenguajes que permiten ejecutar código basados en lo que el usuario quiere. La versión de la ECMA es la que sirve (o debería) a lo largo de todos los navegadores. Con estos lenguajes de scripting, entonces, podemos regular el comportamiento de partes de nuestro sitio (crear menúes desplegables, etc.).
• El DOM (Document Object Model) permite al lenguaje de scripting organizarse. Da un modelo de todos los objetos que pueden alterarse en nuestra página web.

Esta página usa solamente XHTML y CSS. Estoy aprendiendo a usar lenguajes para crear páginas web dinámicas, pero aún no tengo problemas con la manera en que se ve mi sitio.

Mientras tanto, si están atentos a lo que escribo, habrán visto un montón de enlaces arriba a páginas del W3C, el World Wide Web Consortium. Dichas webs tienen dos características básicas que deben conocer:

• Rebalsan de información importante
• Son ilegibles

Es cierto. El punto, como Zeldman dice, es que esas páginas son el equivalente de un manual de motores para mecánicos: no es algo que una persona que quiera manejar va a leer. Sin embargo, alguna vez, cuando el auto se quede, necesitaremos algún dato que escapa al manual del auto, que sólo está ahí.

Si quieren aprender como yo lo hice (suponiendo que esa sea la mejor manera), les recomiendo que lean lo siguiente:

• HTML Bootcamp
• CSS / Edge, de Eric Meyer
• CSS Info de Eric Meyer
• A list apart, for people who make websites
• The CSS Zen Garden

Para terminar, un por qué. ¿Por qué hacer esto, si Frontpage crea mis páginas fácilmente?

Bueno, si alguna vez tienen que ver el código de su página en el futuro, y tienen que alterar algo a mano, se darán cuenta de lo hermosa que es la sopa de tags. Pero el motivo principal es que el futuro no pertenece solamente a los browsers comunes: aparatos como los teléfonos celulares, las PDAs, etc. tienen acceso a la web, y sus páginas sólo se verán legibles en todos ellos mañana si siguen los estándares hoy.