{"id":124629,"date":"2019-02-15T22:40:35","date_gmt":"2019-02-15T21:40:35","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-and-inputs\/"},"modified":"2025-02-03T16:44:31","modified_gmt":"2025-02-03T15:44:31","slug":"prototyping-forms-and-inputs","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/prototipos-formularios-y-entradas","title":{"rendered":"Formularios y entradas"},"content":{"rendered":"

Con Justinmind, puedes crear prototipos de formularios interactivos para simular experiencias de entrada de usuarios, como formularios de registro, inicio de sesi\u00f3n y b\u00fasqueda.<\/p>\n

<\/a>Crear un formulario<\/h2>\n

Para crear un formulario en Justinmind, tendr\u00e1s que utilizar widgets. Busca en la Barra de Herramientas situada bajo el signo m\u00e1s en la esquina superior izquierda de tu pantalla. Aqu\u00ed encontrar\u00e1s los widgets que se utilizan habitualmente en los formularios, como: Campos de texto de entrada, Casillas de verificaci\u00f3n y Botones de radio, Listas de selecci\u00f3n, etc.
\nTambi\u00e9n puedes descargar nuestros formularios prefabricados e importarlos a tu paleta de Widgets.
\nS\u00f3lo tienes que arrastrar un widget al Lienzo para empezar a crear tu formulario.
\n\"Widgets<\/p>\n

Todos los widgets de formularios y entradas son autom\u00e1ticamente interactivos durante la simulaci\u00f3n, sin necesidad de Eventos. S\u00f3lo tienes que hacer clic en \u00abSimular\u00bb y podr\u00e1s interactuar con ellos. <\/p>\n

Dependiendo del dispositivo que est\u00e9s utilizando en tu prototipo, el aspecto y la funcionalidad de estos widgets ser\u00e1n diferentes. Por ejemplo, en los prototipos de dispositivos iPhone, al enfocar un Campo de texto de entrada durante la simulaci\u00f3n se mostrar\u00e1 autom\u00e1ticamente un teclado interactivo del dispositivo. <\/p>\n

Puedes a\u00f1adir widgets adicionales con un estilo de entrada en tu prototipo a\u00f1adiendo otras bibliotecas de widgets.
\n\"Haz<\/p>\n

Una vez que hayas dise\u00f1ado tu formulario, puedes empezar a a\u00f1adir Eventos para crear interacciones sofisticadas. Hemos creado algunos ejercicios de ejemplo para darte una idea de algunas formas de hacerlo. \u00c9chales un vistazo a continuaci\u00f3n. <\/p>\n

<\/a>Autocompletar formularios<\/h2>\n

En este ejercicio, aprender\u00e1s a autocompletar dos Campos de Texto de Entrada despu\u00e9s de pulsar la tecla tabulador en el primer Campo de Texto de Entrada.<\/p>\n

Sigue estos pasos para completar el ejercicio:<\/p>\n

    \n
  1. Crea un nuevo prototipo, para tu formulario; utiliza un Texto, Campos de Texto de Entrada y un bot\u00f3n de la Barra de Herramientas.<\/span><\/li>\n
  2. Selecciona el Bot\u00f3n y ve a la paleta Eventos<\/span>.<\/li>\n
  3. Haz clic en \u00abA\u00f1adir evento\u00bb y selecciona el activador \u00abAl hacer clic\u00bb; selecciona una acci\u00f3n \u00abEstablecer valor\u00bb.<\/span><\/li>\n
  4. Para el objetivo, selecciona el segundo Campo de Texto de Entrada, y escribe \u00abNombre del producto\u00bb como valor. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <\/span>\"Establecer<\/li>\n
  5. Ve a la paleta Eventos, haz clic en el icono de engranaje situado junto a la palabra \u00abHacer\u00bb y selecciona \u00abA\u00f1adir acci\u00f3n\u00bb. Crea otra acci\u00f3n \u00abAl hacer clic\u00bb + \u00abEstablecer valor\u00bb y selecciona el tercer Campo de texto de entrada como objetivo, e introduce algo como valor establecido por la acci\u00f3n. \"Wireframes<\/li>\n
  6. Volviendo a la paleta Eventos, haz clic en \u00abA\u00f1adir interacci\u00f3n\u00bb. Deja el desencadenante como \u00abAl hacer clic\u00bb y cambia la acci\u00f3n resultante a \u00abEnfocar\u00bb y selecciona el segundo Campo de Texto de Entrada como objetivo a enfocar.\"\"As\u00ed es como deber\u00edan verse todos tus eventos:
    \n\"Wireframes<\/li>\n<\/ol>\n

    Ya est\u00e1. Haz clic en \u00abSimular\u00bb e introduce alg\u00fan texto en el primer Campo de Texto de Entrada. A continuaci\u00f3n, pulsa la tecla TAB y te centrar\u00e1s en el segundo Campo de Texto de Entrada y ver\u00e1s c\u00f3mo se autocompletan los valores. <\/p>\n

    Puedes descargar el ejemplo aqu\u00ed.<\/a><\/p>\n

    <\/a>Validaci\u00f3n del flujo de malla<\/h2>\n

    Con Justinmind, puedes crear y simular un formulario de varios pasos utilizando variables y validaci\u00f3n de flujo de pantalla. En este ejemplo, aprender\u00e1s a crear un formulario de entrada m\u00f3vil con varias pantallas. En la \u00faltima pantalla, el usuario ver\u00e1 un resumen de todos los datos que ha rellenado. <\/p>\n

    Para dise\u00f1ar un formulario de varios pasos en tu prototipo, sigue los pasos que se indican a continuaci\u00f3n:<\/p>\n

    Dise\u00f1o de las pantallas<\/h3>\n
      \n
    1. Crea un nuevo prototipo con dos pantallas.<\/li>\n
    2. En la primera pantalla, arrastra tres Textos y n\u00f3mbralos \u00abNombre de usuario\u00bb, \u00abDirecci\u00f3n de correo electr\u00f3nico\u00bb y \u00abContrase\u00f1a\u00bb.<\/li>\n
    3. Arrastra un Campo de Texto de Entrada debajo de cada Campo de Texto, deber\u00eda haber tres en total<\/li>\n
    4. A\u00f1ade un bot\u00f3n en la esquina inferior derecha de la pantalla que se utilizar\u00e1 para navegar a la siguiente pantalla.<\/li>\n
    5. Ve a la pantalla 2 y a\u00f1ade los mismos Campos de Texto con los Campos de Texto de Entrada debajo de cada texto.<\/li>\n
    6. Ve a la paleta Variables y a\u00f1ade tres variables, una para cada campo de entrada.<\/li>\n<\/ol>\n

      A\u00f1adir los Eventos<\/h3>\n
        \n
      1. Ve a la Pantalla 1 y crea un evento \u00abAl tocar\u00bb + \u00abEnlazar a\u00bb, y enlaza con la Pantalla
      2. Repite el Paso 2 para los dos siguientes Campos de Texto de Entrada.<\/li>\n
      3. Ve a la Pantalla 2 y observa la paleta Variables. Selecciona una variable y arr\u00e1strala al elemento de texto correspondiente en la Pantalla. Esto crear\u00e1 un evento \u00abAl cargar la p\u00e1gina\u00bb + \u00abEstablecer valor\u00bb, y fijar\u00e1 el valor del elemento Texto al valor de la variable. <\/li>\n
      4. Repite el Paso 3 hasta que a cada elemento de Texto se le haya asignado su variable correspondiente.<\/li>\n
      5. \u00a1Y ya est\u00e1! Haz clic en \u00abSimular\u00bb e interact\u00faa con tu prototipo. Ver\u00e1s que tus respuestas aparecen en el resumen de la \u00faltima p\u00e1gina. <\/li>\n<\/ol>\n

        Puedes descargar el ejemplo aqu\u00ed.<\/a><\/p>\n

        <\/a>Validar campos obligatorios<\/h2>\n

        En este ejemplo, aprenderemos a utilizar condiciones para validar un formulario de entrada de forma que todos los campos obligatorios se rellenen correctamente.<\/p>\n

        Sigue estos pasos para aprender a hacerlo:<\/p>\n

        Dise\u00f1o de la forma<\/h3>\n
          \n
        1. Crea un prototipo y crea tres Campos de Texto de Entrada en el lienzo (puedes encontrar los campos de entrada en la barra de herramientas dentro del men\u00fa del icono m\u00e1s).<\/li>\n
        2. En la paleta Propiedades, asigna a cada Campo de Texto de Entrada un valor de marcador de posici\u00f3n de \u00abNombre\u00bb, \u00abCorreo electr\u00f3nico*\u00bb y \u00abN\u00famero de tel\u00e9fono*\u00bb. Puedes definir el texto del marcador de posici\u00f3n en la paleta Propiedades.\n
          Nota:<\/strong> Los campos de entrada que contienen el car\u00e1cter \u00ab*\u00bb requerir\u00e1n que el usuario introduzca texto en ellos para completar el formulario. Adem\u00e1s, ten en cuenta que el campo de correo electr\u00f3nico requerir\u00e1 un formato \u00abxxx@xxx\u00bb. <\/div>\n<\/li>\n
        3. Crea el widget Bot\u00f3n en la parte inferior de la Pantalla 1.<\/li>\n
        4. Ve a la Pantalla 2 y crea un mensaje de \u00ab\u00c9xito\u00bb para informar al usuario de que ha introducido correctamente sus datos.<\/li>\n<\/ol>\n

          A\u00f1adir los Eventos<\/h3>\n

          Hemos creado un formulario de entrada est\u00e1tico. Ahora, a\u00f1adiremos eventos mediante condiciones para que nuestro formulario sea interactivo e identifique qu\u00e9 campos deben rellenarse para pasar con \u00e9xito a la siguiente pantalla. <\/p>\n

            \n
          1. Selecciona el Bot\u00f3n en la Pantalla 1 y ve a la paleta Eventos. A\u00f1ade una acci\u00f3n \u00abAl hacer clic\u00bb + \u00abCambiar estilo\u00bb, seleccionando el Campo de Texto de Entrada \u00abEmail*\u00bb. Campo de Texto de Entrada. Selecciona las opciones de color del borde y del texto en el desplegable, y aj\u00fastalas al color actual del Campo de Texto de Entrada. A continuaci\u00f3n, haz clic en \u00abAceptar\u00bb para salir del di\u00e1logo. Esto cambiar\u00e1 la apariencia del Campo de Texto de Entrada a su color por defecto cuando el usuario haya introducido la informaci\u00f3n correcta. \"Cambiar<\/li>\n
          2. Vuelve a la paleta Eventos y haz clic en el texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear. En el constructor de Expresiones Condicionales, sigue estos pasos para crear la condici\u00f3n:
            \n\"prototipos-interactivos-forma-de-entrada-expresi\u00f3n-1\"
            \n1.<\/strong> Arrastra la funci\u00f3n de texto Expresi\u00f3n regular al primer espacio de la expresi\u00f3n. 2.<\/strong> En el espacio que aparece, arrastra el Campo de texto de entrada del c\u00f3digo postal desde el Lienzo de di\u00e1logo o desde el contorno del di\u00e1logo. 3.<\/strong> En el segundo espacio, arrastra la constante C\u00f3digo postal. Haz clic en \u00abAceptar\u00bb para terminar de construir la condici\u00f3n.<\/p>\n<\/li>\n
          3. Mira en los Eventos que acabas de crear, y haz clic en el texto \u00abSi no\u00bb. A\u00f1ade otra acci\u00f3n \u00abAl hacer clic\u00bb + \u00abCambiar estilo\u00bb, seleccionando de nuevo el \u00abC\u00f3digo postal*\u00bb Campo de Texto de Entrada y selecciona las opciones Color del Borde y Color del Texto del desplegable. Esta vez, cambia el estilo del borde y del texto a rojo. El estilo rojo indicar\u00e1 a los usuarios que el Campo de Texto de Entrada C\u00f3digo Postal no se ha rellenado correctamente. \"Cambia<\/li>\n
          4. Repite los Pasos 1-3 para el otro campo de entrada obligatorio (N\u00famero de tel\u00e9fono). Recuerda cambiar los componentes en el Constructor de expresiones y en los Campos de texto de entrada seg\u00fan corresponda. <\/li>\n
          5. Una vez que tengas eventos para los dos campos obligatorios, a\u00f1ade un evento m\u00e1s al Bot\u00f3n. Crea un evento \u00abAl hacer clic\u00bb + \u00abNavegar a\u00bb, y luego selecciona la Pantalla 2. <\/li>\n
          6. Haz clic en el texto \u00aba\u00f1adir condici\u00f3n\u00bb para este evento. A\u00f1ade la siguiente expresi\u00f3n: \"Condici\u00f3n\n
            Nota:<\/strong> la condici\u00f3n debe coincidir exactamente con esta imagen para que el evento se active correctamente<\/div>\n<\/li>\n<\/ol>\n

            \u00a1Y ya est\u00e1! Haz clic en \u00abSimular\u00bb para interactuar y disfrutar de tu formulario de entrada en tu prototipo. <\/p>\n

            Puedes descargar el ejemplo aqu\u00ed.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

            Con Justinmind, puedes crear prototipos de formularios interactivos para simular experiencias de entrada de usuarios, como formularios de registro, inicio de sesi\u00f3n y b\u00fasqueda. Crear un…<\/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,8422],"tags":[],"class_list":["post-124629","post","type-post","status-publish","format-standard","hentry","category-formacion","category-formularios-y-datos"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124629"}],"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=124629"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124629\/revisions"}],"predecessor-version":[{"id":126157,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124629\/revisions\/126157"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}