La tendencia informática que marcará los próximos años es el uso de dispositivos móviles. Sin embargo, el desarrollo de aplicaciones para estos dispositivos aún está marcado por la elección de una o más plataformas (Android, iOS, etc.), que obliga a duplicar esfuerzos de programación y a dejar fuera a una parte de los usuarios; pero hay un enfoque diferente: la web de siempre, sólo que actualizada para smartphones y tablets. El taller presentará herramientas y técnicas que se pueden emplear hoy en día para el desarrollo web móvil, y los participantes desarrollarán un prototipo funcional de una aplicación. Al final, se adelantarán las iniciativas actuales de Mozilla en el mercado móvil.

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. Ah, si, construimos Firefox

5. Ahora si,
hablemos
de móviles

6. ¿Qué sistema operativo
tiene tu celular?

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

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

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

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

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

12. Conoce las capacidades de los
móviles

13. Resoluciones de
pantalla y PPI

14. Touchscreens

15. Orientación

16. Acelerómetro

17. Teclado físico

18. GPS

19. Cámara (y QR)

20. Realidad aumentada

21. Wireless (WiFi, 3G)

22. 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!

23. jQuery Mobile

24. ¿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.

25. 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 ...

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

27. ¡Caso práctico!

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

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

30. ¡Hora de construir!

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

32. ¿Qué posibilidades adicionales hay?
●
Incrustar y codificar video
●
Crear códigos QR
●
'Minimizar' código CSS y JS
●
Usar emuladores de móviles

33. ¿Qué posibilidades adicionales hay?
¡Piensa!

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

35. 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.”

36. Datos: Librerías en móviles

37. El desarrollo para plataformas móviles
https://hacks.mozilla.org/2012/08/developer-survey-
results-libraries-and-cross-browser-on-mobile/

38. El desarrollo para plataformas móviles
https://hacks.mozilla.org/2012/08/developer-survey-
results-libraries-and-cross-browser-on-mobile/

39. Bibliografía usada
(¡y recomendada!)

40. Bibliografía (1)
jquerymobile.com
- Docs

41. 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

42. Mozilla en el frente móvil

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

44. Firefox Mobile

45. Firefox OS

46. Device API

47. Firefox Marketplace

48. Mozilla Persona

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

50. Cada vez que usas Firefox o un
producto de Mozilla eres parte de la
comunidad Mozilla

51. Mozilla Perú
/mozillaperu
slideshare.net/juaneladio