Desarrollos de Aplicaciones Móviles con Tecnologías Web

Julio Alfaro@guateRikum

Herramientas WebHerramientas con las que contamos

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 :

ó

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.

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.

Ejemplos de RWD

• The Boston Globe • Andersson-Wise• Sphero• Css-tricks• Grey Goose• Lancaster University• HeathLife

Ejemplos de frameworksde javascript

• jQuery Mobile• Sencha Touch• jQPad

Ejemplos de frameworks con css para RWD

• Less• Fundation 3• Golden Grid System• Fluid baseline Grid• 320 and Up

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

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

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.

¿Y que puedo hacer con móviles?

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

¿Que tienen en común?

En efecto …

Y si unimos lo mejor de dos mundos??

Soluciones Hibridas entre DesarrolloWeb 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

Veamos un ejemplo

Guia inicial para Android