Your SlideShare is downloading. ×
  • Like
Introducción al desarrollo de aplicaciones para dispositivos móviles
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,141 views
Published

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

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
35
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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