Plugins de WordPress para web móvil

En WordPress Mobile Plugins, Jeff Van Campen analiza de forma exhaustiva (validadores de HTML, CSS y Mobile OK) tres pluggins de WordPress para adaptar el contenido y presentación de un blog a los teléfonos móviles. Ninguno de esos pluggins requiere APIs o aplicaciones externas para funcionar, por lo tanto son bastante transparentes y fáciles de modificar y adaptar. Los pluggins son:

Recuerda, WordPress Mobile Plugins.

Web móvil y campos de texto en formularios

Que escribir en un teléfono móvil con el teclado numérico típico puede ser una pesadilla, no es ninguna novedad. La recomendación de evitar, en la medida de lo posible, obligar a los usuarios a escribir en input type="text" ó textarea hay que tenerla muy presente.

Pero ya sabemos como funciona el mundillo de la web: basta con que no sea recomendable usarlo, para que sea un requisito imprescindible.

Cuando se publicó – por fin – XHTML 1.1 Basic como recomendación del W3C, una de las novedades que más me llamó la atención fue el módulo de inputmode (XHTML inputmode Attribute Module). Brevemente es un atributo que se incluye en el código fuente como atributo de un campo de texto en un formulario, para “obligar” a que el teclado del móvil escriba, por ejemplo, números (inputmode="latin digits") usando tokens o valores predefinidos (lo puedes ver en List of tokens).

La teoría es muy bonita, pero en la práctica, no está muy extendido entre los terminales móviles la interpretación del módulo en cuestión. Y es un problema gordo y que puede producir mucha frustración a los usuarios. Imaginemos que tenemos que escribir un código postal, cinco dígitos en total. Puede suponer pulsar veinte veces las teclas, ya que los números suelen situarse detrás de las letras. ¿Y si es un número de cuenta con 20 dígitos? Y si estás pensando: “se puede configurar para escribir sólo números y ya está…” pero no siempre es así (pruebas con unos veinte terminales me lo confirman).

¿Solución?

Hasta que los agentes de usuario implementen el módulo (¿a qué me suena ésto?), podemos usar un estándar algo más viejo, pero con mejor soporte (a mis pruebas me remito).  Estoy hablando de WCSS Input Extension, que mediante el uso de la propiedad -wap-input-format en la hoja de estilos, o insertado directamente como valor del atributo style, nos permite forzar a que los teclados de los teléfonos escriban sólo números, números con símbolos, texto en minúsculas con símbolos, texto en mayúsculas con símbolos,  y todo junto. E incluso la longitud del campo. Puedes ver más en Controlling the Type and Number of Characters to be Entered in Text Fields (-wap-input-format Property). Y lo bueno, es que es compatible con XHTML 1.1 Basic.

Algunos ejemplos:

  • Código postal (5 dígitos): -wap-input-format: "NNNNN"
  • Código wadus (hasta 5 dígitos)-wap-input-format: "5N" (ojo, que no es lo mismo)
  • Importe (números y símbolos)-wap-input-format: "*n" (permitiría números y los símbolos separadores de miles y decimales)
  • Texto wadus -wap-input-format: "*A" (letras en mayúsculas y símbolos, sin límite)
  • Texto wadus prima -wap-input-format: "*a" (letras en minúsculas y símbolos, sin límite)

¿Es útil? Sí y mucho. Pero recomendaría mucha precaución antes de usarlo. Algunos motivos:

  • Si nos equivocamos en el tipo de datos, la cagamos. No es posible cambiar de números a letras, por ejemplo.
  • Si nos equivocamos en la longitud del campo, también la cagamos (como he dicho antes, no es lo mismo <code>NNNNN</code> que <code>5N</code>). Además, si hay que introducir en el campo, por ejemplo 5 letras mayúsculas obligatoriamente (<code>5A</code>), no puedes salir de la caja ó área de texto del formulario hasta que cumplas lo exigido.
  • Si usamos la propiedad -wap-input-format en una hoja de estilos externa, hay que tener mucho cuidado que afecta sólo a los elementos de formularios que queremos (y no fastidie a otro). Hay que tener una buena planificación en la nomenclatura de clases e identificadores.
  • 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ísico o en pantalla. Lo cuál no significa que pueda aparecer un mensaje de error bastante críptico al intentar hacer submit, diciendo algo así como El contenido de un campo de formulario no coincide con el formato que rquiere el autor de la página. Modifique el texto y vuelva a intentarlo. Cómo véis, un mensaje muy claro, corto y sencillo. Ésta joya de texto aparece en una HTC.

La otra propiedad que podemos usar es -wap-input-required, con los posibles valores true y false, que no creo que requiera mucha explicación.
Como he dicho antes, la información completa y bien explicada la puedes encontrar en Controlling the Type and Number of Characters to be Entered in Text Fields (-wap-input-format Property), con algunos “extras” como el uso de caracteres de escape.