Desarrollo de aplicaciones web mviles

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

Ahora si, hablemos de mviles

Desarrollo para mviles: Nativo

Android iOS

Desarrollo para mviles: Nativo

Blackberry Symbian Bada Windows Mobile OS / Windows Phone

PhoneGap (Apache Cordova) Sencha Touch AppAcelerator Rhodes

Desarrollo para mviles: Multiplataforma

Desarrollo para mviles

Web mvil

Un slo desarrollo Muchas plataformas

El mercado de los navegadores mviles

http://arstechnica.com/information-technology/2012/08/ firefox-continues-to-gain-as-internet-explorer-chrome-slide/

Conoce las capacidades de los mviles

Resoluciones de pantalla y PPI

Touchscreens

Resistivas Capacitivas

Orientacin

Lanscape vs Portrait

Acelermetro

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 enciende: Felicidades, tienes uno!

Teclado fsico

GPS

Cmara (y QR)

Wireless (WiFi, 3G)

jQuery Mobile

Introduccin a jQuery Mobile

Cmo me ayuda jQuery Mobile?

1. Una disposicin que se ve casi igual en cada mvil. 2. Un diseo adaptable a mviles y escritorios. 3. Proporciona velocidad y funcionalidad. 4. Ayuda a reducir el ancho de banda usado en el mvil.

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

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 pgina principal Pop-ups Formularios Imgenes Mapas

Una idea de implementacin

Una aplicacin web mvil Un repositorio en GitHub GitHub Pages juaneladio.github.com/ Metropolitano-Mobile

Qu posibilidades adicionales hay?

Incrustar video Codificar tu propio video para mviles Crear cdigos QR 'Minimizar' cdigo CSS y JS Usar emuladores de mviles

Qu posibilidades adicionales hay?

Construir una aplicacin con PhoneGap y jQuery Mobile.

La filosofa de PhoneGap

http://phonegap.com/2012/05/09/phonegap-beliefs-goalsand-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.

Bibliografa (1)
http://jquerymobile. com/demos/1.1.1/

Bibliografa (2)

Sams Teach Yourself jQuery Mobile in 24 Hours By: Phil Dutson Publisher: Sams Pub. Date: July 13, 2012 Pages in Print Edition: 496

Y ms

The Mobile Frontier, by: Rachel Hinman (Rosenfeld Media) Programming the Mobile Web, by: Maximiliano Firtman (O'Reilly Media, Inc.) HTML, CSS, and JavaScript Mobile Development For Dummies, by: William Harrel (For Dummies) Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours, by: Jennifer Kyrnin (Sams) jQuery Mobile, by: Jon Reid (O'Reilly Media, Inc.)

jQuery Mobile First Look, by: Giulio Bai (Packt Publishing) Pro jQuery Mobile, by: Brad Broulik (Apress) Mobile Design Pattern Gallery, Color Edition, by: Theresa Neil (O'Reilly Media, Inc.) Designing Mobile Interfaces, by: Steven Hoober; Eric Berkman (O'Reilly Media, Inc.)

Y ms (2)

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

Mozilla en el frente mvil

Futuras publicaciones de Firefox

Firefox (Estable), Aurora y Mobile firefox.com/channel

Firefox Mobile

Firefox OS

Mozilla Marketplace

https://wiki.mozilla.org/Kilimanjaro

The Kilimanjaro Event

Porqu hacemos esto?

Mozilla Per /mozillaperu