Gencat 2003

s

www.gencat.net
guia d’estil

s

www.gencat.net
guia 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 2001
i 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 Mas
Conseller en cap
Gener 2003

s

1

www.gencat.net
guia d’estil

índex

índex
introducció

2

requeriments tècnics

3

retícula

4
5
6
7
8
9
13

recursos gràfics 16
17
20
31
34
38
39
40

superfície
distribució dels elements
marges
textos destacats, títols i elements de navegació
capçalera
estructura de les pàgines
tipologia de pàgines
logotip
tipografia i textos
color
complements gràfics
imatges
formularis
altres
recomanacions

sistema de navegació 41
interactivitat 45
programació 47
50
51
52

accessibilitat
CSS
Javascript
menús dinàmics

s

www.gencat.net
guia d’estil

2

introducció

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 contemplades
en 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.

s

3

www.gencat.net
guia d’estil


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

s

4

www.gencat.net
guia d’estil

retícula | superfície

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ície
410x795 píxels (sense el marc del navegador).
800 px 15"

600 px
15"
410 px

795 px
" 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.

5

www.gencat.net
guia d’estil

retícula | distribució dels elements

retícula
2. Distribució dels elements
Els elements s’han distribuït per zones dintre l’estructura de la pàgina.
referència 1r nivell
logotip

V

s

recursos i eines
navegació principal

ruta de navegació

àrea de continguts

informació complementària

*
V

2.1. Zona superior
El logotip, la referència de primer nivell, els recursos i eines i el menú de navegació principal.
2.2. Zona inferior
La ‘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).

6

www.gencat.net
guia d’estil

retícula | marges

retícula
3. Marges
3.1. Marges estructurals
Marges fixos, independentment de la resolució de la pantalla.
16 px

*
18 px

V

s

*
41 px

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

20 px horitzontalment
10 px verticalment

s

www.gencat.net
guia d’estil

7

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

retícula
4. Textos destacats, títols i elements de navegació
mòdul base per a destacats, menús i botons escalable 16 px
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).

s

8

www.gencat.net
guia d’estil

retícula | capçalera

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

736 px
logotip "gencat.net"

5 px
22 px

73 px
147 px
escalable

16 px

referència 1r nivell
recursos i eines del lloc web

10 px
92 px

10 px

cercador

cos del text
20 px
16 px
16 px

navegació principal (2n nivell)
10 px

escalable 16 px
" 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.

92 px

184 px

-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 complements
i 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.

s

9

www.gencat.net
guia d’estil

retícula | estructura de les pàgines

retícula
6. Estructura de les pàgines
Estructura 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.

capçalera
10 px
imatge (composició)

105 px

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

16 px
10 px
notícia
10 px
secció 'Destaquem'

16 px

tema destacat

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

escalable
(vertical)

10 px
complements del lloc web 16 px
18 px

s

10

www.gencat.net
guia d’estil


retícula
6. Estructura de les pàgines
Estructura vertical de les pàgines
de segon nivell.
6.1. Relació del títol
de la pàgina amb
la navegació, imatge i fons
ruta de navegació

16 px

títol de la pàgina 23 px

11 px
enllaç, menú desplegable o imatge
16 px
10 px
enllaç, menú desplegable, textos o imatge

escalable (vertical)

s

www.gencat.net
guia d’estil

11


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

títol de la pàgina
20 px
text d'introducció

14 px
enllaç, menú desplegable, textos
o imatge

escalable
(vertical)

s

12

www.gencat.net
guia d’estil


retícula
L’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
1 mòdul
736 px

2 mòduls
358 px

3 mòduls
232 px

20 px

1 mòdul

2 mòduls

3 mòduls

4 mòduls

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

4 mòduls
169 px

s

www.gencat.net
guia d’estil

13

retícula | tipologia de pàgines

retícula
7. Tipologia de pàgines
El 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

s

www.gencat.net
guia d’estil

retícula
Pàgines de primer nivell

14


s

www.gencat.net
guia d’estil

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

Pàgina d'últim nivell

15


s

www.gencat.net
guia d’estil

16

recursos gràfics | logotip

recursos gràfics
1. Logotip
El 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.

s

17

www.gencat.net
guia d’estil

recursos gràfics | tipografia i textos

recursos gràfics
2. Tipografia i textos
2.1. Tipografia base
Arial
11

ABCÇDEFGHIJKLMNÑOPQRSTUVWXZ
abcçdefghijklmnñopqrstuvwxz
0123456789

9

0123456789

18

0123456789

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.

s

18

www.gencat.net
guia d’estil


recursos gràfics
2.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ú desplegable
de ‘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.

s

19

www.gencat.net
guia d’estil


recursos gràfics
2.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 text
Per 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.

s

20

www.gencat.net
guia d’estil

recursos gràfics | color

recursos gràfics
3. 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
Fons
S’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.

F4F4F3 #

fons gris per a ressaltar textos
fons gris
per a emmarcar mòduls

s

21

www.gencat.net
guia d’estil


recursos gràfics
Destacats
" 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.

AEA892

818871

535847

#

destacats per a separar continguts per mòduls

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

BFB211

736300

9A8D09 #

destacats per a pàgines dels complements del lloc web

s

22

www.gencat.net
guia d’estil


recursos gràfics
3.1.2. Textos i enllaços
Text
Color dels textos:

535847

#

Llegendes, peus de pàgina i notes al marge
El criteri de color que s’aplica sobre aquests textos depèn de la rellevància de cada cas.
Els colors són:

B1B1B1

818871 #

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

818871 #

s

23

www.gencat.net
guia d’estil


recursos gràfics
Enllaços
A tots els enllaços s’aplicarà el color que correspongui segons el seu estat:
inactiu

ressaltat

A17400

seleccionat

535847

inactiu

visitat

818871

ressaltat

949600 #

3.1.3. Menús i botons:
3.1.3.1. Menú principal
Fons dels títols
Variables de color aplicables als títols del menú principal.
1

2

3

B78100
7

CC2E00
8

498100

008172

6E4EB8

000000

4

5

6

9

A3416A
10

535847
11

1B5BA3
12 *

77471D

8CA700

E08F00 #

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

seleccionat

visitat

s

24

www.gencat.net
guia d’estil


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




mòdul doble

composició per a més de vuit títols
" El color assignat a les diferents seccions del menú no implica una vinculació cromàtica de les seves pàgines.

s

25

www.gencat.net
guia d’estil


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

Opcions
Color del text i el fons de les opcions del menú:
Text

535847

Fons

C9C8BD #

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

s

26

www.gencat.net
guia d’estil


recursos gràfics
3.1.3.2. Menú de ‘Departaments del Govern’
Colors

DFB30C #

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

Opcions
Text

535847

Fons

DCDAD1 #

Ressaltats
El color del text ressaltat és blanc sobre la franja del color que s’ha aplicat al menú de ‘Departaments del Govern’.

s

27

www.gencat.net
guia d’estil


recursos gràfics
3.1.3.3. Menú de continguts
Colors
Títol

A17400

Fons

DCDAD1 #

Opcions
Text

535847

Fons

DCDAD1 #

s

28

www.gencat.net
guia d’estil


recursos gràfics
Ressaltats
La composició de colors del ressaltat és la mateixa que la composició de colors de la seva capçalera.
Títol i text

F4F4F3

Fons

A17400

#

3.1.3.4. Menú de la ‘ruta de navegació’
Colors
Composició de colors per a l'estructura del menú:
Títols

A17400

Títol d'últim nivell

535847

#

Fons

F4F4F3

Fons d'últim nivell

DCDAD1 #

s

29

www.gencat.net
guia d’estil


recursos gràfics
Opcions
Text

535847

Fons

F4F4F3

#

Ressaltats
Composició de color del títol i de les opcions del menú ressaltades
Títol i text

A17400

Fons

DCDAD1 #

s

30

www.gencat.net
guia d’estil


recursos gràfics
3.1.3.5. Botons
El comportament d’un botó és el d’un enllaç emmarcat per un fons de color que el ressalta.
Text

A17400

Fons

DCDAD1 #

s

31

www.gencat.net
guia d’estil

recursos gràfics | complements gràfics

recursos gràfics
4. Complements gràfics
La 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àfiques
Les 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).
1

2

3

4

5

6

7

Menú de ‘Departaments del Govern’

Menú de continguts

8

9

10

11

12 *

s

32

www.gencat.net
guia d’estil


recursos gràfics
Menú 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.
Imprimir
Situada 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ó’)

s

33

www.gencat.net
guia d’estil


recursos gràfics
Cercadors
Els botons per a iniciar les cerques estan personalitzats gràficament pel color amb l’objectiu de diferenciar el cercador utilitzat.

Yahoo Google
Icones representatives de programes associats a documents i arxius

Microsoft Word

Microsoft Excel

Microsoft PowerPoint

Adobe Acrobat

contingut web

altres documents

Recursos per a destacar incidències en textos o enllaços
Indica la rellevància d'un enllaç Puntualitza i marca un text
Idioma
Representades de forma textual, aquestes icones fan referència a aquells documents en els quals el seu contingut es facilita
en un altre idioma.
Català

Espanyol (castellà)
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.

s

34

www.gencat.net
guia d’estil

recursos gràfics | imatges

recursos gràfics
5. Imatges
La 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. Programari
El 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. Format
El 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.

s

35

www.gencat.net
guia d’estil


recursos gràfics
5.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.

(punts 1 i 2)
2. Realitzar un duplicat de la capa i fixar un 50% d’opacitat a la capa sobreposada.

s

36

www.gencat.net
guia d’estil


recursos gràfics

(punts 3 i 4)
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 mosaics
o de tota la imatge per a compensar les pèrdues de densitat.

s

37

www.gencat.net
guia d’estil


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

(5)
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. Consideracions
El 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 condicionants
de 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.

s

www.gencat.net
guia d’estil

38

recursos gràfics | formularis

recursos gràfics
6. Formularis
6.1. Estructura
La 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. Elements
S'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.

s

www.gencat.net
guia d’estil

recursos gràfics
7. Altres
A 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 color
establerts en aquest manual.

39

recursos gràfics | altres

s

www.gencat.net
guia d’estil

40

recursos gràfics | recomanacions

recursos gràfics
8. Recomanacions
8.1. Compatibilitat
No 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 interpretar
els navegadors i les versions recomanades i, en general, tot allò que no arribi o sobrepassi els estàndards proposats.
8.2. Logotips
Cal evitar el protagonisme d’altres marques que puguin competir amb el logotip de gencat.net.
8.3. Animacions
Es 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 externs
Els 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 perdre
la referència del portal de la Generalitat.
8.6. Icones
No incloure iconografia d’estils gràfics que contrastin amb el que es proposa en aquest manual.
8.7. Facilitat d’ús
Es 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ície
S’ha d’evitar personalitzar els recursos propis del sistema (barres de desplaçament, camps de text, check boxes, radio buttons, etc.).

s

www.gencat.net
guia d’estil

41

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.net
Sempre 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 nivell
A la part superior de totes les pàgines sempre hi ha d’haver l'enllaç directe a la pàgina d’inici que correspongui.

s

www.gencat.net
guia d’estil

42


1.3. Mapa web
Han 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ó principal
Ha 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àgines
del lloc web.

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

s

www.gencat.net
guia d’estil

43


1.5. Menús desplegables
Per 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 una
pà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’usuari
el 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ó).

s

44

www.gencat.net
guia d’estil


1.7. Altres elements de navegació
Llegendes
Les llegendes proporcionen informació sobre la iconografia utilitzada en el lloc web.

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

s

www.gencat.net
guia d’estil

interactivitat
1. Enllaç a la pàgina d’inici
El 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ços
S’ha establert quatre estats bàsics de resposta visual en els enllaços (Inactiu, Ressaltat, Seleccionat, Visitat) per a facilitar la
interacció amb els usuaris.

3. Menús
El 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.

45

interactivitat

s

www.gencat.net
guia d’estil

interactivitat
4. Botons
Un 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.

46

interactivitat

s

www.gencat.net
guia d’estil

47

programació | accessibilitat

programació
1. Accessibilitat
A 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 mesures
encaminades 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èdia
conté informació rellevant (longdesc).
Taules
Maquetades 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.
CSS
Els 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.
Scripts
Els 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 invisible
S’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.

s

48

www.gencat.net
guia d’estil


programació
Pàgina d’accessibitat
S’inclou una pàgina d’accessibilitat on s’expliquen les polítiques seguides, consells d’ús i les dreceres de teclat.
Dreceres de teclat
Accés directe als continguts: alt + q
Accés directe al sistema de navegació: alt + m
Accés directe a la pàgina d’accessibilitat: alt + b
Accés directe a l’inici de la pàgina: alt + o
Accés directe al cercador: alt + r
Accés directe al mapa web: alt + p
Accé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 directes
a 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>

s

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.

49

s

www.gencat.net
guia d’estil

programació
2.CSS
Als 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 Explorer
CSS Netscape

50

programació | CSS

s

www.gencat.net
guia d’estil

51

programació | Javascript

programació
3. Javascript
A 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

s

www.gencat.net
guia d’estil

52

programació | menús dinàmics

programació
4. Menús dinàmics
Els 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 programar
per 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.

Gencat 2003

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Gencat 2003

Similaire à Gencat 2003 (20)

Gencat 2003