Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_0_intro.html

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

2. 1. ¿Por qué programar aplicaciones para smartphones?
• Según MobiThinking:
Introducción Francesc Pérez Fdez

3. 1. ¿Por qué programar aplicaciones para smartphones?
• Según ICrossing:
Introducción Francesc Pérez Fdez

4. 1. ¿Por qué programar aplicaciones para smartphones?
• Según MobiThinking:
Introducción Francesc Pérez Fdez

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

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

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

8. 3. Ecosistema de aplicaciones híbridas y webs para smartphones
Introducción Francesc Pérez Fdez
Hybrid
APP
MobileOS
Frameworks: SDK Android (.apk)
Plugins: phonegap
Web APP
External libraries: jquery,
jquerymobile, googlemaps,…
Internal libraries: JS APIs
HTML
5
CSS3
JS
Web
Workers
APIs
Drag and
Drop
Canvas
Audio/
Video
LOCAL
DATA
PHONE
DATA
EXTERNAL
DATA
WebBrowser(HTML5,CSS3,JScompatible)
OS APIs
MobileOS
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

9. 4. Herramientas de implementación de aplicaciones web e híbridas
Introducción Francesc Pérez Fdez
Mobile Web
APP
Eclipse + Chrome Dev Tool + Dreamweaver
HTML5, CSS3, JS Framewok
Mobile Hybrid
APP
Eclipse + Chrome Dev Tool + Dreamweaver
HTML5, CSS3, JS Framewok
Titanium
Rhodes
Java ME
Flash
Wacapps
Unity 3D

10. 5. Diseño de aplicaciones para smartphones
• 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

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

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

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

14. 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
Introducción Francesc Pérez Fdez