{"id":124650,"date":"2022-11-16T17:43:26","date_gmt":"2022-11-16T16:43:26","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-keypad\/"},"modified":"2025-02-03T16:44:54","modified_gmt":"2025-02-03T15:44:54","slug":"how-to-create-a-keypad","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-prototipar-el-teclado","title":{"rendered":"C\u00f3mo crear un prototipo de teclado"},"content":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear un prototipo de teclado num\u00e9rico.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73246651\/index.html\" width=\"820px\" height=\"440px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><strong>Ver  <\/strong><\/h3>\n<ul>\n<li>Coloca un \u00abRect\u00e1ngulo\u00bb en el lienzo y dale forma para simular una tecla de un teclado.<\/li>\n<li>Haz doble clic en el rect\u00e1ngulo para activar la opci\u00f3n de texto, y escribe un n\u00famero.<\/li>\n<li>Repite la acci\u00f3n tantas veces como sea necesario para completar tu teclado.<br \/>\nPara terminar la vista, selecciona \u00abCampo de texto de entrada\u00bb en la secci\u00f3n \u00abCampos de entrada interactivos\u00bb y col\u00f3calo encima de las teclas.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-1.png\" alt=\"\" width=\"790\" height=\"338\"><\/li>\n<\/ul>\n<h3><strong>Eventos  <\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Con uno de los rect\u00e1ngulos seleccionados, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.  <\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-2.png\" alt=\"\" width=\"790\" height=\"338\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y luego selecciona el \u00abCampo de texto de entrada\u00bb.  <\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-3.png\" alt=\"\" width=\"790\" height=\"338\"><\/li>\n<li><span data-preserver-spaces=\"true\">En el primer campo del constructor de Expresiones de Valor, arrastra el \u00abCampo de texto de entrada\u00bb y las funciones \u00abConcat\u00bb a continuaci\u00f3n; para la \u00faltima zona, arrastra el rect\u00e1ngulo. Pulsa \u00abOK\u00bb y \u00abAceptar\u00bb para terminar de crear el evento. <\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 63%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/771557309\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>En la paleta Eventos, haz clic en el bot\u00f3n \u00abCopiar todos los eventos\u00bb, selecciona las siguientes teclas, una a una, y utiliza el bot\u00f3n \u00abPegar todos los eventos\u00bb para pegar el evento.<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\/10\/keypad-other-keys-expression.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/keypad-other-keys-expression.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/keypad-other-keys-expression.png\" alt=\"Teclado expresi\u00f3n 2\">Teclado expresi\u00f3n 2<\/video><\/li>\n<\/ol>\n<p>Simula tu prototipo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear un prototipo de teclado num\u00e9rico. As\u00ed es como se construye: Ver Coloca un \u00abRect\u00e1ngulo\u00bb en el lienzo y dale forma&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8425,8424],"tags":[],"class_list":["post-124650","post","type-post","status-publish","format-standard","hentry","category-logica-negocio","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124650"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124650"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124650\/revisions"}],"predecessor-version":[{"id":126215,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124650\/revisions\/126215"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}