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