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 Original se encuentra en Zeplin en el proyecto POSE; en caso de no tener acceso a dicho proyecto 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.

En el siguiente enlace se pondrán las distintas actualizaciones del diseño y como adaptar proyectos generados con arquetipos anteriores.

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

Dónde está el estilo

El Sistema de Diseño Corporativo se puede ver en Zeplin:

https://app.zeplin.io/project/5d888c6fbf25d5659beb4883/dashboard?sid=5ebecf67f6a658487ef7fe91

Para consultarlo es necesario invitación; se irán añadiendo usuarios conforme se vayan necesitando (contacta con MNCS).

Podemos consultarlo para tener una idea general del aspecto que debe tener nuestra aplicación.

Los principales apartados en los que fijarnos son:

• Componentes: donde se detalla el diseño de los componentes.
• Fundeweb - Casos de Uso: Ejemplos de pantallas con el estilo.

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.

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_0/css/font.css" />
<fdw:outputStylesheet library="themes" name="um/1_0/css/layoutUMU.css" />
<fdw:outputStylesheet library="themes" name="um/1_0/css/estiloUMU.css" />

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_0/css/font.css" />
<fdw:outputStylesheet library="themes" name="um/1_0/css/layoutUMU.css" />
<fdw:outputStylesheet library="themes" name="um/1_0/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:commandButton
• p:conmmandlink
• p:splitButton
• p:inputText

Configuración de componentes

A continuación se detallan los componentes que permiten algún tipo de configuración.

Diálogos

Cuando se usa el componente p:dialog, para que los botones de aceptar y cancelar del dialogo se vean correctamente deben estar dentro de un <f:facet name="footer"> o dentro de un div con la clase ui-dialog-buttonpane.

<p:dialog>
    <div class="ui-dialog-buttonpane">
        <p:commandButton value="Guardar" icon="fa fa-floppy-o" styleClass="btn btn-primary" />
        <p:commandButton value="Cancelar" icon="fa fa-times" styleClass="btn btn-secondary" />
    </div>
</p:dialog>

<p:dialog>
    <f:facet name="footer">
        ...
    </f:facet>
</p:dialog>

Inputs

p:inputText

La clase input-bg define una mayor altura al input.

Se pueden incluir iconos en el input con las clases um-input-icons y um-icon de la forma:

    <div class="um-input-icons">
        <i class="um-icon fa fa-pencil-square-o fa-lg" />
        <p:inputText styleClass="input-bg" />
        <span class="um-icon">$</span>
    </div>

También se han tenido en cuenta las agrupaciones, ente caso la clase input-bg, si que quiere poner, hay que ponerla en el div para que se aplique también a los addon, por ejemplo:

    <div class="ui-inputgroup input-bg">
        <span class="ui-inputgroup-addon">
            <i class="fa fa-shopping-cart"></i>
        </span>
        <span class="ui-inputgroup-addon">
            <i class="fa fa-credit-card"></i>
        </span>
        <p:inputText placeholder="Price" />
        <span class="ui-inputgroup-addon">$</span>
        <span class="ui-inputgroup-addon">.00</span>
    </div>

p:inputText con etiqueta flotante (solo primefaces 8)

    <span class="ui-float-label">
        <p:inputText />
        <p:outputLabel for="@previous" value="ui-float-label" />
    </span>

Botones

Se han probado con las configuraciones habituales, botón con solamente texto, texto e icono, solamente icono. En caso de botones que solamente tienen icono, se debe seguir las reglas de accesibilidad y proporcionarles una etiqueta de alguna forma.

Clases CSS aplicables:

btn: Esta clase es necesaria para aplicar el estilo al botón.

btn-primary, btn-secondary y btn-light: Estas clases definen la importancia del botón, btn-primary es el valor por defecto.

btn-sm, btn-md, btn-lg: definen el tamaño del botón, por defecto es btn-lg.

btn-round: redondea completamente el botón, si el botón solamente tiene icono tendrá forma de circulo.

Clave CSS botonera se puede poner en el div que incluye los botones para separarlos correctamente.

Ejemplos en diferentes componentes:

p:commandButton

        <p:commandButton styleClass="btn btn-primary" value="Guardar" disabled="true"/>
        <p:commandButton styleClass="btn btn-primary btn-md" value="Guardar" icon="fa fa-floppy-o" />
        <p:commandButton styleClass="btn btn-secondary" icon="fa fa-floppy-o" />

p:conmmandlink

Al poner la clase btn este componente se dibujará como un botón pero seguirá generando un "tag a" en el HTML así que se recomienda usar como botón solamente si es imprescindible y en este caso es necesario añadir el atributo role="button".

Para usar este componente como botón tenemos que usar las clases css: ui-button-icon-left ui-button-text

        <p:commandLink styleClass="btn" role="button">
            <i class="ui-button-icon-left fa fa-floppy-o" />
            <span class="ui-button-text">btn</span>
        </p:commandLink>
        <p:commandLink styleClass="btn btn-round" role="button">
            <i class="ui-button-icon-left fa fa-floppy-o" />
        </p:commandLink>

button (HTML)

Usaremos las clases ui-button-text ui-button-icon-left

        <button class="btn btn-primary">
            <i class="ui-button-icon-left fa fa-floppy-o"></i>
            <span class="ui-button-text">texto</span>
        </button>

p:splitButton

        <p:splitButton styleClass="btn btn-primary" value="texto" icon="fa fa-floppy-o">
            <p:menuitem value="Alta" icon="fa fa-floppy-o" />
            <p:menuitem value="Pagina inicial" url="..." icon="fa fa-home" />
        </p:splitButton>

Grupo de botones

Para agrupar botones usaremos la clase um-button-group

        <span class="um-button-group">
            <p:commandButton styleClass="btn btn-light btn-sm" icon="fa fa-floppy-o" />
            <p:commandButton styleClass="btn btn-light btn-sm" value="Accion" />
        </span>
        <span class="um-button-group">
            <p:commandLink styleClass="btn btn-light btn-sm ui-button-icon-only" role="button">
                <i class="ui-button-icon-left fa fa-floppy-o" />
            </p:commandLink>
            <p:commandLink styleClass="btn btn-light btn-sm" role="button">
                <span class="ui-button-text">Accion</span>
            </p:commandLink>
        </span>

S:link como botón

        <s:link class="ui-commandlink btn btn-secondary">
            <i class="ui-button-icon-left fa fa-floppy-o" />
            <span class="ui-button-text">s:link como botón secundario</span>
        </s:link>

TabWiew

Tabs con pestañas subrayadas, clase ".tab-subrayado"

Tabs dentro de un panel

Si el elemento <p:tabView es el primero dentro de un panel, se adaptará para ocupar todo el contenido del panel y aparecerá subrayado.

Panel

Iconos de acción en el titulo del panel, ejemplo de posibles acciones y desplegable con opciones:

        <p:panel header="Panel de pruebas" toggleable="true" closable="true">
            <f:facet name="actions">
                <h:form>
                    <p:commandLink styleClass="ui-panel-titlebar-icon">
                        <h:outputText styleClass="ui-icon fa fa-question"/>
                    </p:commandLink>
                    <p:commandLink styleClass="ui-panel-titlebar-icon">
                        <h:outputText styleClass="ui-icon fa fa-star"/>
                    </p:commandLink>
                </h:form>
            </f:facet>
            <f:facet name="options">
                <h:form>
                    <p:menu>
                        <p:menuitem value="Accion 1" />
                        <p:menuitem value="Accion 2" />
                    </p:menu>
                </h:form>
            </f:facet>
            ...

Clases para tipografía

Son clases con los estilos de la tipografía definida en Zeplin, por si se quieren usar para cambiar la tipografía por defecto.

Tamaño:

.text-size-big-1 .text-size-big-2 .text-size-big-3 .text-size-big-4 .text-size-big-5
.text-size-body .text-size-caption .text-size-small .text-size-tiny

Weight:

.font-weight-bold .font-weight-semi .font-weight-medium .font-weight-regular

Color:

.text-dark .text-grey .text-white .text-primary

En primeflex tenemos otras clases por ejemplo para justificación, "Primeflex text en Showcase" -> www.primefaces.org/showcase/primeflex/text.xhtml

Página de Bienvenida

La aplicación debería tener una página de Bienvenida, como se puede ver en zeplin o en la página de bienvenida de Apium. Para facilitar el trabajo la implementación de esta página se han definido las siguientes clases CSS.

• Introducción pantalla de inicio (umu-intro, umu-desc, umu-desc small)
• Enlaces pantalla inicio (enlaces-home)
• Tarjeta pantalla inicio (umu-card, umu-card-top, umu-card-link, umu-icon-red, umu-icon-purple, umu-icon-yellow, umu-icon-green, umu-icon-blue, umu-card-bottom, umu-card-label, umu-card-desc )

    <div class="umu-intro">
        <h1>Titulo</h1>
        <div class="umu-desc">Descripcion</div>
        <div class="umu-desc small">
            <p>Linea 1</p>
            <p>Linea 2</p>
        </div>
    </div>
    <div class="enlaces-home">
        <h2>Titulo de enlaces</h2>
        <h:form>
            <div class="umu-card">
                <div class="umu-card-top">
                    <p:commandLink styleClass="umu-card-link" pt:aria-labelledby="tarjetaLabel" pt:aria-describedby="tarjetaDesc">
                        <i class="fa fa-list-alt umu-icon-purple" />
                    </p:commandLink>
                </div>
                <div class="umu-card-bottom">
                    <div id="tarjetaLabel" class="umu-card-label">Label</div>
                    <div id="tarjetaDesc" class="umu-card-desc">Descripcion de la acción de esta tarjeta</div>
                </div>
            </div>
            ...
        </h:form>
    </div>

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.