|
LA WEBERIA DE LA UNIVERSIDAD DE ALICANTE |
 |
Consejos sobre diseño de un página web |
 |
 |
. |
Estructura: | |
| La información que se ofrece al usuario debe estar organizada de una manera clara y efectiva. | ||
| Una página Web debe tener un "contenido", debemos evitar una mera colección de links y enlaces a lugares donde aparezcan el consabido "página en obras". Si la página está por hacer, es mejor que icono o frase que lanza el hipervínculo este desactivada a que nos envíe a una página donde solo aparezca el icono de "página en obras". | ||
| Si una página resulta muy larga, es conveniente dividirlas en varias páginas. Esto reduce el tiempo de carga y permite al usuario elegir la información que el interesa. | ||
| . |
Composición: | |
| Se debe cuidar el estilo durante todas las páginas web, de manera que el resultado quede homogéneo. Esto facilitará la navegación del usuario y dará personalidad al conjunto. | ||
| Una composición homogenea se logra a través de un color de fondo, un fondo gráfico, uso de tamaño, color y tipo de letra, gráficos, iconos, etc. | ||
| Una buena presentación contribuirá al éxito de la página web. | ||
| . |
Objetos que debemos poner en una página web | |
| Un link relacionado con una dirección de correo o con un formulario. Así ofrecemos la posibilidad de comunicarnos con el usuario para aceptar sugerencias, errores, comentarios, etc. | ||
| Fecha de la última modificación. Máxime si el tema trata de asuntos de actualidad. | ||
| Links a otras páginas similares. Si el usuario está interesado en el tema nos agradecerá referencias a este tema u otros relacionados. Se trata de sumar valor a nuestra página. | ||
| Cuando se trata de páginas que vienen de una principal es interesante ponerles un link a la página principal para facilitar al usuario la "salida" de esas páginas interiores. | ||
|
Navegación | |
| Es importante facilitar la navegación entre nuestras páginas con iconos (o links) de avance, retroceso, y página principal. Así el usuario no se encontrará perdido en un laberinto de páginas. | ||
| Una técnica muy usada en páginas interiores es un frame a modo de índice donde aparecen links a todas las páginas de esa subsección. | ||
| Otra opción es crear un mapa que se repita en todas las páginas, entendiendo por mapa una imagen sensible a la zona que pinchamos. Un ejemplo de mapa sería una barra de menú.No olvidarse de suminstrar los enlaces del mapa en forma de texto. | ||
| Hay que ser claros en el texto de los enlaces, indicando exactamente donde vamos a ir en caso de seleccionarlo. | ||
| Hay que comprobar periódicamente que el documento no contiene enlaces incorrectos, evitando así la aparición del mensaje de error "file not found...". | ||
| . |
Imágenes | |
| La inclusión de imágenes debe valorarse en relación a los tiempos de carga que serían necesarios si el acceso a la página se realiza a través de conexiones de baja velocidad | ||
| Si se deben incluir imágenes grandes, debe ser el usuario quien decida si las va a cargar o no, informando de su tamaño en bytes, bien a través de texto o a través de una versión reducida de la imagen. | ||
| La utilización de elementos gráficos comunes a varias páginas favorece la carga, pues se aprovecha la caché de los navegadores. | ||
| Se debe hacer uso del texto asociado a la imagen (ALT en html), para informar a los navegadores de texto de que imagen no ha cargado. | ||
| No se debe abusar de Gifs animados por motivos estéticos, porque pueden provocar problemas en los ordenadores de algunos usuarios y por el tiempo de carga. | ||
| Es interesante definir el tamaño de la imagen (WIDTH y HEIGHT en html) pues facilita la carga de la página al cargar primero el texto y después las imágenes. | ||
| . |
Frames | |
| Debemos evitar una excesiva fragmentación de la pantalla y debemos tener siempre uno mayor que será el principal. | ||
| Debemos evitar una disposición demasiado rígida de los frames y debemos considerar siempre que los usuarios navegan con diferentes resoluciones de pantalla. Así evitaremos que usuarios con menor resolución no puedan ver trozos de frame al que le hemos eliminado la barra de desplazamiento o scrolling. | ||
| . |
Ficheros y objetos | |
| Para evitar problemas con el servidor UNIX (distingue entre mayúsculas y minúsculas) debemos tener cuidado con los nombres de los ficheros, tanto de html como los ficheros que permitamos que el usuario se descargue. Un buen sistema es poner siempre los nombres en minúsculas. | ||
| Si a través de un link se va a proceder a descargar algún fichero es aconsejable avisar a través de algún icono, indicando además qué tipo de fichero se trata. | ||
| En caso de caso de publicar documentos del tipo libro electrónico, es aconsejable proporcionar enlaces que permitan descargar dicho documento en alguno de los formatos mas frecuentes (como acrobat, word, etc). Si el tamaño es muy alto se recomienda usar algún sistema de compresión (zip, arj, etc). | ||
|
En caso de incorporar objetos JAVA, multimedia o de objetos que necesitan conectores (plugs-in) para poder ser activados, debemos contar con que:
|
||
| Si se va a incorporar una música de fondo, conviene ponerlo al final del documento, con objeto de que se carguen primero el texto y las imágenes. No abusar del tamaño. Es conveniente dejar al usuario la opción de activar el sonido. | ||
| . |
El navegador | |
| Es interesante comprobar que se visualiza correctamente con distintos visores, diferentes resoluciones (800x600, 640x480, color 16 bits, 24 bits, etc) y diferentes versiones. | ||
| Es aún mas conveniente cuando usamos código javascript o html dinámico. | ||
| . |
Links sobre el tema | |
| Diseño de páginas web en Internet | ||
| Recomendaciones generales de la Universidad de Alicante | ||
