Estructuración de XHTML 2: Caso de estudio: Marcadores estructurales de W3school

De cualquier manera, no saltes esta sección. Leer este capítulo mejorará tus habilidades, ayudará a reducir la obesidad de tu página web y te dará una comprensión más clara de la diferencia entre marcado y diseño. Las ideas presentadas en este capítulo son fáciles de aprender, pero pueden mejorar significativamente el rendimiento del sitio web, así como la facilidad de diseño, creación y actualización del sitio.

En esta sección, aprenderás a escribir marcado lógico y compacto que te permita reducir el tráfico de ancho de banda en aproximadamente un 50%, al mismo tiempo que reduce la carga y la presión del servidor y acorta el tiempo de carga del sitio web. Al eliminar los elementos de presentación y corregir los malos hábitos que no ofrecen ningún beneficio, podemos lograr los objetivos mencionados anteriormente.

Estos malos hábitos acosan a muchos sitios en la red, especialmente aquellos que mezclan código CSS con una disposición basada principalmente en tablas. Este enfoque es torpe y poco económico, incluso para diseñadores que tienen experiencia en otros campos. Además, la probabilidad de que se presente este problema es igual, ya sea en sitios que escriben código a mano o en sitios que se crean utilizando herramientas de edición visuales, como Dreamweaver y GoLive.

Esta sección presentará estos errores comunes para que puedas identificarlos y prevenirlos, y aprenderás cómo corregirlos. Explicamos en detalle la propiedad de identificador único (id) y mostramos cómo te permite escribir código XHTML extremadamente compacto, ya sea que crees un diseño mixto o puro CSS.

¿Deben estructurarse todos los elementos?

Como dijimos en el capítulo anterior, cada elemento puede ser estructurado, CSS puede hacer que una lista ordenada o no ordenada se muestre como una barra de navegación completa, con efecto de reversión de botón. El contenido del documento se puede marcar con elementos comunes, que indican su papel semántico en el diseño del sitio mediante propiedades estructuradas específicas.

Creamos la primera versión de prueba en chino de CodeW3C.com en el año 2006, y ya utilizamos CSS para el diseño de la disposición y XHTML para estructurar el documento. Cada uno de los elementos es estructurado, desde los títulos hasta las listas y los párrafos. Puedes ver en cada página de CodeW3C los botones de inicio de página con efecto de reversión y los botones de menú de nivel secundario. A continuación se muestra el código XHTML de estos dos componentes:

<div id="header"><h1><a href="/">codew3c tutorial en línea</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Tutoriales HTML">Tutoriales HTML</a></li>
<li id="x"><a href="/x.asp" title="Tutoriales XML">Tutoriales XML</a></li>
<li id="b"><a href="/b.asp" title="Navegador de scripts">Navegador de scripts</a></li>
<li id="s"><a href="/s.asp" title="Scripts de servidor">Scripts de servidor</a></li>
<li id="d"><a href="/d.asp" title="Tutoriales dot net">Tutoriales dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutoriales de multimedia">Tutoriales de multimedia</a></li>
<li id="w"><a href="/w.asp" title="Manual de construcción de sitios">Manual de construcción de sitios</a></li>
</ul>
</div>

div, id y otros ayudantes

Si se utiliza correctamente, div puede ser un excelente ayudante para la marca estructurada, mientras que id es una herramienta sorprendente que te permite escribir XHTML extremadamente compacto y aprovechar CSS de manera inteligente, además de agregar comportamientos complejos y elegantes a sitios mediante el modelo de objeto de documento estándar (DOM).

W3C define así el elemento div en su modelo de estructura XHTML en el último borrador de XHTML2:

El elemento div, al combinarse con las propiedades id, class y role, proporciona un mecanismo común para agregar estructura adicional al documento. Este elemento no define el estilo de presentación del contenido. Por lo tanto, los creadores pueden usar este elemento junto con hojas de estilo, xml:lang y atributos para que XHTML se adapte a sus propias necesidades y gustos.

div es la abreviatura de division. Division significa división, área, grupo. Por ejemplo, cuando combinamos una serie de enlaces, se forma una división de documento.

Mecanismo universal para determinar la estructura

Todos los que escriben HTML están familiarizados con elementos comunes como párrafos y títulos, pero algunas personas pueden no estar tan familiarizadas con div. En la descripción de W3C podemos encontrar la clave para entender el elemento div, "un mecanismo universal para agregar estructura."

En la página principal de este sitio, encapsulamos la lista de índice de los tutoriales en un div, ya que el índice de los tutoriales no es parte de ningún elemento del texto. En su lugar, los elementos h2 marcan cada título de tutorial, mientras que los elementos de lista ul marcan cada lista detallada de tutorial. Pero en un sentido más amplio y específico, este índice de tutorial desempeña un papel estructurado, es decir, un componente de navegación secundaria. Para enfatizar este papel, utilizamos el id navsecond para marcar este div.

<div id="navsecond">
<h2>Tutoriales HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Tutoriales HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Tutoriales XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Tutoriales CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Tutoriales TCP/IP">TCP/IP</a></li>
</ul>
<h2>Tutoriales XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Tutoriales XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Idiomas XSL">XSL</a></li>
... ...
... ...
</div>

Puedes usar cualquier nombre. "Gladys" y "orangebox" cumplen completamente las reglas de nombramiento de XHTML. Sin embargo, los nombres semánticos o metaestructurales son los mejores (es decir, los que pueden explicar la función de los elementos dentro de ellos).

Cuando el cliente decide usar azul, te parecerá muy tonto nombrar una parte del sitio como orangebox (caja naranja). En la siguiente situación, te sentirás aún más tonto, cuando solo queden seis meses para la entrega final, comienzas a ajustar las hojas de estilo y no puedes recordar qué "Gladys" (nombre femenino) representa, si es la zona de navegación, la barra lateral o el cuadro de búsqueda.

Por lo tanto, marcar con id como "menu", "content" o "searchform" te ayudará a recordar. Además, la marca no es equivalente al diseño, una página bien estructurada puede ser formateada en cualquier aspecto que desees. El resultado de esto es que, ya sea que uses un diseño puramente CSS o un diseño mixto, cambiarás por completo la costumbre de pensar y crear usando marcadores de presentación.

id vs. class

la propiedad id no es nueva para XHTML; la propiedad class o el elemento div también. Ambos pueden rastrearse hasta la era de HTML. La propiedad id asigna un nombre único a un elemento. Cada nombre solo se puede usar una vez en la página a la que se asigna. (Por ejemplo, si tu página contiene un div con id "content", otro div u otro elemento no puede usar ese nombre. Por el contrario, la propiedad class se puede usar repetidamente en la página, por ejemplo, cinco párrafos en la página pueden usar el nombre de clase "small" o "footnote"). Los siguientes marcadores ayudarán a aclarar la diferencia entre id y class:

<div id="searchform">Los componentes del formulario de búsqueda van aquí. Esto
una sección de la página es única.</div>
<div class="blogentry">
   <h2>Publicación de blog de hoy</h2>
   <p>El contenido del blog va aquí.</p>
   <p>Este es otro párrafo de contenido de blog.</p>
   <p>Al igual que pueden haber muchos párrafos en una página, también
   puede haber muchas entradas en un blog. Una página de blog podría usar
   múltiples instancias de la clase "blogentry" (o cualquier otra
   class).</p>
</div>
<div class="blogentry">
   <h2>Entrada de blog de ayer</h2>
   <p>De hecho, aquí estamos dentro de otro div con clase
   "blogentry."</p>
   <p>Se reproducen como conejos.</p>
   <p>Si hay diez artículos de blog en esta página, podría
   Hay diez divs de clase "blogentry" también.</p>
</div>

En este ejemplo, el div llamado searchform se utiliza para encapsular la área de la página que contiene el formulario de búsqueda, mientras que el div con class="blogentry" se utiliza para encapsular cada entrada de artículo en el blog. En la página hay solo un formulario de búsqueda, por lo que elegimos marcar este componente único con id. Pero el blog tiene muchas entradas de artículos, por lo que se aplica la propiedad class en este caso. Del mismo modo, los sitios de noticias suelen tener varios div, y estos div pueden tener la clase "newsitem" o cualquier otra.

No todos los sitios necesitan usar div. Los sitios de blogs pueden usar simplemente los títulos h1, H2 y h2 y los párrafos <p>. Los sitios de noticias también. En este ejemplo, mostramos el div con la clase blogentry, no para alentar que llena el sitio con div, sino solo para mostrar este principio: en el mismo documento HTML, puede usar múltiples clases, pero solo una id.

Teoría de pegatinas adhesivas

Comparar la propiedad id con pegatinas adhesivas puede ser útil. Pondré una pegatina en el refrigerador para recordarme comprar leche, también pondré una en el teléfono para recordarme llamar a un cliente que ha pagado tarde. Además, hay otra pegatina en el sujetapapeles para recordarme que debo pagar las facturas antes del 15 de este mes.

id también marcará áreas especiales dentro del documento, lo que le recordará qué áreas necesitan tratamiento especial. En este punto, la propiedad id es similar a las pegatinas adhesivas. Para lograr lo que se conoce como tratamiento especial, necesita usar este id especial para escribir varias reglas en la hoja de estilo o agregar algunas líneas de código en el archivo JavaScript. Por ejemplo, en su archivo CSS puede haber algunas reglas específicas que solo se aplican a los elementos dentro del div con el nombre de id searchform.

Cuando un atributo id se utiliza como algo magnético (imán) en una serie de reglas CSS específicas, se llama selector CSS. Hay muchosCrear selectoresMétodos, sin embargo, id es fácil de usar y tiene múltiples usos.

El poder de id

La propiedad id es increíblemente poderosa. Tiene las siguientes capacidades:

  • Como selector de hoja de estilo, nos permite crear XHTML compacto y minimizado.
  • Como ancla de hipertexto, reemplazando el atributo name obsoleto.
  • Como método para ubicar elementos específicos desde scripts basados en DOM.
  • Como nombre de elemento de objeto.
  • Como herramienta de procesamiento general (en los ejemplos de W3C, "cuando se extraen datos de una página HTML a una base de datos, o se convierte un documento HTML a otro formato, se utiliza como herramienta de identificación de dominio").

Reglas de id

Los valores de id deben comenzar con una letra o guión bajo; no pueden comenzar con un número. Aunque el validador W3C no capturará este error, el analizador XML sí lo hará. Además, si utiliza id con JavaScript en formularios, tanto el nombre como el valor del id deben ser variables JavaScript válidas. Los espacios y guiones, especialmente los guiones, no están permitidos. Además, no es buena idea usar guiones bajos en nombres de class o id, debido a las limitaciones en CSS2.0 (y ciertos navegadores).

Marcadores semánticos y accesibilidad

Ahora, ya hemos discutido los elementos XHTML de uso general (especialmente div e id), veamos algunos ejemplos relacionados con la página principal de este sitio. Primero, recordemos este menú ubicado en la cabecera:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Tutoriales HTML">Tutoriales HTML</a></li>
<li id="x"><a href="/x.asp" title="Tutoriales XML">Tutoriales XML</a></li>
<li id="b"><a href="/b.asp" title="Navegador de scripts">Navegador de scripts</a></li>
<li id="s"><a href="/s.asp" title="Scripts de servidor">Scripts de servidor</a></li>
<li id="d"><a href="/d.asp" title="Tutoriales dot net">Tutoriales dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutoriales de multimedia">Tutoriales de multimedia</a></li>
<li id="w"><a href="/w.asp" title="Manual de construcción de sitios">Manual de construcción de sitios</a></li>
</ul>
</div>

Tenemos siete enlaces, cada uno asignado un id que coincide con el contenido correspondiente: por ejemplo, el id 'h' coincide con el tutorial de HTML, y así sucesivamente. Estos enlaces están encapsulados en un elemento de lista llamado 'menu', que tiene el id 'menu' y indica la función de esta lista - una lista de menú, mientras que el div más externo llamado 'navfirst' se utiliza para marcar esta sección en la página, diferenciándola de elementos como el contenido principal (maincontent), la barra lateral (sidebar) y el pie de página (footer).

Los elementos 'div' y 'ul' proporcionan una estructura real, indicando la función del contenido (barra de navegación) y su posición en el documento (ubicación del encabezado de la página). Por el contrario, el diseño de tablas tradicional no puede proporcionar información semántica alguna sobre los datos y consume fácilmente tres veces más ancho de banda.

Tenga en cuenta que estos marcados no contienen etiquetas 'img', por lo que no involucran propiedades como 'width', 'height', 'background' o 'border', entre otras. Además, no utilizan celdas de tabla, por lo que no se ven afectados por una serie de propiedades relacionadas. Son muy limpios y compactos, proporcionando toda la información necesaria para entenderlos.

Al usar CSS conjuntamente, estos marcados proporcionan a los visitantes del sitio una disposición confiable y de carga rápida. Además, también ofrece la posibilidad de crear una apariencia más flexible y diversa para los visitantes. Y en entornos sin CSS, nuestras marcas bien estructuradas pueden proporcionar todo el contenido sin confusión.

Los lectores perspicaces ya habrán notado que el texto contenido en el elemento 'a' no se muestra en el navegador, lo cual se debe al excelente funcionamiento conjunto de la estructura de marcado y CSS, que nos permite definir un mecanismo desencadenante con solo algunas reglas CSS. Cuando el usuario utiliza un navegador gráfico, verán bonitos botones de navegación, y cuando utilizan un lector de texto puro, también obtendrán todo el texto. De esta manera, el contenido es el mismo para todos los usuarios.

Y, dado que los marcadores no incluyen imágenes y celdas de tabla, este componente de navegación se puede referir desde cualquier página del sitio sin cambiar la estructura, al tiempo que le otorga diferentes efectos visuales. En resumen, al modularizar el código, aumentamos la reutilización del código.