Component de presentació Galeria Multimèdia · associada com a presentació en mode Default –...

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

Component de presentació Galeria Multimèdia 23 d’octubre de 2012

Versió 4.0

Oficina tècnica GECO Pàgina 2 de 24

Informació del document

Informació

Nom del document OtGencat_GECO_IMMU_Galeria_Multimedia_Funcional_BIG.doc

Grup de documentació OTGECO - SiteGeneric

Data de creació 25/09/2008

Estat Validat

Històric de modificacions

Versió Acció Realitzada per Data Modificacions

1.0 Creació Alex Ares Javier Baez Santos

25/09/2008

2.0 Modificació Pietro Chiappetta 04/03/2009

Configuració de la galeria multimèdia utilitzant els tipus de contingut Galeria Multimèdia i Detall Multimèdia

3.0 Modificació Pietro Chiappetta 20/12/2009 Ha estat eliminat el paràgraf 1.2 i s’han afegit notes

3.1 Modificació Albert Navarro 25/05/2010 Nous noms de formes de presentació

4.0 Modificació Albert Navarro 05/11/2012

Actualització del manual amb la referència al nou manual de les formes de presentació

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


Índex

1. Introducció ............................................................................................................ 4 1.1. Context tecnològic .................................................................................................... 4 2. Descripció .............................................................................................................. 5 2.1. Configuració del component Galeria Multimèdia ............................................................ 5 2.1.1. Component de presentació en mode Default ................................................................ 6 2.1.1.1.Pestanya principal .................................................................................................... 6 2.1.1.2.Pestanya de paginació ............................................................................................... 7 2.1.1.3.Pestanya de refresc .................................................................................................. 8 2.1.2. Component de presentació en mode Detall .................................................................. 9 2.1.2.1.Pestanya principal .................................................................................................... 9 3. Formes de presentació compatibles i configuració .............................................. 11 3.1. Configuració per a mostrar col�leccions amb la forma de presentació “fw_fp_colleccio_big” 11 3.2. Configuració per mostrar galeries amb la forma de presentació “fw_fp_galeria_big” ........ 13 3.3. Configuració per mostrar el detall d’un element multimèdia amb la forma de presentació “fw_fp_galeria_big_detall” .................................................................................................. 15 3.4. Configuració per mostrar col�leccions amb la forma de presentació “fw_fp_multimedies_BIG” ................................................................................................... 16


1. Introducció

L’objectiu essencial d’aquest document és informar sobre el funcionament de la Galeria Multimèdia BIG del GECO i com aquesta es pot fer servir i configurar correctament en portals genèrics de la Generalitat de Catalunya. A més, el document pretén definir clarament totes les opcions que es poden dur a terme amb aquesta funcionalitat de galeria multimèdia.

1.1. Context tecnològic

La Galeria Multimèdia és un nou element del framework del GECO que proporciona una eina visual per configurar cerques d’elements multimèdia que resideixen al BIG i que es volen presentar als llocs web del GECO.

Abans, per mostrar una llista d’elements multimèdia del sistema BIG s’utilitzava el component de presentació HTTPFetch, però aquest component està totalment desaconsellat per l’OTgencat. Per mostrar una galeria d’elements multimèdia, sempre s’ha d’utilitzar el component de presentació Galeria Multimèdia. Tots els portals que encara tinguin configurat un component HTTPFetch per fer servir una galeria d’elements multimèdia haurien de passar a utilitzar el nou component.


2. Descripció

S’ha evolucionat el GECO incorporant la funcionalitat de Galeria Multimèdia, un mètode nou per visualitzar una galeria amb la possibilitat de combinar imatges, vídeos i àudio. Ara per ara, per recuperar les informacions sobre els elements multimèdia que es mostraran a la galeria, cal establir una petició contra el sistema BIG de la Generalitat, el qual retorna una sèrie de dades de diferents recursos multimèdia en format XML. Per executar aquesta petició es pot utilitzar el nou Widget BIG o el component HTTPFetch (desaconsellable). Les noves formes de presentació dels portals genèrics processen aquesta informació XML de tornada i pinten la galeria final que es visualitza al portal.

Aquestes són les formes de presentació compatibles amb el component de presentació “Galeria Multimèdia”:

• fw_fp_colleccio_big (/Framework/Formes de Presentacio/Site generic)

• fw_fp_galeria_big (/Framework/Formes de Presentacio/Site generic)

• fw_fp_galeria_big_detall (/Framework/Formes de Presentacio/Site generic)

• fw_fp_multimedies_BIG (/Framework/Formes de Presentacio/Site generic)

Visualment, es diferenciaran dues parts importants:

• Galeria BIG GECO Multimèdia.

• Galeria BIG GECO Multimèdia detall imatges.

NOTA: Per a més informació sobre les formes de presentació genèriques “fw_fp_galeria_big” i “fw_fp_galeria_big_detall”, consulteu la GENCATpèdia:

• GENCATpèdia > Solucions corporatives > GECO > Usuaris > Manuals d’ús del GECO > Formes de presentació > Integració GECO – BIG: Manual de formes de presentació

2.1. Configuració del component Galeria Multimèdia

Per tal de configurar tècnicament la pàgina del portal on volem mostrar la galeria multimèdia, cal associar al canal una plantilla de presentació en format Default i una altra plantilla en format Detall.

Figura 1. Channel que estem configurant.

Perquè això sigui així s’ha d’anar al channel de VCM on es vulgui configurar la galeria multimèdia i allà, a la pestanya Presentation, configurar una plantilla de presentació amb el format de Default i una altra amb format Detall, amb una presentation template cada una, que ens porti cap a una pàgina on hi hagi un portlet configurat amb el component de presentació Galeria Multimèdia.


A continuació es mostra un exemple de com quedaria configurada la pestanya Presentation del channel que estem configurant.

Figura 2. Exemple de la pestanya Presentation del channel que estem configurant.

És també molt important tenir clar que pel que fa al gestor de continguts corporatiu VCM, cal que a la instància Canals del canal on està configurada la galeria s’associïn per al multiidioma de treball en qüestió els fitxers del GECO següents:

• /Contenidor/Framework/estilos y scripts/NUEVOS Estilos, imagenes y js/Globals/FW_estilsGaleriaBIG.css

• /Contenidor /Framework/estilos y scripts/NUEVOS Estilos, imagenes y js/js/fw_sf_galeria_multimedia.js

2.1.1. Component de presentació en mode Default

Cal configurar el component de presentació Galeria Multimèdia a la plantilla associada com a presentació en mode Default del channel. El quadre de configuració del component de presentació Galeria Multimèdia està organitzat en pestanyes. Els atributs obligatoris estan marcats en negreta.

2.1.1.1. Pestanya principal

A la pestanya principal es poden configurar els atributs següents:

• Àlies: descripció interna de la galeria multimèdia al gestor de continguts.

• Forma de presentació: contingut on es defineix el disseny de la galeria multimèdia. S’ha de configurar amb el valor: fw_fp_galeria_big.

• Multimèdies BIG: permet configurar cerques d’elements multimèdia al Banc Iconogràfic Multimèdia de la Generalitat de Catalunya. Vegeu: http://www20.gencat.cat/portal/site/gecopedia/menuitem.890bfc7148764780a9880b10b031e1a0/?vgnextoid=87b9fb4174eda110VgnVCM1000000b131e0aRCRD&vgnextchannel=87b


9fb4174eda110VgnVCM1000000b131e0aRCRD&vgnextfmt=detall&contentid=d529be65166df110VgnVCM1000008d0c1e0aRCRD

A continuació es mostra un exemple d’aquesta configuració:

Figura 3. Configuració del component de presentació Galeria Multimèdia a la plantilla associada com a presentació en mode Default – Pestanya Principal.

2.1.1.2. Pestanya de paginació


• Paginació: indica si es vol paginar la llista de resultats. Si no està activada la paginació, el component mostrarà com a màxim 50 elements.

• Nombre de pàgines enllaçables: nombre de pàgines que es poden enllaçar directament des del peu de la paginació (per exemple, si indiquem 3 pàgines el resultat seria: Anterior 1 | 2 | 3 Següent). En cas que no s’indiqui aquest valor, s’agafa el valor per defecte, que és cinc.

• Nombre de continguts per pàgina: nombre màxim de continguts que es mostraran en cada pàgina de resultats. En cas que no s’indiqui aquest valor, s’agafa el valor per defecte, que és dotze.


Botó per

executar la

cerca.

Icona que mostra el

missatge d’ajuda en

passar-hi el ratolí.

Botó per netejar els

resultats de la cerca.


Figura 4. Configuració del component de presentació Galeria Multimèdia a la plantilla associada com a presentació en mode Default – Pestanya Paginació.

2.1.1.3. Pestanya de refresc


• Temps de refresc: freqüència d’actualització de les dades en l’entorn de difusió (per exemple, si indiquem 10, la llista de resultats s’actualitzarà cada 10 segons en l’entorn de difusió).



Figura 5. Configuració del component de presentació Galeria Multimèdia a la plantilla associada com a presentació en mode Default – Pestanya Refresc.

2.1.2. Component de presentació en mode Detall

Configurar el component de presentació Detall Multimèdia a la plantilla associada com a presentació en mode Detall del channel. El quadre de configuració del component de presentació Galeria Multimèdia està organitzat en pestanyes. Els atributs obligatoris estan marcats en negreta.

2.1.2.1. Pestanya principal


• Àlies: descripció interna de la galeria multimèdia al gestor de continguts.

• Forma de presentació: contingut on es defineix el disseny de la galeria multimèdia. S’ha de configurar amb el valor: fw_fp_galeria_big_detall.

• Temps de refresc: freqüència d’actualització de les dades en l’entorn de difusió (per exemple, si indiquem 10, la llista de resultats s’actualitzarà cada 10 segons en l’entorn de difusió).



Figura 6. Configuració del component de presentació Detall Multimèdia a la plantilla associada com a presentació en mode Detall – Pestanya Principal.


3. Formes de presentació compatibles i configuració

3.1. Configuració per mostrar col�leccions amb la forma de presentació “fw_fp_colleccio_big”

Pas 1. Per mostrar col�leccions amb el component de presentació “Galeria Multimèdia” cal configurar tres formats de presentació al mateix canal:

• Format “default”: mostrarà el detall de la col�lecció (distribució de galeries).

• Format “detall”: mostrarà el detall de cada galeria (distribució d’elements multimèdia).

• Format “detall2”: mostrarà el detall de cada element multimèdia.

Exemple:

Figura 7. Format de presentació “fw_fp_colleccio_big”.

Pas 2. Al portlet de la pàgina on es vol mostrar la col�lecció s’ha de seleccionar un component de presentació de tipus “Galeria Multimèdia”:

Figura 8. Editar el portlet.


Figura 9. Seleccionar el component de presentació “Galeria Multimèdia”.

NOTA: Per a més informació sobre el component de presentació “Galeria Multimèdia”, es pot consultar la GENCATpèdia:

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

Pas 3: Al widget de selecció BIG, cal seleccionar una col�lecció tot indicant el nom d’usuari propietari de la col�lecció. Per a més informació sobre la configuració de col�leccions amb el widget de selecció BIG, es pot consultar la GENCATpèdia:

GENCATpèdia > Solucions corporatives > GECO > Usuaris > Manuals d’ús de GECO > Integracions > Integració BIG > Ús Galeria Multimedia > Manual d’ús widget de cerques BIG (apartat 2.3)

Pas 4: Al component de presentació, al camp “Presentació > Forma de presentació”, cal cercar “fw_fp_colleccio_big” i acceptar per configurar-la.


Figura 10. Forma de presentació “fw_fp_collecio_big”.

Pas 5. Un cop seleccionada la col�lecció, cal indicar si es vol configurar paginació per mostrar les galeries.

NOTA: La configuració de paginació s’aplicarà a les galeries i no a les col�leccions. Les col�leccions sempre mostraran totes les galeries a la mateixa pàgina.

Pas 6. Per als formats de “detall” i “detall2” s’han de configurar els components de presentació “Galeria Multimèdia” i “Detall multimèdia” respectivament per mostrar la galeria i el detall de l’element multimèdia (seguir els passos dels apartats ¡Error! No se encuentra el origen de la referencia. i ¡Error! No se encuentra el origen de la referencia.)

3.2. Configuració per mostrar galeries amb la forma de presentació “fw_fp_galeria_big”





NOTA: Per a més informació sobre el component de presentació “Galeria Multimèdia”, es pot consultar la GENCATpèdia:

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

Pas 2. Al widget de selecció BIG, cal seleccionar una galeria tot indicant el nom d’usuari propietari de la col�lecció. Per a més informació sobre la configuració de galeries amb el widget de selecció BIG, es pot consultar la GENCATpèdia:

GENCATpèdia > Solucions corporatives > GECO > Usuaris > Manuals d’ús de GECO > Integracions > Integració BIG > Ús Galeria Multimèdia > Manual d’ús widget de cerques BIG (apartat 2.3)

Pas 3. Al component de presentació, al camp “Presentació > Forma de presentació”, cal cercar “fw_fp_galeria_big” i acceptar per configurar-la.


3.3. Configuració per mostrar el detall d’un element multimèdia amb la forma de presentació “fw_fp_galeria_big_detall”

Pas 1. Al portlet de la pàgina on es vol mostrar la col�lecció s’ha de seleccionar un component de presentació de tipus “Detall Multimèdia”:


Figura 14. Seleccionar el component de presentació “Detall Multimèdia”.

Pas 2. Al camp “forma de presentació”, cal configurar:

• fw_fp_galeria_big_detall

Pas 3. És també molt important tenir clar que, pel que fa al gestor de continguts corporatiu VCM, cal que a la instància Canals del canal on està configurada la galeria s’associï per al multiidioma de treball en qüestió el fitxer CSS del GECO següent:



3.4. Configuració per mostrar col�leccions amb la forma de presentació “fw_fp_multimedies_BIG”




Pas 2. Al widget de selecció BIG, cal seleccionar una col�lecció tot indicant el nom d’usuari propietari de la col�lecció. Per a més informació sobre la configuració de col�leccions amb el widget de selecció BIG, es pot consultar la GENCATpèdia:

GENCATpèdia > Solucions corporatives > GECO > Usuaris > Manuals d’ús de GECO > Integracions > Integració BIG > Ús Galeria Multimèdia > Manual d’ús widget de cerques BIG (apartat 2.3)

Pas 3. Un cop seleccionada la col�lecció, cal indicar si es vol configurar paginació per mostrar les galeries.

NOTA: La configuració de paginació s’aplicarà a les galeries i no a les col�leccions. Les col�leccions sempre mostraran totes les galeries a la mateixa pàgina.


Figura 17. Configuració de la paginació.

NOTA: Es recomana configurar una paginació de 12 elements per pàgina, ja que d’aquesta manera es distribuiran uniformement tots els elements multimèdia a l’àrea de presentació, tant si hi ha destacats a la part dreta de la pàgina com si no n’hi ha.

Pas 6. Al camp “forma de presentació”, cal configurar:

• fw_fp_multimedies_BIG

Pas 7. És també molt important tenir clar que pel que fa al gestor de continguts corporatiu VCM, cal que a la instància Canals del canal on està configurada la galeria s’associï per al multiidioma de treball en qüestió el fitxer CSS del GECO següent:


Formulari d’enviament de dades

La forma de presentació genèrica “Multimèdies BIG” es pot integrar a la mateixa pàgina amb un formulari per a l’enviament de dades. Les dades seran relacionades amb qualsevol element multimèdia a la galeria consultada, ja que s’informarà l’identificador de l’element multimèdia automàticament. A continuació s’enumeren els passos necessaris per mostrar un component de presentació “Galeria Multimèdia” integrat amb un formulari d’enviament de dades a la mateixa pàgina (NOTA: És important que la pàgina tingui més d’un portlet disponible, un per a la galeria i un altre per al formulari).


El formulari pot ser de dos tipus: Formulari GECO integrat amb Formularis gencat o una instància de contingut de tipus HTML. A continuació s’enumeren els passos necessaris per poder configurar un formulari d’enviament de dades en format HTML:

1. Crear una instància de contingut HTML per a la capçalera del formulari (opcional).

2. Crear un component de presentació “Galeria Multimèdia” per configurar la col�lecció o la galeria.

3. Crear una instància de contingut HTML per al formulari d’enviament.

A continuació es mostra un exemple de configuració d’una col�lecció BIG amb un formulari d’enviament de dades a la mateixa pàgina (es fan servir 3 portlets):

Àrea 1: Capçalera d’enviament de dades (opcional). A l’àrea corresponent a aquest portlet s’ha configurat un component de presentació “Llista manual o automàtica de continguts” amb una instància de contingut HTML i amb la forma de presentació “fw_fp_HTML”. Aquesta capçalera és opcional, però pot servir per localitzar ràpidament el formulari d’enviament (normalment a la part inferior de la pàgina) si la col�lecció té moltes galeries, ja que se situarà a la part inferior de la pàgina i, si hi ha una barra de desplaçament, no es veurà a simple vista.

Quan es mostra una galeria, aquest mateix portlet mostrarà un botó que posicionarà l’usuari al formulari d’enviament de dades. Perquè el botó funcioni correctament ha de tenir el format HTML següent:


<input type="button" align="middle" value="Envieu-nos informació" title="Envieu-nos informació" alt="Envieu-nos informació" id="anchorEnviaDades">

NOTA: Els valors multiidioma i els estils són opcionals. L’únic important és que ha de tenir l’identificador “anchorEnviaDades”.

Àrea 2: Col�lecció o galeria multimèdia. A l’àrea corresponent a aquest portlet s’ha configurat un component de presentació “Galeria Multimèdia” amb una col�lecció o galeria. Cal seguir els passos del punt 3.4 per crear un component de presentació “Galeria Multimèdia” nou amb la forma de presentació “Multimèdies BIG”. Aquest es pot configurar per mostrar una col�lecció o una galeria.

Àrea 3: Formulari d’enviament de dades. Un cop configurat el component de presentació “Galeria Multimèdia”, cal configurar un segon portlet a la mateixa pàgina (pot tenir “scope page” o “scope template”) que contingui el formulari en format HTML. L’únic requisit que ha de tenir el formulari és:

- El contingut HTML del formulari s’ha d’englobar dins d’una capa (<div>) amb identificador igual a “formulariEnviaDades”. Exemple:

<div id=”formulariEnviaDades”>

Contingut HTML del formulari

</div>

NOTA: Aquest formulari s’ocultarà automàticament si es mostra una col�lecció. En accedir a una galeria aquest formulari es mostrarà i l’identificador de la imatge seleccionada serà el primer de la llista de la galeria.


A continuació es mostra la visualització d’una pàgina en consultar una galeria:


Àrea 1: Capçalera d’enviament de dades (opcional). Es mostra el text d’introducció amb el botó que fa la funció d’àncora al formulari d’enviament de dades:

Àrea 2: Col�lecció o galeria multimèdia. Es mostra la galeria consultada:

En consultar el detall d’un element multimèdia, si existeix el formulari (identificador formulariEnviaDades) es mostra un botó “àncora” que posiciona l’usuari directament al formulari d’enviament de dades (amb l’identificador únic de l’element multimèdia consultat). Exemple:


Àrea 3: Formulari d’enviament de dades. Es mostra el contingut del formulari.


Per configurar la forma de presentació “Multimèdies BIG” juntament amb un formulari de tipus Formularis GECO:

1. Cal crear el formulari a Formularis Gencat. Aquest formulari ha de tenir un camp amb nom “identificadorImatge”. D’aquesta manera la forma de presentació detectarà automàticament que ha de mostrar el botó d’enviament de dades.

La forma de presentació detectarà que existeix un formulari d’enviament a la mateixa pàgina i mostrarà el botó “Envieu-nos informació” al detall d’un element multimèdia.

Component de presentació Galeria Multimèdia · associada com a presentació en mode Default –...

Documents

Transcript of Component de presentació Galeria Multimèdia · associada com a presentació en mode Default –...