2. Articles · 2015-08-18 · 1.3.2 Amb blocs sense navegació En cas que s’hagi informat...

Guia per a la construcció de webs

de la Generalitat amb estil gencat

responsiu

2. Articles Versió beta

Barcelona, agost de 2015

Pàg. 2

ARTICLE

1.1 QUÈ ÉS ................................................................................................................................... 3

1.2 QUAN S’USA .......................................................................................................................... 4

1.3 COM ES MOSTRA (FORMES DE PRESENTACIÓ) ............................................................. 6

1.3.1 SENSE BLOCS ..................................................................................................................... 7 1.3.1.1 Versió escriptori i tauleta ............................................................................................ 7 1.3.1.2 Versió mòbil ............................................................................................................... 8

1.3.2 AMB BLOCS SENSE NAVEGACIÓ ............................................................................................ 9 1.3.2.1 Versió escriptori i tauleta ............................................................................................ 9 1.3.2.2 Versió mòbil ............................................................................................................. 12

1.3.3 BLOCS AMB ÀNCORES ........................................................................................................ 13 1.3.3.1 Versió escriptori i tauleta .......................................................................................... 13 1.3.3.2 Versió mòbil ............................................................................................................. 15

1.3.4 BLOCS EN ACORDIÓ ........................................................................................................... 18 1.3.4.1 Versió escriptori i tauleta .......................................................................................... 18 1.3.4.2 Versió mòbil ............................................................................................................. 19

1.3.5 BLOCS EN PESTANYES ....................................................................................................... 21 1.3.5.1 Versió escriptori i tauleta .......................................................................................... 21 1.3.5.2 Versió mòbil ............................................................................................................. 23

1.4 COMBINACIONS POSSIBLES ............................................................................................ 25

Pàg. 3

1.1 Què és

Servei per comunicar un volum d’informació gran amb diversos components textuals,

hipertextuals, gràfics i de vídeo. És el tipus de contingut més complet per a pàgines finals ja

que inclou els següents elements:

Títol

Entradeta

Cos de text

Imatge

Multimèdia

Enllaços

Baners

Aquesta informació, a més, es pot agrupar en blocs, de manera que pot estar estructurada

segons una jerarquia, independentment del disseny amb el qual es mostri.

L’article també té eines de compartició a xarxes socials pròpies. Es pot fer “M’agrada” a

Facebook, compartir a Twitter i a Google +.

La informació en línia, com més estructurada, més fàcil és de llegir. Feu ús de les eines que

ofereix l’article per organitzar la informació de forma que l’usuari pugui seguir la lectura de

forma jeràrquica.

Pàg. 4

Il·lustració 1 Exemple d'article per a la versió escriptori i tauleta.

Pàg. 5

Pàg. 6

1.2 Quan s’usa

Per donar la informació final, a pàgines de detall o a qualsevol pàgina de contingut, ja sigui

per explicar un concepte o idea, per ampliar una informació, etc.

No s’utilitza

Com a text introductori de pàgines, ja que existeix un altre component per fer-ho, la “Descripció pàgina”.

Com a notícia d’actualitat, ja que existeix el component “Notícia” per a aquesta tasca.

Com a galeria de multimèdies, infografies o llista d’enllaços i bàners, perquè existeixen altres components per a aquestes visualitzacions.

Casos d’èxit

Història de la Generalitat (http://web.gencat.cat/ca/generalitat/historia/historia_1/)

Reportatge sobre el nou gencat (http://web.gencat.cat/ca/actualitat/reportatges/nou-gencat/)

Detall d’un contingut al web del Departament de Benestar Social i Família (http://benestar.gencat.cat/ca/ambits_tematics/persones_amb_dependencia/drets_de_les_persones_en_situacio_de_dependencia/ )

Mala pràctica

Entradeta/introducció de pàgina (http://cultura.gencat.cat/ca/departament/estructura_i_adreces/organismes/icec/ambits_d_actuacio/llibre/)

1.3 Com e6s mostra

Només hi ha una forma de presentació (fpca_article), que mostra la informació,

concretament els blocs, si estan informats, de diferents maneres segons els paràmetres que

se li indiquen.

Al final del contingut sempre es mostren les eines de compartició a les xarxes socials.

Paràmetres de la forma de presentació:

Tipus blocs: acordio|ancores|pestanyes|res (per defecte, acordió)

Alineació imatge i multimèdia: esquerra|dreta* (només si no tenen blocs)

Imatges: Mínim 420px d’amplada, tant si la imatge és vertical com horitzontal.

http://web.gencat.cat/ca/generalitat/historia/historia_1/

http://web.gencat.cat/ca/actualitat/reportatges/nou-gencat/

http://benestar.gencat.cat/ca/ambits_tematics/persones_amb_dependencia/drets_de_les_persones_en_situacio_de_dependencia/

http://benestar.gencat.cat/ca/ambits_tematics/persones_amb_dependencia/drets_de_les_persones_en_situacio_de_dependencia/

http://cultura.gencat.cat/ca/departament/estructura_i_adreces/organismes/icec/ambits_d_actuacio/llibre/

http://cultura.gencat.cat/ca/departament/estructura_i_adreces/organismes/icec/ambits_d_actuacio/llibre/

Pàg. 7

Es recomana que sempre s’utilitzi en una àrea del 100%, mai a 66% ni a 33% (versió

escriptori).

Pel que fa a les alineacions de les imatges i els multimèdies i els textos que els acompanyen

en les versions d’escriptori tauleta, si tenen una amplada de:

750 px o més: ocuparan el 100% de l’àrea i, per tant, el text es col·locarà per sota.

Entre 500 px i 750 px: ocuparan el 66% de l’àrea i, per tant, el text serà líquid a la dreta o l’esquerra, segons l’alineació de la imatge o el multimèdia.

Entre 300 px i 499 px: ocuparan el 50% de l’àrea i, per tant, el text serà líquid a la dreta o l’esquerra, segons l’alineació de la imatge o el multimèdia.

Fins a 299 px: ocuparan el 33% de l’àrea i, per tant, el text serà líquid a la dreta o l’esquerra, segons l’alineació de la imatge o el multimèdia.

1.3.1 Sense blocs

En cas que no s’hagi informat contingut als blocs, mostra la resta de continguts (títol,

entradeta, descripció, cos paràgraf, relacionats, multimèdia, imatge, bàner, enllaç).

1.3.1.1 Versió escriptori i tauleta

Es presenta dividit en dos espais que ocupen el 100% de l’àrea on estigui ubicat:

Bloc superior: Ocupa el 100% de l’àrea amb el títol i l’entradeta

Bloc inferior: Està dividit en dos espais.

- 66% (esquerra): mostra el cos de text, les imatges i els vídeos. - 33% (dreta): mostra la resta de continguts (descripció, baners amb imatge o sense, enllaços.

Si l’article no té informades la descripció, els baners o els enllaços, (els continguts que es

mostren a l’espai del 33%) el contingut es mostra al 100% de l’àrea, sense dividir l’espai.

Pàg. 8

1.3.1.2 Versió mòbil

Es presenta en una àrea del 100% i els continguts es mostren seguint el següent ordre,

sempre que estiguin informats:

- Títol - Entradeta - Vídeo - Imatge i text: Si la imatge és més petita de 420 px, es mostra alineada a la dreta o l’esquerra

(es tria per paràmetre) i el text és líquid. - Descripció - Baners amb imatge o sense - Enllaços

Pàg. 9

1.3.2 Amb blocs sense navegació

En cas que s’hagi informat contingut als blocs, mostra tota la informació amb subtítols que

introdueixen els continguts dels blocs. No presenta cap navegació entre els blocs i, per tant,

tampoc no hi ha l’opció de tornar amunt quan acaba un bloc.


Es presenta dividit en 3 espais que ocupen el 100% de l’àrea on estigui ubicat:

Bloc superior: Ocupa el 100% de l’àrea amb el títol i l’entradeta

Bloc inferior 1: Per al contingut que no està als blocs (igual que a l’exemple 1.3.1). Està

dividit en dos espais.


Bloc inferior 2: Per al contingut dels blocs. El títol del bloc ocupa el 100% de l’àrea i sota surt

el contingut, que està dividit en dos espais:

- 66% (esquerra): mostra el cos de text i els vídeos. - 33% (dreta): mostra les imatges, els baners amb imatge o sense, la informació relacionada.

Pàg. 10

Si els blocs no tenen imatges, baners o informació relacionada (que es mostrarien a l’espai

del 33%), el contingut es mostra al 100% de l’àrea, sense dividir l’espai.

Pàg. 11

Pàg. 12




- Títol - Entradeta - Vídeo - Imatge i text: Si la imatge és més petita de 420 px, es mostra aliniada a la dreta o l’esquerra

(es tria per paràmetre) i el text és líquid. - Descripció - Baners amb imatge o sense - Enllaços - Blocs:

o Títol o Vídeo o Text o Imatge (a sang) o Baners amb imatge o sense o Informació relacionada

Pàg. 13

1.3.3 Blocs amb àncores


introdueixen els continguts dels blocs. Es presenta una navegació entre els blocs amb

àncores, que implica que al final de cada bloc hi ha una opció de tornar amunt.



Bloc superior: Ocupa el 100% de l’àrea amb el títol i l’entradeta.

Pàg. 14






Bloc inferior 2: Per a les àncores de navegació. Ocupen el 100% de l’àrea i sempre estan a

dues columnes.

Bloc inferior 3: Per al contingut dels blocs. El títol del bloc ocupa el 100% de l’àrea i sota surt

el contingut, que està dividit en dos espais:




Pàg. 15





(es tria per paràmetre) i el text és líquid. - Descripció - Baners amb imatge o sense - Enllaços - Àncores de navegació als blocs - Blocs:

o Títol o Vídeo o Text o Imatge (a sang) o Baners amb imatge o sense

Pàg. 16

o Informació relacionada o Navegació per pujar a l’inici de la pàgina

Pàg. 17

Pàg. 18

1.3.4 Blocs en acordió


introdueixen els continguts dels blocs. Es presenta una navegació entre els blocs amb un

acordió que es plega i desplega per cada bloc.



Bloc superior: Ocupa el 100% de l’àrea amb el títol i l’entradeta.




Pàg. 19



Bloc inferior 2: Per al contingut dels blocs. Mostra el títol del bloc al 100% de l’àrea, que

desplega l’acordió. El contingut informat a cada bloc està dividit en dos espais:





Es presenta en una grid del 100% i els continguts es mostren seguint el següent ordre,


- Títol - Entradeta - Vídeo

Pàg. 20

- Imatge i text: Si la imatge és més petita de 420 px, es mostra alineada a la dreta o l’esquerra (es tria per paràmetre) i el text és líquid.

- Descripció - Baners amb imatge o sense - Enllaços - Acordió de blocs

o Títol o Vídeo o Text o Imatge o Baners amb imatge o sense o Informació relacionada

Pàg. 21

1.3.5 Blocs en pestanyes


introdueixen els continguts dels blocs. Es presenta una navegació entre els blocs en

pestanyes horitzontals que permeten desplaçar-se entre elles amb fletxes de navegació a

l’esquerra i la dreta si ocupen més espai del disponible.


Es presenta dividit en 3 espais que ocupen el 100% de la grid on estigui ubicat:

Pàg. 22

Bloc superior: Ocupa el 100% de la grid amb el títol i l’entradeta.





mostren a l’espai del 33%) el contingut es mostra al 100% de la grid, sense dividir l’espai.

Bloc inferior 2: Per al contingut dels blocs. Mostra un requadre que ocupa el 100% del bloc

amb les pestanyes en horitzontal. El títol de cada pestanya és el títol del bloc i es pot

navegar entre elles amb fletxes de navegació a esquerra i dreta si ocupen més de l’espai

disponible.

El contingut informat a cada bloc està dividit en dos espais:



del 33%), el contingut es mostra al 100% de la grid, sense dividir l’espai.

Pàg. 23


Es presenta en una grid del 100% i els continguts es mostren seguint el següent ordre,



(es tria per paràmetre) i el text és líquid. - Descripció - Baners amb imatge o sense - Enllaços - Pestanyes de blocs: Sempre tenen fons gris.

o Títol o Vídeo o Text o Imatge o Baners amb imatge o sense o Informació relacionada

Pàg. 24

Pàg. 25

1.4 Combinacions possibles

Per les seves característiques i perquè és la instància de continguts més complerta, es

recomana no combinar l’article amb cap element, mostrar-lo sempre com un detall de pàgina

final.

No obstant això, es pot utilitzar en més contextos, per crear reportatges, exemple.

1) Detall de pàgina

Només es mostra l’article

Exemple: Història de la Generalitat


2) Amb llistes de continguts

Es pot combinar amb una llista de baners, enllaços...

Exemple: Reportatge sobre carnestoltes

http://web.gencat.cat/ca/actualitat/reportatges/carnestoltes/


http://web.gencat.cat/ca/actualitat/reportatges/carnestoltes/

Pàg. 26

3) Amb carrusels i sliders

Es pot combinar amb un carrusel de baners.

Exemple: Sobre gencat (diapositives)

http://web.gencat.cat/ca/menu-ajuda/ajuda/sobre_gencat/

http://web.gencat.cat/ca/menu-ajuda/ajuda/sobre_gencat/

Pàg. 27

4) Amb playlist de vídeos

Es pot combinar amb una playlist de vídeos. Cal que sigui una playlist amb més d’un vídeo.

Si es tracta només d’un vídeo, es mostrarà dins de l’article i no caldrà combinar-lo amb una

playlist.

Exemple:

2. Articles · 2015-08-18 · 1.3.2 Amb blocs sense navegació En cas que s’hagi informat...

Documents

Transcript of 2. Articles · 2015-08-18 · 1.3.2 Amb blocs sense navegació En cas que s’hagi informat...