RECOMENDACIONES PARA EL DISEÑO DE UNA PAGINA WEB
RECOMENDACIONES PARA EL DISEÑO DE UNA PAGINA WEB
Album de fotos
Mis aficiones
RECOMENDACIONES PARA EL DISEÑO DE UNA PAGINA WEB
Curriculum vitae
Mis enlaces favoritos
Imagen
La forma de redactar, organizar y diseñar una información para ser publicada en un servidor web conectado a la red Internet, es muy diferente de cómo nos plantearíamos este trabajo si fuera a publicarse en el soporte tradicional en papel. Deberemos tener en cuenta toda una serie de cuestiones que son propias y específicas de esta tecnología:

1. El hipertexto y la posibilidad de "navegar" por la información
En un documento en papel solemos movernos por la información de una forma lineal: una hoja tras otra. Sin embargo, en una página web el hipertexto nos permite irnos desplazando de un documento a otro con el simple acto de pulsar sobre un enlace. Esta peculiar forma de navegar por un conjunto de información entrelazada puede provocar cierta desorientación por parte del lector, ya que con un solo paso puede haberse desplazado tanto a una sección diferente del mismo web, como a un web totalmente distinto. Además, raramente podremos incluir toda nuestra información en un solo documento; tendremos que fragmentarla en diversos ficheros.
Estas dos circunstancias nos obligan a intentar estructurar lo mejor posible la información, de forma que nuestro lector esté siempre bien orientado sobre en qué sección se encuentra y entienda la relación entre la página que está viendo con las demás de nuestro web. Esto podemos conseguirlo con diversas ayudas:

Realizando páginas de índice lo más claras posible.
Usando los botones de navegación que permitan al usuario volver a las páginas de índice, a la página principal o desplazarse a las páginas relacionadas.
Incluyendo gráficos o colores diferentes según la seccion de nuestro web en que nos encontremos.
Siempre debemos ser conscientes de que la pagina web que estamos diseñando se va a transmitir por una red de comunicaciones que no es tan rápida como sería deseable, que muchos de nuestros lectores tienen que pagar por hacer esa transmisión y que desconocemos la potencia del equipo informático que poseen. Así, tenemos que cuidar que nuestras páginas no tengan un tamaño demasiado grande, para facilitar su carga rápida por la red. Suele considerarse como el máximo tolerable un tamaño de unos 40 o 50 Kb (fichero + imágenes).
En un documento web lo que ocupa más espacio son los gráficos, por lo que deberemos valorar cuidadosamente la necesidad, cantidad y calidad de los gráficos que ponemos. Para detalles más técnicos, lee las recomendaciones sobre inclusión de gráficos en paginas web.

También debemos tener en cuenta la lentitud de la red a la hora de estructurar nuestra información: Hay que intentar que el lector llegue a la información deseada con el menor número de pasos intermedios que sea posible, para evitar que tenga que cargar fichero tras fichero. Por ello, si bien las paginas con índices son imprescindibles, no debemos abusar de ellas poniendo índices que remitan a más índices, como a veces podemos encontrar en Internet.

3. La existencia de diferentes programas y versiones de los programas navegadores
También a diferencia con los documentos en papel, los lectores de nuestras páginas web tienen que usar una herramienta para visualizarlas: los navegadores o browsers. Por el momento, no existe un programa standard, sino que, por el contrario, los distintos fabricantes se hacen la competencia incluyendo nuevos avances técnicos en sucesivas versiones de sus productos que normalmente no funcionan bien en el de la competencia.
Esto hace que una página que nosotros hemos diseñado viéndola con el programa Netscape, nos dé alguna sorpresa desagradable al intentar visualizarla con Internet Explorer. Y viceversa. Lo mismo puede ocurrirnos si vemos esa página con el mismo programa empleado, pero en una versión inferior. Esta es la razón por la que debemos valorar cuidadosamente la necesidad de emplear la "última" tecnología de diseño de paginas www que esté de moda en ese momento y ser conscientes de que cuanto más simple sea nuestra página más posibilidades hay de que sea correctamente visualizada por un mayor número de lectores.

4. El monitor del ordenador
Los documentos web están pensados para ser visualizados en la pantalla de un ordenador. El problema es que desconocemos el tipo de monitor desde el que se van a leer las páginas: pequeño o grande, de cristal líquido, en color o blanco y negro, con resolución buena o mala, etc. Así, un documento que hemos diseñado cuidadosamente en nuestro monitor de 15 pulgadas con una resolución 600 X 800, puede verse "encogido" en una pantalla grande, o bien parte del contenido "salirse" de la pantalla en un monitor de baja resolución. Por esta razón no está de más comprobar el aspecto que toma nuestra pagina en distintos tipos de pantallas.
El hecho de visualizar el documento en una pantalla también va a influir en la longitud que deberemos dar a nuestras páginas, ya que no es conveniente obligar a los lectores a desplegar páginas excesivamente largas (ver además las recomendaciones sobre longitud de páginas). En todo caso es importante que el máximo de información significativa aparezca en pantalla nada más acceder a nuestra página.

5. La actualización de la información
En una publicación en papel, tenemos que esperar a la aparición de una nueva edición de la misma para poder actualizar sus contenidos. Una de las principales ventajas del soporte web es la posibilidad de mantener actualizada la información en un instante. Así, la tarea realizar unas páginas web no finaliza con su publicación en un servidor: es necesario mantenerla actualizada, trabajo que en realidad no "termina" nunca. Es necesario considerar previamente la posible caducidad de la información que vamos a poner en la red. Si pensamos que no vamos a ser capaces de mantener actualizada determinada página, tal vez debamos replantearnos la oportunidad de su publicación. Lo mismo ocurre con los tan comunes listados de enlaces recomendados: quedan obsoletos con gran rapidez. Además, es importante indicar en la propia página la fecha de la última modificación, de forma que el lector esté informado de la puesta al día de la misma.
6. Propiedad intelectual
Sólo deberemos publicar en Internet material que sea propio o de libre uso. En caso contrario, deberemos disponer del permiso del autor. Todo el material publicado en Internet está protegido por la legislación sobre Propiedad Intelectual. Sin embargo, debemos tener en cuenta que es muy sencillo copiar cualquier información que pongamos en la red, por lo que debemos valorar cuidadosamente la oportunidad o no de publicar algún tipo de información sensible o confidencial.
7. Difusión y publicidad de las páginas
Poner la información en un servidor web no es garantía suficiente de alcanzar a todos los usuarios potenciales deseados. Necesitamos dar difusión a la existencia de nuestras páginas si deseamos que cumplan su función. Lo más normal es que nuestros usuarios alcancen nuestro web tras una búsqueda en alguno de los numerosos motores de búsqueda existentes. Para que aparezcan nuestras páginas reflejadas en estos buscadores, debemos tener en cuenta los elementos que estos usan para localizar información:
Poner claramente el título del documento
Introducir algunas palabras clave en la etiqueta <meta> del lenguaje html
Incluir el máximo de información significativa posible en las primeras 25 líneas de la página, ya que algunos motores de búsqueda las usan para indizar su base de datos.
Darnos expresamente de alta en los motores de búsqueda. Casi todos los buscadores incluyen un formulario para darse de alta. Existen además servicios que nos dan de alta simultáneamente en muchos buscadores, aunque la mayoría de ellos son de pago.





8. Los contenidos y el tipo de usuarios a quienes están dirigidos

Lo más importante en una página web son los contenidos. La búsqueda de cualquier información en Internet suele ser una larga navegación de página en página, necesitando emplear mucho tiempo para encontrar información útil. La manera de diseñar y organizar nuestra información estará claramente condicionada por el tipo de contenidos y, sobre todo, por el usuario al que van dedicados.
Páginas redactadas para personal o estudiantes de la propia universidad y que pensamos que se van a consultar principalmente en los ordenadores de nuestra red: podemos permitirnos ficheros más grandes, ya que las comunicaciones son rápidas y el tiempo de espera será mínimo.
En el caso de materiales que pensemos que se van a consultar desde ordenadores ajenos al apropia universidad: tendremos que ser muy cuidadosos con el tamaño de los ficheros
Materiales orientados a extranjeros, especialmente latinoamericanos que suelen usar ordenadores muy lentos: debemos hacer las páginas lo más rápidas que sea posible.
Información que sospechamos los lectores van a preferir leer en forma impresa: intentar que toda la información vaya en un solo documento y utilizar una tipografía apropiada, aprovechando los márgenes de la pagina
Paginas orientadas a usuarios con mayores conocimientos de Internet: podemos presuponer que dispondrán de mejores equipos y que no se sorprenderán con la inclusión de tecnologías más avanzadas que las simples páginas de información estáticas.
RECOMENDACIONES SOBRE DISTINTOS ELEMENTOS DE LAS PÁGINAS WEB
1. Longitud de las páginas
Las páginas deberán hacerse lo más cortas y concisas posible. Está demostrado que a la gente no le gusta leer en la pantalla de un ordenador: la vista se cansa y la gente se "aburre". Además, el hecho de tener que desplegar mucha cantidad de texto (y/o imágenes) en la pantalla, puede producir desorientación en el lector, ya que pierde las referencias de la cabecera y las ayudas a la navegación. Cuanto más importante sea una página y más atención requiera por parte de los lectores, más corta debe ser. Si el contenido es especialmente interesante, esto se debe demostrar dentro de lo que se ve en el primer pantallazo.
Suele recomendarse un máximo de 4 pantallazos como longitud aceptable para una página. Si necesitamos incluir más información deberemos considerar la posibilidad de dividir el contenido en varias páginas o bien hacer un índice de contenidos al principio del documento con enlaces a las diversas partes.

La longitud de la página es además una de las muchas razones que desaconsejan el uso de tipos de letra muy grandes.

2. Los nombres de los ficheros
Una de las principales dificultades a la hora de realizar un documento www es que nosotros estamos trabajando en un PC con el entorno Windows, pero nuestras páginas van a residir en una máquina con el sistema operativo UNIX. En UNIX son especialmente importantes las mayúsculas/minúsculas, lo que debemos tener en cuenta a la hora de poner el nombre a un fichero y hacer un enlace al mismo: si pusimos el nombre en minúsculas, deberemos hacer igual los enlaces. Si no lo hacemos así, puede que los enlaces e imágenes se vean bien en nuestro PC, pero no será así en el servidor. Lo mismo sucede con las extensiones de los ficheros: podemos emplear ".html" o ".htm", ".jpg" o ".jpeg" pero deberemos respetar esto a la hora de hacer los enlaces.
Otros elementos que debemos evitar al poner nombres a los ficheros son:

Caracteres especiales como ñ, ç, ¿ ª ", etc.
Espacios en blanco
Letras con acentos
Lo mejor es que desde el principio establezcamos un criterio y lo sigamos para todas las páginas relacionadas: Por ejemplo, optar por poner todo en minúsculas y con las extensiones html y jpg.
Siempre se debe evitar cambiar el nombre a los ficheros, aunque hayamos actualizado la información; no hay que olvidar que la página puede estar referenciada en diversos sitios. Si no quedara más remedio que cambiarle el nombre, se puede mantener la página antigua, con una nota en la que se que avise de que "esta página ha cambiado de sitio", dando a continuación la nueva URL.

3. Páginas con frames o marcos
Las páginas con frames o marcos permiten dividir la pantalla en diferentes ventanas, con un documento html diferente en cada una de ellas. Se suelen utilizar bastante ya que nos permiten ejercer un gran control sobre la disposición general y la apariencia de la página. Sin embargo, deben utilizarse con cautela, ya que tienen algunos inconvenientes:
No se podrán hacer bookmarks o marcadores a las partes.
Habrá dificultades para imprimir las páginas individuales.
No se pueden "copiar" las URLs.
El botón de anterior o back de los navegadores puede no funcionar correctamente.
Reducen el espacio útil donde visualizar la información.
No todos los navegadores soportan marcos.
Podemos tener dificultades si alguien quiere hacer un enlace a una de nuestras páginas: al aislar una parte del resto de los marcos, esta puede perder el sentido.
Algunas recomendaciones para páginas con frames:
Eludir la fragmentación excesiva. Si se van a utilizar más de dos frames, hay que evitar la impresión de parcelación en múltiples ventanitas. Por lo menos una de ellas debe ser mayor que las demás y actuar como página principal.
Evitar la rigidez de las frames (uso de las etiquetas html noresize o scrolling="no"). No debemos impedir que los usuarios puedan "mover" las frames, ya que lo pueden necesitar por tener una resolución de pantalla diferente de la nuestra.
Enlaces exteriores a nuestro web. No es conveniente que queden prisioneros dentro de nuestra estructura de frames, ya que suele ser muy molesto debido a que la nueva página quedará en un espacio reducido. Además, seguramente tendrá un estilo diferente a la nuestra. Todavía puede ser peor si la pagina a la que enlacemos tiene a su vez frames. Para evitar esto podemos utilizar la etiqueta html target="_top" con lo que la nueva página se cargará en una pantalla completa.
4. Tipografía
Al escoger la tipografía que vamos a emplear en nuestra página, debemos tener en cuenta que estamos diseñando un documento para que ser leído en la pantalla de un ordenador. Por lo tanto, debemos escoger tipos de letras no muy grandes, para no hacer demasiado larga la página, pero tampoco excesivamente pequeños, que puedan causar dificultades de lectura a las personas que no tengan una buena visión.
En general es muy importante una buena estructuración del texto a lo largo de la página, empleando párrafos cortos que faciliten la lectura y poniendo títulos destacados en las distintas secciones del texto. Además, es mejor no apurar mucho los bordes de la pantalla del ordenador: las líneas cortas se leen con mayor facilidad que las largas. Podemos forzar esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe solo el 85-90 % de la pantalla.

Usa tipos de letras que sean casi universales, como Arial o Times, ya que el usuario solo podrá ver los tipos de letras que tiene instalados en su ordenador. De nada sirve que se utilicen letras raras que solo veremos nosotros. Además, los navegadores tienen muchas opciones que pueden ser configuradas por el propio usuario: una de ellas es la elección personalizada de un tipo de letra, con lo que el navegador no hará caso del tipo usado por el que diseñó la página. Si deseamos usar alguna tipografía especial para un titular o logotipo, deberemos convertirlo en una imagen, con lo que garantizaremos su correcta visualización.

El excesivo uso de mayúsculas dificulta la lectura. No se deben usar para titulares largos y aún menos para bloques de texto. Lo mismo puede decirse del uso de las negritas, cursivas o del empleo del color: son recursos que usaremos sólo para resaltar palabras o partes del texto. Si deseamos destacar todo un párrafo es mejor hacerlo con un sangrado o introduciéndolo centrado dentro de una tabla sin bordes de menor tamaño que el párrafo precedente. Podemos destacarlo aún más si lo deseamos, poniendo un color de fondo distinto a esa tabla.

No se debe usar el subrayado para destacar un texto: en las páginas web estamos acostumbrados a que las partes subrayadas sean enlaces y la gente suele pulsar sobre ellos esperando acceder a otra página. También debemos evitar el uso del "blink" o texto parpadeante. Es muy molesto y perturba la lectura del texto. Podemos combinar el texto con algunas imágenes para evitar la monotonía, pero deberán ser imágenes pequeñas (que se carguen rápido) y encontrar un buen equilibrio visual entre las figuras y el texto.

5. Redacción de enlaces

La frase en la que vamos a situar el enlace debe tener significado. Incluso, si es posible, debe contener la misma frase que el título del documento al que se va a acceder desde el enlace. Por ejemplo:
Mejor: Para más información, consulte nuestro Manual de Estilo.
En lugar de: Para ver el Manual de Estilo pinche aquí.
Una sola palabra es difícil de pinchar y puede no tener sentido.
Usar toda una frase para poner el enlace puede ser difícil de entender,
especialmente si cambia de línea
Los listados de enlaces externos deben ser revisados periódicamente, ya que suelen quedarse obsoletos con gran rapidez.
No se deben cambiar los colores standard de los enlaces (azul para los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De la misma manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gente tiene tendencia a pinchar sobre ellos.
6. Ficheros en formatos distintos a html
Existe la posibilidad de poner en un servidor web ficheros que no sean en formato html: en Word, Excel, PowerPoint, pdf, etc. Los enlaces se hacen igual que si estuviéramos enlazando cualquier página. En la mayoría de los navegadores, al pinchar sobre estos enlaces, se abrirá automáticamente el programa que gestiona esos ficheros. En caso contrario, nos dará la posibilidad de guardar en nuestro ordenador el documento. Esto quiere decir que para poder usar estos ficheros es necesario tener instalado ese programa en el PC, por lo que solo debemos ponerlos si tenemos la seguridad de que nuestros lectores van a contar con el software necesario. Si no estamos seguros, es mejor que convirtamos la información al formato html.
En todo caso, siempre deberemos advertir al lector en el propio texto del enlace de que se trata de un texto en Word, Excel, etc.

7. Imágenes
Como ya mencionamos al hablar sobre la lentitud de las redes de comunicaciones, la inclusión de imágenes en nuestras páginas, debe valorarse con detalle a fin de que la carga de la página se lo más rápida posible. Suelen considerarse páginas rápidas, aquellas de un tamaño no superior a unos 40 o 50 Kb (fichero + imágenes).
Dado que cuanta mayor calidad tiene una imagen, más ocupa, deberemos encontrar un compromiso entre la calidad de la misma y la información que se quiere mostrar. Son muy raras las ocasiones en que es necesario poner una imagen de alta calidad en nuestras páginas. Existen programas de tratamiento de gráficos que permiten "bajar" la calidad de una imagen de forma razonable.

También podemos jugar con el tamaño de las imágenes a la hora de quitar peso a nuestra página, tratando de que estas sean lo más pequeñas posible. Si necesitamos incluir alguna imagen grande, es mejor poner en la página una pequeña muestra de la misma, indicando que se puede pinchar sobre ella para verla en tamaño grande. Así, solo tendrán que soportar una espera larga aquellos lectores que realmente tengan interés en verla. No se debe reducir el tamaño de la imagen con el programa con el que estamos editando la página (Netscape Composer, etc.): nos da la falsa impresión de que la imagen es más pequeña, pero lo único que hace es reducir la forma en que vemos la imagen, que en realidad es la misma. Para reducir de verdad el tamaño de la imagen deberemos usar un programa de tratamiento de gráficos.

Se puede referenciar la misma imagen todas las veces que se quiera. No debemos sobrecargar el servidor poniendo una y otra vez la misma imagen en diferentes directorios: basta con ponerla una vez y referenciar la misma. Esto tiene además la ventaja de que si un usuario ya ha cargado ese icono en alguna ocasión, lo conservará en la "caché" de su ordenador y no necesitará cargarla de nuevo, con lo que se acelera la transmisión. Por esta razón, para iconos sencillos como son las "bolitas" para listados, líneas de separación, etc., puedes utilizar los que están ya cargados en nuestro web en nuestro archivo gráfico.

Los formatos de imágenes más extendidos son: GIF y JPG (o JPEG):

El formato GIF utiliza hasta un máximo de 256 colores o 64 tonos de grises (se pueden usar menos, con lo que ocupa menos la imagen) y permite la posibilidad de definir fondos transparentes y animación de gráficos. Este formato usa un sistema de compresión (para reducir el tiempo de transmisión por la red) con el que no se pierde calidad. Por ello, este formato es apropiado para imágenes pequeñas y con buena resolución y para dibujos con bordes bien definidos.
El formato JPG permite calidades de más de 256 colores, de hecho permite hasta 16 millones. El problema es que muchos usuarios tienen una resolución de pantalla de solo 256 colores, con lo que puede que se vean las imágenes de forma defectuosa. Este formato tiene un sistema de compresión que hace que su transmisión por la red sea más rápida, por los que es el formato más apropiado para imágenes grandes. Sin embrago, este sistema de compresión puede bajar la calidad de la imagen.
Las imágenes animadas deben utilizarse con mucho cuidado:
Ocupan bastante más espacio que las imágenes normales.
Distraen la atención del lector de la información útil y acaban cansando.
Dificultan el saber cuando ha terminado de cargarse una página.
Si se tiene abierta la página web y se cambia a una ventana distinta con otra aplicación, el PC sigue procesando la repetición de la imagen, con lo que ralentiza la velocidad de trabajo del ordenador.
Dificultan una impresión "limpia" de la página.
8. Colores y fondos
En nuestras páginas web deberemos tener cuidado en emplear una armonía de colores que no perturbe la lectura de las páginas, procurando no emplear colores estridentes o combinaciones extrañas. No se deben cambiar los colores standard de los enlaces (azul para los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De la misma manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gente tiene tendencia a pinchar sobre ellos.
Lo mejor es utilizar fondos de colores claros y texto de color oscuro, ya que son tonos que se suelen leer con mas comodidad, por lo que siempre se debería hacer así en páginas en las que predomina el texto. En el caso de usar un color de fondo muy oscuro tendremos que emplear una tipografía en blanco u otro color muy claro, con lo que se impide la impresión correcta de la página (pocas personas tienen configurado su navegador para que imprima los fondos).

En el caso de que se emplee una imagen como fondo, deben seguirse los mismos consejos que acabamos de dar y usar texturas simples y tenues, procurando no usar texturas muy rugosas que se ven mal en pantallas de baja resolución.

9. La URL de la páginas: asignación de "alias"
El servidor web de la Universidad tiene gran cantidad de información, dividida en muchos directorios. Esto a veces puede provocar que la URL de una página sea muy larga. Existe la posibilidad de asignar una dirección "corta" que facilite a nuestros usuarios recordar la dirección de una página. Además, estas URL quedan mejor si vamos a publicitar la página en algún medio impreso: un anuncio de prensa, un tríptico que pondremos en un mostrador, etc.
Las direcciones cortas suelen tener este aspecto:

http://www.uc3m.es/nombre

.
escribeme un mail
Me interesa tu opinión