3 Capas de Presentación: HTML

Visita este artí­culo en http://www.estadobeta.com/2005/12/11/3-capas-de-presentacin-html/

Por Ismael en (X)HTML, artículos, presentación

Introducción al HTML semántico.

De las tres tecnologías que trataré en esta serie, HTML, CSS, y Javascript, la primera es la más importante y la única imprescindible para contruir un documento web.

HTML (como XHTML es el futuro de HTML, me referiré aquí simplemente a "HTML") es un lenguaje de demarcación ("markup") diseñado para estructurar contenidos en un documento, de forma tal que tanto lectores humanos como electrónicos puedan distinguir las distintas partes que componen el documento y evaluar qué relevancia tiene cada parte con respecto al total del contenido.

Incluso para programadores experimentados en el uso de bases de datos y lenguajes de scripting, esta definición aparentemente obvia -implícita en las siglas HTML- es frecuentemente desconocida o ignorada. Con tal de que un documento se vea bien (posiblemente con la ayuda de Fireworks o Dreamweaver), no es importante cómo esté estructurado el HTML ¿Correcto?

Incorrecto.

Un lenguaje para humanos y máquinas

Para efectos de la visibilidad de un documento en los resultados de los motores de búsqueda, el HTML es uno de los factores más importantes. Comparemos el caso de un título "à la Dreamweaver":


<p style="color:red;font-size:20px;" >TITULO</p>
<p>Este es un párrafo normal...</p>

Esto se ve perfectamente bien. Tenemos texto dentro de un párrafo <p>, luego aplicamos estilos en linea para aumentar la fuente y dar color rojo. En un browser, se ve así:

TITULO

Este es un párrafo normal…

Simple. El tamaño y color nos indican claramente que el título es más importante que el párrafo ¿Cual es el problema entonces?

El problema es que las máquinas -los buscadores, los browsers, los lectores de pantalla- no tienen la capacidad de evaluar visualmente la estructura semántica de un documento. Eso es una virtud intelectual humana actualmente muy difícil de emular técnicamente. Los computadores son máquinas tontas. Para funcionar requieren que los datos procesados esten sistemáticamente estructurados.

Para esto, HTML ofrece una alternativa relativamente simple para estructurar contenidos mediante convenciones que todos los computadores pueden entender. Así, el ejemplo anterior puede ser reformulado con las etiquetas <h1> y <p> del estándar HTML:


<h1>titulo</h1>
<p>Este es un párrafo normal</p>

La serie de etiquetas <h> ("h" de Header, "encabezado") va del <h1> al <h6> y nos provee de una forma de estructurar nuestros títulos y subtítulos de forma uniforme. Ahora, cuando las arañas de Google analicen nuestro documento, detectarán la etiqueta <h1> y sabrán que nosotros, como autores, le damos más relevancia a la palabra "titulo" que a la palabra "párrafo".

Veamos ahora el caso de una típica lista numerada hecha con tablas:


<table cellpadding='0' cellspacing='0' width='200px;'>
<tr>
<td width=’10%’>1</td>
<td>item 1</td>
</tr>
<tr>
<td>2</td>
<td>item 2 </td>
</tr>
<tr>
<td>3</td>
<td>item 3 </td>
</tr>
</table>

Que se ve así:

1 item 1
2 item 2
3 item 3

HTML incluye etiquetas para estructurar semánticamente -de acuerdo a su significado- los elementos más comunes de todo documento como los títulos, párrafos, abreviaciones o citas. En el caso del ejemplo anterior podemos usar la etiqueta <ol>, que corresponde a una lista numerada, en conjunción con la etiqueta <li> (item de lista):


<ol>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ol>

Dónde estan los números? El browser, al entender la etiqueta <ol>, se encarga
de ponerlos él mismo:

  1. item 1
  2. item 2
  3. item 3

Como se ve, al usar el HTML exclusivamente para dar estructura al contenido no sólo se mejora la accesibilidad del documento. Al eliminar el código destinado a dar efectos de diseño (colores, tamaños, tablas), disminuye consideráblemente la proporción de código con respecto al contenido, por lo tanto éste último se hace aún más relevante ante los "ojos" de los buscadores y otros aparatos.

Al transladar todo el diseño a archivos CSS externos faciltamos el rediseño con mínimas modificaciones al contenido, pero es necesario que éste esté estructurado con los elementos HTML apropiados para hacer un documento realmente visible en la web. Incluso diseñadores expertos en CSS suelen olvidar la importancia de HTML en este aspecto y estructuran todo tipo de contenido con etiquetas genéricas como <div> y <span>, que es lo mismo que no estructurarlo.

Una bendición para el desarrollo

Pero además hay otra ventaja desde el punto de vista de los programadores.

Vieron el ejemplo de la tabla para la lista numerada? Es fácil darse cuenta de una cosa: el código se reduce enórmemente. De esta manera es mucho más fácil insertar esas etiquetas PHP o JSP requeridas para el contenido dinámico, por ejemplo, y modificar sectores enteros de contenido más tarde.

Desde el punto de vista de los diseñadores, una vez dominadas las tecnologías necesarias (HTML, CSS), el proceso de rediseño y mantención de sitios web completos se simplifica muchísimo.

Más recursos

Este artículo fue sólo una breve introducción al uso adecuado de HTML. Como continuación recomiendo un breve pero exhaustivo resumen de las ideas planteadas, en Diseñorama.

Todas las referencias sobre HTML que necesitan están en las escuelas de la W3C. También pueden revisar HTMLDog.

10 comentarios para “3 Capas de Presentación: HTML”

  1. Gravatarcoke Dice:

    Sólo una pregunta, todos estos estándares web son validados por el W3C?
    También te quiero recomendar el blog de un chileno que me parece que trabaja por los mismos objetivos:
    http://www.webstudio.cl

    Saludos

  2. GravatarIsmael Dice:

    Hola Coke.
    La W3C es en realidad un conjunto de representantes de la industria del software, diseñadores y programadores que forman grupos de trabajo para recoger requerimientos técnicos y metodológicos de diversas fuentes (la comunidad científica, la industria, grupos de usuarios, ONG’s, etc) y proponer estándares a partir de ellos. Fue fundada por Tim Berners Lee, inventor de la Web, para velar porque la web se mantenga libre para todos. Algo así como un congreso global que evalúa el estado actual de la web y propone leyes iguales para todos (estándares) que aseguren interoperabilidad entre las diversas tecnologías y eviten prácticas monopólicas. Hay muchos “proyectos de estándares” que aún no son reconocidos oficiálmente por la W3C (PFIF, FOAF) pero que podrían eventualmente serlo. Así mismo, el organismo trabaja contínuamente en la definición, revisión y aprobación de nuevos estándares y actualizaciones a estándares existentes.
    Al involucrar a actores importantes y diversos del rubro, la W3C ha conseguido influenciar a la industria de manera efectiva para que integren estos estándares a sus productos de software (la manera en que lo hagan depende del fabricante: es así como el estándar CSS, por ejemplo, es implementado -programado- de maneras distintas por Microsoft Explorer o Mozilla. De los errores en esa implementación vienen gran partde de los problemas de compatibilidad aún existentes).
    Por último, muchos de los “blogstars” que empezaron con el asunto de los estándares son asimismo miembros de la W3C (Tantek Celik además fue muy influyente el la entrada a los estándares de Microsoft). Hay otros grupos no oficialmente afiliados cuyos miembros han formado parte de la W3C.
    No muy distinto a la política ;)

  3. Gravatarcoke Dice:

    Gracias por la respuesta, pero más que saber acerca de la organización lo que me preocupa es el tema de quién tendrá finalmente el derecho a decir “yo tengo los estándares”. Es decir, que deje de ser trabajo espontáneo colaborativo para convertirse en el eterno retorno de concentración del poder. Dicho de otro modo, ¿tiene la W3C la facultad de discriminar por metodologías válidas o no válidas? Creo que finalmente el tema de los estándares pasará por un tema comercial, fijar estándares para los negocios del futuro. Así como se fijaron estándares para las señales de radio y televisión. O los estándares de las cámaras digitales, que vinieran las fotos en JPEG, por ejemplo, no es fortuito, es producto de un acuerdo con fines comerciales.
    Lo mismo pasaría con los web standards. Existen para que pronto podamos interactuar con la red desde el celular, la palm, la radio del auto, etc.
    Todo esto lo digo sólo con la intención de reflexionar en torno al tema.

  4. GravatarIsmael Dice:

    Creo que la respuesta está implícita en lo que dije: Los estándares TIENEN un caracter eminéntemente comercial, en el sentido de que son usados por la industria para crear productos. El detalle es que la W3C también se encarga de que estos estándares NO PERTENEZCAN a ningún ente privado o compañía, para que sean herramientas realmente útiles para todos.
    La W3C tiene la facultad de discriminar metodologías una vez que todos sus miembros y consultores (que si pertenecen a distintas industrias pero a ninguna en particular) estén de acuerdo.
    Los estándares de la W3C son recomendaciones, no imposiciones. Esto es tan así que, por ejemplo, Macromedia (ahora Adobe) creó su propio formato de vectores animados (Flash) en lugar de usar el estándar de la W3C para ese efecto: SVG.
    Flash, al ser el producto de una sóla empresa, pudo avanzar mucho más rápido porque no necesita el debate previo a cualquier recomendación de la W3C y porque no tomó en cuenta factores como la accesibilidad y el código abierto que es central para la W3C (SVG es de hecho una aplicación de XML, primo del HTML).
    Lo que sucede con los estándares es que para ser válidos universalmente necesitan de un ente central que los controle y emita. Si hubieran varias organizaciones emitiendo estándares para el mismo medio dejarían de ser estándares.
    La W3C es como la ONU de la Web.

  5. Gravatarsergi Dice:

    hola

    muy buen articulo y resumen, ya espero ver los siguientes. estoy completamente de acuerdo con el contenido. igual te interesa un articulo que publiqué en diseñorama hace tiempo, es de temática similar

    en realidad, y para ser ya más estrictos, deberíamos empezar a pensar en 4 capas de separación, no solamente 3.

    un saludo

  6. GravatarIsmael Dice:

    Gracias Sergi.
    Conozco tu artículo en Disenorama y de hecho lo recomiendo recurrentemente.
    También leí el artículo en Particletree (creo que puedes ver mis comentarios ahí también :)) y estoy de acuerdo, con una observación:
    XHTML es XML, por lo tanto en ciertos casos puede ser redundante usar XSLT para transformar de una estructura XML a otra. Muchos de los cambios de diseño requeridos pueden ser logrados con CSS y, en caso de cambios estructurales o de comportamiento, modificando el DOM en cl cliente con Javascript (que pienso tratar en esta serie de artículos).
    Si pienso, sin embargo, en la posibilidad de una convención XML de publicación de contenidos (Atom? Microformatos?) universal que permitiera librerías estándar XSLT que formaran parte de los CMS para transformar el contenido al (X)HTML elegido (Se entendió eso último?!).

    Stay tuned!

  7. Gravatarynetza Dice:

    quisiera que por favor como pudo validar

  8. GravatarEstadoBeta » Archivo » Tablas HTML Dinámicas Dice:

    […] * En términos del uso semántico de HTML -su propósito original-, el elemento TABLE es apropiado cuando la naturaleza de la información a mostrar es tabular, es decir hay algun tipo de relación objeto-atributo entre las partes que pueden ser representada en filas y columnas. TABLE no debiera ser usado sólo para lograr determinados efectos de diseño (más sobre eso aquí). […]

  9. Gravatarsouqp vhamyki Dice:

    fvsyr tpxk skyvbwjf golkjfm tagn mxwobeu otqdxm

  10. GravatarGerardo SAnchez Dice:

    saludos a gaby de nomina y a lupita y al cule… de francisco almaraz