Introducción

El presente manual tiene por objetivo facilitar la comprensión de la configuración del front-end de los sistemas Web Check-in y KIBE, por medio de la aplicación CSS. 

Los accesos a cada modulo se dividen en las siguientes categorias:

• Backoffice: contiene la administración general de cada módulo para realizar las tareas de máxima configuración
• WebApp: acceso a las aplicaciones
  
  

Kiu Static

Configuración de Estilos

La experiencia de navegación y facilidad que ofrece un sitio para poder utilizarlo es tan importante como la que el usuario experimenta por medio de la visión. Ambos factores influyen de manera positiva o negativa sobre él y lo predisponen de igual manera por el resto de la sesión. Hay combinaciones de formas y colores que permiten la armonía entre estos elementos y una consecuente relajación de los sentidos, sin mencionar lo importante que son para la identidad de la marca. KIU ofrece la oportunidad de customizar la tipografía y colores en las distintas secciones de su página, acompañando el estilo esencial de su producto/servicio. Para lograr esto, KIU agrupó de forma standard las distintas secciones y funcionalidades para seleccionar los colores y fuentes que mejor se adapten a su estilo.

Acceso

Diseño

Permite seleccionar si el header o el footer de la/s página/s contendrán algún diseño personalizado o extraído de alguna URL, de este modo podremos cargar una imagen seleccionando un archivo (Cargar imagen), desde una URL (Cargar URL) o no cargar nada en absoluto (Sin Header). De la misma manera, procederemos para el footer. En ambos casos, siempre podremos ver el archivo o imagen cargada actualmente haciendo clic en Ver Header actual o Ver Footer Actual.

Además Cancelar / Guardar: ambos botones cancelan o guardan la operación respectivamente.

NOTA: en caso de cargar una URL para header/footer, la misma debe ser HTTPS (SOLO PARA ENTORNO PRODUCTIVO).

Estilos

Los estilos permiten modificar la composición de color y fuente de las distintas secciones detalladas al presionar el botón

Tittle

Corresponden a todos los textos que son de tipo títulos, es decir aquellos que indican el contenido de la sección.

• Color: modifica la tonalidad de color con la cual se visualizarán los títulos en la página
• Font-family: permite indicar el tipo de tipografía con la cual será mostrada la letra correspondiente a los títulos

NOTA: en una página pueden existir varios títulos.

Ejemplos

Backoffice:

Resultado en página:

Body

Permite modificar el estilo del cuerpo de la página, es decir la estructura en sí.

El Body incluye además la sección de resumen de reserva ubicada al lateral derecho de las pantallas.

• Color: modifica la tonalidad de color con la cual se visualizaran la fuente de la página
• Font-family: indica el tipo de tipografía con la cual será mostrada la letra correspondiente al contenido

Ejemplo

Backoffice:

Resultado en página:

Header

Los headers son todos los encabezados de las tablas y la ruta de navegación.

Este tipo de estilo también aplica para los laterales de los resultados de búsqueda, en el cual se indica el número de vuelo.

• Backgound-color: modifica la tonalidad de color del fondo de los recuadros donde se encuentran los encabezados
• Color: indica el tipo de tipografía (letra) con la cual será mostrada los encabezados

Ejemplo

Backoffice:

Resultado en página:

Selector de Vuelo

Corresponde a la modificación del paso dos en el flujo, es decir selección de vuelo en la sección de tarifa seleccionada por el usuario.

• Background-color: cambia la tonalidad del fondo del recuadro de tarifa seleccionado por el usuario
• Color: modifica el color del borde del recuadro formado tras la selección de tarifa seleccionada por el usuario

Ejemplo

Backoffice:

Resultado en página:

Descriptor Texto Informativo

Esta opción permite modificar el color de fondo que corresponde al texto descriptivo en el cual se indica las condiciones de la tarifa.

• Background-color: modifica la tonalidad de fondo con la cual se visualizarán el contenido la página
• Color: indica el color de la letra correspondiente al texto descriptivo en la cual se indican las condiciones de las tarifas

Ejemplo

Backoffice:

Resultado en página:

Barra de Navegación

Permite modificar los bordes derechos en la sección de ruta de navegación y en el resumen de información del paso dos selección de vuelo.

• Border-Left-Color: modifica la tonalidad de color de las figuras indicadas en el ejemplo

Ejemplo

Backoffice:

Resultado en página:

Barra de Navegación Back Arrow

Permite la modificación del color en la ruta de navegación ubicada en la parte superior de la pantalla.

• Border-bottom-color: modifica la tonalidad de color en la parte inferior (posterior) de las figuras
• Border-top-color: modifica la tonalidad de color en la parte superior (posterior) de las figuras

Ejemplo

Resultado en página:

Botón

Esta opción permite la modificación de los estilos correspondiente a los botones que se encuentran en el flujo de la KIBE.

Nota: se incluye en esta sección los botones de las ventanas emergentes. Un ejemplo es cuando el usuario presiona la opción de regresar del navegador.

• Background-color: admite la modificación del color de fondo de los botones
• Color: posibilita la opción de cambiar el tono de la letra de cada botón

Ejemplo

Backoffice:

Resultado en página:

Botón Over

Permite modificar el fondo del botón una vez que el cursor (mouse) se encuentra posicionado sobre el mismo.

• Background-color: modifica la tonalidad de color del fondo del botón cuando el botón está sobre el mismo

Ejemplo

Backoffice:

Resultado en página:

NOTA: en caso de no visualizar correctamente los cambios realizados, borrar el cache del navegador web y volver a intentarlo.

Kiu Account Manager

Configuración de Perfiles

Los permisos contenidos en roles que accederán a las aplicaciones están disponibles para su administración en el Account Manager. Estos se asignan a usuarios para que ingresen a la aplicación con un determinado perfil o nivel de acceso.

Como ya hemos mencionado, los roles administradores en la máxima jerarquía son usuarios de seguridad informática/sistemas que poseen este privilegio desde BackOffice.

Nosotros utilizaremos el botón WebApp:

Esto nos permite acceder a:

• Crear usuarios
• Cuentas

Crear usuarios

Podemos crear los usuarios que accederán al sistema que indiquemos en este formulario:

Completando los campos y asignando a cada aplicación un rol, al crear ese usuario el mismo obtendrá un rol en dichas aplicaciones para poder acceder y hacer uso de ella.

Los roles y aplicaciones visibles serán los mismos que el usuario autenticado tiene asociados a su cuenta.

Podemos eliminar, modificar o consultar los usuarios creados en las aplicaciones accediendo a Cuentas.

Cuentas

Aquí vemos si el usuario está activo o no y con qué rol de manera rápida.

Por medio de las acciones, lo consultaremos , editaremos  o eliminaremos 

Consulta

Edición

Es posible editar todos los usuarios visibles en Cuentas, incluyendo el propio. En caso de editar el usuario autenticado, existe la opción adicional de modificar su contraseña.

Aquí vemos la opción adicional de Modificar Contraseña para editar el usuario actualmente autenticado.

NOTA: cada vez que se modifique/elimine un usuario, el mismo dejará inmediatamente de estar autenticado y deberá volver a autenticarse en la plataforma.

Log Out

Es importante recordar salir siempre de las aplicaciones una vez finalizadas las tareas, para evitar el uso indebido