Lorem Ipsum Dolor .......

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum.......

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 URL.
*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:



Si deseas un "alias" para tu página, puedes solicitarlo a www-team@uc3m.es

10. Protección de páginas bajo clave

Se pueden introducir en el servidor informaciones que estén orientadas únicamente a usuarios de la propia Universidad. En el caso de que la información que contenga tenga carácter confidencial, se puede solicitar que el acceso a estos ficheros esté protegido. Deberemos poner esa información en un directorio separado, ya que la protección afecta a todo un directorio y definir a que tipo de personal se autorizara a leer la documentación. Se puede proteger de dos maneras:

Que sea consultada solo desde ordenadores de la Universidad

Que para acceder haya que teclear la clave de correo electrónico de la Universidad. En este caso, podremos también restringir el uso a un sector de usuarios delimitándolo a algún subdominio de correo, como por ejemplo @di, para el personal del servicio de informática, @der-pr par el personal del departamento de Derecho privado, etc.

0 comentarios:

Publicar un comentario