{"id":124625,"date":"2018-02-22T16:08:29","date_gmt":"2018-02-22T15:08:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/variables\/"},"modified":"2025-02-03T16:43:41","modified_gmt":"2025-02-03T15:43:41","slug":"variables","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/variables","title":{"rendered":"Variables"},"content":{"rendered":"<p>Con Variables, puedes llevar tus wireframes al siguiente nivel y construir proyectos realistas. Puedes utilizar variables para almacenar y transferir informaci\u00f3n como texto, im\u00e1genes o datos entre las pantallas de tu proyecto. Por ejemplo, puedes tomar un nombre escrito en un Campo de Texto de Entrada y mostrar ese mismo nombre en un elemento Texto en otra pantalla.<\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/variable-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" variable-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/variable-example.png\" alt=\"Ejemplo de variable\">Ejemplo de variable<\/video><\/p>\n<h2><a id=\"create-variable\"><\/a>Crear una variable<\/h2>\n<p>Busca la paleta Variables y haz clic en el bot\u00f3n \u00ab+\u00bb para crear una nueva variable en tu proyecto. Si no ves la paleta Variables, aseg\u00farate de que est\u00e1 marcada para que sea visible en el men\u00fa Paleta.<br \/>\nCuando crees una nueva variable, podr\u00e1s definir su valor por defecto. La mayor\u00eda de las veces, querr\u00e1s dejarlo en blanco.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44229\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-variable-1.png\" alt=\"Nueva variable emergente\" width=\"1624\" height=\"779\"><\/p>\n<h2><a id=\"define-variable\"><\/a>Definir el valor de una variable<\/h2>\n<p>Para cambiar el valor de una variable durante la simulaci\u00f3n, tendr\u00e1s que utilizar eventos. Puedes hacerlo de dos formas: <\/p>\n<ul>\n<li><strong>Arrastrar y soltar:<\/strong> Arrastra el elemento al que quieras dar valor a la variable a la paleta Variables. Como ejemplo, arrastra un Campo de Texto de Entrada a la paleta Variables. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-and-drop-variable.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Arrastra y suelta la variable<\/video><br \/>\nEsto crea autom\u00e1ticamente un evento <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>, que transfiere lo que haya en el campo de texto de entrada a la variable cuando pases a otra pantalla.\n<\/li>\n<li><strong>La paleta Eventos:<\/strong> Tambi\u00e9n puedes crear manualmente los eventos para dar un valor a una variable con la paleta Eventos. Esto es \u00fatil para cuando quieras definir el valor de una variable de otra forma, como despu\u00e9s de enfocar fuera de un campo de texto de entrada o de hacer clic en un bot\u00f3n.\n<ol>\n<li>Selecciona el elemento al que quieras dar un valor a la variable. Como ejemplo, utiliza un Campo de Texto de Entrada. <\/li>\n<li>Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44237\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-event-variables-1.png\" alt=\"A\u00f1adir evento en la paleta de eventos\" width=\"1822\" height=\"1037\"><\/li>\n<li>Ver\u00e1s un desplegable llamado \u00abElegir Activador\u00bb. Haz clic en \u00e9l y elige un activador que inicie el evento. Como ejemplo, elige el activador <strong>En Foco Desactivado<\/strong>.  <\/li>\n<li>Selecciona <strong>Establecer valor<\/strong> a un elemento en el desplegable \u00abElegir acci\u00f3n\u00bb.<\/li>\n<li>Ver\u00e1s que a continuaci\u00f3n aparece una vista previa del Lienzo con dos botones de opci\u00f3n: \u00abElementos\u00bb y \u00abVariables\u00bb. Haz clic en el bot\u00f3n de opci\u00f3n \u00abVariables\u00bb y elige de la lista una variable que hayas creado previamente. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44241\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-variable-value.png\" alt=\"Variable seleccionada en el di\u00e1logo de eventos\" width=\"668\" height=\"300\"><\/li>\n<li>A continuaci\u00f3n, encontrar\u00e1s d\u00f3nde definir\u00e1s el valor que dar\u00e1s a la variable. Haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculada\u00bb y, a continuaci\u00f3n, pulsa el enlace de texto \u00abA\u00f1adir expresi\u00f3n\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44246\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-expression-variables-1.png\" alt=\"A\u00f1adir expresi\u00f3n texto enlace hovered\" width=\"804\" height=\"280\"><\/li>\n<li>Ahora ver\u00e1s el constructor de Expresiones de Valor, que es donde puedes definir qu\u00e9 valor dar\u00e1s a la variable. Arrastra y suelta el campo de texto de entrada desde la vista previa del lienzo hasta el espacio abierto en la expresi\u00f3n que dice \u00abHaz clic para editar o arrastra y suelta un componente\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44248\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Input-to-variable-value.png\" alt=\"Campo de texto de entrada arrastrado a expresi\u00f3n\" width=\"799\" height=\"497\"><\/li>\n<li>Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n y el evento.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Este evento transfiere lo introducido en el campo de texto de entrada a la variable cuando haces clic fuera del campo de texto de entrada.<\/p>\n<h2><a id=\"give-element-value\"><\/a>Dar a un elemento el valor de una variable<\/h2>\n<p>Ahora que has definido un valor para la variable, puedes mover el valor de la variable a un elemento de otra pantalla. Ve a otra pantalla de tu proyecto y selecciona el elemento que quieras que muestre el valor de la variable. Por ejemplo, puedes seleccionar un elemento Texto <kbd>T<\/kbd> que hayas a\u00f1adido en el lienzo. Puedes dar a ese elemento de texto el valor de la variable de dos formas:<\/p>\n<ul>\n<li><strong>Arrastrar y soltar:<\/strong> arrastra la variable desde la paleta de Variables hasta el elemento de texto en el lienzo.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-variable-to-element.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-variable-to-element.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-variable-to-element.png\" alt=\"Arrastrar variable a elemento\">Arrastrar variable a elemento<\/video> Esto crear\u00e1 autom\u00e1ticamente un evento <strong>On Page Load<\/strong> + <strong>Set Value<\/strong>, que transfiere lo que est\u00e9 almacenado en la variable al elemento de texto en esta pantalla.<\/li>\n<li><strong>La Paleta de Eventos:<\/strong> puede que quieras que un elemento muestre el valor de la variable despu\u00e9s de hacer antes otra cosa en la pantalla, como pulsar sobre alg\u00fan texto.\n<ol>\n<li>Selecciona el elemento que quieras que muestre el valor de la variable. Como ejemplo, selecciona un elemento de texto. <\/li>\n<li>Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Selecciona un activador <strong>En carga de p\u00e1gina<\/strong> y una acci\u00f3n <strong>Establecer valor<\/strong> para el evento.<\/li>\n<li>Ver\u00e1s una vista previa del lienzo en la que puedes seleccionar el elemento de texto como objetivo de la acci\u00f3n.<\/li>\n<li>A continuaci\u00f3n, haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb y en el enlace de texto \u00abA\u00f1adir expresi\u00f3n\u00bb para abrir el constructor de expresiones de valor.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44251\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-expression-input-field.png\" alt=\"Valor calculado para el campo de entrada\" width=\"1089\" height=\"687\"><\/li>\n<li>Haz clic en la pesta\u00f1a \u00abVariables\u00bb de la vista previa del lienzo y arrastra la variable de la lista al espacio abierto de la expresi\u00f3n.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Variable-in-expression-1.png\" alt=\"Variables de la pesta\u00f1a en la expresi\u00f3n\" width=\"1346\" height=\"696\"><\/li>\n<li>Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n y el evento.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Este evento copia el valor de la variable y lo pega en el elemento de texto cuando pulsas sobre \u00e9l durante la simulaci\u00f3n. Puedes crear muchos tipos diferentes de proyectos con variables &#8211; contin\u00faa en el siguiente art\u00edculo para ver m\u00e1s ejemplos de c\u00f3mo utilizarlas para compartir informaci\u00f3n entre pantallas, definir contenido condicional y construir temporizadores autom\u00e1ticos de cuenta atr\u00e1s.<\/p>\n<h2>How-tos: aprende a dise\u00f1ar casos de uso comunes<\/h2>\n<p>Con las Variables, puedes transferir informaci\u00f3n de una pantalla a otra y crear interacciones avanzadas. Consulta estos ejercicios para aprender a utilizarlas. <\/p>\n<h2><a id=\"share-information\"><\/a>Compartir informaci\u00f3n entre pantallas<\/h2>\n<p>En este ejercicio, crear\u00e1s una pantalla de registro de direcciones de correo electr\u00f3nico y ver\u00e1s ese correo reflejado en una pantalla de confirmaci\u00f3n.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/share-information-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" share-information-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/share-information-example.png\" alt=\"Ejemplo de compartir informaci\u00f3n\">Ejemplo de compartir informaci\u00f3n<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Crea un proyecto con dos pantallas. Ve a la Pantalla 1 y dise\u00f1a un formulario de inscripci\u00f3n utilizando un Campo de Texto de Entrada <kbd>F<\/kbd> y un Bot\u00f3n <kbd>B<\/kbd>. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44266\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Share-info-form.png\" alt=\"Campo de texto de entrada y un bot\u00f3n creando un formulario\" width=\"2046\" height=\"1190\"><\/li>\n<li>A\u00f1ade un elemento de texto a la Pantalla 2 y dale el estilo que prefieras. Utilizar\u00e1s este elemento de texto para mostrar la direcci\u00f3n de correo electr\u00f3nico que has introducido en la pantalla anterior. <\/li>\n<li>Ve a la paleta Variables y crea una nueva variable haciendo clic en el bot\u00f3n \u00ab+\u00bb. Nombra la variable \u00abCorreo electr\u00f3nico\u00bb y deja en blanco su valor por defecto. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44267\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-email-variable.png\" alt=\"Ventana emergente variable de correo electr\u00f3nico\" width=\"1897\" height=\"840\"><\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Vuelve a la Pantalla 1 y selecciona el campo de texto de entrada. Arr\u00e1stralo a la variable \u00abEmail\u00bb de la paleta Variables. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" email-to-variable.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Email a variable<\/video><br \/>\nEsto crea un evento <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>, que da a la variable el valor que introduces en el campo de texto de entrada cuando te alejas de la pantalla.\n<\/li>\n<li>Selecciona el bot\u00f3n situado debajo del campo de texto de entrada y arr\u00e1stralo hasta la Pantalla 2 de la paleta Pantallas, creando un enlace desde el bot\u00f3n hasta la Pantalla 2.<\/li>\n<li>Ve a la Pantalla 2 y arrastra la variable \u00abEmail\u00bb al elemento de texto de la pantalla.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44271\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Variable-to-text.png\" alt=\"Variable de correo electr\u00f3nico arrastrada a elemento de texto, creando un evento de carga de p\u00e1gina + establecer valor\" width=\"992\" height=\"401\"><br \/>\n Esto crea un evento <strong>On Page Load<\/strong> + <strong>Set Value<\/strong> y da al elemento de texto el valor de la variable cuando se carga la pantalla por primera vez.<\/li>\n<\/ol>\n<p>Pulsa el bot\u00f3n \u00abJugar\u00bb para simular tu proyecto. Escribe una direcci\u00f3n de correo electr\u00f3nico en el formulario de registro y pulsa el bot\u00f3n para navegar a la Pantalla 2. Ver\u00e1s el correo electr\u00f3nico que has escrito reflejado en el elemento de texto.  <\/p>\n<h2><a id=\"show-hide-content\"><\/a>Mostrar u ocultar contenido condicional<\/h2>\n<p>Puedes utilizar variables con condiciones para determinar la relaci\u00f3n entre elementos de diferentes pantallas. En este ejemplo, aprender\u00e1s a crear un formulario de registro que muestre m\u00e1s contenido en otra pantalla en funci\u00f3n de lo que introduzcas en el formulario.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-content-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" conditional-content-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-content-example.png\" alt=\"Ejemplo de contenido condicional\">Ejemplo de contenido condicional<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Crea un proyecto con dos pantallas. Construye un formulario de registro en la Pantalla 1 con un Campo de Texto de Entrada y un Bot\u00f3n. <\/li>\n<li>Ve a la Pantalla 2 y dis\u00e9\u00f1ala como prefieras. Selecciona algunos elementos de la pantalla y agr\u00fapalos utilizando <kbd>Comando<\/kbd> \/ <kbd>Control<\/kbd> + <kbd>G<\/kbd>. <\/li>\n<li>Marca ese grupo como oculto en la paleta Propiedades.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44275\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-conditional-content.png\" alt=\"Grupo seleccionado y marcado como oculto\" width=\"866\" height=\"341\"><\/li>\n<li>Crea una nueva variable llamada \u00abUsuario\u00bb y deja vac\u00edo su valor por defecto.<\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Vuelve a la Pantalla 1 y selecciona el campo de texto de entrada del formulario de registro. Arrastra ese campo de texto de entrada a la variable \u00abUsuario\u00bb en la paleta de Variables, lo que crea un evento <strong>On Page Unload<\/strong> + <strong>Set Value<\/strong>. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44279\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Username-to-variable.png\" alt=\"Campo de texto de entrada de nombre de usuario arrastrado a variable\" width=\"754\" height=\"382\"><\/li>\n<li>Selecciona el bot\u00f3n de esta pantalla y arr\u00e1stralo a la Pantalla 2 en la paleta Pantallas, lo que crea un enlace entre las pantallas.<\/li>\n<li>Ve a la Pantalla 2 y haz doble clic en el Lienzo para seleccionar la pantalla base.<\/li>\n<li>Busca en la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb. Construye un evento <strong>En carga de p\u00e1gina<\/strong> + <strong>Mostrar<\/strong>, mostrando el grupo que creaste antes.  Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n<li>Haz clic en el enlace de texto \u00abA\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear, lo que abrir\u00e1 el constructor de Expresiones Condicionales.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44277\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-condition-variables.png\" alt=\"Al pasar el rat\u00f3n por encima del enlace de a\u00f1adir texto de condici\u00f3n\" width=\"792\" height=\"381\"><\/li>\n<li>Sigue estos pasos para construir la condici\u00f3n:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743467489\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Haz clic en la pesta\u00f1a \u00abVariables\u00bb de la vista previa del lienzo y arrastra la variable \u00abUsuario\u00bb al espacio abierto en la expresi\u00f3n.<\/li>\n<li><strong>b.<\/strong> Arrastra una funci\u00f3n l\u00f3gica <strong>Igual (=<\/strong> ) junto a la variable.<\/li>\n<li><strong>c.<\/strong>  Ver\u00e1s que aparece un nuevo espacio abierto, donde puedes escribir \u00abAdmin\u00bb.<\/li>\n<li><strong>d.<\/strong>  Haz clic en \u00abAceptar\u00bb para terminar de crear la condici\u00f3n.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Introduce \u00abAdmin\u00bb en el campo de texto de entrada, pulsa el bot\u00f3n para ir a la Pantalla 2, y ver\u00e1s que todo el contenido aparece en la pantalla. Vuelve a simular el proyecto y escribe otro valor en el campo de texto de entrada. Pulsa el bot\u00f3n para ir a la pantalla 2 y esta vez ver\u00e1s menos elementos en la pantalla. <\/p>\n<h2><a id=\"recurring-events\"><\/a>Eventos recurrentes<\/h2>\n<p>En este ejercicio, aprender\u00e1s a utilizar el activador <strong>En cambio de variable<\/strong>, que te permite crear eventos automatizados, como un temporizador de cuenta atr\u00e1s.<\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>A\u00f1ade un elemento de Texto y un Bot\u00f3n al Lienzo. Dale al elemento de texto un valor de \u00ab10\u00bb y etiqueta el bot\u00f3n como \u00abInicio\u00bb. <\/li>\n<li>Crea una nueva variable llamada \u00abCuenta atr\u00e1s\u00bb y deja en blanco su valor por defecto.<\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Selecciona el bot\u00f3n \u00abInicio\u00bb en el Lienzo y crea un evento <strong>On Tap<\/strong> + <strong>Establecer Valor<\/strong>. Selecciona la variable \u00abCuenta Atr\u00e1s\u00bb como objetivo del evento y escribe \u00ab11\u00bb como valor a dar a la variable. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44284\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Countdown-variable-value.png\" alt=\"La variable Cuenta atr\u00e1s tiene un valor fijo de 11\" width=\"1952\" height=\"1230\"><\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb de la parte superior de la paleta para a\u00f1adir otra interacci\u00f3n.<\/li>\n<li>Selecciona un activador <strong>\u00abEn cambio de variable\u00bb<\/strong>. Ver\u00e1s que aparece un desplegable donde puedes elegir la variable \u00abCuenta atr\u00e1s\u00bb. <\/li>\n<li>Selecciona una acci\u00f3n de <strong>Pausa<\/strong> y cambia la duraci\u00f3n a 1000ms (1 segundo). Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44286\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/On-variable-change-pause.png\" alt=\"Un evento de cambio de variable y pausa\" width=\"2042\" height=\"674\"><\/li>\n<li>Busca la acci\u00f3n que acabas de crear en la paleta Eventos y haz clic en el bot\u00f3n \u00ab+\u00bb para a\u00f1adir otra acci\u00f3n.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44288\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Variable-change-add-action.png\" alt=\"A\u00f1adir bot\u00f3n de acci\u00f3n hovered\" width=\"1740\" height=\"1062\"><\/li>\n<li>Elige un <strong>Cambio de Variable On<\/strong> con la variable \u00abCuenta Atr\u00e1s\u00bb. Elige una acci\u00f3n <strong>Establecer valor<\/strong> y toca el bot\u00f3n de opci\u00f3n \u00abVariables\u00bb para buscar la variable \u00abCuenta atr\u00e1s\u00bb que quieras seleccionar. <\/li>\n<li>Para el valor, haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb y en el enlace de texto \u00abA\u00f1adir expresi\u00f3n\u00bb, que abrir\u00e1 el constructor de expresiones de valor.<\/li>\n<li>Sigue estos pasos para construir la expresi\u00f3n:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Haz clic en la pesta\u00f1a \u00abVariables\u00bb de la vista previa del lienzo y arrastra la variable \u00abCuenta atr\u00e1s\u00bb al espacio abierto en la expresi\u00f3n.<\/li>\n<li><strong>b.<\/strong> Coloca al lado una funci\u00f3n num\u00e9rica <strong>Menos (-)<\/strong>.<\/li>\n<li><strong>c.<\/strong>  Ver\u00e1s que aparece un nuevo espacio en la expresi\u00f3n, donde puedes escribir \u00ab1\u00bb.<\/li>\n<li><strong>d.<\/strong>  Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n y el evento.<\/li>\n<\/ul>\n<\/li>\n<li>Haz clic en el bot\u00f3n &#8216;+&#8217; para a\u00f1adir una acci\u00f3n m\u00e1s &#8211; <strong>En Cambio de Variable<\/strong> + <strong>Establecer Valor<\/strong>. Selecciona el elemento de texto como destino de la acci\u00f3n y haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb y en el enlace de texto \u00abA\u00f1adir expresi\u00f3n\u00bb. <\/li>\n<li>Arrastra la variable \u00abCuenta atr\u00e1s\u00bb al espacio abierto en la expresi\u00f3n y haz clic en \u00abAceptar\u00bb para terminar de construir el evento.<\/li>\n<li>Haz clic en el enlace de texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima de tus eventos <strong>\u00abEn cambio de variable\u00bb<\/strong>. Arrastra la variable \u00abCuenta atr\u00e1s\u00bb al espacio abierto de la expresi\u00f3n, seguida de una funci\u00f3n l\u00f3gica <strong>Mayor o Igual (\u2265)<\/strong>. Por \u00faltimo, escribe \u00ab1\u00bb en el espacio abierto que aparece y haz clic en &#8216;Aceptar&#8217;.  <\/li>\n<\/ol>\n<p>As\u00ed es como debe ser tu paleta de Eventos:<\/p>\n<p>Este ejemplo funciona cambiando el valor de la variable \u00abCuenta Atr\u00e1s\u00bb cuando pulsas el bot\u00f3n \u00abIniciar\u00bb. Esto desencadena las acciones <strong>Al cambiar la variable<\/strong>: pausa de un segundo y luego resta 1 a la variable. La \u00faltima acci\u00f3n transfiere el valor de la variable al elemento de texto. Como el segundo evento <strong>Establecer valor<\/strong> afecta a la propia variable (restando 1), los eventos se vuelven a disparar hasta que el valor de la variable sea menor que 1.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con Variables, puedes llevar tus wireframes al siguiente nivel y construir proyectos realistas. Puedes utilizar variables para almacenar y transferir informaci\u00f3n como texto, im\u00e1genes o datos&#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":[8418,8421],"tags":[],"class_list":["post-124625","post","type-post","status-publish","format-standard","hentry","category-formacion","category-interacciones-web-y-moviles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124625"}],"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=124625"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124625\/revisions"}],"predecessor-version":[{"id":126127,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124625\/revisions\/126127"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}