Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

Integració GECO – BIG: Formes de presentació que es mostren en col�leccions, galeries i elements multimèdia 02.10.2012

Versió 1.0

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

2

Informació del document

Informació

Nom del document OTGENCAT_GECO_IMMU_FPs_BIG.doc

Grup de documentació GECO – Manuals d’ús

Data de creació 02/10/2012

Històric de modificacions

Versió Acció Realitzada per Data Modificacions

1.0 Creació Albert Navarro 02/10/2012

1.1 Modificació Albert Navarro 16/11/2012 Formulari d’enviament de dades

1.2 Modificació Albert Navarro 23/04/2013

S’elimina del manual la forma de presentació “fw_fp_galeria_big”

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

3

Índex de contingut

1.1 Forma de presentació “Multimèdies BIG” (fw_fp_multimedies_BIG) ..................................................... 5

1.1.1 Descripció general .............................................................. 5 1.1.2 Tipus de continguts que es mostren .................................... 5 1.1.3 Explicació gràfica de la forma de presentació ..................... 6 1.1.3.1 Col�leccions ...................................................................... 6 1.1.3.2 Galeries ............................................................................ 7 1.1.3.3 Element multimèdia (Detall) ............................................ 10 1.1.3.4 Formulari d’enviament de dades (opcional) .................... 11

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

4

Introducció

Aquest manual ha de servir d’ajuda per poder mostrar elements multimèdia procedents de la plataforma BIG (vídeos, imatges i àudios) i també els contenidors de grups d’elements (col�leccions i galeries) als portals GECO.

Actualment hi ha quatre formes de presentació disponibles per poder mostrar aquests elements:

• Forma de presentació “Multimèdies BIG” (fw_fp_multimedies_BIG)

La configuració de cadascun d’aquests components és diferent depenent del component de presentació configurat. A continuació es descriu com s’ha de configurar i com es mostra gràficament cada un d’aquests components.

Per mostrar col�leccions, galeries i multimèdies del Banc Iconogràfic de la

Generalitat de Catalunya (BIG) es recomana utilitzar la forma de presentació

genèrica “Multimèdies BIG” (fw_fp_multimedies_BIG).

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

5

Formes de presentació genèriques

1.1 Forma de presentació “Multimèdies BIG”

(fw_fp_multimedies_BIG)

1.1.1 Descripció general

Forma de presentació que mostra col�leccions (conjunt de galeries), galeries (llista d’elements multimèdia: imatges i vídeos) i el detall dels elements multimèdia, que provenen de BIG. A la llista de col�leccions, es mostra la imatge principal de la galeria i el seu nom, enllaçable a la llista de multimèdies d’aquella galeria. La presentació dels elements multimèdia d’una galeria mostra la llista d’imatges, ordenades cronològicament per data de publicació. Passant per sobre de la imatge amb el ratolí, aquesta s’amplia i mostra el títol i l’autor, enllaçable al detall del multimèdia, que es mostra en una finestra emergent.

El detall del multimèdia mostra els camps següents del BIG: títol, descripció, autor, responsable, data de publicació i mida.

1.1.2 Tipus de continguts que es mostren

Aquesta forma de presentació pot mostrar col�leccions, galeries i elements

multimèdia (vídeos i imatges) directament des de la plataforma BIG (Banc Iconogràfic de la Generalitat).

Aquesta forma de presentació únicament es pot configurar amb un component de presentació de tipus “Galeria Multimèdia”.

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

6

1.1.3 Explicació gràfica de la forma de presentació

1.1.3.1 Col�leccions

La presentació de col�leccions es mostra de la manera següent:

Figura 1. Presentació d’una col�lecció.

1. Les galeries es mostren distribuïdes horitzontalment, aprofitant tota l’amplada de l’àrea de presentació. Es mostren en una capa fixa d’uns 620 px d’amplada mínima amb un contorn d’1 px de color gris.

2. Es mostra el títol de la col�lecció amb la font Arial en negreta i una mida de 17 px, en color #660303.

3. Es mostra la imatge principal de cada galeria enllaçable al detall de la galeria. Amb una amplada màxima de 183 px i una alçada de 122 px.

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

7

4. Al peu de la imatge es mostra el nom de la galeria enllaçable també al detall de la galeria, amb la font Arial en negreta i una mida de 12 px, color: #AC2115.

5. A sota del nom de la galeria es mostra la descripció, no enllaçable, amb la font Arial amb una mida d’11 px i de color negre.

1.1.3.2 Galeries

La presentació de galeries es mostra de la manera següent:

Figura 2. Presentació d’una galeria.

1. Els elements multimèdia es mostren distribuïts horitzontalment, aprofitant tota l’amplada de l’àrea de presentació. Es mostren en una capa fixa d’uns 620 px d’amplada mínima amb un contorn que simula el mateix estil que la capa “colorbox”.

2. Es mostra el títol de la galeria amb la font Arial en negreta i una mida de 17 px, en color #660303.

3. Es mostra la imatge de “preview” de cada element multimèdia amb una mida màxima de 120 px d’amplada i 78 px d’alçada. En seleccionar (hover) un

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

8

element de la galeria es mostra una caixa que mostra, a part de la imatge de “preview”, el títol de l’element multimèdia i l’autor.

En cas que es tracti d’un vídeo, es mostra la icona per indicar que es tracta d’un vídeo i no d’una imatge.

4. Es mostren els elements actuals del total d’elements de la galeria.

5. Si s’ha accedit a la galeria des d’una col�lecció, es mostra l’enllaç “Torna” que retorna a la col�lecció original.

6. Es mostra l’enllaç “Mostra els següents”, que fa la paginació Ajax a la pàgina següent. Cada cop que es faci paginació es mostrarà el missatge:

7. Quan es carrega la pàgina següent es mostra el número de pàgina a la part superior del grup d’imatges:

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

9

Figura 3. Presentació d’una galeria. Paginació.

8. La forma de presentació permet paginar fins que s’arriba al total d’elements de la galeria.

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

10

1.1.3.3 Element multimèdia (Detall)

Per mostrar un element multimèdia es mostra de la manera següent:

Figura 4. Presentació d’un element multimèdia (colorbox).

1. En clicar a sobre d’un element multimèdia a la galeria, s’obre una caixa “colorbox” amb la informació següent:

- Títol de l’element multimèdia (Arial 24 px i color #660303)

2. Es mostra el títol de la galeria amb la font Arial en negreta i una mida de 17 px, en color #660303.

3. Es mostra un filet gris de separació entre el títol i la imatge d’un píxel amb puntets.

4. Es mostra el detall de la imatge o el vídeo amb una amplada màxima de 520 px i una alçada màxima de 293 px.

5. Es mostra la descripció de l’element multimèdia amb font Verdana de 12 px, en color #4D4D4D.

6. Es mostra l’autor de l’element multimèdia (si s’indica).

7. Es mostra la data de publicació de l’element multimèdia (si s’indica).

8. Es mostra la mida original de l’element multimèdia (si s’indica).

9. Es mostra un enllaç que mostra una capa emergent amb les condicions d’ús:

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

11

“Avís: Es poden utilitzar les imatges i vídeos que estiguin subjectes a una llicència que així ho permeti (per exemple llicències Creative Commons). En cas de dubte, cal consultar l’organisme que apareix com a autor.”

10. Finalment, sota un altre filet de separació com el del títol es mostren els enllaços: “Anterior” i “Següent” que serveixen per navegar entre imatges sense haver de tornar a la galeria.

11. Es mostren els enllaços de compartició amb xarxes socials juntament amb el botó “Imprimeix” a la part inferior dreta del component “colorbox”.

NOTA: Aquesta forma de presentació també és funcional sense JavaScript actiu

al navegador.

1.1.3.4 Formulari d’enviament de dades (opcional)

Si es vol mostrar el formulari d’enviament de dades cal seguir els passos de l’apartat “Formulari d’enviament de dades” al document d’ús del component de presentació “Galeria Multimèdia”:

GENCATpèdia > Solucions corporatives > GECO > Usuaris > Manuals d’ús del GECO > Integracions > Integració BIG > Ús Galeria Multimèdia

A continuació es descriu com es presenta un detall de contingut multimèdia en cas que s’inclogui un formulari d’enviament de dades a la mateixa pàgina.

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

12

Es mostra un botó just a sota dels camps de descripció, data de publicació, autor i mida de l’element multimèdia. Aquest botó mostra el text: “Envieu-nos informació” (tipologia de font).