Gencat 2003

s www.gencat.netguia d�estil

presentacióEls canvis que es produeixen a internet com a conseqüència de les seves possibilitats i el ritme de creixement dels webs dels departaments i dels organismes de la Generalitat de Catalunya provoca que els criteris de disseny gràfic establerts amb la finalitat d�oferir als ciutadans una imatge corporativa homogènia, coherent i unificada del portal de la Generalitat de Catalunya, el gencat, quedin ràpidament obsolets.

Es fa necessari, per tant, revisar periòdicament aquests criteris de disseny gràfic i de navegació per tal d�establir elements comuns a tot el portal gencat, als webs dels departaments i als organismes de la Generalitat de Catalunya.

La present Guia d�estil, aprovada mitjançant l�Acord de Govern de 8 de gener de 2003, estableix unes pautes de disseny gràfic comunes pensades per permetre que la imatge corporativa de la Generalitat es projecti d�una manera correcta i unificada, però també atractiva, moderna i actual. Per aquesta raó, la navegació i la usabilitat que s�estableixen en són elements clau.

Cal destacar, també, que la Guia ha estat pensada especialment per garantir l�accés a la informació a les persones amb disminució, seguint les indicacions de l�Acord de Govern sobre accessibilitat de 26 de juny de 2001i les pautes internacionalment establertes pels organismes competents en la matèria.

Des dels seus inicis l�any 1995, quan emergien a la xarxa els primers webs, el gencat ha mantingut la seva voluntat de millora constant, evolucionant i creixent en continguts amb la voluntat d�oferir un servei de qualitat als ciutadans. El disseny, la navegació i l�arquitectura de continguts que s�estableixen en aquesta Guia d�estil responen a aquest objectiu últim.

Artur MasConseller en cap

Gener 2003


1s www.gencat.net

guia d�estil índex

superfíciedistribució dels elementsmargestextos destacats, títols i elements de navegaciócapçaleraestructura de les pàginestipologia de pàgines

logotiptipografia i textoscolorcomplements gràficsimatgesformularisaltresrecomanacions

accessibilitatCSSJavascriptmenús dinàmics

índexintroducció

requeriments tècnics

retícula

recursos gràfics

sistema de navegació

interactivitat

programació

2

3

456789

13

1617203134383940

41

45

47505152

2s www.gencat.net

guia d�estil

introduccióL�objectiu d�aquesta guia és transcriure, definir i proporcionar els elements i recursos que intervenen en el disseny i en la identitat de gencat.net.Aquests elements es tracten de manera suficientment oberta com per a poder resoldre qualsevol necessitat o eventualitat que no estiguin contempladesen aquest document.

El disseny del portal s�ha pensat per a potenciar la claredat, l�accessibilitat i la funcionalitat dels seus continguts.! Claredat per a mostrar i interpretar tota la informació de forma intuïtiva.! Accessibilitat i compatibilitat per a facilitar l�accés als continguts a qualsevol internauta.! Funcionalitat per a oferir a l�usuari un servei adequat i eficaç.

" Com a complement i per a una millor comprensió de l'abast d'aquest manual, és imprescindible conèixer www.gencat.net.

introducció

http://www.gencat.net

3s www.gencat.net

guia d�estil

requeriments tècnicsgencat.net s�ha construït amb l�objectiu d�aconseguir la màxima compatibilitat amb els requeriments tècnics dels usuaris.

Dimensions de la pantalla: 15� (800x600 píxels)Gestió del color: 24 bits (milions de colors)Navegadors i versions

Netscape v4.5.x

Internet Explorer v4.x

requeriments tècnics

http://www.netscape.com

http://www.microsoft.com

4s www.gencat.net

guia d�estil

retícula" La retícula és la parcel·lació (distribució) per mòduls d�una pàgina.

Hi ha mòduls fixos (navegació principal, capçalera, etc.) i n�hi ha de dinàmics en funció del seu context.

1. Superfície410x795 píxels (sense el marc del navegador).

" La disposició i reiteració dels elements en totes les pàgines del lloc web determinen la seva rellevància i en conseqüència la seva jerarquia.

retícula | superfície

800 px 15"

410 px

600 px15"

795 px

5s www.gencat.net

guia d�estil

retícula2. Distribució dels elementsEls elements s�han distribuït per zones dintre l�estructura de la pàgina.

2.1. Zona superiorEl logotip, la referència de primer nivell, els recursos i eines i el menú de navegació principal.

2.2. Zona inferiorLa �ruta de navegació�, l�àrea de continguts dinàmics o estàtics (segons la pàgina), els enllaços a informació complementària('avís legal' i 'sobre el web') i els drets d�autor.

* En totes les pàgines s�ha contemplat la possibilitat d�incloure una barra de desplaçament vertical (scroll).

retícula | distribució dels elements

referència 1r nivelllogotip

recursos i eines

navegació principal

àrea de continguts

informació complementària

ruta de navegació

V

V

*

6s www.gencat.net

guia d�estil

retícula3. Marges

3.1. Marges estructuralsMarges fixos, independentment de la resolució de la pantalla.

* Variable en funció de la resolució de la pantalla. En resolucions superiors a 800x600, el cos de la pàgina se centrarà horitzontalment.

3.2. Marge entre els elements de la pàgina

retícula | marges

20 px horitzontalment10 px verticalment

16 px

41 px18 px

V

V

**

7s www.gencat.net

guia d�estil

retícula4. Textos destacats, títols i elements de navegació

Els textos destacats, títols i elements de navegació comparteixen una mateixa estructura gràfica amb un text sobre una franja de dimensions fixes(escalable horitzontalment segons el seu context).

retícula | textos destacats, títols i elements de navegació

mòdul base per a destacats, menús i botons escalable 16 px

8s www.gencat.net

guia d�estil

retícula5. CapçaleraLa capçalera té la mateixa estructura modular en totes les pàgines del lloc web.

" D'acord amb criteris d�usabilitat, s�ha limitat a 12 el nombre màxim d�elements que poden aparèixer en el menú de navegació principal.

Per a solucionar la limitació d�espai en el títol de les opcions del menú de navegació principal, s�ha establert la possibilitat de redimensionar-lo a l�equivalent del doble de la seva longitud.

-Els elements invariables i que han de ser presents a totes les capçaleres són el logotip de gencat.net i el mòdul de cerca.-Els elements de contingut variable i personalitzable són: la referència de 1r nivell, el menú de navegació principal i els complementsi recursos del lloc web.

! Per qüestions de coherència s�ha de respectar l�estructura i la disposició dels elements de la capçalera.

retícula | capçalera

92 px 184 px

736 pxlogotip "gencat.net" 5 px

22 px73 px147 px

escalable

referència 1r nivell

recursos i eines del lloc web

navegació principal (2n nivell)92 px

10 px

10 pxcercador

10 px

16 px

16 px

16 px

16 px

escalable

20 pxcos del text

9s www.gencat.net

guia d�estil

retícula6. Estructura de les pàginesEstructura vertical de la pàgina d�inici.

La pàgina d'inici està composta per elements que disposen d'atributs variables en funció de les seves pròpies característiques, que li proporcionen flexibilitat i dinamisme:

-Les àrees 'recursos i eines' i 'informaciócomplementària' permeten mostrar totes aquelles funcionalitats que ofereix cada lloc web.

-La 'navegació principal' possibilita certa flexibilitat, ja que permet combinar la quantitat, disposiciói colors dels elements mostrats dintre la retícula.

-La 'rotació' establerta per a la imatge principal proporciona un suport de comunicaciómés complet, amb capacitat per a complementar i transmetre múltiples missatges.

-La modularitat de 'l'àrea de continguts' facilita una estructura adaptable a les necessitats del lloc web en funció dels requeriments i condicionants dels seus continguts.

retícula | estructura de les pàgines

capçalera

imatge (composició)

notícia

secció 'Destaquem'tema destacat

escalable(vertical)

complements del lloc web

10 px

16 px

16 px

16 px18 px

105 px

10 px

10 px

10 px

10s www.gencat.net

guia d�estil

retícula6. Estructura de les pàginesEstructura vertical de les pàgines de segon nivell.

6.1. Relació del títolde la pàgina ambla navegació, imatge i fons


ruta de navegació 16 px

23 px11 px

10 px16 pxenllaç, menú desplegable o imatge

enllaç, menú desplegable, textos o imatge

escalable (vertical)

títol de la pàgina

11s www.gencat.net

guia d�estil

retícula6.2. Relació del títol de la pàgina amb text directe


text d'introducció

escalable(vertical)

enllaç, menú desplegable, textos o imatge

títol de la pàgina20 px

14 px

12s www.gencat.net

guia d�estil

retículaL�estructura i la configuració dels mòduls de la zona de continguts s�adaptarà en funció dels elements que apareguin a la pàgina.Exemple de disposició regular de mòduls

" Totes les estructures modulars s�han de dissenyar i aplicar segons els criteris gràfics establerts en aquest manual.


1 mòdul736 px

2 mòduls358 px

3 mòduls232 px

4 mòduls169 px

20 px

1 mòdul

3 mòduls

4 mòduls

2 mòduls

13s www.gencat.net

guia d�estil

retícula7. Tipologia de pàginesEl lloc web és un ens viu en constant creixement i evolució. No és possible descriure tots els tipus de pàgina que en un futur es necessitaran per a requeriments concrets. Per això en aquesta guia només es defineixen els tres tipus de pàgina bàsics.

Pàgina d'inici

retícula | tipologia de pàgines

14s www.gencat.net

guia d�estil

retícula

Pàgines de primer nivell


15s www.gencat.net

guia d�estil

retículaL'estructura interna de les pàgines d'últim nivell dependrà dels continguts que incorpori.

Pàgina d'últim nivell


16s www.gencat.net

guia d�estil

recursos gràfics1. LogotipEl logotip, ubicat a la part superior esquerra de totes les pàgines, substitueix el que fins ara ha estat vigent i enllaça amb la pàgina d�inici de gencat.net.

La seva localització i dimensions han de ser constants en totes les pàgines.

Cal evitar el protagonisme d�altres marques que puguin competir amb el logotip de gencat.net.

! Tant l'arxiu que correspon al logotip com els arxius especificats al subapartat ('recursos gràfics | complements gràfics') són descarregables.

recursos gràfics | logotip

17s www.gencat.net

guia d�estil

recursos gràfics

2. Tipografia i textos

2.1. Tipografia baseArial

Seguint les pautes corporatives, s�ha establert que la tipografia del lloc web sigui Arial (una versió més equilibrada i compensada de l�Helvètica en la seva interpretació en mapa de bits).

Lliure de drets. S�inclou en totes les plataformes.

recursos gràfics | tipografia i textos

11

9

18

ABCÇDEFGHIJKLMNÑOPQRSTUVWXZabcçdefghijklmnñopqrstuvwxz0123456789



18s www.gencat.net

guia d�estil

recursos gràfics2.2. Cos

El cos 11 és el cos base en tot el lloc web.*

El cos 9 es destina a temes de rellevància menor: llegendes, drets de còpia i textos del menú desplegablede �Departaments del Govern� (a la pàgina d�inici). **

El cos 18 s�aplicarà en els títols de les pàgines. ***

! Les variables de cos no contemplades només es podran utilitzar per a destacar elements d�especial importància.Per exemple, l�apartat �Destaquem� de la pàgina d'inici.


* ** ***

19s www.gencat.net

guia d�estil

recursos gràfics2.3. Presentació de textos

2.3.1. AlineacióTots els textos es presentaran alineats a l�esquerra per a millorar la seva llegibilitat.

2.3.2. Estils de textPer qüestions gràfiques i de llegibilitat, se suggereix evitar aplicar negretes o cursives en els textos.

" Per a garantir l�accessibilitat i facilitar el manteniment dels continguts, es recomana no tractar cap text com a imatge.


20s www.gencat.net

guia d�estil

recursos gràfics3. Color

" S�ha definit un esquema de color per a orientar, ubicar i jerarquitzar visualment els continguts.

3.1. AplicacióEl color s�aplica sobre fons, destacats, textos, enllaços, menús i botons.# valors dels colors expressats en nomenclatura hexadecimal.

3.1.1. Fons i destacats

FonsS�aplica el blanc al fons de tot el lloc web (millora la llegibilitat i facilita la impressió de les pàgines).

El gris s'aplica al fons dels mòduls per a destacar continguts de certa rellevància.

recursos gràfics | color

F4F4F3 #

fons gris per a ressaltar textos

fons grisper a emmarcar mòduls

21s www.gencat.net

guia d�estil

recursos gràficsDestacats

" Els destacats són fons associats a un text i la seva funció és separar continguts per mòduls dintre l�estructura de la pàgina.

Colors dels destacats per a ressaltar títols en les pàgines de complements del lloc web:


AEA892 818871 535847 #

BFB211 736300 9A8D09 #

destacats per a separar continguts per mòduls

destacats per a pàgines dels complements del lloc web

22s www.gencat.net

guia d�estil

recursos gràfics3.1.2. Textos i enllaços

TextColor dels textos:

Llegendes, peus de pàgina i notes al margeEl criteri de color que s�aplica sobre aquests textos depèn de la rellevància de cada cas.

Els colors són:

Títols de pàginaColor aplicat als títols de pàgina:


535847 #

B1B1B1 818871 #

818871 #

23s www.gencat.net

guia d�estil

recursos gràficsEnllaçosA tots els enllaços s�aplicarà el color que correspongui segons el seu estat:

3.1.3. Menús i botons:

3.1.3.1. Menú principal

Fons dels títolsVariables de color aplicables als títols del menú principal.

* Correspondències d'iconografia (veure també l'apartat iconografia).


A17400 535847 818871 949600 #

inactiu ressaltat seleccionat visitat inactiu ressaltat seleccionat visitat

B78100 CC2E00 498100 A3416A 535847 1B5BA3

1 2 3 4 5 6

008172 6E4EB8 000000 77471D 8CA700 E08F00 #

7 8 9 10 11 12 *

24s www.gencat.net

guia d�estil

recursos gràficsCombinacions de les variables de color amb la dinàmica del menú:

" El color assignat a les diferents seccions del menú no implica una vinculació cromàtica de les seves pàgines.


navegació principal (2n nivell)


mòdul doblenavegació principal (2n nivell)


composició per a més de vuit títols

25s www.gencat.net

guia d�estil

recursos gràficsTítolsEl color per als títols de les seccions del menú principal és el blanc.

OpcionsColor del text i el fons de les opcions del menú:

RessaltatsEl color del text ressaltat és blanc sobre la franja del color que s�ha aplicat a l�opció del menú.


C9C8BD #535847

Text Fons

26s www.gencat.net

guia d�estil

recursos gràfics3.1.3.2. Menú de �Departaments del Govern�

Colors

El color assignat al títol de la capçalera és el blanc.


RessaltatsEl color del text ressaltat és blanc sobre la franja del color que s�ha aplicat al menú de �Departaments del Govern�.


DFB30C #

535847

Text Fons

DCDAD1 #

27s www.gencat.net

guia d�estil

recursos gràfics3.1.3.3. Menú de continguts

Colors



Fons

DCDAD1 #

Títol

A17400

535847

Text Fons

DCDAD1 #

28s www.gencat.net

guia d�estil

recursos gràficsRessaltatsLa composició de colors del ressaltat és la mateixa que la composició de colors de la seva capçalera.

3.1.3.4. Menú de la �ruta de navegació�

ColorsComposició de colors per a l'estructura del menú:


F4F4F3

Títol i text

A17400 #

Fons

535847 #

Títol d'últim nivell

A17400

Títols

DCDAD1 #

Fons d'últim nivell

F4F4F3

Fons

29s www.gencat.net

guia d�estil

recursos gràficsOpcionsColor del text i el fons de les opcions del menú:

RessaltatsComposició de color del títol i de les opcions del menú ressaltades


535847

Text Fons

F4F4F3 #

DCDAD1 #

Fons

A17400

Títol i text

30s www.gencat.net

guia d�estil

recursos gràfics3.1.3.5. BotonsEl comportament d�un botó és el d�un enllaç emmarcat per un fons de color que el ressalta.


DCDAD1 #

Fons

A17400

Text

31s www.gencat.net

guia d�estil

recursos gràfics4. Complements gràficsLa construcció de gencat.net abasta i depèn de tots els seus complements gràfics, com la iconografia dels menús o els recursos per a ressaltar incidències en els continguts d�una pàgina.

4.1. Iconografia

" S�ha d�evitar la presència d�iconografia com a recurs habitual per a representar conceptes.

Les icones han de ser clares i sintètiques per a orientar millor a l�usuari.

Totes les icones, encara que siguin fàcilment recognoscibles, han de tenir associada una llegenda.

4.1.1. Característiques gràfiquesLes línies han de tenir poc pes gràfic, no han d�estar suavitzades i han de facilitar la seva integració amb el text.

4.1.2. Tipus d�icones

4.1.2.1. Menús desplegables

Menú principal * Correspondències de color (veure també l'apartat color).

Menú de �Departaments del Govern�

Menú de continguts

recursos gràfics | complements gràfics

1 2 3 4 5 6 7 8 9 10 11 12 *

32s www.gencat.net

guia d�estil recursos gràfics | complements gràfics

recursos gràficsMenú de la �ruta de navegació�

4.1.2.2. Altres icones

Enllaços externs

Composició de la icona i la seva llegenda.

Enllaç tipus 'mailto'

Ampliació de continguts

Composició de la icona i la seva llegenda.

ImprimirSituada a les pàgines que contenen informació rellevant, permet imprimir-les sense haver de modificar els paràmetres d'impressió.

Jerarquies (a la �ruta de navegació�)

33s www.gencat.net

guia d�estil recursos gràfics | complements gràfics

recursos gràfics

CercadorsEls botons per a iniciar les cerques estan personalitzats gràficament pel color amb l�objectiu de diferenciar el cercador utilitzat.

Icones representatives de programes associats a documents i arxius

Recursos per a destacar incidències en textos o enllaços

IdiomaRepresentades de forma textual, aquestes icones fan referència a aquells documents en els quals el seu contingut es facilita en un altre idioma.

Quan se situa el cursor sobre una d�aquestes icones, es mostra una etiqueta flotant (tooltip) per a complementar la informació.

! Els arxius especificats en aquest subapartat ('recursos gràfics | complements gràfics') són descarregables.

Yahoo Google

Microsoft Word Microsoft Excel Microsoft PowerPoint

Indica la rellevància d'un enllaç Puntualitza i marca un text

Adobe Acrobat contingut web altres documents

Català

Espanyol (castellà)

34s www.gencat.net

guia d�estil

recursos gràfics5. ImatgesLa imatge és l�element de major pes visual en una pàgina.

Totes les imatges es tractaran amb transparències per a alleugerir el seu pes dintre del conjunt de la pàgina.

Les dimensions de les imatges es basaran en l�estructura de mòduls establerta a la retícula.

" És important preservar l�equilibri propi de la pàgina, tenint en compte el seu pes i la gamma cromàtica.

5.1. Requisits tècnics

5.1.1. Imatge digitalitzada

" Es recomana que en el moment de digitalitzar la imatge es faci amb una resolució superior a la necessària (72 dpi), d�aquesta manera es podrà reenquadrar i adaptar als mòduls de la pàgina sense perdre qualitat.

5.1.2. ProgramariEl programa utilitzat per a la manipulació d�imatges és Photoshop (v.3.0 o superior) d�Adobe. Ha de contemplar el tractament per capes i l�efecte �Mosaico� (�Mosaic�) dintre del filtre �Pixelizar� (�Pixelate�).

5.1.3. FormatEl format final de l�arxiu tractat ha de ser JPG (Joint Photographic Expert Group) amb una resolució de 72 dpi i ha de pesar menys de 20 K.

recursos gràfics | imatges

35s www.gencat.net

guia d�estil

recursos gràfics5.2. Tractament

1. Una vegada s�ha escollit la imatge, s�ha d�enquadrar i ajustar-ne el to, el color i el focus per a obtenir el resultat òptim. Ampliar els marges del �Tamaño del Lienzo� (�Canvas Size�) per a poder tractar i reenquadrar millor la imatge.

2. Realitzar un duplicat de la capa i fixar un 50% d�opacitat a la capa sobreposada.


(punts 1 i 2)

36s www.gencat.net

guia d�estil

recursos gràfics

3. Aplicar a la capa semitransparent l�efecte �Mosaico�, ajustant el paràmetre de �Tamaño de Celda� (�Cell Size�) entre els valors 70 i 130 píxels, segons el resultat que es vulgui obtenir.

4. Reposicionar la capa (si és necessari) i reajustar els paràmetres d�opacitat, contrast i saturació de cada un dels mosaicso de tota la imatge per a compensar les pèrdues de densitat.


(punts 3 i 4)

37s www.gencat.net

guia d�estil recursos gràfics | imatges

(5)

recursos gràfics5. Determinat el resultat, acoblar la imatge, reenquadrar i/o escalar en funció dels mòduls plantejats a la retícula.

6. Guardar la imatge en format JPG a una resolució de 72 dpi i amb un pes màxim de 20 K (segons les dimensions de la imatge).

5.2.1. ConsideracionsEl tractament de la imatge (tal i com s�ha descrit) pot dependre de criteris i requisits de manteniment.

Aquesta manipulació no és aplicable a les imatges o gràfics quan el seu context o caràcter no ho permeten. El tipus d'arxiu aplicable (gif, png, etc.) ha de ser compatible amb els navegadors descrits i està subjecte als condicionantsde pes i de qualitat.

Les imatges han de transmetre sensacions de proximitat i empatia, potenciant els enquadraments forçats i suggerents.Es recomana un criteri de qualitat elevat, ja que les imatges són un element gràfic significatiu a gencat.net.

38s www.gencat.net

guia d�estil

recursos gràfics6. Formularis

6.1. EstructuraLa disposició dels camps en un formulari ha de generar una lectura lineal i tabulable, raó per la qual la seva estructura ha de ser ordenada i concisa, agrupant la informació per conceptes de forma específica i selectiva.

En referència a la nomenclatura associada a les diferents opcions, la seva lectura ha de ser clara i directa.

" Els camps han de tenir l�àrea necessària per a introduir les dades. Els camps de contingut invariable han de contemplar el nombre exacte de dígits.

6.2. ElementsS'ha d'evitar personalitzar els dispositius del formulari per tal de no afectar el seu reconeixement i operativitat (funcionalitat) de cara a l�usuari.

S'ha de considerar les limitacions dels diferents sistemes i la seva compatibilitat entre els navegadors.

recursos gràfics | formularis

39s www.gencat.net

guia d�estil

recursos gràfics7. AltresA causa de la diversitat gràfica dels diferents elements que composen una pàgina (taules, llistats, gràfics, mapes, etc.), es recomana mantenir els criteris bàsics amb referència al tractament de la tipografia, estructura de mòduls o gamma de colorestablerts en aquest manual.

recursos gràfics | altres

40s www.gencat.net

guia d�estil recursos gràfics | recomanacions

recursos gràfics8. Recomanacions

8.1. CompatibilitatNo fer ús de marcs (frames) que amaguin l�URL, que dificultin la localització de les pàgines pels motors de cerca, la integracióde la informació, així com la possibilitat que els usuaris puguin emmagatzemar les pàgines als seus �Favorits�.Es proposa utilitzar formats d�arxiu compatibles (no crear dependències de plug-in) i evitar events en programació que no puguin interpretarels navegadors i les versions recomanades i, en general, tot allò que no arribi o sobrepassi els estàndards proposats.

8.2. LogotipsCal evitar el protagonisme d�altres marques que puguin competir amb el logotip de gencat.net.

8.3. AnimacionsEs proposa no incloure animacions per a evitar distraccions en la lectura de la informació.

8.4. Finestres emergents (pop-up)No utilitzar aquest tipus de finestres si no són necessàries per a la claredat de la informació presentada en la pàgina.

8.5. Enllaços externsEls enllaços externs són les pàgines que es troben fora del domini de gencat.net i s�obriran en una finestra nova i superposada per a evitar perdrela referència del portal de la Generalitat.

8.6. IconesNo incloure iconografia d�estils gràfics que contrastin amb el que es proposa en aquest manual.

8.7. Facilitat d�úsEs proposa acotar la informació de forma racional, marcant clarament les línies de lectura i les jerarquies (per a permetre una lectura directa i relaxada).A l'hora de publicar documents adjunts, s'ha d'informar del seu pes en bytes per tal que l'usuari pugui avaluar el possible temps de descàrrega.

8.8. Personalització de la interfícieS�ha d�evitar personalitzar els recursos propis del sistema (barres de desplaçament, camps de text, check boxes, radio buttons, etc.).

41s www.gencat.net

guia d�estil

sistema de navegacióS�ha creat un sistema de navegació molt intuïtiu i funcional per a facilitar la navegació dels usuaris. Aquest sistema de navegació s�ha de respectar en totes les pàgines, si bé és prou obert com per a poder-lo adaptar a les necessitats concretes de cada lloc web.

1. Elements del sistema de navegació

1.1. Logotip de gencat.netSempre ha d�aparèixer a la part superior esquerra de totes les pàgines del lloc web i ha d�enllaçar amb la pàgina d�inici de gencat.net.

1.2. Referència de primer nivellA la part superior de totes les pàgines sempre hi ha d�haver l'enllaç directe a la pàgina d�inici que correspongui.


42s www.gencat.net

guia d�estil

sistema de navegació1.3. Mapa webHan d�aparèixer totes les categories i subcategories de segon nivell amb un enllaç a la pàgina que els correspon.

1.4. El menú de navegació principalHa d�estar present en totes les pàgines del lloc web i ha de mantenir el mateix mecanisme i ubicació per a facilitar la navegaciódels usuaris independentment de la pàgina en què es trobin.

Ha estat dissenyat per a incloure un màxim de 12 categories (veure l�apartat 'retícula | capçalera').

Cada categoria té una estructura de color pròpia (veure l�apartat 3.1.3.1. Menú principal) que s�ha de respectar en totes les pàginesdel lloc web.

S�ha contemplat la possibilitat que les categories puguin portar un menú desplegable amb enllaços directes a les subcategories.


43s www.gencat.net

guia d�estil

sistema de navegació1.5. Menús desplegablesPer tal de agilitzar la navegació s�ha optat per implementar menús desplegables a totes aquelles categories i subcategories on es cregui necessari.

Per qüestions d'accessibilitat, sempre que s�implementi un menú desplegable, la primera subcategoria que ha d�aparèixer és un enllaç a unapàgina d�índex on apareguin la resta de subcategories d�aquell menú desplegable.

1.6. �Ruta de navegació� ('fil d�Ariadna')Totes les pàgines del lloc web han de tenir, just a sobre del títol de la pàgina, la �ruta de navegació� per a indicar a l�usuariel camí que ha seguit fins arribar a la pàgina on es troba.

Cada element de la 'ruta de navegació' pot tenir un menú desplegable (veure l'apartat de menús desplegables d'aquesta secció).


44s www.gencat.net

guia d�estil

sistema de navegació1.7. Altres elements de navegació

LlegendesLes llegendes proporcionen informació sobre la iconografia utilitzada en el lloc web.

Temes relacionatsS�ha contemplat la possibilitat d�incloure temes relacionats en una franja al lateral dret de la pàgina per a potenciar la navegació contextual.


45s www.gencat.net

guia d�estil

interactivitat1. Enllaç a la pàgina d�iniciEl logotip, ubicat a la part superior esquerra de totes les pàgines, enllaça amb la pàgina d�inici de gencat.net.

2. EnllaçosS�ha establert quatre estats bàsics de resposta visual en els enllaços (Inactiu, Ressaltat, Seleccionat, Visitat) per a facilitar lainteracció amb els usuaris.

3. MenúsEl mecanisme i el comportament dels menús són propers al sistema de menús utilitzat pel programari estàndard (Windows).

Els títols de les opcions dels menús poden actuar com a enllaços.

S�ha implementat menús desplegables sobre la �ruta de navegació� per aportar més funcionalitats i efectivitat a l�usuari.

interactivitat

46s www.gencat.net

guia d�estil interactivitat

interactivitat4. BotonsUn botó és un enllaç emmarcat per un fons de color.

5. Cos del textÉs una opció aplicable en tot el lloc web que permet redimensionar la grandària de la lletra.

S'ha personalitzat sobre la base d'un menú propi del sistema per a afegir més accessibilitat.

6. ImpressióÉs una funcionalitat aplicable a les pàgines amb informació rellevant i pemet imprimir-les sense parametritzar les opcions d'impressió, reubicant els continguts i suprimint els marges.

47s www.gencat.net

guia d�estil

programació1. AccessibilitatA l�Acord de Govern de la Generalitat de Catalunya del 26 de juny de 2001 es va decidir que tots els llocs web depenents de la Generalitat havien d�adoptar els requeriments bàsics d�accessibilitat impulsats per la WAI (Web Accessibility Initiative) del W3C (World Wide Web Consortium).

Les directrius de la WAI es poden trobar a www.w3.org/wai.

Més enllà de les directrius de la WAI i de les proves amb tests automàtics com Bobby o Tawdis, s�ha implementat una sèrie de mesuresencaminades a facilitar l�accés a la informació de persones amb discapacitats físiques, sensorials o amb barreres tecnològiques.

Els elements que s�han tractat són:

Imatges o elements multimèdia! Han de tenir un text alternatiu i un resum complementari en aquells casos en què la imatge o l�element multimèdiaconté informació rellevant (longdesc).

TaulesMaquetades per a facilitar la lectura:! Han de permetre la lectura fila per fila quan continguin dades tabulars.! Ha de fer-se servir, estrictament, la sintaxi HTML adient per a cada cas.! Incloure informació complementària per als casos necessaris (summary).

Enllaços! Han de tenir sentit fora de context.

CSSEls estils dels diferents elements presents en les pàgines es determinen mitjançant fulls d�estil. Tot i que el lloc web també es pot veure sense ells.

ScriptsEls scripts que hi ha a les pàgines no impedeixen l'aprofitament dels continguts. Els menús dinàmics (inaccessibles per als usuaris amb discapacitat visual) es complementen amb pàgines centrals o distribuïdores que contenen els mateixos enllaços que hi ha al menú desplegable.

Text invisibleS�inclou informació invisible que complementa els continguts i es dóna informació sobre el funcionament de les pàgines per a persones amb discapacitat visual.

programació | accessibilitat

http://www.w3.org/wai

48s www.gencat.net

guia d�estil

programacióPàgina d�accessibitatS�inclou una pàgina d�accessibilitat on s�expliquen les polítiques seguides, consells d�ús i les dreceres de teclat.

Dreceres de teclatAccés directe als continguts: alt + qAccés directe al sistema de navegació: alt + mAccés directe a la pàgina d�accessibilitat: alt + bAccés directe a l�inici de la pàgina: alt + oAccés directe al cercador: alt + rAccés directe al mapa web: alt + pAccés directe a la pàgina d�inici de gencat.net: alt +g

Enllaços directes Per tal d'agilitzar la navegació dels usuaris amb discapacitat visual s�ha creat, amb text invisible, una sèrie d�enllaços directesa diferents continguts del lloc web.

Aquests enllaços directes estan situats a l�inici de cada pàgina, de manera que són el primer que llegeix el lector d�HTML. Si l�usuari està interessat en algun d�aquests continguts, només ha de prémer Intro per anar-hi automàticament:

<div style="line-height:1px">

<a href="#continguts" accesskey="q">Accés directe als continguts</a><a name="top"></a><a href="#top" accesskey="o">Accés directe a l'inici de la pàgina</a><a href="#opcions_principals" accesskey="m">Accés directe al menú de navegació</a><a href="/informacio/accesibilitat.htm" accesskey="b">Accés directe a la pàgina d'accessibilitat i dreceres de teclat</a><a href="#cercador" accesskey="r">Accés directe al cercador</a><a href="/informacio/mapa.htm" accesskey="p">Accés directe al mapa web</a>

</div>

49s www.gencat.net

guia d�estil

programacióDeclaració del tipus de codificació de document HTML, així com del tipus d�idioma que s�està utilitzant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="CA">

" És molt important comprovar el nivell d�accessibilitat després de programar una pàgina en HTML.

" Es recomana utilitzar els sistemes de test automàtics, per exemple Bobby o Tawdis, però també, i especialment,testejar les diferents pàgines amb usuaris de programes lectors d�HTML.

50s www.gencat.net

guia d�estil

programació2.CSSAls fulls d�estil (CSS) queden englobats l�aspecte (grandària i color) de totes les lletres que s�utilitzaran a gencat.net,així com el format dels enllaços.

" S�ha de definir un tipus per al text invisible, ja que és important a l�hora de fer la programació accessible i facilitar la interpretaciódels programes lectors d�HTML.

Hi ha dos tipus de fulls d�estil: un per a Microsoft Internet Explorer i un altre per a Netscape.Aquests dos navegadors interpreten de diferent manera la grandària de la lletra, fet que s�ha de contemplar en els fulls d�estil.

Els fulls d�estil estan disponibles en els següents enllaços:CSS Microsoft Internet ExplorerCSS Netscape

programació | CSS

51s www.gencat.net

guia d�estil

programació3. JavascriptA la llibreria de Javascript hi ha totes aquelles funcions que s�utilitzen en el lloc web.

En cada funció s�ha fet la distinció per als navegadors Internet Explorer, Netscape 4.x, Netscape 6 (i superiors).Aquests últims es diferencien de Netscape 4.x en la seva definició d�estructures, raó per la qual en alguns casos té un comportament diferent que cal revisar.

En el fitxer adjunt també hi ha les funcions necessàries per a gestionar els menús dinàmics que es descriuen en el següent apartat:Javascript de gencat.net

programació | Javascript

52s www.gencat.net

guia d�estil

programació4. Menús dinàmicsEls menús dinàmics tenen un pes important a gencat.net, ja que apareixen a totes les pàgines.

S�han tractat perquè funcionin amb tots els navegadors i s�han definit com a components separats, d�aquesta manera es pot programarper a cada un d�ells el temps d�espera abans de desaparèixer, el tipus, el color del fons i la grandària de la lletra.

programació | menús dinàmics

Gencat 2003

Design

Transcript of Gencat 2003