Divisa iT, S.A. Parque Tecnológico de Boecillo Parcela 129 - 47151 Boecillo Aplicacion-client – España

www.divisait.com Tel.: +34 983 546 600 Fax: +34 983 546 602 [email protected]

MANUAL DEL PORTAL FUNDACIÓN QUIRÓNSALUD: ROTATIVOS E IMÁGENES

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

Índice de contenidos 1

INTRODUCCIÓN .......................................................................................................................................... 3

2

ROTATIVO DE IMÁGENES PRINCIPAL .......................................................................................................... 3 2.1 2.2 2.3 2.4 2.5 2.6 2.7

3

ALINEACIÓN FINAL ................................................................................................................................... 3 POSICIÓN .................................................................................................................................................. 3 EFECTO DE ENTRADA ................................................................................................................................ 6 EFECTO DE SALIDA..................................................................................................................................... 6 ORDEN DE APARICIÓN ............................................................................................................................... 6 ANIMACIÓN DE ENTRADA ......................................................................................................................... 7 ANIMACIÓN DE SALIDA ............................................................................................................................. 7

TAMAÑOS DE IMÁGENES RECOMENDADOS ............................................................................................... 7 3.1 3.2 3.3 3.4 3.5 3.6 3.7

IMAGEN DEL CONTENIDO “NUESTROS PROYECTOS” ................................................................................ 8 IMAGEN DEL CONTENIDO “LA FUNDACIÓN EN NÚMEROS” ...................................................................... 8 IMAGEN LISTADO NORMAL CON IMAGEN ................................................................................................ 8 IMÁGENES DE LA AGENDA DE EVENTOS ................................................................................................... 8 IMÁGENES DEL CONTENDIO “NUESTRO BLOG” ........................................................................................ 8 IMAGEN DE LA CABECERA DEL CONTENIDO .............................................................................................. 8 IMAGEN DEL ROTATIVO EN MODO MOSAICO ........................................................................................... 8

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

1

INTRODUCCIÓN

El presente documento tiene como objetivo: 

Describir el uso básico del rotativo de imágenes principal, indicando las animaciones, transiciones y efectos que pueden tener cada uno de sus elementos.



Consideraciones a tener en cuenta en cuanto a proporciones y tamaño de las imágenes de la Web.

2

ROTATIVO DE IMÁGENES PRINCIPAL

Distinguiremos las siguientes partes: 

Imagen de fondo



Pretítulo



Título



Subtítulo

Cada uno de ellos tiene parámetros configurables a los que se puede acceder mediante el icono: A continuación se enumerarán los distintos parámetros que se pueden configurar, sus posibles valores y recomendaciones.

2.1 ALINEACIÓN FINAL Indica la alineación del texto una vez finalizada la animación. Hay tres posibles valores: left, center, right (izquierda, centrado y derecha)

2.2 POSICIÓN Lugar dentro de la imagen donde se situará el texto. Se indica mediante dos valores en pixeles separados por coma como si de una coordenada se tratara. El primer valor indica la posición respecto a la parte superior de la imagen y el segundo indica la posición hacia la izquierda que tendrá a partir de su punto de origen. Veamos un ejemplo sobre el primer valor:

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

1. Posición del pretítulo a 100,0

2. Posición del pretítulo a 0,0

Veamos un ejemplo del segundo valor: 1. Posición del pretítulo a 100,0

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

2. Posición del pretítulo a 100,200

Hay dos factores a tener en cuenta:  El tamaño de la fuente y el interlineado. Viendo el ejemplo anterior podemos pensar en cómo es que el título (“Ya nace”, “Aprende”) está con posición 0,0 viendo como aparentemente está en el medio de la imagen. Esto se debe a que tiene un tamaño de letra y un interlineado grande. Si este mismo texto estuviera con el tamaño del pretítulo tendríamos que indicar una posición de 200,0.  La alineación. El que el texto esté centrado, a la derecha o izquierda puede afectar a la hora de posicionar el segundo valor, el que tiene que ver con la posición hacia la izquierda del texto. En el segundo ejemplo, el texto del pretítulo está centrado, por lo que al indicar 200 como segundo valor decimos que se mueva 200 píxeles hacia la izquierda. Si esto mismo lo haríamos con un texto alineado a la derecha podríamos encontrarnos el caso en que el texto se saliera por la derecha y no lo veríamos al completo. En el siguiente ejemplo vemos que el título está alineado a la derecha y tiene una posición de 100,400

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

Valores recomendados:  Pretítulo: 100,0  Título: 0,0  Subtítulo: 320,0

2.3 EFECTO DE ENTRADA Efecto que hará el texto en su entrada en el slide. A continuación se explican las posibles opciones:          

Fade: el texto irá apareciendo poco a poco. None: sin efecto. Left: el texto viene de la izquierda. Topleft: el texto viene de arriba y de la izquierda. bottomLeft: el texto viene de abajo y de la izquierda. right: el texto viene de la derecha. topRight: el texto viene de arriba y la derecha. bottomRight: el texto viene de abajo y de la derecha. top: el texto viene de arriba. bottom: el texto viene de abajo.

2.4 EFECTO DE SALIDA Efecto que hará el texto en su salida del slider. Las opciones serán las mismas que en el caso anterior.

2.5 ORDEN DE APARICIÓN Orden en el que irán apareciendo los distintos elementos en el slider.

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes



Ejemplo 1: Pretítulo: 1 Título: 2 Subtítulo: 3 Irán apareciendo en orden, primero el pretítulo, luego el título y finalmente el subtítulo.



Ejemplo 2: Pretítulo: 2 Título: 1 Subtítulo: 2 Orden de aparición será: primero el título y luego el pretítulo y el subtítulo a la vez.

2.6 ANIMACIÓN DE ENTRADA Movimiento que tendrá el texto cuando entra en el slider. Tenemos cinco opciones posibles en las que algunas tratan la velocidad del movimiento y otras indican si tiene algún rebote el texto.

2.7 ANIMACIÓN DE SALIDA Movimiento que tendrá el texto cuando salga del slider. Tendremos las mismas opciones que en el caso anterior.

3

TAMAÑOS DE IMÁGENES RECOMENDADOS

Según sea el contenido y los listados tendremos distintas imágenes. Se indica a continuación el tamaño mínimo recomendado de cada una de ellas. Se dice lo de mínimo, ya que realmente el tamaño puede ser mayor, eso sí, manteniendo las mismas proporciones. En este punto hay que tener cuidado de que las imágenes estén optimizadas para que no pesen demasiado y ralenticen la carga de la página.

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.

Construyendo el futuro Manual del portal Fundación Quirónsalud: rotativos e imágenes

3.1 IMAGEN DEL CONTENIDO “NUESTROS PROYECTOS” Para las imágenes pequeñas que pueden salir, por ejemplo, en el listado con imagen pequeña como es el caso del contenido de “Nuestros proyectos” de la página principal se usarán imágenes de tamaño 44 x 44

3.2 IMAGEN DEL CONTENIDO “LA FUNDACIÓN EN NÚMEROS” Para las imágenes que aparecen con el formato en modo listado con imagen grande como es el caso del contenido “La fundación en números” de la página principal se usarán imágenes de tamaño 640 x 650

3.3 IMAGEN LISTADO NORMAL CON IMAGEN Para este caso las imágenes, independientemente del tamaño que tengan, se pondrán a un ancho de 140. Por lo que se recomienda que como mínimo tenga ese ancho para que no pierda calidad.

3.4 IMÁGENES DE LA AGENDA DE EVENTOS Para este contenido tenemos que tener en cuenta que dispondremos de varios tamaños. La primera imagen será la más grande y luego habrá 4 imágenes más pequeñas. Imagen grande: 454 x 470 Imágenes pequeñas: 217 x 225

3.5 IMÁGENES DEL CONTENDIO “NUESTRO BLOG” En este contenido se ve una pequeña muestra de las entradas del blog apareciendo en un círculo la imagen del autor de dicha entrada. Al aparecer en un círculo se recomienda que la imagen sea cuadrada para evitar distorsionar la imagen.

3.6 IMAGEN DE LA CABECERA DEL CONTENIDO Los contenidos principales cuentan con una imagen decorativa encima del título ocupando todo el ancho de la página. El tamaño mínimo recomendado es de 1170 x 258

3.7 IMAGEN DEL ROTATIVO EN MODO MOSAICO En contenidos como “Acción social” o “Educación” se cuenta con un rotativo de imágenes con una imagen grande y otras más pequeñas. Para que quede bien, es recomendable que todas las imágenes sean del mismo tamaño, para que cuando se reduzca el tamaño de las que serían las imágenes más pequeñas se mantenga ese efecto mosaico. El tamaño recomendado sería de 753 x 414

Este documento es documentación interna de Divisa iT Queda prohibida la copia total o parcial de este documento así como la utilización en otros sistemas, ofertas y proyectos de los enfoques aquí realizados sin la previa autorización de Divisa Informática y Telecomunicaciones S.A.