• Imprimeix

A. Recrear el marc de navegació del web a l’aplicació origen

A l'aplicació origen, cal construir el marc de navegació i reproduir l'estil i continguts del web des d'on es fa referència, de manera que per a l'usuari sigui transparent i estable la seva navegació. L'única afectació o diferència que hi pot veure és que canvia la URL de navegació.

Model integració

Model de recreació del marc de navegació del web a l'aplicació origen.

L'aplicació cal que compleixi els següents requeriments:

  • Les plantilles de l’aplicació han de ser responsives.
  • Han de ser coherents gràficament amb el web que reprodueixen.
  • Han de ser accessibles: han de complir el nivell doble A (AA) de les WCAG 2.0. Les WCAG 2.0 es referencien a la Norma UNE 139803:2012.

 

Destaquem

Manual per crear plantilles d'integració amb aplicacions externes a GECO+

Consulteu el manual si sou usuaris d’un web GECO+ i voleu mostrar-hi una aplicació externa: el gestor serveix les plantilles pertinents per facilitar la tasca i l’actualització automàtica dels continguts del marc.

Què és el marc de navegació?

S’entén per marc de navegació les dues àrees que formen l’estructura bàsica del web origen: la capçalera i el peu de pàgina.

Capçalera

La capçalera ha de contenir els mateixos elements, continguts i estil que el web origen.

Està formada pels següents elements:

  • Logotip gencat.cat: Element obligatori. Enllaça sempre a la pàgina d’inici gencat.cat. En mòbil, apareix dins del menú de navegació quan aquest es desplega.
  • Idiomes: Element opcional. En mòbil, apareixen al peu de pàgina.
  • Cercador:Element obligatori. Cerca al cercador corporatiu gencat, ja sigui a tot gencat (cercador.gencat.cat), o a la col·lecció o url concreta del web origen. En mòbil s’obre quan es clica sobre la lupa.
  • Títol del web: Element obligatori. Títol del web origen, que enllaça a la seva pàgina d’inici. Depenent de la llargada del nom, la mida de la lletra és diferent.
  • Menú de navegació: Element opcional. Reproducció del menú principal de navegació del web origen.
    • Es recomana que el menú de navegació no desplegui les seccions i enllacin directament a les pàgines distribuïdores del portal origen, a no ser que el marc de navegació es generi dinàmicament i qualsevol canvi en l’origen es reflecteixi automàticament a l’aplicació.
    • El menú principal es recomana que tingui entre 5 i 7 punts de navegació de 1r nivell, incloent-hi l’enllaç a Inici, que en el disseny corporatiu sempre apareix.
    • És una bona pràctica l’ús de títols breus, concisos i que hi càpiguen en una línia.
    • Es recomana que el Contacte sigui un element del menú de navegació principal.
  • Fil d’Ariadna: Element obligatori en escriptori. En la visualització per mòbil, el fil d’Ariadna desapareix. Reproducció del fil d’Ariadna on es troba localitzat en la navegació del web origen l’aplicació.
    • Indica la jerarquia o camí on es troba un contingut.
    • Informa l’usuari en quina pàgina es troba.
    • És una eina de navegació més per accedir a nivells anteriors.
    • Totes les seccions són clicables menys la darrera, que indica el nom de la pàgina on es troba l’usuari.
  • Títol de la pàgina: Element obligatori. Indica el nom de l’aplicació. Es mostra sobre una franja de fons gris.
  • Eines de compartició: Element opcional. En escriptori i tauleta, l’àrea on es col·loquen les eines de compartir i d’imprimir el contingut d’una pàgina és a l’alçada del fil d’Ariadna. En mòbil, es col·loquen al final del contingut de la pàgina, abans del faldó/peu, amb l’etiqueta “Comparteix a:” al davant.
    • Les xarxes socials estàndards i recomanades són Twitter i Facebook. Si cal posar-ne altres de diferents, la DGACD ho avaluarà en cada cas.
    • La possibilitat d’enviar el contingut per correu electrònic també és element opcional.
    • També s’hi inclou la possibilitat d’imprimir el contingut, que ha de contenir un css específic en el cas que amb la impressió per defecte no surti correctament.

Exemples de capçalera d’escriptori i tauleta

Capçalera escriptori i tauleta sense menú de navegació

Capçalera escriptori i tauleta sense menú de navegació

Capçalera escriptori i tauleta amb menú de navegació

Capçalera escriptori i tauleta amb menú de navegació

Exemples de capçalera mòbil

Capçalera mòbil amb menú de navegació

Capçalera mòbil amb menú de navegació

Capçalera mòbil sense menú de navegació

Capçalera mòbil sense menú de navegació

Peu de pàgina

Està format pels següents elements:

  • Faldó: Element opcional. Es recomana que no es reprodueixi el faldó del portal origen, a no ser que aquest es generi dinàmicament i qualsevol canvi en l’origen es reflecteixi automàticament a l’aplicació.
  • Avís legal:  Element obligatori. Tots els webs de la Generalitat han de contenir i complir l’avís legal de gencat.cat.
    • Avís legal: La © Generalitat de Catalunya permet la reutilització dels continguts i de les dades sempre que se citi la font i la data d'actualització, que no es desnaturalitzi la informació i que no es contradigui amb una llicència específica.
    • Els webs que s’excepcionin del contingut d’aquest avís legal han de tenir, per tant, la corresponent llicència que s’hi adigui.
  • Logotip: Element obligatori. Al peu de pàgina ha de constar el logotip de la Generalitat de Catalunya.
    • En el seu lloc pot constar també el logotip oficial del programa d’identitat corporativa de l’organisme que firma el web. No poden conviure junts, ha de ser o l’un o l’altre.
    • En el cas que hi hagi més d’un promotor d’un web i aquests siguin de la Generalitat de Catalunya, només constarà el logotip de la Generalitat.
    • El disseny gencat corporatiu no està pensat perquè convisquin més promotors d’altres administracions, ja que és el disseny que identifica que un web pertany a la Generalitat de Catalunya.
    • No es pot incloure al peu de pàgina la firma/logotip de l’empresa desenvolupadora del web.
    • No es pot utilitzar en aquest espai un logotip o marca del portal no corporatiu ni acceptat pel programa d’identitat corporativa

Exemples de peu de pàgina en escriptori i tauleta

Peu de pàgina escriptori i tauleta sense faldó

Peu de pàgina escriptori i tauleta sense faldó

Peu de pàgina escriptori i tauleta amb faldó

Peu de pàgina escriptori i tauleta amb faldó

Exemples de peu de pàgina en mòbil

 Peu de pàgina mòbil sense faldó

Peu de pàgina mòbil amb faldó

Data d'actualització:  22.01.2016