jQuery Mobile (II) - El Framework

20:32




Aquí estamos de nuevo para seguir con la serie de jQuery Mobile. Si te has perdido alguno puedes re-visitarlos en los siguientes enlaces:



Hoy veremos como usar el framework de jQuery Mobile. Doy por sentando que nunca has realizado una aplicación con este framework, luego antes de comenzar a meternos en el ajo, os voy a dar unas direcciones de donde debéis bajar el framework, que luego incrustaremos en nuestras plantillas HTML 5:







· Lo primero que veréis en la web, es que podéis descargar los CDN-Hosted JavaScript y CDN-Hosted CSS o copiar sus direcciones:

- Un CDN es un servidor web público que nos permitirá almacenar nuestro contenido. 

- Las ventajas principales es que se puede usar jQuery Mobile con un CDN sin tener que descargarnos nada, que nuestro servidor tendrá una carga menor y podremos usar la caché para guardar información en caso que el usuario revisite nuestra página.

- La desventaja es que dependemos 100% del servidor, es decir, que si hay alguna caída, nosotros caemos.

- Lo único que tendremos que hacer es copiar y pegar en nuestra cabecera del HTML 5 (como veremos en el ejemplo más adelante), el "Copy-and-Paste Snippet for CDN-hosted files", que en mi caso a día 11 de julio es:


 - También existe una forma de usar siempre la última versión de los CDN, pero yo no la recomiendo, ya que algunas a veces no son del todo estables, o pueden crear incompatibilidades con nuestro código, no obstante es una decisión del "desarrollador".

· La forma de una plantilla HTML 5 con jQuery Mobile:

<!DOCTYPE html>
     <html>
     
     <head>
          <meta charset="utf-8" />
          <title>Titulo </title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
          <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
              <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
     </head>

     <body>

     </body>

     </html>

Notas:
- Esto es una página con jQuery Mobile, Ouh Yeah.
- Como veréis, hemos puesto nuestros links CDN en el <head>
- Es un ViewPort, esto significa que estamos definiendo el área en el cual va a encajar nuestra página. Se pueden modificar los tamaños y las zonas visibles. Daos cuenta que va entre las etiquetas <head> también. Por defecto se le permite al usuario que escale haciendo zoom, pero se puede corregir, poniéndolo así:
     <meta name="viewport" content"width=devide-width, initial-scale=1, user-scalable=no">. Lamentablemente en iOS aún tienen que corregir esto en siguientes versiones, ya que da algunos errores al cambiar la orientación de la pantalla.

· No me voy a meter en camisas de once varas explicando como hacer una aplicación con DreamWeaver y jQuery Mobile, pero si queréis más información pinchad aquí.

· Como otras veces, a continuación os pongo algunos libros recomendados y de los cuales busco inspiración para los artículos:

jQuery Mobile - Up and Running de Maximiliano Firtman



Eso es todo por hoy, espero que os vaya enganchando tanto como a mi.

You Might Also Like

0 comentarios

Sé respetuoso/a, en este blog caben todo tipo de opiniones con respeto y serenidad.

statistics :: ヽ(*・ω・)ノ

Contact Form :: (」゜ロ゜)」