Introducción a JQuery Mobile

Publicado el


JQuery es un Framework Javascript, ampliamente usado por muchos desarrolladores de sitios webs. Este Framework sirve para incrementar la velocidad de desarrollo con Javascript, encapsulando muchas tareas comunes que se realizan cuando usamos el lenguaje JavaScript.
Por otro lado JQuery Mobile consiste en un framework javascript para creación de sitios webs optimizados para los dispositivos móviles más populares. Agrega una capa más al JQuery tradicional y busca suplir algunas necesidades que los programadores de dispositivos móviles padecen.
Antes de que aparecieran estas herramientas, los desarrolladores tení­an casi que programar para cada dispositivo en concreto. Esto provocaba muchas horas de trabajo para la creación y mantenimiento de estos sitios.
Con la aparición de JQuery Mobile, nos abstraernos de la lógica especí­fica de cada dispositivo y de este modo los programadores podemos dedicarnos a lo que realmente importa.
JQuery Mobile funciona bien. Si bien se trata de un proyecto muy nuevo, con pocos meses de vida, ya está dando mucho que hablar, afianzándose cada dí­a más como el framework estrella para la creación de sitios webs para teléfonos y tablets.

Caracterí­sticas de JQuery Mobile


Facilidad de uso: Otorga mucha facilidad para el desarrollo de interfaces de usuario de dispositivos móviles.
Soporte HTML5 markup-driven: Cuando utilicemos este framework, nos olvidaremos de tipear código JavaScript. Gracias al uso de etiquetas HTML, que luego en el momento de renderizado serán procesadas por Jquery Mobile.
Múltiples plataformas soportadas: JQuery soporta muchos dispositivos y tecnologí­as, como ser: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc.
Tamaño reducido: Toda la librerí­a comprimida pesa menos de 12K.
Temas personalizados: El framework expone algunas utilidades para el manejo de temas y también es posible crear temas propios.

Comenzando a trabajar con JQuery Mobile: Inclusión de librerí­as

Para trabajar con este framework, necesitamos incluir 3 archivos en la sección head de nuestro documento HTML. Los archivos son los siguientes:
– Archivo de estilos (CSS) de Jquery Mobile ”“ jquery.mobile-1.0a3.css
– Archivo JS de JQuery (base) ”“ jquery-1.5.1.min.js
– Archivo JS de JQuery Mobile ”“ jquery.mobile-1.0a3.min.js
Una vez que hayamos hecho esto, podemos empezar a trabajar con el Framework.

Estructura de páginas en JQuery Mobile

Al momento de diseñar con esta herramienta, una página para dispositivos móviles, debemos adaptarnos al nuevo concepto de estructura de páginas webs de Jquery Mobile.
A veces asociamos cada página que vemos en Internet a un archivo diferente en el servidor, pero con Jquery Mobile esto no se cumple, porque un archivo puede contener varias páginas. Para ayudarnos a crear paginas y secciones debemos utilizar los atributos data-*.
A continuación, te mostramos la estructura básica de una página, utilizando JQuery Mobile.

En un documento HTML, pueden existir varias páginas (data-role=»page») y cada página tiene una sección de encabezado (data-role=»header»), otra para el contenido (data-role=»content”) y otra para el pie (data-role=»footer»).

Enlaces internos

Como ya mencionamos, un documento HTML puede contener varias páginas. Para realizar enlaces internos, necesitamos nombrar cada bloque div con un identificador único, por ejemplo “principal”. Este identificador sirve para realizar los enlaces a las diferentes paginas, por ejemplo: “…href=”#seccion2…”.
Para darnos una mejor idea: ¿qué mejor que ver algo de código? A continuación, vemos un documento html con 3 secciones tipo “page”.

Screenshots

Conclusión

En este pequeño tutorial, hemos intentado ver algunos conceptos básicos de Jquery Mobile, focalizándonos en la estructura de una página y en los enlaces. Pero este framework, ofrece muchí­simo más todaví­a. Por ejemplo, existen funciones integradas para ocultar y mostrar contenidos, soporte para formularios, soporte de AJAX, etc.
Las pruebas que aparecen en esta guí­a, además de ser realizadas en una computadora de escritorio, también fueron visualizadas en un teléfono con Android 2.2 y la verdad es que también funciona muy bien.
JQuery Mobile promete mucho, y aunque tenga pocos meses de vida, ya se lo ve muy estable.
A un programador con conocimientos en JQuery trabajar con Jquery Mobile, le resultará bastante sencillo.
Este framework es altamente recomendable si estás desarrollando sitios para dispositivos. Al menos deberí­as darle un vistazo. Hazme caso, ¡te gustará!
Fuente: ibm.com
Web: jquerymobile.com

3 comentarios en “Introducción a JQuery Mobile

  1. Estoy haciendo una pagina  de anuncios clasificados , y quieria implementar solo una funcion  , de orientationchange para que depende de la rotacion del movil cambia un poco el diseno.Pues he consegido , pero todos los enlaces dejaron de funcionar.No entiendo porque y no se como puedo solucionarlo.

Comentarios están cerrados.