Diferencia entre revisiones de «Usuario:Juanda/jqueryMobile/Introducción»

De WikiEducator
Saltar a: navegación, buscar
Línea 22: Línea 22:
  
 
<div class="slide">
 
<div class="slide">
=== Ha pasado antes ===
+
=== Diseño responsivo ===
*Desarrollos para Linux/Unix, Windows y Mac
+
* Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
*Aparece Java
+
* Grid fluido, especificando sus elementos mediante unidades relativas.
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
+
* Imágenes y media también en unidades relativas.
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
+
*Aparecen frameworks como jquery, YUI o Google Web Toolkit
+
*Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
  
=== Tipos de aplicaciones móviles===
+
=== Diseño responsable===
*Aplicaciones aisladas
+
*Se utiliza el criterio "mobile first":
:Alarma
+
:Diseños sencillos
:Gestor de llamadas
+
:Diseños más complejos mediante media queries y siempre con un min-width
:Explorador de archivos
+
: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, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo]
*Aplicaciones basadas en web services
+
*Uso de versiones minified y gzip
:e-mail
+
:calendario
+
:cliente de Twitter
+
:...
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">

Revisión de 08:31 28 feb 2013



¿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:
Web móvil de Ikea
Disney World
Moulin Rouge
Universidad de Stanford
Y muchos más

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

Tipos de desarrollo web

  • Aplicaciones Web accesibles via navegador
  • Web Services
Se usan métodos http
No tiene control de estado
Estructura directorios como URI
Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
Extensa lista de aplicaciones web que permiten consumir Web Services

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.
Requerimientos para desarrollo de programas para dispositivos móviles

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
Navegador en dispositivos móviles

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.