Desarrollo de aplicaciones      web móviles
¿Qué es Mozilla?
¿Qué es Mozilla?Comunidad global que considera que  Internet debe ser un bien para beneficio de la humanidad, para lo que ...
Ahora si,hablemosde móviles
Desarrollo para móviles: Nativo●    Android●    iOS
Desarrollo para móviles: Nativo●    Blackberry●    Symbian●    Bada●    Windows Mobile OS / Windows Phone
Desarrollo para móviles:           Multiplataforma●    PhoneGap (Apache Cordova)●    Sencha Touch●    AppAcelerator●    Rh...
Desarrollo para móviles●    Web móvil    –   Un sólo desarrollo    –   Muchas plataformas
El mercado de los navegadores móvileshttp://arstechnica.com/information-technology/2012/08/firefox-continues-to-gain-as-in...
Conoce las capacidades de los           móviles
Resoluciones de pantalla y PPI
Touchscreens●    Resistivas●    Capacitivas
Orientación●    Lanscape vs Portrait
Acelerómetro●    Giroscopio que registra movimientos en    tres ejes
Sensor de proximidad●    Si al llamar y acercar a la oreja la    pantalla se apaga, y al alejarlo la    pantalla se encien...
Teclado físico
GPS
Cámara (y QR)
Wireless (WiFi, 3G)
jQuery Mobile
Introducción a jQuery Mobile
¿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 escr...
Plataformas soportadas●    A-grade    –   Apple iOS 3.2-5.0    –   Android 2.1-2.3, 3.1, 4.0    –   Blackberry 6, 7    –  ...
Plataformas soportadas●    B-grade    –   Blackberry 5    –   Opera Mini (5.0-6.5)    –   Nokia Symbian^3
¡Hora de construir!
Caso: Servicio de una ruta de transporte ●     Ejemplo: El Metropolitano (Android)
¿Qué vamos a hacer?●    Estructura de la página principal●    Pop-ups●    Formularios●    Imágenes●    Mapas
Una idea de implementación●    Una aplicación web móvil●    Un repositorio en GitHub●    GitHub Pages●    juaneladio.githu...
¿Qué posibilidades adicionales hay?●    Incrustar video●    Codificar tu propio video para móviles●    Crear códigos QR●  ...
¿Qué posibilidades adicionales hay?●     Construir una aplicación con PhoneGap     y jQuery Mobile.
La filosofía de PhoneGap●    http://phonegap.com/2012/05/09/phonegap-beliefs-goals-    and-philosophy/    “We have two hig...
Bibliografía (1)        http://jquerymobile.        com/demos/1.1.1/
Bibliografía (2)     ●         Sams Teach Yourself jQuery         Mobile in 24 Hours     ●         By: Phil Dutson     ●  ...
Y más●    The Mobile Frontier, by: Rachel Hinman         ●                                                       jQuery Mo...
Y más (2)●●    Build Mobile Websites and Apps for    Smart Devices, by: Earle Castledine;    Myles Eftos; Max Wheeler (Sit...
Mozilla en elfrente móvil
Futuras publicaciones de FirefoxFirefox (Estable), Aurora y Mobile       firefox.com/channel
Firefox Mobile
Firefox OS
Mozilla Marketplace
https://wiki.mozilla.org/KilimanjaroThe Kilimanjaro Event
¿Porqué hacemos esto?
Mozilla Perú/mozillaperu
Upcoming SlideShare
Loading in …5
×

Desarrollo de aplicaciones web móviles

701 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
701
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desarrollo de aplicaciones web móviles

  1. 1. Desarrollo de aplicaciones web móviles
  2. 2. ¿Qué es Mozilla?
  3. 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. 4. Ahora si,hablemosde móviles
  5. 5. Desarrollo para móviles: Nativo● Android● iOS
  6. 6. Desarrollo para móviles: Nativo● Blackberry● Symbian● Bada● Windows Mobile OS / Windows Phone
  7. 7. Desarrollo para móviles: Multiplataforma● PhoneGap (Apache Cordova)● Sencha Touch● AppAcelerator● Rhodes
  8. 8. Desarrollo para móviles● Web móvil – Un sólo desarrollo – Muchas plataformas
  9. 9. El mercado de los navegadores móvileshttp://arstechnica.com/information-technology/2012/08/firefox-continues-to-gain-as-internet-explorer-chrome-slide/
  10. 10. Conoce las capacidades de los móviles
  11. 11. Resoluciones de pantalla y PPI
  12. 12. Touchscreens● Resistivas● Capacitivas
  13. 13. Orientación● Lanscape vs Portrait
  14. 14. Acelerómetro● Giroscopio que registra movimientos en tres ejes
  15. 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. 16. Teclado físico
  17. 17. GPS
  18. 18. Cámara (y QR)
  19. 19. Wireless (WiFi, 3G)
  20. 20. jQuery Mobile
  21. 21. Introducción a jQuery Mobile
  22. 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. 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. 24. Plataformas soportadas● B-grade – Blackberry 5 – Opera Mini (5.0-6.5) – Nokia Symbian^3
  25. 25. ¡Hora de construir!
  26. 26. Caso: Servicio de una ruta de transporte ● Ejemplo: El Metropolitano (Android)
  27. 27. ¿Qué vamos a hacer?● Estructura de la página principal● Pop-ups● Formularios● Imágenes● Mapas
  28. 28. Una idea de implementación● Una aplicación web móvil● Un repositorio en GitHub● GitHub Pages● juaneladio.github.com/ Metropolitano-Mobile
  29. 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. 30. ¿Qué posibilidades adicionales hay?● Construir una aplicación con PhoneGap y jQuery Mobile.
  31. 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. 32. Bibliografía (1) http://jquerymobile. com/demos/1.1.1/
  33. 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. 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 (OReilly 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: (OReilly Media, Inc.) Jennifer Kyrnin (Sams) ● Designing Mobile Interfaces, by: jQuery Mobile, by: Jon Reid (OReilly Media, Steven Hoober; Eric Berkman● Inc.) (OReilly Media, Inc.)● ●
  35. 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 Beginners Guide, by: Andrew Lunny (Packt Publishing)
  36. 36. Mozilla en elfrente móvil
  37. 37. Futuras publicaciones de FirefoxFirefox (Estable), Aurora y Mobile firefox.com/channel
  38. 38. Firefox Mobile
  39. 39. Firefox OS
  40. 40. Mozilla Marketplace
  41. 41. https://wiki.mozilla.org/KilimanjaroThe Kilimanjaro Event
  42. 42. ¿Porqué hacemos esto?
  43. 43. Mozilla Perú/mozillaperu

×