CREACIÓN DE PÁGINAS WEB CON KOMPOzER

10. Guía de diseño de páginas web

El objetivo de la décima lección es conocer ideas básicas sobre el diseño de una página web respecto a los siguientes aspectos:

10.1 Tipos de páginas web
10.2 El color
10.3 La navegación
10.4 El contenido
10.5 Imagen y multimedia
10.6 Los navegadores
10.7 La resolución de los monitores
10.8 Los tipos de letras
10.9 Público y medio


Web del CNICE

10.1 Tipos de páginas web

Cuando vamos a elaborar una página web, lo primero que tenemos que considerar es qué tipo de página queremos crear, porque no es lo mismo, por ejemplo, la página digital de un periódico que la de un cantante de moda. Por eso, es conveniente navegar por Internet y observar cómo están hechas las páginas que visitemos. Cuando lo hacemos, enseguida distinguimos entre páginas que han realizado profesionales del medio y páginas realizadas por aficionados. No todas las de aquéllos son buenas ni todas las de éstos son malas, y de ambos tipos de páginas se puede aprender.

Siempre hay que tener claros los objetivos que pretendemos conseguir y el contenido que vamos a incluir en nuestra página web, porque ellos nos dictarán todos los aspectos que se relacionen con el diseño y la navegación principalmente. Existen actualmente dos tendencias predominantes en la Red: la de la utilidad (usability) y la del diseño avanzado (por llamarla de alguna manera):

Ambas tendencias llevadas a sus extremos suelen producir páginas asépticas, en el caso de la utilidad, y páginas pesadas y recargadas, en el caso del diseño avanzado. Entre ambos extremos existe una amplia gama de posibilidades.

10.2 El color

Lo primero que salta a la vista cuando visitamos una página web es el colorido. A este respecto hay que recomendar que no se utilicen muchos colores distintos y que éstos produzcan una sensación de coherencia y unidad en la página. Si un sitio de Internet tiene, por ejemplo, cinco secciones, lo mejor es adjudicar a cada una de ellas un color preferente para que el usuario sepa distinguir dónde se encuentra en cada momento. Cada sección de esa página, por ejemplo, podría tener un mismo fondo blanco donde estuviera el texto del contenido y una banda superior o lateral de un color distinto para cada sección. Las modalidades son muchas, pero todas ellas tienen que ir encaminadas a facilitar en el usuario la comprensión visual de una página. Errores muy comunes a este respecto son, por ejemplo:

10.3 La navegación

Otro aspecto importante de una página web es la navegación, es decir, los elementos de la página que permiten al usuario moverse de una sección a otra, que suelen consistir en hipervínculos. Ni que decir tiene que estos elementos deben ser abundantes y fáciles de encontrar, pero no tienen que ser demasiado grandes o evidentes (una imagen o un texto de gran tamaño) para llamar nuestra atención; deben estar situados al margen, en un lugar donde no molesten y donde el usuario sepa que siempre los va a encontrar. Como norma general, en cada uno de los documentos que elaboremos tiene que haber, como mínimo, un enlace al inicio de la página (home) y al inicio de la sección a la que pertenece, pues siempre hay que evitar callejones sin salida, es decir, documentos donde el lector se pierde. Los hipervínculos suelen ser imágenes y textos; las imágenes tienen que ser de pequeño tamaño y contener pocos colores, a manera de iconos; y los textos deberían ser breves e indicativos del contenido que anuncian, evitando el "pinche aquí".

Página web

10.4 El contenido

El contenido tiene que ser siempre lo más importante, ya se comunique con texto, con imágenes o con elementos multimedia. El texto, no obstante, impera en la Red, y será así hasta que se consiga una mayor velocidad de navegación que permita introducir más elementos multimedia, sobre todo el vídeo y el sonido. Pero el texto de una página de Internet no tiene las mismas características que el de una revista, un periódico o un libro de papel. En Internet los textos tienen que ser breves y resumir mucho la idea que se quiere comunicar; de lo contrario, es probable que el usuario no los lea y se vaya a otra página. Por este motivo no se puede recargar de texto un documento, y conviene dividirlo en varios documentos conectados entre sí. No obstante, las páginas de carácter informativo pueden incorporar, si es necesario, texto más abundante, ya que el usuario siempre puede imprimir el documento para leerlo con mayor comodidad. También es conveniente no usar mucho las letras mayúsculas para los títulos, pues se leen peor que las minúsculas; hay que aumentar el tamaño de la letra con estos fines, pero sin exagerar, ya que los tipos de letra muy grandes atraen demasiado la atención. Además, las líneas de texto no deben ser muy largas, es decir, no deben ocupar toda la pantalla, sino que hay que procurar, mediante su inclusión en tablas, por ejemplo, que sean de longitud media para que resulten fáciles de leer.

Página web

10.5 Imagen y multimedia

Un aspecto muy criticado por los usuarios de Internet es la lentitud de muchas páginas web causada por la gran cantidad de imágenes, sonidos o animaciones que incorporan. Por tanto, hay que procurar introducir sólo las imágenes y los elementos multimedia que sean necesarios. Y aún así, hay que intentar reducir el tamaño de las imágenes y el número de colores de los archivos GIF lo máximo posible. Respecto a los archivos JPG, conviene reducir su calidad para reducir su tamaño, a no ser que ésta sea imprescindible. En todo caso, hay que tener en cuenta que las imágenes no son sólo un aspecto visual gratificante, sino que pueden y deben ayudar al usuario a comprender mejor una página web y a moverse con facilidad por sus contenidos.

En cuanto a las animaciones, se suele abusar de ellas sólo por el hecho de que resultan atractivas, pero en muchos casos no añaden nada de valor a una página. Sólo cuando se utilizan de forma pedagógica o informativa pueden ser de gran utilidad. Y lo mismo ocurre con los sonidos y las grabaciones de voz.

10.6 Los navegadores

El problema de los navegadores es uno de esos incordios que muchos intentan esquivar. El hecho de que las páginas web no se vean siempre igual en todos los navegadores es la causa de muchos errores en las páginas. Como el Internet Explorer es actualmente el navegador más utilizado en Internet, muchos webmasters elaboran sus páginas teniendo en cuenta solamente las características de este navegador, sin comprobar si sus páginas son compatibles con otros navegadores. Pero si se quieren hacer bien las cosas, es necesario comprobar si nuestra página se ve bien en los navegadores más utilizados y en sus distintas versiones. En general, este problema no es importante cuando nuestra página no contiene muchos elementos multimedia ni se basa en capas (otra forma de crear páginas web de "última generación"), pues los navegadores comparten casi todas sus características básicas.

10.7 La resolución de los monitores

Con respecto a la resolución de los monitores, hace poco tiempo se recomendaba siempre crear páginas que se pudieran ver en monitores cuya resolución fuera de 640x480 píxeles y de 256 colores, porque se consideraba que todavía quedaban muchos ordenadores con este tipo de monitores. El problema sigue vigente, pero la limitación que supone esta resolución ha llevado ya a muchos webmasters a crear sus páginas preferentemente para monitores de 800x600 píxeles y de color de alta densidad (miles de colores), teniendo en cuenta además que los ordenadores se van renovando y que ahora la mayoría de usuarios tiene monitores que aceptan esta última resolución.

De todas formas, resulta aconsejable estructurar las páginas mediante porcentajes u otras medidas relativas. Por ejemplo, si se crea una tabla con una anchura de 90%, esa tabla ocupará siempre ese porcentaje de la pantalla sea cual sea la resolución del monitor. Lo mismo conviene hacer con el tamaño de las letras: si se utilizan hojas de estilo, lo mejor es establecer un tamaño de letra de 100% u otro porcentaje, y ese tipo de letra se adaptará al tipo de resolución en que se muestre.

10.8 Los tipos de letras

Un problema importante y real es el del uso de distintos tipos de letra en los documentos de Internet. Técnicamente sólo se pueden utilizar los tipos de letra que sabemos que tienen todos los ordenadores de forma predeterminada, que son muy pocos: Times New Roman, Arial y unos cuantos más que se incluyen en la instalación de los navegadores, pero nunca estaremos seguros de que todos los usuarios que visiten nuestras páginas tengan en sus ordenadores los tipos de letras que utilizamos. Es decir, si empleamos un tipo de letra que no sea de las habituales, el tipo de letra que se verá en la pantalla posiblemente será distinto al que hemos usado en la creación de la página, con lo que ello puede suponer de dificultades en los ajustes de los documentos. Este problema se puede solucionar en parte con las hojas de estilo, que incluyen familias de tipos de letra en su código en caso de que no se encuentre el primer tipo seleccionado. Existen otras soluciones, como las de incluir los tipos de letra en un archivo de la página web, pero no se utiliza mucho por problemas de compatibilidad. La solución más viable, de momento, es la de insertar algunos textos en forma de imagen de tipo GIF, pero esto sólo se hace para títulos o botones de navegación, pues no sería lógico introducir textos extensos de esta forma.

10.9 Público y medio

En definitiva, el diseño de una página web, como toda publicación, depende de dos elementos: el público a la que va dirigida y el medio en que se publica. Las características de las personas que van a visitar una página tienen que influir en la apariencia y en el contenido. Este curso, por ejemplo, se supone que va a ser utilizado principalmente por estudiantes, que esperan encontrar una página de contenidos sencillos, claros y prácticos, con una navegación ágil y un diseño agradable pero no espectacular. El texto es lo más importante, y las imágenes ayudan a la comprensión del contenido. Hay que tener en cuenta, en fin, que Internet es un medio distinto a los demás y que por tanto requiere un diseño adecuado a sus características.


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3