otgencat geco immu manual funcional de creacio de ... · es poden triar diferents composicions:...

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

Manual de creació de butlletins electrònics corporatius amb GECO1 Maig 2011

1 Aquest manual es complementa amb el Manual d’administració de la solució gencat per a

butlletins electrònics


2

Index de contingut

NOU TIPUS DE CONTINGUT “BUTLLETINS” ................................................. 3

ESTRUCTURA DEL BUTLLETÍ ........................................................................ 5

NOU TIPUS DE CONTINGUT NOTICIES_BUTLLETINS .................................. 7

ELEMENTS PERSONALITZABLES DEL DISSENY CORPORATIU ................ 7

Color ........................................................................................................ 7

Imatge capçalera (opcional) .................................................................. 8

CONFIGURACIÓ DELS BUTLLETINS (INFORMACIÓ PER A WEBMASTERS) .............................................................................................. 10

Pas 1. Associar les Presentation Templates ..................................... 10

Pas 2. Associar les CSS ...................................................................... 11

Pas 3. Crear una instància de tipus de contingut Butlletins ............ 12

Pas 4. Configuració dels portlets ....................................................... 13

PROCÉS DE CREACIÓ D’UNA INSTÀNCIA DE TIPUS DE CONTINGUT BUTLLETINS (INFORMACIÓ PER A REDACTORS-VALIDADORS) ............. 33

Camps a emplenar del tipus de contingut Butlletins ........................ 33

PARÀMETRES A INCLOURE EN L’URL DEL BUTLLETÍ (INFORMACIÓ PER A ADMINISTRADORS DE L’EINA D’ENVIAMENT DELS BUTLLETINS) ...... 44


3

Nou tipus de contingut “Butlletins”

Amb l’objectiu de facilitar la creació de butlletins electrònics amb GECO, s’ha creat un nou tipus de contingut específic: Butlletins. Conté tots els camps i elements per cobrir les necessitats comunicatives dels butlletins electrònics: personalització, integració de logotips, enllaços, bàners,...

Com a millores funcionals i gràfiques destaquem:

� Si un portal ja està creant els seus butlletins amb GECO, podrà configurar fàcilment el nou butlletí des de l’entorn de producció, seguint les instruccions de l’apartat Configuració dels butlletins (informació per a webmasters).

� Es deixa d’utilitzar el contingut Articles per a la creació de butlletins i s’utilitza un d’específic que facilita la introducció de continguts.

� Se suporta el multiidioma (veure apartat Paràmetres a incloure en l’url del butlletí que s’enganxa a l’eina d’enviament).

� Es veuen bé en tots els gestors de correu (fins ara no es veien bé en els gestors de tipus webmail).


4


5

Estructura del butlletí

Funcionalment els butlletins de GECO es configuren utilitzant el tipus de contingut Butlletins; només dos elements formen part de la plantilla (GRID) i no es poden canviar:

� El logotip de gencat amb el filet vermell de sota.

� El copyright de la Generalitat de Catalunya, al peu de pàgina, amb l’enllaç corresponent segons l’idioma del butlletí (http://www.gencat.cat/web/cat/copyright.htm).

La resta d’elements corresponen a les diferents seccions del tipus de contingut Butlletins:


6

Principal i capçalera

Blocs de contingut

Continguts relacionats

Bàners

Avisos

Peu


7

Nou tipus de contingut Noticies_butlletins

S’ha incorporat al GECO un nou tipus de contingut: Noticies_butlletins (/Banc de treball/Definicions de tipus de contingut/Framework) que permet construir notícies per afegir-les a la part central dels butlletins. Amb aquest nou tipus de contingut es poden incloure dins d’una notícia d’un butlletí enllaços dins del text, negretes, llistes... i solucionar les mancances d’edició que tenien els tipus de contingut Enllaços o Bànners.

Aquest nou tipus de contingut no exclou els altres dos (Enllaços i Bànners) per crear notícies de la part central d’un butlletí.

Per a mes informació sobre quins tipus de contingut que es poden configurar a la columna central de continguts d’un Butlleti, veure apartat Columna central de continguts: Blocs de contingut.

Elements personalitzables del disseny corporatiu

Color

Es pot triar la franja de color que es troba a sota del logotip de gencat i el fil vermell (veure més endavant l’apartat Procés de creació d’un butlletí per saber com es configura).

Cal tenir en compte que el color de fons de la capçalera haurà de fer un contrast suficient amb el color del text (sempre blanc) per complir el nivell AA d’accessibilitat1.

1 Per comprovar si la combinació que voleu fer servir compleix la normativa, podeu descarregar-vos un programa per instal·lar a l’ordinador o fer una validació online:

Validador per descarregar:

http://juicystudio.com/services/luminositycontrastratio.php

Validador online:


8

La ratlla de sota de la data serà del mateix color que el fons de la capçalera. El peu del butlletí també agafa automàticament el color de la capçalera (ratlles separadores i color dels enllaços).

Imatge capçalera (opcional)

Es poden triar diferents composicions:

Capçalera sense imatge (només text)

Exemple de capçalera sense imatge

Capçalera amb imatge

Mides: 350px d’amplada x 113px d’alçada. Pot ser una fotografia, una il·lustració o un logotip, i no cal que sempre sigui la

http://www.wat-c.org/tools/CCA/1.1/index.html


9

mateixa: pot anar-se canviant als diferents números, sempre que se segueixi una coherència gràfica. (veure més endavant l’apartat Procés de creació d’un butlletí per saber com es configura).

Exemple de capçalera amb imatge (fotografia).

Exemple de capçalera amb imatge (il·lustració o logotip).


10

Configuració dels butlletins (informació per a webmasters)

Tant si es configuren per primera vegada com si ja es tenen configurats butlletins anteriors, cal crear un nou canal (amb el nom que es vulgui: Butlletins 2009, Nous butlletins, etc.) i seguir els passos següents:

Pas 1. Associar les Presentation Templates

En aquest canal s’han d’associar les Presentation Templates que es tinguin creades per a la configuració de butlletins en cada portal.

Per exemple, per al Site Generic serien les següents: la de Default, GenericoGridButlletiDetall_pruebasfp, i la de Detall, GenericoButlletiGencat5.0.

Presentation Templates


11

Pas 2. Associar les CSS

Associar la CSS /Framework/estilos y scripts/NUEVOS Estilos, imagenes y js/Globals/FW_Butlletins_Gencat_5_0.css al nou canal creat.

Fitxer CSS


12

Pas 3. Crear una instància de tipus de contingut Butlletins

Es recomana crear una instància de tipus de contingut Butlletins de prova, ja que pot facilitar la configuració dels portlets. La instància de contingut s’associa al canal creat anteriorment.

Canal relacionat


13

Pas 4. Configuració dels portlets

Tots els portlets que es configuren són d’àmbit page.

Portlet fw_prova

Configurar en el portlet fw_prova del format default la forma de presentació fw_fp_butlleti_distribuidora. A més, el content component d'aquest portlet haurà de ser una llista automàtica de continguts i tenir la consulta següent:

select content of type Butlletins where Channel equals [currentChannel] sort by System Name ascending

fw_fp_butlleti_distribuidora

Content Component a seleccionar


14

Busca les instàncies de

contingut Butlletins que es

trobin en el canal actual

Forma de presentació:

fw_fp_butlleti_distribuidora


15

Portlet fw_cabecera_grid_butlleti

Configurar el portlet fw_cabecera_grid_butlleti amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_capcalera.

fw_fp_butlleti_capcalera



16

Regió per a la capçalera del butlletí


17

Portlet fw_cabecera_grid_butlleti_2

Configurar el portlet fw_cabecera_grid_butlleti_2 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_data

fw_fp_butlleti_data



18

Regió per a la data del butlletí i enllaços per a

Imprimeix i Butlletins anteriors. Aquests es

mostren automàticament en la forma de

presentació.


19

Portlet fw_menu_izquierda_butlleti_avisos

Configurar el portlet fw_menu_izquierda_butlleti_avisos amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_avisos



20

fw_fp_butlleti_avisos

Regió per a Avisos del butlletí


21

Portlet fw_menu_izquierda_butlleti_1

Configurar el portlet fw_menu_izquierda_butlleti_1 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_sumari

fw_fp_butlleti_sumari



22

Regió d’àncores als blocs


23


Configurar el portlet fw_menu_izquierda_butlleti_2 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_llistat_relacionats_1

fw_fp_butlleti_llistat_relacionats_1



24

Regió del primer bloc de continguts relacionats


25


Configurar el portlet fw_menu_izquierda_butlleti_3 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_llistat_relacionats_2

fw_fp_butlleti_llistat_relacionats_2



26

Regió del segon bloc de continguts relacionats


27


Configurar el portlet fw_menu_izquierda_butlleti_4 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_llistat_baners

fw_fp_butlleti_llistat_baners



28

Regió de bàners del butlletí


29

Portlet fw_contenido_butlleti_1

Configurar el portlet fw_contenido_butlleti_1 amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_blocs

fw_fp_butlleti_blocs



30

Regió que conté els blocs del butlletí


31

Portlet fw_pie_grid_butlleti

Configurar el portlet fw_pie_grid_butlleti amb un content component Detall de contingut i amb la forma de presentació fw_fp_butlleti_peu

fw_fp_butlleti_peu



32

Regió del peu del butlletí


33

Procés de creació d’una instància de tipus de contingut Butlletins (Informació per a redactors-validadors)

Creació d’una instància de tipus de contingut Butlletins que s’ha d’associar el nou canal.

Camps a emplenar del tipus de contingut Butlletins

Principal

Àlies (obligatori): nom intern de butlletí. Normalment coincideix amb el títol del Butlletí

Data del butlletí (obligatori): data que apareixerà automàticament al butlletí

Color (obligatori): número alfanumèric que determinarà el color de fons de la capçalera i del peu del butlletí. Per exemple: #336600

Títol (obligatori): Títol del butlletí que sortirà a la llista de butlletins (no és el títol que surt a la capçalera).

Descripció (opcional): Descripció del butlletí que sortirà a la llista de butlletins.

Capçalera

Títol (obligatori): Títol que apareixerà a la capçalera del butlletí.

Subtítol (opcional): subtítol que apareixerà a la capçalera del butlletí.

Departament (opcional): Departament, organisme que fa el butlletí i apareixerà a la capçalera del butlletí.

Número (obligatori): Número del butlletí i que apareixerà a la capçalera del butlletí.

Imatge relacionada (opcional): Imatge que apareixerà a la dreta de la capçalera del

butlletí. Mides de la imatge: 350px d’amplada x 113px d’alçada.


34

Columna central de continguts: Blocs de contingut

La columna central és on es mostren els continguts que enllacen a les notícies i novetats que es volen destacar del web (o d’altres pàgines web) en el butlletí. Es recomana redactar titulars breus (aproximadament, 90 caràcters com a màxim) i fer el text introductori el màxim de sintètic possible. El titular enllaça amb la notícia completa a la web.

L’apartat de blocs de contingut permet crear diferents apartats/seccions.

Aquests blocs poden tenir imatge i descripció pròpia, i se li poden associar dos tipus de contingut: enllaços, bàners i Noticies_butlletins, que configuraran les diferents novetats del web.

Títol bloc de contingut: nom de l’apartat

Cos bloc de contingut: descripció de l’apartat

Imatges relacionades: imatge de l’apartat

Cal destacar que, encara que un baner s’hagués configurat amb un enllaç a una nova finestra, aquest no tindrà aquest funcionament, ja que molts clients web de correu electrònic encara bloquegen les finestres emergents.


35

Altres continguts relacionats:


36

Bàners

Es mostra:

� El títol (enllaçable)

� La imatge (enllaçable)

� Peu de la imatge

� La descripció

Enllaços

Es mostra:

� El títol (enllaçable)

� La descripció

Títol del bloc 1 i descripció

del bloc 1

Bàner 1: Títol

enllaçable,

imatge, peu

imatge i descripció

Bàner 2: Títol

enllaçable,

imatge, peu


Bàner 3: Títol

enllaçable,

imatge, peu


Títol del bloc 2 Enllaços 1, 2 i 3:

Títols enllaçables i

descripció

Títol del bloc 3 Enllaços 1 i 2:

Títols enllaçables


37

Mides de les imatges

- Apaïsada: 376px x 115px

- Vertical: 120px x 155px

160px x 200px

185px x 235px


38

- Horitzontal: 130px x 84px

160px x 95px

185px x 115px

Per adaptar les fotografies a aquestes mides, cal tractar-les correctament. No s’han de forçar de manera que la imatge quedi distorsionada. Hauran de tenir prou resolució perquè no quedin borroses.

Es recomana que el text introductori de la notícia sigui més o menys extens en funció de la imatge, per evitar que la imatge quedi “penjada” al buit i farcir l’espai amb text. Tot i això, la recomanació general és la de tendir a sintetitzar al màxim. Es tracta de presentar les novetats de manera atractiva, perquè l’usuari decideixi amb un cop de vista si li interessa la notícia com per anar a llegir-ne l’ampliació a la web.

Columna lateral esquerra

A la columna lateral esquerra s’han previst els elements opcionals que es detallen a continuació:

Requadre d’avisos

Cal fer-lo servir únicament quan hi hagi alguna comunicació important a fer (alertes, anuncis, convocatòries...) i respectar-ne el format. El text ha de ser molt breu (aproximadament, 80 caràcters com a màxim).


39

Sumari

Menú d’apartats o seccions en què s’organitzen els continguts del butlletí (per exemple, notícies, novetats, recomanacions, agenda, etc.). Cada element d’aquesta llista és una àncora que porta a l’apartat corresponent).

És un element opcional, i es mostra automàticament en cas que s’hagi configurat el portlet fw_menu_izquierda_butlleti_1.

Continguts relacionats

Per fer enllaços directes destacats (notícies externes, enquestes, activitats d’agenda, altres pàgines web, etc.). Normalment es configuren dos blocs de contingut, que tenen diferent format:


40

Es configuren com blocs de contingut i s’ordenen segons l’ordre de la llista:

Els tipus de contingut que es mostren són:

Enllaços

� Títol enllaçable

� Descripció

Documents


� Descripció

Bloc de continguts relacionats 1.

� Títol en negre negreta (correspon al títol del portlet fw_menu_izquierda_butlleti_2)

Bloc de continguts relacionats 2.

� Títol en vermell negreta (correspon al títol del portlet fw_menu_izquierda_butlleti_3)


41

Bàners


� Descripció

Bàners

Es pot completar la columna lateral amb una bateria de bàners gràfics amb enllaços a webs de l’organisme o externs.

Mides recomanades: 176 x 54 px.

Peu

És un contingut essencial, ja que proporciona als usuaris informació sobre l’entitat o organisme responsable del contingut del butlletí, així com informació legal sobre el tractament de dades de caràcter personal i enllaços per donar-se d’alta, baixa, contactar, etc.

És important respectar aquest format, perquè l’usuari que sigui subscriptor de diversos butlletins corporatius trobi sempre aquesta informació útil al mateix lloc i amb el mateix format.

El peu conté:

Text peu (avís legal): el text legal. A continuació es mostra el text en diferents

idiomes:

CATALÀ:

D'acord amb l'article 5 de la Llei orgànica 15/1999, de 13 de desembre, de protecció de dades de caràcter personal, us informem que les vostres dades personals han estat recollides, incorporades i tractades en un fitxer


42

automatitzat anomenat Trameses d'informació i inscripcions del Gencat, la finalitat del qual és trametre la publicació que el ciutadà ha requerit.

L'òrgan responsable del fitxer és la Direcció General d'Atenció Ciutadana i Difusió i l'adreça on la persona interessada pot exercir els drets d'accés, rectificació, cancel·lació i oposició és Via Laietana, 14, 3r, 08003 Barcelona.

CASTELLÀ:

De acuerdo con el artículo 5 de la Ley orgánica 15/1999, de 13 de diciembre, de protección de datos de carácter personal, le informamos de que sus datos personales han sido recogidos, incorporados y tratados en un fichero automatizado denominado Trameses d'informació i inscripcions del Gencat, cuya finalidad es enviar la publicación que el ciudadano ha requerido.

El órgano responsable del fichero es la Dirección General de Atención Ciudadana y Difusión y la dirección donde la persona interesada puede ejercer los derechos de acceso, rectificación, cancelación y oposición es Via Laietana, 14, 3ª, 08003 Barcelona.

ANGLÈS:

In accordance with article 5 of Constitutional law 15/1999 of 13 December (the data protection act), we hereby inform you that your personal details have been gathered, incorporated and treated in an automated file called Trameses d'informació i inscripcions del Gencat, the purpose of which is to send out the publication requested by the member of the public.

The entity responsible for the lopd file is the General Directorate for Citizen Services and Publicity (Direcció General d'Atenció Ciutadana i Difusió) and the address to which interested parties should go to exercise the right to access, rectify, cancel or file an objection is Via Laietana, 14, 3r, 08003 Barcelona.

Enllaços: llistat d’enllaços d’alta, baixa, contacte del butlletí.


43

Logotip: bàner que mostra el logotip del Departament o organisme responsable del

butlletí (opcional), amb enllaç cap a la web, si en té.

Logo “Creative Commons”: Al costat del logotip del departament o organisme, es

pot inserir el logotip d’una llicència de codi obert, segons s’explica a la Normativa editorial de l’Administració de la Generalitat de Catalunya, és una modalitat de llicències que informen per endavant a terceres persones dels usos permesos o restringits que atorga l’autor/a o l’editor/a sobre el contingut d’una obra. Acostumen a tenir diferents nivells, des de l’ús més ampli (només reconeixement de l’autoria) a d’altres de més limitats (sense usos comercials, sense dret de transformació per crear una obra derivada, etc.).

Per exemple:

Llicència Creative Commons “Reconeixement” 3.0, amb un enllaç cap a la

pàgina d’informació completa sobre el tipus de llicència:

http://creativecommons.org/licenses/by/3.0/es/legalcode.ca


44

Paràmetres a incloure en l’url del butlletí (informació per a administradors de l’eina d’enviament dels butlletins)

Perquè el butlletí arribi correctament al destinatari, s’han d’incloure dos paràmetres a l’url que s’enganxa a la solució corporativa de butlletins gencat:

� Versió del butlletí: &butlleti=2

Exemple: http://www20.gencat.cat/portal/site/Generico2/menuitem.22c8547bd46b9ad0b2cc79cab031e1a0/?vgnextoid=bb5d420443eae110VgnVCM1000000b131e0aRCRD&vgnextchannel=bb5d420443eae110VgnVCM1000000b131e0aRCRD&vgnextfmt=detall&contentid=75fc1cfbea0a1210VgnVCM1000000b131e0aRCRD&vgnextnoice=1&butlleti=2&newLang=ca_ES

Si no es posa, poden passar dues coses:

o No es veurà bé el butlletí (caiguda de blocs, desconfiguració d’estils, no es veurà bé en gestors de correu webmail...).

o S’està treballant encara amb la versió anterior de butlletins i, per tant, no s’ha configurat encara el nou butlletí.

� Idioma: &newLang=ca_ES

Gestiona l’idioma en què arribarà el butlletí. Sempre s’ha de posar, encara que el butlletí només s’enviï en un idioma.

Exemple:

http://www20.gencat.cat/portal/site/Generico2/menuitem.22c8547bd46b9ad0b2cc79cab031e1a0/?vgnextoid=bb5d420443eae110VgnVCM1000000b131e0aRCRD&vgnextchannel=bb5d420443eae110VgnVCM1000000b131e0aRCRD&vgnextfmt=detall&contentid=75fc1cfbea0a1210VgnVCM1000000b131e0aRCRD&vgnextnoice=1&butlleti=2&newLang=ca_ES

La codificació amb la qual s'envia el butlletí ha de ser UTF-8.

Us facilitem els codis dels idiomes més comuns:

� Català: ca_ES

� Castellà: es_ES

� Anglès: en_GB


45