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 categorías:
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.
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.
En caso de cargar una URL para header/footer, la misma debe ser HTTPS (SOLO PARA ENTORNO PRODUCTIVO). |
Esta sección permite modificar la visualización del estilo de avatar y background-color de los pasajeros correspondiente a la página de Datos del Pasajero.
Ejemplos de selección de avatar y background-color:
En caso que se desee volver a la configuración por defecto del background-color se debe eliminar (desde la x) |
Los estilos permiten modificar la composición de color y fuente de las distintas secciones detalladas al presionar el botón
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.
En una página pueden existir varios títulos. |
Ejemplos:
Permite modificar el estilo del cuerpo de la página, es decir, la estructura en si.
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 visualizarán la fuente de la página.
Font-family: Indica el tipo de tipografía con la cual será mostrada la letra correspondiente al contenido.
Ejemplos:
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.
Background-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.
Ejemplos:
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 y el paso uno del itinerario Web Check In (tarjeta de pasajeros a embarcar / chequear).
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.
Ejemplos
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 indica las condiciones de las tarifas.
Ejemplos:
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.
Ejemplos:
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.
Ejemplos
Esta opción permite la modificación de los estilos correspondiente a los botones que se encuentran en el flujo de la IBE y Web Check In.
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.
Ejemplos:
Permite modificar el fondo del botón una vez 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.
Ejemplos
Esta opción permite modificar el color de fondo y de la letra del paso en el cual se encuentra el usuario y una selección activa de una lista como en el caso de checkin, por ejemplo vuelo o asiento en itinerario y selección de asientos.
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 indica el nombre del paso actual.
Ejemplos:
Permite la modificación del color de fondo de las flechas posteriores del paso activo, ubicadas 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.
Ejemplos:
Permite modificar los bordes derechos en la sección de ruta de navegación y en el resumen de información de la barra superior que indica los pasos, específicamente el paso actual.
Border-Left-Color: Modifica la tonalidad de color de las figuras indicadas en el ejemplo.
Ejemplos:
Modifica el color de fondo del mensaje de cobro satisfactorio.
Ejemplos:
Modifica el color de fondo del mensaje de cobro rechazado.
Ejemplos:
Modifica la tonalidad de fondo de la fecha seleccionada para la cual se busca el vuelo.
Ejemplos:
Modifica el color de fondo de la flecha derecha ubicada en el resumen del vuelo tal como se muestra en la figura inferior:
Ejemplos:
Permite cambiar el color del asiento seleccionado y la ruta de vuelo, en la página Selección de asientos de Web Check-in.
Color: Permite cambiar color de icono de asiento y texto de ruta.
Ejemplos:
Modifica el color de fondo y texto de los botones de edición de Web Check-in, en tarjeta de embarque.
Background-color: Permite cambiar el color de fondo de los botones
Color: Permite cambiar el color del texto / iconos.
Ejemplos:
Permite cambiar el color del texto, flecha y botón en el paso Datos de Pasajeros de Web Check-in, al seleccionar uno de ellos para expandir / contraer y completar.
Color: Modifica el color de texto, flecha y botón expandir / contraer.
Ejemplos
Modifica el color del texto que aparece en Portal Landing de Web Check-in, para desplegar el pop up con adjunto de términos y condiciones.
Color: Permite cambiar color de texto.
Ejemplos:
Modifica el color de fondo y texto de los avisos en, por ejemplo, cambio de segmentos (vuelos en TK/KL) y avisos para vuelos cerrados
Background-Color: Modifica el color de fondo del mensaje.
Color: Modifica el color del texto del mensaje.
Ejemplos:
Modifica el color de los registros que no son selección activa, en tipo detalle de cabecera (filas o registros de una lista). Esto aparece por ejemplo en Selección de asientos, para las filas no activas y listadas del itinerario y de los pasajeros de la derecha.
Background-color: Modifica el color de fondo de la fila.
Color: Modifica el texto que se encuentra sobre el fondo.
Ejemplos:
Permite modificar el texto de la ruta de vuelo, dentro de la página de selección de asiento.
Color: Cambia el color de texto.
Ejemplos:
Modifica el color de los asientos no disponibles en el mapa de asientos:
Background-color: Modifica la tonalidad del color del fondo de los asientos no disponibles.
Color: Indica el color de la tipografía de los asientos no disponibles.
Ejemplos:
Modifica el color de los asientos disponibles en el mapa de asientos:
Background-color: Modifica la tonalidad del color del fondo de los asientos disponibles.
Color: Indica el color de la tipografía de los asientos disponibles.
Ejemplos:
Modifica el color de fondo de la aplicación:
Background-color: Modifica la tonalidad del color del fondo de los elementos, como el body.
Ejemplo:
Modifica el color de fondo de las tarjetas de pasajeros a seleccionar en el itinerario:
Background-color: Modifica la tonalidad del color del fondo del elemento.
Ejemplo:
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:
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.
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.
Cada vez que se modifique/elimine un usuario, el mismo dejará inmediatamente de estar autenticado y deberá volver a autenticarse en la plataforma. |
Es importante recordar salir siempre de las aplicaciones una vez finalizadas las tareas, para evitar el uso indebido