Desde la versión 1.8.x, el editor QuickMode de BreezingForms introduce una nueva característica fácil de usar para mostrar formularios de Joomla® de forma optimizada para terminales móviles (por ejemplo iPhone®/iPad®/iPod®, Android®, Bada®, etc). Al respecto también hay un vídeo tutorial que puede verse aquí.
Todas las características de QuickMode también funcionan en terminales móviles pero se renderizan de forma diferente para facilitar al usuario la introducción de datos. De este modo no sólo podrá mostrar sus formularios adaptados a pantallas de móviles, sino que también podrá implementar aplicaciones accesibles desde el navegador del terminal. Sin duda esto ayuda a sus usuarios a utilizar sus formularios.
Esta cualidad sobrepasa lo que se puede hacer con diseños adaptativos (responsive), pues la experiencia que se le ofrece al usuario es más semejante a una aplicación que a un sitio web. A modo de ejemplo, por favor, abra el siguiente enlace con el navegador de su teléfono móvil: Ejemplo para móvil - formulario para solicitud de trabajo
Activar esta característica es muy fácil
- Cree su formulario QuickMode.
- En su formulario, vaya a Avanzado => active la casilla "Formulario para terminales móviles".
- Guarde los cambios y el formulario.
- Abra el formulario desde un terminal móvil y pruébelo.
Como podrá observar, al acceder al formulario su apariencia será como la versión de sobremesa pero con un botón en la parte superior llamado "Mobile Version". Haciendo clic sobre éste, cambiará la apariencia del mismo pero con las mismas características.
Forzar el formulario para terminales móviles
- Cree su formulario QuickMode.
- En su formulario, vaya a Avanzado => active la casilla "Formulario para terminales móviles".
- En la misma pestaña de Avanzado, active también la opción "Forzar form. para terminales móviles".
- Activar la opción anterior implica la necesidad de introducir una URL en el campo "URL de escritorio para opción forzar form para móviles" donde se irá en caso de pulsar el botón "Desktop" del formulario.
- Guarde los cambios y el formulario.
- Obra el formulario desde un terminal móvil y pruébelo.
En cuanto acceda al formulario mediante el navegador de su terminal móvil, verá que este se muestra directamente en formato para móviles.
Los formularios móviles implican una serie de consecuencias
- Se precisa de un enlace de salida para resolver el botón "Desktop", de lo contrario el formulario entrará en bucle.
- Los formularios sólo pueden abrirse si se han publicado como componente o plugin, pero nunca si se plucaron como un módulo o dentro de un iframe.
- Toda la información de su sitio web estará oculta mientras se use el formulario en su versión móvil.
- Si en el formulario está usando el reCaptcha, cuando se cargue la opción móvil se forzará el uso del Captcha normal.
- En las versiones posteriores a BreezingForms 1.8.2 es posible utilizar la carga de datos mediante HTML5 compatible con iPhone, iPad, iPod y Android. Esta opción puede añadirse en el mismo elemento de subida de datos de su formulario. La subida regular de archivos siempre es opcional en la versión móvil. Esto es así porque la gran diversidad de dispositivos móviles hace imposible determinar si la combinación terminal - sistema operativo puede soportar esta opción.
Estilizar formularios para móvil
Es posible estilizar sus formularios móviles, pero se hace de forma distinta que en la versión de sobremesa. Dado que estos formularios se implementan utilizando jQuery Mobile, son sus archivos (Themeroller) los que deben personalizarse para crear estilos propios.
Una vez que haya creado su propio estilo usando ThemeRoller, por favor, cree un archivo con el nombre "jq.mobile.1.4.4.custom.css" en la carpeta "/media/breezingforms/themes/" usando FTP y copie allí dentro el código CSS creado en ThemeRoller. El tema realizadocon ThemeRoller puede contener muchos archivos. Es posible reconocer el código CSS personalizado buscando el nombre de tema que se usa antes de descargar el mismo. Si por ejemplo denomina su tema como "mytheme" en el themeroller, el archivo relevante para copiar los estilos será "mytheme.min.css".
Los iconos pueden sustituirse usando los estilos en-línea definidos en el archivo "/media/breezingforms/themes/jq.mobile.1.4.4.icons.min.css".
De forma alternativa puede usar imágenes externas en formato PNG a modo de iconos en-línea. El archivo de descarga de themeroller debería contener los estilos deseados para que esto sea factible. Para usarlos, por favor, cree un archivo llamado "jq.mobile.external-png.1.4.4.min.css" en la carpeta "/media/breezingforms/themes/" y copie allí el código de estilo para los archivos. Después copie el directorio "icons-png" localizado en la carpeta "images" de themeroller en la carpeta "/media/breezingforms/themes/images/". A partir de ese momento su tema usará archivos externos PNG en vez de los iconos de estilo en-línea.
Los estilos personalizados de móvil no se alteran después de realizar actualizaciones de BreezingForms, por lo que no tiene que ajustarlos tras instalar cada actualización. Eso si, hay que tener en cuenta que incluso la más pequeña actualización de jQuery mobile podría afectarles. Es por ello que decidimos definir siempre la versión exacta que actualmente se usa en nuestra extensión (tal y como puede ver en los nombres de archivos mencionados anteriormente). En caso de que haya una actualización, por favor, mueva su código css al archivo cuyo nombre coincida con la nueva versión.