Parcs Analisi Funcional v8

Web de Parcs Naturals N. revisió doc.: 7.
0
(GECO+ adaptatiu)
Anàlisi funcional
N. versió solució: 0.1 Build: Pàg. 1 / 52
parcsnaturals.gencat.cat
Anàlisi funcional nova web
31/05/2019
14:21:41
Web de Parcs Naturals N. revisió doc.: 7.0
(GECO+ adaptatiu)
Anàlisi funcional
Revisió Redactat Revisat per Aprovat per Data Data

per aprovació publicació
0.1 HP-VASS Equip Parcs de Equip Parcs de

Catalunya Catalunya
Catalunya Catalunya
Catalunya Catalunya
8.1 HP-VASS
NOTA: Al final del document es troben les signatures i comentaris a la revisió i aprovació
Registre de Canvis
Revisió Apartat Data Modificació Motiu del canvi
2.0 3.1, 3.2, 03/01/2019 Actualització arbres de navegació aplicant canvis enviats per equip
Parcs de Catalunya.
3.3, 3.4
3.0 3.1, 3.2, 04/02/2019 Actualització:
3.3, 3.4, - Arbres de navegació aplicant canvis enviats per equip
3.7, 3.19, Parcs de Catalunya.
- Inclusió tipus de pàgina llista tràmits.
3.20 - Ampliació apartat 3.20 - Noves peces i
evolució/configuració d’existents
4.0 3.7.1, 3.7.2, 25/03/2019 Actualització:
3.22 - Incorporació més informació sobre el Visor de Mapes
(Google maps) i referència al manual de GECO+ responsiu
on s’explica amb detall aquesta peça.
- Actualització ‘Troba la informació per a tu’
5.0 3.7.1, 3.7.2, 28/03/2019 Actualització:
3.20, 3.21, - Incorporació definició nova peça d’enllaços per mostrar a la
3.22, 3.23 pàgina d’inici.
- Incorporació nova forma de presentació HttpFetch per
integrar-se amb API Meteocat.
6.0 3.6.2, 3.6.4, 04/04/2019 Actualització:
3.6.5, 3.6.6, - Format capçalera microsite (pendent aprovació gràfica per
3.7.1, 3.7.2 incorporar opció triada).
- Format Fil d’Ariadna a la subcapçalera Microsite.
- Composició Faldó i Faldó Microsite: incorporació
desplegable Organismes per mostrar llista de parcs.
- Nova peça d’impacte: es treu l’efecte zoom.
- Fpca_avisos: s’implementarà de manera manual.
7.0 3.6.2, 3.7.2, 22/05/2019 Actualització: s’incorpora la versió de capçalera per microsite
aprovada per DGAC.
3.22
8.0 3.6.2, 3.6.4, 31/05/2019 Actualització: s’incorpora la versió de capçalera per microsite
aprovada per DGAC amb les modificacions gràfiques sol·licitades.
3.7.1, 3.7.2,
3.22
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
RESPONSABLE DEL DOCUMENT: DXC-VASS
ÍNDEX
1 Objectius del projecte ..................................................................................................................... 5

2 Material de consulta ........................................................................................................................ 6
2.1 Wireframes aprovats 6
2.2 Propostes gràfiques aprovades 6
2.3 Guia d’estils web gencat 6
3 Anàlisi funcional .............................................................................................................................. 7
3.1 Arbre de navegació: Parcs de Catalunya 7
3.2 Arbre de navegació: Microsite d’un parc tipus 9
3.3 Tipologies de pàgina – Parcs de Catalunya 10
3.4 Tipologies de pàgina – Microsite de Parc 12
3.5 Idiomes del portal 13
3.6 Elements comuns de les pàgines 13
3.6.1 Capçalera (web Parcs de Catalunya) ............................................................................. 13
3.6.2 Capçalera Microsite (Parc tipus) ..................................................................................... 18
3.6.3 Subcapçalera (web Parcs de Catalunya) ........................................................................ 19
3.6.4 Subcapçalera Microsite (Parc tipus) ............................................................................... 20
3.6.5 Faldó ............................................................................................................................... 21
3.6.6 Faldó Microsite ................................................................................................................ 24
3.6.7 Peu .................................................................................................................................. 26
3.6.8 Peu Microsite .................................................................................................................. 27
3.7 Pàgina d’inici 29
3.7.1 Proposta de pàgina d’inici per Parcs de Catalunya ........................................................ 30
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.7.2 Proposta de pàgina d’inici per Microsite ......................................................................... 33

3.8 Xarxa de Parcs 36
3.9 Fitxa d’un parc 37
3.10 Pàgina distribuïdora 38
3.10.1 Model de distribuïdora 1............................................................................................ 38
3.11 Pàgina notícia (cas 4) 40
3.12 Pàgina article 41
3.13 Pàgina de resultats de cerca 43
3.14 Pàgina cercador activitats agenda 44
3.15 Fitxa activitats agenda 45
3.16 Pàgina Xarxes socials 45
3.17 Pàgina Multimèdia 46
3.18 Pàgina Mapa web 46
3.19 Pàgina Llista tràmits 47
3.20 Nova peça d’enllaços per mostrar a la pàgina d’inici 48
3.21 Integració amb aplicació del temps de Territori (nova forma de presentació utilitzant
HttpFetch) 50
3.22 Noves peces i evolució/configuració d’existents 51
3.23 Mides recomanades de les imatges 52
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
1 Objectius del projecte
La Generalitat de Catalunya disposa d’un nou disseny per la construcció de webs amb estil
gencat responsiu. L’objectiu principal és aprofitar aquest nou disseny per aplicar-ho al nou
portal GECO+ de Parcs Naturals de Catalunya (http://parcsnaturals.gencat.cat).
A més a més, es crearà un microsite tipus per aplicar-lo a cada parc que vulguin donar d’alta
dins d’aquesta web. Aquest microsite tindrà una capçalera, footer i peu propis.
Dins d’aquest projecte, s’estableixen les següents tasques de definició:
Conceptualitzar la nova Home de la web de Parcs de Catalunya

(http://parcsnaturals.gencat.cat) i la nova Home per la web d’un parc tipus:
• Modificació arbre de navegació actual per la nova web (per la web Parcs
Naturals i un parc tipus).
• Proposta de prototip de nova Home seguint la plantilla i estructura de Home

ressenyat al catàleg del Framework GECO+ responsiu (per la web de Parcs
Naturals i per un microsite tipus).
• Proposta de fins a 3 peces noves com a màxim, si així es defineix, a nivell de

wireframe, disseny i anàlisi funcional.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
2 Material de consulta
2.1 Wireframes aprovats
Podeu consultar els wireframes aprovats d’aquest projecte al següent enllaç:

https://invis.io/TPP0DHE3H9M#/332653242_-NDEX
2.2 Propostes gràfiques aprovades
Podeu consultar les propostes gràfiques aprovades d’aquest projecte al següent enllaç:
https://invis.io/S6PG4WWHZY8#/335005708_00-Index
2.3 Guia d’estils web gencat
Consulteu la Guia web gencat si voleu més informació sobre:

• El disseny responsiu.
• Els components disponibles al catàleg del framework GECO+.
• Models de pàgina.
• Directrius i recomanacions sobre la construcció de portals corporatius.
Per exemple, existeix un apartat amb recomanacions sobre l’elaboració d’imatges:
http://guiaweb.gencat.cat/ca/continguts/imatges/
També disposeu del manual d’usuari de framework GECO+ responsiu, que detalla el
funcionament de les formes de presentació configurables.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3 Anàlisi funcional
A continuació es mostra un esquema de l’arbre de navegació de la nova web de Parcs de

Catalunya i d’un parc tipus. Tot seguit, es descriuran els diferents elements comuns a totes
les plantilles i les tipologies de pàgina que es faran servir.
3.1 Arbre de navegació: Parcs de Catalunya
L’arbre de navegació de la nova web de Parcs de Catalunya (http://parcsnaturals.gencat.cat)

seguirà el següent esquema:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
31/05/2019 14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.2 Arbre de navegació: Microsite d’un parc tipus

L’arbre de navegació del Microsite d’un parc tipus seguirà el següent esquema: * Poden variar segons el parc
31/05/2019 14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.3 Tipologies de pàgina – Parcs de Catalunya
El quadre següent és un resum de l’arbre de navegació on es defineix el tipus de plantilla

amb què es construirà cada pàgina:
N1 N2 N3 N4 Plantilla
A-INICI Inici
B-XARXA DE Xarxa de parcs
PARCS
B-01-QUÈ ÉS LA XARXA? Article
B-02-MAPA DE LA XARXA Pàgina buida amb mapa
B-03-Aiguamolls de l’Empordà Fitxa d’un parc
B-04-Aigüestortes i Estany de Sant Fitxa d’un parc
Maurici
B-05-Alt Pirineu Fitxa d’un parc
B-06-Cadí-Moixeró Fitxa d’un parc
B-07-Cap de Creus Fitxa d’un parc
B-08-Capçaleres del Ter i del Freser Fitxa d’un parc
B-09-Collserola Fitxa d’un parc
B-10-Delta de l'Ebre Fitxa d’un parc
B-11-Delta del Llobregat Fitxa d’un parc
B-12-Els Ports Fitxa d’un parc
B-13-El Montgrí, les Illes Medes i el Baix Fitxa d’un parc
Ter
B-14-L’Albera Fitxa d’un parc
B-15-Mas de Melons i Secans de Lleida Fitxa d’un parc
B-16-Massís del Pedraforca Fitxa d’un parc
B-17-Montseny Fitxa d’un parc
B-18-Montserrat Fitxa d’un parc
B-19-Poblet Fitxa d’un parc
B-20-Sant Llorenç del Munt i l'Obac Fitxa d’un parc
B-21-Serra de Montsant Fitxa d’un parc
B-22-Zona Volcànica de la Garrotxa Fitxa d’un parc
B-23-LOGOTIPS DELS PARCS Pàgina buida amb llistat
amb imatges
C-GAUDEIX Distribuidora
DELS PARCS
C-01-QUÈ S’HI POT FER? Distribuidora
C-01-01-Agenda Cercador activitats agenda
activitats
C-02-02-Fitxa Fitxa activitat agenda
activitat
C-01-02-Lleure Article
C-01-03-Natura Article
C-01-04-Cultura Article
C-01-05-Esports Article
C-02-TURISME SOSTENIBLE Article
C-03-GALERIA MULTIMÈDIA Distribuidora
C-04-EQUIPAMENTS I ITINERARIS Pàgina buida amb: mòdul
article + llistat d’enllaços
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
N1 N2 N3 N4 Plantilla
C-05-ELS PARCS EN STREET VIEW Article
C-06-CONSELLS Pàgina buida amb: mòdul
D-VIURE-HI Distribuidora
D-01-AGRICULTURA I RAMADERIA Article
D-02-La CETS Article
D-03-MILLORA Article
D’INFRAESTRUCTURES
D-04-EDUCACIÓ AMBIENTAL Pàgina buida amb: mòdul
D-05-AJUTS Article
D-06-SERVEIS I TRÀMITS Llista tràmits
E-CONEIX LA Distribuidora
NOSTRA FEINA
E-01-QUI SOM? Article
E-01-01 Article
ORGANIGRAMA
E-01-02-ORGANS Article
RECTORS
E-02-GESTIÓ ALS PARCS Distribuidora
E-02-01- Article
CONSERVACIÓ
DEL PATRIMONI
E-02-02- Article
DINAMITZACIÓ
SOCIECONÒMIA
E-02-03-ÚS Article
PÚBLIC
E-02-04- Article
EDUCACIÓ I
VOLUNTARIAT
AMBIENTAL
E-03-INSTRUMENTS DE Distribuidora
PLANIFICACIÓ
E-04-CENTRES DE DOCUMENTACIÓ Distribuidora
E-05-PROJECTES INTERNACIONALS Distribuidora
E-06-CONVENIS I COL·LABORACIONS Distribuidora
E-07-COMUNICACIÓ Article
E-08-NORMATIVA Article
F-ACTUALITAT Pàgina buida amb llista
notícies
F-01-Detall notícia Notícia
G-CONTACTE Article
(contindrà un enllaç a
formulari contacte CQS)
G-01-Xarxes Socials Xarxes socials
H-ALTRES Sense pàgina (apartat ocult
ENLLAÇOS a la navegació, però els fills
han de ser visibles)
H-01-Mapa web Mapa web
H-02-Preguntes freqüents Pàgina buida amb acordió
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.4 Tipologies de pàgina – Microsite de Parc
El quadre següent és un resum de l’arbre de navegació on es defineix el tipus de plantilla

amb què es construirà cada pàgina:
N1 N2 N3 Plantilla
A-INICI Inici
B-EL PARC Distribuidora

B-01-TOP 10 DEL PARC Article
B-02-HISTÒRIA DE PROTECCIÓ Article
B-03-PATRIMONI NATURAL I Distribuidora
CULTURAL
B-04-DADES D’INTERÉS Article
B-05-MAPA DEL PARC Pàgina buida amb mapa
B-06-BUTLLETÍ Pàgina buida amb llista
d’enllaços
C-GAUDEIX DEL Distribuidora
PARC
C-01-COM ACCEDIR-HI Article
C-02-AGENDA ACTIVITATS Cercador activitats agenda
C-02-01-Fitxa activista Fitxa activitat agenda

C-03-GUIA DE VISITA Article
C-04-EQUIPAMENTS I ITINERARIS Article
C-05-GALERIA MULTIMÈDIA Multimèdia (BIG)
C-06-CONSELLS Article
D-VIURE-HI Distribuidora
D-01-AGRICULTURA I RAMADERIA Article
D-02-LA CETS Article
D-03-PRODUCTORS LOCALS Article àncores
D-04-AJUTS Article àncores
D-05-MILLORA Distribuidora
D’INFRAESTRUCTURES
D-06-EDUCACIÓ AMBIENTAL Distribuidora
D-07-SERVEIS I TRÀMITS Llista tràmits
E-CONEIX LA Distribuidora
NOSTRA FEINA
E-01-QUI SOM? Distribuidora
E-01-01-ÒRGAN GESTOR Article
E-01-02-ÒRGAN RECTOR Article
E-02-GESTIÓ AL PARC Distribuidora
E-02-01-CONSERVACIÓ DEL Article
PATRIMONI
E-02-02-DINAMITACIÓ Article
SOCIOECONÒMICA
E-02-03-ÚS PÚBLIC Article
E-02-04-EDUCACIÓ I Distribuidora
VOLUNTARIAT AMBIENTAL
E-03-INSTRUMENTS DE Article
PLANIFICACIÓ
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
N1 N2 N3 Plantilla
E-04-CENTRE DE DOCUMENTACIÓ Article
E-05-PROJECTES INTERNACIONALS Article
E-06-CONVENIS I COL·LABORACIONS Distribuidora
E-07-COMUNICACIÓ Article
E-08-NORMATIVA Article
F-ACTUALITAT Pàgina buida amb llista
notícies
F-01-DETALL NOTÍCIA Notícia
G-CONTACTE Article
(contindrà:
- Bloc amb informació de
contacte del Parc
- Enllaç a formulari contacte
CQS
- Bloc de Xarxes Socials del
parc)
H-ALTRES Sense pàgina (apartat ocult
ENLLAÇOS a la navegació, però els fills
han de ser visibles)
H-01-MAPA WEB Mapa web
H-02-PREGUNTES FREQÜENTS Pàgina buida amb acordió
3.5 Idiomes del portal
El portal serà multiidioma (estarà configurat en català, castellà, anglès, occità i francès). Es
replicarà el mateix arbre de navegació per tots els idiomes.
Cada parc tindrà els idiomes català i castellà, i anirà afegint idiomes segons decideixin.
3.6 Elements comuns de les pàgines

Les pàgines de la nova web de Parcs Naturals de Catalunya presentaran els següents
elements comuns:
3.6.1 Capçalera (web Parcs de Catalunya)
Capçalera corporativa del portal. Es mostrarà la pestanya on es trobi ubicat l’apartat

seleccionada (en color blanc).
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Visualització d’exemple en pantalla de sobretaula
Visualització d’exemple en mòbil
Com es pot veure a la imatge, la capçalera contindrà:
• El logotip de la Generalitat de Catalunya amb enllaç a la pàgina principal de gencat.
• El nom del portal: Parcs de Catalunya
• A les pàgines interiors i a la home, apareix la capsa de cerca del cercador gencat, com
a la imatge.
Aquest element no apareix en la versió per a mòbils, ja que el cercador està sempre
present, a totes les pàgines, a la capçalera, mitjançant el botó de la lupa que desplega
la caixa de cerca.
• L’enllaç a la versió accessible de la web no apareixerà per aquest projecte, donat que
la web de Parcs de Catalunya no tindrà versió accessible específica.
• Pestanyes del menú de nivell 1. Seran:
Inici | Xarxa de parcs | Gaudeix dels parcs | Viure-hi | Coneix la nostra feina |
Actualitat | Contacte
• Quan un usuari fa clic sobre una de les pestanyes, es mostra la navegació de la secció
en un menú desplegable on es mostrarà un tercer nivell que es visualitzarà com als
portals departamentals.
Si es mostra només fins al segon nivell de navegació:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Si se’n mostra un tercer nivell es visualitzaria com als portals departamentals.
En mòbil, el tercer nivell no es visualitza:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Visualització en pantalla de dispositiu mòbil (es mostra imatge genèrica)
Les pàgines de N3 en endavant mostren un menú secundari a l’àrea de la subcapçalera, al

costat del títol de la pàgina, que permetrà navegar per les seves pàgines germanes i filles, i
també pujar al nivell de damunt. D’aquesta manera, si es decideix configurar el menú
principal perquè es vegi només fins al segon nivell, els usuaris podran navegar pels nivells
més profunds amb aquesta utilitat. La presentació gràfica és la següent:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
En determinades resolucions de pantalla, quan el menú principal no càpiga en una sola línia,
automàticament canviarà al disseny responsiu següent:
Quan l’usuari obri el menú fent clic al botó que hi ha a l’esquerra del nom del portal, es
visualitzaran les opcions de menú en orientació vertical:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.6.2 Capçalera Microsite (Parc tipus)
Capçalera corporativa del portal per un microsite. Es mostrarà la pestanya on es trobi ubicat
l’apartat seleccionada (en color blanc).
Es comporta com la capçalera, amb les següents personalitzacions:
Visualització d’exemple en pantalla de sobretaula
• Té nom de la web propi, en dos parts:

o Parcs de Catalunya: enllaç a la pàgina d’inici de la web de la Xarxa de Parcs.
o Nom del parc (variarà amb cada Parc): enllaç a la pàgina d’inici del microsite
del parc corresponent.
o A l’exemple:
§ Parcs de Catalunya
§ Parc Nacional d’Aigüestortes i Estany de Sant Maurici
• A les pàgines interiors i a la home, apareix la capsa de cerca del cercador gencat, com
a la imatge.
Aquest element no apareix en la versió per a mòbils, ja que el cercador està sempre
present, a totes les pàgines, a la capçalera, mitjançant el botó de la lupa que desplega
la caixa de cerca.
• L’enllaç a la versió accessible de la web no apareixerà per aquest projecte, donat que
la web de Parcs Naturals de Catalunya no tindrà versió accessible específica.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
• Pestanyes del menú de nivell 1 (pròpies, diferents a la capçalera general). Seran:
Inici | El parc | Gaudeix del parc | Viure-hi | Coneix la nostra feina | Actualitat |
Contacte
• Quan un usuari fa clic sobre una de les pestanyes, es mostra la navegació de la secció
en un menú desplegable on es mostrarà un tercer nivell que es visualitzarà com als
portals departamentals.
• Inclou la nova peça ‘Slider captació’ (veure apartat 3.7.2 d’aquest document).
• El nom del Parc i les pestanyes de primer nivell del menú de navegació es mostren a
sobre de la imatge (de la nova peça ‘Slider captació’), amb una capa de fons
semitransparent a sobre de la imatge per facilitar la visualització dels texts.
3.6.3 Subcapçalera (web Parcs de Catalunya)
Totes les pàgines interiors d’un portal (és a dir, totes, excepte la pàgina d’inici) presenten
una àrea que s’anomena subcapçalera on es visualitza el títol de la pàgina, el fil d’Ariadna
(el camí que ha seguit l’usuari en la seva navegació) i els botons per compartir i imprimir la
pàgina.
Les pàgines a partir del tercer nivell de navegació també disposen d’un botó al costat del
títol que permet obrir un menú de navegació que facilita la navegació cap al nivell superior i
els inferiors.
Per aquesta web s’activarà des del segon nivell de navegació.
La imatge següent mostra aquesta la subcapçalera d’una pàgina (imatge genèrica de

mostra):
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
A les pàgines interiors, la subcapçalera es pot configurar amb una imatge d’impacte.
No és obligatori el seu ús, però es recomana utilitzar-la a les subhomes de la web i/o en
alguna pàgina rellevant d’un tema concret.
Aquesta imatge ha de permetre llegir bé el títol (es recomana fons fosc) i ha de ser de 1349
x 264 px. Es visualitzaria d’aquesta manera:
3.6.4 Subcapçalera Microsite (Parc tipus)
Totes les pàgines interiors d’un Microsite (és a dir, totes, excepte la pàgina d’inici) presenten
una àrea que s’anomena subcapçalera on es visualitza el títol de la pàgina, el fil d’Ariadna
(el camí que ha seguit l’usuari en la seva navegació) i els botons per compartir i imprimir la
pàgina.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Mostrarà les mateixes configuracions que la Subcapçalera per la Xarxa de Parcs excepte el
format del títol i el menú de navegació (que es mostra sobre una capa semitransparent i a
sobre de la imatge de fons) i el format del Fil d’Ariadna, que serà el següent:
Parcs de Catalunya > [Nom del Parc] > [Navegació dins el parc]
On:
- Parcs de Catalunya: és l’enllaç a la pàgina d’inici de la web Xarxa de parcs
- [Nom del Parc]: és l’enllaç a la pàgina d’inici del Parc on estem navegant.
- [Navegació dins el parc]: resta d’enllaços fins al nivell de navegació del parc que
estem navegant.
3.6.5 Faldó
El faldó és una àrea del cos de la pàgina que es presenta just abans del peu corporatiu dels
portals institucionals de la Generalitat de Catalunya. Permet posar-hi diferents llistes
d’enllaços a tres columnes.
Per defecte, està configurat perquè aparegui a totes les pàgines del portal excepte a les de
detall (per exemple, a les notícies). Totes les pàgines de la web de Parcs de Catalunya el
presentaran, excepte les pàgines de microsites, que mostraran el Faldo Microsite.
Un cop configurat, el faldó té aquesta presentació:
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Exemple de visualització en pantalla de sobretaula
Visualització en pantalla de sobretaula
Visualització en pantalla de dispositiu mòbil (imatge genèrica)
Columna esquerra
Desplegable d’Organismes web gencat (www.gencat.cat):

Mostra el llistat de parcs de la Xarxa de parcs:
- Títol: Xarxa de parcs

- Enllaços:
o Parcs de Catalunya
o Aiguamolls de l’Empordà
o Aigüestortes i Estany de Sant Maurici
o Alt Pirineu
o Cadí-Moixeró
o Cap de Creus
o Capçaleres de Ter i del Freser
o Collserola
o Delta de l’Ebre
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
o Delta de Llobregat
o Els Ports
o El Montgrí, les Illes Medes i el Baix Ter
o L’Albera
o Mas de Melons i Secans de Lleida
o Massís de Pedraforca
o Montseny
o Montserrat
o Poblet
o Sant Llorenç del Munt i l’Obac
o Serra de Montsant
o Zona Volcànica de la Garrotxa
En el cas que algun enllaç sigui extern, s’obrirà en una pestanya nova.
A sota, llista d’enllaços. Es decidiran i s’implementaran a la fase de desenvolupament.
Columna central
Dues llistes manual d’enllaços.
- Primera llista manual amb el títol de “Webs d’interès”:
o Medi Ambient
o Territori i Sostenibilitat
o Parcs DIBA
o Meteocat
o Wikiloc
o Mou-te
- Segona llista manual amb el títol “Ajuda”, a sota de la primera llista:
o Accessibilitat
o Sobre gencat
o Mapa web
o Preguntes freqüents
En el cas que algun enllaç sigui extern, s’obrirà en una pestanya nova. Aquests enllaços es
podran modificar per part de l’usuari, des de l’editor de GECO+
Columna dreta
Una llista amb diferents enllaços.
Títol: Connecta
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
• Els enllaços:
o Contacte
o Xarxes socials
o Actualitat
• Una llista d’enllaços amb icones a les xarxes socials en què Parcs de Catalunya té
presència:
o Twitter
3.6.6 Faldó Microsite
El faldó Microsite és una àrea del cos de la pàgina que es presenta just abans del peu
corporatiu dels microsites institucionals de la Generalitat de Catalunya. Permet posar-hi
diferents llistes d’enllaços a tres columnes.
Es mostrarà a totes les pàgines del microsite.
Seguirà la mateixa estructura del Faldó (general), però amb continguts propis.
A continuació especifiquem un exemple:
Exemple de visualització en pantalla de sobretaula
Columna esquerra
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Desplegable d’Organismes web gencat (www.gencat.cat):

Mostra el llistat de parcs de la Xarxa de parcs:
- Títol: Xarxa de parcs

- Enllaços:
o Parcs de Catalunya
o Aiguamolls de l’Empordà
o Aigüestortes i Estany de Sant Maurici
o Alt Pirineu
o Cadí-Moixeró
o Cap de Creus
o Capçaleres de Ter i del Freser
o Collserola
o Delta de l’Ebre
o Delta de Llobregat
o Els Ports
o El Montgrí, les Illes Medes i el Baix Ter
o L’Albera
o Mas de Melons i Secans de Lleida
o Massís de Pedraforca
o Montseny
o Montserrat
o Poblet
o Sant Llorenç del Munt i l’Obac
o Serra de Montsant
o Zona Volcànica de la Garrotxa
A sota, llista d’enllaços. Es decidiran i s’implementaran a la fase de desenvolupament.
Columna central
Dues llistes manual d’enllaços.
- Primera llista manual amb el títol de “Webs d’interès”:
o Medi Ambient
o Mou-te
o FGC
o Territori i sostenibilitat
o Meteocat
o Wikiloc
- Segona llista manual amb el títol “Ajuda”, a sota de la primera llista:
o Accessibilitat
o Sobre gencat
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
o Mapa web
o Preguntes freqüents
En el cas que algun enllaç sigui extern, s’obrirà en una pestanya nova. Aquests enllaços es
podran modificar per part de l’usuari, des de l’editor de GECO+
Cada microsite podrà tenir els seus propis enllaços, en funció dels continguts que vulgui
mostrar.
Columna dreta
Una llista amb diferents enllaços.
Títol: Connecta
• Els enllaços:
o Contacte
o Xarxes socials
o Actualitat
• Una llista d’enllaços amb icones a les xarxes socials en què el parc corresponent tingui
presència. A continuació mostrem un exemple:
o Twitter i Instagram
3.6.7 Peu
El peu és una àrea obligatòria a tots els portals institucionals de la Generalitat. Conté l’enllaç
a la pàgina de l’Avís legal, que en aquest cas apuntaria a la pàgina genèrica d’avís legal de
Gencat i un text abreujat sobre la política de compartició de continguts de la Generalitat de
Catalunya.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
En versió per a mòbil disposa d’un botó per tornar amunt més còmodament.
3.6.8 Peu Microsite
El peu Microsite es comporta com el peu corporatiu. És una àrea obligatòria a tots els
microsites institucionals de la Generalitat. Conté l’enllaç a la pàgina de l’Avís legal, que en
aquest cas apuntaria a la pàgina genèrica d’avís legal de Gencat i un text abreujat sobre la
política de compartició de continguts de la Generalitat de Catalunya.
En versió per a mòbil disposa d’un botó per tornar amunt més còmodament.
- Cada microsite mostrarà el logotip propi del parc/organisme impulsor del web (a
l’exemple, la identificació i enllaç envers el Parc Nacional d’Aigüestortes i Estany de
Sant Maurici). Ha de ser d’entre 122 i 250 px d’ample i en color gris #666666, amb fons
transparent.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Visualització en pantalla de sobretaula (exemple d’un parc concret)
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.7 Pàgina d’inici

La pàgina d’inici és l’única pàgina del portal que no té àrea de subcapçalera, perquè és l’àrea
on s’ubiquen el títol de la pàgina i el fil d’Ariadna, elements que no han de presentar-se a la
pàgina d’inici.
La pàgina d’inici ha de seguir l’estructura següent:
✔ Obligatori.
✔ Recomanat.
✔ Opcional.
Alguns exemples de pàgines principals de portals corporatius:
• Departament de la Presidència
• Identitat corporativa
• Consell Assessor per al Desenvolupament Sostenible
Per la proposta d’aquesta home, s’ha rebut l’excepció de la DGAC per utilitzar un
altre tipus d’estructura. A continuació especifiquem la composició de la pàgina.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.7.1 Proposta de pàgina d’inici per Parcs de Catalunya
Slider captació
Mostra nova forma de presentació

slider/carrusel. S’adapta al 100% de l’ample de la
pantalla de l’usuari. Es composa d’una llista
d’elements. Cada element mostra:
• Imatge (obligatori).
• Peu d’imatge (text sense format, camp de text
públic, optatiu)
• Camp text ALT (text sense format, optatiu)
• Paràmetre ‘Visualització’: estàndard (valor per
defecte)
Quan a la llista hi ha més d’un element, s’habiliten
els punts de navegació a sota de la imatge (costat
inferior esquerra); i les fletxes laterals quan es
posa el ratolí a sobre de la imatge. El
comportament de slider es similar al de la peça
Diapositves (http://guiaweb.gencat.cat/ca/cataleg-
html/cos/carrusels/fpca_diapositives-cas-66/ ), en
quant a desplaçament horitzontal, fletxes laterals i
rodones.
Descripció a Home
Mostra Descripció pàgina (cas 4).

(http://guiaweb.gencat.cat/ca/cataleg-
html/cos/descripciopagina/fpca_descripciopagina-
cas-4)
Es mostra sense imatge, ocupant el 100% de
l’amplada del contingut.
Avisos
Mostra fpca_avisos. Es mostra només quan hi ha

avisos actius. S’utilitzarà de manera manual.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Mapa – la xarxa de parcs
Mostra Visor de dades (Google Maps), sense

pestanya.
html/cos/visor/visor-google/sense-pestanya-100)
Ocupa el 100% de l’amplada del contingut. Mostra
el llistat geolocalitzat dels parcs de Catalunya.
Quan se selecciona el punt d’un parc, es desplega
la informació de contacte al parc, i d’accés al
site/microsite del parc:
• Nom del parc
• Adreça
• Telèfon
• Adreça web
• Com arribar-hi (enllaç extern)
A la fase de desenvolupament s’haurà d’entregar el
fitxer de dades en el format KML que s’utilitzarà per
mostrar la informació al mapa.
Troba la informació per a tu

Distribuïdora amb estil 1
html/cos/distribuidora ), ocupa el 100% del
contingut de la pàgina.
Aquesta peça proporciona una experiència
d’usuari consistent amb les necessitats
expressades per l’equip de Parcs de Catalunya, i
coherent amb la proposta gràfica realitzada, amb
la qual cosa no seria necessari un
desenvolupament.
Envers la petició que aquest bloc estigui fet amb
llistes i no utilitzant la Distribuïdora: actualment
GECO+ responsiu no disposa d’una llista que
acompleixi els requisits sol·licitats, i s’hauria
d’estudiar la solució tècnica per definir-la.
En aquest document proposem nova peça
d’enllaços (veure apartat 3.20.1 d’aquest
document). Paràmetre “Mostrar imatge”: Sí
Actualitat + Agenda
d’activitats
Mostra dos mòduls a la mateixa franja horitzontal,
Exemple de visualització de mapa a desktop amb les dades un al costat de l’altre:
d’un punt seleccionat
- Fpca_llista (exemple 4).
Per a més informació sobre el Visor de Mapes (Google Maps) (http://guiaweb.gencat.cat/ca/cataleg-
veure manual GeCO+ responsiu v1.16.1 (pàg. 237-243): html/cos/llista/fpca_llista/exemples_4)
Es mostra sense imatges, i ocupa el 66%
http://guiaweb.gencat.cat/web/.content/07_Gecoplus/suport_ge de l’amplada del contingut.
coplus/manuals/gestio-portals/Manual-GECO-
responsiu_v1.16.1.pdf - Calendari activitats agenda (Cas 1).
html/cos/agenda/fpca_llista_activitatAge
nda_calendari/cas-1)
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Es mostra el calendari al 33% de

Destaquem + A un clic

un al costat de l’altre:
- Diapositives cas 66%.
html/cos/carrusels/fpca_diapositives-
cas-66)
Ocupa el 66% de l’amplada del
contingut.
- Llista gràfic destacat (Opció 2).

html/cos/llista/grafic-destacat/opcio-2)
Es mostra la llista al 33% de l’amplada
del contingut.
Coneix la nostra feina
Mostra Llista Quadrícula Colors (4 elements).

html/cos/llista/quadricula-colors)
Ocupa el 100% de l’amplada del contingut.
Els parcs a les xarxes

- Giny de Twitter.
(http://guiaweb.gencat.cat/ca/cataleg/gin
y-de-twitter)
contingut. Amb el compte: @parcscat
- Giny d’Instagram.
(http://guiaweb.gencat.cat/ca/cataleg/gin
y-dinstagram)
contingut. Pendent definir quin compte
es mostrarà.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.7.2 Proposta de pàgina d’inici per Microsite
Slider captació
Mostra nova forma de presentació

slider/carrusel. S’adapta al 100% de l’ample de la
pantalla de l’usuari. Es composa d’una llista
d’elements. Cada element mostra:
• Imatge (obligatori).
• Camp text ALT (text sense format, optatiu)
• Paràmetre ‘Visualització’: microsite.
Amb aquest paràmetre, no es mostra el camp
Peu d’imatge.
Quan a la llista hi ha més d’un element, s’habiliten
els punts de navegació a la part esquerra de la
pantalla, a sobre del nom del parc; i les fletxes
laterals quan es posa el ratolí a sobre de la
imatge. El comportament de slider es similar al de
la peça Diapositves
html/cos/carrusels/fpca_diapositives-cas-66/ ), en
quant a desplaçament horitzontal, fletxes laterals i
rodones.
Descripció a Home

cas-4)
Es mostra amb imatge. El mòdul ocupa el 100% de
Avisos
Mostra fpca_avisos. Es mostra només quan hi ha

avisos actius. S’utilitzarà de manera manual.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Accessos visuals +
Descarrega’t + Temps
Aquesta franja horitzontal està dividida en ‘dues
columnes’:
• Columna Esquerra (66%). Mostra llista gràfic

destacat (Bàner), Opció 4.
html/cos/llista/grafic-destacat/opcio-4)
• Columna Dreta (33%). Conté dos mòduls, un a

sota de l’altre:
- Llista fons destacat (Cas 1).
html/cos/llista/fonsDestacat/cas-1)
Títol amb fons blanc i llista amb fons gris,
a 1 columna. Paràmetre “Vista mòbil”:
Desplegat.
- Integració amb aplicació pròpia de

Parcs de Catalunya mitjançant
HttpFetch.
html/cos/HttpFetch)
Veure apartat 3.21 d’aquest document.
Troba la informació per a tu

Distribuïdora amb estil 1
html/cos/distribuidora ), ocupa el 100% del
contingut de la pàgina.
Aquesta peça proporciona una experiència
d’usuari consistent amb les necessitats
expressades per l’equip de Parcs de Catalunya, i
coherent amb la proposta gràfica realitzada, amb
la qual cosa no seria necessari un
desenvolupament.
Envers la petició que aquest bloc estigui fet amb
llistes i no utilitzant la Distribuïdora: actualment
GECO+ responsiu no disposa d’una llista que
acompleixi els requisits sol·licitats, i s’hauria
d’estudiar la solució tècnica per definir-la.
En aquest document proposem nova peça
d’enllaços (veure apartat 3.20.1 d’aquest
document). Paràmetre “Mostrar imatge”: Sí
Actualitat + Agenda
d’activitats
- Fpca_llista (exemple 4).
html/cos/llista/fpca_llista/exemples_4)
Es mostra sense imatges, i ocupa el 66%
de l’amplada del contingut.
- Calendari activitats agenda (Cas 1).
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
html/cos/agenda/fpca_llista_activitatAge
nda_calendari/cas-1)
Es mostra el calendari al 33% de
Mapa – Equipaments del

parc
Mostra Visor de dades (Google Maps), sense

pestanya.
html/cos/visor/visor-google/sense-pestanya-100)
Ocupa el 100% de l’amplada del contingut. Mostra
el llistat geolocalitzat dels equipaments d’un parc.
Quan se selecciona el punt d’un equipament, es
desplega la informació sobre l’equipament:
• Nom de l’equipament
• Petita descripció
• Enllaç més informació (a
l’apartat del microsite)
• Com arribar-hi (enllaç extern)
A la fase de desenvolupament s’haurà d’entregar el
fitxer de dades en el format KML que s’utilitzarà per
mostrar la informació al mapa.
Coneix la nostra feina
Mostra Llista Quadrícula Colors (4 elements).

html/cos/llista/quadricula-colors)
Exemple de visualització de mapa a desktop amb les dades

d’un punt seleccionat
Per a més informació sobre el Visor de Mapes (Google Maps)

veure manual GeCO+ responsiu v1.16.1 (pàg. 237-243):
http://guiaweb.gencat.cat/web/.content/07_Gecoplus/suport_ge
coplus/manuals/gestio-portals/Manual-GECO-
responsiu_v1.16.1.pdf
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.8 Xarxa de Parcs
Aquesta pàgina mostra el llistat d’accés a les

fitxes dels parcs.
Es configura una pàgina bàsica (buida) i

s’incorpora el següent component:
En un cop d’ull
Mostra llista amb icones (exemple 3).

html/cos/llista/fpca_llista_enllacicones )
Es mostra amb Títol, descripció i llista a dues columnes.
El mòdul ocupa el 100% de l’amplada del contingut.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.9 Fitxa d’un parc
Aquesta pàgina mostra la fitxa d’un parc.
Es configura una pàgina bàsica (buida) i

s’incorporen els següents components:
Imatge contingut

html/cos/descripciopagina/fpca_descripciopagina-cas-4)
Es mostra amb imatge i sense text. El mòdul ocupa el
100% de l’amplada del contingut.
Detall fitxa
Aquesta franja horitzontal està dividida en ‘dues

columnes’:
• Columna Esquerra (66%). Mostra Descripció pàgina

(cas 4).
cas-4)
Es mostra amb imatge i text.
• Columna Dreta (33%). Conté dos mòduls, un a sota

de l’altre:
- Llista fpca_llista 4 (exemple sense imatge i

amb fons de colors).
html/cos/llista/fpca_llista/exemples_4 )
Es mostra sense títol. Conté l’enllaç d’accés a
la home de microsite del parc corresponent.
- Llista més enllaços.

html/cos/llista/mes-enllacos)
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.10 Pàgina distribuïdora

Les pàgines que al quadre de tipologies de pàgina s’identifiquen com a tipus Distribuïdora es
configuraran amb un contingut de tipus Navegació, que presenta automàticament els apartats en què
s’organitza la secció mitjançant un component de distribuïdora:
Segons es descriu a la Guia web gencat: les pàgines distribuïdores són pàgines que mostren, en el
cos de la pàgina, una navegació a través del web: pàgines filles i pàgines nétes.
Aquest tipus de pàgines només contenen ítems de navegació i una descripció opcional. Si també
mostren alguna llista de continguts diferent (enllaços, baners, carrusels, vídeos...) llavors no es tracta
d’una distribuïdora sinó d’una subhome, que s’explica en un apartat diferent.
Hi ha diversos models de distribuïdora que podeu veure a la guia. Es presenta una proposta per a la
configuració inicial, però si en algun cas els responsables del web volguessin canviar de model en
alguna de les pàgines, ho podrien fer, bé modificant els paràmetres del component o bé completant el
contingut (afegint imatges o descripcions, per exemple).
3.10.1 Model de distribuïdora 1
La que es posa habitualment a les pàgines de

primer nivell de navegació, el model 1, mostra
requadres amb línia de color i sense imatge.
Cada requadre de cada element de la navegació
pot mostrar una breu descripció. També es pot fer
que apareguin enllaços a les pàgines del nivell de
navegació següent si es desitja.
Exemple sense mostrar ‘fills’
A aquest model 2, es mostra els requadres dels

apartats i no tenen l’element gràfic de colors.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
A aquest model 3, es mostra els requadres dels

apartats i amb l’element gràfic de colors i imatges.
El model 4, amb imatges i sense línia de color.

Aquest model requereix que cada pàgina disposi
d’una imatge representativa de 332x332px.
Si amb aquest model 4 s’aplica el paràmetre de

descripció, aquesta es mostra a sota de la imatge,
amb un marc al voltant. Si un element no té imatge,
es mostra amb un fons neutre.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.11 Pàgina notícia (cas 4)

Aquest tipus de pàgina està definit a la guia web
del framework GECO+ responsiu
html/cos/noticia/4/ )
Visualització d’exemple gràfic en pantalla de sobretaula
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.12 Pàgina article

El quadre de resum de tipologies de pàgina detalla les pàgines que es configurarien amb el
tipus de pàgina final, concretament amb tipus de contingut Article. El tipus de contingut
editorial amb què s’elabora un article pot ser més o menys complex: admet des d’un simple
text a textos més complexos amb blocs (apartats interns amb títol i text). També poden
contenir imatges, enllaços relacionats, destacats, etc.
Aquest tipus de pàgina està definit a la guia web del framework GECO+ responsiu
(http://guiaweb.gencat.cat/ca/cataleg/pagines/pagines_finals/article/ )
Hi ha diferents tipus d’articles definits a guia web del framework GECO+ responsiu, a la web
de la Memòrias’ha proposat utilitzar les següents visualitzacions:
Amb blocs.
html/cos/article/fpca_article-cas-4/ )
Aquest cas permet utilitzar la part esquerra (66%

de la pàgina) per mostrar text i imatges de
contingut en un diferents blocs d’informació, i la
columna de la part dreta (33% restant) per mostrar
llistes de links, banners, etc, informació
relacionada per cada bloc de la part esquerra.
Amb blocs en acordió.
html/cos/article/fpca_article-cas-1/ )
Aquest cas permet utilitzar la part superior al 100%,

i a sota, mostrar els blocs en acordió també al
100%.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Amb blocs en àncores.
html/cos/article/fpca_article-cas-5/).
Aquest cas permet utilitzar la part superior al

100%, i a sota, mostrar els blocs en acordió
també al 100%.
Article per a pàgina de contacte.
html/cos/article/article-per-a-pagina-de-
contacte/ )
Permet mostrar (o no mostrar) el mapa de

Google Maps.
Per veure més opcions i possibilitats sobre la pàgina ‘Article’, consulteu la guia web:
http://guiaweb.gencat.cat/ca/cataleg/article
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.13 Pàgina de resultats de cerca

El cercador conduirà al Cercador gencat, aplicació
externa, i cerca resultats a tot gencat.
Per millorar la funcionalitat de cerca de continguts

de la web de Parcs de Catalunya i els microsites
de parcs es crearà una pàgina on s’inserirà el
component de cercador (de manera que l’usuari no
sortirà del web). Els resultats que se li presentaran
seran concretament del site
parcsnaturals.gencat.cat i els seus microsites.
La pàgina es configurarà amb plantilla Home i

amb la propietat de primera franja de color gris
perquè la capsa de cerca quedi sobre gris. La
capçalera es configurarà sense cercador
perquè no sigui redundant.
Serà com aquesta pàgina del portal de

Biblioteques (imatge d’exemple)
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.14 Pàgina cercador activitats agenda

Aquest tipus de pàgina està definit a la guia web
del framework GECO+ responsiu
html/cos/agenda/activitat-agenda-cercador/ )
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.15 Fitxa activitats agenda

Aquest tipus de pàgina està definit a la guia web del
framework GECO+ responsiu
html/cos/agenda/fpca_activitatAgenda/ )
Visualització d’exemple gràfic en pantalla de

sobretaula
3.16 Pàgina Xarxes socials

Per la presentació de la pàgina de Xarxes socials es
configurarà en una pàgina buida, una fpca_llista
html/cos/llista/fpca_llista/) al 100% de l'ample, amb 3
columnes d'elements, amb descripció i separadors.
Aquesta configuració segueix la presentació utilitzada al

Departament d’Afers i Relacions Institucionals i Exteriors i
Transparència
(http://exteriors.gencat.cat/ca/actualitat/xarxes-socials).

sobretaula
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.17 Pàgina Multimèdia

Per la presentació de la pàgina Multimèdia es configurarà
en una pàgina buida, una galeria multimèdia
(http://guiaweb.gencat.cat/ca/cataleg-html/cos/Multimedia-
BIG/), al 100% de l'ample del contingut.

sobretaula
3.18 Pàgina Mapa web
Aquest tipus de pàgina està definit a la guia web del

(http://guiaweb.gencat.cat/ca/cataleg/pagines/pagines_final
s/)

sobretaula
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.19 Pàgina Llista tràmits

Per mostrar els tràmits, es configurarà una llista manual de
tràmits. Aquest tipus de pàgina està definit a la guia web del
(http://guiaweb.gencat.cat/ca/cataleg-html/tramits/llista-de-
tramits).
Només s’integra el contingut tràmit, però no s’hi integren altres

funcionalitats de Tràmits Gencat, com ara el cercador
semàntic.
Visualment, és molt similar al cercador de tràmits, mostrant

tant sols una llista de tràmits sense el formulari de cerca.
Es visualitza la llista de tràmits amb el títol, que enllaça amb el

Visualització d’exemple gràfic en pantalla de detall del tràmit i s’indica quins d’ells són tràmits “En línia” i
sobretaula quins es troben “En termini”:
- En versió per a desktop i tauleta, aquesta indicació és

gràfica.
- En versió per a mòbil, en canvi, a sota del títol del
tràmit només apareixen els literals “En línia” i “En
termini” quan el tràmit compleix aquestes condicions.
El nombre d’elements a mostrar no està limitat. A diferència

del component de cercador de tràmits, no disposa de l’element
de paginació ni del d’enllaços destacats
Exemple de visualització en pantalla de

dispositiu mòbil
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.20 Nova peça d’enllaços per mostrar a la pàgina d’inici

Es proposa una nova peça que mostra un conjunt
d’enllaços.
Només es pot utilitzar amb la configuració A de la
franja horitzontal (1 columna que ocupa el 100% de
l’amplada del contingut).
Mostra:
- Títol de bloc. Camp de text sense format.

- Llistes d’enllaços:
amb: 3 llistes amb imatge A escriptori: Mostra un màxim de 3 llistes
a la mateixa línia horitzontal, les següents
llistes (a partir de la 4a) es mostren a sota
de la primera línia de llistes, sempre
mostrant un màxim de 3 llistes per línia.
Quan es mostren menys de 3 llistes a una
línia, es queda buit l’espai que ocuparien
les altres llistes de la mateixa línia.
A mòbil: es mostren les llistes una a sota

de l’altra, en format columna.
Cada llista d’enllaços mostra:

o Imatge (opcional). Mida
Visualització d’exemple gràfic en pantalla de sobretaula recomanada de la imatge:
amb: 1 llista amb imatge 312x170px (ó superior
conservant la proporció)
o Títol de llista (opcional). Camp
de text sense format.
o Conjunt d’enllaços, cada enllaç
format per:
§ Literal a mostrar al
front.
§ Enllaç, on va quan
l’usuari selecciona el
literal corresponent.
§ Obrir a pestanya nova
amb: 3 llistes sense imatge.
(camp intern). Camp
Sí/No (valor per
defecte)
Paràmetres de configuració de la llista:

- Mostrar imatge: Sí / No (valor per
defecte)
Quan es faci la definició tècnica d’aquesta nova

peça:
- Pot haver modificacions en aquesta
proposta de camps/paràmetres.
- S’haurà de valorar la possibilitat d’incloure
una imatge a les llistes, o una peça que
Visualització d’exemple gràfic en pantalla de sobretaula ho pugui permetre.
amb: imatge i 3 llistes.
Sobre franja de color gris.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
Visualització d’exemple gràfic en

pantalla de dispositiu mòbil amb: 1
llista sense imatge
Exemple de visualització en Exemple de visualització en

pantalla de dispositiu mòbil amb: pantalla de dispositiu mòbil amb:
imatge i 3 llistes imatge i 3 llistes.
Sobre franja de color gris.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.21 Integració amb aplicació del temps de Territori (nova forma de

presentació utilitzant HttpFetch)
Es proposa una nova forma de presentació utilitzant
HpttpFetch integrant-se mitjançant l’API de Meteocat.
Ocupa el 100% del contenidor on es col·loqui.
Només es pot utilitzar amb la configuració C (2 columnes:
66% / 33%), a la columna del 33% de la franja horitzontal.
Mostra:
- Llistat de poblacions amb la respectiva predicció
meteorològica de cada població.
Visualització d’exemple gràfic en pantalla de - Cada població mostra:
sobretaula/dispositiu mòbil amb una població o Nom població
o Literal ‘Veure predicció’: Enllaç a la web
de Meteocat per ampliar la informació del
temps de la població que s’està
mostrant. Aquest enllaç es podrà
seleccionar mitjançant tota la zona de la
peça excepte:
§ L’espai lateral que ocupen les
fletxes (tota l’alçada lateral)
§ L’espai dels punts (lateral
inferior esquerra).
o Temperatura actual.
Visualització d’exemple gràfic en pantalla de o Temperatura màxima.
sobretaula amb dues poblacions o Temperatura mínima.
o Icona del temps actual.
Totes aquestes dades/icones hauran de ser

proporcionades per l’API de Meteocat.
A escriptori: Ocupa el 33% d’amplada de la pàgina, a la

columna dreta.
Quan hi ha més d’una població al llistat:
- Es mostren els punts (lateral inferior esquerra) per
fer la navegació entre elements de la llista.
Visualització d’exemple gràfic en pantalla de - Quan es posa el cursor a sobre de la peça, es
sobretaula (hover) /dispositiu mòbil amb més mostren les fletxes laterals per poder fer la
d’una població navegació entre elements de la llista.
A mòbil: Ocupa el 100% d’amplada del contingut de la

pàgina.
Quan hi ha més d’una població al llistat:
- Es mostren els punts (lateral inferior esquerra).
- Es mostra el punt de navegació en vermell en la
posició de la població que estem visualitzant.
- Es mostren les fletxes laterals per fer la navegació
entre elements de la llista.
- Es pot seleccionar amb el dit amb moviment
lliscant horitzontal sobre la visualització per
navegar entre elements de la llista (cap a la dreta,
la població anterior de la llista; cap a l’esquerra, la
població posterior).
A GECO+, s’haurà de poder escollir quines poblacions es

mostraran a aquesta llista de les disponibles a Meteocat.
Pendent de definir les implicacions tècniques.
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.22 Noves peces i evolució/configuració d’existents

Per aquestes webs, s’han definit les següents peces:
- Slider captació (peça nova): caldrà un anàlisi tècnic per acabar de definir si es pot aprofitar
una peça existent i evolucionar una nova forma de presentació, o s’ha de crear tot de nou. Es
proposa que tingui un paràmetre ‘Visualització’, amb els valors ‘estàndard’ (valor per defecte) /
microsite. Amb aquests paràmetres es controlarà el format de la visualització al front.
- Integració amb aplicació del temps de Territori (nova forma de presentació utilitzant
HttpFetch): caldrà un anàlisi tècnic per definir la connexió a la API de l’aplicació externa, els
elements que es comuniquen i com es mostren al front.
- Avisos (possible evolució de peça existent): caldrà un anàlisi tècnic per definir si es pot
incloure un nou hashtag i llistat d’avisos tipus/icones associades a la peça existent, o s’ha de
crear una de nova.
- Visor de dades (Google Maps) pels dos mapes: llistat de parcs de la Xarxa i llistat
d’equipaments d’un parc (definició KML específic i llista origen de dades per cada visor
de dades). S’haurà de definir el format i origen de les dades per a cada mapa.
- Proposta de versions idiomàtiques. Caldrà un evolutiu de la solució tècnica.
- Model de Capçalera per microsites. Caldrà un anàlisi tècnic per acabar de definir la seva
realització.
- Nova peça d’enllaços per mostrar a la pàgina d’inici. Exemple a la pàgina 29 i 32 d’aquest
document, bloc ‘Troba la informació per a tu’.
o Es proposa utilitzar la Distribuïdora estil 1 (http://guiaweb.gencat.cat/ca/cataleg-
html/cos/distribuidora). Aquesta peça proporciona una experiència d’usuari consistent
amb les necessitats expressades per l’equip de Parcs de Catalunya, i coherent amb la
proposta gràfica realitzada, amb la qual cosa no seria necessari un desenvolupament.
o Envers la petició que aquest bloc estigui fet amb llistes i no utilitzant la Distribuïdora:
actualment GECO+ responsiu no disposa d’una llista que acompleixi els requisits
sol·licitats, i s’hauria d’estudiar la solució tècnica per definir-la. Caldrà consultar a la
DGAC per a la creació d’aquesta nova peça.
o En aquest document proposem nova peça d’enllaços (veure apartat 3.20.1 d’aquest
document).
31/05/2019
14:21:41
(GECO+ adaptatiu)
Anàlisi funcional
3.23 Mides recomanades de les imatges

En aquest apartat resumim les característiques requerides per a les imatges de les
diferents peces que es descriuen al document:
• Diapositives:
o Al 66%: 748x422px
o Al 50%: 555x431px.
• Destacats (amb imatges): 279x186 px.
• Pàgines de detall de contingut (Articles, Activitat Agenda, Notícies*): mínim 420 px d’ample.
Perquè es vegin bé al component de slider (Diapositives), han de tenir la mida indicada al slider
(Diapositives) com a mínim. La forma en què es veuran a la pàgina de detall depèn dels camps
que tingui informats el contingut (per exemple, si hi ha destacats/enllaços a la dreta, les imatges
es reduiran).
• Icones (llista icones/pàgina Xarxa de Parcs): 70x70 px.
• Distribuïdores:
o Estil 3:
§ 4 columnes al 100%: 375x281 px
o Estil 4:
• Imatges d’impacte (subcapçalera): 1.349x264 px (sense text, millor fons fosc).
• Imatge nova forma de presentació slider/carrusel: 1.900x723 px (sense text)
• Imatges nova peça d’enllaços per mostrar a la pàgina d’inici: 312x170 px (sense text)
NOTA: a la Guia web gencat trobareu recomanacions i consells sobre l’estil i el tractament d’imatges,
així com adreces de bancs d’on podeu obtenir imatges lliures de drets.
Al manual d’usuari de framework GECO+ responsiu podeu consultar les indicacions per a la resta de
components que admeten imatges.
31/05/2019
14:21:41

Parcs Analisi Funcional v8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Parcs Analisi Funcional v8

Uploaded by

Copyright:

Available Formats

Web de Parcs Naturals N. revisió doc.: 7.

N. versió solució: 0.1 Build: Pàg. 1 / 52

N. versió solució: 0.1 Build: Pàg. 2 / 52

Revisió Redactat Revisat per Aprovat per Data Data

0.1 HP-VASS Equip Parcs de Equip Parcs de

Revisió Apartat Data Modificació Motiu del canvi

N. versió solució: 0.1 Build: Pàg. 3 / 52

RESPONSABLE DEL DOCUMENT: DXC-VASS

1 Objectius del projecte ..................................................................................................................... 5

N. versió solució: 0.1 Build: Pàg. 4 / 52

3.7.2 Proposta de pàgina d’inici per Microsite ......................................................................... 33

N. versió solució: 0.1 Build: Pàg. 5 / 52

1 Objectius del projecte

Dins d’aquest projecte, s’estableixen les següents tasques de definició:

Conceptualitzar la nova Home de la web de Parcs de Catalunya

• Proposta de prototip de nova Home seguint la plantilla i estructura de Home

• Proposta de fins a 3 peces noves com a màxim, si així es defineix, a nivell de

N. versió solució: 0.1 Build: Pàg. 6 / 52

2.1 Wireframes aprovats

Podeu consultar els wireframes aprovats d’aquest projecte al següent enllaç:

2.2 Propostes gràfiques aprovades

2.3 Guia d’estils web gencat

Consulteu la Guia web gencat si voleu més informació sobre:

N. versió solució: 0.1 Build: Pàg. 7 / 52

A continuació es mostra un esquema de l’arbre de navegació de la nova web de Parcs de

3.1 Arbre de navegació: Parcs de Catalunya

L’arbre de navegació de la nova web de Parcs de Catalunya (http://parcsnaturals.gencat.cat)

N. versió solució: 0.1 Build: Pàg. 8 / 52

N. versió solució: 0.1 Build: Pàg. 9 / 52

3.2 Arbre de navegació: Microsite d’un parc tipus

N. versió solució: 0.1 Build: Pàg. 10 / 52

3.3 Tipologies de pàgina – Parcs de Catalunya

El quadre següent és un resum de l’arbre de navegació on es defineix el tipus de plantilla

N. versió solució: 0.1 Build: Pàg. 11 / 52

N. versió solució: 0.1 Build: Pàg. 12 / 52

3.4 Tipologies de pàgina – Microsite de Parc

El quadre següent és un resum de l’arbre de navegació on es defineix el tipus de plantilla

B-EL PARC Distribuidora

C-02-01-Fitxa activista Fitxa activitat agenda

N. versió solució: 0.1 Build: Pàg. 13 / 52

3.5 Idiomes del portal

3.6 Elements comuns de les pàgines

3.6.1 Capçalera (web Parcs de Catalunya)

Capçalera corporativa del portal. Es mostrarà la pestanya on es trobi ubicat l’apartat

N. versió solució: 0.1 Build: Pàg. 14 / 52

Visualització d’exemple en pantalla de sobretaula

Visualització d’exemple en mòbil

Com es pot veure a la imatge, la capçalera contindrà:

• El logotip de la Generalitat de Catalunya amb enllaç a la pàgina principal de gencat.

• El nom del portal: Parcs de Catalunya

• Pestanyes del menú de nivell 1. Seran:

Si es mostra només fins al segon nivell de navegació:

N. versió solució: 0.1 Build: Pàg. 15 / 52

Si se’n mostra un tercer nivell es visualitzaria com als portals departamentals.

En mòbil, el tercer nivell no es visualitza:

N. versió solució: 0.1 Build: Pàg. 16 / 52

Visualització en pantalla de dispositiu mòbil (es mostra imatge genèrica)

Les pàgines de N3 en endavant mostren un menú secundari a l’àrea de la subcapçalera, al

N. versió solució: 0.1 Build: Pàg. 17 / 52

N. versió solució: 0.1 Build: Pàg. 18 / 52

3.6.2 Capçalera Microsite (Parc tipus)

Es comporta com la capçalera, amb les següents personalitzacions:

Visualització d’exemple en pantalla de sobretaula