Hola Mundo con jQuery Mobile

09/May/2012 Desarrollo Móvil , , , , , , 4 Comentarios

jQuery Mobile es un framework que nos permite desarrollar aplicaciones móviles que se ejecuten en múltiples plataformas de una forma muy sencilla. jQuery Mobile está basado en el framework jQuery.

Vamos a ir construyendo una serie de ejemplos para explicar cómo funciona jQuery Mobile y, como no, el primero de ellos tenía que ser el Hola Mundo con jQuery Mobile.

Lo primero que tenemos que hacer es descargarnos el framework jQuery Mobile. Para ello deberemos de descargar 2 archivos:

O bien su versión reducida para un entorno de producción:

Además vamos a necesitar el framework jQuery, con el que puedes empezar mediante el Hola Mundo con jQuery o leyéndote todos los artículos de jQuery. Es importante que sepas que se necesitan las versiones jQuery 1.6.4 o jQuery 1.7.1 para utilizarlo junto a jQuery Mobile.

jQuery Mobile nos permite construir página web, las cuales van a ser páginas HTML5. Ya que jQuery Mobile aprovecha los atributos data-* de HTML5 para poder construir las aplicaciones de una forma estandar. Así, que al final lo que tenemos es una página web. Y lo más importante, jQuery Mobile, insertará el código necesario de una forma no intrusiva.

Lo primero que tenemos que hacer a la hora de definir nuestra página web es, como te puedes imaginar, instanciar las librerías que nos hemos descargado.

  1. <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
  2. <script src="jquery-1.7.1.min.js"></script>
  3. <script src="jquery.mobile-1.1.0.min.js"></script>

Una vez instanciadas las librerías vamos a ver como se estructura la página web para que pueda ser visualizada en un móvil. Es decir, vamos a ver qué atributos data-* tenemos que utilizar.

El primero será data-role="page". Este atributo habrá que darselo a la estructura que nos defina lo que es la página. Es decir, vamos a crear un bloque DIV con dicho atributo. Dicho bloque representará la página.

  1. <div data-role="page">
  2. <!-- Pagina de jQuery Mobile -->
  3. </div>

Lo siguiente será poner el contenido. Es decir, nuestro Hola Mundo con jQuery Mobile. Para ello tenemos otro atributo. Es este caso es data-role="content". Este atributo se lo damos a otro elemento de bloque, es decir, a otro DIV.

  1. <div data-role="page">
  2. <div data-role="content">
  3. <p>Mi primera p&aacute;gina web con jQuery Mobile.</p>
  4. </div>
  5. </div>

Aunque con esto podríamos tener "acabado" nuestro Hola Mundo con jQuery Mobile vamos a echar un vistazo a otros dos atributos. Estos serán los que nos van a servir para definir una cabecera y un pie de página. En este caso serán los atributos data-role="header" y data-role="footer" respectivamente. Y como te puedes imagina van a otros elementos de bloque.

Así que utilizando estos dos nuevos elementos, nuestro código final nos quedaría de la siguiente forma:

  1. <div data-role="page">
  2. <div data-role="header">
  3. <h1>Hola Mundo en jQuery Mobile</h1>
  4. </div>
  5. <div data-role="content">
  6. <p>Mi primera p&aacute;gina web con jQuery Mobile.</p>
  7. </div>
  8. <div data-role="footer">
  9. <p>&copy;2012 - Linea de Codigo</p>
  10. </div>
  11. </div>

Ya tenemos nuestro Hola Mundo con jQuery Mobile. Solo nos queda probarlo en alguna de las platafomas que soporta el framework jQuery Mobile:

  • iOS5 – iPhone e iPad
  • Android 2.2 y 2.3
  • Tabletas Android 3.x (Honeycomb)
  • Android 4.x (ICS)
  • Chrome para Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3

O simplemente, abriendolo en el navegador. 😉

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Hola Mundo con jQuery Mobile”

Víctor Cuervo

Jessica

Gracias Victor, conozco ese asunto; tampoco me parece muy simpático XD
Quisiera que el control de la visualización estuviera centralizado y
también los eventos; eso sería, creo, OOP, y no está disponible aún 🙁

Víctor Cuervo

Víctor Cuervo

@Jessica, tienes que hacer diferentes CSS para los diferentes dispositivos. Hay que utilizar una cosa que se llama media quereis. A ver si publicamos algo al respecto con ejemplo incluido. 😀

Víctor Cuervo

Jessica

Como recurso me parece buenísimo.
Lo que encuentro difícil es adaptar la imagen -es decir,
editar el CSS- para que no sean todos muy parecidos…

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*