IGRAFIQ - Blog

No existen directivas definitivas para un “buen” HTML. Sin embargo existen normas sobre el aspecto que debe tener un documento HTML. En todo caso es recomendable orientarse lo más posible a las normas del lenguaje según el Consorcio(W3C). Entretanto, el Consorcio(W3C) ha reconocido que su tarea no sólo es la elaboración de prescripciones técnicas, sino también la mediación a los usuarios “comunes” que no poseen un estudio informático acabado. En caso de que se ocupe de la creación de páginas web de una manera intensiva y duradera, le recomendamos visitar regularmente las páginas del Consorcio(W3C) y ver las novedades, tendencias y directivas.

El Consorcio(W3C) ofrece además para autores de HTML un servicio, para examinar la exactitud sintáctica de archivos: el llamado validador. De esta forma puede examinar sus páginas en busca de errores para corregirlos.

Indicaciones generales para hacer buen HTML

No codificar para un determinado navegador

En caso de que desee publicar en Internet, entonces debe probar como se ven los archivos en los diferentes navegadores. Lo mejor es usar los productos más difundidos como Firefox e Internet Explorer, siendo muy recomendable ver las páginas tanto en varias versiones de los navegadores, como también en otros navegadores como Opera. Si tiene la posibilidad de hacer las pruebas en varios entornos (MS-Windows, Macintosh, Linux etc.), entonces no deje de hacerlo.

Nadie le puede prohibir que escriba sus archivos HTML para un navegador determinado, por ejemplo Netscape (como muchas personas lo hacen). En tal caso es recomendable informar en la página de entrada que las páginas han sido desarrolladas para un determinado navegador. Nosotros aconsejamos buscar un compromiso para que las páginas puedan ser visualizadas por todos los navegadores.

No codificar para determinadas resoluciones de pantalla

El forzamiento de anchuras fijas con el uso de tablas anidadas y “píxeles invisibles” se ha extendido tanto en la web, que muchos autores ya no saben que HTML simple general un texto corrido normal, que se adapta al tamaño de la ventana del navegador. No tiene sentido tampoco despreciar completamente el forzamiento de anchuras mínimas. Tablas con varias columnas y contenido correspondiente requieren de una cierta anchura y HTML tampoco es WML (un lenguaje especial para la creación de páginas para teléfonos móvil). Pero si tiene que decidir si sus páginas deben ser optimizadas para una resolución de pantalla de 1024 o de 800 píxeles- entonces se enfrenta a una mala decisión. Pues muchos usuarios navegan con varias instancias de navegador y abren enlaces a otras páginas muchas veces en otras ventanas del navegador. Esas ventanas a menudo no son visualizadas en el modo de pantalla entera o máxima. Existen también muchos programas para usuarios que se toman en principio una parte de la pantalla y siempre son visualizados – por ejemplo programas de mensajes instantáneos como ICQ. Todos estos usuarios no le dan el placer de agrandar la ventana del navegador solamente para ver su página. No se rompa la cabeza demasiado por los valores medios que hay me tomar para la dimensión de las pantallas. Un par de cientos de píxeles (o sea una indicación muy indeterminada) se pueden suponer para la anchura, pero eso es todo.

Utilice indicaciones de altura y anchura en porcentajes, para las tablas y marcos. Indicaciones absolutas de píxeles tienen un sentido allí, en donde la primera columna de una tabla invisible se debe encontrar sobre una imagen de fondo coloreada partida en dos. Por lo demás debe abandonar la idea de que por ejemplo una imagen o un párrafo deben comenzar exactamente 10,8 cm del borde izquierdo de cada navegador. Si la página se ve bien en su navegador, eso no significa que en los navegadores de los usuarios también se vea bien, en algunos casos es de esperar que la visualización sea realmente mala.

No utilizar los elementos HTML para otros fines

No es recomendable utilizar los elementos lógico-semánticos de HTML, para lograr determinados efectos de formato. Algunas personas utilizan por ejemplo el elemento blockquote para lograr sangrías de párrafos, y esto tan sólo porque la mayoría de los navegadores interpretan el texto encerrado en <blockquote> … </blockquote> como un párrafo con sangría. El elemento blockquote existe sin embargo para especificar citas y debe ser usado sólo para eso.

Pero aun mucho peor es la utilización incorrecta de cabeceras. Las cabeceras no existen para hacer que los textos sean más grande y estén en negrita, sino para marcar las relaciones jerárquicas lógicas entre los diferente párrafos. Si desea hacer formatos sobresalientes, utilice para ello las hojas de estilo en cascada.

Utilizar textos de enlaces honestos y explícitos

Generalmente es válido lo siguiente: el fin de un enlace debe cumplir lo que promete. Eso significa que el texto del enlace no debe prometer mucho, ni tampoco muy poco. Si por ejemplo, se ofrece información sobre un programa determinado, sin ofrecer bajarlo, entonces no sería bueno poner un un enlace sugiriendo que el producto puede ser bajado en la página.

Enlaces pueden ser puestos en cualquier lugar del texto. Pero si lee un texto, en el cual cada segunda palabra es un enlace, entonces se podrá dar cuenta que eso molesta definitivamente la lectura. El motivo de esto, es que uno siempre pone atención a los enlaces, y eso nos molesta al leer. Por esta razón es de suma importancia que los enlaces en los textos no se conviertan en adivinanzas, sino al contrario, al leerlos, el usuario debe darse una idea de lo que se esconde detrás de ellos.

Utilice siempre un enlace dentro del texto, siempre y cuando el texto del enlace sea razonable. Formule oraciones, en donde aparezca el texto del enlace, de tal manera que se pueda comprender de lo que se trata.

No escriba por ejemplo:

Más información aquí.

sino:

Información adicional sobre el tema.

Utilizar imágenes correctamente

A menos que usted haya decidido publicar una exposición de arte en la red, es aconsejable mantener las imágenes web pequeñas. Tenga en cuenta al crear las imágenes, que muchos usuarios tienen una conexión a Internet que depende del volumen de transferencia de datos, o sea que ellos pagan por la cantidad de datos que son transferidos a sus ordenadores. Aunque la mayoría de los navegadores poseen una función que permite no cargar los gráficos, muchos usuarios no la utilizan y eso no significa que están dispuestos a recibir gráficos de un tamaño mayor a 1MB.

Por tal razón le aconsejamos que utilice imágenes web pequeñas bien posicionadas. Muchas veces basta tener imágenes con 16 colores en lugar de 256 o hasta de 16,7 millones. Esto hace que las imágenes sean más pequeñas y carguen más rápido las páginas web.

Por otro lado no hay que prescindir de gráficos. Leer sólo texto en la pantalla cansa mucho más que por ejemplo en un libro. Por tal razón es recomendable estructurar los textos largos. La utilización de imágenes también forma parte de ello.

Las imágenes pequeñas en forma de iconos son ideales. Ellos se cargan bien rápido y se pueden utilizar varias veces en un mismo archivo HTML.

Gráficos pequeños pueden también tomar determinadas funciones de identidad corporativa, o funciones de orientación. La ventaja de usar estos gráficos en varias lugares, es que la mayoría de los navegadores los cargan tan sólo una vez y luego los mantienen en la memoria.

En este tutorial vamos a explicar las partes de una estructura básica de una página hecha en HTML. Como veremos, la sección del body (donde va toda la información que se muestra al usuario), puede y debe hacerse más compleja, conteniendo capas y estructuras que conformes los menús, el contenido y el pie de página, entre otros.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

• Conceptos básicos de HTML.
• Normas elementales en HTML.
• Videotutoriales de HTML.
• Como hacer buenas páginas en HTML.
• Todos los capítulos del subapartado Crear una página web de este manual.

Introducción

Cada página HTML debe constar de dos secciones:

1. El HEAD o cabecera, donde está la información sobre la página web, como el título, una breve descripción y algunas palabras clave. También puede contener información de estilos (CSS) y librerías JavaScript.
2. El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.

Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:

• <html> significa el inicio (y final) del documento.
• <head> significa el inicio (y final) de la sección de cabecera del documento.
• <title> Es el título del documento. Esto se muestra por la mayoría de los navegadores como título de la ventana, cuando agregas una web a favoritos, etc. Los motores de búsqueda  como Google suelen utilizarlo también como título en los resultados de búsqueda, por lo que es muy importante para la optimización de la página web y el SEO en general. Por todo esto, debes escoger muy bien el título de cada página de tu sitio web y procurar que todos sean únicos y descriptivos.
• <body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario final).

Estructura básica en HTML

Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título de ejemplo</title>
</head>
<body>
<p>¡Esta es mi web!</p>
</body>
</html>

video tutorial html Tema I

Tutorial Básico de HTML. Creación de Páginas Web… Tema II

Tutorial Básico de HTML. Creación de Páginas Web… Tema III

Tutorial Básico de HTML. Creación de Páginas Web… Tema IV

Este tutorial está basado en las recomendaciones del W3C (y II), donde la idea es utilizar CSS siempre que sea posible, pero seguir incluyendo HTML semántico para maximizar la compatibilidad con navegadores antiguos.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

• Conceptos básicos de HTML.
• Videotutoriales de HTML y HTML básico.
• Como hacer buenas páginas en HTML.
• Todos los capítulos del subapartado Crear la página web de este manual.

Etiquetas y elementos HTML son interruptores on / off para los distintos tipos de formateo de texto. A menos que se especifique lo contrario, todo etiqueta de apertura (como <head>) necesita un cierre ( un “off”) en su etiqueta de final (</ head>). Ejemplo:

<html>
...
</html>

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea más fácil seguir tu propio marcado y que sea más fácil de leer. Además, en el momento en el que estés preparado para dar el salto a XHTML (el lenguaje que está pensado para reemplazar a HTML) te será más fácil, ya que en XHTML todas las etiquetas deben cerrarse.

Con frecuencia verás diseños HTML con código indentado como el que se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras estructuras diferentes. Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:

<p>
<strong>
texto en negrita
<em>texto en negrita y cursiva
texto sólo en cursiva
</em>
</ p>

Sin embargo, esto es válido:

<p>
<strong>
texto en negrita
<em>
texto en negrita y cursiva
</em>
</strong>
<em>
texto solo en cursiva
</em>
</p>

Etiquetas, elementos y atributos

Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representación interna de lo que leyó. Esta representación interna se conoce como un elemento. Entonces, el navegador “decide” cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente (como el HTML, HEAD o BODY).

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean así:

<a href="nombre-de-archivo.html">

Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia. Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente, otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario. Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.

¿Qué es el HTML?

HTML es un lenguaje de marcado, y es por mucho el lenguaje más comúnmente utilizado en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qué partes son encabezados, qué partes párrafos, qué partes listas, qué partes enlaces, etc. HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El HTML fue desarrollado por el científico Tim Berners-Lee en 1990.

Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene etiquetas de formato o marcaje. En HTML, usamos “etiquetas” (tags) para crear la estructura de una página web. Estas etiquetas indican al navegador cómo mostrar el texto y las imágenes en el documento. Los archivos HTML deben tener la extensión .htm o .html para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

Etiquetas lógicas en HTML (logical inline tags)

Las etiquetas lógicas HTML están diseñadas para describir (en el explorador) el significado del texto que encierran. Esto tiene un impacto importante en los motores de búsqueda como Google (y en el SEO), puesto que los buscadores analizan esas “etiquetas” para intentar averiguar de qué trata una página web. Hay muchas etiquetas lógicas en HTML, entre otras:

• <strong>: marca un texto en negrita, denota importancia.
• <em>: destaca un texto – por lo general hace que los navegadores muestren el texto en cursiva.
• <span>: una etiqueta de línea neutral. – Para darle un aspecto diferente se usa CSS.
• <div>: un elemento de bloque neutral. – Para darle un aspecto diferente también se usa CSS.

Aunque estas etiquetas lógicas tienen una forma predeterminada de mostrarse en los navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debería utilizar para darles la apariencia deseada y crear así el diseño de una página web.

Etiquetas de bloque vs etiquetas de línea

En HTML, las etiquetas son “de línea” o “elementos de bloque”.

Elementos de bloque en HTML (block elements)

Un elemento de bloque digamos que existe en su propia caja virtual y está siempre seguido por un salto de línea (un enter). En otras palabras, un elemento en bloque rompe el flujo del texto para crear un espacio propio alrededor de sí mismo que ningún otro elemento puede invadir.

Elementos de línea en HTML (inline elements)

Las etiquetas de línea (o elementos de línea), en cambio, sí forman parte del “flujo” del texto en el que se insertan y no forman esa caja virtual de la que hablábamos, ni tienen saltos de línea. Los elementos de línea siguen el flujo normal del texto. Por ejemplo en el siguiente texto:

Este es un ejemplo de un elemento de línea en HTML.

El texto en negrita está contenido dentro de un elemento de línea o inline tag, en este caso <strong>. Aquí el código:

<p>Este es un ejemplo de un <strong>elemento de línea</strong> en HTML.</p>

Así, un ejemplo de una etiqueta de bloque es un <div> (caja) ó un <p> (párrafo) y un ejemplo de una etiqueta de línea es la <b> (negrita). Para entender este concepto lo más sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

Se llama contraste a las diferencias que existen entre dos elementos relacionados y es uno de los principios de diseño web. El contraste puede ser mayor o menor en la medida que mayores o menores sean las diferencias de estos elementos. Esto quiere decir que dos elementos que tienen pocas diferencias entre sus atributos tienen un contraste bajo, mientras que dos elementos cuyos atributos se diferencias mucho, tienen un alto contraste.

El empleo del contraste en el diseño web resulta muy importante para atraer la atención del usuario. Una página web cuyos elementos tienen poco contraste no atraerá la atención de los posibles usuarios, mientras que una web que emplea un  contraste evidente para destacar sus elementos más importantes, atraerá fácilmente la atención. El contraste es uno de los métodos empleados para dirigir la atención del usuario de la página hacia determinados elementos. En el siguiente ejemplo, una misma imagen se muestra con dos contrastes diferentes. Es fácil determinar que, a pesar de ser la misma imagen y tener el mismo tamaño y color, la primera en llamar la atención es la imagen de la derecha, cuyo contraste es más marcado que el de la imagen de la izquierda.

Si en una página web se desea resaltar un objeto contrastándolo con los demás elementos que lo circundan, no necesariamente hay que oscurecerlo, agrandarlo, deformarlo o cambiar su color. El contraste, tal como ya lo definimos, es la diferencia entre los distintos elementos, por lo que también es posible cambiar los atributos de los elementos circundantes, de forma que a pesar de no haber realizado cambios en el objeto logramos destacarlo por contraste.

Tipos de contraste

Existen cuatro tipos de contraste:

• Contraste de tono
• Contraste de color
• Contraste de contorno
• Contraste de escala

Contraste de tono

De todas las propiedades de color (tono, matiz y croma), el tono es el que brinda mayores posibilidades de empleo para manejar el contraste entre diferentes elementos, por lo que también resulta el más usado. Un ejemplo notable de la utilización de variaciones de tono para destacar los diferentes elementos podemos verlo en la siguiente imagen:

En la imagen anterior puede apreciarse que el menú se encuentra distribuido por toda la página y tienen la misma forma y tamaño que el resto de los cuadros en que se encuentra dividida la misma. La diferenciación de los elementos del menú está basada en variaciones de tono. Si posamos el puntero en alguno de estos elementos, podremos ver que para destacar el elemento que se está por seleccionar, también los diseñadores han empleado variaciones tonales.

Contraste de color

Otra de las posibilidades de contrastar objetos es a través del empleo de diferentes colores, logrando lo que se denomina contraste de color. Este tipo de contraste, bien empleado, da muy buenos resultados, pero también puede dar lugar a resultados desagradables si no se emplea con buen criterio.

La combinación de colores en diferentes elementos en una web no solo tiene la finalidad de embellecer el conjunto, sino que además posibilita destacar elementos. La combinación de elementos con colores fríos y cálidos es la forma más corriente de lograr el mencionado destaque. Mientras que los colores fríos (verdes y azules) tienden a dar pasividad y dan un aspecto regresivo al objeto, los colores cálidos (rojos y amarillos) son más agresivos y brindan a los objetos un aspecto expansivo. Esto quiere decir que si empleamos adecuadamente la combinación de colores fríos y cálidos, podemos lograr que un objeto se destaque sobre los demás.

En el siguiente ejemplo podemos apreciar una página web que se encuentra diseñada sobre un fondo de color neutro, cuyo logotipo no presenta grandes diferencias de tamaño ni de tono respecto de los demás elementos de la página. Los diseñadores han logrado resaltar el logotipo de la página web mediante el empleo del color.

Contraste de contorno

Una forma sencilla de destacar los elementos entre sí, es el empleo de variaciones en el contorno. Las formas irregulares o abstractas atraen más la atención visual que las figuras sencillas y geométricas.

Si colocáramos algunas imágenes con un contorno geométrico (cuadrado, círculo, rectángulo, etc.) junto a una imagen cuyo contorno es irregular y sin otro tipo de diferencias entre ellas, lograremos que la vista de quien observe el conjunto se pose en primer lugar en la última.

El siguiente es un ejemplo notable del empleo del contraste de contorno. En la imagen aparece una página web en cuyo diseño aparecen varios elementos con colores llamativos, alto contraste y tamaños similares. Sin embargo, el logotipo es lo primero que llama la atención, debido a su forma irregular que contrasta claramente con el resto de la página que tiene trazados marcadamente geométricos.

Contraste de escala

La utilización de escala o tamaño diferente para resaltar determinados elementos es una de las formas más conocidas y sencillas de conseguir el contraste. Es lógico que si colocamos un elemento de mayor tamaño que otros, aún cuando sean similares en otros atributos, éste elemento se destacará del resto, y que cuanto mayor sea la diferencia de escala, mayor será el contraste.

En el siguiente ejemplo, vemos la imagen de una página web diseñada con poco contraste de color, de forma o de tono. El nombre del juego promocionado logra destacarse del resto claramente, debido a que se encuentra a una escala mayor que el resto de los elementos que componen esta página.

Conclusión

Los ejemplos anteriores muestran la aplicación de un tipo de contraste para diferenciar elementos entre sí. Sin embargo, lo más frecuente es que el realce de los elementos más importantes se haga a través del empleo de más de un tipo de contraste combinados.

Pero hay que destacar que es muy fácil emplear incorrectamente el contraste. Uno de los errores más frecuentes es emplear contrastes excesivos, desfavoreciendo la estética general de la página. Otro error frecuente es que, por desconocimiento de estos conceptos, terminan destacándose elementos que no son los más importantes de la página. El uso del contraste, como cualquier otra técnica, debe ser practicado para conseguir buenos resultados.

En muchos diseños web, la simple disposición de textos, imágenes, videos y cualquier otro elemento no es suficiente para conseguir que el usuario dirija la atención hacia los elementos que consideremos más importantes. La atención de las personas que navegan por Internet es de apenas algunos segundos, lo que implica que el diseñador debe lograr captar la atención del usuario, que éste se sienta atraído y no se retire de la página en unos segundos.
Este es uno de los motivos para emplear el énfasis en nuestros diseños. Otro motivo para aplicar este principio del diseño es diferenciar elementos semejantes entre si, resaltando aquellos que, dentro de su misma especie, se desee destacar de los otros. Por ejemplo, si tuviéramos que incluir un texto con gran extensión, la atención del usuario seguramente no pasará de las tres o cuatro primeras líneas, por lo que la lectura deberá simplificarse y agregarse elementos destacados para que el lector pueda hacer una rápida recorrida. Es muy probable que, tras esta breve recorrida empleando las ayudas aplicadas en el texto, el usuario considere que lo que allí se encuentra es lo que necesita y prosiga con una lectura más detenida del texto.
Lo mismo sucede con las imágenes. Una larga colección de imágenes similares difícilmente pueda atraer la atención de un internauta, por lo que será necesario destacar alguna o algunas de estas imágenes para que quien ingrese en nuestra página tenga una idea resumida del tipo de contenidos que allí encontrará.
El énfasis es uno de los métodos más adecuados para conseguir el necesario resaltado de algunos elementos de un grupo de elementos homogéneos.

Clasificación de elementos según el énfasis

De acuerdo al énfasis que el diseñador emplee en los diferentes elementos que componen una página, éstos se pueden clasificar en tres grupos:

• Elementos dominantes
• Elementos sub-dominantes
• Elementos subordinados

Elementos dominantes

Son aquellos elementos que, dada su importancia respecto del resto de los contenidos, se destacan aplicando énfasis por encima del resto. A continuación mostramos un ejemplo de elemento dominante:

En este ejemplo, podemos apreciar dos elementos que por su énfasis pueden considerarse como dominantes: el título “creative services” y la imagen de la botella. Seguramente, al ver esta imagen, estos dos elementos hayan sido los primero en los que hayamos detenido nuestra atención, lo que ha sido el deseo del diseñador de la página. El mismo ha logrado este efecto gracias al correcto empleo del énfasis, consiguiendo colocar estos elementos en el primer plano de la composición.

Para lograr convertir a un texto como elemento dominante, el diseñador puede emplear varios atributos sobre los cuales aplicar la diferencia, como tamaño, color, tipografía, posición o una combinación de ellos.
En cuanto a las imágenes, al igual que con el texto, basta con variar algunos de los atributos de las mismas, como tono, color, tamaño, posición o una combinación de las mismas, para convertirla en uno de los elementos dominantes de la página.

Hay que destacar que la cantidad de elementos resaltados también resulta muy importante. Cuantos más elementos con atributos similares coloquemos en una página, menos se destacarán unos de otros. Si en la imagen anterior colocáramos una cantidad mayor de texto resaltado, el texto que es dominante dejaría de serlo ya que estaríamos haciéndolo homogéneo con otros elementos.

Elementos sub-dominantes

A la hora de interesar al visitante de la página, es necesario que luego de conseguir su atención gracias a los elementos dominantes, podamos guiarlo a través de los restantes elementos de forma tal que mantenga el interés en lo que exponemos y se interese por ver otros contenidos.

Para ello utilizamos otros énfasis menores que los de los elementos dominantes, pero mayores que los que empleamos en el resto de los elementos de la página. En el caso de los textos, podríamos definirlos como subtítulos y textos resaltados. En la siguiente imagen vemos una página web donde se ha distribuido el texto en varios párrafos, cada uno con su subtítulo.

En esta página web (igrafiq.com), también encontrarán una gran cantidad de ejemplos de utilización de elementos sub-dominantes. Notarán que estos elementos resaltados colaboran en la visualización de los elementos importantes y facilitan la ubicación de cada sección. En una página donde todos los elementos resultan homogéneos, resulta extremadamente difícil ubicar cuales son los elementos más atractivos o importantes, por lo que la atención del visitante pronto se perderá, con grandes posibilidades de que el mismo abandone la página.

Elementos subordinados

Llamamos elementos subordinados a dos tipos de elementos. Unos son aquellas informaciones anunciadas por los elementos dominantes y sub-dominantes, como textos complementarios o ampliatorios. Otros son elementos que completan una composición de imágenes, embelleciendo la página o ayudando a resaltar a los elementos principales.

Estos elementos subordinados deben tener atributos de menor resalte que los de los tipos anteriores, de forma que la diferencia con aquellos colabore en resaltar su importancia.

El énfasis conseguido en los elementos dominantes y sub-dominantes depende en gran medida de la correcta utilización de los atributos de los elementos subordinados. En la imagen que empleamos en el ejemplo anterior, vemos que el tamaño de los textos subordinados es mucho menor, lo que permite que los subtítulos y títulos se destaquen.

Sin embargo, hay que tener presente que los elementos subordinados contienen información necesaria para completar el mensaje que se desea entregar, por lo que su legibilidad debe ser muy buena.

Conclusión

La aplicación de diferentes grados de énfasis resulta de extrema importancia en el diseño web. Gracias a ello la página en construcción puede verse heterogénea, llamando la atención de los usuarios sobre aquello que puede hacer que el mismo decida quedarse viendo el resto de los contenidos. El énfasis contribuye en gran medida también en la estética de la página. Veamos un ejemplo donde la aplicación de diferentes grados de énfasis son el elemento principal del diseño:

En este diseño se puede apreciar que la aplicación de diferentes grados de énfasis en el texto conforma la estética del diseño de la página. La utilización de diferentes tamaños, colores y tipografías hacen a la totalidad del diseño, además de dar el mensaje textual. A la izquierda aparecen los elementos dominantes, mientras que a la izquierda los elementos sub-dominantes conforman el logotipo, el menú y algunos subtítulos, mientras que los elementos subordinados completan el mensaje.

Además de dar un mensaje claro, cada tipo de elemento tiene importancia desde el punto de vista estético. Esto demuestra claramente que el énfasis que se da a cada elemento resulta importante, tanto en el diseño estético de la página como en la claridad del mensaje.

¿Qué es el XHTML Doctype? 17/01/10

Hace ya tiempo que la mayoría de páginas webs incluyen a su comienzo una misteriosa etiqueta <!DOCTYPE, y sin embargo hay mucha gente que ignora cuál es su significado o para qué sirve, por lo que simplemente se limita a copiarla, haciéndolo además muchas veces de forma incorrecta. En las siguientes líneas trataremos de explicar para qué sirve y cómo ha de utilizarse.

La declaración de tipo de documento DOCTYPE, que así es como se llama, es una parte fundamental de todas aquellas páginas que quieran cumplir los estándares, tanto HTML como XHTML. Esta declaración indica que versión de (X)HTML se usa en la página, de forma que los navegadores pueden saber qué sintaxis y gramática se usa, y los validadores puedan comprobar su validez. Para ello la declaración indica un DTD contra el cual se puede realizar la validación.

Aparte de esto la declaración DOCTYPE se utiliza por los navegadores para activar su modo estándar o estricto, o su modo compatibilidad (quirk). La razón de esto y las diferencias existentes entre estos modos queda fuera del ámbito de esta explicación, pero es suficiente con darse cuenta de que la no utilización de un DOCTYPE o su incorrecto uso, puede hacer que los navegadores rendericen la página de forma completamente diferente a lo que teníamos previsto. Todas las páginas nuevas que se hagan deberían contener esta declaración y hacerlo de forma correcta, con el fin de cumplir los estándares por un lado y garantizar resultados de renderizado homogéneos por otro.

Una declaración DOCTYPE suele tener una estructura similar a la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En este ejemplo se indica que la página debe validarse como XHTML Transitional utilizando el DTD existente en la url http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. Es habitual que estas líneas las creen los propios editores pero no siempre lo hacen de forma correcta, además a veces se copia de alguna otra página en la que por ejemplo la ruta del DTD es local, por lo que seguramente generaría un fallo en la validación en nuestro web.

Existen tres tipos de documentos XHTML: Strict, Transitional y Frameset. A continuación se muestra la declaración de cada una de ellas con la referencias válidad a cada DTD, y un poco más abajo sus diferencias para saber cuándo usar cada una.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• Strict: este tipo de documento está principalmente ideado para su utilización con CSS, separando completamente el contenido y la presentación. Para ello no permite la utilización de etiquetas y atributos ya en desuso orientados a la presentación, como font, center y otros. Escribiendo páginas en XHTML 1.0 Strict se consiguen páginas bien estructuradas y fácilmente adaptables mediante CSS, pero tiene la desventaja de crear incompatibilidades con ciertos navegadores.
• Transitional: incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación ya en desuso.
• Frameset: es una variante del Transitional para las páginas que utilizan frames

Por último hay que tener en cuenta que no es necesario que las páginas XHTML contengan una instrucción prolog similar a <?xml version=”1.0″ encoding=”utf-8″ ?> salvo en los modos estrictos. En realidad esta instrucción es únicamente necesaria cuando el contenido de la página se sirve como text/xml y además su utilización hace que Explorer 6 pase a modo Quirk por lo que no se recomienda su uso. Si necesitamos indicar el encoding de la página se recomienda utilizar la etiqueta meta correspondiente.

Si preguntamos por ritmo, la gran mayoría de las personas lo relacionan con la música. Esto se debe a que es mucho más sencillo percibir el ritmo a través del oído que a través de la vista. Mientras que en la observación de obras visuales los atributos más sencillos de detectar son la forma y el color, en la música lo es el ritmo.

Sin embargo, el empleo del ritmo en la creación de objetos visuales (por ejemplo una página web) es fundamental y por ello se le considera uno de los principios del diseño web, ya que a través de la repetición se consigue una regularidad que es importante para conseguir ciertos efectos en el usuario, como sensación de movimiento, facilidades de búsqueda y navegación, sensación de relajamiento, sensación de orden y coherencia, etc.

El ritmo colabora en la presentación coherente de los contenidos de la página, ordenándolos de forma tal que facilitan la visibilidad de los mismos. También sirven para embellecer la página, empleando repeticiones como elemento decorativo. Este tipo de ornamentaciones tienen antecedentes milenarios, pudiendo apreciarse este ordenamiento del diseño desde la prehistoria.

El ritmo en los elementos visuales se consigue estableciendo un patrón basado en la forma, posición, color o una combinación de estos atributos. Es posible establecer un ritmo con elementos disímiles, dado que existen diferentes tipos de ritmo.

La variación en el espacio que separa los objetos no debe ser tan grande que impida ver la repetición. Este concepto es fundamental, ya que la repetición resulta efectiva siempre y cuando el usuario pueda distinguirla. Cuando la magnitud de la separación entre los elementos repetidos es excesiva, se pierde el ritmo, ya que éste solo puede ser considerado como tal cuando es posible apreciarlo.

Una misma página puede emplear distintos tipos de ritmo, ya que se puede diseñar una página pensando en dar aspectos diferentes a cada sección de la misma.

Clasificación del ritmo

Existen tres tipos de repeticiones o ritmos, clasificados de acuerdo a la regularidad con que se producen:

• Repetición regular
• Repetición sincopada
• Repetición no armónica

Repetición regular

Es la forma más sencilla de repetir elementos. Se trata de colocar elementos con atributos similares a espacios regulares. Las únicas variaciones permitidas en este tipo de repeticiones es la magnitud de los espacios entre los elementos y la orientación en que se produce esta repetición.

La orientación de la repetición puede ser vertical, horizontal o tener una disposición en ambos planos. Los siguientes ejemplos muestran los tres tipos de disposición que pueden emplearse en la repetición regular.

En el primer ejemplo, la disposición repetida y regular de elementos similares del menú en forma horizontal, colabora con la facilidad de navegación de la página, manteniendo un orden que permite la fácil visualización de cada uno de los elementos que componen dicho menú.

En el segundo caso, el diseño completo está basado en repeticiones regulares verticales. Esto permite que los usuarios puedan desplazar la vista y encontrar todos los elementos que están dispuestos según un patrón ordenado.

El tercer ejemplo muestra una forma de ordenar los diferentes elementos a intervalos regulares, tanto en el plano vertical como en el horizontal. La forma en que se encuentran dispuestas las imágenes, brinda una sensación de orden y facilita la visualización de los elementos.

Repetición sincopada

Este tipo de repeticiones muestra un orden algo más complejo que la repetición regular, ya que se trata de repetir grupos de elementos que a su vez se encuentran ordenados en forma regular, brindando una sensación de orden similar a la conseguida con el tipo de repetición anterior pero con una geometría de mayor complejidad.

Las páginas diseñadas con elementos ordenados con este tipo de repeticiones se muestran más rítmicas que las repeticiones regulares. A continuación, vemos un ejemplo de repetición sincopada, aplicada al fondo de la página. Podemos ver que un grupo de cuatro figuras repiten en forma ordenada, pero no regular, formando un ritmo más elaborado que en los ejemplos anteriores.

La síncopa en la elaboración de obras visuales, al igual que en la música, presenta diseños más complejos que las repeticiones simples, por lo que suele ser empleado como forma de evitar que el diseño resulte demasiado estándar.

Repetición no armónica

Se emplea para dar una sensación discordante, aumentando el mensaje emocional del diseño.En el siguiente ejemplo, a pesar de que el orden se encuentra alterado entre los diferentes elementos que componen el menú, la sensación de orden se encuentra dada por la igualdad de colores y tonos. El diseñador dio una sensación de desorden, aun cuando no perdió la armonía del diseño, empleando otros atributos.

Este tipo de repeticiones se puede apreciar también en la disposición del contenido de algunas páginas, tanto textos como imágenes. Disponer los objetos de esta forma pretende dar un aire informal al diseño y es muy frecuente encontrarlo en páginas musicales y de arte. Este tipo de diseño se encuentra relacionado con el arte abstracto, en el que se inspira.

La repetición no armónica no tiene por qué presentarse como desorden, ya que en este tipo de ordenamientos se aplican patrones irregulares, estando el orden dado por otros atributos de los elementos presentados.

Conclusión

Como puede verse en los ejemplos presentados, resulta importante para la presentación de los contenidos el empleo de la repetición o ritmo, de forma tal que el usuario que ingresa a la página pueda orientarse con facilidad y tenga un acceso rápido a los elementos más importantes. Esto hace que la página sea más amena, de modo que el visitante tenga interés en quedarse en ella y ver todos los contenidos.

Colabora en gran medida también con la estética del diseño, ya que la formación de patrones ordenados, además de facilitar la visibilidad y el acceso a los mismos, forman en sí parte del diseño artístico de la página.

El uso adecuado de las repeticiones es, por tanto, un elemento crucial en el correcto diseño de una página web. Explorar las posibilidades que brinda el ritmo resulta indispensable para quienes estén adentrándose en este fascinante mundo del diseño web.