X

Introducción a jQuery Mobile

En este artículo damos una visión general del framework jQuery Mobile, explicando su función, uso y requerimientos.

Haciendo uso de jQuery Mobile, uno de los frameworks más prácticos y sencillos para el desarrollo de aplicaciones, explicaremos cómo crear sitios adaptados y optimizados para ser desplegados en dispositivos móviles con un mínimo esfuerzo.

A lo largo de este manual, estudiaremos diversos temas que nos ayudarán a entrar de lleno al desarrollo web para móviles, desde la estructuración de un HTML simple hasta sitios totalmente optimizados a través de jQuery Mobile.

Haremos uso de formas, eventos, estilos y diseños para construir nuestras aplicaciones móviles compatibles con dispositivos táctiles como iPhone, iPad, Android y Blackberry.

Utilizaremos HTML para la creación de páginas, estructuraremos los sitios para la navegación en dispositivos móviles, elaboraremos formularios interactivos, convertiremos a versiones móviles los sitios web que hayamos desarrollado para escritorio, personalizaremos la interfaz de nuestro sitio y usaremos aplicaciones nativas.

¿Qué es jQuery Mobile?

jQuery Mobile es un framework con relativamente poco tiempo de vida, fue apenas hace dos años cuando el creador de jQuery, John Resig, dio el banderazo de partida para iniciar con el desarrollo del proyecto, es durante este tiempo que se ha venido puliendo su funcionalidad hasta llegar a la versión estable que fue entregada en abril de 2012.

El propósito inicial del framework, fue buscar soluciones para lograr una mejor estructura y manejo en las interfaces de usuario, como tal la librería provee las herramientas necesarias para convertir código HTML y CSS en sitios móviles amigables y accesibles.

Esto se podrá apreciar claramente en esta primera entrega del manual, podremos tomar páginas previamente elaboradas con HTML puro, después agregar las líneas necesarias para cargar la librería móvil, y de esta manera la página será automáticamente transformada a un versión amigable y adaptable a dispositivos móviles.

A diferencia de otros frameworks, jQuery Mobile centra su atención en el manejo de HTML, a tal grado que no es necesario incluir una sola línea de JavaScript para definir las versiones móviles de los layouts de las páginas.

Factores como este, convierten al framework en un recurso muy amigable para aquellas personas que no tienen tanta experiencia desarrollando fuera de HTML, además de que agrega rápidez a la conversión de proyectos completos, ya que cualquier desarrollador con conocimientos de HTML puede adaptar, en tan solo unas horas, un código para que se despliegue en dispositivos móviles.

jQuery Mobile provee la facilidad de desarrollar aprovechando la propiedad táctil de los dispositivos, lo cual es fundamental en la actualidad ya que la mayoría de estos dispositivos utilizan dicho mecanismo para que el usuario interactúe con las aplicaciones.

Además de esto, el framework se encarga de lidiar con problemas con los que el diseñador se encuentra regularmente, como alargar botones que lucen muy pequeños, convertir links en listas de navegación y dividir el contenido en páginas virtuales.

Conocimientos previos

Antes de empezar a desarrollar con jQuery Mobile es bueno tener una base sobre la cual empezar a trabajar, es muy probable que ya cuentes con las habilidades y conocimientos necesarios, pero en caso de no ser así te recomendamos que empieces por aprender correctamente el desarrollo de páginas web mediante HTML puro.

Si tienes conocimientos de CSS y JavaScript será un claro plus que te ayudará a realizar sitios más elaborados, pero no es un requerimiento para estudiar este manual. Si bien jQuery Mobile utiliza mucho CSS y JavaScript en su funcionamiento, estas llamadas no son aplicadas directamente por el desarrollador, ya que la mayoría funcionan en el core de la aplicación.

Si antes de empezar el manual te invade la curiosidad y quieres ver resultados en aplicaciones desarrolladas con jQuery Mobile, puedes acudir a JQM Gallery, un sitio con una colección de proyectos realizados con este framework, ejemplos que nos sirven para ver en acción las propiedades que usaremos.

Si por otro lado deseas echar una hojeada a los códigos y bases de jQuery Mobile, puedes ingresar a http://jquerymobile.com/demos/1.0/ para consultar lo que nos ofrece la documentación oficial del framework, en caso de que surjan dudas que este manual no pueda contestar, te recomendamos recurras a ese sitio en busca de respuestas.

En caso de necesitar más opiniones y comentarios, jQuery Mobile cuenta con una comunidad detrás del proyecto, puedes acudir a sitios como http://forum.jquery.com/jquery-mobile, para encontrar temas relacionados a aplicaciones y desarrollos, además de ser un buen sitio para conocer problemas comunes y evitar caer en los errores que otros diseñadores ya cometieron. Si a lo largo de tus desarrollos con el framework te encuentras con algún problema y puedes resolverlo, puedes contribuir ayudando a los demás a resolver casos similares.

Conclusión

El manual que estamos a punto de comenzar es para aquellos diseñadores que buscan adoptar el desarrollo móvil y ampliar sus habilidades más allá de la elaboración de páginas web y aplicaciones de escritorio.

Para poder empezar a desarrollar no se necesita más que tu disposición, como ya pudimos apreciar, para poder comenzar el conocimiento sobre programación puede ser muy básico, basta con saber como utilizar HTML y el resto puede ser manejado con el framework.

No existen requerimientos especiales, el desarrollo con jQuery Mobile es totalmente gratuito y no es necesario adquirir alguna clase de paquete o editor especial para poder crear aplicaciones, si cuentas con algún IDE especial que te ayude a desarrollar más rápido que mejor, pero si no es así basta con tener un editor de texto.

modificado el 15 marzo, 2018 21:17

Daniel Ernesto Navarro Herrera: Lleva trabajando como desarrollador web desde hace más de 10 años. Es un apasionado del código, habiendo tocado todos los palos, especialmente PHP, MySQL, JavaScript, incluyendo frameworks y librerías como jQuery, Symfony, CakePHP...

Ver comentarios (2)

Artículos relacionados