Manual de estilo web UPNA v2...Manual de estilo del sitio web de la UPNA INFORMACIÓN CONFIDENCIAL...

Pamplona, 12 de diciembre, 2008

Manual de estilo

Sitio web Universidad Pública de Navarra

Versión 1.0

Manual de estilo del sitio web de la UPNA

INFORMACIÓN CONFIDENCIAL No se permite su reproducción, modificación, comunicación o distribución sin autorización del propietario

UPNA © Todos los derechos reservados 2

INTRODUCCIÓN ..........................................................................4

1. MODELOS DE CARCASAS..........................................................4

1. Portada (Homepage) ...............................................................................4

2. Portadillas (portadas de Microsites) ........................................................6

3. Contenido final ......................................................................................10

2. TIPOS DE PÁGINAS Y CONTENIDOS.........................................12

1. Listados de secciones-subsecciones ......................................................12

2. Asignaturas ...........................................................................................15

3. Fichas de profesores..............................................................................18

4. Tablón de anuncios ................................................................................20

5. Noticias..................................................................................................21

6. Congresos..............................................................................................24

7. Galerías de fotos....................................................................................25

8. Boletines................................................................................................27

9. Destacados columna izquierda...............................................................34

10. Destacados columna derecha...............................................................35

11. Destacados zona central ......................................................................39




3. FUNCIONALIDAD DE LOS MENÚS Y TÍTULOS............................46

1. Menús ....................................................................................................46

2. Títulos ...................................................................................................54

4.ESTILOS GENÉRICOS..............................................................57

1. Logotipo ................................................................................................57

2. Fuentes..................................................................................................57

3. Enlaces ..................................................................................................57

4. Titulares ................................................................................................58




Introducción En este documento se detallan los distintos modelos de páginas posibles en el web

de la Universidad de Navarra, así como los distintos modelos de cajas que se

pueden utilizar para cada modelo.

1. Modelos de carcasas Se detallan los modelos de páginas en función de la carcasa que llevan, que es lo que

marca la maquetación en bloques y los contenidos que se muestran en esos bloques.

En el siguiente apartado se explica cada tipo de contenido por separado.

1. Portada (Homepage)

a. Descripción de la carcasa

Esta carcasa lleva 3 columnas.

La columna izquierda incluye el menú de navegación principal, la caja de contacto y el

destacado del portal interno,

La columna central incluye los destacados de Últimas noticias, Galería de fotos,

Destacados icono y destacado especial.

La columna derecha incluye el destacado de eventos de la agenda y eventualmente

puede incluir también otros destacados del tipo de: Caja de enlaces a páginas

destacadas, Caja de documentos descargables, destacados de icono y destacados de

imagen.




Los componentes para los distintos contenidos mencionados se describen en el

siguiente apartado del documento.




2. Portadillas (portadas de Microsites) Las portadas de los “microsites” de Centros, Departamentos, Servicios y Grupos de

investigación (a las que llamaremos “Portadillas”) llevan una plantilla diferente a la de la

HomePage del sitio.

A su vez, los Centros y Departamentos comparten el mismo tipo de Carcasa, y los

Servicios y Grupos de Investigación también comparten el mismo tipo de carcasa.

La diferencia entre ambos tipos de carcasa es únicamente el color de la franja del

nombre del Centro y Departamento (en rojo), frente al Servicio y Grupo de

investigación (en gris).

Por lo demás, las carcasas son idénticas, por lo que aquí nos limitaremos a describirlas

una sola vez.

a. Descripción de la carcasa de Centro, Departamento, Servicio y

Grupo de Investigación

Esta Portadilla funciona a modo de home interna, únicamente para los microsites

citados.

La columna izquierda incluye el menú de navegación principal del site de UPNA y

debajo, el menú de navegación propio del microsite, además de la caja de contacto y el

destacado del portal interno,




La columna central incluye varios elementos opcionales en el siguiente orden: un texto

a modo de presentación o entradilla, los destacados de Tablón de anuncios (sólo en

los Centros y en los Servicios), de Últimas noticias y de Agenda, de Galería de fotos

(sólo en los Centros y en los Servicios), y destacados de icono.

La columna derecha puede incluir en el orden que se desee destacados del tipo de:

Caja de enlaces a páginas destacadas, Caja de documentos descargables, destacados

de icono y destacados de imagen.



UPNA © Todos los derechos reservados

10

3. Contenido final

a. Descripción de la carcasa

Las secciones de segundo, tercero y cuarto nivel de navegación que incluyen

contenidos finales, emplean esta carcasa.

Esta carcasa ya no tiene 3 columnas, sino que sólo tiene dos.

La izquierda hereda los contenidos de la portada o portadilla desde la que se accede.

Esto quiere decir que incluye el menú de navegación principal del site de UPNA (y en

los microsites, debajo el menú de navegación propio del microsite), además de la caja

de contacto y el destacado del portal interno.

En la columna derecha, que ocupa el espacio principal de la página, se incluyen los

contenidos que podrán ser de todos los tipos posibles (listados simples, categorizados

o “complejos” –de noticias, eventos, congresos, etc.-, galerías de fotos, imágenes,

texto html, asignaturas, currículums de profesores, etc.

Los distintos tipos de páginas y contenidos se describen en el siguiente apartado del

documento.




11




12

2. Tipos de páginas y contenidos

1. Listados de secciones-subsecciones

1.1. Listados simples

Las secciones de segundo nivel de navegación pueden contener listados simples que

ofrecen enlace a las páginas de tercer nivel de navegación. Esto sucede tanto en la

web general – secciones en Universidad y Perfiles-, como en los “microsites” de

Centros, Departamentos, Servicios y Grupos de investigación.

En esos casos, se emplea la carcasa de 3 columnas correspondiente al web general

sección Universidad, o web general – zona Perfiles, o bien la correspondiente a

Centro/Departamento, o Servicios/Grupos Inv. en el caso de que el listado se ubique

dentro de uno de ellos.

La columna izquierda y la columna derecha heredan los contenidos asignados para

toda la sección a la que se está accediendo. En la columna central se mostraría el

listado simple.

Este estilo se aplica en distintos componentes de tipo listado en Infoglue: “Listado

cursos”, “listado nodos”, “listado todas páginas”, “listado contenidos”.

También es el estilo que se debe emplear en los listados maquetados directamente

sobre el HTML.




13




14

1.2. Listados categorizados

Las secciones de segundo nivel de navegación también pueden contener listados

categorizados.

Estos son listados automáticos de enlaces a nodos de tercer nivel de navegación ,

organizados por categorías. Las categorías se habrán creado en Infoglue como nodos

intermedios vacíos de contenido.

Estos listados se utilizan tanto en la web general – secciones en Universidad y Perfiles-

, como en los “microsites” de Centros, Departamentos, Servicios y Grupos de

investigación.

Emplean la carcasa de 3 columnas correspondiente al web general sección

Universidad, o web general – zona Perfiles, o bien la correspondiente a

Centro/Departamento, o Servicios/Grupos Inv. En el caso de que el listado se ubique

dentro de uno de ellos.

La columna izquierda y la columna derecha heredan los contenidos asignados para

toda la sección a la que se está accediendo. En la columna central se mostraría el

listado simple.




15

2. Asignaturas Las páginas de asignaturas se utilizan dentro de los microsites de Centros y de

Departamentos. No son una carcasa distinta, ya que emplean la carcasa de contenido

final a dos columnas. Pero su diseño es específico, ya que tiene una navegación

interna propia.




16




17




18

3. Fichas de profesores Al igual que las asignaturas, las páginas de fichas de profesores se utilizan dentro de

los microsites de Centros y de Departamentos. No son una carcasa distinta, ya que

emplean la carcasa de contenido final a dos columnas. Pero su diseño es específico,

ya que tiene una navegación interna propia.

3.1. Listado de fichas de profesores

Es un listado organizado alfabéticamente, que permite navegar a

3.2. Ficha de profesor

Permite incluir los datos personales y profesionales del profesor, así como una foto de

la persona (si estuviera disponible). Tiene su propia forma de navegación.




19




20

4. Tablón de anuncios

4.1. Listado de anuncios

Se utiliza en la página de Tablón de anuncios dentro de los microsites de Centros y

Servicios.

En la portada de ambas, hay un destacado con un listado de 2 ó 3 anuncios, con un

enlace a ver el listado completo (que es una sección del menú).

El listado de anuncios incluye, para cada anuncio, fecha, título y entradilla.




21

4.2. Ficha de anuncios

Es el contenido propio del anuncio en sí mismo.

5. Noticias

5.1. Listados de noticias

Se utilizan en la sección de Actualidad.

Hay dos tipos: el listado de la portada de “Noticias” (que incluiría las últimas 10

noticias) y el listado de “Archivo de Noticias”.

El de portada incluye para cada noticia: fecha, título, entradilla, categoría de la noticia

y fotografía miniatura. Y serán un número limitado (las últimas 10)

El del Archivo de noticias incluye sólo fecha, título y categoría de la noticia.

Ambos ofrecen delante de las noticias un buscador de noticias que permite buscar por

fechas (desde – hasta), por categorías y por palabras clave.




22




23

5.2 Ficha de noticias

Es el contenido propio de la noticia en sí misma.

�




24

6. Congresos

6.1. Listado de Congresos

Se utiliza en la sección de Actualidad.

El listado de Congresos incluye para cada uno: título, fecha/s, lugar, “organiza” (quién

lo organiza) y contacto.

Está en orden cronológico inverso (los más recientes primero) y paginado.

El título enlaza a la ficha de cada Congreso.

6.2. Ficha de Congresos

Es el contenido propio del congreso en sí mismo.

Cada bloque de información (que corresponde con un campo en Infoglue), se muestra

precedido de su título con un formato especial (texto con una línea de subrayado de

lado a lado).




25

7. Galerías de fotos Las Galerías de fotos se utilizan en la sección Conocer la Universidad>Historia> en

diversis tipos de actos y eventos (como Actos Oficiales o de Apertura de Curso) y

también en las páginas propias de centros, en la sección El Centro>El Centro en

imágenes.

También se pueden insertar en cualquier otra sección que se desee.




26

7.1. Listados de galerías de fotos

La página lleva un párrafo o texto presentación inicial (opcional) y debajo, 1-3 fotos

para cada galería de imágenes que haya en el listadoo, junto al nombre de la galería.

Al clicar en el nombre de la galería o en las fotos, se navega a la página de esa galería.




27

7.2. Ficha de galería

En esta página se encuentran todas las miniaturas de las fotos de la galería

correspondiente, cada una con su pie de imagen completo.

Si hay muchas, se mostrarán con paginación.

Al clicar cada miniatura, se abre la fotografía encima, quedando atenuada la pantalla

(estilo javascript empleado en el Naturalista o Enciclopedia Navarra).

8. Boletines Se ubican en la sección Actualidad>Boletines. Hay una portada específica para esta

sección, con imágenes para destacar cada uno de los 4 tipos de boletines.

Todos los tipos de boletines llevan una cabecera con el logo de la UPNA, el nombre y

el número del boletín y la fecha. Asimismo llevan un pie común con la opción de dar

de baja la suscripción.




28




29

8.1. Boletín de noticias

Se enviará 1-2 veces por semana.

Incluye un listado de titulares (con entradilla) de noticias, ordenado por categorías,

cada una de las cuales enlaza (desde su título) al desarrollo completo de la noticia en

la sección de Actualidad>Noticias.

Hay un bloque inicial de Últimas noticias (que no coincide con ninguna categoría) y que

es el único en el que las noticias pueden llevar foto. Las noticias llevan cada una:

imagen (sólo en primer bloque y opcional), fecha, título y entradilla.

8.2. Boletín de Novedades Editoriales

Se utilizan en la sección Actualidad>Boletines.

Se enviará trimestralmente.

Incluye un listado de novedades editoriales ordenado cronológicamente.

Cada novedad editorial lleva: imagen, título, autor y texto descriptivo. (Pero NO enlazan

a ningún sitio en la web por el momento, puesto que no se ha contemplado que haya

sección propia de Novedades editoriales).




30




31




32

8.3. Boletín de Resumen de Prensa

Se enviará diariamente.

Incluye un enlace destacado al pdf de Resumen de prensa completo del día, que

estará colgado en la web.

Asimismo, incluye el listado de titulares de las noticias publicadas en los medios (y que

se recogen integramente en el pdf), sobre temáticas relacionadas con la universidad.

Estas noticias se separan en 4 bloques: Noticias sobre: Universidad Pública de

Navarra, Otras Universidades, Otros Centros y Ciencia e Investigación.

En cada bloque se muestra el listado de noticias que han publicado los medios,

incluyendo para cada una: título, medio de comunicación y/o enlace.

(Cada bloque se gestionará desde Infoglue como un bloque de texto Wysiwyg)

8.4. Boletín de Cultura

Se enviará semanalmente.

Incluye un listado de actividades destacadas por el Servicio de Cultura, para la semana

siguiente. Se trata de enlazar a las fichas de determinados eventos en la aplicación de

agenda (sección de Actualidad).

El listado noticias ordenado por categorías, cada una de las cuales enlaza (desde su

título) al desarrollo completo de la noticia en la sección de Actualidad>Noticias.

Las noticias llevan cada una: imagen opcional, fecha, título y entradilla.




33




34

9. Destacados columna izquierda

9.1 Contacto

Aparece siempre en la parte inferior de la columna izquierda.

9.2.Portal Interno

Siempre debe de estar debajo de contacto.




35

10. Destacados columna derecha Los elementos seleccionados para columna derecha de una sección, estarán

presentes en todas las páginas a tres columnas (portadas, portadillas y listados

simples). Todos ellos son opcionales.

10.1. Destacado eventos de agenda

Se trata de una caja con enlace a ver eventos de la agenda de la Universidad.

Sólo se utiliza en la portada del sitio web.

Contiene entre 2 y 4 elementos con:

- Categoría

- Fecha

- Título

- Enlace al detalle del evento




36

10.2. Enlaces destacados a otras páginas

Se utiliza para enlazar a otras páginas del sitio web (o externas). Puede ir en la portada

del web y en las portadillas de Centros, Departamentos, Servicios y Grupos de

Investigación.

El título de la caja es editable, no es un enlace. El listado será siempre de enlaces a

otras páginas, nunca de documentos descargables. Puede haber el número de enlaces

que se desee pero no recomendamos que haya menos de 2 ni más de 8.

10.3. Documentos descargables

Se utiliza para enlazar a documentos para descarga. Puede ir en la portada del web y

en las portadillas de Centros, Departamentos, Servicios y Grupos de Investigación.

El título de la caja es fijo. Cada elemento de listado puede tener texto plano + enlaces a

los documentos descargables:

Puede haber el número de documentos que se desee pero no recomendamos menos

de 2 ni más de 6.




37

10.4. Destacados con imagen

Se trata de destacados con un texto y una imagen debajo. Puede ir en la portada del

web y en las portadillas de Centros, Departamentos, Servicios y Grupos de

Investigación.

El texto se gestiona desde Infoglue y puede llevar algunas palabras marcadas como

“negritas”. En ese caso, se mostrarán en color rojo.

La imagen puede tener formato horizontal, cuadrada o vertical. Su anchura es de 170

px.

10.5. Destacados con icono

Se trata de destacados con un texto y una imagen de tipo gráfico (no fotografía) a su




38

derecha.

Pueden ir en la portada del web y en las portadillas de Centros, Departamentos,

Servicios y Grupos de Investigación.

El texto se gestiona desde Infoglue y puede llevar algunas palabras marcadas como

“negritas”. En ese caso, se mostrarán en color rojo.

La imagen debe tener un tamaño de máximo de 50x40 pixels y se recomienda, para

mantener el estilo con los que ya hay, que siempre vayan en blanco y negro.




39

11. Destacados zona central Los contenidos que pueden destacarse en la portada y en las portadillas de Centros,

Departamentos, Servicios y Grupos de Investigación son algo diferentes. A

continuación se explican cuáles son todos y en qué páginas pueden mostrarse.

11.1. Destacado últimas noticias en Portada

Ubicadas siempre al comienzo del contenido de la portada, pueden tener distintas

modalidades.

Una noticia con foto

- Fecha

- Título

- Entradilla

- Foto cuadrada obligatoria, de 185px de ancho (el alto puede variar,

amoldándose a la cantidad de texto que acompañe).




40

Dos noticias –con o sin foto-

- Fecha

- Título

- Entradilla

- Foto horizontal opcional de 185px de ancho por 75px de alto.




41

Una noticia destacada, dos sencillas

La noticia principal lleva foto cuadrada obligatoria de 185px de ancho (el alto puede

variar, amoldándose a la cantidad de texto que acompañe).

Las noticias sencillas no llevan foto.

11.2. Destacado de Galería en Portada

Es un bloque opcional en la portada. Incluye:

- Título de la galería

- Tres fotos horizontales de 120px de ancho y misma altura entre sí.

- Enlace al listado completo de la galería destacada




42

- Enlace a todas las galerías

11.3. Destacados con icono en Portada (y Portadillas)

Siempre debe haber un número par, 2 ó 4.

Son iguales a los destacados de la columna derecha.

Tienen texto con posibilidad de meter negritas (se mostrarían en rojo) y el icono debe ir

en blanco y negro.

11.4. Destacado libre en Portada

Sólo se utiliza en la portada del sitio web y siempre se ubica el último.

Consiste en una caja con un único título, y dentro dos destacados diferentes con

título e imagen. Puede incluir enlaces a páginas web o a documentos para

descarga (ficheros de vídeo, powerpoint, etc.).




43

-

11.5. Destacado de Tablón de anuncios en Portadilla de Centros

y Servicios

Se utiliza sólo en las portadillas de Centros y Servicios.

Es un listado con el número de anuncios que se quiera (se recomienda de 2 a 6

anuncios) ordenados por fecha, maquetado dentro de una caja:




44

11.6. Destacados de Noticias y agenda en Portadilla de Centros

y Departamentos

Las noticias y la agenda destacadas en las portadillas de Centros y Departamentos

cambian el modo de presentación, como se ilustra a continuación.




45




46

3. Funcionalidad de los menús y títulos

1. Menús

1.1. Menú general

Los menús de Perfiles y Universidad aparecen siempre en todo el web.

En la portada del sitio web aparecen desplegados, mostrando las secciones de primer

nivel de navegación o secciones principales del sitio web.

En las portadillas de Centros, Departamentos, Servicios y Grupos de Investigación, los

menús de Perfiles y Universidad aparecen plegados. Cuando el usuario pincha en

ellos, entonces se despliegan, para poder navegar directamente a secciones del web

fuera del microsite en el que se esté.




47

Una vez desplegados los menús de Universidad y/o Perfiles, al clicar cualquiera de las

secciones principales del web, se despliegan debajo las subsecciones que contiene

(los nodos de segundo nivel de navegación).

Si se clica cualquiera de ellas, se navegará a la misma, quedando marcada en el

menú., al tiempo que el menú de Perfiles queda recogido

Si el usuario se encuentra en una página del menú de Universidad y clica en el de

Perfiles, éste se deplegará. No obstante, hasta que no se navegue a otra página del

menú de Perfiles, el menú de Universidada que marqca la página en la que se está,

seguirá desplegado.




48

1.2. Menú de microsites

Los Microsites de Centros, Departamentos, Servicios y Grupos de Investigación tienen

un menú propio.




49

En esos casos, los menús de Perfiles y Universidad se recogen y el menú que se

muestra desplegado al acceder a la portadilla es el propio del microsite.

El menú del microsite muestra las secciones principales del mismo (nodos de priemr

nivel de navegación). Al clicar sobre cualquiera de ellas, si tiene subsecciones, éstas

se desplegarán. En caso contrario, se navegará directamente a la página

correspondiente.

En cualquier caso, al navegar a una página, la sección en la que se está queda

marcada en el menú.




50

Finalmente, si el usuario quiere volver al sitio web general de la Universidad desde el

microsite en el que está, sólo tiene que clicar en Perfiles o Universidad, y se

desplegarán las secciones principales del menú, para que pueda navegar directamente

a cualquiera de ellas desde el microsite.




51

1.3. Menús de navegación de 3º y 4º nivel

Tanto en el sitio web general como en los microsites, la jerarquía de secciones puede

tener hasta un cuarto nivel de navegación,




52

El tercer nivel de navegación siempre se muestra en forma de listado en la zona central

de contenidos.

Y en el caso de que haya cuarto nivel de navegación dentro de alguna de las

secciones de tercer nivel, éste cuarto nivel tendrá un menú secundario debajo de la

barra del título de la página (y antes de las herramientas de Ampliar/Reducir/Enviar a

un amigo/Imprimir/.




53




54

2. Títulos

1. Títulos de sección

Indica la sección en la que nos encontramos. Cambia de color (rojo-azul) según

estemos en zona Universidad o zona Perfiles, así como otros elementos de la página

como fondos o enlaces.




55

2. Títulos de microsites

En los microsites (Centros, Departamentos, Servicios y Grupos de Investigación), el

título de la sección va precedido del título del microsite, que llevará fondo rojo en el

caso de los Centros y Departamentos, y fondo gris en el de los Servicios y Grupos de

Investigación.

2. Título de página (pagina entera) Siempre que exista menú secundario, existirá también un título de página, ubicado

después de título de sección, menú secundario y herramientas.




56




57

4.Estilos genéricos 1. Logotipo

El logotipo lo encontramos en la esquina superior izquierda

Medidas: 160x79 pixeles

Nombre: en la carpeta imgs--- logo.upna.640.gif

2. Fuentes La fuente predeterminada es Arial,Helvetica,sans-serif para todo el web.

Arial es la predeterminada. Pero si algún usuario no tuviera esta fuente instalada, para

que la estructura del diseño no se rompa, la fuente se mostrará como Helvetica o como

otra fuente sin serifa.

El color genérico de la fuente es: #333 (un gris casi negro para que no vibre

demasiado.)

3. Enlaces El portal está dividido en dos grandes secciones: Perfiles y Universidad. Cada una de

estas secciones tiene un color para los enlaces:




58

Universidad

� enlaces: color:#d32e11;

� Visitados: color:#900;

� hover: color:#900;

Perfiles

� enlaces: color:#16c;

� visitados: color:#05a;

� hover: color:#900;

4. Titulares En los títulos de las páginas la fuente es:

Georgia,"Times New Roman",Times,serif

(igual que antes se ofrecen tres por si alguna de ellas no esta disponible en la maquina

del usuario).

Manual de estilo web UPNA v2...Manual de estilo del sitio web de la UPNA INFORMACIÓN CONFIDENCIAL...

Documents

Transcript of Manual de estilo web UPNA v2...Manual de estilo del sitio web de la UPNA INFORMACIÓN CONFIDENCIAL...