Por tanto, podemos tener un contenido creado a partir de una estructura (por ejemplo un banner) que puede adoptar diferentes disposiciones gráficas.

Transcripción

1 1

2 CONTENIDO DE LA GUÍA El siguiente documento pretende ser una guía de consulta sobre las diferentes opciones que ofrece la web de la Universidad de Navarra a la hora de disponer la información en sus diferentes páginas. En la guía se hace referencia, en primer lugar, a aquellas estructuras y plantillas más comunes que están a disposición del administrador web para configurar un sitio web. Entendemos por estructuras los tipos de contenido que conforman una página, mientras que por plantilla nos referimos a la disposición gráfica que ese tipo de contenido puede adoptar. Por tanto, podemos tener un contenido creado a partir de una estructura (por ejemplo un banner) que puede adoptar diferentes disposiciones gráficas. En el documento también se presentan las diferentes disposiciones de página o layouts que admite la web de la Universidad de Navarra. En total, más de 30 modelos de página para disponer la información. Por último, se incluye un apartado con los diferentes themes publicados hasta el momento en la web. 2

3 GLOSARIO Términos básicos que conviene conocer: ESTRUCTURA: Tipo de contenido que se puede insertar en cualquier página web (banner, carrusel de imágenes o vídeos, etc.) PLANTILLA: Modo de visualización o disposición gráfica del contenido. Para un mismo tipo de contenido (estructura) existen diferentes modos de visualización. LAYOUT: Disposición de página que establece cómo se distribuyen los contenidos dentro de una página web. TEMA: Diseño gráfico que se aplica a un sitio web (por ejemplo Asociación de Amigos, ICS, etc.) y que se concreta, normalmente, en algunas diferencias en cabecera y pie de página. ORGANIZACIONES: Cada sitio (véase una Facultad, microsite, etc.) se denomina organización. Si bien, en el caso de la web de la Universidad de Navarra también se contempla otra modalidad organizativa denominada comunidad que incluye los subportales (Estudios, Admisión y Ayudas, Investigación, Conoce la Universidad y Vida Universitaria) y todos los servicios. A efectos prácticos, no hay diferencias entre ambas modalidades.. 3

4 ÍNDICE ESTRUCTURAS Texto Libre.. 06 Banner Carruseles.. 14 Contenidos con imagen 23 Contenidos sin imagen.. 28 Botones 30 Enlaces 31 Enlaces repetibles. 32 Contacto. 33 Cifras 35 Experiencia campus. 36 Historia 37 Plataforma social.. 38 Vídeos.. 42 Síguenos. 43 Publicadores de contenidos FAQ. 44 FAQ desplegado.. 45 Persona.. 46 Contenido-unav. 47 Actividades y reuniones científicas 48 LAYOUTS Disposiciones de página Ejemplos de disposiciones de página.. 51 THEMES Tipología

5 5

6 TEXTO LIBRE: Estructura que se utiliza en el 90% de las páginas y que se compone de texto, con posibilidad de agregar cualquier imagen. El administrador web puede decidir mostrar sólo el título, título y/o cuerpo, o sólo cuerpo de texto. TextoLibreConLinea460 TextoLibreSoloTitulo460_P TextoLibreConLinea701Completa 6

7 TextoLibreConLinea701 TituloSinLinea TextoLibreConLinea940_P 7

8 TextoLibreSinTitulo TextoLibreSoloTituloLinea940 TextoLibreSoloTitulo980_P TextoLibreSoloTitulo701 TextoSinLineaInterior 8

9 TextoLineaSinLinea TituloConLineaPunteada DestacadosVU 9

10 BANNER: Destacado colocado normalmente en la zona lateral derecha de la página de un sitio web que enlaza a la información que se quiere promocionar. Los banners se darán de alta siguiendo la estructura Banner. El contenido puede ser dado de alta en cualquier comunidad. Por ejemplo, si existe un banner que sólo se va a utilizar en la comunicad Máster Medicina, el contenido se dará de alta en la propia organización Máster Medicina. En cambio, si un banner se utilizará en distintas comunidades, dicho contenido banner se dará de alta en una comunidad denominada Global, y cuyo contenido puede ser compartido por todas las organizaciones/comunidades. Para la estructura banner existen varias plantillas. Según el diseño del banner que se desee mostrar en la web, se seleccionará una u otra plantilla: MODELO 1 (Banner_tipo_1_P) MODELO 2 (Banner_tipo_2_imagen_lateral) 10

11 MODELO 3 (Banner_tipo_2_imagen_fondo) MODELO 4 (Banner_tipo_3) MODELO 5 (Banner_tipo_4_general) 11

12 MODELO 6 (Banner_tipo_4descarga_documento) MODELO 7 (Banner_tipo_4_imagen_superior) MODELO 8 (Banner_tipo_5_imagen_fondo) 12

13 Otros tipos de banner con disposición horizontal: MODELO 9 (Banner tipo 5 texto imagen) MODELO 10 (Banner_tipo_5_fondo_gris) 13

14 CARRUSELES: Un carrusel permite al administrador web mostrar una cantidad de imágenes o vídeos que son controlados por el usuario final. Los carruseles se clasifican principalmente en 3 tipos: 1.Carrusel con Principal 2.Carrusel Banner 3.Carrusel sin Principal 4. Carrusel actividades A continuación se detallan cada una de las plantillas realizadas para cada tipo de carrusel. CARRUSEL CON PRINCIPAL Tipo de carrusel que muestra siempre una imagen o vídeo principal con su contenido, que varía en función de la selección que haga el usuario. MODELO 1 (Carruselconprincipal1) 14

15 MODELO 2 (Carruselconprincipal2) Puede combinarse con o sin botones: 15

16 MODELO 3 (Carruselconprincipal3) 16

17 MODELO 4 (Carruselconprincipal_p4) MODELO 5 (CarruselMisionVisionValores_P) 17

18 CARRUSEL BANNER Tipo de carrusel que permite destacar varias informaciones en un único formato, permitiendo al usuario final navegar por ellas. MODELO 1 (CarruselHorizontalMultiple1_P) MODELO 2 (CarruselHorizontalMultiple2_P) MODELO 3 (CarruselIndividual1_P) 18

19 MODELO 4 (CarruselIndividual2_P) MODELO 5 (CarruselIndividual3_P) MODELO 6 (CarruselIndividual4_P) 19

20 CARRUSEL SIN PRINCIPAL Tipo de carrusel que permite destacar varias imágenes, permitiendo al usuario final navegar por ellas y acceder a las diferentes informaciones. MODELO 1 (CarruselSinPrincipalYoutubeFlickr_P) MODELO 2 (CarruselSiPrincipalImagenes_P) MODELO 3 (CarruselIndividual4_P) 20

21 OTROS CARRUSELES: ESTRUCTURA CARRUSEL ACTIVIDADES: Carrusel destinado, sobre todo, para el uso en homes o reportajes espaciales. ESTRUCTURA CARRUSEL IMAGEN TEXTO: Carrusel destinado, sobre todo, para el uso en homes o reportajes espaciales. 21

22 ESTRUCTURA ESTANCIAS SAN JOSEMARIA: Carrusel de doble navegación, donde cada uno de los elementos reflejados sobre fondo negro consta de diferentes fotografías. 22

23 CONTENIDOS CON IMAGEN: Estructura compuesta principalmente de texto e imagen, con sus correspondientes enlaces asociados. MODELO 1 (Contenido_ConImagen_tipoFAQ) MODELO 2 (Contenido_ConImagen_TituloTextoYEnlaces) MODELO 3 (Contenido_ConImagen_Documentos_P) 23

24 MODELO 4 (Contenido_ConImagen_BotonInferior) MODELO 5 (Contenido_ConImagen_IndividualListado3) MODELO 6 (Contenido_ConImagen_IndividualListado5) 24

25 MODELO 7 (Contenido_ConImagen_ImagenLateral) MODELO 8 (Contenido_ConImagen_IndividualListado1) MODELO 9 (Contenido_ConImagen_IndividualListado2) 25

26 MODELO 10 (Contenido_ConImagen_ImagenInvidiual2sinBorde) MODELO 11 (Contenido_ConImagen_ImagenLateral2) MODELO 12 (FondosPersonales) 26

27 MODELO 13 (Contenido_ConImagen_IndividualListado4) MODELO 14 (Contenido_ConImagen_BioSanJoseMaria) 27

28 CONTENIDOS SIN IMAGEN: Estructura compuesta principalmente de texto, con sus correspondientes enlaces asociados. MODELO 1 (Contenido_SinImagen_Mundo) MODELO 2 (Contenido_SinImagen_BotonesEnlaces_SinTitulo_P) MODELO 3 (Contenido_SinImagen_BotonesEnlaces_P) 28

29 MODELO 4 (Contenido_SinImagen_BotonesEnlaces_botonDerecha) MODELO 5 (Contenido_SinImagen_TextoEnlacesDocumentos_P) MODELO 6 (Contenido_SinImagen_DocumentosBotonesEnlaces_P) 29

30 BOTONES: Estructura que sirve para destacar el acceso a otros elementos de una forma más llamativa que un enlace meramente textual. MODELO 1 (Botones_ConFondo_P) MODELO 2 (Botones_SinFondo_P) 30

31 ENLACES: Estructura que sirve para destacar el acceso a elementos de otras páginas. MODELO 1 (Enlaces_PorColumnas_P_icono) MODELO 2 (EnlacesListadoCompuestoSinFondo_P) MODELO 3 (Enlaces_ListadoTituloYFondo_P) MODELO 4 (Enlaces_Departamentos_P) MODELO 5 (Enlaces_PorColumnas_P) 31

32 ENLACES REPETIBLES: Estructura que sirve para destacar el acceso a elementos de otras páginas con la posibilidad de agruparlos en diferentes bloques. 32

33 CONTACTO: Estructura que muestra datos de contacto para facilitar la interacción del usuario Contacto_ConFotografía_P ContactoVertical_Boton_P Contacto_Horizontal_BotonP 33

34 Contacto_SinEncabezado_P 34

35 CIFRAS: Estructura que sirve para mostrar la información de forma numérica PorcentajeYTexto_P CifraYTexto_P CifraYTextoSolo_P 35

36 EXPERIENCIA CAMPUS: Estructura que permite, mediante un desplegable, destacar una información de forma gráfica (imagen o vídeo) y mostrar algunos datos relacionados 36

37 HISTORIA: Estructura que actúa como una línea de tiempo temporal 37

38 PLATAFORMA SOCIAL: Estructura que permite la inserción de diferentes códigos para mostrar widget sociales en la web (Twitter, Youtube ) Twitter Google Maps 38

39 ISSU Linkedln 39

40 Instagram Flickr 40

41 Youtube Facebook 41

42 VÍDEOS: Estructura utilizada para mostrar un vídeo de forma independiente en página. Puede mostrar vídeos de Youtube o Vimeo, y cualquiera que se haya subido a la plataforma. Video_P SoloVideo_P 42

43 SÍGUENOS: Estructura que sirve para destacar el acceso a las redes sociales de cualquier organización. enlacessiguenos enlacessiguenospagina_p 43

44 LISTADOS DE PRESENTACIÓN MEDIANTE PUBLICADORES DE CONTENIDO Para mostrar listados (véanse listados de FAQ, contenidos en pestañas, listados de personas y, en general, todo tipo de listados de contenidos) el administrador web deberá hacerlo a través de lo que se denominan publicadores de contenidos. Estos publicadores permiten agrupar diferentes contenidos creados a partir de una estructura y mostrarlos, todos ellos, según una única vista de presentación. Creados a partir de la estructura FAQ LISTADO DE PRESENTACIÓN FAQ: EN PESTAÑAS: SIN PESTAÑAS: 44

45 LISTADO DE PRESENTACIÓN FAQ DESPLEGADO: 45

46 Creados a partir de la estructura Persona LISTADO DE PRESENTACIÓN PERSONA: 46

47 Creados a partir de la estructura texto libre, contenido con imagen LISTADO DE PRESENTACIÓN CONTENIDO-UNAV: 47

48 Creados a partir de la estructura actividades LISTADO ACTIVIDADES Y LISTADO REUNIONES: 48

49 49

50 DISPOSICIONES DE PÁGINA La web de la Universidad permite configurar los contenidos y disponerlos de acuerdo a las siguientes plantillas: 50

51 EJEMPLOS DE DISPOSICIONES DE PÁGINA La web de la Universidad de Navarra tienen a su disposición más de 30 layouts diferentes. Algunos ejemplos de uso son los siguientes: 1 column S 51

52 B C G 52

53 Q I P 53

54 R 54

55 55

56 TIPOLOGÍA Las diferentes organizaciones basan su diseño de acuerdo a temas. Estos son algunos de los que dispone la web de la Universidad de Navarra: PORTAL CORPORATIVO Ejemplo. Subportal de Admisión y Ayudas URL: El tema está disponible en los siguientes colores: 56

57 FACULTADES Ejemplo. Facultad de Medicina URL: El tema está disponible en los siguientes colores: 57

58 GRADOS Ejemplo. Grado en Administración y Dirección de Empresas URL: MÁSTERES Ejemplo. Máster en Estudios Contemporáneos URL: 58

59 DOCTORADOS Ejemplo. Doctorado en Comunicación URL: TITULOS PROPIOS Ejemplo. International Nutrition Certificate URL: 59

60 DEPARTAMENTOS, INSTITUTOS Y CÁTEDRAS Ejemplo. Proyectos Periodísticos URL: CONGRESOS 60

61 CENTROS 1 Ejemplo. Instituto Cultura y Sociedad URL: CENTROS 2 Ejemplo. Asociación de Amigos URL: 61

62 SERVICIOS Ejemplo. Comunicación Digital URL: REVISTAS CIENTÍFICAS Ejemplo. Estudios sobre educación URL: 62

63 MICROSITE INTERIOR DE PORTAL CORPORATIVO Ejemplo. Jornadas Experimenta URL: MICROSITE INTERIOR DE FACULTAD Ejemplo. International Seminar. Construcción con hormigón URL: 63

64 SITIO ESPECIAL 1 Ejemplo. A hombros de gigantes URL: El tema está disponible en los siguientes colores: SITIO ESPECIAL 2 Ejemplo. Grado de Ciencias Ambientales URL: 64

65 El tema está disponible en los siguientes colores: SITIO ESPECIAL 3 El tema está disponible en los siguientes colores: 65

66 66