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:

...

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 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 generados con arquetipos versiones anteriores del diseño.

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:

...

.

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.

...

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

...

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

...

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.

...

Inputs

p:inputText

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

Image Removed

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

Image Removed

    <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>

Image Removed

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:

Image Removed

    <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>

Image Removed

p:inputText con etiqueta flotante (solo primefaces 8)

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

Image Removed

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.

Image Removed

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

...

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.

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"

Image Removed

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>
            ...

Image Removed

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>

Image Removed

Notas de accesibilidad

...

Accesos directos de espacio

Árbol de páginas

Versiones comparadas

Versión anterior 1

Nueva versión Actual

Clave

Introducción

Dónde está el estilo

Plantilla para aplicaciones NO fundeweb

Cómo usarlo en FundeWEB

Configuración de componentes

Diálogos

Inputs

p:inputText

p:inputText con etiqueta flotante (solo primefaces 8)

Botones

Configuración de componentes

TabWiew

Panel

Clases para tipografía

Página de Bienvenida

Notas de accesibilidad

Accesos directos de espacio

Árbol de páginas

Historial de página

Versiones comparadas

Versión anterior 1

Nueva versión Actual

Clave

Introducción

Dónde está el estilo

Plantilla para aplicaciones NO fundeweb

Cómo usarlo en FundeWEB

Configuración de componentes

Diálogos

Inputs

p:inputText

p:inputText con etiqueta flotante (solo primefaces 8)

Botones

Configuración de componentes

TabWiew

Panel

Clases para tipografía

Página de Bienvenida

Notas de accesibilidad