1. ¿Por qué programar aplicaciones para smartphones? • ¿Qué es un smartphone o teléfono inteligente? • ¿Qué es una aplicación para smartphone? Introducción Francesc Pérez Fdez (Nokia) (Google) (Apple) BlackBerry OS (RIM) Windows Phone (Microsoft) (Samsung) (HP) Mobile broadband: 3G, 4G Data Network Touch screen Web Browsers Phone Data
14
Embed
Introducción al desarrollo de aplicaciones para dispositivos móviles
Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_0_intro.html
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1. ¿Por qué programar aplicaciones para smartphones?
• ¿Qué es un smartphone o teléfono inteligente?
• ¿Qué es una aplicación para smartphone?
Introducción Francesc Pérez Fdez
(Nokia)
(Google)
(Apple) BlackBerry OS (RIM)
Windows Phone (Microsoft)
(Samsung)
(HP) Mobile broadband: 3G, 4G Data Network
Touch screen
Web Browsers
Phone Data
1. ¿Por qué programar aplicaciones para smartphones? • Según MobiThinking:
Introducción Francesc Pérez Fdez
1. ¿Por qué programar aplicaciones para smartphones? • Según ICrossing:
Introducción Francesc Pérez Fdez
1. ¿Por qué programar aplicaciones para smartphones? • Según MobiThinking:
Introducción Francesc Pérez Fdez
2. Tipos de aplicaciones para smartphones
• Una aplicación web es un espacio web específicamente optimizado para un dispositivo móvil. La aplicación se construye con tecnología web estándar (HTML5, Javascript y CSS3). No necesita estar instalada en dispositivo móvil:
ü Funciona en cualquier dispositivo que tenga un navegador web ü No puede conseguir efectos sofisticados en la interfaz de usuario
• Una aplicación nativa ha de estar instalada en el dispositivo móvil y está escrita en algún lenguaje de programación compilado:
ü La aplicación sólo funcionará en una plataforma (sistema operativo) ü La aplicación se desarrolla con el lenguaje de programación determinado por la plataforma ü Interfaz de usuario optimizada
• Una aplicación híbrida se construye con tecnología web estándar (HTML5, Javascript y CSS3) y utiliza alguna plataforma adicional, como PhoneGap, para adquirir características próximas a las aplicaciones nativas :
ü La aplicación sólo funcionará en una plataforma (sistema operativo) ü Interfaz de usuario optimizada
Introducción Francesc Pérez Fdez
PhoneGap
2. Tipos de aplicaciones para smartphones
• Aplicación NATIVA vs Aplicación web
• ¿Qué es una web app?
• Navegadores web para dispositivos móviles y su renderizado
• Navegadores web para smartphone y APIs
• Lenguajes y plataformas de programación de las aplicaciones nativas:
Introducción Francesc Pérez Fdez
2. Tipos de aplicaciones para smartphones
• Características de las aplicaciones
Introducción Francesc Pérez Fdez
NATIVE APP HYBRID APP (PHONEGAP)
WEB APP
Device Access All native APIs Native APIs Partial native APIs
Speed Very Fast Very Fast Fast
Development Cost Expensive Reasonable Reasonable
App Store Available Available Not Available
Approval Process Mandatory Low Overhead None
Open System Single-platform Multi-Platform Multi-Platform
Maintaining Expensive Reasonable Cheap
Download Yes No No
Connection No (Offline) Required Required
Updates Yes
Yes
Immediate
3. Ecosistema de aplicaciones híbridas y webs para smartphones
Introducción Francesc Pérez Fdez
Hybrid
APP
M
obile
OS
Frameworks: SDK Android (.apk)
Plugins: phonegap
Web APP External libraries: jquery,
jquerymobile, googlemaps,…
Internal libraries: JS APIs
HTML5
CSS3 JS Web
Workers
APIs
Drag and Drop
Canvas Audio/Video
LOCAL DATA
PHONE DATA
EXTERNAL DATA
Web
Bro
wse
r (H
TML5
, CSS
3, J
S co
mpa
tible
)
OS APIs
M
obile
OS
LOCAL DATA
Limited
PHONE DATA
Limited
EXTERNAL DATA
Limited
OS APIs Limited
Offline Local storage
Session storage
IndexedDB File
Ajax Web Sockets
Cross Document Messaging
Server-Sent Events
4. Herramientas de implementación de aplicaciones web e híbridas
• Pasos en el diseño de la aplicación: ü Planificación temporal y de recursos ü Requisitos: tipos de usuario, hardware mínimo, definición de la arquitectura ü Patrones de diseño:
² Dashboard: tener una landing page con la última información de la aplicación y las acciones más importantes
² Actionbar: agrupar todas las acciones que puede hacer el usuario en una zona en la parte superior (Android) o inferior (iOS). Este espacio se suele utilizar para indicar el lugar en el que estamos.
² Quick Action Menu: mostrar menú contextual al pulsar un objeto. Utilizarlo sólo en las acciones más óbvias
² Dynamic List: cargar contenido recibo sin esperar recibirlo en su totalidad ² Mensajes de alerta: mostrar al usuario mensajes de alerta en caso de pérdida de conectividad o baja
batería. Mostrar sólo para mensajes importantes.
Introducción Francesc Pérez Fdez
5. Diseño de aplicaciones para smartphones
• Pasos en el diseño de la aplicación: ü Implementación y verificación (testing): necesario pensar en la usabilidad, responsividad, optimización de los
recursos ü Mantenimiento: sistemas de actualizaciones. ü Negocio:
² Modelo de aplicación gratuita: generalmente se utilizan para atraer al cliente y provocar la compra de aplicación de pago u obtener beneficios a través de la publicidad.
² Pago directo o indirecto: aplicaciones que se han de pagar, ya sea en el momento de la descarga o cuando se quiere utilizar algún servicio restringido.
6. Alojamiento de la aplicación • Local
• Remoto: ü www.hostgator.com ü www.fatcow.com ü www.startlogic.com/ ü Choosing a Web Hostong Company
Introducción Francesc Pérez Fdez
7. Antes de empezar
• Organización de archivos en el servidor donde se aloja la web app: ü Aplicación con su propio dominio o subdominio: http://webapp.domain.com. Sistema de archivos
independiente. Útil para crear aplicaciones móviles web stand-alone ü Aplicación alojada en un subdirectorio: http://www.domain.com/phone. Subdirectorio dentro del directorio del
dominio principal. Útil para servir una web diferente según el tipo de dispositivo (Mobile, Tablet, Smartphone, Laptop)
• Redirección de una consulta web en función del dispositivo que la solicita ü HTPP-User Agent
ü Javascript Redirection, según el tipo de dispositivos que solicita la aplicación
Introducción Francesc Pérez Fdez
7. Antes de empezar
• Meta tag viewport: si la resolución de la pantalla (width, height) es superior a la definida en la web mediante viewport, el navegador ajusta la web al tamaño de la pantalla. En caso contrario, la web no se verá completa en la pantalla.
Introducción Francesc Pérez Fdez
8. Actividad • Instalación y configuración XAMPP. • Instalación Dreamweaver. • Redirección de consultas HTTP con Javascript y HTTP-UserAgent. • MetaTag Viewport. • Herramientas de desarrollo Google Chrome y Firefox,
9. Enlaces de interés • http://www.html5rocks.com/en/mobile/ • www.learnhtml5book.com (IOs) • www.apress.com/9781430240389 (Ejemplos IOs) • www.minkbooks.com (Ejemplos HTML5, CSS3, JS APIs) • www.3schools.com (HTML5, CSS3, JS APIs) • Crome Mobile Web Browser Emulator • Opera Mobile Web Browser Emulator • Phonegap • SDK Android • Sencha Bussines web APP Platform • Lungo web APP Platform • Jquery • JqueryMobile • GoogleMaps API • Google Developer