{"id":67,"date":"2009-07-06T15:04:34","date_gmt":"2009-07-06T13:04:34","guid":{"rendered":"http:\/\/webposible.com\/xposible\/?p=67"},"modified":"2009-07-06T15:07:19","modified_gmt":"2009-07-06T13:07:19","slug":"web-movil-y-campos-de-texto-en-formularios","status":"publish","type":"post","link":"http:\/\/webposible.com\/xposible\/2009\/web-movil-y-campos-de-texto-en-formularios\/","title":{"rendered":"Web m\u00f3vil y campos de texto en formularios"},"content":{"rendered":"<p>Que escribir en un tel\u00e9fono m\u00f3vil con el teclado num\u00e9rico t\u00edpico puede ser una pesadilla, no es ninguna novedad. La recomendaci\u00f3n de evitar, en la medida de lo posible, obligar a los usuarios a escribir en <code>input type=\"text\"<\/code> \u00f3 <code>textarea<\/code> hay que tenerla muy presente.<\/p>\n<p>Pero ya sabemos como funciona el mundillo de la web: basta con que no sea recomendable usarlo, para que sea un requisito imprescindible.<\/p>\n<p>Cuando se public\u00f3 &#8211; por fin &#8211; <a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/www.w3.org\/TR\/xhtml-basic\/\"><acronym title=\"eXtensible Hypertext Markup Language\" xml:lang=\"en\">XHTML<\/acronym> 1.1 Basic<\/a> como recomendaci\u00f3n del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>, una de las novedades que m\u00e1s me llam\u00f3 la atenci\u00f3n fue el m\u00f3dulo de <code><strong>inputmode<\/strong><\/code> (<a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/www.w3.org\/TR\/xhtml-basic\/#s_inputmode\"><acronym title=\"eXtensible Hypertext Markup Language\" xml:lang=\"en\">XHTML<\/acronym> inputmode Attribute Module<\/a>). Brevemente es un atributo que se incluye en el c\u00f3digo fuente como atributo de un campo de texto en un formulario, para \u00abobligar\u00bb a que el teclado del m\u00f3vil escriba, por ejemplo, n\u00fameros (<code>inputmode=\"latin digits\"<\/code>) usando <span xml:lang=\"en\">tokens<\/span> o valores predefinidos (lo puedes ver en <a xml:lang=\"en\" hreflang=\"es\" href=\"http:\/\/www.w3.org\/TR\/xhtml-basic\/#s_mode-values\">List of tokens<\/a>).<\/p>\n<p><strong>La teor\u00eda es muy bonita, pero en la pr\u00e1ctica, no est\u00e1 muy extendido<\/strong> entre los terminales m\u00f3viles la interpretaci\u00f3n del m\u00f3dulo en cuesti\u00f3n. Y es un problema gordo y que puede producir mucha frustraci\u00f3n a los usuarios. Imaginemos que tenemos que escribir un c\u00f3digo postal, cinco d\u00edgitos en total. Puede suponer pulsar veinte veces las teclas, ya que los n\u00fameros suelen situarse detr\u00e1s de las letras. \u00bfY si es un n\u00famero de cuenta con 20 d\u00edgitos? Y si est\u00e1s pensando: \u00abse puede configurar para escribir s\u00f3lo n\u00fameros y ya est\u00e1&#8230;\u00bb pero no siempre es as\u00ed (<em>pruebas con unos veinte terminales me lo confirman<\/em>).<\/p>\n<p>\u00bfSoluci\u00f3n?<\/p>\n<p><em>Hasta que los agentes de usuario<\/em> implementen el m\u00f3dulo (\u00bfa qu\u00e9 me suena \u00e9sto?), podemos usar un est\u00e1ndar algo m\u00e1s viejo, pero con mejor soporte (a mis pruebas me remito). \u00a0Estoy hablando de <strong><acronym title=\"Wap Cascading Style Sheet\" xml:lang=\"en\">WCSS<\/acronym> Input Extension<\/strong>, que mediante el uso de la propiedad <code><strong>-wap-input-format<\/strong><\/code> en la hoja de estilos, o insertado directamente como valor del atributo <code>style<\/code>, nos permite forzar a que los teclados de los tel\u00e9fonos escriban s\u00f3lo n\u00fameros, n\u00fameros con s\u00edmbolos, texto en min\u00fasculas con s\u00edmbolos, texto en may\u00fasculas con s\u00edmbolos, \u00a0y todo junto. E incluso la longitud del campo. Puedes ver m\u00e1s en <a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/www.developershome.com\/wap\/wcss\/wcss_tutorial.asp?page=inputExtension2\">Controlling the Type and Number of Characters to be Entered in Text Fields (<code>-wap-input-format<\/code> Property)<\/a>. Y lo bueno, es que es compatible con <span xml:lang=\"en\"><acronym title=\"eXtensible Hypertext Markup Language\" xml:lang=\"en\">XHTML<\/acronym> 1.1 Basic<\/span>.<\/p>\n<p>Algunos ejemplos:<\/p>\n<ul>\n<li>C\u00f3digo postal (5 d\u00edgitos): <code>-wap-input-format: \"NNNNN\"<\/code><\/li>\n<li>C\u00f3digo wadus (hasta 5 d\u00edgitos)<code>-wap-input-format: \"5N\"<\/code> (ojo, que no es lo mismo)<\/li>\n<li>Importe (n\u00fameros y s\u00edmbolos)<code>-wap-input-format: \"*n\"<\/code> (permitir\u00eda n\u00fameros y los s\u00edmbolos separadores de miles y decimales)<\/li>\n<li>Texto wadus <code>-wap-input-format: \"*A\"<\/code> (letras en may\u00fasculas y s\u00edmbolos, sin l\u00edmite)<\/li>\n<li>Texto wadus prima <code>-wap-input-format: \"*a\"<\/code> (letras en min\u00fasculas y s\u00edmbolos, sin l\u00edmite)<\/li>\n<\/ul>\n<p>\u00bfEs \u00fatil? S\u00ed y mucho. Pero recomendar\u00eda mucha precauci\u00f3n antes de usarlo. Algunos motivos:<\/p>\n<ul>\n<li>Si nos equivocamos en el tipo de datos, la cagamos. No es posible cambiar de n\u00fameros a letras, por ejemplo.<\/li>\n<li>Si nos equivocamos en la longitud del campo, tambi\u00e9n la cagamos (como he dicho antes, no es lo mismo &lt;code&gt;NNNNN&lt;\/code&gt; que &lt;code&gt;5N&lt;\/code&gt;). Adem\u00e1s, si hay que introducir en el campo, por ejemplo 5 letras may\u00fasculas obligatoriamente (&lt;code&gt;5A&lt;\/code&gt;), no puedes salir de la caja \u00f3 \u00e1rea de texto del formulario hasta que cumplas lo exigido.<\/li>\n<li>Si usamos la propiedad <code>-wap-input-format<\/code> en una hoja de estilos externa, hay que tener mucho cuidado que afecta s\u00f3lo a los elementos de formularios que queremos (y no fastidie a otro). Hay que tener una buena planificaci\u00f3n en la nomenclatura de clases e identificadores.<\/li>\n<li>La propiedad de la que hablamos, no se interpreta siempre a la hora de escribir en aquellos terminales que tienen teclado tipo QWERTY ya sea f\u00edsico o en pantalla. Lo cu\u00e1l no significa que pueda aparecer un mensaje de error bastante cr\u00edptico al intentar hacer <span xml:lang=\"en\">submit<\/span>, diciendo algo as\u00ed como <q>El contenido de un campo de formulario no coincide con el formato que rquiere el autor de la p\u00e1gina. Modifique el texto y vuelva a intentarlo<\/q>. C\u00f3mo v\u00e9is, un mensaje muy <em>claro, corto y sencillo<\/em>. \u00c9sta joya de texto aparece en una HTC.<\/li>\n<\/ul>\n<p>La otra propiedad que podemos usar es <code><strong>-wap-input-required<\/strong><\/code>, con los posibles valores <code>true<\/code> y <code>false<\/code>, que no creo que requiera mucha explicaci\u00f3n.<br \/>\nComo he dicho antes, la informaci\u00f3n completa y bien explicada la puedes encontrar en <a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/www.developershome.com\/wap\/wcss\/wcss_tutorial.asp?page=inputExtension2\">Controlling the Type and Number of Characters to be Entered in Text Fields (<code>-wap-input-format<\/code> Property)<\/a>, con algunos \u00abextras\u00bb como el uso de caracteres de escape.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Que escribir en un tel\u00e9fono m\u00f3vil con el teclado num\u00e9rico t\u00edpico puede ser una pesadilla, no es ninguna novedad. La recomendaci\u00f3n de evitar, en la medida de lo posible, obligar a los usuarios a escribir en input type=\u00bbtext\u00bb \u00f3 textarea hay que tenerla muy presente. Pero ya sabemos como funciona el mundillo de la web: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,16],"tags":[],"_links":{"self":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/67"}],"collection":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":6,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":72,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/67\/revisions\/72"}],"wp:attachment":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}