Para evitar que el teclado se desajuste o no se dibuje correctamente, lo recomendable es modificar solo los colores de fondo y del texto.
Cuando creamos recursos interactivos donde se requiere que el usuario introduzca valores textuales o numéricos, tenemos a nuestra disposición diversos tipo de controles, como los campos de texto y los pulsadores donde se pueden introducir directamente los valores. Si el dispositivo en el que se visualiza el interactivo cuenta con un teclado físico entonces es posible utilizarlo para introducir los valores. Pero, qué ocurre cuando el interactivo se visualiza en un dispositivo móvil (como una tableta) que no cuenta con un teclado físico, por lo general en este tipo de dispositivos se presenta un teclado virtual proporcionado por el propio sistema operativo del dispositivo, este teclado en el contexto de los recursos interactivos presenta algunos problemas ya que puede cubrir una gran parte de la escena o reducir dramáticamente el tamaño en el que se muestra el recurso interactivo, lo que puede complicar la interacción.
Para ayudar a solventar el problema con los teclados virtuales nativos, a partir de la versión 1.1 del editor de DescartesJS y la 2021-11-10 de descartes-min.js, se incorpora a cualquier control que tenga un campo de texto la posibilidad al ser pulsado, de mostrar un teclado virtual propio ubicado dentro de la escena interactiva, lo que previene el problema de cambio de tamaño o posición que presentan los teclados virtuales nativos.
Para esto se agregaron tres nuevos parámetros, los cuales se encuentran presentes en todos los controles que tienen un campo de texto asociado, es decir, controles de tipo: barra, campo de texto, menú y pulsador.
teclado que es una casilla de verificación que activa o desactiva el uso del teclado virtual en el control;distribución de teclado que es un menú con las diferentes configuraciones de las teclas que se muestran en el teclado virtual y posición de teclado que es un campo de texto donde se escriben las coordenadas de la esquina superior izquierda donde aparecerá el teclado, siendo coordenadas absolutas especificadas respecto a la escena y no al espacio que contiene el control, los valores de las coordenadas pueden ser especificados por medio de variables;En el siguiente interactivo podemos ver las diferentes distribuciones de teclas que se pueden utilizar en el teclado virtual.
Estos nuevo parámetros permiten al autor de recursos interactivos decidir la distribución de las teclas y la posición del teclado virtual, lo que mejora la usabilidad de las escenas visualizadas en dispositivos sin un teclado físico. Mientras que en dispositivos con un teclado físico se pueden ingresar los valores de forma tradicional (usando el teclado físico) o por medio del teclado virtual; lo cual da versatilidad a las escenas interactivas.
El estilo visual del teclado virtual presenta colores neutros que pueden ir bien con la mayoría de los recursos interactivos, pero si es necesario cambiar los colores para que el teclado se ajuste a un diseño visual particular, es posible hacerlo por medio de reglas CSS.
La razón de realizarlo por medio de reglas CSS es para evitar agregar parámetros adicionales a los controles, así como tener solamente un conjunto de reglas que determinen la apariencia de todos los teclados que utiliza un recurso interactivo.
Para cambiar el estilo tenemos las siguientes clases CSS que podemos cambiar:
.DescartesKeyboardContainer, con la que se puede cambiar la apariencia del espacio transparente que cubre toda le escena cuando se muestra el teclado virtual;.DescartesKeysContainer, con la que se puede modificar el color de fondo del teclado; y.DescartesKeysContainer div, que permite especificar el estilo de todas las teclas.Así por ejemplo, con el siguiente estilo en una escena interactiva:
.DescartesKeyboardContainer {
background-color: rgba(0, 0, 0, 0.5);
}
.DescartesKeysContainer {
background-color: #2980b9;
}
.DescartesKeysContainer div {
background-color: #c0392b;
color: #f1c40f;
}
obtenemos el siguiente estilo en el teclado.
Para evitar que el teclado se desajuste o no se dibuje correctamente, lo recomendable es modificar solo los colores de fondo y del texto.