Apss HTML5 para móviles - Desarrollo de aplicaciones para smartphones y tablets basado en tecnologías Web

Datos Catalográficos

De Luca, Damián

Apps HTML5 para móviles. - 2a ed. - Ciudad Autónoma de Buenos Aires : Alfaomega Grupo Editor Argentino, 2016.

276 p. ; 23x17 cm.

ISBN 978-987-3832-07-9 eISBN 978-987-160-954-3

1. Aplicaciones Informáticas. I. Título CDD 005.3

Queda prohibida la reproducción total o parcial de esta obra, su tratamiento informático y/o la transmisión por cualquier otra forma o medio sin autorización escrita de Alfaomega Grupo Editor Argentino S. A.

Edición: Damián Fernández

Corrección: Vanesa García

Armado de interiores: Vanesa García

Diseño de tapa: Diego Linares Revisión de armado: Vanesa García

Internet: http://www.alfaomega.com.mx

Todos los derechos reservados © 2016, por Alfaomega Grupo Editor Argentino S. A.

Paraguay 1307, PB, oficina 11

ISBN 978-987-3832-07-9

eISBN 978-987-160-954-3

Queda hecho el depósito que prevé la ley 11.723

NOTA IMPORTANTE: La información contenida en esta obra tiene un fin exclusivamente didáctico y, por lo tanto, no está previsto su aprovechamiento a nivel profesional o industrial. Las indicaciones técnicas y programas incluidos han sido elaborados con gran cuidado por el autor y reproducidos bajo estrictas normas de control. Alfaomega Grupo Editor Argentino S. A. no será jurídicamente responsable por: errores u omisiones: daños y perjuicios que se pudieran atribuir al uso de la información comprendida en este libro, ni por la utilización indebida que pudiera dársele. Los nombres comerciales que aparecen en este libro son marcas registradas de sus propietarios y se mencionan únicamente con fines didácticos, por lo que Alfaomega Grupo Editor Argentino S. A. no asume ninguna responsabilidad por el uso que se de a esta información, ya que no infringe ningún derecho de registro de marca. Los datos de los ejemplos y pantallas son ficticios, a no ser que se especifique lo contrario.

Los hipervínculos a los que se hace referencia no necesariamente son administrados por la editorial, por lo que no somos responsables de sus contenidos o de su disponibilidad en línea.

Empresas del grupo:

Argentina: Alfaomega Grupo Editor Argentino, S. A.

Paraguay 1307 P.B. 11, Buenos Aires, Argentina, C.P. 1057

Tel.: (54-11) 4811-7183/0887

E-mail: [email protected]

México: Alfaomega Grupo Editor, S. A. de C.V.

Pitágoras 1139, Col. Del Valle, México, D.F., México, C.P. 03100

Tel.: (52-55) 55-75-50-22 - Fax: (52-55) 5575-2420/2490. Sin costo: 01-800-020-4396

E-mail: [email protected]

Colombia: Alfaomega Colombiana S. A.

Calle 62 N" 20-46, Bogotá, Colombia Tel. (57-1)7460102- Fax: (57-1) 2100415

E-mail: [email protected]

Chile: Alfaomega Grupo Editor, S. A.

Av. Providencia 1443, Oficina 24, Santiago de Chile, Chile Tel.: (56-2) 235-4248/2947-5786 - Fax: (56-2) 235-5786

E-mail: [email protected]

A todos los que están a mi lado, en las buenas y en las malas, hoy y siempre. A mis padres, Viviana y Horacio; a mi hermano, Alejandro Arturo; a mis abuelos; a mi mujer Myriam y a mi hijo Gael, que me enseña a mirar las cosas de una manera diferente cada día.

Un agradecimiento para todos aquellos que confiaron en mí para llevar adelante y hacer realidad este libro, especialmente a las personas que me permitieron potenciar esta obra con sus consejos.

Damián De Luca

Mensaje del editor

Los conocimientos son esenciales en el desempeño profesional, sin ellos es imposible lograr las habilidades para competir laboralmente. La universidad o las instituciones de formación para el trabajo ofrecen la oportunidad de adquirir conocimientos que serán aprovechados más adelante en beneficio propio y de la sociedad; el avance de la ciencia y de la técnica hace necesario actualizar continuamente esos conocimientos. Cuando se toma la decisión de embarcarse en una vida profesional, se adquiere un compromiso de por vida: mantenerse al dfa en los conocimientos del área u oficio que se ha decidido desempeñar.

Alfaomega tiene por misión ofrecerles a estudiantes y profesionales conocimientos actualizados dentro de lineamientos pedagógicos que faciliten su utilización y permitan desarrollar las competencias requeridas por una profesión determinada. Alfaomega espera ser su compañera profesional en este viaje de por vida por el mundo del conocimiento.

Alfaomega hace uso de los medios impresos tradicionales en combinación con las tecnologías de la información y las comunicaciones (TIC) para facilitar el aprendizaje.

Libros como éste tienen su complemento en una página Web, en donde el alumno y su profesor encontrarán materiales adicionales.

Esta obra contiene numerosos gráficos, cuadros y otros recursos para despertar el Interés del estudiante, y facilitarle la comprensión y apropiación del conocimiento. Cada capítulo se desarrolla con argumentos presentados en forma sencilla y estructurada claramente hacia los objetivos y metas propuestas.

Los libros de Alfaomega están diseñados para ser utilizados dentro de los procesos de enseñanza-aprendizaje, y pueden ser usados como textos para diversos cursos o como apoyo para reforzar el desarrollo profesional.

Alfaomega espera contribuir así a la formación y el desarrollo de profesionales exitosos para beneficio de la sociedad.

Acerca del autor

Damián De Luca

Es experto en HTML5 y cuenta con una importante experiencia en el desarrollo de Web Apps, publicaciones digitales y soluciones enfocadas en tecnologías Web. Entre sus trabajos más recientes, se destacan aplicaciones para móviles basadas en HTML5 + PhoneGap/Cordova.

Es profesor en ITMaster Professional Training de la carrera de Programador Web y de los cursos PHP y MySQL, LESS y SASS, Responsive Web Design, HTML5 y CSS3, PhoneGap y Mobile Web con HTML5. También ha brindado charlas y capacitaciones en importantes empresas en diferentes ciudades de la región.

Es autor de otros cuatro libros, entre los que se destacan Webmaster Profesional (2009) y HTML5 (2011) de editorial Users. Además, ha participado como autor y editor de colecciones de fascículos, revistas y contenidos online relacionados con informática, diseño y desarrollo Web.

Realiza publicaciones vinculadas con el mundo del desarrollo en su sitio Web personal http://damiandeluca.com.ar y se lo puede seguir a través de su cuenta de Twitter: @damiande.

Contenido

CAPÍTULO 1

INTRODUCCIÓN AL MUNDO MÓVIL

El mundo de los móviles

Los dispositivos

Los sistemas operativos para móviles

Los navegadores

Pantallas

Las aplicaciones Web: ¿qué es una Web App?

El proyecto

CAPÍTULO 2

PLANIFICACIÓN DE UNA APLICACIÓN

Pensar en móvil

Arquitectura de la información

Usabilidad

Accesibilidad

El concepto de navegabilidad aplicado a una Web App

Mejora progresiva

El diseño adaptado al medio

La estructura básica inicial

Planificación del flujo

CAPÍTULO 3

LENGUAJES Y TECNOLOGÍAS

Una nueva etapa para los desarrolladores

La evolución de HTML

El momento de HTML5

Los elementos de HTML5

El nuevo rol de JavaScript

Otras APIs de HTML5

El futuro de HTML

CSS: Hojas de estilo en cascada

Eventos táctiles

Trabajo con los sensores del móvil

CAPÍTULO 4

SOFTWARE Y LIBRERÍAS PARA EL DESARROLLO

Elección del software para el desarrollo

PhoneGap – Apache Cordova

Librerías para el desarrollo

Detección del dispositivo

Detección de características compatibles

Emuladores y simuladores

Herramientas para debugging y profiling

CAPÍTULO 5

MAQUETADO Y PROGRAMACIÓN DE LA APLICACIÓN

De la planificación al código

Preparación y optimización de imágenes

Comenzar con jQuery Mobile

El encabezado del documento

Custom data y los roles en jQuery Mobile

Estructura de una aplicación con jQuery Mobile

La estructura de nuestra Web App

Estilos personalizados

HTML5 y JavaScript en nuestra aplicación

jQuery Mobile API

CAPÍTULO 6

PUBLICACIÓN EN EL SERVIDOR WEB Y EMPAQUETADO DE LA APLICACIÓN

Pasos para completar el desarrollo

Publicación de la aplicación en un servidor Web

Agregar acceso rápido en la pantalla de inicio

Empaquetado de la aplicación

CAPÍTULO 7

DISTRIBUCIÓN EN LAS TIENDAS ON-LINE

La era de las tiendas on-line

Apple App Store

Google Play

BlackBerry World

Otras tiendas on-line

Visibilidad en las tiendas

De cara al futuro

APÉNDICE A

AJAX

JavaScript

DOM

JSON

Intercambio de datos de manera asincrónica

Prólogo

¿Les gusta viajar? Creo que esta pregunta tendrá una respuesta afirmativa de la gran mayoría de los lectores que relacionan los viajes con placer o motivaciones personales positivas, aunque quizás algunos no comprendan aún como esto se vincula con la obra que se encuentra en este momento en sus manos. Paso a explicarlo.

Cuando comencé a pensar la idea inicial que daría vida a esta obra imaginé un viaje, una manera de poder transmitirle al lector una serie de experiencias que lo puedan potenciar como profesional y le permitan comenzar a pensar distinto el mundo móvil. Desde mi punto de vista, viajar es, de alguna manera, un medio para conocer y comprender nuevos aspectos del mundo que nos rodea.

Partiendo de esta premisa, las páginas de este libro nos sumergen en un recorrido por las nuevas tecnologías que están cambiando nuestro tiempo. Nos abre la puerta para aprender nuevas técnicas de desarrollo y repensar lo que veníamos haciendo. Salir de la mecánica absoluta del código repetitivo y animarnos a pensar distinto.

En algunos pasajes de este libro nos pondremos en el lugar del usuario, para tratar de comprender qué piensa y qué necesita. Esta obra resalta la importancia de no perder de vista nunca las necesidades del usuario y, como desarrolladores, comprender la diversidad de personas que pueden acceder a nuestros productos. Hacer el intento de ponernos en los zapatos del usuarios puede resultar un ejercicio muy saludable en pos de llegar a una solución adecuada y efectiva para una necesidad planteada en un proyecto. Usabilidad y accesibilidad no son solo teoría, son esencialmente conceptos que hay que aprender a llevar a la práctica.

A lo largo de las páginas que componen esta aventura, nos situaremos en los puntos clave de este misterioso universo, aquellos que todo profesional necesita conocer a la hora de llevar sus proyectos a los dispositivos móviles. Y en este sendero también descubriremos que no hay un solo camino para llevar al final del recorrido con éxito.

En síntesis, este libro puede ser el boleto que los lleve a pensar el universo del desarrollo de aplicaciones Web para dispositivos móviles de otra forma.

El mundo que conocimos se encuentra en una era basada en cambios permanentes. Las computadoras personales han comenzado a abandonar su reinado, dejando el paso a dispositivos más pequeños y compactos, pero no por eso menos confortables. ¿Cuál es la mejor solución para desarrollar en estas plataformas?

Para conocer la respuesta pónganse cómodos, prepárense para una nueva experiencia y, por sobre todas las cosas, disfruten de este viaje.

Damián De Luca

Acceso al material complementario

Para tener acceso al material complementarlo es necesario:

1. Ir a la página: libroweb.alfaomega.com.mx

2. Busque en el menú Catálogo y seleccione la imagen correspondiente a este libro para descargar su material complementario.

NOTAS

Se recomienda respaldar los archivos descargados de las páginas Web en un soporte físico (CD, USB, disco duro o cualquier otro medio de almacenamiento).

Las descargas no generan ninguna responsabilidad para el autor o la editorial.

Alfaomega e ITMaster Professional Training te dan la posibilidad de que certifiques tus conocimientos y experiencias adquiridos como lector de este libro mediante una evaluación gratuita. Su aprobación te permitirá tener la certificación HTML5 para móviles.

Luego de la obtención del certificado, podrás continuar tu formación en la carrera corta de Programador HTML5 y en los cursos cortos PhoneGap, jQuery Mobille, Programación para iPhone y Android para completar tus conocimientos en tecnologías relacionadas con Web móvil.

La capacitación podrás realizarla en forma presencial en las sedes habilitadas o a distancia a través de Internet con una capacitación online, en cualquier ciudad del mundo donde te encuentres.

Para dar la evaluación de certificación ingresa en la dirección correspondiente a tu país para recibir mayor información. Para realizar cualquier consulta adicional, se detalla la dirección de correo electrónico que corresponde a tu país.

España

http://libros.itmaster.es - [email protected]

México

http://libros.itmaster.com.mx - [email protected]

Argentina y otros países

http://libros.itmaster.com.ar - [email protected]

1

Introducción al

mundo móvil

El mundo de los móviles

Nos encontramos en una época en la que las comunicaciones y el uso de las redes se han transformado en factores clave de nuestra vida. De acuerdo con las estadísticas mundiales de fines de 2014, publicadas por Internet World Stats (http://www.internetworldstats.com/stats.htm), la penetración de Internet a nivel global supera el 42%. El número de los usuarios que se conectan a esta red supera los siete mil millones y continúa expandiéndose.

En algunas regiones del mundo, se registra un alto nivel de penetración, como el caso de Norteamérica (86,9%) y Europa (70,4%). América Latina ostenta un 52,4% de penetración con un importante crecimiento en la última década. Un indicador interesante es el que nos marca que más del 45% de los usuarios que utilizan Internet lo hacen desde países asiáticos, pero en esa región, debido al gran nivel poblacional, el grado de penetración que tiene la gran red de redes apenas supera el 34%.

Los dispositivos móviles (smartphones, tablets y demás variantes) son utilizados a diario por millones de usuarios en todo el mundo, convirtiéndose en piezas fundamentales de la vida digital moderna. El acceso a Internet a través de estos dispositivos tiene un crecimiento sostenido, que supera el 30% a nivel global.

Las perspectivas marcan un crecimiento en el mercado de los móviles. Este sector nuclea a una importante masa de público que demanda contenidos Web de calidad, pensados especialmente para dichos dispositivos, y también, la llegada de una nueva generación de aplicaciones para estos entornos. En la última década, se ha comenzado a modificar el mapa de acceso a Internet y los dispositivos móviles se posicionan con mayor fuerza en este mundo.

Ya no podemos pensar en una Web que funciona solo en computadoras de escritorio ni en aplicaciones exclusivas para ciertos entornos. La nueva misión de los desarrolladores es ir más allá y adaptarse a las nuevas reglas de juego, que incluyen diversidad de dispositivos y plataformas.

Para satisfacer las necesidades de los usuarios, debemos comprender que ya no podemos esperar que las personas se ajusten a lo que nosotros les ofrecemos, sino que los desarrollos ahora deben estar preparados para adaptarse a los nuevos entornos que se encuentran disponibles en el mercado.

En este libro, comenzaremos un viaje que arrancará por develar las bases y conceptos de esta nueva realidad y nos llevará a recorrer las posibilidades que tenemos hoy en día para crear aplicaciones para dispositivos móviles.

Breve historia de la Web móvil

Si a una persona mayor de cuarenta años le preguntáramos cuál es su primer recuerdo de un teléfono móvil, es muy probable que su mente le traiga como respuesta la imagen de Maxwell Smart, interpretado por Dom Adams, hablando con el teléfono ubicado en su zapato, en la recordada serie Get Smart (conocida como El Superagente 86 por el público hispanohablante). Los más memoriosos sabrán que Maxwell Smart también utilizó alguna vez un ingenioso reloj con funciones de teléfono, que nos hace acordar a los actuales smartwatch.

Si la referencia fuera hacia las tablets, quizás muchas personas recordarían los modelos con perillas y luces que se veían en la serie de ciencia ficción Star Trek (Viaje a las estrellas), creada también en los años sesenta. Lejos de los gratos recuerdos de las series de televisión, los primeros teléfonos móviles se crearon en la década de los cuarenta, en plena Segunda Guerra Mundial y funcionaban utilizando ondas de radio. Eran bastante distintos a los que conocemos ahora.

El primer éxito comercial de los teléfonos móviles en el mundo se remonta a la década de los ochenta. Estos primeros móviles masivos hoy son denominados como primera generación o 1G. En esos tiempos, eran dispositivos de gran tamaño, comparados a los de hoy en día, y ofrecían funciones de telefonía básica ya que la Web llegaría algunos años después a este mundo.

En los noventa, llega la era 2G y la digitalización, que permite una mejor calidad en las llamadas. Los dispositivos comienzan a reducir su tamaño y el éxito global de los teléfonos móviles continúa su importante crecimiento, imponiendo el estándar GSM. A partir de esta generación, llega la posibilidad de enviar mensajes de texto (SMS).

Internet comienza su andar en los móviles hacia fines de la década del noventa, gracias a la primera versión protocolo de aplicaciones inalámbricas (WAP). SI bien puede considerarse una opción limitada para lo que hoy en día estamos acostumbrados a ver en la Web móvil, de la mano del WML (Wireless Markup Language) encontramos el primer lenguaje de marcado para dispositivos móviles.

Con 2.5G, se experimenta un Incremento en la velocidad de transmisión de datos, gracias a tecnologías como GPRS y EDGE. También, se destaca por un sistema de mensajes mejorado (EMS) y la opción de mensajes multimedia (MMS).

En el año 2004, con WAP 2.0, se gestaría una gran renovación en la Web móvil, respaldada por el uso de XHTML Mobile Profile (XHTML-MP), ofreciendo mejores opciones para el maquetado de las páginas, trabajo con estilos y contenidos con imágenes.

Presente y futuro de la Web móvil

La tecnología 3G presenta una evolución imprescindible para los usuarios de dispositivos móviles, que comenzaban a requerir el uso de opciones de telefonía y servicios de Internet de una manera integrada, cómoda y fluida, desde cualquier lugar.

La línea evolutiva continúa con 4G LTE, la generación que se impone como alternativa para una experiencia más completa y potente en los dispositivos móviles y tablets. Además del uso de datos y voz, son pilares de esta generación la transmisión de video HD, streaming y entretenimiento en alta definición, entre otras características.

Con el notable crecimiento que ha experimentado la Web móvil, mejorando sus opciones de conectividad y con navegadores que pueden mostrar los sitios pensados para pantallas y equipos más grandes, la pregunta que muchas personas se hacen es: ¿Sigue siendo necesario crear versiones para móviles?.

Aquí la respuesta resulta más que evidente: si nuestra intención es brindarles a todos los usuarios de smartphones y tablets una experiencia acorde al contexto y expectativas que pueden tener cuando utilizan estos dispositivos, definitivamente tendremos que pensar en móvil. Y esto no quiere decir solo tratar de que las piezas encajen en una pantalla más pequeña, sino que también Implica analizar las necesidades y posibilidades de una manera diferente de la habitual para ¡mplementaclones desktop.

El mundo móvil tiene sus propias reglas y un estilo bien definido. Tanto desarrolladores como diseñadores deben aprender a crear sitios y aplicaciones para estas plataformas, ofreciendo a los usuarios la mejor experiencia de uso que sea posible.

Para comprender cómo planificar y resolver estas nuevas necesidades, primero debemos conocer la variedad reinante en cuanto a dispositivo, sistemas, navegadores y demás características. Sobre esto profundizaremos en el presente capítulo.

Cuando pensamos en dispositivos móviles que cuentan con capacidad de navegación por Internet, además de los teléfonos y las tablets, podemos destacar también los reproductores multimedia (por ejemplo, iPod Touch) y los E-book Reader (como el caso de Amazon Kindle).

Los dispositivos

El universo de los dispositivos móviles se caracteriza por la diversidad. Si lo observamos desde el punto de vista usuario, podríamos pensar que es una ventaja, ya que se abre un amplio abanico de alternativas a la hora de elegir. Pero desde la mirada del desarrollador, la fragmentación existente en el mercado es un gran desafío, ya que nos obliga a estar informados y a contar con las herramientas y conocimientos necesarios para afrontar nuestros proyectos. Esto, además del software de desarrollo y el dominio de las diversas tecnologías, también se refiere a tener los dispositivos adecuados para realizar el testing de nuestros trabajos.

Otro aspecto que no debemos olvidar cuando hablamos de smartphones y tablets es que, por lo general, encontraremos dispositivos más limitados en cuanto a hardware (procesador, memoria RAM y espacio de almacenamiento) que en los equipos de escritorio. Si bien es verdad que estas características se mantienen en constante evolución, aun hoy debemos contemplar que en este universo los recursos de hardware pueden ser más limitados, al igual que algunas opciones de conexión a Internet.

La primera gran división que podríamos hacer entonces, es establecer dos grandes grupos, conformados por smartphones y tablets. Si bien entre ambos existen similitudes, también hay diferencias de tamaño, opciones de telefonía y también en algunas aplicaciones