Gencat 2003

183 views
103 views

Published on

Generalitat de Catalunya
Web Design Guide 2003

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
183
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gencat 2003

  1. 1. s www.gencat.net guia d’estil
  2. 2. 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
  3. 3. 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
  4. 4. 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.
  5. 5. s 3 www.gencat.net guia d’estil requeriments tècnics requeriments tècnics 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
  6. 6. 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.
  7. 7. 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).
  8. 8. 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
  9. 9. 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).
  10. 10. 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.
  11. 11. 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
  12. 12. s 10 www.gencat.net guia d’estil retícula | estructura de les pàgines 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)
  13. 13. s www.gencat.net guia d’estil 11 retícula | estructura de les pàgines 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)
  14. 14. s 12 www.gencat.net guia d’estil retícula | estructura de les pàgines 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
  15. 15. 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
  16. 16. s www.gencat.net guia d’estil retícula Pàgines de primer nivell 14 retícula | tipologia de pàgines
  17. 17. 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 retícula | tipologia de pàgines
  18. 18. 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.
  19. 19. 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 ABCÇDEFGHIJKLMNÑOPQRSTUVWXZ abcçdefghijklmnñopqrstuvwxz 0123456789 18 ABCÇDEFGHIJKLMNÑOPQRSTUVWXZ abcçdefghijklmnñopqrstuvwxz 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.
  20. 20. s 18 www.gencat.net guia d’estil recursos gràfics | tipografia i textos 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.
  21. 21. s 19 www.gencat.net guia d’estil recursos gràfics | tipografia i textos 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.
  22. 22. 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
  23. 23. s 21 www.gencat.net guia d’estil recursos gràfics | color 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
  24. 24. s 22 www.gencat.net guia d’estil recursos gràfics | color 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 #
  25. 25. s 23 www.gencat.net guia d’estil recursos gràfics | color 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
  26. 26. s 24 www.gencat.net guia d’estil recursos gràfics | color recursos gràfics Combinacions de les variables de color amb la dinàmica del menú: navegació principal (2n nivell) navegació principal (2n nivell) navegació principal (2n nivell) mòdul doble navegació principal (2n nivell) 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.
  27. 27. s 25 www.gencat.net guia d’estil recursos gràfics | color 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ú.
  28. 28. s 26 www.gencat.net guia d’estil recursos gràfics | color 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 Color del text i el fons de les opcions del menú: 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’.
  29. 29. s 27 www.gencat.net guia d’estil recursos gràfics | color recursos gràfics 3.1.3.3. Menú de continguts Colors Títol A17400 Fons DCDAD1 # Opcions Color del text i el fons de les opcions del menú: Text 535847 Fons DCDAD1 #
  30. 30. s 28 www.gencat.net guia d’estil recursos gràfics | color 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 #
  31. 31. s 29 www.gencat.net guia d’estil recursos gràfics | color recursos gràfics Opcions Color del text i el fons de les opcions del menú: 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 #
  32. 32. s 30 www.gencat.net guia d’estil recursos gràfics | color 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 #
  33. 33. 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 *
  34. 34. s 32 www.gencat.net guia d’estil recursos gràfics | complements gràfics 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ó’)
  35. 35. s 33 www.gencat.net guia d’estil recursos gràfics | complements gràfics 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.
  36. 36. 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.
  37. 37. s 35 www.gencat.net guia d’estil recursos gràfics | imatges 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.
  38. 38. s 36 www.gencat.net guia d’estil recursos gràfics | imatges 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.
  39. 39. s 37 www.gencat.net guia d’estil recursos gràfics | imatges 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.
  40. 40. 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.
  41. 41. 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
  42. 42. 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.).
  43. 43. s www.gencat.net guia d’estil 41 sistema de navegació 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.
  44. 44. s www.gencat.net guia d’estil 42 sistema de navegació sistema de navegació 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.
  45. 45. s www.gencat.net guia d’estil 43 sistema de navegació sistema de navegació 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ó).
  46. 46. s 44 www.gencat.net guia d’estil sistema de navegació sistema de navegació 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.
  47. 47. 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
  48. 48. 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
  49. 49. 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.
  50. 50. s 48 www.gencat.net guia d’estil programació | accessibilitat 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"> <span class = "textInvisible"> <a href="#continguts" accesskey="q"><span class ="textInvisible">Accés directe als continguts</span></a> <a name="top"></a> <a href="#top" accesskey="o"><span class ="textInvisible">Accés directe a l'inici de la pàgina</span></a> <a href="#opcions_principals" accesskey="m"><span class ="textInvisible">Accés directe al menú de navegació</span></a> <a href="/informacio/accesibilitat.htm" accesskey="b"><span class ="textInvisible">Accés directe a la pàgina d'accessibilitat i dreceres de teclat</span></a> <a href="#cercador" accesskey="r"><span class = "textInvisible">Accés directe al cercador</span></a> <a href="/informacio/mapa.htm" accesskey="p"><span class = "textInvisible">Accés directe al mapa web</span></a> </span> </div>
  51. 51. 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 programació | accessibilitat
  52. 52. 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
  53. 53. 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
  54. 54. 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.
  55. 55. s www.gencat.net guia d’estil

×