Manual de maquetació de butlletins electrònics corporatius amb HTML 1

Transcripción

1 Manual de maquetació de butlletins electrònics corporatius amb HTML 1 Octubre 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 HTML Í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

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 implementar 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 capçalera destinada al títol del butlletí, la línia de sota de la capçalera i la separació 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 3

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 Recercat, 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à de 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 correctament 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) 4

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: Validador online: 5

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 anarse canviant als diferents números, sempre que se segueixi una coherència gràfica. Exemple de capçalera amb imatge (fotografia). 6

7 Exemple de capçalera amb imatge (il lustració o logotip). 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.) 7

8 3. Altres menús Per fer enllaços directes destacats (notícies externes, enquestes, activitats d agenda, etc.). 8

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

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 10

11 - Vertical: 120px x 155px 160px x 200px 185px x 235px 11

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

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

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: 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, 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 14

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, 3r,. 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: Exemple de peu 1, amb la capçalera corresponent. Color vermell 15

16 Exemple de peu 2, amb la capçalera corresponent. Color blau 16