LIBRO DE ESTILO WEB DE LA UNIVERSIDAD COMPLUTENSE DE MADRID

El presente Libro de Estilo está basado en el documento Manual de Identidad Institucional de la

Universidad Complutense de Madrid, editado por el Gabinete de Comunicación. Tiene como
objetivo dar las pautas necesarias a la UCM, para que las diferentes páginas que conforman el
web corporativo puedan mantener una imagen gráfica homogénea.

• Recomendaciones Generales
• Estructura de las Páginas
• El Escudo
• Los Colores Corporativos
• La Tipografía
• Los Elementos de Diseño
• Fotos e Imágenes
• Instrucciones para el Uso de Plantillas
• Plantillas

1
RECOMENDACIONES GENERALES

Facilitar la navegación. Usabilidad.

Para favorecer una lectura cómoda de la página, no conviene que el contenido de la misma sea
muy extenso, siendo la mejor opción cuando las páginas puedan ser leídas sin utilizar la barra
de desplazamiento (sólo cuando sea posible, sin forzar la maquetación).

Para asegurarse de que el usuario pueda navegar cómodamente, conviene proporcionar un

enlace a la página principal de la web. Dado que los usuarios pueden provenir de cualquier otra
página y no necesariamente de la principal, proporciona en cada documento un enlace en
forma de texto, gráfico o botón a la misma. Este elemento será el logotipo de la UCM.

El menú principal debe estar siempre visible. Para facilitar la navegación del usuario conviene
que el menú principal de contenidos esté siempre visible para poder cambiar de opción en
cualquier momento, de forma rápida y sencilla.

La calidad del documento

Enlaces siempre activos. Es conveniente revisar periódicamente el correcto funcionamiento de

los enlaces para no llevar a los usuarios a puntos sin retorno.

Ortografía y gramática. Hay programas que incluyen revisores ortográficos que conviene utilizar
para asegurarse de que el texto de las páginas es correcto.

Información clara y actualizada. Es preferible utilizar textos concisos y sin excesivos elementos
que lo recarguen. Es conveniente que los contenidos se actualicen periódicamente para
mantener el interés de los usuarios, para ello un texto breve es más sencillo de mantener.

Apuntes Técnicos

Utilizar elementos del lenguaje HTML que sean compatibles con los navegadores web de las
versiones 4.0 y posteriores tanto de Microsoft como de Netscape. También, es muy
conveniente comprobar el aspecto de las páginas en distintas plataformas (Mac, Windows,
Unix...) y configuraciones de pantalla.

La inserción de código javascript también puede permitir que la página sea visualizada por los
navegadores mencionados anteriormente.

Esta información deberá aparecer en la primera página de la web, indicando la configuración

mínima requerida.

2
ESTRUCTURA DE LAS PÁGINAS

Página Principal

La página principal de la Universidad Complutense de Madrid está compuesta por los

siguientes elementos:

• Cabecera: posee el escudo de la UCM y el logotipo oficial, alternando los colores

blanco y gules (rojo vivo). A su vez se incluyen los perfiles de usuario y el acceso al
sistema Complunet.

• Menú de Contenidos: el menú de contenidos está ubicado en la parte izquierda de la

página y da acceso a los contenidos de segundo nivel.

• Frame central de desarrollo de contenidos: el frame central muestra una imagen

significativa de la UCM, que desaparece al seleccionar cualquiera de los ítems del
menú de contenidos.

• Noticias y Novedades: el menú de Noticias y Novedades está ubicado en la parte

derecha de la página, en los colores naranja y gris.

• Iconos: la parte inferior de la página está reservada al Contador y a los iconos de

Contactar, Estadísticas, Contenidos en inglés, Localización, Directorio, Búsquedas y el
Copyright de la Complutense.

Segundo Nivel de Navegación

El segundo nivel de navegación se despliega encima de la imagen central al seleccionar

cualquier opción del menú principal.

En el frame de la izquierda se mantienen todas las opciones de menú de la página principal

para ofrecer la posibilidad de cambiar de una a otra en cualquier momento.

Al pasar el ratón sobre el menú de la izquierda, se ilumina el elemento seleccionado y se

muestran en tono gris los contenidos de segundo nivel del elemento seleccionado. Cuando se
pulsa sobre el elemento de primer nivel, se marcan en oscuro los elementos de segundo nivel y
se hacen navegables, iluminándose cuando se pasa por encima con el ratón.

Tercer Nivel de Navegación

El tercer nivel de navegación son las páginas que establecen la conexión con cada uno de los
ítems de menú de segundo nivel.

Para este nivel se han creado unas plantillas con diferentes elementos gráficos para que las
facultades o departamentos puedan confeccionar sus propias páginas utilizando estas
plantillas, o bien combinando los elementos gráficos contenidos en ella.

El uso de estas plantillas consistirá en:

- la preparación de páginas sobre temas específicos y acceso a páginas relativas a

estos temas, propios de la UCM.

3
 - el acceso a webs externas cuyas páginas se confeccionen con los elementos de
diseño de las plantilla o webs externas con un diseño propio y diferenciado

- la preparación de páginas con información sobre facultades o departamentos que

no hayan desarrollado su propia web

Las plantillas de tercer nivel están pendientes de ser validadas por la UCM.

4
EL ESCUDO

Escudo

El escudo es el signo heráldico que simboliza los valores históricos de la institución. Su

normalización gráfica pretende optimizar técnicamente la percepción visual del signo,
garantizando su correcta reproducción.

Los usos y características gráficas del escudo de la UCM están reflejados en el Manual de
Identidad Institucional de la Universidad Complutense de Madrid – Signos básicos, capítulo 4.

El escudo que se ofrece a continuación es el modelo que se debe usar en las páginas web de
la UCM:

5
LOS COLORES CORPORATIVOS

La web de la UCM combina las gamas cromáticas definidas en el Manual de Identidad

Institucional de la Universidad Complutense de Madrid – Signos básicos, concretamente en el
capítulo 3.

Se distinguen los colores principales, que son el blanco, el oro, el plata, el gules (rojo vivo), el
gris y el negro y los colores secundarios, compuestos por una gama de nueve colores.

El oro y el plata son de uso preferente en el escudo y se reproducen exclusivamente por

estampación en papel o tela. A continuación se ofrece una muestra de colores primarios:

PANTONE 200

M-100; Y-63; K-12

A continuación se ofrece una muestra de los colores secundarios:

PANTONE 191 PANTONE 123

M-76; Y-36 M-24; Y-95

PANTONE 415 PANTO NE WARM RED

M-70; Y-100 Y-12; K-40

PANTONE 021 PANTONE 313

M-50; Y-100 C-100; Y-8; K.13

6
PANTONE 361 PANTONE 514

C-76; Y-91 C-15; M-50

PANTONE 521 PANTONE 550

C-27; M-47 C-39; M-4; K-19

7
LA TIPOGRAFÍA

Como se indica en el Manual de Identidad Institucional de la Universidad Complutense de

Madrid – Signos básicos, concretamente en el capítulo 2, se han adoptado dos familias
tipográficas para componer todos los textos que integran la web.

La familia tipográfica principal es la “Filosofía”, romana, con pies y remates, y trazos de

diferente grosor. La familia tipográfica auxiliar es la “Transit”, grotesca, sin remates y de trazo
uniforme.

No obstante, para los textos largos de las páginas web se recomienda utilizar la Arial o
Helvética ya que estas tipografías se encuentran por defecto en la mayoría de ordenadores que
trabajan en entornos Windows o UNIX.

A continuación se muestran algunos ejemplos de la tipografía “Filosofía”:

Filosofía Regular

Filosofía Bold

Filosofía Italic

8
Filosofía Grand Caps

A continuación se muestran algunos ejemplos de la tipografía “Transit”:

Transit Normal

Transit Bold

Transit Italic

9
Transit Black

10
LOS ELEMENTOS DE DISEÑO

Los elementos principales de diseño son:

- Menú vertical izquierdo: menú que facilita la navegación por los diferentes contenidos de la
página web. El estilo de texto de este menú será en base a una hoja de estilo (archivo
CSS).

- Menú horizontal superior: menú ubicado en la parte superior de la página que desarrolla los
contenidos, ofreciendo diferentes alternativas de navegación.

- Cabecera: espacio reservado para el escudo de la UCM y para las imágenes corporativas.

- Pie: espacio reservado para iconos de navegación y el Copyright de la Complutense.

- Cuerpo para contenidos: espacio reservado para el desarrollo de las opciones que
proporcionan los menús. El estilo de los contenidos también vendrá dado una hoja de
estilo.

- Listado de opciones: segundo nivel ubicado en el cuerpo de la página.

- Biblioteca de fondos: una bibliotecas con fondos para las páginas.

Cada uno de estos elementos de diseño son combinables entre sí pudiendo incluir unos u otros
en función de las características de la página, sin embargo, no son modificables internamente.

Nota: una hoja de estilo o archivo CSS, es un archivo adjunto que se encuentra alojado en el
servidor. Está compuesto por una serie de instrucciones que indicarán el tipo de fuente, cuerpo,
color, aspecto del scroll, etc. de la página en la que se inserta. Al archivo CSS se le invoca
desde la página htm con una línea de código, la cual vendrá integrada en las plantillas.

Los elementos secundarios de diseño son los iconos:

Icono de Contactar, para enviar un correo al responsable del mantenimiento de

la página web

Icono de Estadísticas de uso de la web

Icono de selección de idioma

Icono de localización geográfica de las instalaciones de la Universidad

Complutense de Madrid

Icono de acceso al directorio de información de la UCM

Icono para indicar que se pueden realizar búsquedas

Icono para indicar el apartado de Noticias

Icono para indicar el apartado de Novedades

Icono para indicar el comienzo de un menú de contenidos.

11
Icono de Imprimir

Icono de regresar a la Página Principal (Home)

Icono de Página Anterior

Icono de Página Siguiente

12
FOTOS E IMÁGENES

La incorporación de fotos e imágenes en una página debe analizarse con detalle, a fin de que
la carga de esa página sea lo más rápida posible.

Principalmente, son dos factores los que determinan el tamaño en bytes del elemento gráfico:
sus dimensiones y el número de colores que lo integran.

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. Actualmente,
existen programas de tratamiento de imágenes que nos pueden facilitar mucho esta labor
ofreciéndonos la posibilidad de guardar imágenes optimizadas para web.

Es muy importante tener en cuenta que las imágenes que insertemos en la web tengan a priori
el tamaño adecuado ya que si insertamos una imagen y luego le reducimos el tamaño dentro
de la página html, ésta mantendrá su tamaño original y, por tanto, aumentará su tiempo de
descarga.

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

- El formato GIF utiliza hasta un máximo de 256 colores y permite la posibilidad de definir
fondos transparentes y animación de gráficos. Este formato utiliza un sistema de
compresión (para reducir el tiempo de descarga) 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 sólo
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 lo que es el formato más adecuado para imágenes grandes y fotografías.

Las imágenes animadas deben utilizarse con mucho cuidado porque:

- 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 adecuada de la página.

13
INSTRUCCIONES PARA EL USO DE PLANTILLAS

Este apartado pretende ser una guía de uso de las plantillas para los usuarios.

Para crear páginas a partir de las plantillas que se ofrecen aquí deberá:

• Buscar el tipo de plantilla que necesita. Deberá decidir dentro de que rama del web estará
su página (servicios, estudios...). Después deberá elegir si será una página con frames o
sin ellos.

• Haga click sobre la plantilla seleccionada.

• Modifique la página y publíquela en el servidor, según el procedimiento normal. No olvide

cambiar el título cuando modifique la página, de lo contrario el título de la misma será el de
"plantilla de...".

• Si va a usar la plantilla para páginas con frames (marcos):

- Pinche sobre el enlace a la plantilla

- Pinche sobre "Archivo->Guardar como..." (File->Save as...) De esta manera

guardará en su disco el fichero que define el contenido y aspecto de los
frames. Deberá modificar este fichero con algún editor html como
dreamweaver, o bien un editor de textos como notepad, wordpad, etc... Cambie
el título en este fichero, pues será el que aparezca como título de su página
con frames. El título es el que aparece entre las etiquetas <title> </title> casi al
principio del documento. Guarde los cambios y vuelva al navegador, a la
página de la plantilla.

- Pinche con el botón derecho del ratón sobre el lado derecho (frame derecho) y
seleccione "Abrir el marco en una ventana nueva" (Open frame in new
window). Cuando esté viendo la ventana del navegador solo con el frame
derecho, modifique el fichero normalmente, guarde los cambios realizados y
envíelo al servidor.

- Pinche con el botón derecho del ratón en el frame izquierdo, donde aparece el
espacio reservado al menú de las páginas, y seleccione de nuevo "Abrir el
marco en una ventana nueva" (Open frame in new window). Modifique este
fichero, guárdelo y envíelo al servidor por el procedimiento normal

- Pinche con el botón derecho del ratón sobre el frame superior y seleccione
"Abrir el marco en una ventana nueva" (Open frame in new window). Cuando
esté viendo la ventana del navegador solo con el frame superior, modifique el
fichero normalmente, guarde los cambios realizados y envíelo al servidor.

- Ahora debe enviar al servidor el frameset, que es el fichero que guardó en su

disco al principio.

Todas las plantillas dispondrán de versiones con frames y sin frames.

14
PLANTILLAS
Las plantillas se organizarán de las siguiente manera:

- una plantilla única que aglutine todos los elementos de diseño. De ella se extraerán
los elementos de diseño para confeccionar páginas nuevas.

- otras plantillas que combinen diferentes elementos de diseño para cubrir

necesidades completas.

- con más contenidos (listados , tablas), con menú, sin menú.

- para páginas de transición a webs diferentes ya desarrolladas.

- para páginas de transición/información a contenidos aun no desarrollados.

15