1. Desarrollos de Aplicaciones
Móviles con Tecnologías Web
Julio Alfaro
@guateRikum

2. Herramientas Web
Herramientas con las que contamos

3. Responsive Web Design (RWD)
• Media queries :Consisten en un
media type y cero o mas expresiones
que validan las condiciones de el
medio en el que se despliega.
• Ej :
ó

4. Responsive Web Design (RWD)
• JavaScript no obstrusivo : Utilizando un diseño
semántico en el HTML, puede acomodarse la
información de tal forma que pueda apreciarse
completamente sin importar el tamaño.
• Detección de características : gracias a librerías
de javaScript, podemos abstraer los distintos
browser y activar ciertas características
especificas de dispositivo como el touch.

5. Responsive Web Design (RWD)
• Optimizar primero para móviles : Esta
directiva se ha hecho importante desde el
momento en que los móviles superaron a las
computadoras.

6. Ejemplos de RWD
• The Boston Globe
• Andersson-Wise
• Sphero
• Css-tricks
• Grey Goose
• Lancaster University
• HeathLife

7. Ejemplos de frameworks
de javascript
• jQuery Mobile
• Sencha Touch
• jQPad

8. Ejemplos de frameworks con css para
RWD
• Less
• Fundation 3
• Golden Grid System
• Fluid baseline Grid
• 320 and Up

9. HTML5
• Un nuevo estándar, que contiene una colección
de APIs, los cuales permiten que sin ningun plug-
in extra los browsers puedan tener ciertas
caracteristicas :
– Local Storage
– WebWorkers
– Canvas
– Web Socket
– WebGL
* Este standard aun esta en estado de draft

10. Pollyfills
• Son remiendos que se han desarrollado para
que los browser que no tienen una acción
para manejar un beneficio de HTML5 lo
puedan emular.
• El proyecto Modernizr, tiene una gran
cantidad de Pollyfills para algunas features de
HTML5

11. CSS3
• Dado a que no todos los browsers han
actualizado el uso de las propiedades nuevas
que nos de el standard de css3
• Aun se utilizan los prefijos –webkit y –moz y la
funcionalidad puede diferir en ambos, un
proyecto que nos puede ayudar a manejar
esto es css3please.

12. ¿Y que puedo hacer con
móviles?

13. Hacer una pagina que se navegue vía
el Browser del dispositivo

14. ¿Que tienen en común?

15. En efecto …

16. Y si unimos lo mejor de dos
mundos??

17. Soluciones Hibridas entre Desarrollo
Web y HTML
• Y surgieron aplicaciones con acceso a los
periféricos nativos de los móviles, pero con la
versatilidad y el beneficio de la programación
Web. Entre ellas :
– PhoneGap
– Appspresso
– Appfurnace
– Appcelerator Titanium

18. Veamos un ejemplo
Guia inicial para Android