2. Articles · 2015-08-18 · 1.3.2 Amb blocs sense navegació En cas que s’hagi informat...
Transcript of 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.
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.
1.3.2.1 Versió escriptori i tauleta
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.
- 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.
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
1.3.2.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 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
En cas que s’hagi informat contingut als blocs, mostra tota la informació amb subtítols que
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.
1.3.3.1 Versió escriptori i tauleta
Es presenta dividit en 4 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.
Pàg. 14
Bloc inferior 1: Per al contingut que no està als blocs (igual que a l’exemple 1.3.1). 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.
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:
- 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.
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. 15
1.3.3.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 - À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ó
En cas que s’hagi informat contingut als blocs, mostra tota la informació amb subtítols que
introdueixen els continguts dels blocs. Es presenta una navegació entre els blocs amb un
acordió que es plega i desplega per cada bloc.
1.3.4.1 Versió escriptori i tauleta
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.
- 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.
Pàg. 19
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.
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:
- 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.
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.
1.3.4.2 Versió mòbil
Es presenta en una grid del 100% i els continguts es mostren seguint el següent ordre,
sempre que estiguin informats:
- 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
En cas que s’hagi informat contingut als blocs, mostra tota la informació amb subtítols que
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.
1.3.5.1 Versió escriptori i tauleta
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.
Bloc inferior 1: Per al contingut que no està als blocs (igual que a l’exemple 1.3.1). 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 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:
- 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.
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 la grid, sense dividir l’espai.
Pàg. 23
1.3.5.2 Versió mòbil
Es presenta en una grid 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 - 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
http://web.gencat.cat/ca/generalitat/historia/historia_4/
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/
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/
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: