Introducción

El objetivo del Sistema de Diseño Corporativo es que las aplicaciones tengan una imagen común, identificada con la Universidad de Murcia., y que el usuario tenga la sensación de que permanece en la misma aplicación y sea transparente para él navegar a distintas aplicaciones, sobre todo a aquellas enlazadas al Portal de Servicios.

El uso del Sistema de Diseño Corporativo es obligatorio para cualquier aplicación nueva, y para todos los servicios que se quieran integrar en el Portal de Servicios, de modo que dicho Sistema de Diseño incluye todos los componentes que puede necesitar una aplicación web, o un servicio del Portal de Servicios. Si crees que al Sistema de Diseño le falta algún componente, contacta con MNCS.

El Sistema de Diseño se ha incluido en el nuevo arquetipo de FundeWEB para cualquier nueva aplicación, y para aplicaciones FundeWEB antiguas se ha implementado mediante tres ficheros CSS:

• font.css, con las fuentes utilizadas.
• layoutUMU.css, con las reglas relacionadas con la estructura de la página y menús.
• estiloUMU.css, con reglas para cambiar la apariencia de los componentes.

Una vez añadidos estos CSS la mayoría de los componentes adoptarán la apariencia de la imagen corporativa.

El Sistema de Diseño Corporativo se irá actualizando y revisando para adoptar los posibles cambios en el diseño, se ha documentado como realizar estas actualizaciones del diseño y como adaptar proyectos con versiones anteriores del diseño.

Para cualquier consulta sobre cómo aplicar el Sistema de Diseño Corporativo, contacta con MNCS.

Plantilla para aplicaciones NO fundeweb

Para las aplicaciones que no sean fundeweb se ha adaptado el estilo corporativo para no depender de elementos integrados en dicha tecnología (mayoritariamente primefaces) y se han cambiado para que enlacen con elementos HTML. Para poder adaptar una aplicación NO fundeweb a partir del estilo diseñado en Zeplin, puedes descargar la plantilla de estilo corporativo NO fundeweb y utilizarlo como base.

Cómo usarlo en FundeWEB

Si se usa el nuevo arquetipo, no hay que hacer nada, ya que usa el estilo corporativo por defecto.

Para aplicaciones anteriores, el estilo se distribuye en las últimas versiones de FundeWeb, así que para usarlo desde FundeWeb solamente hay que añadir los ficheros CSS en el template.xhtml de la aplicación:

<fdw:outputStylesheet library="themes" name="um/1_2/css/font.css" />
<fdw:outputStylesheet library="themes" name="um/1_2/css/layoutUMU.css" />
<fdw:outputStylesheet library="themes" name="um/1_2/css/estiloUMU.css" />

Es recomendable seguir las instrucciones que aparecen en documento  Actualización de la aplicación generada por el arquetipo.

El estilo está pensado para adaptar los componentes Primefaces y elementos HTML que se usan en las aplicaciones FundeWeb, pero también podemos incluir estos ficheros CSS manualmente en nuestra aplicación.

Cómo se gestiona en FundeWEB

Los ficheros CSS del estilo corporativo están incluidos en la librería fundeweb-tags-primefaces8 de las últimas versiones de FundeWeb, en el arquetipo lo tenemos enlazado desde el template de la aplicación con las líneas:

<!-- Personalizacion UMU -->
<fdw:outputStylesheet library="themes" name="um/1_2/css/font.css" />
<fdw:outputStylesheet library="themes" name="um/1_2/css/layoutUMU.css" />
<fdw:outputStylesheet library="themes" name="um/1_2/css/estiloUMU.css" />

Al estar añadido en una librería nos permite hacer pequeñas correcciones de los estilos para todas las aplicaciones o distribuir una nueva versión más fácilmente.

También se ha añadido un archivo CSS vacío .../webapp/resources/custom.css para añadir las reglas de personalización de la aplicación, este archivo se carga después de los CSS del estilo en el template.

<!-- Personalizacion de la aplicacion -->
<fdw:outputStylesheet library="css" name="custom.css" />

Hemos tenido en cuenta y adaptado los componentes y configuraciones más usados, de forma que si, cuando estamos desarrollando una aplicación, tenemos que retocar un componente porque no se adapta a la imagen corporativa, y creemos que puede ser útil para otras aplicaciones, podemos comentarlo con MNCS para que ese cambio de estilo esté incluido en la librería en las siguientes versiones.

Explicación de uso

Para formatear la estructura de las páginas se recomienda en uso de Grid CSS de Primefaces, Flex Grid también está incluido en el arquetipo. La mayoría de los componentes cambiarán su aspecto al incluir los ficheros CSS, pero en algunos casos tendremos que añadir algunas clases CSS al componente para configurarlo. Se pueden ver ejemplos de uso de estos componentes en la aplicación APIUM y en el nuevo arquetipo.

font.css, contiene las fuentes utilizadas, tanto las aplicaciones nuevas que hagan uso del arquetipo como las ya existentes deberían usar estas fuentes.

layoutUMU.css, contiene la imagen corporativa de la estructura de la página y partes de ella como el encabezado, el menú o el pie de página, así como algunas reglas globales a toda la aplicación, está pensado para la estructura de la página que genera el arquetipo en las nuevas aplicaciones, de forma que para adecuar el estilo de una aplicación que no ha usado este arquetipo se deberá modificar este fichero.

estiloUMU.css, contiene reglas para el estilo de componentes Primefaces y elementos HTML que son usados en las aplicaciones FundeWeb.

Componentes

Se ha intentado que las reglas sean genéricas de forma que el estilo se adapte a la mayoría de componentes tanto HTML como Primefaces, a continuación se muestran componentes Primefaces específicos con los que se ha probado:

• p:message
• p:selectCheckboxMenu, con selección normal o multiple
• p:textEditor
• p:selectOneMenu
• p:autoComplete, con seleccion normal o multiple y con y sin dropdown
• p:selectBooleanCheckbox
• p:accordionPanel
• p:panel
• p:fieldset
• p:dialog
• p:tabView
• p:growl
• p:columnToggle
• p:dataTable
• p:treeTable
• p:commandButton
• p:conmmandlink
• p:splitButton
• p:inputText
• p:steps

Configuración de componentes

Para ver como usar los componentes y sus distintas opciones de configuración, se puede consultar la aplicación FundeWeb ShowCase.

Notas de accesibilidad

En el arquetipo se ha puesto especial interés en cumplir las reglas de accesibilidad en las partes que vienen implementadas, además en el diseño de componentes se ha tenido en cuenta las reglas visuales de accesibilidad como las que hacen referencia al contraste del componente, pero muchas de estas reglas dependen de donde se coloca este componente, por ejemplo el criterio "1.4.11 Non-text Contrast" añadido nuevo en WCAG 2.1, que hace referencia al contraste del componente en relación a los elementos que hay alrededor, no se cumpliría sí colocamos un botón terciario (btn-light), que no tiene un borde con contraste alto, cerca de algún tipo texto, ya que no se distinguiría suficientemente de él, pero si se cumpliría si lo colocamos en una botonera.

Por estos motivos, se recomienda seguir revisando estas reglas.