manual de estilo web upna v2...manual de estilo del sitio web de la upna informaciÓn confidencial...
TRANSCRIPT
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
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 3
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
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 4
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.
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 5
Los componentes para los distintos contenidos mencionados se describen en el
siguiente apartado del documento.
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 6
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,
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 7
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.
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 8
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 9
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
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.
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
11
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
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.
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
13
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
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.
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
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.
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
16
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
17
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
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.
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
19
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
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.
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
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.
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
22
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
23
5.2 Ficha de noticias
Es el contenido propio de la noticia en sí misma.
�
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
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).
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
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.
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
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.
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
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.
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
28
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
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).
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
30
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
31
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
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.
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
33
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
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.
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
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
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
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.
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
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
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
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.
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
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).
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
40
Dos noticias –con o sin foto-
- Fecha
- Título
- Entradilla
- Foto horizontal opcional de 185px de ancho por 75px de alto.
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
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
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
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.).
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
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:
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
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.
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
45
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
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é.
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
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.
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
48
1.2. Menú de microsites
Los Microsites de Centros, Departamentos, Servicios y Grupos de Investigación tienen
un menú propio.
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
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ú.
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
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.
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
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,
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
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/.
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
53
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
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.
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
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.
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
56
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
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:
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
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).