Estructuración de XHTML I: Reestructurar sitios web con XHTML

El título que hemos escrito para esta sección es: "XHTML: Reglas simples, consejos fáciles". Una de las razones es que las reglas y consejos que se discuten aquí son simples y fáciles. Otra razón es que un libro de diseño web simple y fácil, como los nuevos productos gratuitos en los supermercados, aunque comunes, pueden atraer la atención de las personas de manera efectiva, estimular su interés y alentándolos a probar.

Espero realmente que el contenido de esta sección pueda despertar tu interés y alentarte a probar. ¿Por qué digo esto? Porque una vez que hayas dominado las ideas simples y fáciles que contiene este capítulo, comenzarás a replantear la forma en que funcionan las páginas web y a cambiar la manera en que las construyes. Sin embargo, no quiero que te limites a reescribir el código. Espero que puedas pensar y trabajar de manera diferente.

Por otro lado, la reconstrucción es la verdadera esencia de XHTML.

En este capítulo, estudiaremos el mecanismo y el significado de los marcos estructurales. Si estás integrando estándares de sitio web en tu proyecto de desarrollo, puede que te sientas familiarizado con el contenido de este capítulo. Sin embargo, incluso los expertos en este campo pueden encontrar sorpresas aquí.

Resumen de las reglas de XHTML

Convertir HTML tradicional a XHTML 1.0 es rápido y sin dolor, siempre y cuando sigas algunas reglas simples y fáciles de seguir. No importa si has usado HTML antes, no te impedirá usar XHTML.

  • Usa la declaración correcta del tipo de documento y el espacio de nombres.
  • Declarar tu tipo de contenido usando el elemento meta.
  • Escribe todos los elementos y propiedades en minúsculas.
  • Añade comillas a todos los valores de las propiedades.
  • Asigna un valor a todas las propiedades.
  • Cierra todas las etiquetas.
  • Cierra las etiquetas vacías con espacios y barras oblicuas.
  • No escribas subrayados dobles en los comentarios.
  • Asegúrate de que los símbolos de menos que y y son < y &

Unicode y otros conjuntos de caracteres

El conjunto de caracteres predeterminado de los documentos XML, XHTML y HTML 4.0 es Unicode, un estándar definido por la Unión Unicode. Unicode es un conjunto de caracteres completo que proporciona un número específico y único para cada carácter, sin importar la plataforma, el programa o el idioma. Unicode también es lo más cercano a una alfabeto general que tenemos, aunque no es un alfabeto, sino un esquema de mapeo de números.

A pesar de que Unicode es el conjunto de caracteres predeterminado de los documentos web, los desarrolladores pueden elegir libremente otros conjuntos de caracteres más adecuados para ellos. Por ejemplo, los sitios web de América y Europa a menudo utilizan la codificación ISO-8859-1 (Latin-1), mientras que el estándar nacional de la República Popular China es gb2312.

Etiqueta los documentos para expresar semántica, no para estilo

Recuerda: usa CSS al máximo para el diseño. En el mundo de los estándares web, las etiquetas XHTML no tienen nada que ver con la presentación, solo con la estructura del documento.

Los documentos bien estructurados pueden transmitir al navegador el máximo de semántica, ya sea que el navegador esté en un dispositivo portátil o en un navegador gráfico de escritorio de moda. Los documentos bien estructurados pueden transmitir semántica visual al usuario, incluso en navegadores antiguos o en navegadores modernos donde el usuario ha desactivado CSS.

No todos los sitios pueden abandonar de inmediato el diseño de tablas HTML. El inventor de CSS, W3C, no convirtió su sitio web oficial en un diseño CSS hasta noviembre de 2002. Sin embargo, incluso los insistentes defensores de los estándares no siempre separan completamente la presentación de la estructura, al menos no en XHTML 1. Pero ahora, podemos dar un gran paso hacia este ideal, separando la presentación de la estructura (o separando los datos del diseño), incluso los diseños tradicionales pueden beneficiarse de esto.

Aquí hay algunos consejos que pueden ayudarte a pensar de manera más estructurada:

Color dentro del esquema

En la escuela de gramática, la mayoría de nosotros fuimos obligados a escribir artículos utilizando el formato de esquema estándar. Ahora, como diseñadores, podemos liberarnos con tanto libertad de las limitaciones del esquema y arrojarnos valientemente al campo de la expresión personal única (tal vez nuestros folletos y sitios comerciales no son tan únicos y personalizados). Pero al menos ya no estaremos atormentados por el esquema.

En realidad, según HTML, deberíamos estructurar el contenido en niveles organizados. Durante el período en que los navegadores no soportaban CSS, no podíamos lograr esto al entregar un diseño listo para la venta. Pero hoy, al implementar nuestro diseño sin reservas, tenemos la capacidad de entregar documentos con una estructura interna bien organizada.

Cuando etiquetamos texto para su uso en la red o cuando convertimos un documento de texto existente en una página web, utilice estos ítems de esquema tradicional para la reflexión.

<h1>Mi tema</h1>
<p>Texto introductorio</p>
<h2>Opinión complementaria</h2>
<p>Texto relacionado</p>

Al mismo tiempo, evita usar elementos HTML obsoletos como <font>, o elementos insemánticos como <br />, para simular estructuras lógicas que no existen.

Por ejemplo, no hagas así:

Mi tema<br /><br />
Texto introductorio<br /><br />
Opinión complementaria<br /><br />
Texto relacionado<br />

Usa los elementos según su significado, no según su aspecto

Algunos de nosotros hemos caído en una mala costumbre, al usar h1 cuando solo necesitamos un texto grande o li cuando necesitamos un punto delante. Como discutimos en el capítulo anterior, los navegadores siempre han tenido la costumbre de imponer propiedades de diseño a los elementos HTML. Todos hemos estado acostumbrados a pensar que h1 significa texto grande, li significa puntos o blockquote significa texto sangrado. La mayoría de nosotros seguimos escribiendo HTML de manera desordenada, simulando efectos de presentación con elementos estructurales.

Del mismo modo, si el diseñador desea que todos los títulos utilicen el mismo tamaño de fuente, establecerá todos los títulos como h1, incluso si esto no tiene sentido en términos de semántica estructurada.

Este es el título principal, cuando organizo el texto según el formato de resumen.
Este no es el título principal, pero espero que utilice la misma fuente que el título superior, pero no sé cómo usar CSS.
Este no es realmente un título. Pero realmente espero que el texto en la página utilice la misma fuente, para lograr lo que espero,
Si entiendo CSS, puedo alcanzar este diseño sin desordenar la estructura del documento.

Debemos dejar a un lado nuestros trucos y comenzar a usarlos según el significado de los elementos, en lugar de según su aspecto. En realidad, h1 puede ser cualquier cosa que desees. A través de CSS, h1 puede ser un tipo romano pequeño y no cursivo, mientras que el texto p puede ser grande y cursivo, y li puede no tener puntos (puedes usar en su lugar imágenes PNG, GIF o JPEG de gatitos, perros o logotipos de empresas) y otros.

A partir de hoy, utilizaremos CSS para determinar la apariencia de los elementos. Incluso podemos cambiar su apariencia según su ubicación en la página o en el sitio. CSS puede separar completamente la presentación de la estructura y permite que formatees cualquier elemento según el estilo que te guste.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

¿Por qué lo haces? El objetivo de esto es obtener una apariencia y sensación de marca en navegadores gráficos, al mismo tiempo que se mantiene la estructura del documento en navegadores de texto, dispositivos inalámbricos y correos electrónicos en formato HTML.

No queremos hablar más sobre CSS en el capítulo sobre XHTML. Sólo queremos mostrar que la estructura del documento y la expresión visual son dos cosas completamente diferentes, y que los elementos estructurales deben usarse para transformar texto, no para imponer efectos de visualización.

Usa elementos estructurales en lugar de basura sin sentido

Dado que hemos olvidado o simplemente no sabemos el propósito de HTML y XHTML para transmitir significado estructurado, muchos defensores de HTML utilizan etiquetas para insertar listas de esta manera:

Proyecto uno<br />
Proyecto dos<br />
Proyecto tres<br />

Considera usar listas ordenadas o no ordenadas en su lugar:

<ul>
<li>Proyecto uno</li>
<li>Proyecto dos</li>
<li>Proyecto tres</li>
</ul>

"Pero li me da un punto redondo, y no necesito un punto redondo!" Puede que digas. Según el capítulo anterior, CSS no hace suposiciones sobre la apariencia esperada de los elementos. Espera que te digas cuál es la apariencia que esperas para los elementos. El cierre del punto es una de las capacidades más básicas de CSS. Tiene la capacidad de hacer que la lista se vea igual que el texto normal, y también puede hacer que la lista se vea como una barra de navegación gráfica con un efecto de reversión completo.

Por lo tanto, usa elementos de lista para marcar listas. Del mismo modo, usa strong en lugar de b, em en lugar de i, etc. En la mayoría de los navegadores de escritorio en estado predeterminado, el efecto de visualización de strong es el mismo que el de b, y em y i son los mismos, y también puedes crear el efecto visual esperado sin dañar la estructura del documento.

A pesar de que CSS no hace suposiciones sobre la visualización de cualquier elemento, los navegadores hacen muchas suposiciones y aún no hemos encontrado un navegador que muestre strong de otra manera que no sea en negrita (a menos que sea indicado de otra manera por las instrucciones CSS del diseñador). Si te preocupas de que un navegador desconocido no muestre strong en negrita, puedes escribir esta regla CSS:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Elementos visuales y estructura

Los estándares web no solo requieren que usemos ciertas tecnologías, sino que también que sigamos las formas en que se utilizan estas tecnologías. Al escribir marcas con XHTML y manejar parte o toda la disposición con CSS, no necesariamente hace que el sitio sea más accesible y ligero, ni ahorra ancho de banda. Al igual que con las tecnologías que utilizamos en la etapa inicial, XHTML y CSS también pueden ser utilizados de manera incorrecta y abusiva. XHTML largo y HTML largo, ambos pueden desperdiciar el ancho de banda y el tiempo del usuario. Los CSS largos y excesivos no pueden reemplazar completamente el código HTML de presentación; esto no es más que una mala cosa reemplazando a otra.