19. Componer con estilo
Una vez de conocidas las técnicas para componer una página del Web, vamos a considerar los ditintos aspectos necesarios para que esa página sea atractiva y efectiva, fácil de utilizar y de mantener, así como también los errores más frecuentes y lo que hay que evitar al componer un documento HTML.
Bastantes de los conceptos indicados a continuación ya han sido expuestos en sus capítulos correspondientes. Otros son nuevos, y otros son de puro sentido común. Pero todos ellos agrupados pueden dar una idea de conjunto sobre las directrices a seguir para confeccionar adecuadamente una página del Web.
Estructura de una página
Una página consiste básicamente en infomación que se ofrece al usuario. Pero se debe organizar esta información de una manera clara y efectiva.
Contenido: Un sitio del Web debe ofrecer contenido, es decir, información del tipo que sea, no una simple colección de enlaces a otras páginas. Evitar poner enlaces a páginas todavía vacías de contenido, en donde sólo haya un icono indicando "Página en obras".
Longitud: Si una página resulta excesivamente larga, es conveniente descomponerla en otras varias, para facilitar el tiempo de carga, y dar la oportunidad al usuario de elegir lo que le interese.
Cabeceras: Si la información que se suministra se trata principalmente de texto, es muy conveniente utilizar adecuadamente las cabeceras y las listas.
Las cabeceras del nivel 1 (H1) sirven para indicar los temas importantes, mientras que las del nivel 2 (H2) se utilizarán para señalar los sub-temas relacionados con los anteriores, etc.
Es importante recordar que el propósito de las cabeceras no es el de conseguir unos determinados tamaños de fuentes (para ello hay otro tipo de etiquetas), sino que se deben utilizar exclusivamente para organizar un documento en diversas secciones. Con este propósito, he aquí algunas recomendaciones acerca del correcto uso de las cabeceras:
- Una cabecera no debe estar a más de un nivel del que la que le precede. Es decir, un elemento H3 no debería seguir directamente a uno H1.
- Es incorrecto querer destacar de una manera extra lo que está dentro de la cabecera, utilizando etiquetas que hagan el texto aún más grueso, tales como <B> o <EM>.
- No se debe marcar el texto con las etiquetas H2 o H3, simplemente porque en nuestro navegador obtenemos así el tamaño de fuente y el grosor deseados, ya que en otros navegadores puede resultar de un tamaño grotescamente grande.
Composición
Es muy conveniente tratar de conseguir que las distintas páginas que componen un sitio del Web tengan un
estilo consistente. Una composición uniforme de las páginas ayudará a los usuarios a navegar entre ellas, y dará personalidad al conjunto. Esta consistencia se puede obtener escogiendo un tema gráfico común al conjunto de las páginas: puede ser un color de fondo, o un logo, o una manera particular de disponer los gráficos o el texto.
Aunque el contenido es lo principal, una presentación acertada y atrayente contribuirá en gran medida al éxito de una página del Web.
Escoger un título significativo: A veces se omite el título de un documento HTML, o se le pone uno inadecuado, porque no se ve en en pantalla. Pero ese documento será conocido en el Web precisamente por su título.
Por tanto, conviene hacer que el título sea muy descriptivo, de tal manera que cuando alguien lo guarde en su bookmark pueda saber posteriormente de qué se trata. A ser posible, se debe dar una indicación en el título de la organización (por ejemplo, en el título de esta página se indica el nombre del manual, el número del capítulo, y el contenido del capítulo), con lo que su identificación sea completa fuera de su contexto.
Poner un párrafo introductorio: A menudo, la única indicación del contenido de una página viene suministrada por una imagen. Pero no hay que olvidarse que existen navegadores que funcionan sólo en modo texto (tal como Lynx, por ejemplo), así como que también hay una proporción de usuarios de navegadores gráficos que inhabilitan la carga de imágenes para ganar en velocidad.
Es conveniente, por tanto, poner un párrafo introductorio que exprese de manera clara y concisa el contenido de la página. Otra razón muy importante para hacerlo es que existen motores de búsqueda que catalogan las páginas precisamente por el contenido de las palabras iniciales (como se vió en el Capítulo 17).
Ayudas visuales: Guiar los ojos del usuario por medio de la estructura de la página, barras separadoras, tipos de fuentes, iconos, imágenes, etc. No utilizar el parpadeo más que para las emergencias.
Para hacer particiones de una página se pueden usar los separadores horizontales (<HR>) o tablas con bordes. Pero no hay que abusar de esto. Demasiados separadores dan un aspecto trozeado a la página.
Seleccionar un fondo de color o con imágenes: No todos los navegadores lo soportan, pero si se utiliza adecuadamente puede tener un impacto espectacular.
Es muy importante que el fondo no dificulte la lectura del texto. Si el color del texto es muy llamativo, es preferible usar un color de fondo pastel (ver el Cap. 7). Si se utiliza un color de fondo negro o muy oscuro hay que tener un cuidado muy especial en escoger un color de texto claro, que contraste suficientemente.
Comunicarse con los usuarios: Hay que ofrecer al usuario de la página la posibilidad de que pueda hacer comentarios, indicar posibles problemas, etc. Para ello es muy conveniente suministrar una dirección de email, o incluso un libro de visitas.
Asímismo, es muy útil poner la fecha de la última modificación. Si los cambios son frecuentes, también se puede proporcionar una lista cronológica de las modificaciones (como por ejemplo la lista de este manual)
Ofrecer referencias o otras páginas similares: Si un usuario está interesado por el contenido de nuestra página nos agradecerá mucho si le ofrecemos referencias a otras páginas con el mismo tema u otros relacionados con él. Hay que valorar el trabajo de los demás, y no ver tales páginas como rivales a la nuestra, sino al contrario, como una medida para enriquecerla.
Facilitar el mantenimiento de las páginas
Una cosa que facilita mucho el mantenimiento de una página es escribir el código HTML de una manera clara y ordenada, procurando poner cada etiqueta en su propia línea, dejando líneas en blanco entre los distintos bloques de código, y sobre todo, poner los oportunos
comentarios en el documento HTML no visibles en pantalla, (ver
Capítulo 2), cuando se hagan cosas un poco elaboradas.
Navegación
Hay que procurar por todos los medios el facilitar al usuario la navegación entre las distintas páginas. Si éstas son numerosas, el usuario no debe sentirse perdido como en un laberinto. Los medio que se pueden emplear para conseguirlo son:
Iconos de navegación : Como por ejemplo: 
. No olvidarse de incluir dentro de cada etiqueta el atributo ALT, que indica con un texto su función (ver el Cap. 4). Y sobre todo, es muy importante que por lo menos haya siempre un icono que conduzca a la página principal.
Indice con frames : Una de las funciones más útiles de los frames (ver Cap. 14) es la posibilidad de tener un índice dentro de un frame que se mantiene siempre a la vista, con lo que se facilita enormemente la navegación.
Barra de menú: Se puede utilizar como ayuda a la navegación una barra de menú, consistente en un mapa (ver Cap. 13), es decir una imagen que contiene zonas que enlazan con otras páginas. No olvidarse de suministrar los enlaces del mapa también en forma de texto.
Claridad en el texto de los enlaces: Hay que procurar que las palabras que forman parte de un enlace indiquen con claridad a dónde conduce ese enlace, y que estén integradas con el resto de la frase.
Evitar frases como ésta: "Puedes encontrar muchas direcciones útiles de HTML pulsando aquí"
Un estilo mucho mejor es: "Puedes encontrar muchas direcciones útiles de HTML en La Agenda , de Manuel Barberán."
Imágenes
Se consiguen presentaciones muy vistosas con las imágenes, pero pueden representar un problema para los usuarios con conexiones lentas. Incluirlas sólamente cuando añadan algo al contenido.
Si se juzga conveniente incluir imágenes grandes, hacerlo de tal manera que sea el usuario quien decida si las va a acargar o no. Para ello, suministrar enlaces a las imágenes con indicación de los kbytes, bien sea con un texto, bien sea con un thumbnail (versión muy reducida de la imagen, ver Cap. 8)
Se deben incluir dentro de las etiquetas de las imágenes estos atributos, que aunque son opcionales son muy convenientes:
Atributo ALT: Es un texto asociado a la imagen (ver Cap. 4). Muy conveniente para los que utilizan navegadores en forma texto (Lynx, etc.), o para los que usando navegadores gráficos, han inhabilitado la carga de imágenes para ganar en velocidad.
Atributos WIDTH y HEIGHT: Es una indicación de las dimensiones de la imagen (ancho y alto, ver Cap. 8). Es muy importante ponerlo en todas las etiquetas de las imágenes (incluso de las más pequeñas, iconos, etc.), pues facilita mucho la carga de la página, ya que primero se carga todo el texto y posteriormente se van rellenando los espacios reservados a las imágenes.
Con respecto a los GIFs animados, conviene no abusar de ellos poniendo demasiados en una misma página, no sólamente por motivos estéticos, sino también porque esto puede provocar problemas en los ordenadores de algunos usuarios.
Frames
Los frames permiten dividir la pantalla en diferentes ventanas, con un documento HTML distinto en cada una de ellas. Esto permite a su autor ejercer un gran control sobre la disposición general y apariencia de la página, pero como todas las cosas, deben ser utilizados con cuidado.
Cosas a evitar en el uso de los frames:
Excesiva fragmentación de la pantalla: Si se van a utilizar más de dos frames, hay que evitar la impresión de que se ha "parcelado" la pantalla en múltiples ventanitas. Por lo menos uno de ellos debe ser mucho mayor que los demás, para que actúe como página principal, siendo los otros meros auxiliares para la navegación de lo que ocurre en el frame principal.
Disposición demasiado rígida de los frames: A veces, el autor planea cuidadosamente en su propio monitor el tamaño de cada frame, y para evitar que los usuarios "estropeen" ese efecto, elimina las distintas posibilidades que existen para poder manipularlos (redimensionarlos, deslizar su contenido, etc.).
Pero esto puede ser muy perjudicial para usuarios con resolución de pantalla distinta (sobre todo si es menor), ya que puede ocurrir que parte del contenido de los frames quede oculta, y debido a la rigidez con que han sido planeados, no haya manera de resolver este inconveniente. Conviene, por tanto, evitar poner los atributos NORESIZE o SCROLLING="no" dentro de la etiqueta <FRAME>.
Por otra parte, al dimensionar los frames con la etiqueta <FRAMESET>, conviene evitar hacerlo empleando valores absolutos. Es mejor hacerlo con porcentajes de pantalla o valores relativos.
Enlaces al exterior prisioneros dentro de un frame: A veces encontramos páginas con frames que contienen enlaces a otros sitios del Web que al ser pulsados se cargan dentro del mismo frame. Esto resulta generalmente molesto para el usuario, pues la página cargada queda aprisionada dentro del reducido espacio del frame (agravado aún más si la página cargada contiene ella misma sus propios frames). Además, el usuario puede tener la impresión de que el autor de la página pretende impedirle que se "escape" a otras páginas.
La manera de evitar esto es poner, dentro de las etiquetas de los enlaces en cuestión, el atributo TARGET="_top" (ver Cap. 14), con lo que al pulsar el enlace la nueva página se cargará a pantalla completa.
Nombres de los ficheros
Un sitio del Web es en realidad un conjunto de
ficheros, bien sea de texto (los documentos HTML), bien sea binarios (imágenes, sonidos, etc.) que vamos a colocar en un
servidor, para que sean accesibles a quien quiera visitarlos.
Pero debido a que la mayoría de los servidores están basados en sistemas Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros ficheros en el servidor, considerar una particularidad referente a los nombres de los ficheros.
Resulta que en los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los ficheros. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos.
Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al fichero Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html
Para evitar estos posibles problemas es muy conveniente tomar estas medidas desde que se comienza la confección de una página del Web:
- Utilizar exclusivamente las minúsculas para nombrar los documentos HTML (como se ha hecho con los ejemplos prácticos de este manual).
- Igualmente, nombrar a todos los ficheros binarios (de imagen, sonido, etc.) también exclusivamente con minúsculas, cambiándoles el nombre si es preciso.
- Todas las referencias que se hagan dentro de un documento HTML a otros documentos o ficheros deben hacerse también siempre en minúsculas.
Siguiendo estas normas, no habrá problemas de este tipo.
Algunos servidores exigen además de lo anteriormente indicado que los documentos HTML tengan la extensión .html en lugar de la de .htm
Si es así, además de nombrar a los ficheros con dicha extensión, no olvidarse de hacer las referencias dentro de los documentos también con esta extensión.
Sonidos
Si se va a incoporar una música de fondo a una página conviene poner la
etiqueta del sonido
al final del documento HTML, con objeto de que se carguen primero el texto y las imágenes. No abusar con el
tamaño de los ficheros de sonido.
Una alternativa muy aconsejable a los sonidos de fondo es la de dar al usuario la oportunidad de que sea él quien active el sonido, si así lo desea. (Ver esto en el Cap. 15)
No confeccionar una página para un navegador concreto
Al contrario de lo que cree mucha gente, una página del Web no se ve de manera idéntica en todos los navegadores.
Existen muchas variantes, aparte de los diferentes tipos de navegadores, tales como la antigüedad de las versiones, los distintos sistemas operativos o equipos. Además, los usuarios pueden haber escogido una resolución de pantalla distinta a la nuestra, o haber variado la configuración de su navegador para ajustarla a su gusto.
Todo esto no quiere decir que no se puede hacer nada efectivo para resolver este problema. La mejor medida para que una página se vea correctamente en la mayoría de los navegadores es confeccionarla con naturalidad, sin forzar las cosas queriendo controlarlo todo hasta el último detalle y empleando para ello todo tipo de artificios, ya que la probabilidad de que se vea incorrectamente en otros navegadores aumentará de manera proporcional.
También es una buena medida tener más de un tipo de navegador, para comprobar si existen diferencias apreciables de uno a otro.
Sobre el tema de este capítulo, puedes también consultar:
Diseño de Páginas en Internet, de DataLink (México)
�Es difícil hacer una Página-Web?, por Antonio Guerrero 
