jQuery Mobile (II) - El Framework
julio 11, 2012
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:
<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>
- 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
jQuery Mobile - First Look de Giulio Bai
Master Mobile Web Apps with jQuery Mobile de Matt Doyle
Eso es todo por hoy, espero que os vaya enganchando tanto como a mi.
0 comentarios
Sé respetuoso/a, en este blog caben todo tipo de opiniones con respeto y serenidad.