|
|
| 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 07:31 28 feb 2013
jQuery Mobile
Tutorial sobre el framework jQuery Mobile
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
- 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.
