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 es clave promover su apertura e
innovación.
Ah, si, construimos Firefox
Ahora si,
hablemos
de móviles
¿Qué sistema operativo
tiene tu celular?
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
●
Rhodes
Desarrollo para móviles
●
Web móvil
– Un sólo desarrollo
– Muchas plataformas
El mercado de los navegadores móviles
http://arstechnica.com/information-technology/2012/08/
firefox-continues-to-gain-as-internet-explorer-chrome-slide/
Conoce las capacidades de los
móviles
Resoluciones de
pantalla y PPI
Touchscreens
Orientación
Acelerómetro
Teclado físico
GPS
Cámara (y QR)
Realidad aumentada
Wireless (WiFi, 3G)
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!
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 escritorios.
3.Proporciona velocidad y funcionalidad.
4.Ayuda a reducir el ancho de banda usado en el móvil.
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 ...
Plataformas soportadas
●
B-grade
– Blackberry 5
– Opera Mini (5.0-6.5)
– Nokia Symbian^3
¡Caso práctico!
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
¡Hora de construir!
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
¿Qué posibilidades adicionales hay?
●
Incrustar y codificar video
●
Crear códigos QR
●
'Minimizar' código CSS y JS
●
Usar emuladores de móviles
¿Qué posibilidades adicionales hay?
¡Piensa!
¿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 high level goals with PhoneGap:
The web as a first class development platform.
The ultimate purpose of PhoneGap is to cease to exist.”
Datos: Librerías en móviles
El desarrollo para plataformas móviles
https://hacks.mozilla.org/2012/08/developer-survey-
results-libraries-and-cross-browser-on-mobile/
El desarrollo para plataformas móviles
https://hacks.mozilla.org/2012/08/developer-survey-
results-libraries-and-cross-browser-on-mobile/
Bibliografía usada
(¡y recomendada!)
Bibliografía (1)
jquerymobile.com
- Docs
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
Mozilla en el frente móvil
Futuras publicaciones de Firefox
Firefox (Estable), Aurora y Mobile
firefox.com/channel
Firefox Mobile
Firefox OS
Device API
Firefox Marketplace
Mozilla Persona
The Kilimanjaro Event
https://wiki.mozilla.org/Kilimanjaro
Cada vez que usas Firefox o un
producto de Mozilla eres parte de la
comunidad Mozilla

Aplicaciones moviles en mozilla