{"id":124743,"date":"2018-03-19T14:03:15","date_gmt":"2018-03-19T13:03:15","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/the-user-interface-module\/"},"modified":"2025-02-03T20:53:37","modified_gmt":"2025-02-03T19:53:37","slug":"the-user-interface-module","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/modulo-de-interfaz-de-usuario","title":{"rendered":"El m\u00f3dulo Interfaz de usuario"},"content":{"rendered":"<p>Conoce el m\u00f3dulo Interfaz de usuario, donde construir\u00e1s los componentes visuales e interactivos de los prototipos.<\/p>\n<h2><a id=\"toolbar\"><\/a>Barra de herramientas<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-67970\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/02\/user-interface-face-module.png\" alt=\"m\u00f3dulo justinmind-usuario-interfaz-faz\" width=\"1500\" height=\"861\"><br \/>\nLa barra de herramientas contiene opciones de edici\u00f3n r\u00e1pida para el elemento de UI de pantalla seleccionado. En la barra de herramientas encontrar\u00e1s las herramientas y comandos m\u00e1s comunes y de uso m\u00e1s frecuente. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-67971\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/02\/justinmind-module-toolbar.png\" alt=\"barra de herramientas del m\u00f3dulo justinmind\" width=\"1500\" height=\"139\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Inicio<\/strong> &#8211; Haz clic para volver a tu panel de control de inicio.<\/li>\n<li><strong>Herramientas de selecci\u00f3n:<\/strong>\n<ul>\n<li><strong>Herramienta de selecci\u00f3n:<\/strong> utiliza esta herramienta para seleccionar elementos en el lienzo. Haciendo doble clic seleccionar\u00e1s dentro de grupos o contenedores. <\/li>\n<li><strong>Herramienta de selecci\u00f3n directa:<\/strong> Una herramienta de selecci\u00f3n que ignora los grupos y contenedores para que puedas seleccionar elementos directamente.<\/li>\n<li><strong>Herramienta Eliminar:<\/strong> Esta herramienta borra cualquier elemento sobre el que hagas clic con ella.<\/li>\n<li><strong>Herramienta Copiar estilo:<\/strong> Puedes copiar todas las propiedades de estilo como colores, bordes, etc. de un elemento a otro utilizando esta herramienta. Haz clic primero en el elemento con los estilos que quieres copiar y luego en el elemento al que quieres aplicar esos estilos. <\/li>\n<li><strong>Herramienta Copiar eventos:<\/strong> Puedes copiar todos los eventos de un elemento a otro utilizando esta herramienta. Haz clic primero en el elemento con los eventos que quieres copiar y luego en el elemento al que quieres aplicar esos estilos. <\/li>\n<li><strong>Herramienta Recortar:<\/strong> Selecciona una imagen y, tras seleccionar esta herramienta, podr\u00e1s recortarla \/ a\u00f1adirle una m\u00e1scara.<\/li>\n<\/ul>\n<\/li>\n<li><span style=\"font-weight: 400;\"><b>Herramienta Pluma (atajo de teclado P): <\/b>tras seleccionar esta herramienta, haz clic en el lienzo para crear un punto de anclaje. Haz clic de nuevo para crear una l\u00ednea o haz clic y arrastra para crear una curva. Sigue pulsando para crear una forma.  <\/span><\/li>\n<li><b>Nuevo Rect\u00e1ngulo (atajo de teclado R):<\/b><span style=\"font-weight: 400;\">  Tras seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear un nuevo Rect\u00e1ngulo. Mant\u00e9n pulsada la tecla \u00abMay\u00fasculas\u00bb para crear un cuadrado. <\/span><\/li>\n<li><b>Nueva elipse (E):<\/b><span style=\"font-weight: 400;\">  Tras seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear una nueva Elipse. Mant\u00e9n pulsada la tecla \u00abMay\u00fasculas\u00bb para crear un c\u00edrculo. <\/span><\/li>\n<li><b>Nueva L\u00ednea (L):<\/b><span style=\"font-weight: 400;\">  Tras seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear una nueva Elipse. Mant\u00e9n pulsada la tecla \u00abMay\u00fasculas\u00bb para restringir el \u00e1ngulo de la l\u00ednea. <\/span><\/li>\n<li><b>Nuevo texto (T):<\/b><span style=\"font-weight: 400;\">  Despu\u00e9s de seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear un nuevo Texto. El elemento de texto se activar\u00e1 para que puedas empezar a escribir inmediatamente. <\/span><\/li>\n<li><b>Nueva Imagen (I):<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">  Si haces clic en esta herramienta, aparecer\u00e1 un explorador de archivos para seleccionar un archivo de imagen. Tras seleccionar un archivo, puedes elegir d\u00f3nde colocarlo en el lienzo. Justinmind soporta la mayor\u00eda de los formatos de imagen e incluso archivos SVG.    <\/span><\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">  Selecciona el elemento Imagen en el lienzo, ve a la opci\u00f3n \u00abEditar\u00bb del men\u00fa principal. Selecciona \u00abImagen\u00bb y luego \u00abSeleccionar archivo&#8230;\u00bb en el men\u00fa contextual y selecciona un archivo de imagen. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Selecciona el elemento Imagen, haz clic en la vista previa de la imagen en la paleta Propiedades y selecciona un archivo de imagen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Arrastra un archivo de imagen directamente desde tu sistema de archivos al lienzo (no es necesario que haya un elemento Imagen en el lienzo).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Tras colocar una imagen en el lienzo, se te pedir\u00e1 que elijas entre las siguientes opciones:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Incluir imagen en el prototipo &#8211; haz clic para incrustar esta imagen en el archivo del prototipo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Enlace al archivo de imagen &#8211; esto crear\u00e1 un enlace al archivo de imagen que tengas en tu ordenador. Si editas esa imagen con otra herramienta de dise\u00f1o, las actualizaciones se aplicar\u00e1n al prototipo autom\u00e1ticamente. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Si haces clic con el bot\u00f3n derecho en una imagen, ver\u00e1s un submen\u00fa Imagen con operaciones adicionales:<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Seleccionar archivo&#8230; &#8211; cambia el archivo de imagen del elemento imagen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Editar archivo de imagen&#8230; &#8211; abre la imagen con la aplicaci\u00f3n de edici\u00f3n de im\u00e1genes por defecto. Si cambias algo de esa imagen y la guardas, los cambios se aplicar\u00e1n a la imagen del prototipo autom\u00e1ticamente. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Abrir ubicaci\u00f3n del archivo&#8230; &#8211; abre la carpeta que contiene el archivo de imagen si la imagen est\u00e1 vinculada a un archivo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Herramienta Recortar imagen: activa la herramienta Recortar imagen. Permite crear m\u00e1scaras en las im\u00e1genes. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Voltear horizontal &#8211; invierte la imagen sobre el eje X.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Voltear vertical: invierte la imagen sobre el eje Y.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Establecer tama\u00f1o original: restaura la imagen a su tama\u00f1o original.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Incrustar en prototipo &#8211; incrusta la imagen en el prototipo si la imagen estaba vinculada a un archivo de imagen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Borrar &#8211; elimina el archivo de imagen mostrado. El marcador de posici\u00f3n de la imagen (que aparece por defecto tras colocar un widget de Imagen en el Lienzo) sustituir\u00e1 al archivo de imagen hasta que selecciones otro. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Crea una copia separada: duplica la imagen.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Un par de cosas a tener en cuenta cuando trabajes con im\u00e1genes. Si tienes una imagen enlazada desde una unidad de red o un dispositivo externo, y pierdes la conexi\u00f3n, o si eliminas el archivo de imagen de tu sistema de archivos, Justinmind no podr\u00e1 actualizar la imagen, y \u00e9sta se mostrar\u00e1 como su \u00faltima actualizaci\u00f3n. Un s\u00edmbolo de advertencia en la esquina superior izquierda de la imagen te avisar\u00e1 de que el enlace est\u00e1 roto. Una vez restablecida la conexi\u00f3n, o cuando la imagen haya sido colocada de nuevo en su carpeta original, el icono desaparecer\u00e1 y la imagen se actualizar\u00e1.Cuando se a\u00f1ada una imagen a Justinmind, no perder\u00e1 calidad, ni siquiera cuando se redimensione. Las im\u00e1genes retina mantendr\u00e1n la calidad retina en una pantalla retina.    <\/span><\/li>\n<li><b><b>M\u00e1s herramientas:  <\/b><\/b>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bot\u00f3n (B):  <\/b><span style=\"font-weight: 400;\">Funciona como un \u00fanico elemento. Al a\u00f1adir un evento al bot\u00f3n, afectar\u00e1 a todo el componente. Tanto en las capas como en las propiedades aparece con la categor\u00eda de Bot\u00f3n, por lo que resulta f\u00e1cilmente identificable de otros componentes. Los botones pueden incluir texto y se puede modificar su aspecto de fondo y borde   <\/span><b>.<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Punto caliente (H)<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  Despu\u00e9s de seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear un nuevo Hotspot. Una zona activa es como un rect\u00e1ngulo transparente y es una forma de a\u00f1adir eventos a zonas de las im\u00e1genes. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tabla<\/b><span style=\"font-weight: 400;\">: <\/span> <span style=\"font-weight: 400;\">El elemento Tabla crea una cuadr\u00edcula o tabla que puede contener cualquier otro elemento, como cuadros de texto, p\u00e1rrafos e im\u00e1genes. Cuando se arrastra al lienzo, el elemento Tabla tiene por defecto dos filas y dos columnas, aunque pueden modificarse en la paleta Propiedades. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Campos de entrada interactivos<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  Una colecci\u00f3n de herramientas para crear distintos tipos de campos de entrada. Estos campos de entrada son interactivos por s\u00ed mismos, sin necesidad de a\u00f1adir ninguna interacci\u00f3n.   <\/span><b>Campo de texto de entrada (F)<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\"> Cuadro de texto que permite al usuario introducir un valor durante la simulaci\u00f3n.Los Campos de Texto de Entrada pueden ser de uno de los seis tipos de texto siguientes: Texto, \u00c1rea de texto, Contrase\u00f1a, N\u00famero, Correo electr\u00f3nico y URL. <\/span><b>Selecciona:<\/b> <span style=\"font-weight: 400;\">un widget desplegable que permite al usuario seleccionar un valor de una lista de valores en simulaci\u00f3n.Puedes editar los valores del elemento Lista de selecci\u00f3n en la paleta Propiedades, haciendo clic en la opci\u00f3n \u00abEditar valores\u00bb. Para establecer uno de sus valores como predeterminado, haz doble clic en el valor deseado desde dentro del elemento en el Lienzo. Para seleccionar uno de sus valores durante la simulaci\u00f3n, simplemente haz clic una vez en el elemento y selecciona un valor del desplegable.    <\/span><b>Fecha:<\/b><span style=\"font-weight: 400;\"> Permite al usuario seleccionar una fecha y\/o una hora en la simulaci\u00f3n. <\/span><b>Lista:<\/b><span style=\"font-weight: 400;\">  muestra una lista de valores. S\u00f3lo se puede seleccionar un valor cada vez.Puedes editar los valores del elemento Lista de selecci\u00f3n en la paleta Propiedades, haciendo clic en la opci\u00f3n \u00abEditar valores\u00bb. Para establecer el valor seleccionado por defecto, haz doble clic en el valor deseado dentro del elemento en el Lienzo. Para seleccionar un valor del widget Cuadro de lista durante la simulaci\u00f3n, haz clic en el valor deseado desde dentro del elemento.     <\/span><b>Lista de selecci\u00f3n m\u00faltiple:<\/b> <span style=\"font-weight: 400;\">muestra una lista de valores. Se puede seleccionar m\u00e1s de un valor a la vez.Puedes editar los valores de este elemento en la paleta Propiedades, haciendo clic en la opci\u00f3n \u00abEditar valores\u00bb. Para establecer el valor o valores por defecto, haz doble clic en el valor o valores deseados dentro del elemento en el Lienzo. Para seleccionar\/deseleccionar un valor durante la simulaci\u00f3n, basta con hacer clic sobre el\/los valor\/es. Recuerda que puedes seleccionar tantos valores como desees.      <\/span><b>Carga de archivos:<\/b><span style=\"font-weight: 400;\">  permite al usuario seleccionar un archivo de su ordenador. Se muestra mediante un campo de texto de entrada con un bot\u00f3n Examinar a la derecha. Esta entrada no cargar\u00e1 el archivo real en el servidor, s\u00f3lo mostrar\u00e1 el explorador de archivos y guardar\u00e1 el nombre del archivo para utilizarlo en otras partes de la simulaci\u00f3n.    <\/span><b>Casilla de verificaci\u00f3n: <\/b><span style=\"font-weight: 400;\">Las casillas de verificaci\u00f3n son botones clicables que te permiten seleccionar m\u00e1s de una opci\u00f3n. <\/span><b>Radio: <\/b> <span style=\"font-weight: 400;\">Los botones de opci\u00f3n son botones clicables, al seleccionar uno, los dem\u00e1s se deseleccionan. Para que funcionen juntos, deben ir siempre dentro de un grupo. <\/span><b>Lista de selecci\u00f3n:<\/b> <span style=\"font-weight: 400;\">Similar a la lista de radio, pero con casillas de verificaci\u00f3n en lugar de botones de radio. <\/span><b>Lista de radio:<\/b> <span style=\"font-weight: 400;\">un grupo de botones de opci\u00f3n. S\u00f3lo se puede seleccionar un valor cada vez. <\/span><\/li>\n<li><b>L\u00edneas y formas:<\/b><span style=\"font-weight: 400;\"> Una colecci\u00f3n b\u00e1sica de herramientas para dibujar formas b\u00e1sicas. <\/span><b>Rect\u00e1ngulo (R)<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  pulsa y arrastra para dibujar un rect\u00e1ngulo en el lienzo. Mant\u00e9n pulsada la tecla May\u00fasculas para dibujar un cuadrado. Si haces doble clic en el rect\u00e1ngulo, podr\u00e1s a\u00f1adir texto en su interior.    <\/span><b>Elipse (E)<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  pulsa y arrastra para dibujar una elipse en el lienzo. Mant\u00e9n pulsada la tecla May\u00fas para dibujar un c\u00edrculo. Si haces doble clic en el c\u00edrculo, podr\u00e1s a\u00f1adir texto en su interior.    <\/span><b>L\u00ednea (L):<\/b><span style=\"font-weight: 400;\">  pulsa sobre el lienzo para definir el punto inicial de la l\u00ednea y luego una segunda vez para definir el final de la l\u00ednea. Puedes cambiar cualquier punto final seleccion\u00e1ndolo y arrastr\u00e1ndolo por el lienzo. Tambi\u00e9n puedes cambiar los puntos finales en la paleta Propiedades por puntos de flecha.    <\/span><b>Tri\u00e1ngulo:<\/b> <span style=\"font-weight: 400;\">haz clic y arrastra para dibujar un tri\u00e1ngulo en el lienzo. Si haces doble clic en el c\u00edrculo, podr\u00e1s a\u00f1adir texto en su interior.   <\/span><b>Flecha<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  pulsa sobre el lienzo para definir el punto inicial de la flecha y luego una segunda vez para definir el final de la flecha. Puedes cambiar cualquier punto final seleccion\u00e1ndolo y arrastr\u00e1ndolo por el lienzo. Tambi\u00e9n puedes cambiar los puntos finales en la paleta Propiedades por puntos de flecha.    <\/span><b>Llamada<\/b><span style=\"font-weight: 400;\">: <\/span> <span style=\"font-weight: 400;\">haz clic y arrastra para dibujar una llamada en el lienzo. Si haces doble clic en el c\u00edrculo, podr\u00e1s a\u00f1adir texto en su interior. <\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contenido din\u00e1mico:<\/b> <span style=\"font-weight: 400;\">Una colecci\u00f3n de herramientas para distintos tipos de elementos din\u00e1micos, como paneles din\u00e1micos o cuadr\u00edculas\/listas de datos. <\/span><b>Panel din\u00e1mico (D)<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  Utiliza esta herramienta para crear Paneles Din\u00e1micos. Un Panel Din\u00e1mico permite mostrar diferentes contenidos en la misma p\u00e1gina utilizando eventos.   <\/span><b>Lista de datos<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\">  utiliza esta herramienta para crear Listas de Datos. Las Listas de Datos son una forma de mostrar tablas en las que las filas pueden vincularse a la l\u00f3gica mediante eventos.   <\/span><b>Rejilla de datos:<\/b><span style=\"font-weight: 400;\">  utiliza esta herramienta para crear Listas de Datos. Las Listas de Datos son una forma de mostrar listas de fichas en una cuadr\u00edcula en la que el contenido de las fichas puede vincularse a la l\u00f3gica mediante eventos. <\/span><\/li>\n<li><b>Otros elementos<\/b><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\"> Una colecci\u00f3n de herramientas para distintos tipos de elementos, como tablas y HTML incrustado. <\/span><b>Tabla de texto:<\/b><span style=\"font-weight: 400;\">  despu\u00e9s de seleccionar esta herramienta, haz clic y arrastra en el lienzo para crear una nueva Tabla de Texto de 3\u00d73. Algunas cosas sobre los elementos de Tabla de texto.   <\/span><b>iFrame:<\/b><span style=\"font-weight: 400;\">  crea un marcador de posici\u00f3n para el c\u00f3digo HTML. Puedes escribir cualquier c\u00f3digo HTML en el panel Propiedades y se renderizar\u00e1 en el \u00e1rea definida por este elemento.   <\/span><b>P\u00e1gina web:<\/b><span style=\"font-weight: 400;\">  crea un marcador de posici\u00f3n en el que se puede mostrar un sitio web completo. La URL del sitio web que se va a mostrar se define en la paleta Propiedades. Algunos sitios web tienen propiedades de seguridad mejoradas que impiden que se muestren de esta forma. <b>Documento \/ V\u00eddeo:<\/b> utiliza este elemento para mostrar cualquier documento en un \u00e1rea del lienzo. <b>Carpeta HTML:<\/b> utiliza este elemento para incrustar una carpeta HTML completa en tu prototipo.  <\/span><\/li>\n<\/ul>\n<\/li>\n<li><strong>Opciones de<\/strong> zoom<strong>:<\/strong> una colecci\u00f3n de opciones adicionales relacionadas con el zoom.<\/li>\n<li><strong>Herramientas de alineaci\u00f3n:<\/strong> una colecci\u00f3n de herramientas para alinear una selecci\u00f3n de varios elementos en el lienzo o un \u00fanico elemento respecto al lienzo.<\/li>\n<li><strong>Ver en dispositivo:<\/strong> haz clic en esta opci\u00f3n para simular el estado actual del prototipo en un dispositivo m\u00f3vil.<\/li>\n<li><strong>Simular:<\/strong> haz clic en esta opci\u00f3n para iniciar la simulaci\u00f3n del prototipo actual.<\/li>\n<li><strong>Compartir:<\/strong> sube el estado actual del prototipo a tu cuenta online para compartir la simulaci\u00f3n con revisores y desarrolladores.<\/li>\n<li><strong>Obt\u00e9n todos los cambios:<\/strong> Actualiza el proyecto con todos los cambios realizados por el resto de miembros del equipo.<\/li>\n<\/ol>\n<h2><a id=\"the-user-interface-module\"><\/a>Selector de m\u00f3dulos<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14194\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/switch-between-modules-1.png\" alt=\"conmutar entre m\u00f3dulos-1\" width=\"755\" height=\"430\"><br \/>\nEste desplegable permite cambiar entre los cuatro m\u00f3dulos de Justinmind: Interfaz de usuario, Comentarios, Escenarios y Requisitos. Cada m\u00f3dulo puede contener informaci\u00f3n sobre distintos aspectos de la aplicaci\u00f3n que est\u00e1s dise\u00f1ando. Interfaz de usuario se utiliza para dise\u00f1ar las pantallas e interacciones del prototipo. Comentarios almacena y gestiona todas las conversaciones y comentarios que puedas tener con tus interlocutores. Escenarios es una herramienta de diagramaci\u00f3n generalista que puede utilizarse para dise\u00f1ar flujos de usuario o mapas del sitio. Y por \u00faltimo, Requisitos es una herramienta completa de gesti\u00f3n de requisitos y el punto de integraci\u00f3n con JIRA y Azure DevOps.     <\/p>\n<h2><a id=\"workspace\"><\/a>El espacio de trabajo<\/h2>\n<p>Aqu\u00ed tienes un resumen de cada paleta dentro del m\u00f3dulo Interfaz de usuario:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14196\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/user-interface-palette-overview-1.png\" alt=\"vista general de la paleta de interfaz de usuario-1\" width=\"755\" height=\"430\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Paleta Pant<\/strong> allas &#8211; La paleta Pantallas muestra todas las pantallas del prototipo.<\/li>\n<li><strong>Paleta<\/strong> de plantillas: la paleta de plantillas enumera todas las plantillas incluidas en el prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/plantillas-y-maestros\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre la creaci\u00f3n de prototipos con plantillas.<\/a><\/li>\n<li><strong>Paleta de bibliotecas de widgets<\/strong>: la paleta Widgets contiene widgets preconstruidos para crear el contenido de un prototipo. S\u00f3lo tienes que arrastrarlos y soltarlos en el Lienzo, o hacer clic en un widget y luego en la posici\u00f3n del Lienzo donde quieras colocarlo. <\/li>\n<li><strong>Paleta<\/strong> de Maestros: la paleta de Maestros enumera todos los Maestros incluidos en el prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/plantillas-y-maestros\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre la creaci\u00f3n de prototipos con Maestros.<\/a><\/li>\n<li>Pantallas <strong>en el lienzo<\/strong>: en la parte superior del lienzo encontrar\u00e1s pesta\u00f1as para cada pantalla del prototipo. Son \u00fatiles para saltar r\u00e1pidamente de una pantalla a otra. La pesta\u00f1a seleccionada est\u00e1 activa en el lienzo.  <\/li>\n<li><strong>Lienzo<\/strong>: dise\u00f1a pantallas, plantillas y m\u00e1sters del prototipo arrastrando widgets al Lienzo. Muestra la pantalla, plantilla o patr\u00f3n activos. <\/li>\n<li><strong>Paleta<\/strong> de propiedades: edita las propiedades del elemento UI seleccionado (por ejemplo, nombre, color, borde, fuente, posici\u00f3n) en la paleta Propiedades.<\/li>\n<li><strong>Paleta de eventos<\/strong>: a\u00f1ade funcionalidad a los elementos de UI y a las pantallas. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/eventos-y-interacciones\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre la creaci\u00f3n de eventos en prototipos Justinmind.<\/a><\/li>\n<li><strong>Paleta<\/strong> CSS &#8211; copia los estilos de los elementos de UI (estilos predeterminados o personalizados), incluyendo anchura, altura, familia de fuentes, tama\u00f1o, peso y color a otras herramientas o programas de dise\u00f1o en la paleta CSS. No puedes modificar ning\u00fan contenido desde la paleta CSS. Para editar las propiedades, vuelve a la paleta Propiedades (7).  <\/li>\n<li><strong>Paleta<\/strong> de <strong>capas<\/strong>: la paleta Contorno muestra todos los elementos de UI de la pantalla seleccionada.<\/li>\n<li><strong>Paleta de<\/strong> Maestros de Datos &#8211; encuentra aqu\u00ed una lista de los Maestros de Datos de un prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/prototipos-formularios-listas-de-datos-y-rejillas-de-datos\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre el trabajo con Maestros de datos y la creaci\u00f3n de prototipos basados en datos.<\/a><\/li>\n<li><strong>Paleta de Variables<\/strong> &#8211; encuentra aqu\u00ed una lista de las Variables de un prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/variables\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre c\u00f3mo trabajar con Variables.<\/a><\/li>\n<li><strong>Paleta de<\/strong> requisitos: visualiza y a\u00f1ade requisitos en un prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/el-modulo-requisitos\" rel=\"noopener\">M\u00e1s informaci\u00f3n sobre c\u00f3mo trabajar con Requisitos.<\/a><\/li>\n<li><strong>Paleta de comentarios<\/strong>: visualiza y a\u00f1ade los comentarios de un prototipo. <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/modulo-comentarios\" rel=\"noopener\">M\u00e1s informaci\u00f3n sobre Comentarios en Justinmind.<\/a><\/li>\n<\/ol>\n<h2><a id=\"customizing-the-workspace\"><\/a>Personalizar el espacio de trabajo<\/h2>\n<p>Puedes personalizar el espacio de trabajo: mostrando, ocultando, moviendo y recolocando paletas. Puedes reordenar las paletas dentro de un grupo de paletas, mover una paleta a otro grupo o simplemente hacerlas flotar arrastr\u00e1ndolas a cualquier lugar de la pantalla que no tenga paletas. <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 54%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762220285\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Cualquier cambio en el espacio de trabajo permanecer\u00e1 intacto la pr\u00f3xima vez que abras Justinmind. Para restablecer el espacio de trabajo, elige la opci\u00f3n \u00abRestablecer espacio de trabajo\u00bb del men\u00fa principal \u00abPaletas\u00bb. <\/p>\n<h2><a id=\"the-screens-palette\"><\/a>La paleta Pantallas<\/h2>\n<p>La paleta Pantallas muestra todas las pantallas de un prototipo. A\u00f1ade, elimina y gestiona pantallas en la paleta Pantallas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13228\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/screens-palette.png\" alt=\"Paleta de pantallas\" width=\"755\" height=\"293\"><\/p>\n<ol class=\"image-bullet\">\n<li>A\u00f1ade una nueva pantalla al prototipo<\/li>\n<li>A\u00f1adir una nueva pantalla desde un archivo de imagen<\/li>\n<li>Crea una carpeta para organizar tus pantallas<\/li>\n<li>Ver las pantallas como una lista de nombres<\/li>\n<li>Ver las pantallas como una lista de capturas de pantalla<\/li>\n<li>Desplazar la pantalla una posici\u00f3n hacia abajo en la jerarqu\u00eda de pantallas<\/li>\n<li>Mover la pantalla una posici\u00f3n hacia arriba en la jerarqu\u00eda de pantallas<\/li>\n<\/ol>\n<p>Haz clic con el bot\u00f3n derecho en una pantalla para gestionar las opciones de una pantalla individual:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14199\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/manage-screens-options-2.png\" alt=\"gestionar-pantallas-opciones-2\" width=\"755\" height=\"475\"><\/p>\n<ol class=\"image-bullet\">\n<li>Edita algunas propiedades de la pantalla, como el nombre o la plantilla. Hay opciones adicionales disponibles en la paleta Propiedades. <\/li>\n<li>Establece la pantalla actual como pantalla de Inicio del prototipo. Se utiliza como punto de partida para las simulaciones compartidas y para calcular las pantallas conectadas. <\/li>\n<li>Duplica la pantalla seleccionada.<\/li>\n<li>Borra la pantalla seleccionada.<\/li>\n<li>Categoriza la pantalla. Elige entre las siguientes: Completada, Para cambiar, Descartada, Ninguna. <\/li>\n<li>Crea un comentario vinculado a toda la pantalla.<\/li>\n<li>Crea un requisito vinculado a toda la pantalla.<\/li>\n<li>Crea un archivo de imagen (PNG) con el contenido de la pantalla.<\/li>\n<\/ol>\n<p>Las pantallas mostrar\u00e1n uno de estos tres iconos:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-40835\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/ScreenIcons-1.png\" alt=\"Descripci\u00f3n de los iconos de pantalla\" width=\"2048\" height=\"929\"><\/p>\n<ol class=\"image-bullet\">\n<li>Pantalla inicial o Pantalla de inicio. Esta es la primera pantalla del prototipo, y se cargar\u00e1 inicialmente al visualizar un prototipo compartido o en un dispositivo. <\/li>\n<li>Pantallas vinculadas a la pantalla Inicial.<\/li>\n<\/ol>\n<h2><a id=\"the-widget-library-palette\"><\/a>La paleta de la biblioteca de widgets<\/h2>\n<p>La paleta Bibliotecas permite a\u00f1adir y crear colecciones personalizadas de elementos que se utilizar\u00e1n en el prototipo actual o en cualquier otro prototipo. Para a\u00f1adir y gestionar tus bibliotecas de Widgets, ve a la paleta Bibliotecas. En la esquina superior izquierda, haz clic en el texto \u00abM\u00e1s bibliotecas\u00bb para acceder al di\u00e1logo \u00abConfigurar Bibliotecas\u00bb. Este di\u00e1logo contiene todas tus bibliotecas disponibles, incluidas las que has creado. Desde este di\u00e1logo, puedes a\u00f1adir y eliminar bibliotecas de widgets del editor de Justinmind.<\/p>\n<p><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/ui-widget-libraries\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n sobre la gesti\u00f3n de tus bibliotecas de Widgets.<\/a><\/p>\n<p>El signo m\u00e1s de la paleta permite crear una nueva biblioteca. Consulta las secciones correspondientes de la gu\u00eda del usuario para aprender a crear tus propias bibliotecas de widgets. En esta misma paleta puedes buscar widgets espec\u00edficos y configurar la forma en que se muestra la lista de widgets en la paleta.  <\/p>\n<h2><a id=\"the-canvas\"><\/a>El lienzo<\/h2>\n<p>Dise\u00f1a las pantallas, plantillas y patrones de tu prototipo a\u00f1adiendo elementos al Lienzo. Muestra la pantalla, plantilla o patr\u00f3n activos.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-67972\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/02\/justinmind-user-interface.png\" alt=\"interfaz de usuario de justinmind\" width=\"1500\" height=\"861\"><br \/>\nAmpl\u00eda y reduce el Lienzo escribiendo el nivel de zoom en la barra de herramientas de Justinmind, los atajos CTRL + (CMD + en Mac) y &#8211; o pellizcando en el trackpad. Tambi\u00e9n puedes utilizar las opciones disponibles junto al indicador de zoom en la barra de herramientas, como la herramienta de zoom o los diferentes niveles de zoom predefinidos. Ajusta el dise\u00f1o del prototipo al p\u00edxel y organiza y alinea los widgets con las siguientes opciones de vista. Cada una de ellas puede activarse\/desactivarse en el men\u00fa Vista: <\/p>\n<ul>\n<li><strong>Reglas:<\/strong> permite crear gu\u00edas que pueden utilizarse para alinear elementos en el Lienzo. Puedes crear o eliminar gu\u00edas haciendo clic con el bot\u00f3n derecho en las reglas. <\/li>\n<li><strong>Gu\u00edas:<\/strong> l\u00edneas que van de lado a lado y de arriba abajo que se utilizan para alinear elementos en el Lienzo. Para crear una gu\u00eda, haz clic con el bot\u00f3n derecho del rat\u00f3n en cualquier punto de las reglas horizontal o vertical y selecciona Crear una gu\u00eda. A continuaci\u00f3n, puedes arrastrar la gu\u00eda a la posici\u00f3n deseada en el Lienzo. Para eliminar una gu\u00eda, haz clic con el bot\u00f3n derecho del rat\u00f3n sobre ella y selecciona \u00abEliminar gu\u00eda\u00bb. Las gu\u00edas creadas en una Pantalla pertenecen a esa pantalla, pero las gu\u00edas creadas en una Plantilla aparecen en todas las pantallas que est\u00e9n utilizando esa plantilla.\n<\/li>\n<li>Cuadr\u00edcula<strong>:<\/strong> una cuadr\u00edcula para alinear elementos en el Lienzo. Cuando la cuadr\u00edcula est\u00e1 activada, se muestra un conjunto de puntos verticales y horizontales sobre el fondo del Lienzo. La cuadr\u00edcula no se muestra durante la simulaci\u00f3n. Selecciona la opci\u00f3n \u00abAjustar a la cuadr\u00edcula\u00bb en la opci\u00f3n \u00abVer\u00bb del men\u00fa principal, para que los elementos de la UI se alineen autom\u00e1ticamente con la l\u00ednea de cuadr\u00edcula m\u00e1s pr\u00f3xima.   <\/li>\n<li><strong>Ajustar a la geometr\u00eda:<\/strong> ajusta los elementos a su posici\u00f3n en relaci\u00f3n con los elementos circundantes. Estos resaltes verdes aparecen al pasar el rat\u00f3n por encima de un elemento de la UI o al arrastrar un elemento vertical\/horizontalmente. Aparecen l\u00edneas azules verticales\/horizontales en el borde de los elementos cercanos. Mant\u00e9n pulsada la tecla \u00abAlt\u00bb mientras arrastras el widget para evitar que se ajuste.   <\/li>\n<li><strong>Gu\u00edas inteligentes:<\/strong> gu\u00edas que muestran el tama\u00f1o y la posici\u00f3n de un elemento en el lienzo en relaci\u00f3n con los elementos que lo rodean.<\/li>\n<\/ul>\n<h2><a id=\"the-properties-palette\"><\/a>La paleta Propiedades<\/h2>\n<p>La paleta Propiedades proporciona todas las herramientas necesarias para cambiar cualquier propiedad de estilo del elemento seleccionado, adem\u00e1s de algunas propiedades de configuraci\u00f3n espec\u00edficas de ese elemento. La parte superior de la paleta muestra el tipo de elemento que est\u00e1 seleccionado en ese momento. Junto a ella, hay dos iconos para configurar dos propiedades: Oculto y Siempre encima. El icono \u00abOculto\u00bb configura que el elemento seleccionado sea visible o no cuando se inicie la simulaci\u00f3n. El icono &#8216;Siempre encima&#8217; controla si el elemento seleccionado se mostrar\u00e1 siempre encima del resto de elementos de la simulaci\u00f3n. Aqu\u00ed tienes un resumen de cada subsecci\u00f3n de la paleta Propiedades. Para empezar a modificar un elemento de UI, selecci\u00f3nalo en el lienzo y ve a la paleta Propiedades.<\/p>\n<div><strong>Nota:<\/strong> las propiedades pueden variar en funci\u00f3n del elemento de UI seleccionado.<\/div>\n<h4>Posici\u00f3n<\/h4>\n<ul>\n<li><strong>X\/Y:<\/strong> define la posici\u00f3n X y\/o Y del elemento en el Lienzo con los rotadores proporcionados. Puedes utilizar decimales de un p\u00edxel si lo necesitas. <\/li>\n<li><strong>Icono de alfiler:<\/strong> marca esta opci\u00f3n para mostrar opciones de posici\u00f3n adicionales para dise\u00f1ar prototipos responsivos. M\u00e1s informaci\u00f3n en la secci\u00f3n \u00abOpciones de posici\u00f3n del pin\u00bb m\u00e1s abajo. <\/li>\n<\/ul>\n<h4>Opciones de posici\u00f3n de las clavijas:<\/h4>\n<p>Si el icono de posici\u00f3n de la chincheta est\u00e1 activado, aparecer\u00e1n dos desplegables junto a los campos de entrada de posici\u00f3n X e Y. Cada desplegable permite definir las distintas opciones de patillas para cada coordenada de forma independiente. <\/p>\n<h4>Talla<\/h4>\n<ul>\n<li><strong>Anchura:<\/strong> define la anchura del elemento. Junto a la entrada hay un desplegable para seleccionar si la anchura se define como un n\u00famero de p\u00edxeles o como un porcentaje de la anchura del contenedor en el que est\u00e1 el elemento. <\/li>\n<li><strong>Altura:<\/strong> define la altura del elemento. Junto a la entrada hay un desplegable para seleccionar si la altura se define como un n\u00famero de p\u00edxeles o como un porcentaje de la anchura del contenedor donde est\u00e1 el elemento. <\/li>\n<li><strong>Icono Mantener proporciones:<\/strong> pulsa este icono para forzar que cada vez que se cambie la altura o la anchura se mantengan las proporciones actuales.<\/li>\n<\/ul>\n<h4>Texto<\/h4>\n<p>Los elementos de texto de la UI tienen las siguientes propiedades de texto:<\/p>\n<ul>\n<li><strong>Tipo de letra:<\/strong> selecciona un tipo de letra del desplegable. Los tipos de letra se cargan a partir de los instalados en tu ordenador. <\/li>\n<li>Estilo de fuente<strong>:<\/strong> selecciona el estilo de fuente en el desplegable. Los estilos disponibles ser\u00e1n los definidos por el tipo de letra. <\/li>\n<li><strong>Tama\u00f1o:<\/strong> selecciona un tama\u00f1o de fuente (en puntos) en el desplegable<\/li>\n<li><strong>Color<\/strong>: &#8211; cambia el color de la fuente desde el desplegable<\/li>\n<li><strong>Iconos de subrayado y tachado:<\/strong> opciones adicionales de decoraci\u00f3n para el texto.<\/li>\n<li><strong>Alineaci\u00f3n horizontal:<\/strong> define la alineaci\u00f3n horizontal del texto: izquierda, centrado o derecha.<\/li>\n<li><strong>Alineaci\u00f3n vertical:<\/strong> define la alineaci\u00f3n vertical del texto: superior, central o inferior.<\/li>\n<li><strong>Vi\u00f1etas:<\/strong> a\u00f1ade vi\u00f1etas al texto. Se a\u00f1adir\u00e1 una vi\u00f1eta al texto cada vez que haya un car\u00e1cter de salto de l\u00ednea. <\/li>\n<li><strong>L\u00ednea:<\/strong> ajusta la altura de las l\u00edneas de texto (en p\u00edxeles) con las ruedecillas proporcionadas<\/li>\n<li><strong>Ajustar iconos de texto:<\/strong> utiliza este control para definir si el tama\u00f1o de la caja de texto ser\u00e1 definido por el contenido del texto o manualmente.<\/li>\n<\/ul>\n<h4>Mezcla<\/h4>\n<p>Los Modos de Mezcla te permiten definir c\u00f3mo quieres que se mezclen dos capas. Esto implica tomar los p\u00edxeles de cada capa y aplicarles c\u00e1lculos. Esto te permite ajustar aspectos de una imagen, como el color de fondo. O crear interesantes superposiciones y texturas.   <\/p>\n<ul>\n<li><strong>Multiplicar:<\/strong> Mira la informaci\u00f3n de color de cada canal y multiplica el color base por el color de mezcla. El color resultante es siempre un color m\u00e1s oscuro. Multiplicar cualquier color por negro produce negro. Multiplicar cualquier color por blanco deja el color sin cambios. Cuando pintas con un color distinto del negro o el blanco, los trazos sucesivos con una herramienta de pintura producen colores progresivamente m\u00e1s oscuros. El efecto es similar al de dibujar sobre la imagen con varios rotuladores.     <\/li>\n<li><strong>Pantalla:<\/strong> Mira la informaci\u00f3n de color de cada canal y multiplica el inverso de los colores de mezcla y base. El color resultante es siempre un color m\u00e1s claro. El tramado con negro no cambia el color. El cribado con blanco produce blanco. El efecto es similar a proyectar varias diapositivas fotogr\u00e1ficas una sobre otra.    <\/li>\n<li><strong>Superponer:<\/strong> Multiplica o tamiza los colores, dependiendo del color base. Los patrones o colores se superponen a los p\u00edxeles existentes, conservando las luces y sombras del color base. El color base no se sustituye, sino que se mezcla con el color de mezcla para reflejar la claridad u oscuridad del color original.  <\/li>\n<li><strong>Oscurecer:<\/strong> Mira la informaci\u00f3n de color de cada canal y selecciona el color base o el de fusi\u00f3n -el que sea m\u00e1s oscuro- como color resultante. Los p\u00edxeles m\u00e1s claros que el color de fusi\u00f3n se sustituyen, y los p\u00edxeles m\u00e1s oscuros que el color de fusi\u00f3n no cambian. <\/li>\n<li><strong>Aclarar:<\/strong> Examina la informaci\u00f3n de color de cada canal y selecciona el color base o de fusi\u00f3n -el que sea m\u00e1s claro- como color resultante. Los p\u00edxeles m\u00e1s oscuros que el color de fusi\u00f3n se sustituyen, y los p\u00edxeles m\u00e1s claros que el color de fusi\u00f3n no cambian. <\/li>\n<li><strong>Esquivar color:<\/strong> Observa la informaci\u00f3n de color de cada canal y aclara el color base para reflejar el color de fusi\u00f3n disminuyendo el contraste entre ambos. La mezcla con negro no produce ning\u00fan cambio. <\/li>\n<li><strong>Quemado de color:<\/strong> Mira la informaci\u00f3n de color de cada canal y oscurece el color base para reflejar el color de mezcla aumentando el contraste entre ambos. La mezcla con blanco no produce ning\u00fan cambio. <\/li>\n<li><strong>Diferencia:<\/strong> Examina la informaci\u00f3n de color de cada canal y resta el color de fusi\u00f3n del color base o el color base del color de fusi\u00f3n, dependiendo de cu\u00e1l tenga el valor de brillo mayor. La mezcla con blanco invierte los valores del color base; la mezcla con negro no produce ning\u00fan cambio. <\/li>\n<li><strong>Exclusi\u00f3n:<\/strong> Crea un efecto similar pero de menor contraste que el modo Diferencia. La mezcla con blanco invierte los valores del color base. La mezcla con negro no produce ning\u00fan cambio.  <\/li>\n<li><strong>Tono:<\/strong> Crea un color resultado con la luminancia y saturaci\u00f3n del color base y el matiz del color de mezcla.<\/li>\n<li><strong>Saturaci\u00f3n:<\/strong>Crea un color resultante con la luminancia y el tono del color base y la saturaci\u00f3n del color de mezcla. Pintar con este modo en un \u00e1rea sin saturaci\u00f3n (0) (gris) no provoca ning\u00fan cambio. <\/li>\n<li><strong>Color:<\/strong> Crea un color resultante con la luminancia del color base y el tono y la saturaci\u00f3n del color de mezcla. Esto conserva los niveles de gris de la imagen y es \u00fatil para colorear im\u00e1genes monocromas y para te\u00f1ir im\u00e1genes en color. <\/li>\n<li><strong>Luminosidad:<\/strong><br \/>\nCrea un color resultante con el tono y la saturaci\u00f3n del color base y la luminancia del color de mezcla. Este modo crea el efecto inverso del modo Color. <\/li>\n<\/ul>\n<h4>Antecedentes<\/h4>\n<ul>\n<li><strong>Casilla de verificaci\u00f3n:<\/strong> utiliza esta casilla para definir si el elemento tiene o no fondo.<\/li>\n<li><strong>Color:<\/strong> haz clic para cambiar el color de fondo con el di\u00e1logo selector de color que aparece. Puedes seleccionar un color o un degradado y combinarlos con im\u00e1genes de fondo. <\/li>\n<li><strong>Transparencia:<\/strong> define la transparencia del elemento con las ruedecillas proporcionadas o introduciendo un %.<\/li>\n<li><strong>A\u00f1adir imagen:<\/strong> utiliza esta opci\u00f3n para seleccionar y configurar una imagen de fondo para el elemento seleccionado.<\/li>\n<\/ul>\n<h4>Frontera<\/h4>\n<ul>\n<li><strong>Casilla de verificaci\u00f3n:<\/strong> utiliza esta casilla para definir si el elemento tiene o no tiene borde.<\/li>\n<li><strong>Color del<\/strong> borde<strong>:<\/strong> selecciona el color del borde del elemento.<\/li>\n<li><strong>Anchura<\/strong> de los bordes<strong>:<\/strong> define la anchura de los bordes con los giradores proporcionados.<\/li>\n<li><strong>Tipo de borde:<\/strong> selecciona el tipo de l\u00ednea entre: ninguna, s\u00f3lida, punteada o discontinua.<\/li>\n<\/ul>\n<h4>Otras opciones<\/h4>\n<ul>\n<li><strong>Rotaci\u00f3n:<\/strong> indica el n\u00famero de grados de rotaci\u00f3n del elemento seleccionado.<\/li>\n<li><strong>Opacidad:<\/strong> define la transparencia de todo el elemento seleccionado.<\/li>\n<li><strong>Redondez:<\/strong> define el nivel de redondez de las esquinas del elemento. Tambi\u00e9n se pueden definir de forma independiente. <\/li>\n<\/ul>\n<h4>Efectos<\/h4>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>Al hacer clic en el \u00ab+\u00bb se activan los efectos. Cada efecto tiene sus propias propiedades a las que puedes acceder haciendo clic en la tuerca. Tambi\u00e9n puedes cambiar la posici\u00f3n y eliminarlos haciendo clic en los iconos de la derecha.  <\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>Sombra paralela:<\/strong> A\u00f1ade una sombra que cae detr\u00e1s del contenido de la capa.<\/li>\n<li><strong>Sombra interior:<\/strong> A\u00f1ade una sombra que cae justo dentro de los bordes del contenido de la capa, d\u00e1ndole a la capa un aspecto rebajado.<\/li>\n<li><strong>Desenfoque:<\/strong> Desenfocar un elemento le da un aspecto agradable, lo realza proporcionando una poca profundidad de campo que resulta agradable a la vista.<\/li>\n<li><strong>Brillo:<\/strong> La cantidad de blanco o negro mezclado con el color. Tambi\u00e9n se calcula como un valor porcentual entre 0% y 100%. <\/li>\n<li><strong>Contraste:<\/strong> Al aumentar el contraste, haces que los oscuros sean m\u00e1s oscuros y los claros m\u00e1s claros. Esto aumenta la diferencia o distancia entre ellos. <\/li>\n<li><strong>Escala de grises:<\/strong> La funci\u00f3n escala de grises convierte el elemento de entrada en escala de grises. El valor de cantidad define la proporci\u00f3n de la conversi\u00f3n. <\/li>\n<li><strong>Tono:<\/strong> Puedes modificar los colores de todo el espectro que se encuentran en la rueda crom\u00e1tica: rojo, naranja, amarillo, azul, verde y violeta.<\/li>\n<li><strong>Invertir:<\/strong> La acci\u00f3n Invertir hace que los colores del elemento seleccionado se conviertan en sus opuestos en la escala de colores.<\/li>\n<li><strong>Saturar:<\/strong> La saturaci\u00f3n hace que los colores sean m\u00e1s vivos, es la fuerza de un color superficial, su grado de diferencia visual respecto al gris neutro.<\/li>\n<li><strong>Sepia:<\/strong> Tono que se a\u00f1ade a un elemento en blanco y negro en el cuarto oscuro para \u00abcalentar\u00bb los tonos (aunque como sigue siendo una imagen monocrom\u00e1tica se sigue considerando en blanco y negro).<\/li>\n<\/ul>\n<h2><a id=\"the-outline-palette\"><\/a>La paleta Capas<\/h2>\n<p>Puedes seleccionar, organizar y controlar los elementos del lienzo utilizando la paleta Capas.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-40725\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/OutlinePaletteExplained.png\" alt=\"Las funciones de la paleta de contornos\" width=\"596\" height=\"333\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Icono \u00abOjo\u00bb:<\/strong> permite mostrar u ocultar un elemento en el Lienzo para facilitar la selecci\u00f3n de algo situado debajo de \u00e9l. Esta propiedad no oculta el elemento en la simulaci\u00f3n. Para ello, utiliza la opci\u00f3n del panel Propiedades.  <\/li>\n<li><strong>Grupos de elementos<\/strong>: &#8211; alterna para expandir o contraer el contenido de un grupo o los elementos de un contenedor.<\/li>\n<li><strong>Botones para mover elementos:<\/strong> define el orden de los elementos en el lienzo utilizando estas flechas. Tambi\u00e9n puedes utilizar arrastrar y soltar dentro de esta paleta. <\/li>\n<\/ol>\n<h2><a id=\"the-data-master-palette\"><\/a>La paleta Maestros de los datos<\/h2>\n<p>Esta paleta enumera los Maestros de Datos del prototipo actual. Los Maestros de Datos son una forma centralizada de definir datos que emula una Base de Datos.   <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/prototipos-formularios-listas-de-datos-y-rejillas-de-datos\">Puedes aprender a utilizar los Maestros de Datos aqu\u00ed.<\/a>  A continuaci\u00f3n se describen los detalles de la paleta Maestros de datos:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16412\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/DataMasterUG.png\" alt=\"Paleta maestra de datos\" width=\"655\" height=\"361\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Nuevo<\/strong> Maestro de <strong>Datos:<\/strong> utiliza esta opci\u00f3n para crear un nuevo Maestro de Datos. Al hacer clic en este icono, aparecer\u00e1 el siguiente cuadro de di\u00e1logo: <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16413\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/DataMasterDefined.png\" alt=\"Definiciones del maestro de datos\" width=\"919\" height=\"595\">\n<ol class=\"image-bullet\">\n<li>Nombre del maestro de datos<\/li>\n<li>A\u00f1adir campos al Maestro de datos<\/li>\n<li>Nombra los campos<\/li>\n<li>Selecciona el tipo de campo<\/li>\n<li>Selecciona un campo espec\u00edfico<\/li>\n<li>Modificar las propiedades de los campos<\/li>\n<li>Desplazar posiciones de campo<\/li>\n<li>Borrar un campo<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">La pesta\u00f1a \u00abVer y editar registros\u00bb del Maestro de datos contiene estas operaciones:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16444\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/ViewAndEditRecords.png\" alt=\"Ver y editar los registros del maestro de datos definido\" width=\"720\" height=\"482\"><\/p>\n<ol class=\"image-bullet\">\n<li>A\u00f1adir nuevos registros al Maestro de datos<\/li>\n<li>Ver los registros en el Maestro de datos<\/li>\n<li>Selecciona un registro espec\u00edfico<\/li>\n<li>Mover la posici\u00f3n del registro<\/li>\n<li>Eliminar un registro seleccionado<\/li>\n<li>Importar registros desde un archivo .csv.<\/li>\n<li>Exportar registros del Maestro de datos<\/li>\n<\/ol>\n<\/li>\n<li><strong>Crear<\/strong> Maestro de <strong>Datos a partir de archivo CSV:<\/strong> utiliza esta opci\u00f3n para importar un archivo CSV y crear un Maestro de Datos a partir de su contenido.<\/li>\n<li><strong>Maestro de datos:<\/strong> Los Maestros de Datos aparecen con sus nombres y sus atributos como subelementos. Si arrastras el Maestro de datos al lienzo, se crear\u00e1 autom\u00e1ticamente un formulario de entrada. <\/li>\n<li><strong>Atributo del Maestro de Datos:<\/strong> los atributos de los Maestros de Datos se enumeran con sus nombres. Si arrastras un atributo al lienzo, se crear\u00e1 un campo de entrada y una etiqueta. <\/li>\n<\/ol>\n<h3>Categor\u00edas de datos maestros<\/h3>\n<p>Los campos del Maestro de datos pueden ser de los siguientes tipos<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16445\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/DataMasterTypes.png\" alt=\"Tipos de campos del Maestro de datos\" width=\"949\" height=\"616\"><\/p>\n<p><strong>Texto<\/strong>: selecciona un campo de este tipo y haz clic en el icono \u00abengranaje\u00bb para ver m\u00e1s propiedades personalizables:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16446\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/TextProperties.png\" alt=\"Propiedades del tipo de texto\" width=\"576\" height=\"340\"><\/p>\n<p><strong>Fecha<\/strong> &#8211; selecciona un campo de este tipo y haz clic en el icono \u00abengranaje\u00bb para ver m\u00e1s propiedades personalizables:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16447\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/DateProperties.png\" alt=\"Propiedades del tipo de fecha\" width=\"608\" height=\"338\"><\/p>\n<p><strong>Categor\u00eda<\/strong>: selecciona un campo de este tipo y haz clic en el icono \u00abengranaje\u00bb para ver m\u00e1s propiedades personalizables:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16448\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/CategoryProperties.png\" alt=\"Propiedades de la categor\u00eda\" width=\"907\" height=\"567\"><br \/>\nHaz clic en el icono \u00ab+\u00bb para a\u00f1adir nuevos elementos a la categor\u00eda. Selecciona una de las categor\u00edas a\u00f1adidas en la pesta\u00f1a \u00abVer y editar registros\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16450\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/SelectingCategory.png\" alt=\"Seleccionar categor\u00eda en los registros\" width=\"550\" height=\"288\"><\/p>\n<p><strong>Verdadero\/Falso<\/strong>: selecciona el valor en la pesta\u00f1a \u00abVer y editar registros\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16451\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/SelectingTrueFalse.png\" alt=\"Seleccionar el valor verdadero o falso\" width=\"749\" height=\"382\"><\/p>\n<p><strong>Carga de archivos (imagen)<\/strong>: carga o elimina una imagen en la pesta\u00f1a \u00abVer y editar registros\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16452\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/FileUpload.png\" alt=\"Subir imagen en ver y editar registros\" width=\"705\" height=\"374\"><\/p>\n<p><strong>Multicategor\u00eda<\/strong>: selecciona un campo con este tipo y haz clic en el icono \u00abengranaje\u00bb para ver m\u00e1s propiedades personalizables:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16453\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/MultiCategory.png\" alt=\"Inmuebles de varias categor\u00edas\" width=\"882\" height=\"569\">Haz clic en el icono \u00ab+\u00bb para a\u00f1adir nuevos elementos a la multicategor\u00eda. Selecciona una de las categor\u00edas a\u00f1adidas en la pesta\u00f1a \u00abVer y editar registros\u00bb. <\/p>\n<h2><a id=\"simulating-prototypes\"><\/a>Simulaci\u00f3n de prototipos<\/h2>\n<p>Haz clic en el icono \u00abReproducir\u00bb de la parte superior derecha de la barra de herramientas de correo para mostrar la ventana de simulaci\u00f3n, que mostrar\u00e1 la pantalla actual en el lienzo. Para cambiar la configuraci\u00f3n de la simulaci\u00f3n, selecciona \u00abArchivo &#8211; Simular &#8211; Configuraci\u00f3n\u00bb en el men\u00fa principal.<br \/>\n Aparecer\u00e1 el siguiente cuadro de di\u00e1logo:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15894\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/SimulationSettingsNew.png\" alt=\"Ajustes de simulaci\u00f3n\" width=\"694\" height=\"536\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>Contenido de la pantalla (para prototipos web):<\/strong> especifica si el prototipo se ampliar\u00e1 a la anchura del navegador o se limitar\u00e1 a la anchura dise\u00f1ada durante la simulaci\u00f3n.<\/li>\n<li><strong>Escala:<\/strong> define c\u00f3mo se va a simular el prototipo:Ajustar al tama\u00f1o de la pantalla: ajusta el prototipo a la resoluci\u00f3n de pantalla del dispositivo seleccionado<br \/>\no<br \/>\nPersonalizada: elige una escala personalizada %.<\/li>\n<li><strong>Incluir barra superior:<\/strong> incluye la barra superior en el modo simulaci\u00f3n. La barra superior incluye opciones relacionadas con los comentarios y te permite navegar entre diferentes pantallas. <\/li>\n<li><strong>Resaltar elementos interactivos:<\/strong> hace que los elementos interactivos de la simulaci\u00f3n parpadeen si el usuario pulsa sobre algo que no es interactivo.<\/li>\n<li><strong>Incluye escenarios:<\/strong> incluye la lista de escenarios en la simulaci\u00f3n para que los revisores puedan verlos.<\/li>\n<li><strong>Incluir requisitos:<\/strong> incluye la lista de requisitos en el prototipo.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Conoce el m\u00f3dulo Interfaz de usuario, donde construir\u00e1s los componentes visuales e interactivos de los prototipos. Barra de herramientas La barra de herramientas contiene opciones de&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8431,8438],"tags":[],"class_list":["post-124743","post","type-post","status-publish","format-standard","hentry","category-guia-del-usuario","category-el-espacio-de-trabajo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124743"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124743"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124743\/revisions"}],"predecessor-version":[{"id":126275,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124743\/revisions\/126275"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}