Manual de maquetació de butlletins electrònics corporatius amb … · 2011-11-21 · Via...

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

Manual de maquetació de butlletins electrònics corporatius amb HTML1 Octubre 2011

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


2

Manual de maquetació de butlletins corporatius en H TML

Índex

NORMATIVA: EL DISSENY CORPORATIU ................... .................................. 3

Butlletins institucionals ..............................................................................................................................3

Butlletins temàtics......................................................................................................................................4

MAQUETACIÓ DEL BUTLLETÍ AMB DISSENY CORPORATIU..... ................. 5

Capçalera....................................................................................................................................................5

Columna lateral esquerra. Elements opcionals.....................................................................................7

Columna central de continguts ..............................................................................................................10

Peu.............................................................................................................................................................13


3

Normativa: el disseny corporatiu

Butlletins institucionals

Els butlletins institucionals, que difonen notícies i continguts dels organismes de la Generalitat de Catalunya, hauran d’implementa r el disseny corporatiu per poder fer ús de la solució gencat de butlletins.

L’objectiu és que se segueixin uns criteris d’identitat corporativa perquè les persones usuàries els identifiquin com a publicacions oficials de la Generalitat. A banda d’això, els diferents organismes es beneficien del fet de disposar d’un disseny personalitzable i una plantilla base que els evita haver d’encarregar un projecte propi.

Si són butlletins fets amb HTML (sense l’ajuda de cap gestor de continguts), disposaran d’una plantilla i els CSS de gencat, amb la possibilitat de personalitzar únicament el color i la imatge de la franja de la c apçalera destinada al títol del butlletí, la línia de sota de la capçalera i la sep aració del peu . La resta d’elements es mantindran sense modificacions.

La plantilla HTML conté comentaris per facilitar la tasca de maquetació i personalització . A més, compleix els estàndards d’accessibilitat AA (sempre que es realitzin modificacions als CSS per personalitzar el butlletí, caldrà fer les comprovacions corresponents) i es visualitza correctament amb els diferents gestors de correu electrònic .

Si s’opta per construir el butlletí amb la solució gencat de gestió de continguts, GECO, es farà servir la forma de presentació de butlletins corporatius.

Quan tingueu el número 0 del butlletí maquetat, haurà de passar la validació per part de la DGACD. Aquest procés pot arribar a trigar al voltant de dues setmanes .

No es validaran les propostes de butlletins amb un disseny similar al corporatiu però que no respectin els elements bàsics (mides i ubicació dels elements gràfics, colors, tipografies, etc.).

Exemple de butlletí de disseny corporatiu


4

Butlletins temàtics

Els butlletins amb continguts més temàtics i amb un to menys institucional, (per exemple, Jove.cat, el butlletí per als joves o Rece rcat, el butlletí de la recerca a Catalunya), poden utilitzar un disseny lliure en la part central destinada al contingut.

Malgrat ser de disseny lliure, per poder fer ús de l’eina de gestió d’enviaments corporativa, hauran d’incorporar:

• la capçalera corporativa de gencat. • un peu de pàgina amb l’avís legal de protecció de dades personals, el logotip

de l’organisme responsable (amb enllaç cap a la web de l’organisme) i els enllaços a donar-se d’alta i baixa del butlletí (que hauran d’apuntar a l’eina de gestió corporativa).

Per la resta, si es tria un disseny lliure, haurà d e ser totalment diferent del corporatiu. A l’hora d’encarregar-lo, us heu d’assegurar que l’empresa proveïdora us proporcionarà un disseny accessible AA i que es pugui visualitzar co rrectament amb els diferents gestors de correu electrònic (també els de tipus webmail).

Quan tingueu el número 0 del butlletí maquetat, haurà de passar la validació per part de la DGACD . Aquest procés pot arribar a trigar al voltant de dues setmanes .

Exemple de butlletí amb disseny lliure (incorpora capçalera i peu corporatius)


5

Maquetació del butlletí amb disseny corporatiu

Capçalera

Perquè els butlletins corporatius es diferenciïn i tinguin una certa personalitat pròpia, tot i compartir un “aire de família”, s’ha previst que es puguin modificar alguns elements bàsics.

1. Color. Per a la franja prevista per al nom del butlletí, i que es troba a sota del logotip de gencat i el fil vermell, es pot triar un color diferent del de la plantilla model modificant el CSS corresponent. La ratlla de sota de la data serà del mateix color que el fons de la franja principal de la capçalera.

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

Exemples de colors de fons de la capçalera

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

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


6

2. Imatge (opcional) Es poden triar diferents composicions: • Capçalera sense imatge (només text):

Exemple de capçalera sense imatge • Capçalera amb imatge (305px d’amplada x 105px d’alçada). Pot ser una fotografia, una il·lustració o un logotip, i no cal que sempre sigui la mateixa: pot anar-se canviant als diferents números, sempre que se segueixi una coherència gràfica.

Exemple de capçalera amb imatge (fotografia).


7

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

Columna lateral esquerra. Elements opcionals

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

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

2. 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). Cal respectar-ne el format (línia discontínua, colors, vinyetes, etc.)


8

3. Altres menús

Per fer enllaços directes destacats (notícies externes, enquestes, activitats d’agenda, etc.).


9

4. 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: 176 x 54 px.


10

Columna central de continguts

Es composa de dos apartats, que no admeten opcions de personalització (no es poden modificar les tipografies ni el color de textos i enllaços):

1. Notícies destacades

Amb un titular (que enllaça al web) i un text, que pot contenir enllaços. 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.

Les notícies destacades es poden il·lustrar amb una imatge (acompanyada de peu de foto quan s’escaigui), amb els formats següents:

- Apaïsada: 376px x 115px


11

- Vertical: 120px x 155px

160px x 200px

185px x 235px


12

- 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. Les imatges hauran d’estar penjades en un directori d’imatges del butlletí i a l’HTML es farà un enllaç.

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.


13

2. Altres notícies / continguts

Amb un titular i un text més breu, que també pot contenir enllaços. No s’il·lustren amb imatge. El titular enllaça amb la notícia completa a la web.

Nota: Al final de cada bloc de contingut central, hi ha d’haver el botó per pujar amunt:

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.

Les línies separadores i els literals dels enllaços seran del mateix color que el fons de la franja principal de la capçalera .

El peu conté:

• el logotip del departament o organisme responsable del butlletí (opcional), amb enllaç cap a la web, si en té.

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


14

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

• el text legal , en l’idioma corresponent:

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


15

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.

• els enllaços de gestió del butlletí (alta, baixa, contacte, etc.) i a la pàgina de crèdits, en el mateix color del fons de la capçalera).

• el copyright de la Generalitat de Catalunya , que enllaça amb la pàgina: http://www.gencat.cat/web/cat/copyright.htm.

Exemple de peu 1, amb la capçalera corresponent. Col or vermell


16

Exemple de peu 2, amb la capçalera corresponent. Col or blau

Manual de maquetació de butlletins electrònics corporatius amb … · 2011-11-21 · Via...

Documents

Transcript of Manual de maquetació de butlletins electrònics corporatius amb … · 2011-11-21 · Via...