Pamplona, 12 de diciembre, 2008 Manual de estilo Sitio web Universidad Pública de Navarra Versión 1.0
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 2
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 3
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. 4
Los componentes para los distintos contenidos mencionados se describen en el siguiente apartado del documento. 5
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, 6
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. 7
8
9
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. 10
11
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. 12
13
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. 14
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. 15
16
17
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. 18
19
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. 20
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. 21
22
5.2 Ficha de noticias Es el contenido propio de la noticia en sí misma. 23
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). 24
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. 25
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. 26
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. 27
28
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). 29
30
31
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. 32
33
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. 34
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 35
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. 36
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 37
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. 38
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). 39
Dos noticias con o sin foto- - Fecha - Título - Entradilla - Foto horizontal opcional de 185px de ancho por 75px de alto. 40
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 41
- 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.). 42
- 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: 43
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. 44
45
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é. 46
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. 47
1.2. Menú de microsites Los Microsites de Centros, Departamentos, Servicios y Grupos de Investigación tienen un menú propio. 48
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ú. 49
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. 50
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, 51
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/. 52
53
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. 54
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. 55
56
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: 57
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). 58