Cómo crear una página de inicio de sesión personalizada

Siguiendo un proceso de tres pasos, puede crear y personalizar una página de inicio de sesión específica para su empresa u organización. Estos tres pasos incluyen:

Para una descripción más detallada de estos pasos, consulte el Centro de soporte técnico. Para más información acerca de cómo crear una página de inicio de sesión personalizada, vaya a https://techsupport.informationbuilders.com

Cómo diseñar y activar la nueva página de inicio de sesión personalizada

Cómo:

La página incluida de serie, mostrada en la siguiente imagen, está compuesta por una imagen de fondo y un cuadro de diálogo para introducir las credenciales de inicio de sesión.

La imagen de fondo está centrada en una div class, que aporta algo de espacio alrededor de la imagen. Para diseñar su página, consulte Cómo Diseñar la página.

Principio de página

Procedimiento: Cómo Diseñar la página

Debe decidir si va a usar una imagen de fondo, un color (sólido o degradado) o ambos.
Cree una imagen de prueba utilizando un programa de edición que sea capaz de manipular archivos por niveles PNG o PSD, como por ejemplo, Adobe® Fireworks® o Adobe® Photoshop®, respectivamente. Puede usar el programa de código abierto GIMP para modificar el archivo .psd.
1. Abra la imagen multinivel de ejemplo, incluida con la instalación.
2. Sustituya la imagen de fondo, en el nivel Fondo personalizado, por su propia imagen o colores.
3. Establezca la transparencia alfa en el porcentaje deseado.
  Nota: No todas las imágenes requieren la configuración de una transparencia alfa. Normalmente, el valor será de entre un 50 y un 75%.
4. Si es necesario, ajuste el tamaño del lienzo para que coincida con su imagen.
5. Personalice el formulario como se explica en Cómo Personalizar el formulario.
6. Exporte su imagen como .gif o .png para mantener su nivel de transparencia.
7. Coloque su imagen en \ibi\WebFOCUS81\config\web_resource\signin\images.

Principio de página

Procedimiento: Cómo Personalizar el formulario

Para el fondo del formulario:
1. Cambie el color de fondo del objeto Fondo de área de formulario, en Nivel de formulario, para que coincida con su esquema de colores.
2. Coloque el fondo del formulario donde estime oportuno. Dependiendo del texto que vaya modificar en el próximo paso, puede que necesite ajustar el tamaño de este cuadro.
Para los elementos del formulario:
1. Decida si va a utilizar la característica Recordar mis datos con la instalación. En caso afirmativo, active el elemento Recordar mis datos en el Nivel de formulario.
2. Si es necesario, cambie el texto en el Nivel de formulario.
3. Aplique un estilo a todos los elementos y colóquelos en el Nivel de formulario.
Para el mensaje de error:
1. Active el subnivel del mensaje de error.
2. Aplique un estilo al fondo y al texto del mensaje de error y colóquelo en el lugar deseado.
Desactive el Nivel de formulario, ya que estos elementos se generarán durante la ejecución.

Principio de página

Procedimiento: Cómo Activar la nueva página de inicio de sesión personalizada

El último paso consiste en activar la página que acaba de crear. Use los siguientes pasos para llevar a cabo esta tarea.

Entre a WebFOCUS con una cuenta administrativa.
Abra la Consola de administración WebFOCUS.
Pulse Configuración y después, Propiedades de la aplicación.
Pulse Seguridad.
Establezca IBI_Customized_Signin_Page en verdadero, como se aprecia en la siguiente imagen.
Pulse Guardar.
Salir de WebFOCUS.

Cómo establecer las etiquetas de texto

Cómo:

Establecer el texto y los vínculos

WebFOCUS proporciona la capacidad de cambiar el texto de todas las etiquetas de la página de inicio de sesión. Además, le ofrece la posibilidad de incluir hasta dos vínculos personalizados en la barra de menú.

Principio de página

Procedimiento: Cómo Establecer el texto y los vínculos

Vaya a \ibi\WebFOCUS81\config\web_resource\signing\.
En un editor de texto, como Bloc de notas ++, modifique el archivo customsignin.xml.

Cambie el texto de los elementos deseados.

Las siguientes tablas proporcionan el elemento, el nombre de la etiqueta XML y el valor por defecto de dicho elemento (modificable). El valor introducido no incluye el contenedor CDATA XML.

Nota: Si no puede ver sus cambios reflejados en esta sección ni en la CSS, puede que necesite limpiar la caché de su navegador.

Elementos de la página principal	Etiqueta XML	Valor predeterminado
Título de página	<signin_custom_page_title>	Inicio de sesión de BI Portal
Texto de elemento 1 de menú	<signin_menu_button1>	menu1
Vínculo de elemento 1 de menú	<signin_menu_button1_link>	http://www.informationbuilders.com/
Texto de elemento 2 de menú	<signin_menu_button2>	menu2
Vínculo de elemento 2 de menú	<signin_menu_button2_link>	http://www.informationbuilders.com/
Título de marco (área de formulario)	<signin_custom_frame_title>	Iniciar sesión de BI Portal
Etiqueta de nombre de usuario	<signin_user_name_label>	Nombre de usuario:
Etiqueta de contraseña	<signin_password_label>	Contraseña:
Texto del botón de inicio de sesión	<signin_button>	Iniciar sesión
Opción de recordar mis datos	<remember_me_checkbox>	Recordar mis datos en este equipo

Elementos del diálogo Cambiar contraseña	Etiqueta XML	Valor predeterminado
Texto del título	<signin_custom_change_password_frame_title>	Cambiar contraseña
Etiqueta de nombre de usuario	<signin_change_password_user_name_label>	Nombre de usuario
Etiqueta de contraseña anterior	<signin_change_password_old_password_label>	Contraseña anterior
Etiqueta de nueva contraseña	<signin_change_password_new_password_label>	Nueva contraseña
Etiqueta de confirmación de contraseña	<signin_change_password_confirm_password_label>	Confirmar nueva contraseña
Texto del botón de inicio de sesión	<signin_change_password_sigin_button>	Iniciar sesión
Texto del botón de cancelación	<signin_change_password_cancel_button>	Cancelar

Elementos del diálogo Ya se ha conectado	Etiqueta XML	Valor predeterminado
Texto del título	<signin_custom_user-already-signin_frame_title>	El usuario ya se ha conectado
Texto del mensaje	<signin_custom_user-already-signin_message>	Ya existe una conexión activa para este usuario ¿Desea continuar con el inicio de sesión y cancelar la otra sesión?

Cómo editar el archivo CSS para posicionar y aplicar un estilo a los elementos de la página

Cómo:

La disposición de la página de inicio de sesión personalizada ofrece una gran flexibilidad. El estilo y el posicionamiento se efectúan únicamente dentro de la CSS.

Principio de página

Procedimiento: Cómo Editar la CSS

Vaya a \ibi\WebFOCUS81\config\web_resource\signin\
En un editor de texto, como Bloc de notas ++, modifique el archivo customsignin.css.

Modifique los elementos deseados.

Nota:

Para realizar una prueba en cualquier momento, guarde la página y vaya a
```
http://server:port/ibi_apps/
```
Asegúrese de que el zoom de su navegador esté al 100%.
Puede obtener la información de posición y estilo de todos los elementos seleccionando el elemento correspondiente desde su programa de edición de imágenes. Puede que tenga que ajustar ligeramente la posición.
Los URLs de las imágenes se corresponden con el directorio que contiene el archivo CSS (ibi\WebFOCUS81\config\web_resource\signin\). El URL de ese directorio es
```
http://server:port/ibi_apps/web_resource/signin.
```

La siguiente tabla incluye los elementos que puede modificar, su nombre de clase de CSS y los atributos sugeridos que puede que necesite cambiar.

Elementos de la página principal	Clase de CSS o etiqueta HTML	Cambios recomendados
Color de fondo de la página	cuerpo, html	Degradado o sólido: Degradado Susituya todas las copias de #064e96 por su color inicial. Susituya todas las copias de #ff7200 por su color final. Liso Borre las ocho últimas líneas del código en el cuerpo, clase html, que indican: fondo: -webkit-gradient(linear, 0 0, 0 100%, from(#064e96) to(#ff7200)); /old webkit/ fondo: -webkit-linear-gradient(#064e96, #ff7200); /new webkit/fondo: -moz-linear-gradient(#064e96, #ff7200); /gecko/
Color de fondo de la página (continuación)	cuerpo, html (continuación)	Sólido (continuación) fondo: -ms-linear-gradient(#064e96, #ff7200); /IE10/fondo: -o-linear-gradient(#064e96, #ff7200); /opera 11.10+/ fondo: linear-gradient(#064e96, #ff7200); /future CSS3 browsers/ -pie-background: linear-gradient(#064e96, #ff7200);comportamiento: url(web_resource/signin/PIE.htc); Cambie el color del atributo de fondo restante por su color deseado.
Imagen de fondo de inicio de sesión	.signin-background-image	Cambiar la imagen Establecer ancho en el ancho de la imagen Establecer altura en la altura de la imagen
Imagen de fondo de inicio de sesión	.signin-box	Establecer ancho en el ancho de la imagen Establecer altura en la altura de la imagen Nota: Si lo desea, puede usar la parte superior y el lado izquierdo para centrar la imagen y todos sus controles de forma relativa.
Posición de la barra de menú	.signin-custom-menu-bar-position	Establecer parte superior Establecer lado izquierdo
Estilo de la barra de menú	.signin-custom-menu-bar	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Estilo del separador de la barra de menú	.signin-menu-bar-separator	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc. Para ocultar el separador, establezca el color en transparente.
Posición del título del marco	.signin-custom-frame-title	Establecer parte superior Establecer lado izquierdo
Estilo del título del marco	.signin-custom-frame-label	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Posición de la etiqueta de nombre de usuario	.signin-custom-username-label-position	Establecer parte superior Establecer lado izquierdo
Estilo de la etiqueta de nombre de usuario	.signin-custom-username-label	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Posición del control de entrada de nombre de usuario	.signin-custom-username-editbox	Establecer parte superior Establecer lado izquierdo
Estilo del control de entrada de nombre de usuario	.signin-custom-username-editbox-input	Esto controla el estilo; los colores de fondo deben aplicarse aquí.
Posición de la etiqueta de contraseña	.signin-custom-password-label-position	Establecer parte superior Establecer lado izquierdo
Estilo de la etiqueta de contraseña	.signin-custom-password-label	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Posición del control de entrada de contraseña	.signin-custom-password-editbox	Establecer parte superior Establecer lado izquierdo
Estilo del control de entrada de contraseña	.signin-custom-password-editbox-input	Esto controla el estilo; los colores de fondo deben aplicarse aquí.
Posición de la opción de recordar mis datos	.signin-custom-remember-me-position	Establecer parte superior Establecer lado izquierdo
Estilo de la opción de recordar mis datos	signin-custom-remember-me	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Estilo de la etiqueta del botón de inicio de sesión	.signin-button-label	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Posición del botón de inicio de sesión	.signin-custom-button-signin-position	Establecer parte superior Establecer lado izquierdo
Estilo del botón de inicio de sesión	.signin-custom-button-signin	Establecer radio, tamaño y color de borde Establecer fuente
Estilo del botón de inicio de sesión	.signin-button, .button

Nota: Si quiere ajustar el tamaño de cualquier objeto, utilice la misma clase en que haya establecido la posición.

Elementos del mensaje de error	Clase de CSS o etiqueta HTML	Cambios recomendados
Posición del mensaje de error	.signin-custom-error-position	Establecer parte superior Establecer lado izquierdo
Estilo del mensaje de error	.signin-custom-error-message	Establezca el estilo deseado, como el radio de los bordes, la familia de fuentes, el tamaño, color, etc.
Imagen del mensaje de error	.signin-custom-error-image	Establecer la imagen Retire el comentario de la línea :visibilidad: oculto; pero mantenga el espacio que está ocupando. Emplee visualización: ninguno; para eliminar la imagen, incluido el espacio que está ocupando.

El estilo de los elementos de las dos siguientes tablas proviene de los elementos de la página principal. Es decir, que los botones, etiquetas y controles coinciden con los de la página principal.

Elementos del diálogo Cambiar contraseña	Clase de CSS o etiqueta HTML	Cambios recomendados
Estilo y posición del diálogo	.signin-custom-change-password-position	Establecer parte superior Establecer lado izquierdo Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Barra de título del diálogo	.signin-custom-change-password-title-position	Establecer color de fondo
Etiqueta de título del diálogo	.signin-custom-change-password-title-label	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Icono de título del diálogo	.signin-custom-change-password-title-image	Establecer la imagen.
Posición de la etiqueta de nombre de usuario	.signin-custom-change-password_username-label-position	Establecer parte superior Establecer lado izquierdo
Posición del control de entrada de nombre de usuario	.signin-custom-change-password_username-editbox-position	Establecer parte superior Establecer lado izquierdo
Posición de la etiqueta de contraseña anterior	.signin-custom-change-password_old-password-label-position	Establecer parte superior Establecer lado izquierdo
Posición del control de entrada de contraseña anterior	.signin-custom-change-password_old-password-editbox-position	Establecer parte superior Establecer lado izquierdo
Posición de la etiqueta de nueva contraseña	.signin-custom-change-password_new-password-label-position	Establecer parte superior Establecer lado izquierdo
Posición del control de entrada de nueva contraseña	.signin-custom-change-password_new-password-editbox-position	Establecer parte superior Establecer lado izquierdo
Posición de la etiqueta de confirmación de contraseña	.signin-custom-change-password_confirm-password-label-position	Establecer parte superior Establecer lado izquierdo
Posición del control de entrada de confirmación de contraseña	.signin-custom-change-password_confirm-password-editbox-position	Establecer parte superior Establecer lado izquierdo
Posición del control de entrada de confirmación de contraseña	.signin-custom-change-password_confirm-password-editbox-position	Establecer parte superior Establecer lado izquierdo
Posición del botón de inicio de sesión	.signin-custom-change-password-button-signin-position	Establecer parte superior Establecer lado izquierdo
Posición del botón de cancelación	.signin-custom-change-password-button-cancel-position	Establecer parte superior Establecer lado izquierdo

Elementos del diálogo Usuario ya conectado	Clase de CSS o etiqueta HTML	Cambios recomendados
Estilo y posición del diálogo	.signin-custom-user-already-signin-position	Establecer parte superior Establecer lado izquierdo Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc.
Etiqueta de título del diálogo	.signin-custom-user-already-signin-label-position	Establecer el estilo deseado, como la familia de fuentes, el tamaño, color, etc. Puede que quiera ajustar el lado izquierdo si no está utilizando un icono.
Icono de título del diálogo	.signin-custom-user-already-signin-title-image	Establecer la imagen Borrar la visibilidad: oculta; línea para mostrar la imagen.
Posición del botón de inicio de sesión	.signin-custom-user-already-signin-button-signin-position	Establecer parte superior Establecer lado izquierdo
Posición del botón de cancelación	.signin-custom-user-already-signin-button-cancel-position	Establecer parte superior Establecer lado izquierdo

Principio de página

Procedimiento: Cómo Establecer las etiquetas de texto

A continuación le presentamos los pasos necesarios, utilizando una imagen de ejemplo, para implementar una página personalizada de inicio de sesión. Suponiendo que ya ha completado el diseño y los pasos de activación.

Vaya a \ibi\WebFOCUS81\config\web_resource\signin\.
En un editor de texto, como Bloc de notas ++, modifique el archivo customsignin.xml.

Modifique el texto de los elementos siguientes.

Nota: La siguiente tabla sólo muestra los elementos que han cambiado en el ejemplo. Introduzca el valor que aparece en la columna Valor de ejemplo en el archivo XML.

Elementos de la página principal	Etiqueta XML	Valor de ejemplo
Título de página	<signin_custom_page_title>	Inicio de sesión de Information Builders
Texto de elemento 1 de menú	<signin_menu_button1>	Summit 2013
Vínculo de elemento 1 de menú	<signin_menu_button1_link>	http://www.informationbuilders.com/summit
Texto de elemento 2 de menú	<signin_menu_button2>	IBI
Título de marco (área de formulario)	<signin_custom_frame_title>	Inicio de sesión de Information Builders
Etiqueta de nombre de usuario	<signin_user_name_label>	Nombre de cliente
Etiqueta de contraseña	<signin_password_label>	Contraseña
Opción de recordar mis datos	<remember_me_checkbox>	Recordar mis datos

Nota: La opción Recordar mis datos no se encuentra activada por defecto, aunque sí está configurada en los archivos de ejemplo, por si decide activarla.

Cambiar elementos del diálogo	Etiqueta XML	Valor de ejemplo
Etiqueta de nombre de usuario	<signin_change_password_user_name_label>	Nombre de cliente:

Inicie WebFOCUS en un navegador. Aparece la imagen siguiente:

Principio de página

Procedimiento: Cómo Editar el archivo de CSS

Vaya a \ibi\WebFOCUS81\config\web_resource\signin\.
En un editor de texto, como Bloc de notas ++, modifique el archivo customsignin.css.

Modifique los elementos deseados.

Nota:

Para realizar una prueba en cualquier momento, guarde la página y vaya a
```
http://server:port/ibi_apps/
```
Asegúrese de que el zoom de su navegador esté al 100%.
Puede obtener la información de posición y estilo de todos los elementos seleccionando el elemento correspondiente desde su programa de edición de imágenes. Puede que tenga que ajustar ligeramente la posición.
Los URLs de las imágenes se corresponden con el directorio que contiene el archivo CSS (ibi\WebFOCUS80\config\web_resource\signin\). El URL de ese directorio es
```
http://server:port/ibi_apps/web_resource/signin.
```

Las siguientes tablas contienen los cambios necesarios para aplicar un estilo a la página de inicio de sesión y dos cuadro de diálogo. Antes de cada tabla aparece una captura de pantalla de lo que vería al efectuar estos cambios.

Elementos de la página principal	Clase de CSS o etiqueta HTML	Valores para añadir, cambiar o borrar
Color de fondo de la página	cuerpo, html	fondo: #000000; Borre todas las líneas de degragado.
Imagen de fondo de inicio de sesión	.signin-background-image	imagen de fondo: url("images/customsignin.gif"); ancho: 960px; altura: 638px;
Imagen de fondo de inicio de sesión	.signin-box	ancho: 960px; altura: 638px;
Posición de la barra de menú	.signin-custom-menu-bar-position	parte superior: 220px; lado izquierdo: 475px;
Estilo de la barra de menú	.signin-custom-menu-bar	color: #ffffff; fuente: 11px Tahoma, Verdana, Arial, Sans-Serif;
Estilo del separador de la barra de menú	.signin-menu-bar-separator	color: #ffffff; Esta clase está situada al final del archivo de CSS.
Posición del título del marco	.signin-custom-frame-title	parte superior: 245px; lado izquierdo: 370px;
Estilo del título del marco	.signin-custom-frame-label	color: #ffffff;
Posición de la etiqueta de nombre de usuario	.signin-custom-username-label-position	alineación de texto: izquierda; parte superior: 275px; lado izquierdo: 370px;
Nombre de usuario	.signin-custom-	color: #ffffff;
Posición del control de entrada de nombre de usuario	.signin-custom-username-editbox	ancho: 221px; parte superior: 295px; lado izquierdo: 370px; Nota: Para que todos los bordes aparezcan correctamente, el ancho debe tener un mínimo de 5px.
Estilo del control de entrada de nombre de usuario	.signin-custom-username-editbox-input	ancho: 216px;
Posición de la etiqueta de contraseña	.signin-custom-password-label-position	alineación de texto: izquierda; parte superior: 330px; lado izquierdo: 370px;
Estilo de la etiqueta de contraseña	.signin-custom-password-label	color: #ffffff; Borrar tamaño de fuente:12px;
Posición del control de entrada de contraseña	.signin-custom-password-editbox	ancho: 221px; parte superior: 350px; lado izquierdo: 370px; Nota: El ancho tiene 5px más que el del control para mostrar todos los bordes.
Estilo del control de entrada de contraseña	.signin-custom-password-editbox-input	ancho: 216px;
Posición de la opción de recordar mis datos	.signin-custom-remember-me-position	ancho: 216px; parte superior: 388px; lado izquierdo: 490px; Nota: La parte superior tiene 2px menos que el valor de la ilustración debido a la representación HTML. El ancho y el lado izquierdo coinciden con los controles de entrada, con el texto alineado a la derecha para ajustarse al borde derecho.
Estilo de la opción de recordar mis datos	signin-custom-remember-me	color: #ffffff; tamaño de fuente:12px;
Posición del botón de inicio de sesión	.signin-custom-button-signin-position	color: #ffffff;
Estilo del botón de inicio de sesión	.signin-custom-button-signin	color: #ffffff; borde: 1px sólido #223AA7; radio del borde: 10px;
Estilo del botón de inicio de sesión	a.signin-custom-button-signin	color de fondo: #223AA7; ancho: 96px; Borrar línea de fondo. Borrar línea de relleno-derecha.
Estilo del botón de inicio de sesión	a.signin-custom-button-signin span	relleno: 3px 0px 3px 0px; Borrar línea de altura de línea-altura.

Elementos del diálogo Ya se ha conectado	Clase de CSS o etiqueta HTML	Cambios recomendados
Estilo y posición del diálogo	.signin-custom-user-already-signin-position	altura: 130px; parte superior: 305px; lado izquierdo: 332px; color de fondo: #565352; borde: 1px sólido transparente; radio del borde:25px; -webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); -moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); comportamiento: url(web_resource/signin/PIE.htc); Nota: La línea visibilidad: oculto; debe borrarse, volverse a añadir o marcarse con comentarios durante la fase de prueba.
Etiqueta de título del diálogo	.signin-custom-user-already-signin-label-position	ancho: 270px; color: #ffffff;
Icono de título del diálogo	.signin-custom-user-already-signin-title-image	visibilidad: oculto;
Posición del botón de inicio de sesión	.signin-custom-user-already-signin-button-signin-position	altura: 25px; parte superior: 100px; izquierda:100px;
Posición del botón de cancelación	.signin-custom-user-already-signin-button-cancel-position	altura: 25px; parte superior: 100px; lado izquierdo: 200px;