1. Desarrollo de aplicaciones
web móviles

2. ¿Qué es Mozilla?

3. ¿Qué es Mozilla?
Comunidad global que considera que
Internet debe ser un bien para
beneficio de la humanidad, para lo
que es clave promover su apertura e
innovación.

4. Ahora si,
hablemos
de móviles

5. Desarrollo para móviles: Nativo
●
Android
●
iOS

6. Desarrollo para móviles: Nativo
●
Blackberry
●
Symbian
●
Bada
●
Windows Mobile OS / Windows Phone

7. Desarrollo para móviles:
Multiplataforma
●
PhoneGap (Apache Cordova)
●
Sencha Touch
●
AppAcelerator
●
Rhodes

8. Desarrollo para móviles
●
Web móvil
– Un sólo desarrollo
– Muchas plataformas

9. El mercado de los navegadores móviles
http://arstechnica.com/information-technology/2012/08/
firefox-continues-to-gain-as-internet-explorer-chrome-slide/

10. Conoce las capacidades de los
móviles

11. Resoluciones de pantalla y PPI

12. Touchscreens
●
Resistivas
●
Capacitivas

13. Orientación
●
Lanscape vs Portrait

14. Acelerómetro
●
Giroscopio que registra movimientos en
tres ejes

15. Sensor de proximidad
●
Si al llamar y acercar a la oreja la
pantalla se apaga, y al alejarlo la
pantalla se enciende: ¡Felicidades,
tienes uno!

16. Teclado físico

17. GPS

18. Cámara (y QR)

19. Wireless (WiFi, 3G)

20. jQuery Mobile

21. Introducción a jQuery Mobile

22. ¿Cómo me ayuda jQuery Mobile?
1. Una disposición que se ve casi igual en cada móvil.
2. Un diseño adaptable a móviles y escritorios.
3. Proporciona velocidad y funcionalidad.
4. Ayuda a reducir el ancho de banda usado en el móvil.

23. Plataformas soportadas
●
A-grade
– Apple iOS 3.2-5.0
– Android 2.1-2.3, 3.1, 4.0
– Blackberry 6, 7
– Opera Mobile 11.5
– Y muchos más ...

24. Plataformas soportadas
●
B-grade
– Blackberry 5
– Opera Mini (5.0-6.5)
– Nokia Symbian^3

25. ¡Hora de construir!

26. Caso: Servicio de una ruta de transporte
●
Ejemplo: El Metropolitano (Android)

27. ¿Qué vamos a hacer?
●
Estructura de la página principal
●
Pop-ups
●
Formularios
●
Imágenes
●
Mapas

28. Una idea de implementación
●
Una aplicación web móvil
●
Un repositorio en GitHub
●
GitHub Pages
●
juaneladio.github.com/
Metropolitano-Mobile

29. ¿Qué posibilidades adicionales hay?
●
Incrustar video
●
Codificar tu propio video para móviles
●
Crear códigos QR
●
'Minimizar' código CSS y JS
●
Usar emuladores de móviles

30. ¿Qué posibilidades adicionales hay?
●
Construir una aplicación con PhoneGap
y jQuery Mobile.

31. La filosofía de PhoneGap
●
http://phonegap.com/2012/05/09/phonegap-beliefs-goals-
and-philosophy/
“We have two high level goals with PhoneGap:
The web as a first class development platform.
The ultimate purpose of PhoneGap is to cease to exist.”

32. Bibliografía (1)
http://jquerymobile.
com/demos/1.1.1/

33. Bibliografía (2)
●
Sams Teach Yourself jQuery
Mobile in 24 Hours
●
By: Phil Dutson
●
Publisher: Sams
●
Pub. Date: July 13, 2012
●
Pages in Print Edition: 496

34. Y más
●
The Mobile Frontier, by: Rachel Hinman ●
jQuery Mobile First Look, by: Giulio
(Rosenfeld Media)
Bai (Packt Publishing)
●
Programming the Mobile Web, by:
Maximiliano Firtman (O'Reilly Media, Inc.) ●
Pro jQuery Mobile, by: Brad Broulik
●
HTML, CSS, and JavaScript Mobile (Apress)
Development For Dummies, by: William
Harrel (For Dummies)
●
Mobile Design Pattern Gallery,
Color Edition, by: Theresa Neil
●
Sams Teach Yourself HTML5 Mobile
Application Development in 24 Hours, by: (O'Reilly Media, Inc.)
Jennifer Kyrnin (Sams) ●
Designing Mobile Interfaces, by:
jQuery Mobile, by: Jon Reid (O'Reilly Media,
Steven Hoober; Eric Berkman
●
Inc.)
(O'Reilly Media, Inc.)
●
●

35. Y más (2)
●
●
Build Mobile Websites and Apps for
Smart Devices, by: Earle Castledine;
Myles Eftos; Max Wheeler (SitePoint)
●
PhoneGap Essentials: Building Cross-
Platform Mobile Apps, by: John M. Wargo
(Addison-Wesley Professional)
●
Beginning PhoneGap, by: Thomas Myer
(Wrox)
●
PhoneGap Beginner's Guide, by: Andrew
Lunny (Packt Publishing)

36. Mozilla en el
frente móvil

37. Futuras publicaciones de Firefox
Firefox (Estable), Aurora y Mobile
firefox.com/channel

38. Firefox Mobile

39. Firefox OS

40. Mozilla Marketplace

41. https://wiki.mozilla.org/Kilimanjaro
The Kilimanjaro Event

42. ¿Porqué hacemos esto?

43. Mozilla Perú
/mozillaperu