Texto en HTML (XI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

DISPOSICIÓN DE LOS TEXTOS EN LAS PÁGINAS WEB.-

A lo largo de este capítulo hemos visto la importancia de los textos en las páginas web, y hemos estudiado las diferentes herramientas que poseemos para dar un estilo adecuado al mismo. Es hora de ver un poco cómo podemos construir el armazón necesario para que todo ello se plasme en una buena página web.

La disposición del texto en un documento web es muy parecida a la de un texto en otro cualquiera de los soportes divulgativos clasicos, como pueda ser una revista o un panfleto de publicidad, por lo que para su buena aplicación es necesario una serie de conocimientos, que en buena medida se derivan de la rama clasica de la Maquetación, pués en todos los soportes la misión principal de un texto es transmitir una serie de ideas y/o conocimientos de una forma atractiva para el lector del documento. Que le haga interesarse por lo que estamos intentando transmitirle y por la forma en que lo transmitimos.

Queda claro asimismo que en la actualidad es necesario combinar el texto en nuestra página con otra serie de elementos multimedia, como imagenes y secuencias de video, de tal forma que el resultado final sea ameno, claro y transmita aquello que el diseñador web desea, objetivo fundamental de todo sitio web.

¿Cuanto texto puede haber en una página?.-

La cantidad de texto conveniente en una página web depende ante todo de qué tipo de página sea, ya que no es lo mismo, ni en concepción ni en desarrollo, un sitio web dedicado al comercio electrónico que uno dedicado a la divulgación científica, ni este que uno dedicado a la presentación de obras pictóricas.

Lo que sí hay es una serie de normas generales que a grandes rasgos pueden definir el comportamiento del texto en cualquier página web.

Así por ejemplo, si nuestra página contiene mucho texto es conveniente agrupar este en columnas, ya que esta comprobado que una gran cantidad de texto seguido en formato de líneas anchas cansa mucho la vista del usuario y le impulsa a bandonar pronto el documento que esta leyendo. Como regla general, podemos establecer como longitud correcta de las líneas de una página la que comprende 12-15 palabras.

Si estamos en la página principal de un sitio, que es la que en cierta forma da la bienvenida a un visitante y le informa a grandes rasgos qué es el sitio web en el que se encuentra, el texto debe ser poco y muy explícito, para que pueda sacar con prontitud una idea clara de dónde esta y qué es lo que puede encontrar en el sitio.

Si nuestra página pretende comunicar al visitante una serie de conocimientos, como por ejemplo esta página que lées ahora, el texto es entonces el elemento fundamental de la misma, y te veras en la necesidad de elaborar páginas con gran cantidad del mismo. Procura entonces no hacer páginas que ocupen en altura mas de una página y media, para no obligar al usuario a utilizar contínuamente la barra lateral de scroll, cosa que cansa mucho y hace que se pierda interés por el contenido.

Si el tema de tu página es principalmente grafico, como puede ser el caso de un sitio dedicado al arte o a la fotografía, el texto debe ser poco, sólo el necesario para expresar una serie de ideas claras y concisas, ya que el verdadero protagonista de tu página deben ser las fotografías y elementos graficos.

Como podéis ver hay tantas normas como sitios se puedan hacer, siendo la experiencia y el método prueba-corrección las verdaderas técnicas maestras para lograr una serie de páginas atractivas y funcionales.

Disposición del texto. Nivelesde cabeceras.-

Como ya hemos dicho antes, y al igual que ocurre en otros soportes divulgativos, la maquetación tipografica es aplicable en casi todos sus niveles al diseño de una página web, por lo que es necesario que para establecer un documento claro y atractivo dividamos el texto de nuestras páginas en una serie de apartados, que vendran iniciados por una cebecera que defina el contenido de cada bloque, sobre todo si el contenido de nuestras páginas es eminentemente textual.

Como podemos tener bastantes apartados y cabeceras, es necesario ir remarcando la importancia relativa de cada una de ellas en el conjunto del documento, lo que podemos lograr mediante el tamaño y el peso de cada una de ellas, así como con el color del texto de las mismas. Como norma general, las cabeceras que definen temas completos deben ser las de mayor tamaño y peso, los apartados principales del tema deben seguirle en importancia, y así deberemos ir reduciendo el tamaño y peso de las cabeceras conforme vayamos bajando en el arbol jerarquico de temas del documento. Un ejemplo general de esto lo podéis ver en la siguiente ventana.

Dentro de cada bloque, y ya definidas las cabeceras, deberemos ir situando bloques de texto que desarrollen la idea general introducida por la cabecera. La indentación de este texto puede ser diferente dependiendo de la cantidad de texto en el apartado. Así, si tenemos poco texto podemos distribuirlo como si de un pequeño libro o folleto se tratase, indentando la primera palabra de cada parrafo y justificando el texto del mismo. Ejemplo en esta ventana.

Pero si el apartado contiene mucho texto, aunque podemos seguir indentando o sangrando los comienzos de parrafo, en este caso no es conveniente la justificación del texto, ya que este tipo de alineación cansa la vista por su monotonía, por lo que es preferible dejar una alineación a la izquierda, en la que el efecto conseguido con la finalización de cada línea en un punto diferente consigue un resultado de descanso visual y hace el contenido mas legible.

Con un poco de lectura general y con la contemplación de páginas en Internet podemos ir poco a poco aprendiendo cual es la forma idonea de colocar nuestros textos en cada caso. Recomiendo sobremanera el estudio de un buen manual de maquetación.

Colores de los textos.-

Otro tema de vital importancia es el color que vamos a dar a nuestros textos. Es conocido el efecto psicológico de los colores y cómo afectan y transmiten uno u otro sentimiento, ademas de crear el conjunto disposición-color un estado receptivo en el usuario que le puede impulsar a continuar navegando en nuestra página o por el contrario abandonarla rapidamente.

Como norma general debemos procurar que el color de nuestros textos sea tal que destaque claramente del fondo de la página, sobre todo en el caso en que usemos una imagen de fondo, ya que el texto es la vía principal de transmisión de ideas, y por lo tanto debe ser la parte de nuestra página que mas clara resulte al visitante. O no colocamos imagen de fondo o lo hacemos de tal forma que el texto, por su disposición y color destaque claramente sobre el fondo.

Un color de texto único para toda la página puede resultar monótono, sobre todo si el tema principal de esta es artístico o colorista, por lo que a veces es conveniente usar diferentes colores para diferentes partes del texto. En estos casos deberemos usar una gama de colores compatibles, que puede parar por el uso de colores de la misma gama o familia o por el uso de colores complementarios, que consiguen un efecto visual equilibrado. Es conveniente para ello el estudio de uno cualquiera de los graficos de gamas de colores que podemos encontar en cualquier obra dedicada a la pintura. La imagen de la izquierda es un ejemplo de la gama de colores y sus contrastes adecuados.

Si nuestra página esta orientada a un público juvenil, como puede ser una página sobre el mundo de los video juegos, el texto puede estar definido por una gama de colores agresivos, como son el rojo con amarillos, o con una gama de colores que le de aspecto sugestivo, como letras blancas, rojas o doradas sobre un fondo negro; pero si nuestra página esta concebida para un público serio y/o general, como puede ser una página sobre economía o política, deberemos emplear una gama de colores neutros, como grises, azule grisaceos o tonos pastel, apta para todo tipo de públicos.

Por último, si nuestra página es corporativa, como puede ser el caso de una página de empresa o de un banco, los colores deben ser los marcados por la propia empresa, ya que cada empresa tiene uno o mas logtipos y un conjunto de colores corporativos própios, que son los que dan identidad propia a esa empresa entre todas las demas, siendo fundamental transmitir en la página esa individualidad que le es propia.

Familias de fuentes en los textos.-

Otro tema a tener en cuenta a la hora de diseñar nuestros textos es qué tipo de fuentes vamos a usar en nuestra página.

Al igual que ocurre en el caso de los colores, es posible y casi conveniente el mezclar varios tipos de fuentes, buscando sobre todo romper la monotonía que crea una sóla fuente.

Si deseamos mezclar fuentes deberemos, como regla general, no usar mas de dos o trés tipos diferentes, siendo estos tipos pertenecientes al mismo grupo o familia. Así, podemos usar dos fuentes que sean parecidas, una de ellas Sans Serif para las cabeceras, y otra Serif para los bloques de texto. Recordemos que las fuentes Serif pintan una especie de terminaciones de adorno en los extremos de las letras, mientras que las Sans Serif no, pintando todas las letras planas. Fuentes Serif son por ejemplo la Times New Roman y la Georgia, y fuentes Sans Serif son la Verdana y la Arial.

Si la página va dedicada a un público corporativo o adulto podemos usar fuentes serias o clasicas, como Times New Roman o Arial. Si esta orientada a público general podemos usar Verdana, Helvetica o Tahoma. Y si nuestro pública va a ser joven podemos usar fuentes mas dinamicas, como Comic Sans MS, Impact o Lucida Console. Ejemplos:

Fuente Times New Roman (Serif)

Fuente Tahoma (Sans Serif)

Fuente Impact (Sans Serif)

Como en todo, la mejor forma es experimentar y experimentar, hasta que encontremos aquella conbinación que exprese lo que deseamos transmitir, pero poniéndonos siempre en el lugar del usuario potencial, no en el lado del diseñador, ya que es este el verdadero destinatario y juez de nuestro trabajo final.

Cuidado con la ortografía.-

Por último, deberemos tener siempre especial cuidado con la sintaxis y la ortografía en nuestros textos, ya que un buen trabajo de diseño puede verse arruinado si lo que transmitimos esta mal expresado y/o mal escrito.

Al fin y al cabo nuestro público va a sacar de nosotros la impresión que le demos a través de nuestra página, y un texto lleno de errores ortograficos denota un mal trabajo, por lo que es facil que el usuario final nos abandone rapidamente.

Para ayudarnos en este tema podemos usar un buen procesador de textos, utilizando su herramienta de corrección sintactica y ortografica, lo que nos va a permitir obtener un texto bien escrito sin necesidad de ser licenciados en filología.

Consejos generales.-

Vamos a resumir escuétamente una serie de consejos para el buen uso de textos en una página web:

• no abusar de la mayúsculas: estas letras poseen un fundamento sintáctico y gramatical propio, pero además son un elemento idóneo para remarcar ciertas partes de información de la página. Su uso excesivo mata este factor, convirtiendo un texto interesante en una serie monótona de caracteres que no dicen nada, y que por lo tanto no captan la atención del visitante. Usa las mayúsculas al principio de cada frase, los nombres própios, los títulos y subtítulos de la página.
  
  
• no usar textos de pequeño tamaño en tipos Serif: debido a que este tipo de letras estan pensadas para ser impresas, no para ser contempladas en pantalla, y si son de pequeño tamaño se deforman y se hacen ilegibles. Esto pasa también con los tipos son Sans Serif de pequeño tamaño.
  
  
• no abusar de las letras en cursiva: ya que el texto en itálica es dificil de leer en pantalla, debido a la inclinación del mismo, que provoca un escalonado en los bordes de las letras que las deforma, sobre todo en tamaños pequeños de fuente.
  
  
• no abusar de los textos en negrita: ya que la misión de este es reforzar la importancia de una parte de la información que damos en la página, y se debe usar sólo para este fin. Además ocurre algo parecido al caso de las cursivas, ya que para pintar en pantalla una letra en negrita lo que hace el ordenador es añadir pixels adicionales en los bordes de la letra. Si esta es de pequeño tamaño, se produce un desagradable efecto de emborronado, y si es de grán tamaño se produce el efecto de escalonamiento, no siendo convenientes ninguno de ellos.
  
  
• no usar, y menos aún abusar, de los efectos de parpadeo o deslizamiento: como pueden ser textos en marquesina, en efecto Blink o en desplazamientos mediante scripting, ya que son irritantes y marean y confunden al usuario.
  
  
• no use demasiados tipos diferentes de fuentes: ni demasiados colores diferentes en sus textos, ya que rompen la armonía que debe haber en el contenido de todo documento, aparte de que corremos el riesgo de que el usuario no tenga algunas de las fuentes usadas instaladas en su ordenador, lo que hará que este las sustituya por la fuente estándar, rompiendo con ello todo nuestro esquema de estiolo. Cíñete a las fuentes estándar.
  
  
• cuidar la accesibilidad de la información: ya que si usamos letras de pequeño tamaño, efectos compatibles sólo con algunos ordenadores o colores que encesiten pretaciones especiales, estamos eliminando de la lista de nuestros visitantes a aquellas personas que no pueden acceder a este tipo de contenidos.
  
  
• usar enlaces visualmente independientes: es decir, que los enlaces de la página se distingan cláramente del resto del texto. Piensa que no todos tus visitantes están tan acostumbrados como tú a navegar por la Red, por lo que debes diferenciarles las diferentes partes de tu página de forma clara.
  
  
• presentar el texto de una forma lógica: no olvidemos que al fin y al cabo una página web es un documento como otro cualquiera, por lo que debe tener una lógica de desarrollo y de presentación si queremos que cumpla su misión principal, que es facilitar información clara al visitante.
  
  
• usar siempre caracteres compatibles con el estándar: que tradicionalmente ha sido el el conjunto de caracteres ASCII, y que incluye la letras, los números, los signos de puntuación y algunos caracteres especiales como los tabuladores. Con objeto de dar apoyo a otros idiomas, posteriormente se tomó como modelo el juego de caracteres ISO 8859-1, también llamado a veces ISO Latin-1, que no está orientado a ningún idioma en particular, por lo que para especificar uno de los subgrupos de este correspondiente a un idiomas determinado, es necesario especificarlo en la cebecera de la página mediante la etiqueta CHARSET. Y últimamente, a partir de las especificaciones del HTML 4.0, se ha tomado como estándar el juego de caracteres UNICODE.

Para evitar contradicciones y malas interpretaciones es conveniente ceñirse casi siempre al juego ASCII, por lo que si escribes en castellano, no acentúes las palabras directamente, si no que debes usar los caracteres especiales que hay para tal efecto.

El juego de caracteres válido completo puedes verlo en la siguiente tabla: