Tecnológico de Monterrey Campus Querétaro
Rectoría Zona Centro
Dirección de Ingeniería y Arquitectura Departamento de Sistemas Computacionales
Desarrollo de un framework para la implementación de interfaces no nativas de interacción multi-touch en
aplicaciones móviles multiplataforma basadas en HTML5/CSS/Javascript.
Proyecto Integrador de Tecnología Computacional
Autor: Jorge Morelos Zaragoza Lucas
Director: Jorge A. Torres Jiménez
DASL4LTD Research Group [C-QRO-17/07] The Distributed and Adaptive Systems Lab
for Learning Technologies Development
Desarrollo de un framework para la implementación de interfaces no nativas de interacción multi-touch en
aplicaciones móviles multiplataforma basadas en HTML5/CSS/Javascript.
Identificador de entregable: T1
Autor: Jorge Morelos Zaragoza Lucas Fecha de Entrega: 2 Noviembre 2013
Fecha de Inicio: 2013 Duración: 4 meses
Coordinador de Entrega: Jorge A. Torres Jiménez Clasificación: Circulación pública
Resumen
En la actualidad el desarrollo de aplicaciones móviles ha ido incrementando y se previene que en los próximos años siga creciendo. Las aplicaciones, al tener un breve periodo de uso, ya no justifican un largo tiempo de desarrollo. Por lo tanto requieren de que el tiempo a mercado sea el menor posible y que llegue al mayor número de usuarios.
La gran diversidad de dispositivos y plataformas ha hecho que los desarrolladores empiecen a desarrollar las aplicaciones de manera no nativa logrando así terminar la aplicación en menor tiempo y llegar al mayor número de usuarios haciendo un solo desarrollo y no uno para cada plataforma, siendo las más conocidas Android, iOS y Windows Phone.
Es notable que las aplicaciones no nativas pierden ciertas funcionalidades a las aplicaciones nativas. Varias librerías de Javascript pretenden resolver estas funciones como las características multi-touch. Aun así, las aplicaciones no nativas que utilizan estas librerías tienen un desempeño menor al de una aplicación desarrollada de manera nativa.
Este trabajo pretende analizar cómo se puede hacer un mejor uso de los gestos multi-touch en las aplicaciones móviles no nativas y desarrollar un framework donde se eficientice el uso de estas características.
Índice general
Índice general v
1. Introducción 1
1.1. Contexto del problema . . . 1
1.2. Motivación del trabajo de investigación. . . 3
1.3. Objetivos del trabajo de investigación . . . 3
1.4. Dominio del problema . . . 3
1.5. Metodología de investigación . . . 4
1.6. Estructura del documento . . . 4
2. Estado del arte 5
3. Planteamiento del problema 7
4. Propuesta de solución 9
5. Evaluación 11
6. Conclusiones y trabajos futuros 13
Referencias Bibliográficas 15
Capítulo 1
Introducción
1.1.
Contexto del problema
En los últimos años el desarrollo de aplicaciones móviles ha ido incrementando de manera considerable y cada vez un mayor número de personas cuentan con un smart-phone con el cual pueden hacer uso de las millones de aplicaciones que hay disponibles en el mercado. Cada día los dispositivos móviles y las tecnologías web [Lee et al., 2012] tienen más capacidad y son más eficientes llegando a tener un desempeño muy similar al de una computadora de escritorio.
Es común que las aplicaciones estén en el mercado por muy poco tiempo, algunas duran unos pocos días (apps de eventos, publicitarios, etc.), otras pocas perduran algunos meses y muy pocas llegan a ser vigentes por un año o más. Esto lleva a que el tiempo de desarrollo de software para móviles cada vez tenga que ser más corto. Otro problema que se presenta es la amplia gama de dispositivos y sistemas operativos que existen en el mercado, siendo los más importantes iOS, Android y Windows Phone. Desarrollar una aplicación que este disponible para los usuarios de las tres plataformas, teniendo en cuenta el poco tiempo en mercado, vuelve muy costoso el desarrollo de aplicaciones de manera nativa.
2 1.1. Contexto del problema
HTML 5 se está convirtiendo en un conjunto de estándares web, siendo una pla-taforma y lenguaje muy utilizado [Lee et al., 2012]. Al utilizar HTML 5, el contenido web puede ser desplegado y consumido en prácticamente cualquier dispositivo sin importar su sistema operativo. Esta es una de las razones por lo que las aplicaciones, cada vez más, están migrando de ser nativas a aplicaciones no nativas basadas en web [Lee et al., 2012]. Estas aplicaciones web tienen un profundo impacto en como accedemos y comunicamos ideas [Slin et al., 2012, Priya et al., 2011]. Las últimas tendencias del desarrollo web han mostrado mucho interes en las aplicaciones móviles basadas en web, que comunmente utilizan HTML5 junto con CSS3 y Javascript [Slin et al., 2012]. Es por esto que cada día se empiezan a desarrollar más aplicaciones de manera no nativa utilizando varios marcos de trabajo basados en HTML5/CSS/Javascript.
El ser humano esta acostumbrado a interactuar con los objetos que encuentra a su alrededor usando sus manos y dedos, pero al interactuar con interfaces gráficas estamos limitados a las acciones realizadas por el ratón y teclado, los cuales no nos permiten expresarnos y mantenernos interactuando [Lau and Hui, 2012]. Es por esto que el uso de pantallas multi-touch ha ido incrementando con los años al punto que los dispositivos que no cuentan con una pantalla touch se consideran como obsoletos [Ravoor et al., 2011]. Estas pantallas permiten al usuario utilizar varios dedos pa-ra realizar una intepa-racción con una interfaz gráfica de una manepa-ra muy intuitiva y de manera inmediata [Hoste, 2010,Lee et al., 2012,Feng et al., 2012]. Esta interac-ción, según [Westerman et al., 2001], multi-touch ofrece una manera más natural e intuitiva de interactuar con las computadoras.
Al desarrollar aplicaciones no nativas utilizando HTML/CSS/Javascript muchas veces se requiere de simular la interacción multi-touch que se ofrece de manera na-tiva y para esto se utilizan algunas librerías. Algunas de las más reconocidas son jQuery Mobile 1 y Sencha Touch 2. El uso de estas librarías veces afecta consi-derablemente al desempeño de la aplicación comparado con una aplicación nativa [Dalmasso et al., 2012].
1http://www.jquerymobile.com 2
3
1.2.
Motivación del trabajo de investigación
Viendo que cada día más aplicaciones son desarrolladas de manera no nativa utilizando HTML5/CSS/Javascript y tomando en cuenta que una manera muy importante de interactuar es mediante el uso de gestos multi-touch, la movitación de este trabajo de investigación es el de desarrollar un framwork para la implemen-tación de interfaces no nativas de interacción multi-touch en aplicaciones móviles multiplataforma basadas en HTML5/CSS/Javascript.
1.3.
Objetivos del trabajo de investigación
El objetivo principal de este trabajo de investigación consiste en desarrollar un framework para la implementación de interfaces no nativas de interacción multi-touch en aplicaciones móviles multiplataforma basadas en HTML5/CSS/Javascript. En la actualidad existen comparativos [Dalmasso et al., 2012] entre diferentes plataformas no nativas como PhoneGap y Titanium sobre sus desempeños en cuanto a CPU y memoria utilizado. Esta investigación tambien pretende realizar una comparación de los gestos multi-touch entre una aplicación nativa contra una aplicación no-nativa para cuantificar la diferencia de desempeño entre ambas soluciones. Luego de realizar esta comparación se realizará una investigación sobre cuales son los aspectos que hacen que los controles multi-touch de una aplicación no nativa basada en HTML5/CSS/Javascript sean menos eficientes que los de una aplicación desarrollada de manera nativa. En base a lo anterior, se desarro-llará un framework óptimo para la interacción multi-touch en aplicaciones no nativas.
1.4.
Dominio del problema
En este trabajo de investigación se abordarán los temas de desarrollo de aplicacio-nes no nativas basadas en HTML5/CSS/Javascript así como la interacción humano-computadora, en específico la interacción multi-touch en dispositivos móviles.
4 1.5. Metodología de investigación
1.5.
Metodología de investigación
La metodologá de investigación para este trabajo será una mezcla entre [Hevner et al., 2004] y [Roberto Hernandez Sampieri, 2010]. Primero se eligirá el te-ma a investigar. Después se deberá de plantear el problete-ma junto con sus objetivos y justificación de la investigación. El siguiente paso será el de construir un marco teórico o estado del arte revisando la literatura que existe sobre los temas que se abordarán, dando así rigor al trabajo de investigación. Después de revisar la litera-tura se procederá a dar una propuesta de solución donde se diseñarán los artefactos que resolverán el problema en cuestión. Al terminar el desarrollo de la solución se realizará la evaluación del mismo con el fin de determinar si los artefactos desarro-llados cumplen con los objetivos propuestos al inicio. Para finalizar el trabajo de investigación, se harán las conclusiones correspondientes, los trabajos futuros que se puedan generar en base al proyecto y se publicarán los resultados de este trabajo para que puedan ser utilizados por otras personas.
1.6.
Estructura del documento
En los siguientes capítulos se tratarán los siguientes temas. En el capítulo dos se trata el estado del arte, esto es la literatura existente sobre los temas que se abordarán en este trabajo de investigaciíon. El plantamiento del problema será descrito en el capítulo tres. En el capítulo cuatro se hablará del diseño de los artefactos que darán solución al problema en cuestión. Después, en el capítulo cinco, se realizará la evaluación de los artefactos con el fin de dar validez al trabajo. Por último, en el capítulo seis, se realizarán las concluciones y se hablará de los posibles trabajos futuros que se puedan desencadenar de este trabajo de investigación.
Capítulo 2
Estado del arte
Esta tecnología no es algo nuevo. Las primeras investigaciones sobre el tema datan de 1982 en la Universidad de Toronto [Ravoor et al., 2011].
Las librerias multi-touch se pueden dividir en dos: de bajo nivel y frameworks de gestos [Ravoor et al., 2011].
Capítulo 3
Planteamiento del problema
Capítulo 4
Propuesta de solución
Capítulo 5
Evaluación
Capítulo 6
Conclusiones y trabajos futuros
Referencias Bibliográficas
[Dalmasso et al., 2012] Isabelle Dalmasso, Soumya Kanti Datta, Christian Bonnet, and Navid Nikaein. Survey, comparison and evaluation of cross platform mobile application development tools. Technical report, Mobile Communication Depart-ment, EURECOM, 2012.
[Feng et al., 2012] Yuan Feng, Zimu Liu, and Baochum Li. Gestureflow: Qoe-aware streaming of multi-touch gestures in interactive multimedia applications. Tech-nical report, Department of Electrical and Computer Engineering, University of Toronto, 2012.
[Hevner et al., 2004] Alan R. Hevner, Salvatore T. March, Jinsoo Park, and Sudha Ram. Design science in information system research. Technical report, University of South Florida, Vanderbilt University, Korea University, University of Arizona, 2004.
[Hoste, 2010] Lode Hoste. Software engineering abstractions of the multi-touch re-volution. Technical report, Vrije Universiteit Brussel, 2010.
[Lau and Hui, 2012] Siong-Hoe Lau and Liew Tze Hui. Understanding the user ac-ceptance of gesture-based human-computer interactions. Technical report, Faculty of Information Science and Technology, Multimedia University, Meleka, Malaysia, 2012.
[Lee et al., 2012] Moon Soo Lee, Sun Joong Kim, Min Jung Kim, and Cho Kee Seong. Remote collaboration screen control using mobile multi-touch interface. Technical report, Smart Screen Convergence Research Department, ETRI, 2012.
16 Referencias Bibliográficas
[Priya et al., 2011] T.K.Hema Priya, K. Divya J. Hima, M. Somasundaram, and S.P. Karthikeyan. Mobile interface to content management system based on html5 and drupal: A case study. Technical report, R.M.K. Engineering College, 2011. [Ravoor et al., 2011] Prashanth C. Ravoor, Sudhir Rao Rupanagudi, and Ranjani
B.S. Detection of multiple points of contact on an imaging touch-screen. Technical report, Dept. of Information Science and Engineering BMSCE, Technical Research Associates WorldServe Education, 2011.
[Roberto Hernandez Sampieri, 2010] C.F. Roberto Hernandez Sampieri. Metodolo-gía de la Investigación. McGraw Hill, 2010.
[Slin et al., 2012] David Slin, Erin Lawson, and Krishnan Kannoorpatti. Mobile web apps - the non-programmer’s alternative to native applications. Technical report, Charles Darwin University, 2012.
[Westerman et al., 2001] Wayne Westerman, John G. Elias, and Alan Hegde. Multi-touch: A new tactile 2-d gesture interface for human-computer interaction. Tech-nical report, University of Delaware And MVR Hall, 2001.
