{"id":124623,"date":"2018-02-22T14:43:15","date_gmt":"2018-02-22T13:43:15","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/events-and-interactions\/"},"modified":"2025-02-03T20:53:46","modified_gmt":"2025-02-03T19:53:46","slug":"events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/eventos-y-interacciones","title":{"rendered":"Eventos e interacciones"},"content":{"rendered":"<p>Convierte tus wireframes en prototipos interactivos de alta fidelidad a\u00f1adiendo eventos. En este art\u00edculo, aprender\u00e1s a crear y utilizar interacciones con la paleta Eventos. <\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781845823\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2><a id=\"how-events-work\"><\/a>C\u00f3mo funcionan los eventos<\/h2>\n<p>Un evento incluye un <strong>desencadenante<\/strong> y una <strong>acci\u00f3n<\/strong>. El <strong>desencadenante<\/strong> es la forma en que interact\u00faas con tu prototipo, como hacer clic, arrastrar o pasar el rat\u00f3n sobre un elemento. La <strong>acci\u00f3n<\/strong> es el resultado que te gustar\u00eda que se produjera tras el desencadenante, como enlazar con otra pantalla o cambiar el aspecto de un elemento.  <\/p>\n<p>Con los eventos, puedes<\/p>\n<ul>\n<li>Haz que casi todos los elementos de tu prototipo sean interactivos, incluidos los botones, las im\u00e1genes y el texto.<\/li>\n<li>Desencadena m\u00faltiples acciones sobre un mismo elemento. Por ejemplo, puedes hacer clic en un rect\u00e1ngulo y cambiar su color, y luego mover ese rect\u00e1ngulo a una posici\u00f3n diferente en la pantalla. <\/li>\n<li>Crea interacciones en un elemento que afecten a otro elemento. Por ejemplo, puedes hacer clic en un bot\u00f3n y luego cambiar el color de un rect\u00e1ngulo de la pantalla.<br>Utiliza distintos activadores para un mismo elemento. Por ejemplo, puedes hacer clic en un rect\u00e1ngulo y cambiar su borde, y tambi\u00e9n puedes deslizar el dedo hacia la izquierda sobre ese rect\u00e1ngulo y moverlo.  <\/li>\n<\/ul>\n<p>Puedes ver los resultados de los eventos que has creado simulando tu prototipo. Busca y pulsa el bot\u00f3n \u00abReproducir\u00bb para lanzar un navegador de simulaci\u00f3n en el que puedes interactuar con tu prototipo. Cierra o minimiza el navegador para volver al editor.  <\/p>\n<h2><a id=\"create-an-event\"><\/a>Crear un evento<\/h2>\n<p>Aunque puedes crear f\u00e1cilmente <strong>Enlaces<\/strong> arrastrando y soltando (enlace a la secci\u00f3n de introducci\u00f3n), crear\u00e1s la mayor\u00eda de los eventos en la paleta Eventos. Si no ves la paleta Eventos, aseg\u00farate de que est\u00e1 marcada para que sea visible en el men\u00fa Ventana. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/View-Events-palette.png\" alt=\"Puedes marcar la paleta de eventos que se mostrar\u00e1 en el men\u00fa Ventana\" width=\"1091\" height=\"461\"><br>Para construir un evento:<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742193649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Selecciona un elemento del lienzo.<\/li>\n<li>Haz clic en el bot\u00f3n \u00abA\u00f1adir evento\u00bb o \u00ab+\u00bb de la paleta Eventos. Tambi\u00e9n puedes hacer clic con el bot\u00f3n derecho en un elemento y seleccionar \u00abA\u00f1adir evento\u00bb. <\/li>\n<li>Ver\u00e1s que aparece el cuadro de di\u00e1logo Eventos. Haz clic en el desplegable \u00abElegir desencadenante\u00bb y selecciona el desencadenante que quieras utilizar. Por ejemplo, si quieres que el evento se inicie cuando hagas clic en un elemento, elige <strong>Al hacer clic<\/strong>.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43604\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-trigger.png\" alt=\"Elige un desencadenante para la acci\u00f3n en el desplegable\" width=\"1087\" height=\"683\">\n<p>&nbsp;<\/p>\n<div><strong>Nota:<\/strong> en los prototipos para m\u00f3viles y tabletas, <strong>On Click<\/strong> ser\u00e1 <strong>On Tap<\/strong>.<\/div>\n<p><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/interacciones-y-animaciones#event-triggers-for-mobile-prototypes\">Consulta la descripci\u00f3n de cada activador<\/a>.<\/p>\n<\/li>\n<li>A continuaci\u00f3n ver\u00e1s que aparece el desplegable \u00abAcci\u00f3n\u00bb. Haz clic en \u00e9l y elige una acci\u00f3n resultante. Como ejemplo, puedes elegir <strong>Cambiar estilo<\/strong>.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-action.png\" alt=\"Elige una acci\u00f3n resultante en el desplegable de acciones\" width=\"1190\" height=\"754\"><br><a href=\"https:\/\/www.justinmind.com\/es\/soporte\/interacciones-y-animaciones#actions-for-web-and-mobile-prototypes\">Consulta la descripci\u00f3n de cada acci\u00f3n<\/a>.<\/li>\n<li>Dependiendo de la acci\u00f3n que elijas, ver\u00e1s algunas cosas diferentes a continuaci\u00f3n. Para <strong>Cambiar estilo<\/strong>, ver\u00e1s una vista previa del Lienzo de la pantalla. Aqu\u00ed puedes elegir qu\u00e9 elemento de la pantalla cambiar\u00e1 de aspecto despu\u00e9s de hacer clic.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43606\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-target-of-action.png\" alt=\"Elige el objetivo de la acci\u00f3n en la vista previa del lienzo\" width=\"1340\" height=\"842\"><\/li>\n<li>Para una acci\u00f3n <strong>Cambiar estilo<\/strong>, puedes especificar algunas propiedades de los elementos, como los colores de fondo o de los bordes, para cambiarlos desde el desplegable de abajo. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43607\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Change-styles.png\" alt=\"Selecciona los estilos a cambiar en los desplegables\" width=\"1116\" height=\"873\"><\/li>\n<\/ol>\n<p>Ver\u00e1s el evento que acabas de crear en la paleta Eventos. Tambi\u00e9n ver\u00e1s un icono de \u00abcerrojo\u00bb junto al elemento al que has a\u00f1adido un evento en el Lienzo. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43608\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Event-bolt-icon.png\" alt=\"Ver un icono de cerrojo donde has a\u00f1adido un evento\" width=\"1280\" height=\"755\"><br>Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo y comprobar la interacci\u00f3n que has creado.<br><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\/preview-first-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" preview-first-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/preview-first-event.png\" alt=\"Simula\">Simula<\/video><\/p>\n<h2><a id=\"details-events-palette\"><\/a>Detalles de la paleta de eventos<\/h2>\n<p>Adem\u00e1s de mostrar los eventos que creas, tambi\u00e9n puedes realizar una serie de acciones en la paleta Eventos:<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43610\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/events-palette.png\" alt=\"Ver diferentes detalles de la paleta de eventos\" width=\"976\" height=\"494\"><\/p>\n<ol class=\"image-bullet\">\n<li>Crea una nueva interacci\u00f3n.<\/li>\n<li>El nombre de la interacci\u00f3n. Haz doble clic para cambiarle el nombre. <\/li>\n<li>Condiciones de interacci\u00f3n. Define cu\u00e1ndo deben producirse o no las acciones que se indican a continuaci\u00f3n. M\u00e1s informaci\u00f3n sobre las condiciones(enlace al tutorial sobre condiciones).  <\/li>\n<li>Visualiza una acci\u00f3n. Haz doble clic para abrir el di\u00e1logo Eventos y editarlo. Selecciona una acci\u00f3n y pulsa la tecla Supr para eliminarla. Mant\u00e9n pulsada la tecla Comando (en Mac) o Control (en Windows) para seleccionar varias acciones.   <\/li>\n<li>El orden de las acciones. Por defecto, las acciones se ejecutar\u00e1n una tras otra en el orden en que las hayas creado. Tambi\u00e9n puedes cambiarlas para que se ejecuten al mismo tiempo o despu\u00e9s de una duraci\u00f3n que especifiques. Arrastra y suelta una acci\u00f3n para mover su posici\u00f3n delante o detr\u00e1s de otras acciones.   <\/li>\n<li>A\u00f1ade otra acci\u00f3n con el mismo desencadenante.<\/li>\n<\/ol>\n<h2>How-tos: aprende a dise\u00f1ar casos de uso comunes paso a paso<\/h2>\n<p>Echa un vistazo a los siguientes ejemplos y aprende a crear interacciones UX\/UI comunes con eventos en Justinmind.<\/p>\n<p>Utilizar\u00e1s el cuadro de di\u00e1logo Eventos para definir desencadenantes, que son la forma de interactuar con un prototipo (hacer clic, pasar el rat\u00f3n por encima, etc.) y acciones, que son lo que ocurre despu\u00e9s del desencadenante (cambiar de color, moverse, etc.).<\/p>\n<p>Puedes visualizar todas las interacciones que crees simulando tus prototipos.<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43131\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Simulate-Prototype.png\" alt=\"Pulsa el bot\u00f3n de reproducci\u00f3n para simular un prototipo\" width=\"1193\" height=\"532\"><\/p>\n<h2><a id=\"swipe-screens\"><\/a>Deslizarte por las pantallas<\/h2>\n<p>Utiliza activadores gestuales y efectos de transici\u00f3n para crear una navegaci\u00f3n por la pantalla fluida y realista.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" swipe-example-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" alt=\"Deslizarte por las pantallas\">Desl\u00edzate por las pantallas<\/video><\/p>\n<ol>\n<li>Crea un prototipo para m\u00f3vil o tableta con dos pantallas.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43682\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-2-screens.png\" alt=\"Crea un prototipo con 2 pantallas\" width=\"1310\" height=\"762\"><\/li>\n<li>Ve a la Pantalla 1 y haz doble clic en el Lienzo, o selecciona la pantalla en la paleta Capas. Esto seleccionar\u00e1 el Lienzo de la pantalla base. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43683\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-screen.png\" alt=\"Selecciona la pantalla base haciendo clic sobre ella en la paleta de capas\" width=\"1309\" height=\"762\"><\/li>\n<li>Busca la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb, que abrir\u00e1 el cuadro de di\u00e1logo Eventos. Aqu\u00ed es donde construir\u00e1s el enlace entre pantallas. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43684\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-add-event.png\" alt=\"Haz clic en a\u00f1adir evento en la paleta de eventos\" width=\"796\" height=\"522\"><\/li>\n<li>En el desplegable \u00abElegir activador\u00bb, pasa el rat\u00f3n por la secci\u00f3n <strong>\u00abGestos\u00bb<\/strong> y elige el activador <strong>\u00abAl deslizar a la izquierda<\/strong> \u00ab.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43685\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-trigger.png\" alt=\"Elige el activador al deslizar a la izquierda en el desplegable de activadores\" width=\"1087\" height=\"683\"><\/li>\n<li>A continuaci\u00f3n ver\u00e1s que aparece el desplegable \u00abElegir acci\u00f3n\u00bb. Haz clic en \u00e9l y elige la acci\u00f3n <strong>\u00abNavegar hasta\u00bb<\/strong>. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43686\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-Nav-action.png\" alt=\"Elige una acci\u00f3n de navegaci\u00f3n en el men\u00fa desplegable de acciones\" width=\"1088\" height=\"688\"><\/li>\n<li>Elige la Pantalla 2 de la lista de pantallas que aparece a continuaci\u00f3n. A continuaci\u00f3n, selecciona el efecto de transici\u00f3n \u00abDeslizar a la izquierda\u00bb.  Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43687\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Slide-left-transition.png\" alt=\"Selecciona la pantalla 2 y a\u00f1ade una condici\u00f3n de deslizamiento hacia la izquierda en el desplegable\" width=\"1086\" height=\"822\"><\/li>\n<li>Ve a la Pantalla 2 y selecciona la pantalla base. Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Elige un activador \u00bb <strong>Deslizar a la derecha<\/strong> \u00bb y una acci\u00f3n <strong>\u00abNavegar a\u00bb<\/strong>, y elige la Pantalla 1 a la que enlazar. A\u00f1ade un efecto de transici\u00f3n \u00abDeslizar a la derecha\u00bb y haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43688\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-right-event.png\" alt=\"Elige una acci\u00f3n en deslizar a la derecha + navegar a la acci\u00f3n en la pantalla 2 y enlaza con la pantalla 1 con un efecto de deslizar a la derecha\" width=\"1087\" height=\"684\"><\/li>\n<\/ol>\n<p>Ahora deber\u00edas tener dos eventos en total: uno en la Pantalla 1 que te enlace con la Pantalla 2, y otro en la Pantalla 2 que te enlace con la Pantalla 1.<\/p>\n<p>Pulsa el bot\u00f3n \u00abJugar\u00bb para simular tu prototipo y comprueba c\u00f3mo puedes deslizarte entre las pantallas.<\/p>\n<h2><a id=\"hide-content\"><\/a>Ocultar contenido<\/h2>\n<p>A continuaci\u00f3n, aprender\u00e1s a crear eventos para ocultar elementos en la pantalla.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" alt=\"Ejemplo de ocultar contenido\">Ejemplo de<\/video> ocultar<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\">contenido<\/video><\/p>\n<ol>\n<li>Coloca un Bot\u00f3n <kbd>B<\/kbd> y una Imagen <kbd>I<\/kbd> en el Lienzo y dales el estilo que prefieras. Puedes encontrarlos en la Barra de Herramientas.Etiqueta el bot\u00f3n \u00abOcultar imagen\u00bb. <\/li>\n<li>Selecciona el bot\u00f3n \u00abOcultar imagen\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43690\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-add-event.png\" alt=\"Haz clic en a\u00f1adir evento con el bot\u00f3n ocultar imagen seleccionado\" width=\"879\" height=\"506\"><\/li>\n<li>Sigue los pasos que se indican a continuaci\u00f3n para crear el evento:<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" alt=\"Ocultar evento\">Ocultar evento<\/video>\n<p>&nbsp;<\/p>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> En el desplegable Activador, pasa el rat\u00f3n por encima de la secci\u00f3n <strong>Grifo<\/strong> y elige un activador <strong>En grifo<\/strong>.  <div><strong>Nota:<\/strong> si utilizas un prototipo Web, On Tap aparecer\u00e1 como <strong>On Click<\/strong>.<\/div>\n<\/li>\n<li><strong>b.<\/strong> En el desplegable Acci\u00f3n, elige la acci\u00f3n <strong>Ocultar elemento<\/strong>. Ver\u00e1s que aparece una vista previa del lienzo. <\/li>\n<li><strong>c.<\/strong>  Aqu\u00ed es donde puedes seleccionar el objetivo de la acci\u00f3n: el elemento que quieres ocultar cuando pulses el bot\u00f3n \u00abOcultar imagen\u00bb. Selecciona la imagen que creaste anteriormente.  Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Pulsa el bot\u00f3n \u00abOcultar imagen\u00bb y ver\u00e1s c\u00f3mo desaparece la imagen. <\/p>\n<h2><a id=\"mouse-over-effects\"><\/a>Efectos al pasar el rat\u00f3n<\/h2>\n<p>Aqu\u00ed aprender\u00e1s a crear un evento <strong>Al pasar el rat\u00f3n<\/strong> y a cambiar la apariencia de un bot\u00f3n.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" mouse-over-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" alt=\"Ejemplo de bot\u00f3n de pasar el rat\u00f3n por encima\">Ejemplo de bot\u00f3n<\/video> <strong>Al<\/strong><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" mouse-over-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\">pasar<\/video> el rat\u00f3n<\/p>\n<ol>\n<li>Crea un nuevo prototipo Web. Los prototipos para m\u00f3viles y tabletas no funcionar\u00e1n para este ejemplo, ya que no puedes pasar el rat\u00f3n por una pantalla t\u00e1ctil. <\/li>\n<li>Coloca un Bot\u00f3n <kbd>B<\/kbd> en el Lienzo y dale el estilo que prefieras.<\/li>\n<li>Con el bot\u00f3n seleccionado en el Lienzo, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Sigue estos pasos para construir el evento:  <ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> En el desplegable Activador, pasa el <strong>rat\u00f3n<\/strong> por encima de la secci\u00f3n <strong>Rat\u00f3n<\/strong> y elige el activador <strong>Al pasar el rat\u00f3n<\/strong>.<\/li>\n<li><strong>b.<\/strong> En el desplegable Acci\u00f3n, elige la acci\u00f3n <strong>Cambiar estilo<\/strong>.<\/li>\n<li><strong>c.<\/strong>  Selecciona el bot\u00f3n como objetivo de la acci\u00f3n en la vista previa del lienzo. Ver\u00e1s que debajo aparece un desplegable en el que puedes especificar los estilos del elemento que quieres cambiar. <\/li>\n<\/ul>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742201294\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Para este ejemplo, cambia el color de fondo.<\/p>\n<\/li>\n<\/ol>\n<p>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/p>\n<p>Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Pasa el rat\u00f3n por encima del bot\u00f3n y ver\u00e1s c\u00f3mo cambia de color. Aparta el rat\u00f3n y ver\u00e1s c\u00f3mo el bot\u00f3n vuelve a su color original.  <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Arrastrar y soltar<\/h2>\n<p>Tambi\u00e9n puedes crear interacciones para arrastrar y soltar elementos en el Lienzo. He aqu\u00ed c\u00f3mo hacerlo: <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-rectangle-example-1.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" alt=\"Arrastrar y soltar\">Arrastrar y soltar<\/video><\/p>\n<ol>\n<li>Coloca un Rect\u00e1ngulo <kbd>R<\/kbd> en el Lienzo y dale el estilo que prefieras.<\/li>\n<li>Con el rect\u00e1ngulo a\u00fan seleccionado, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Sigue estos pasos para construir el evento:  <div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742269298\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> En el desplegable Activador, pasa el <strong>rat\u00f3n<\/strong> por encima de la secci\u00f3n<strong>(Al tocar<\/strong> para m\u00f3vil\/tableta) y elige el activador <strong>Al arrastrar<\/strong>.<\/li>\n<li><strong>b.<\/strong> En el desplegable de acciones, selecciona la acci\u00f3n <strong>Mover elemento<\/strong>.<\/li>\n<li><strong>c.<\/strong>  Ver\u00e1s que aparece una vista previa del lienzo, donde puedes elegir el rect\u00e1ngulo como objetivo de la acci\u00f3n.<\/li>\n<li><strong>d.<\/strong>  Mira en la parte inferior del cuadro de di\u00e1logo, donde ahora encontrar\u00e1s dos desplegables en los que puedes definir hacia d\u00f3nde quieres mover el rect\u00e1ngulo cuando lo arrastres.Haz clic en el desplegable X (movimiento horizontal) y selecciona la opci\u00f3n \u00abCon el cursor\u00bb.Haz clic en el desplegable Y (movimiento vertical) y selecciona tambi\u00e9n la opci\u00f3n \u00abCon el cursor\u00bb.Ambas opciones te permitir\u00e1n mover el rect\u00e1ngulo con el rat\u00f3n cuando simules. Pulsa \u00abAceptar\u00bb para terminar de construir el evento. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Comienza a arrastrar el rect\u00e1ngulo para moverlo por la pantalla. Suelta el rect\u00e1ngulo para detener su movimiento.  <\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convierte tus wireframes en prototipos interactivos de alta fidelidad a\u00f1adiendo eventos. En este art\u00edculo, aprender\u00e1s a crear y utilizar interacciones con la paleta Eventos. C\u00f3mo funcionan&#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-124623","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\/124623"}],"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=124623"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124623\/revisions"}],"predecessor-version":[{"id":126283,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124623\/revisions\/126283"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}