Curso de jQuery Mobile
De WikiEducator
Saltar a: navegación, buscar
jQuery Mobile
Tutorial sobre el framework jQuery Mobile
Introducción | Sintaxis y elementos | PhoneGap/Cordova
Contenido
Introducción
¿Qué es jQuery Mobile
- Framework para crear intefaces de usuario basadas en HTML5
- Construido a partir de la librería jQuery y de jQueryUI
- Orientado especificamente para móviles
- Algunos ejemplos:
Diseño responsivo
- Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
- Grid fluido, especificando sus elementos mediante unidades relativas.
- Imágenes y media también en unidades relativas.
Diseño responsable
- Se utiliza el criterio "mobile first":
- Diseños sencillos
- Diseños más complejos mediante media queries y siempre con un min-width
- Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
- Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
- Uso de versiones minified y gzip
Ejemplo CSS Mobile First
- Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
- Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
- Aplicaciones Web accesibles via navegador
/* Start with core styles outside of a media query that apply to mobile and up */ /* Global typography and design elements, stacked containers */ body { font-family: Helvetica, san-serif; } H1 { color: green; } a:link { color:purple; } /* Stack the two content containers */ .main, .sidebar { display:block; width:100%; } /* First breakpoint at 576px */ /* Inherits mobile styles, but floats containers to make columns */ @media all and (min-width: 36em){ .main { float: left; width:60%; } .sidebar { float: left; width:40%; } } /* Second breakpoint at 800px */ /* Adjusts column proportions, tweaks base H1 */ @media all and (min-width: 50em){ .main { width:70%; } .sidebar { width:30%; } /* You can also tweak any other styles in a breakpoint */ H1 { color: blue; font-size:1.2em } }
Tipo de aplicaciones Web con PhoneGap
- PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:
- Camara, GPS, libreta de teléfonos....
- La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
- Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
Necesidades en desarrollos web para móviles
- Desarrollo de la aplicación para varias plataformas
- La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
- Un usuario puede migrar de SO incluso utilizar varios
- La experiencia de usuario podría variar entre dispositivos en función de las características y capacidades de los dispositivos
- Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
PhoneGap
- Se basa en la parte común de todos los dispositivos móviles: el navegador
- Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
- HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
- CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
- Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit
Webviews
- Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
- Estos navegadores embebidos es lo que se conoce como webview
- Cada una de las pantallas de nuestra aplicación será un webview.
- Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
- Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.