canvis de disseny en els webs de la generalitat de catalunya · pdf file el nou disseny...

Click here to load reader

Post on 20-Jul-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    Canvis de disseny en els webs de la Generalitat de Catalunya 26 d’octubre de 2009

    Versió 1.0

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    2

    Índex de contingut

    1 INTRODUCCIÓ ....................................................................................... 3

    2 FORMES DE PRESENTACIÓ GENÈRIQUES EVOLUCIONADES........ 4

    2.1 Cercadors..................................................................................... 4

    2.2 Destacats de la columna dreta................................................... 7

    2.3 Destacats de cos de pàgina...................................................... 16

    2.4 Menús de navegació ................................................................. 20

    2.5 Pàgines de detall ....................................................................... 24

    2.6 Pàgines distribuïdores i llistes de continguts ........................ 54

    2.7 Títol de pàgina web ................................................................... 63

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    3

    1 Introducció

    Aquest document recull les formes de presentació evolucionades per aconseguir el nou disseny gràfic dels portals GECO.

    A cada apartat podrem aconseguir la forma de presentació afectada, els canvis efectuats, un exemple gràfic de l’abans i el després de les peces, i, finalment, la ruta on es pot veure la forma de presentació al portal genèric.

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    4

    2 Formes de presentació genèriques evolucionades

    2.1 Cercadors

    2.1.1 fw_fp_cercador_generic

    • Modificacions funcionals:

    1. S’elimina el fons ratllat.

    2. Es col·loquen vores a la capa.

    � La línia és d’1 px i de color #8D8D8D.

    3. Canvien les pastilles.

    � La barra té una alçada de 20 píxels.

    � El degradat de la pastilla vermella va del #AD2114 al #680404.

    � El degradat de la pastilla grisa va del #7F7F7F al #5D5D5D.

    4. Canvia el botó de cerca.

    5. Canvia el pic (bullet).

    • Imatges de disseny:

    Disseny antic:

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    5

    Disseny nou:

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    6

    • Detalls tècnics:

    1. Formes de presentació genèriques.

    � Es va afegir la classe FW_destacatsResults a les dues llistes que pinta els enllaços destacats en els resultats de la cerca.

    � S’ha modificat la crida a la imatge del botó de cerca. La nova imatge és la següent: /Framework/estilos y scripts/NUEVOS Estilos, imagenes y

    js/img/FW_cerca.gif.

    2. Fulls d’estils genèrics.

    � S’han creat les classes “.resultats, .destacats_gsa ul“, “FW_destacatsResults” i “a.FW_sGris” del full d’estils FW_cercadorGeneric.css.

    � S’han modificat les classes “.resultats, .cercador_gencat ul”, “FW_fResultatsA”, “FW_fDestaquem” i “ul li.FW_spfonsRallatGris” del full d’estils FW_cercadorGeneric.css.

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    7

    2.2 Destacats de la columna dreta

    2.2.1 Bàners

    2.2.1.1 fw_fp_destacats_foto_link_descripcio

    • Modificacions funcionals:

    1. Canvia la pastilla i el color de la tipografia.

    � La barra té una alçada de 20 píxels.

    � El degradat va del #AD2114 al #680404.

    � Títol: #ffffff, Verdana bold 11 px.

    • Imatges del disseny:

    Disseny antic: Disseny nou:

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    8

    • Detalls tècnics:

    1. Fulls d’estils genèrics.

    � S’ha modificat la classe FW_fPastillaNormal del full d’estils FW_estils.css.

    2.2.1.2 fw_fp_destacats_foto_link_descripcio_2

    • Modificacions funcionals:

    1. Canvia la pastilla.

    � La barra té una alçada de 20 píxels.

    � El degradat va del #AD2114 al #680404.

    • Imatges del disseny:

    Disseny antic: Disseny nou:

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    9

    • Detalls tècnics:

    1. Formes de presentació genèriques.

    � Abans s’utilitzava la classe FW_fDestacats per pintar la pastilla i ara s’utilitza la classe FW_fDestacatsVermell.

    2. Fulls d’estils genèrics.

    � S’ha creat la classe FW_fDestacatsVermell del full d’estils FW_estils.css.

    2.2.1.3 fw_fp_destacats_nomes_foto

    • Modificacions funcionals:

    1. Canvia la pastilla.

    � La barra té una alçada de 20 píxels.

    � El degradat va del #AD2114 al #680404.

    • Imatges del disseny:

    Disseny antic: Disseny nou:

    • Detalls tècnics:

    1. Formes de presentació genèriques.

    � Abans s’utilitzava la classe FW_fDestacats per pintar la pastilla i ara s’utilitza la classe FW_fDestacatsVermell.

    2. Fulls d’estils genèrics.

    � S’ha creat la classe FW_fDestacatsVermell del full d’estils FW_estils.css.

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    10

    2.2.2 Llista de continguts

    2.2.2.1 fw_fp_desplegable

    • Modificacions funcionals:

    1. S’elimina el fons ratllat.

    2. Canvia el botó de cerca.

    3. Canvien les vores puntejades per línies contínues.

    � La línia és d’1 px i de color #8D8D8D.

    • Imatges del disseny:

    Disseny antic: Disseny actual:

    • Detalls tècnics:

    1. Formes de presentació genèriques.

    � S’ha eliminat la crida a la classe FW_sFonsRallat que pintava el fons ratllat.

    � Es van canviar les crides a les classes per pintar les vores. Abans es feien servir les classes FW_sBorderTop, FW_sBorderLeft, FW_sBorderRight i FW_sBorderBottom, i, ara, s’utilitzen les classes FW_BorderContTop, FW_BorderContLeft, FW_BorderContRight i FW_BorderContBottom, respectivament.

    � S’ha modificat la crida a la imatge del botó de cerca. La nova imatge és la següent: /Framework/estilos y scripts/NUEVOS Estilos, imagenes y

    js/img/FW_cerca.gif.

    2. Fulls d’estils genèrics.

    � S’han creat les classes FW_BorderContTop, FW_BorderContLeft, FW_BorderContRight i FW_BorderContBottom del full d’estils FW_estils.css.

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    11

    2.2.2.2 fw_fp_desplegable_2

    • Modificacions funcionals:

    1. S’elimina el fons ratllat.

    2. Canvia el botó de cerca.

    3. Canvien les vores puntejades per línies contínues.

    � La línia és d’1 px i de color #8D8D8D.

    • Imatges del disseny:

    1. Aquesta forma de presentació va en companyia de la forma de presentació fw_fp_llista_enllacos_post_desplegable. Per tant, en les imatges d’exemple, apareixen les dues formes de presentació.

    Disseny antic: Disseny nou:

    • Detalls tècnics:

    1. Formes de presentació genèriques.

    � S’ha eliminat la crida a la classe FW_sFonsRallat que pintava el fons ratllat.

    � Es van canviar les crides a les classes per pintar les vores. Abans es feien servir les classes FW_sBorderTop, FW_sBorderLeft, FW_sBorderRight i FW_sBorderBottom, i, ara, s’utilitzen les classes FW_BorderContTop, FW_BorderContLeft, FW_BorderContRight i FW_BorderContBottom, respectivament.

    � S’ha modificat la crida a la imatge del botó de cerca. La nova imatge és la següent: /Framework/estilos y scripts/NUEVOS Estilos, imagenes y

    js/img/FW_cerca.gif.

  • Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

    12

    2. Fulls d’estils genèrics.

    � S’han creat les classes FW_BorderContTop, FW_BorderContLeft, FW_BorderContRight i FW_BorderContBottom del full d’estils FW_estils.css.

    2.2.2.3 fw_fp_destacats_nomes_link

    • Modificacions funcionals:

    1. S’elimina el fons ratllat.

    2. Canvien les vores puntejades per línies contínues.

    � La línia és d’1 px i de color #8D8D8D.

    • Imatges del disseny:

    Disseny antic: Disseny nou:

    • Detalls tècnics:

    1. Fulls d’estils genèrics.

    � S’han modificat les classes FW_primer_nivell_top i FW_primer_nivell_bottom del full d’estils FW_estils.css.

    2.2.2.4 fw_fp_destacats_nomes_link_3

    • Modificacions funcionals:

    1. Canvia la pastilla.

    � La barra té una alçada de 20 píxels.

    � El degradat va del #7F7F7F al #5D5D5D.

    2. S’elimina el