GUÍA DE ESTILO DEL SERVIDOR WWW DE LA UAL

Las siguientes son unas recomendaciones que deberían cumplir todas aquellas páginas publicadas en el WWW de la Universidad de Almería. Estas recomendaciones tratan de hacer que el servidor WWW de la Universidad sea un conjunto de información fácilmente accesible y con un aspecto homogéneo.
 

Directorios de imágenes e iconos comunes

No se duplicarán imágenes ni logotipos que ya estén en los directorios principales del servidor Web, con el fin de ahorrar espacio en disco. El S.I. mantendrá un directorio público de imágenes, logotipos, iconos, barras horizontales y fondos:

* http://www.ual.es/icons/icon.sheet.gif
* http://www.ual.es/recursos/iconos/
* http://www.ual.es/recursos/barras/
* http://www.ual.es/recursos/fondos/

 
Si se desea utilizar alguno de estos solo deberá incluir la referencia, no copiarlo a su directorio. Se aceptarán aportaciones de nuevas imágenes para incrementar la librería común.

Envíelas a webmaster@ual.es
 

Espacio en Disco

Para evitar un excesivo consumo de espacio en disco, las imágenes se construirán con un máximo de 256 colores, con ello se contribuirá a que el volumen de información en el disco no se incremente excesivamente. Además, tenga en cuenta que si hace una imagen con millones de colores, no todo el mundo la podrá ver con nitidez.
 

Estilo

Las páginas Web se construirán con el estándar HTML y será compatible con el cliente de web Netscape e Internet Explorer. Se intentará que éstas se diseñen para las pantallas VGA (800x600 pixels).
 

Estructura de una página

Contenido:Un sitio del Web debe ofrecer contenido, es decir, información del tipo que sea, no una simple colección de enlaces a otras páginas. Evitar poner enlaces a páginas todavía vacías de contenido, en donde sólo haya un icono indicando "Página en obras".

Longitud: Si una página resulta excesivamente larga, es conveniente descomponerla en otras varias, para facilitar el tiempo de carga, y dar la oportunidad al usuario de elegir lo que le interese.

Cabeceras: Si la información que se suministra se trata principalmente de texto, es muy conveniente utilizar adecuadamente las cabeceras y las listas.

Es importante recordar que el propósito de las cabeceras no es el de conseguir unos determinados tamaños de fuentes (para ello hay otro tipo de etiquetas), sino que se deben utilizar exclusivamente para organizar un documento en diversas secciones. Con este propósito, he aquí algunas recomendaciones acerca del correcto uso de las cabeceras

• Una cabecera no debe estar a más de un nivel del que la precede. Es decir, un elemento H3 no debería seguir directamente a uno H1
• Es incorrecto querer destacar de una manera extra lo que está dentro de la cabecera, utilizando etiquetas que hagan el texto aún más grueso.
• No se debe marcar el texto con las etiquetas H2 o H3, simplemente porque en nuestro navegador obtenemos así el tamaño de fuente y el grosor deseados, ya que en otros navegadores puede resultar de un tamaño grotescamente grande.

Composición

Es muy conveniente tratar de conseguir que las distintas páginas que componen un sitio del Web tengan un estilo consistente. Una composición uniforme de las páginas ayudará a los usuarios a navegar entre ellas, y dará personalidad al conjunto. Esta consistencia se puede obtener escogiendo un tema gráfico común al conjunto de las páginas: puede ser un color de fondo, o un logo, o una manera particular de disponer los gráficos o el texto.

Aunque el contenido es lo principal, una presentación acertada y atrayente contribuirá en gran medida al éxito de una página del Web.

Escoger un título significativo: A veces se omite el título de un documento HTML, o se le pone uno inadecuado, porque no se ve en pantalla. Pero ese documento será conocido en el Web precisamente por su título.

Por tanto, conviene hacer que el título sea muy descriptivo, de tal manera que cuando alguien lo guarde en su bookmark pueda saber posteriormente de qué se trata.

Poner un párrafo introductorio: A menudo, la única indicación del contenido de una página viene suministrada por una imagen. Pero no hay que olvidarse que existen navegadores que funcionan sólo en modo texto, así como que también hay una proporción de usuarios de navegadores gráficos que inhabilitan la carga de imágenes para ganar en velocidad.

Es conveniente, por tanto, poner un párrafo introductorio que exprese de manera clara y concisa el contenido de la página. Otra razón muy importante para hacerlo es que existen motores de búsqueda que catalogan las páginas precisamente por el contenido de las palabras iniciales.

Ayudas visuales: Guiar los ojos del usuario por medio de la estructura de la página, barras separadoras, tipos de fuentes, iconos, imágenes, etc. No utilizar el parpadeo más que para las emergencias.

Para hacer particiones de una página se pueden usar los separadores horizontales (<HR>) o tablas con bordes. Pero no hay que abusar de esto. Demasiados separadores dan un aspecto trozeado a la página.

Seleccionar un fondo de color o con imágenes: No todos los navegadores lo soportan, pero si se utiliza adecuadamente puede tener un impacto espectacular.

Es muy importante que el fondo no dificulte la lectura del texto. Si el color del texto es muy llamativo, es preferible usar un color de fondo pastel. Si se utiliza un color de fondo negro o muy oscuro hay que tener un cuidado muy especial en escoger un color de texto claro, que contraste suficientemente.

Comunicarse con los usuarios: Hay que ofrecer al usuario de la página la posibilidad de que pueda hacer comentarios, indicar posibles problemas, etc . Para ello es muy conveniente suministrar una dirección de email, o incluso un libro de visitas.

Asimismo, es muy útil poner la fecha de la última modificación. Si los cambios son frecuentes, también se puede proporcionar una lista cronológica de las modificaciones.

A estos efectos en la parte inferior izquierda se incluirá:

• El autor de la página
• E-mail del autor de la página, para poder atender las sugerencias de los usuario y poder realizar un mantenimiento de ella.
• Fecha de la última modificación

En la parte inferior derecha se indicará si la página permite diferentes idiomas indíquelo con English o( el idioma que corresponda) versión available.

Ofrecer referencias o otras páginas similares: Si un usuario está interesado por el contenido de nuestra página nos agradecerá mucho si le ofrecemos referencias a otras páginas con el mismo tema u otros relacionados con él. Hay que valorar el trabajo de los demás, y no ver tales páginas como rivales a la nuestra, sino al contrario, como una medida para enriquecerla.

 
Navegación

Hay que procurar por todos los medios el facilitar al usuario la navegación entre las distintas páginas. Si éstas son numerosas, el usuario no debe sentirse perdido como en un laberinto. Los medio que se pueden emplear para conseguirlo son:

Iconos de navegación: Como por ejemplo:
 

No olvidarse de incluir dentro de cada etiqueta el atributo ALT, que indica con un texto su función. Y sobre todo, es muy importante que por lo menos haya siempre un icono que conduzca a la página principal.

Indice con frames: Una de las funciones más útiles de los frames es la posibilidad de tener un índice dentro de un frame que se mantiene siempre a la vista, con lo que se facilita enormemente la navegación

Barra de menú: Se puede utilizar como ayuda a la navegación una barra de menú, consistente en un mapa es decir una imagen que contiene zonas que enlazan con otras páginas. No olvidarse de suministrar los enlaces del mapa también en forma de texto.

Claridad en el texto de los enlaces: Hay que procurar que las palabras que forman parte de un enlace indiquen con claridad a dónde conduce ese enlace, y que estén integradas con el resto de la frase.
 

Imágenes

Se consiguen presentaciones muy vistosas con las imágenes, pero pueden representar un problema para los usuarios con conexiones lentas. Incluirlas solamente cuando añadan algo al contenido.

Si se juzga conveniente incluir imágenes grandes, hacerlo de tal manera que sea el usuario quien decida si las va a cargar o no. Para ello, suministrar enlaces a las imágenes con indicación de los kbytes, bien sea con un texto, bien sea con un thumbnail (imagen con aspecto más pequeño que el original).

Se deben incluir dentro de las etiquetas de las imágenes estos atributos, que aunque son opcionales son muy convenientes:

Atributo ALT: Es un texto asociado a la imagen. Muy conveniente para los que utilizan navegadores en forma texto (Lynx, etc.), o para los que usando navegadores gráficos, han inhabilitado la carga de imágenes para ganar en velocidad.

Atributos WIDTH y HEIGHT: Es una indicación de las dimensiones de la imagen (ancho y alto). Es muy importante ponerlo en todas las etiquetas de las imágenes, pues facilita mucho la carga de la página, ya que primero se carga todo el texto y posteriormente se van rellenando los espacios reservados a las imágenes.

Con respecto a los GIFs animados, conviene no abusar de ellos poniendo demasiados en una misma página, no sólamente por motivos estéticos, sino también porque esto puede provocar problemas en los ordenadores de algunos usuarios.
 

Frames

Los frames permiten dividir la pantalla en diferentes ventanas, con un documento HTML distinto en cada una de ellas.

Esto permite a su autor ejercer un gran control sobre la disposición general y apariencia de la página, pero como todas las cosas, deben ser utilizados con cuidado.

Cosas a evitar en el uso de los frames:

• Excesiva fragmentación de la pantalla: Si se van a utilizar más de dos frames, hay que evitar la impresión de que se ha "parcelado" la pantalla en múltiples ventanitas. Por lo menos uno de ellos debe ser mucho mayor que los demás, para que actúe como página principal, siendo los otros meros auxiliares para la navegación de lo que ocurre en el frame principal.

• Disposición demasiado rígida de los frames: A veces, el autor planea cuidadosamente en su propio monitor el tamaño de cada frame, y para evitar que los usuarios "estropeen" ese efecto, elimina las distintas posibilidades que existen para poder manipularlos. Pero esto puede ser muy perjudicial para usuarios con resolución de pantalla distinta, ya que puede ocurrir que parte del contenido de los frames quede oculta, y debido a la rigidez con que han sido planeados, no haya manera de resolver este inconveniente. Conviene, por tanto, evitar poner los atributos NORESIZE o SCROLLING="no" dentro de la etiqueta <FRAME>.

• Al dimensionar los frames con la etiqueta <FRAMESET>, conviene evitar hacerlo empleando valores absolutos. Es mejor hacerlo con porcentajes de pantalla o valores relativos.

• Enlaces al exterior prisioneros dentro de un frame: A veces encontramos páginas con frames que contienen enlaces a otros sitios del Web que al ser pulsados se cargan dentro del mismo frame. Esto resulta generalmente molesto para el usuario, pues la página cargada queda aprisionada dentro del reducido espacio del frame (agravado aún más si la página cargada contiene ella misma sus propios frames). Además, el usuario puede tener la impresión de que el autor de la página pretende impedirle que se "escape" a otras páginas.

• La manera de evitar esto es poner, dentro de las etiquetas de los enlaces en cuestión, el atributo TARGET="_top", con lo que al pulsar el enlace la nueva página se cargará a pantalla completa.

Nombres de los ficheros

Un sitio del Web es en realidad un conjunto de ficheros, bien sea de texto (los documentos HTML), bien sea binarios (imágenes, sonidos, etc.) que vamos a colocar en un servidor, para que sean accesibles a quien quiera visitarlos.

Pero debido a que la mayoría de los servidores están basados en sistemas Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros ficheros en el servidor, considerar una particularidad referente a los nombres de los ficheros.

Resulta que en los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los ficheros. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos.

Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al fichero Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html

Para evitar estos posibles problemas es muy conveniente tomar estas medidas desde que se comienza la confección de una página del Web:

• Utilizar exclusivamente las minúsculas para nombrar los documentos HTML .
• Nombrar a todos los ficheros binarios (de imagen, sonido, etc.) también exclusivamente con minúsculas
• Todas las referencias que se hagan dentro de un documento HTML a otros documentos o ficheros deben hacerse también siempre en minúsculas.

  
No confeccionar una página para un navegador concreto

Al contrario de lo que cree mucha gente, una página del Web no se ve de manera idéntica en todos los navegadores.

Existen muchas variantes, aparte de los diferentes tipos de navegadores, tales como la antigüedad de las versiones, los distintos sistemas operativos o equipos. Además, los usuarios pueden haber escogido una resolución de pantalla distinta a la nuestra, o haber variado la configuración de su navegador para ajustarla a su gusto.

Todo esto no quiere decir que no se puede hacer nada efectivo para resolver este problema.

La mejor medida para que una página se vea correctamente en la mayoría de los navegadores es confeccionarla con naturalidad, sin forzar las cosas queriendo controlarlo todo hasta el último detalle y empleando para ello todo tipo de artificios, ya que la probabilidad de que se vea incorrectamente en otros navegadores aumentará de manera proporcional.
 

Otros servidores de la www

En el caso que el departamento o unidad administrativa disponga de servidor de la WWW propio y no desee hacer uso del servidor de la UAL no será necesario que dé el alta en este servicio, pero si deberá notificarlo al Servicio de Informática (S.I.) a fin de que el servidor del departamento o unidad administrativa sea enlazado en el servidor central.
 

Asistencia, formación y ayuda

Cualquiera norma que se establezcan a estos efectos, se notificará a los administradores de los Web departamentales o unidades administrativas por correo electrónico, o bien. publicándola en el servidor WWW.

El S.I. suministrará asistencia y ayuda en la confección de páginas Web a los responsables WWW de cada departamento y unidad administrativa.

También se dispondrá de los siguientes enlaces de ayuda:

* Software y Herramientas para la Creación de documentos HTML.
* Manual de HTML.
* Documentos de interés para Web Managers.
* Creación de un contador en una página HTML.

Para incluir un contador que registre los accesos a una página determinada mande un mail
a Webmaster@ual.es.

Página mantenida por Área de Comunicaciones 
Última modificación: 09/04/02
Área de Comunicaciones. Servicio de Informática