Manual de creació de butlletins electrònics corporatius amb GECO 1

Transcripción

1 Manual de creació de butlletins electrònics corporatius amb GECO 1 Maig 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) Pas 1. Associar les Presentation Templates Pas 2. Associar les CSS Pas 3. Crear una instància de tipus de contingut Butlletins Pas 4. Configuració dels portlets PROCÉS DE CREACIÓ D UNA INSTÀNCIA DE TIPUS DE CONTINGUT BUTLLETINS (INFORMACIÓ PER A REDACTORS-VALIDADORS) Camps a emplenar del tipus de contingut Butlletins PARÀMETRES A INCLOURE EN L URL DEL BUTLLETÍ (INFORMACIÓ PER A ADMINISTRADORS DE L EINA D ENVIAMENT DELS BUTLLETINS)

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). 3

4 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í ( La resta d elements corresponen a les diferents seccions del tipus de contingut Butlletins: 5

6 Principal i capçalera Blocs de contingut Continguts relacionats Bàners Avisos Peu 6

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 accessibilitat 1. 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: Validador online: 7

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 8

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). 9

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 10

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 11

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 12

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 Content Component a seleccionar fw_fp_butlleti_distribuidora 13

14 Busca les instàncies de contingut Butlletins que es trobin en el canal actual Forma de presentació: fw_fp_butlleti_distribuidora 14

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. Content Component a seleccionar fw_fp_butlleti_capcalera 15

16 Regió per a la capçalera del butlletí 16

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 Content Component a seleccionar fw_fp_butlleti_data 17

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ó. 18

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 Content Component a seleccionar 19

20 fw_fp_butlleti_avisos Regió per a Avisos del butlletí 20

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 Content Component a seleccionar fw_fp_butlleti_sumari 21

22 Regió d àncores als blocs 22

23 Portlet fw_menu_izquierda_butlleti_2 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 Content Component a seleccionar fw_fp_butlleti_llistat_relacionats_1 23

24 Regió del primer bloc de continguts relacionats 24

25 Portlet fw_menu_izquierda_butlleti_3 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 Content Component a seleccionar fw_fp_butlleti_llistat_relacionats_2 25

26 Regió del segon bloc de continguts relacionats 26

27 Portlet fw_menu_izquierda_butlleti_4 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 Content Component a seleccionar fw_fp_butlleti_llistat_baners 27

28 Regió de bàners del butlletí 28

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 Content Component a seleccionar fw_fp_butlleti_blocs 29

30 Regió que conté els blocs del butlletí 30

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 Content Component a seleccionar fw_fp_butlleti_peu 31

32 Regió del peu del butlletí 32

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: # 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. 33

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. 34

35 Altres continguts relacionats: 35

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 imatge i descripció Bàner 3: Títol enllaçable, imatge, peu imatge i descripció Enllaços 1, 2 i 3: Títols enllaçables i descripció Títol del bloc 2 Títol del bloc 3 Enllaços 1 i 2: Títols enllaçables 36

37 Mides de les imatges - Apaïsada: 376px x 115px - Vertical: 120px x 155px 160px x 200px 185px x 235px 37

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). 38

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: 39

40 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) 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 Documents Descripció Títol enllaçable Descripció 40

41 Bàners Títol enllaçable 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 41

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, 3r,. 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ª,. 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, 3r,. Enllaços: llistat d enllaços d alta, baixa, contacte del butlletí. 42

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: 43

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: cc79cab031e1a0/?vgnextoid=bb5d420443eae110vgnvcm b131e0ar CRD&vgnextchannel=bb5d420443eae110VgnVCM b131e0aRCRD&vg nextfmt=detall&contentid=75fc1cfbea0a1210vgnvcm b131e0arcrd& 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: cc79cab031e1a0/?vgnextoid=bb5d420443eae110vgnvcm b131e0ar CRD&vgnextchannel=bb5d420443eae110VgnVCM b131e0aRCRD&vg nextfmt=detall&contentid=75fc1cfbea0a1210vgnvcm b131e0arcrd& 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 44

45 45