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 Mobilefirefox.com/channel

Firefox Mobile

Firefox OS

Device API

Firefox Marketplace

Mozilla Persona

The Kilimanjaro Eventhttps://wiki.mozilla.org/Kilimanjaro

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

comunidad Mozilla

Mozilla Perú

/mozillaperu

slideshare.net/juaneladio