Guia d’ús per a la construcció de webs de

la Generalitat de Catalunya amb l’estil

gencat responsiu

Juliol 2015

Versió 2.0 Beta

Des de setembre de 2014, gencat.cat ofereix un nou estil gràfic i de presentació de la informació basat en els següents principis: • Centrat en l’usuari. • Multidispositiu (disseny web responsiu). • Adaptable -modular, atomitzat i senzill- a diferents visions de

comunicació.

Què és aquesta guia Aquesta guia descriu les plantilles i les peces que conformen el nou estil gencat responsiu. L’objectiu és oferir una eina per construir webs i aplicacions web de la Generalitat adreçats a la ciutadania – ja estiguin desenvolupats amb el gestor corporatiu GECO+ com amb altres tecnologies-, basant-se en aquests principis, en el correcte ús de les peces i en el disseny gràfic gencat responsiu.

A qui va adreçada • Usuaris de la Generalitat de Catalunya: responsables web, webmàsters,

redactors, caps de comunicació. • Proveïdors que desenvolupen webs de la Generalitat: maquetadors,

conceptualitzadors, arquitectes de la informació, dissenyadors, i altres perfils que intervinguin en la definició de la interfície d'un projecte web adreçat a la ciutadania.

La guia està formada per la documentació i eines següents: • Inventari de models de plantilles/pàgines, components i ús que se’n fa de

cada una. • Plantilles HTML. • Plantilles PNG.

Introducció

! Informeu-vos en aquesta Guia dels

procediments de sol·licitud per a la creació de noves iniciatives web.

! Independentment del disseny, apliqueu

metodologies d’experiència d’usuari i prototips navegables per garantir un web usable i útil.

Suport i contacte Si teniu qualsevol dubte o incidència, envieu un correu electrònic a webs@gencat.cat.

Índex

Abans de començar, cal saber... • Principis de la comunicació digital de la

Generalitat • Requeriments i criteris d’identitat corporativa • Especificacions tècniques • Procediments

Estil gràfic • Tipografia • Colors • Retícules • Icones i botons • Imatges • Textos i títols • Enllaços, rollovers i efectes

Elements estructurals • Plantilla base • Capçalera

o Logotip o Enllaços o Idiomes o Cercador o Títol del web o Menú de navegació principal

• Subcapçalera o Fil d’Ariadna o Eines de compartició o Títol pàgina o Menú de navegació secundari o Impacte gràfic

• Faldó • Peu

Plantilles, models de pàgina i components

• Pàgines d’inici • Subhomes

• Model Àmbit • Model Actualitat • Model Tràmits

• Distribuïdores • Reportatges • Agenda d’activitats • Article • Carrusel • Curs • Descripció pàgina • Entitat • Glossari • Imatges i galeria d’imatges • Llistes • Mapa web • Normativa • Notícia • Pregunta freqüent • Publicació • RSS • Tràmit • Vídeo i llista de reproducció (playlist) • Butlletins electrònics • Formularis • Taules i htmls

Integracions • Bústia de contacte • Cercador gencat • Cercador SAC organismes • Formularis gencat • Perfil del contractant • Sala de premsa • Aplicacions externes • Giny Twitter

Descàrregues i exemples de plantilles

PRINCIPIS DE LA COMUNICACIÓ DIGITAL

Abans de començar, cal saber...

• Interfície centrada en l’usuari

• Multidispositiu

• Disseny adaptable

• Redacció estructurada

Principis de la comunicació digital de la Generalitat

Interfície centrada en l’usuari

Cal utilitzar metodologies d’experiència d’usuari per a la definició d’interfícies.

Principis de la comunicació digital de la Generalitat

! Com a metodologia de treball, es recomana que els estils i peces de la guia s'apliquin un cop s'hagi definit un prototip

funcional on s'especifiquin la navegació, la interacció amb l'usuari i la col·locació dels elements en pantalla.

! És convenient també la realització de tests d’usabilitat amb usuaris reals i metodologies d’experiència d’usuari durant la

fase de conceptualització del projecte web.

! Cal fer cas de les estadístiques d’ús i tendències que ens mostren les mètriques (analítica, cercador, opinions...).

! Encarregueu maquetes gràfiques per veure com quedaran les pàgines, independentment que el disseny ja estigui marcat.

Multidispositiu

Una mateixa web per a tothom i per a tots els dispositius

Principis de la comunicació digital de la Generalitat

! Tot i que no hi ha un termini per convertir

els webs de la Generalitat a disseny responsiu, cal tenir en compte que els webs no optimitzats per a la seva visualització en mòbil perden posicionament en els resultats de la cerca a Google.

! Incloure dades d’ús de mòbils i tauletes.

http://www.websresponsivas.com/

Disseny adaptable

Modular, atomitzat i senzill per respondre a les diferents necessitats comunicatives dels webs de la Generalitat.

Principis de la comunicació digital de la Generalitat

! Encarregueu maquetes gràfiques per veure

com quedaran les pàgines, independentment que el disseny ja estigui marcat.

! La importància de les imatges.

Redacció estructurada

La informació en línia, com més estructurada, més fàcil és de llegir. Cal fer ús dels diferents estils i pàgines de contingut per organitzar la informació, de forma que l’usuari pugui seguir la lectura de forma jeràrquica.

– Tot i que no hi ha limitació de caràcters per als títols, entradetes i textos, cal ser breus, especialment en el títol. L’entradeta servirà per ampliar la informació més important.

– Cal estructurar la informació de forma jeràrquica.

– Sempre que sigui possible, convé acompanyar la informació amb documents gràfics, ja siguin imatges o vídeos. Faran que la lectura sigui més fàcil i ajudaran a la comprensió de la informació.

– No donar més d’una idea per frase o paràgraf.

– Si els blocs d’un article, notícia o qualsevol contingut es mostra en pestanyes, és recomanable fer títols curts, de 30 caràcters màxim, per tal que surtin el màxim possible a la versió escriptori sense navegar amb les fletxes.

– Els enllaços que surten de la navegació del portal s’obren en una nova pestanya.

Principis de la comunicació digital de la Generalitat

REQUERIMENTS I CRITERIS D’IDENTITAT CORPORATIVA

Abans de començar, cal saber...

Acord del Govern d’aprovació dels criteris corporatius dels webs de la Generalitat

Punt 3 i 4. Domini gencat.cat La presència de la Generalitat a Internet s’ha d’inscriure en el domini gencat.cat.

Punt 6. Domini gencat.cat Tots els webs de la Generalitat han d’incorporar, en el marge esquerre superior, el logotip Generalitat de Catalunya – gencat.cat

Punt 11. Avís legal Tots els webs de la Generalitat han de contenir l'avís legal de gencat.cat.

Punt 7. Disseny webs de la Generalitat Els webs del domini gencat.cat s’adaptaran al nou disseny de la pàgina inicial de gencat i han de seguir les guies d’estil i les pautes del PIV.

Punt 8. Multicanalitat: Els webs s’han de redissenyar i construir seguint les directrius de webs de disseny responsiu. Punt 9. Accessibilitat Els webs s’han d’adequar a la Norma de Desenvolupament Web elaborada pel CTTI (https://qualitat.solucions.gencat.cat)

Punt 10. Gestor de continguts La Generalitat de Catalunya usa com a gestor corporatiu GECO+

L’Acord del Govern d’aprovació dels criteris corporatius dels webs de la Generalitat de 20 de gener de 2015 regula els aspectes següents en relació als webs* i a la presència de la Generalitat de Catalunya a Internet:

* Aquest Acord s'aplica a l'Administració de la Generalitat, els organismes, empreses i les entitats que s'hi adscriuen o s'hi relacionen i a altres entitats del sector públic en les quals l'Administració de la Generalitat i/o altres entitats del sector públic de la Generalitat hi tenen una participació majoritària (directament o indirectament en més d'un 50% del seu capital, fons patrimonial o fons dotacional amb caràcter de permanència, o pot designar o disposar, per via estatutària, de la majoria de representants amb dret a vot dels seus òrgans de govern). Per als centres sanitaris, docents, universitats i centres de recerca, el departament competent acordarà amb la Direcció General d'Atenció Ciutadana i Difusió l'aplicació de l'acord als seus webs.

Domini gencat.cat

Logotip gencat.cat

Avís legal Disseny gràfic Accessibilitat i multicanalitat

Tecnologia

Aplicació de la identitat corporativa: domini gencat.cat i adreces de comunicació

Subdominis dins del domini gencat.cat Per a webs responsives: • nom del departament.gencat.cat (justicia.gencat.cat) • organisme o organ.gencat.cat (incavi.gencat.cat) • àmbit o matèria.gencat.cat (medicaments.gencat.cat) • marca.gencat.cat (rodalies.gencat.cat)

Per a webs mòbils: • m.[nomdelweb].gencat.cat

Nous dominis i excepcions Correspon a la DGACD autoritzar, prèvia sol·licitud, amb caràcter excepcional la publicació d'un web de la Generalitat o vinculat al seu àmbit sota un domini diferent només en els casos en què: • l'objectiu de la pàgina web sigui incompatible amb l'ús del domini corporatiu. • no es perjudiqui la imatge de la Generalitat a internet. • webs d'ens en què participin ens locals representatius de l'àmbit territorial d'actuació de l'ens.

Redireccionaments • El promotor d'un web que no tingui domini gencat.cat i no sigui excepció, ha de redireccionar el seu domini directe .cat cap al domini

corporatiu gencat.cat en el termini de dos mesos des de l'aprovació de l'Acord, ampliable fins a un any per als webs que no estiguin dins de servidors corporatius.

• Sempre que sigui possible tècnicament, es farà coincidir l'adreça de navegació amb l'adreça de comunicació. Es faran només aquells redireccionaments que, a criteri de la DGACD, es considerin imprescindibles per no perdre impacte o visibilitat en buscadors i directoris, o bé perquè coincideixin amb la denominació pròpia de l'organisme.

! Els literals del subdomini:

• han de ser el màxim de comprensibles per a la ciutadania

• han d'evitar les sigles sempre que sigui possible • no han de portar majúscules ni accents.

Aplicació de la identitat corporativa: domini gencat.cat i adreces de comunicació

1

El promotor fa la sol·licitud via formulari a DGACD

2

DGACD retorna la resposta.

3

El promotor sol·licita a l’Àrea TIC departamental l’inici del procediment de sol·licitud a CTTI.

L'elaboració i actualització de l'inventari de dominis internet de la Generalitat, així com la seva gestió de la contractació i renovació, correspon al CTTI, a instància del departament impulsor i amb autorització prèvia de la DGACD.

Procediment de sol·licitud de subdominis gencat.cat o nous dominis

Corporatiu Excepció No s’excepciona

Aplicació de la identitat corporativa: logotip gencat.cat

El logotip Generalitat de Catalunya – gencat.cat és la marca que identifica que un web és públic i de la Generalitat de Catalunya. • Ha d’estar present en totes les pàgines web en què el promotor principal del web és la Generalitat. • S’ha d’incloure a la part esquerra superior (en la versió escriptori). • La DGACD és l’únic òrgan que pot excepcionar l’ús d’un altre logotip en aquesta àrea. En aquests moments, conviuen dos tipus d’identificació: la versió no responsiva (que haurà de ser substituïda progressivament) i la versió responsiva adaptada a tot tipus de dispositius.

Mala pràctica

El logotip Generalitat de Catalunya – gencat.cat només s’utilitza com a identificació d’un web de la Generalitat i sempre a la part superior esquerra de la capçalera. No s’ha d’utilitzar: • Com a firma d’un web en què la Generalitat ha participat (en

aquest cas s’utilitza la identificació bàsica de la Generalitat col·locada al peu del web).

• Com a bàner per enllaçar al web de gencat des d’un altre web.

Versió no responsiva

Versió responsiva

Nom del web Nom del web

Aplicació de la identitat corporativa: avís legal

Tots els webs de la Generalitat han de contenir i complir l’avís legal de gencat.cat. Avís legal: La ©Generalitat de Catalunya permet la reutilització dels continguts i de les dades sempre que se citi la font i la data d'actualització, que no es desnaturalitzi la informació i que no es contradigui amb una llicència específica.

Els webs que excepcionin del contingut d’aquest avís legal han de tenir, per tant, la corresponent llicència que s’hi adigui. També han de fer constar la política de protecció de dades de caràcter personal i de l’ús de cookies. Pel cas de l’ús de les cookies, únicament cal demanar consentiment quan s’utilitzen amb finalitats econòmiques, ja sigui en webs de comerç electrònic o amb la finalitat d'obtenir ingressos per publicitat. En qualsevol dels casos, s’ha d’informar de les característiques de les cookies que es fan servir, ja siguin de caràcter tècnic com d’obtenció d’informació per analítica web o estadístiques, tal i com es diu a l’avís legal de gencat.cat: Les galetes (cookies) s'utilitzen únicament amb finalitats estadístiques, ja que proporcionen informació rellevant

als responsables del portal per millorar el servei a la ciutadania.

Aplicació de la identitat corporativa: avís legal

Versió no responsiva

Versió responsiva

En aquests moments, conviuen dos tipus de peu de pàgina: la versió no responsiva (que haurà de ser substituïda progressivament) i la versió responsiva adaptada a tot tipus de dispositius.

Aplicació de la identitat corporativa: ús de logotips al peu de pàgina

• Al peu de pàgina, en la versió responsiva, ha de constar el logotip de la Generalitat de la Generalitat de Catalunya.

• En el seu lloc pot constar també el logotip oficial del PIV de l’organisme que firma el web. No poden conviure junts, ha de ser o l’un o l’altre.

• En el cas que hi hagi més d’un promotor d’un web i aquests siguin de la Generalitat de Catalunya, només constarà el logotip de la Generalitat.

• El disseny gencat corporatiu no està pensat perquè convisquin més promotors d’altres administracions, ja que és el disseny que identifica que un web pertany a la Generalitat de Catalunya.

Mala pràctica

• Incloure al peu de pàgina la

firma/logotip de l’empresa desenvolupadora del web.

• No es pot utilitzar en aquest espai un logotip o marca del portal no corporatiu ni acceptat pel Programa d’Identificació Visual.

Versió no responsiva

Versió responsiva

Cal agafar del web del PIV el logo en blanc i negre, en format horitzontal, i aplicar-lo en el gris X i fons transparent perquè es llegeixi correctament sobre el fons gris del peu de pàgina. Mides?

! Llegiu en el web del PIV com

harmonitzar els logos de la Generalitat quan hi ha col·laboració o coexistència amb d’altres. http://identitatcorporativa.gencat.cat/ca/identitat-visual/collaboracions-i-coexistencia/

ESPECIFICACIONS TÈCNIQUES

Abans de començar, cal saber...

• Els webs de la Generalitat de Catalunya s’han d’adequar a la Norma de desenvolupament web desenvolupada pel CTTI i publicada en el portal https://qualitat.solucions.gencat.cat *, que estableix els estàndards i el grau de compliment en el desenvolupament de webs i aplicacions (accessibilitat, navegadors compatibles...).

• Els webs que es construeixen amb el gestor corporatiu de la Generalitat GECO+, disposen d’un framework de peces, components i plantilles, disponibles en aquests moments a http://catalegresponsiu.gencat.cat.

• Els webs que utilitzen altres tecnologies o gestors, poden utilitzar les plantilles en html disponibles en l’apartat de descàrregues d’aquesta Guia.

• Per maquetar aquestes plantilles s’ha utilitzat HTML5 i CSS3.

Especificacions tècniques

* Cal anar a l’apartat Documentació > Normativa i estàndards > Arquitectura > Norma de desenvolupament Web

Norma de desenvolupament Web (1/2)

Norma de desenvolupament Web (2/2)

PROCEDIMENTS

Abans de començar, cal saber...

Segons les necessitats, es distingeixen els procediments següents: Es vol crear/transformar un web

– Qui ho sol·licita? Promotor. – A qui ho adreça? A DGACD i al proveïdor. – Com? Vegeu esquema següent.

Es vol ampliar/modificar el catàleg de peces * – Qui ho sol·licita? Proveïdor. – A qui ho adreça? A DGACD. – Com? Via webs@gencat.cat. *Hi ha un catàleg de peces i components genèrics, reaprofitables per a tots els webs i aplicacions web, que es troben publicats en aquesta Guia o al catàleg de GECO+ catalegresponsiu.gencat.cat. Qualsevol ampliació d’aquest catàleg amb noves funcionalitats i peces noves ha de ser notificat a DGACD per part del proveïdor, tant si són peces reaprofitables com específiques d’un web.

Suport als usuaris de webs GECO+ – Qui ho sol·licita? Promotor. – A qui ho adreça? Al proveïdor. – Com? Via suport.gencat.cat.

Suport als proveïdors que utilitzen la Guia – Qui ho sol·licita? Proveïdor – A qui ho adreça? A DGACD. – Com? Via webs@gencat.cat.

Procediments

1

Sol·licitud a DGACD El promotor fa la sol·licitud via formulari a DGACD.

Resposta DGACD DGACD retorna la resposta.

Sol·licitud de creació / transformació d’iniciatives web

Corporatiu Excepció No s’excepciona

Sol·licitud a proveïdor El promotor sol·licita els serveis del proveïdor.

2

3

S’informa a DGACD El proveïdor informa la DGACD, independentment si l’ofici està tancat o no.

4

Reunió de presa de requeriments Depenent de les característiques tècniques, funcionals i gràfiques, es decidirà la participació dels diferents agents: • Proveïdor • DGACD • CTTI Solucions transversals • CTTI Àrea TIC • Negoci (Gabinet Tècnic, Comunicació...)

Els departaments podran proposar a la DGACD l'excepció a l'aplicació de l'Acord a un ens determinat quan hi concorrin circumstàncies excepcionals que ho aconsellin. Amb aquesta finalitat, adreçarà per escrit a la DGACD per explicitar les raons que justifiquin l'excepció. La DGACD resoldrà en el termini màxim d'un mes.

Esquema de sol·licitud de creació/transformació d’iniciatives web

ESTIL GRÀFIC

Bases gràfiques de l’estil gencat responsiu

El disseny pretén transmetre simplicitat a l'usuari, claredat i una bona jerarquia dels elements que permetin comunicar als usuaris les funcionalitats del portal.

• Tipografia

• Colors

• Retícules

• Icones i botons

• Imatges

• Textos i títols

• Enllaços, rollovers i efectes

Estil gràfic

Pendent actualitzar alguns aspectes (retícules, iconografia, rollovers i efectes).

! Descarregueu-vos els PNG per

crear maquetes gràfiques.

Estil gràfic: tipografia

Open Sans és la família tipogràfica corporativa de la Generalitat de Catalunya en publicacions web. Està dissenyada amb formes obertes i arrodonides, amb una aparença amable i neutra. Està optimitzada per a impressió, web i interfícies mòbils, i té una excel·lent llegibilitat. És una Google Font humanista, sense serifa, amb llicència Apache 2.0. Dissenyada per Steve Matteson, director de tipografia d'Ascender Corp. Conté 897 caràcters, incloent els de l’estàndard ISO Latin 1, Latin CE, Greek i Cyrillic. Open Sans a Google Fonts (exemples, cossos i caràcters) Pàgina de descàrrega de la Open Sans Família, cossos i variants Es disposa d'una família completa per poder dissenyar amb tots els matisos que calguin, cinc pesos de light a extrabold i una variant: una versió condensada light. Totes tenen versió itàlica.

Estil gràfic: tipografia

Conté un d'un extens catàleg de caràcters (897), amb accents oberts i tancats (àèìòùáéíóú), símbols (? @ © ® £ #)...

Estil gràfic: colors

Color principal El color corporatiu de la Generalitat de Catalunya és el vermell provinent de l'escut. Els codis per emprar correctament el color i les variacions per enfosquir i aclarir el vermell corporatiu (en salts del 25%), són els següents:

Usos del vermell • El color vermell s’utilitza per als enllaços i per

destacar motius gràfics que no aportin molta taca de color (ex.: icones, bullets...).

• No s’utilitza per donar color a zones grans que destaquin molt, només en petites aplicacions puntuals per donar un toc de contrast.

Paleta de colors (.ASE) Descàrrega de la paleta de colors de gencat en format .ASE (per a programes d'Adobe): Paleta de colors de gencat en format .ASE

Estil gràfic: colors

Grisos Hi ha cinc nivells de grisos per triar. Els tres primers s’utilitzen per donar forma a textos, icones i botons. Així, si cal crear un botó amb diferents estats, podem fer servir el #333333, #666666 i #999999. O si cal reforçar un títol per fer que destaqui sobre un text, també triarem aquesta tríada. El quart gris (#DDDDDD) s’utilitza per pintar línies i separadors. El cinquè gris (#F5F5F5) es fa servir quan calgui un color gris sòlid de fons.

Estil gràfic: colors

Altres colors Colors complementaris que s'apliquen a diferents components de gencat.cat, per trencar amb la sobrietat del gris i el vermell, i donar èmfasi a determinades peces.

Estil gràfic: retícules

Nota Tot i que l’estil gencat és responsiu i que les mides són relatives i s'adapten a la mida de la pantalla on es mostra, resulta impossible documentar el disseny amb dades relatives. Per tant, aquesta guia està expressada en píxels, i és en les descàrregues dels estils on hi ha expressats els % per a cada una de les retícules.

Retícula: escriptori És la retícula que regeix quan la pàgina es mostra en pantalles d'amplada major de 768 píxels, tradicionalment coneguda com versió d'escriptori. En la versió escriptori, el web fa 960 píxels d'amplada. Si la resolució de la pantalla és superior, carrega espai per l’esquerra i la dreta. Aquestes són les columnes a les quals cal ajustar-se per desenvolupar noves pàgines i peces de contingut:

100%

50 % 50%

66% 33%

33% 33% 33%

25% 25% 25% 25%

Estil gràfic: retícules

Retícula: tauleta La retícula de la versió tauleta fa 768 píxels d'amplada (amb 30 píxels de marge per a cada costat), i correspon a l'amplada que té la pantalla d'un iPad en vertical.

Estil gràfic: retícules

Retícula: mòbil En mòbil, degut a les limitacions de mida de la pròpia pantalla, els continguts es representen normalment a una columna. Aquesta pot ser, com a mínim: • De 320 píxels, a sang amb el marge del mòbil. • De 300 píxels, amb marge de 10 píxels a banda i banda. També es poden representar els elements a dues columnes. En aquest cas es divideix en 145 i 145 píxels deixant sempre els marges de 10 píxels a banda i banda.

100%

Estil gràfic: retícules

Fons de les pàgines: escriptori i tauleta El fons de les pàgines combina les següents franges: • Capçalera: color de fons gris fosc #333333 • Subcapçalera: banda de fons gris clar #F5F5F5 • Banda de contingut blanca: color de fons #FFFFFF • Peu: color de fons #F5F5F5 Els continguts es van muntant sobre bandes o pisos que es diferencien entre sí pel seu color de fons, ja sigui gris clar (#F5F5F5) o blanc (#FFFFFF), començant sempre pel color gris clar (#F5F5F5), i creant un efecte zebra. Si la pàgina té imatge de banda a banda a la capçalera, aquesta es carrega a sobre del primer bloc amb fons gris.

Estil gràfic: retícules

Quan el contingut es divideix en dues columnes, tot el bloc es carrega sobre fons blanc.

Estil gràfic: retícules

Fons de les pàgines: mòbil Per a la versió mòbil, les bandes coincideixen amb la versió d'escriptori/tauleta i segueixen el mateix comportament: el primer bloc és gris clar (#F5F5F5), el segon blanc, el tercer gris clar i així successivament creant l'efecte de zebra. De la mateixa manera que a la versió escriptori/tauleta: • Si la pàgina comença per imatge, aquesta carrega sobre fons

gris i, per tant, el següent bloc és de fons blanc. • Si el darrer bloc de contingut està sobre fons gris, es deixa un

espai blanc de 30 píxels entre aquest i el fons del peu de pàgina.

Estil gràfic: icones i botons

Com es construeixen Pendent explicar i actualitzar Els botons tenen color de fons vermell (#C00000)i text en blanc. Els botons tenen dos estats, activat i desactivat (amb transparència del 50%).

Enllaç de descàrrega S'han agrupat totes les icones emprades a la web en un PNG obert. • PNG: icones_gencat.png • PSD: icones_gencat.psd

Icones de xarxes socials i actualitat

Estil gràfic: icones i botons

Icones d’acció

Estil gràfic: icones i botons

Icones d’idiomes, documents i arxius, i descarregables

Estil gràfic: icones i botons

Icones només per a ús i identificació dels plans de Protecció Civil

Estil gràfic: imatges

L’estil de les imatges dels webs de la Generalitat de Catalunya és fotogràfic. L’aposta de la Generalitat en l’ús de les imatges, a l’igual que amb la resta de dades, és la reutilització: una imatge pot utilitzar-se en més d’un producte. L’origen de les imatges pot ser de tres tipus:

1. Pròpies, fetes per un mateix (amb tots els drets d’autoria i reproducció) 2. Del Banc d’Imatges de la Generalitat (BIG): Cal consultar les restriccions de reproducció. La

galeria “Font Generalitat” és la recomanada perquè indica les sense restriccions de reproducció.

3. De bancs externs amb imatges de domini públic: es recomana utilitzar aquest recurs com el darrer i controlar que els drets siguin lliures:

• Pixabay (http://pixabay.com/es/) • Public Domain Images (http://www.public-domain-image.com) • Stock Snap (https://stocksnap.io) • Pond 5 (http://www.pond5.com/free) • Public Health Image Library –PHIL (http://phil.cdc.gov/phil/home.asp)

Cal tenir en compte l’ús de les imatges per al seu tractament:

• Impactes gràfics: Si han de tenir textos sobreimpresionats, es recomana que no tinguin cap text perquè no es veuria.

• Baners: Es recomana que el contingut de la imatge estigui centrat i en la part superior de la imatge, perquè cal afegir una capa degradada a gris fosc en la part inferior perquè el text del bàner sigui legible.

• Notícies i articles: Han d’il·lustrar els productes. No es pot emprar: • Imatges de menors d’edat sense el consentiment per escrit dels pares o tutors. • Imatges amb contingut ofensiu (maltractaments, violència, etc.). • Imatges amb poca qualitat (massa pixelades o que no es diferencia el contingut).

Les icones estan regulades a la guia d’estil gràfic (http://www.gencat.cat/web/guies/estil/#estils1_1_9)

Mala pràctica

• Utilitzar flash ja que no es

veuen en dispositius mòbils ni tauletes IOS.

• Incloure imatges amb un pes superior a 500 kb.

• Imatges en moviment continuo (gifs animats).

Estil gràfic: textos i títols

Mides, jerarquies i tipografies dels textos. Per defecte, el color que s’utilitza per als textos és el gris #666666 i per als títols grans el #333333; la tipografia és l’Open Sans.

Escriptori i tauleta

Estil gràfic: textos i títols

Mòbil

Estil gràfic: enllaços, rollovers i efectes

Per defecte, els enllaços textuals dels webs amb disseny gencat són de color vermell (#C00000). • En la versió escriptori, posant el cursor a sobre de l’enllaç (rollover), aquest es subratlla. No obstant, i

segons el component on s’apliquen els enllaços, aquests seran del color del text corresponent (blanc, gris, negre,...), i serà el rollover subratllat qui indicarà si aquell text és un enllaç.

• En la versió tauleta i mòbil, al no haver-hi rollover, els enllaços no es subratllen. L’efecte en aquest cas es tab que emmarca l’enllaç amb un fons gris ???

Falta exemple efecte tab

PLANTILLA BASE

Elements estructurals

Plantilles base

Pendent fer la plantilla base en html

Elements estructurals ESTRUCTURA

Estructura de la plantilla escriptori/tauleta

Capçalera

Subcapçalera

Cos

Faldó

Peu

Estructura de la plantilla mòbil

Capçalera

Subcapçalera

Cos

Faldó

Peu

Elements estructurals CAPÇALERA

La capçalera, com es mostra

La capçalera és la zona de la pàgina que es troba a la part superior de la pàgina, sempre amb un fons gris fosc (#333333). És un element estructural, comú de totes les pàgines, que inclou els elements d’identitat corporativa, que serveixen per identificar els webs de la Generalitat de Catalunya. La capçalera té dues visualitzacions diferents, una per a la versió escriptori i tauleta i una altra per a la versió mòbil. En els dos casos es mostren els mateixos continguts però amb una distribució diferent.

En el cas de la versió mòbil, es mostra el contingut en una franja que conté: a l’esquerra, el menú de navegació plegat, en un format estàndard de mòbil; a continuació el títol del web, i a la dreta la icona d’una lupa, que indica el lloc del cercador. • Els idiomes no es mostren a la capçalera sinó al peu. • Pel que fa al logotip, es mostra dins del menú de navegació, que desplega els fills de la pàgina inicial. • La capçalera mòbil sempre és visible i es manté fixa a la part superior de la pantalla, encara que l’usuari faci scroll, de manera que

mai perd la identificació i les opcions de navegació.

Mala pràctica

Incloure més d’un logotip, convivint amb el logotip de gencat.cat. No està permès. No està permès canviar el color gris fosc de la capçalera.

En les versions d’escriptori i tauleta, tots els elements es mostren a la part superior en tres franges horitzontals: • una primera que conté el logotip de la Generalitat, els enllaços, els idiomes i el cercador; • una segona franja amb el títol del web, a sota del logotip, • i una tercera franja a sota on es troba el menú principal de navegació.

Elements de la capçalera

Títol del web Títol del web

Versió escriptori i tauleta

Versió mòbil

Exemple: http://cads.gencat.cat

Elements de la capçalera: logotip

Nom del web Element obligatori. El logotip té unes mides de 172x29 px i conté un enllaç al web gencat.cat. Aquest logotip és el genèric de les webs de la Generalitat de Catalunya. No es pot canviar pel logotip d’un departament o d’una unitat orgànica. Sempre ha de ser aquest logotip de no ser que DGACD ho autoritzi com a excepció. El logotip es pot descarregar en el web del Programa d’identificació visual (PIV) http://identitatcorporativa.gencat.cat/ca/descarregues/departaments-i-imatges-propies/departament-de-la-presidencia/identificacions-propies/gencat.cat/ . Com es visualitza? Versió escriptori i tauleta: El logotip es troba a la part superior esquerra de la pàgina. Es mostra sobre un fons gris i està compost en blanc (escut i lletres). Versió mòbil: Es mostra dins del menú principal, quan es desplega. És el primer ítem abans del menú de navegació i també es mostra sobre fons gris i està compost en blanc.

Elements de la capçalera: enllaços

Nom del web Element opcional. En el cas de gencat i dels webs departamentals, hi ha un enllaç a la versió accessible més integral del web (versió Inclusite) i surt per defecte. No es permet posar altres enllaços en aquest apartat, només hi pot haver l’enllaç a la versió accessible. Com es visualitza: Versió escriptori i tauleta: l’enllaç es troba a la part superior de la pàgina, alineat la dreta. La ubicació dependrà de la resta d’elements de la pàgina. Si es mostra el cercador, ha de ser el primer element per l’esquerra i a continuació s’ha de mostrar l’enllaç. Si a més a més, hi ha les icones del multiidioma, l’enllaç a la versió accessible es desplaçarà més cap a l’esquerra. Versió mòbil: Es mostra dins del menú principal, quan es desplega. És el darrer ítem després del menú de navegació i se’n diferencia perquè té un símbol inicial (>).

Elements de la capçalera: idiomes

Element opcional. Enllaços a les diferents versions idiomàtiques del web. Aquest element és obligatori si el web està disponible en més d’un idioma. Si el web només està en català, no caldrà indicar-ho. Les icones surten automàticament quan es creen les pàgines multiidioma amb el gestor de continguts corporatiu GECO+. Tenen un ordre preestablert (d’esquerra a dreta): • Català (CA) • Castellà (Castellano) (ES) • Anglès (English) (EN) • Occitan-aranès (OC) Es mostren amb icones, que són les sigles internacionals de l’idioma: CA, ES, EN, OC. El title dels enllaços és el nom complet de l’idioma en l’idioma corresponent. Com es visualitza? Versió escriptori i tauleta: Les icones del multiidioma es troben a la part superior de la pàgina, alineades a la dreta. La ubicació dependrà de la resta d’elements de la pàgina. Si es mostra el cercador, ha de ser el primer element per la dreta i a continuació a l’esquerra s’han de mostrar les icones multiidioma. Si no hi ha cercador, estaran alineades a la dreta. Versió mòbil: Es mostren al peu de la pàgina, sota l’avís legal i abans del logotip. Les icones estan centrades.

Mala pràctica

Incloure banderes per indicar els idiomes. Una bandera d’un país no és representativa d’un idioma i viceversa.

Elements de la capçalera: cercador

Element obligatori.

El cercador es mostra sempre en totes les pàgines, menys en les pàgines d’inici de les versions escriptori i tauleta, que es mostra a l’àrea de subcapçalera i no a la capçalera. Capçalera pàgina inici

Per defecte, els webs de la Generalitat utilitzaran el cercador corporatiu GSA. Aquest es pot configurar de les maneres següents: • Per col·lecció • Per URL • Per tot gencat.cat Si un web té un cercador propi (per exemple el cercador del SOC), s’ha de configurar aquest cercador específic i no el de gencat. Com es visualitza? Versió escriptori i tauleta: Caixa de cerca a la part superior dreta. Versió mòbil: Es mostra com una lupa a la part dreta de la capçalera, que, quan es prem, mostra la caixa de cerca.

Nom del web

Elements de la capçalera: nom del web

Element obligatori.

Tots els webs han de tenir un títol, que serà invariable, que es repetirà en totes les pàgines i al mateix lloc, i que representa què és aquest web. Ha de ser clar i intel·ligible, ja que és la marca que identifica aquell web i en quin web es troba l’usuari. • El nom del web sempre és enllaçable a la pàgina d’inici. • Depenent de la resolució dels diferents dispositius i de la longitud

(nombre de caràcters) del nom del web, tindrem diferents mides de lletra.

Nom del web

Exemple: nom fins a 50 caràcters

Exemple: nom entre 51 i 60 caràcters

Exemple: nom entre 61 i 78 caràcters

Exemple: nom de més de 78 caràcters

En mòbil, la mida del text es redueix conforme augmenta el nombre de caràcters, amb l’objectiu que hi càpiga en tres línies com a màxim.

Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/capcalera/mida-titol-del-portal/

Elements de la capçalera: menú de navegació principal

Nom del web

Nom del web

Element obligatori La navegació principal es fa a partir d'un menú de seccions que, en la versió escriptori i tauleta apareix en horitzontal a sota del nom del web, en fons gris fosc#333333, i en la versió mòbil a la capçalera, a la part esquerra i tancat. El menú principal es recomana que tingui entre 5 i 7 punts de navegació de 1r nivell, incloent-hi l’enllaç a Inici, que en el disseny corporatiu sempre apareix. Cal comprovar sempre com queda el menú horitzontal en la versió en tauleta vertical, que no es col·loqui en dues línies. En aquest cas es poden fer dues coses: • Reduir el nombre de caràcters i/o de seccions. • Convertir a una determinada resolució el menú horitzontal a menú mòbil. Els webs departamentals han de seguir l’arbre de seccions principals següent: 1. Inici 2. Departament 3. Àmbits d’actuació 4. Tràmits 5. Actualitat 6. Contacte

Bona pràctica

• L’ús de títols breus, concisos i que

hi càpiguen en una línia.

• Es recomana que el Contacte sigui un element del menú de navegació principal.

Elements de la capçalera: menú de navegació principal escriptori Per desplegar el menú, cal clicar a sobre l’opció desitjada i s’obre una interfície amb la llista de les seccions de 2n nivell. Mostrar el 3r nivell és opcional. La versió escriptori mostra el menú en una retícula de 4 columnes, ocupant-ne 3 i deixant-ne una per a bàners.

Hi ha tres maneres de tancar el menú: • Clicant a qualsevol àrea de la pantalla fora del

menú que no tingui enllaç. • Clicant la icona de tancar de la dreta. • Clicant a sobre de la secció que desplega el

menú en forma d’interfície.

Gràficament, s’indica en fons blanc l’opció seleccionada, i en gris #BBBBBB el mouse over i l’opció desplegada.

Bona pràctica

Es recomana ordenar alfabèticament la llista de subseccions si n’hi ha moltes.

Els bàners no són obligatoris i no n’hi poden haver més de 2. Els textos han de ser molt curts (màxim 20 caràcters). Les mides de les imatges són: 184x126 px.

Elements de la capçalera: menú de navegació principal tauleta La versió tauleta mostra el menú en una retícula de 3 columnes, ocupant-ne 2 i deixant-ne una per a bàners.

Elements de la capçalera: menú de navegació principal mòbil La versió mòbil es mostra un menú plegat a la part superior esquerra. Per desplegar-lo, cal clicar-hi i es mostra el 1r nivell de navegació. Si hi ha un 2n nivell de navegació, s’indica amb una icona desplegable cap abaix. Per obrir aquest menú, cal clicar-hi damunt. En mòbil no es mostra el 3r nivell de navegació. Tampoc no es mostren els destacats en imatge que sí que apareixen en escriptori i tauleta.

Actualitzar imatge amb menú complet de gencat (enllaç versió accessible)

Elements estructurals SUBCAPÇALERA

La subcapçalera, com es mostra

Anomenem subcapçalera l’àrea just per sota del menú de navegació principal de la capçalera, que, per defecte, té un fons gris clar #F5F5F5 i on es col·loquen els diferents elements. • Fil d’Ariadna (en mòbil: no es reprodueix) • Eines de compartició (en mòbil: es col·loquen al final de la pàgina, just abans del faldó/peu) • Títol de la pàgina • Menú de navegació secundari • Impacte gràfic de fons

Subhome

Nom del web

Lorem ipsum dolor sit amet

Les eines de compartir es col·loquen a la part inferior de la pantalla, just abans del faldó/peu de pàgina, amb l’etiqueta Comparteix a: i alineades a l’esquerra.

El fil d’Ariadna no es reprodueix en mòbil.

Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/subcapcalera/

Elements de la subcapçalera: fil d’Ariadna

Subhome

Element obligatori. El fil d’Ariadna: • Indica la jerarquia o camí on es troba un contingut. • Informa l’usuari en quina pàgina es troba. • És una eina de navegació més per accedir a nivells anteriors. • Totes les seccions són clicables menys la darrera, que indica el nom de la pàgina on es troba l’usuari. • Les pàgines d’inici no tenen fil d‘Ariadna.

! Amb el gestor corporatiu GECO+, la jerarquia de la informació del fil d’Ariadna es perd en les pàgines finals quan es prové d’una llista automàtica de continguts, i el fil només indica Inici > títol de la pàgina. És una incoherència del gestor que no té solució.

En mòbil, per optimitzar espai i prioritzar contingut, el fil d’Ariadna no es reprodueix.

Elements de la subcapçalera: eines de compartició

Subhome

Element opcional. En escriptori i tauleta, l’àrea on es col·loquen les eines de compartir i d’imprimir el contingut d’una pàgina és a l’alçada del fil d’Ariadna. Els webs fets en GECO+ es poden configurar de manera que no es mostrin aquestes eines. Van totes juntes, no es pot configurar de manera que unes apareguin i les altres no. En mòbil, les eines es col·loquen a la part inferior de la pantalla, al final del contingut de la pàgina i abans del faldó/peu, amb l’etiqueta Comparteix a: al davant.

• Les xarxes socials estàndards i recomanades són Twitter i Facebook, i, per

defecte, són les que col·loca el gestor corporatiu GECO+. Si cal posar-ne altres de diferents, la DGACD ho avaluarà en cada cas.

• La possibilitat d’enviar el contingut per correu electrònic també és una funcionalitat prou utilitzada i també surt per defecte a GECO+.

• També s’hi inclou la possibilitat d’imprimir el contingut (conté un css específic?)

! Per qüestions tècniques, en la versió mòbil dels webs construïts en GECO+, no poden reproduir la funcionalitat d’Envia per correu electrònic.

Elements de la subcapçalera: envia per correu electrònic

Subhome

Envia per correu electrònic es desplega en una capa quan s’hi clica. Un cop s’envia el missatge, apareixen missatges de confirmació o d’error. Per temes de LOPD, no es demana mai el correu electrònic de l’emissor ni s’emmagatzemen les dades introduïdes, només serveixen per fer l’enviament. El missatge que rep el destinatari és amb una bústia que no admet resposta.

Elements de la subcapçalera: títol de la pàgina

Subhome

Nom del web

Lorem ipsum dolor sit amet

Element obligatori. El títol d’una pàgina ha de ser intel·ligible i consistent.

Elements de la subcapçalera: menú de navegació secundari

Subhome

Nom del web

Lorem ipsum dolor sit amet

Element obligatori. El menú secundari apareix per indicar la navegació interior d'una secció, quan tingui més de 3 nivells de profunditat en el seu arbre de continguts. També pot aparèixer en el 2n nivell de navegació, però no cal si el menú principal ja mostra el 3r nivell. Per desplegar el menú, cal clicar sobre la icona i es desplega un menú d’opcions. Aquesta icona canvia pel símbol de tancar (creu blanca sobre fons vermell). Gràficament es mostra igual en tots els dispositius. • Per indiciar que una secció té subnivells, apareix la icona de fletxa

gris claret a la seva dreta que desplegarà els seus subnivells un cop s’hi faci clic. L’estat de la fletxa aleshores canvia per una de gris fosc i apuntant cap amunt.

• La franja degradada al costat del títol de la secció indica el rollover i on es troba l’usuari.

• El nivell superior (primer nivell) és clicable a la secció corresponent.

Elements de la subcapçalera: menú de navegació secundari

Elements de la subcapçalera: impacte gràfic

Subhome

Nom del web

Lorem ipsum dolor sit amet

Subhome

Nom del web

Elements de la subcapçalera: impacte gràfic

Element opcional. En substitució del fons gris, es pot incloure una imatge fotogràfica, per sobre de la qual hi anirien els elements descrits anteriorment. Gràficament, canvia el títol de la pàgina, que es mostra amb el text blanc i negreta. Els elements es carreguen sobre una capa a la part inferior de la subcapçalera, amb un degradat de gris #333333 a transparent, que serveix perquè el text es pugui llegir sobre qualsevol imatge sense veure's alterada la lectura. Igualment, cal trobar imatges que en la seva part inferior no continguin blanc i siguin més aviat fosques. En les pàgines d’inici, no es permet incloure una imatge a la subcapçalera, ja que aquesta àrea està destinada només al cercador. Les imatges han de ser il·lustratives de la secció/pàgina i no han de contenir missatges textuals ni logos. Les mides perquè es vegin correctament en tots els dispositius són: 1349 x 264

Elements estructurals FALDÓ

El faldó, com es mostra

Element obligatori, menys en les pàgines de detall. • El faldó s’utilitza com a element important de navegació i d’accessos directes a continguts que no es

troben a primer o segon nivell. • També és el lloc on incloure l’accés a les xarxes socials del promotor del web, i l’accés a les eines d’ajuda. • En les pàgines de contingut final, a l’haver-hi ja molt contingut, no s’acostuma a incloure faldó. • En el disseny gencat responsiu, es compon de diferents mòduls en els quals es poden incloure enllaços,

llistes, icones i altres elements.

Versió escriptori

Versió tauleta

Versió mòbil

Elements del faldó

El faldó pot estar format pels elements següents: Llista desplegable S’utilitza per llistar els organismes pertanyents a un departament o organisme. Té un títol descriptiu que es mostra dins del desplegable quan no hi ha cap enllaç seleccionat (per exemple, “Organismes”).

Llistes d’enllaços Blocs d’enllaços sota un títol (Directe a, Webs més vistos, Ajuda). • Aquests enllaços s’utilitzen per destacar webs o pàgines que interessin a

l’organisme promotor, ja que el faldó es mostra a totes les pàgines de la navegació.

• Es recomana que els enllaços no siguin massa llargs (20 caràcters màxim) i siguin el més il·lustratius possibles (per exemple “Llengua catalana”, “Seu electrònica”, “Diari Oficial”...).

• També es recomana emprar els enllaços per incloure la navegació de les pàgines d’ajuda del web, que són: el mapa web, la informació sobre el web, les dades sobre l’accessibilitat de la pàgina i, si s’escau, un llistat dels webs de l’organisme (per exemple, “Webs A-Z”). Aquest apartat d’ajuda resulta molt útil per a la navegació dels usuaris que desconeixen el funcionament del web, ja que guia la navegació a través del mapa web i explica qui és el promotor del web i les responsabilitats legals que en té.

Elements del faldó

Giny de Twitter Es mostra el darrer tuit del compte de Twitter que seleccioni l’organisme promotor del web. Si no en té, es recomana mostrar el contingut del compte @012. Inclou l’avatar del compte i el tuit.

Cercador organismes de la Generalitat Caixa de cerca que ofereix resultats de la base de dades d’organismes. Mostra els resultats a la pàgina del cercador. El text de la capsa de cerca ha de ser “Cercador d’adreces i telèfons”. A sota del cercador es mostra una llista d’enllaços que es poden configurar.

Llista de xarxes socials Icones de les xarxes socials on l’organisme promotor del web està present. Aquestes icones han de seguir l’estil definit en aquesta guia. Si l’organisme no té comptes a les xarxes socials, es presentaran les icones de les xarxes de gencat (Facebook, Twitter, YouTube...).

Elements estructurals PEU

El peu, com es mostra

Logotip • Al peu de pàgina ha de constar el logotip de la Generalitat de de

Catalunya. • En el seu lloc pot constar també el logotip oficial del PIV de l’organisme

que firma el web. No poden conviure junts, ha de ser o l’un o l’altre. Cal agafar del web del PIV el logo en blanc i negre, en format horitzontal, i aplicar-lo en el gris X i fons transparent perquè es llegeixi correctament sobre el fons gris del peu de pàgina. Mides?

• En el cas que hi hagi més d’un promotor d’un web i aquests siguin de la Generalitat de Catalunya, només constarà el logotip de la Generalitat.

• El disseny gencat corporatiu no està pensat perquè convisquin més promotors d’altres administracions, ja que és el disseny que identifica que un web pertany a la Generalitat de Catalunya.

Mala pràctica

• Incloure al peu de pàgina la

firma/logotip de l’empresa desenvolupadora del web.

• No es pot utilitzar en aquest espai un logotip o marca del portal no corporatiu ni acceptat pel Programa d’Identificació Visual.

! Llegiu en el web del

PIV com harmonitzar els logos de la Generalitat quan hi ha col·laboració o coexistència amb d’altres. http://identitatcorporativa.gencat.cat/ca/identitat-visual/collaboracions-i-coexistencia/

Element obligatori. Avís legal Tots els webs de la Generalitat han de contenir i complir l’avís legal de gencat.cat. Avís legal: La ©Generalitat de Catalunya permet la reutilització dels continguts i de les dades sempre que se citi la font i la data d'actualització, que no es desnaturalitzi la informació i que no es contradigui amb una llicència específica.

Els webs que s’excepcionin del contingut d’aquest avís legal han de tenir, per tant, la corresponent llicència que s’hi adigui.

PLANTILLES, MODELS DE PÀGINA I COMPONENTS

7

Plantilles, models de pàgina i components

• Pàgina d’inici • Subhomes:

• Model Àmbit • Model Actualitat • Model Tràmits

• Distribuïdores • Reportatges • Agenda d’activitats • Article • Butlletins electrònics • Carrusel • Curs • Descripció pàgina • Entitat • Formularis • Glossari • Imatges i galeria d’imatges • Llistes • Mapa web • Normativa • Notícia • Pregunta freqüent • Publicació • RSS • Tràmit • Taules i htmls • Vídeo i llista de reproducció (playlist)

En procés de desenvolupament

INTEGRACIONS

8

Integracions

• Bústia de contacte • Cercador gencat • Cercador SAC organismes • Formularis gencat • Perfil del contractant • Sala de premsa • Aplicacions externes • Giny Twitter

En procés de desenvolupament

DESCÀRREGUES

9