+ All Categories
Home > Education > Introducción al desarrollo de aplicaciones para dispositivos móviles

Introducción al desarrollo de aplicaciones para dispositivos móviles

Date post: 18-Nov-2014
Category:
Upload: francesc-perez
View: 1,317 times
Download: 0 times
Share this document with a friend
Description:
Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_0_intro.html
14
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
Transcript
Page 1: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 2: Introducción al desarrollo de aplicaciones para dispositivos móviles

1.  ¿Por qué programar aplicaciones para smartphones? •  Según MobiThinking:

Introducción Francesc Pérez Fdez

Page 3: Introducción al desarrollo de aplicaciones para dispositivos móviles

1.  ¿Por qué programar aplicaciones para smartphones? •  Según ICrossing:

Introducción Francesc Pérez Fdez

Page 4: Introducción al desarrollo de aplicaciones para dispositivos móviles

1.  ¿Por qué programar aplicaciones para smartphones? •  Según MobiThinking:

Introducción Francesc Pérez Fdez

Page 5: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 6: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 7: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 8: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 9: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 10: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 11: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 12: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 13: Introducción al desarrollo de aplicaciones para dispositivos móviles

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

Page 14: Introducción al desarrollo de aplicaciones para dispositivos móviles

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


Recommended