TRABAJO FIN DE GRADO

Ttulo

Desarrollo de aplicacin mvil multiplataforma para

gestin de tareas en 4IKIM
Autor/es

Gonzalo Senz San Milln

Director/es

Eloy Javier Mata Sots

Facultad

Facultad de Ciencias, Estudios Agroalimentarios e Informtica

Titulacin

Grado en Ingeniera Informtica

Departamento

Curso Acadmico

2012-2013

Desarrollo de aplicacin mvil multiplataforma para gestin de tareas en

4IKIM, trabajo fin de grado
de Gonzalo Senz San Milln, dirigido por Eloy Javier Mata Sots (publicado por la
Universidad de La Rioja), se difunde bajo una Licencia
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported.
Permisos que vayan ms all de lo cubierto por esta licencia pueden solicitarse a los
titulares del copyright.

El autor
Universidad de La Rioja, Servicio de Publicaciones, 2013
publicaciones.unirioja.es
E-mail: publicaciones@unirioja.es

Facultad de Ciencias, Estudios Agroalimentarios e Informtica

TRABAJO FIN DE GRADO

Ingeniera Informtica

Desarrollo de aplicacin mvil multiplataforma

para la gestin de tareas en 4IKIM

Autor: Gonzalo Senz San Milln

Tutor: Eloy Javier Mata Sots

Departamento de Matemticas y Computacin

Logroo, junio de 2013

Resumen
4iKIM es una plataforma que nos permite gestionar informacin, sobre la cual se han
construido varias verticalizaciones para solucionar problemas ms especficos. Entre sus
mltiples elementos recoge la posibilidad de crear y organizar las tareas, por lo que se ha
considerado la utilidad de creacin de una aplicacin para gestionar y organizar tareas en
dispositivos mviles.
Como objetivo del proyecto, se realizar una prueba de concepto [PoC] sobre una
verticalizacin de 4IKIM que trabaje sobre un API de la plataforma y que permita comprobar la
utilidad de una herramienta con tal propsito. En dicha aplicacin se debera poder crear
nuevas tareas, editarlas, completarlas, eliminarlas, y gestionarlas de un modo gil, as como
poder visualizarlas de forma rpida y sencilla.

Abstract
4iKIM is a platform that allows us to manage information. The team of 4iKIM Collaboration SL
has built several verticalizations oriented towards solving more specific problems based on this
platform. As one of the elements of 4IKIM platform is the ability to create and organize tasks,
it has been considered the utility of creating an application to manage and organize tasks on
mobile devices.
As an objective of the project, there will be a proof of concept [PoC] onto a 4IKIM
verticalization that works on an API's platform and allows to verify the usefulness of a tool for
this purpose. With this that application, user should be able to create new tasks, edit them,
complete them, delete them, and manage them in a fast way, as well as displaying them
quickly and easily.

ndice
Introduccin a 4IKIM ..................................................................................................................... 8
Objetivos del TFG .......................................................................................................................... 8
Planificacin Inicial ........................................................................................................................ 9
Anlisis de requisitos ................................................................................................................. 9
Diseo........................................................................................................................................ 9
Interfaz ...................................................................................................................................... 9
Servicios..................................................................................................................................... 9
Testeo ........................................................................................................................................ 9
Anlisis......................................................................................................................................... 10
Prototipado ............................................................................................................................. 10
Enumeracin de los casos de uso ........................................................................................... 11
Esquema de Navegacin de Casos de uso .............................................................................. 14
Alcance del TFG ....................................................................................................................... 15
Pila de la aplicacin ............................................................................................................. 15
Diseo.......................................................................................................................................... 16
Diseo de las interfaces .......................................................................................................... 16
Diagrama de navegacin por ventanas ................................................................................... 23
Diseo en iPad ......................................................................................................................... 24
Arquitectura de 4IKIM ............................................................................................................. 25
Arquitectura de Task4U .......................................................................................................... 26
Arquitectura fsica ............................................................................................................... 26
Arquitectura lgica .............................................................................................................. 26
Patrones utilizados .................................................................................................................. 27
Uso de los patrones................................................................................................................. 27
Diagramas de clases ................................................................................................................ 28
Task4UApp .......................................................................................................................... 28
Servicios............................................................................................................................... 28
Capa de Lgica de Negocio.................................................................................................. 29
Capa de presentacin .......................................................................................................... 29
Representacin de una tarea en Task4U ............................................................................ 30
Recurrence .......................................................................................................................... 31
5

Representacin de una lista de tareas en Task4U .............................................................. 31

Modelos simplificados de datos para la navegacin........................................................... 32
Implementacin .......................................................................................................................... 33
Por qu Appcelerator Titanium? ........................................................................................... 33
Formacin JS ........................................................................................................................... 33
Decisiones de implementacin ............................................................................................... 33
Recurrence .......................................................................................................................... 33
Interaccin entre clases .......................................................................................................... 34
Callbacks .............................................................................................................................. 34
Controladores de eventos ................................................................................................... 34
Ejemplo de controlador de eventos y callback ................................................................... 35
Diagrama de secuencia ....................................................................................................... 37
Ejemplo de construccin de un formulario ............................................................................. 38
Task4UModule .................................................................................................................... 42
Task4UForm ........................................................................................................................ 43
Slider........................................................................................................................................ 45
Otros aspectos......................................................................................................................... 47
Internacionalizacin ............................................................................................................ 47
Mdulo para fechas ............................................................................................................ 47
Variaciones entre dispositivos ............................................................................................ 47
Formulario de listados y de edicin ........................................................................................ 48
Conclusiones ............................................................................................................................... 49
Lecciones aprendidas .............................................................................................................. 49
Bibliografa .................................................................................................................................. 50
JavaScript................................................................................................................................. 50
Appcelerator Titanium ............................................................................................................ 50
Anexo I: Prototipado en papel .................................................................................................... 51

Introduccin a 4IKIM
4iKIM es una plataforma que nos permite gestionar informacin tanto personal como
corporativa de una forma integrada, unificada y colaborativa, independientemente de su tipo,
la fuente de informacin o su complejidad.
En base a esta plataforma, gracias al enfoque abierto y flexible de la misma, el propio equipo
de 4iKIM Collaboration S.L ha construido varias verticalizaciones orientadas a solucionar
problemas ms especficos (correo electrnico, gestin documental, gestin de proyectos).
Uno de los componentes que nos ofrece esta plataforma son servicios web, los cuales puede
estar publicados como servicios SOAP y/o REST. Mediante estos servicios se pueden construir
distintos tipos de aplicaciones, con distintos tipos de interfaces (web, mvil, otro servicios).

Objetivos del TFG

Puesto que la plataforma 4IKIM entre sus mltiples elementos recoge la posibilidad de crear y
organizar las tareas, se ha considerado la utilidad de creacin de una aplicacin para gestionar
y organizar tareas en dispositivos mviles.
Como objetivo del proyecto, se realizar una prueba de concepto [PoC] sobre una
verticalizacin de 4IKIM que trabaje sobre un API de la plataforma y que permita comprobar la
utilidad de una herramienta con tal propsito.
Desde dicha aplicacin, se debera poder crear nuevas tareas, editarlas, completarlas,
eliminarlas, y gestionarlas de un modo gil, as como poder visualizarlas de forma rpida y
sencilla.
Teniendo en cuenta que el deseo de la empresa es abarcar el mayor mercado posible, la
aplicacin se disear utilizando el entorno de desarrollo Titanium, que permite crear
aplicaciones multiplataforma compartiendo parte del cdigo, de modo que nuestro proyecto
no slo crear una aplicacin funcional para iPhone y iPad, sino que tambin abrir las puertas
al futuro desarrollo de la misma para Android, BlackBerry o Windows Phone.

Planificacin Inicial
Anlisis de requisitos
Captura de requisitos del proyecto y definicin del alcance.
Fecha prevista de finalizacin: 8 de Febrero
-

Explicacin de los prototipos

Enumeracin de los casos de uso
Explicacin de funcionalidad de cada pantalla
Esquema de navegabilidad

Diseo
Desarrollo de un modelo o representacin para el programa.
Fecha prevista de finalizacin: 22 de Febrero
-

Explicacin de la estructura y 4iKIM KC.

Definicin de la estructura de cdigo.
Patrones usados.
Diagramas clases.

Interfaz
Implementacin de los formularios que componen la aplicacin
Fecha prevista de finalizacin: 12 de Abril
-

Partes de cdigo relevante

Servicios
Programar los servicios que doten a los formularios de contenido
Fecha prevista de finalizacin: 18 de Mayo
-

Priorizar funcionalidad
Partes de cdigo relevante

Testeo
Probar la aplicacin en los distintos dispositivos
Fecha prevista de finalizacin: Por determinar

Anlisis
Prototipado
En una primera fase de evaluacin del proceso, consideramos necesario imaginar el
funcionamiento bsico de la aplicacin. Para ello, y sin olvidar que la aplicacin nace como una
idea cambiante y muy flexible, hemos decidido utilizar prototipado en papel por su
manipulacin rpida y elstica.
Gracias a la primera revisin del prototipado en papel conseguimos definir y conceptualizar
mucha funcionalidad de nuestra aplicacin para la gestin de tareas, as como una primera
idea del flujo de las diversas pantallas, y como aproximacin a una maquetacin ms detallada.
Terminado el prototipado que se aade a este proyecto como anexo, iniciamos una segunda
fase de prototipado, esta vez a ordenador, en el que empezamos a incluir algo de
funcionamiento y navegacin para lograr un mayor detalle y detectar nuevas carencias o
mejoras en el modelo inicial.
Sobre este segundo prototipado realizamos el anlisis de requisitos, tratando de abarcar la
funcionalidad total de la aplicacin, pero sin olvidarnos de que, por tratarse de un prototipo, la
misma no estar en absoluto cerrada, sino abierta a cualquier cambio, ya sea de estilo o
nuevas funcionalidades.

10

Enumeracin de los casos de uso

Gracias al uso de prototipos, tanto en papel como a ordenador, se han localizado con ms
precisin los casos de uso que dara soporte nuestra aplicacin para los usuarios.
A continuacin se presenta un informe de dichos casos de uso:
c1.

Iniciar sesin en la aplicacin (log in):

Un usuario registrado deber poder acceder a la aplicacin mediante el ingreso de
su nombre y su contrasea.

c2.

Cerrar sesin de la aplicacin (log out):

Si la aplicacin tiene una sesin iniciada, sta podr ser cerrada para poder utilizar
la sesin de otro usuario o simplemente para proteger los datos del usuario.

c3.

Listar tareas:
Se podr mostrar un listado con las tareas que compartan criterios, ya sean
prestablecidos en unas listas predefinidas: tareas para hoy, destacados; o tareas
que compartan listas: trabajo, casa.

c4.

Filtrar listados:
Dentro de un listado, se podr realizar un filtrado, mostrando tan slo las tareas
que comparten las etiquetas establecidas en dicho filtro.

c5.

Realizar bsquedas en listados:

Dentro de un listado el usuario podr hacer una bsqueda de las tareas cuyo
nombre coincida con una cadena de texto introducida.

c6.

Asignar lista a las tareas:

Las listas a las que pertenecen las tareas podrn ser modificadas o eliminadas.

c7.

Aadir una nueva tarea simple:

El usuario podr aadir de forma rpida y dinmica una nueva tarea con los
parmetros por defecto establecidos en los ajustes del programa, asignando tan
solo el nombre.

c8.

Aadir una nueva tarea avanzada:

Tambin se podrn aadir tareas definiendo los parmetros avanzados (fecha para
llevar a cabo la tarea, prioridad, listas) en el momento de su creacin.

c9.

Eliminar una tarea:

Se podr eliminar una tarea que hemos creado con anterioridad.

c10. Completar tareas:

Un usuario podr marcar como completa una tarea.
c11. Ver una tarea:
Se podr ver una tarea con todas las opciones establecidas, as como la lista de sus
subtareas asociadas.
11

c12. Posponer una tarea:

Una tarea podr ser pospuesta. Al posponer una tarea, si tiene como fecha de
vencimiento la actual o una fecha futura, ser retrasada en un da, en caso de que
el plazo de vencimiento para la tarea ya haya sido superado, la tarea ser
pospuesta para el da siguiente de la fecha de posposicin.
c13. Delegar una tarea:
Una tarea de un usuario podr ser delegada a otro, en ese caso la tarea llegar a la
bandeja de entrada del usuario en el cual se ha delegado.
c14. Aadir subtareas:
Se podrn establecer subtareas a una tarea, las subtareas slo tendrn nombre y
una marca que indicar si estn completas o no.
c15. Asignar prioridad a las tareas:
El usuario podr asignar una prioridad para cada tarea, de modo que unas tareas
sean ms relevantes que otras.
c16. Marcar tareas como destacadas:
El usuario podr marcar o desmarcar tareas como destacadas para futuros
filtrados.
c17. Etiquetar tareas:
A cada tarea se le podrn asignar etiquetas, las etiquetas de las tareas servirn
para futuros filtros en los listados.
c18. Establecer el intervalo de repeticin de una tarea:
Se permitir establecer un intervalo en el cual las tareas se repitan para aquellas
que han de realizarse peridicamente.
c19. Establecer la fecha de vencimiento de una tarea:
El usuario podr fijar una fecha para la cual la fecha debera estar realizada.
c20. Editar una tarea creada con anterioridad:
La informacin concerniente a una tarea podr ser modificada despus de su
creacin.
c21. Compartir una lista:
Las listas de tareas creadas por un usuario podrn ser compartidas con otros
usuarios de la aplicacin
c22. Eliminar una lista:
Las listas de tareas creadas por un usuario podrn ser eliminadas por dicho
usuario.

12

c23. Establecer los ajustes predeterminados de creacin de tareas rpidas:

El usuario debe poder establecer la configuracin bsica de las tareas que se crean
de manera rpida haciendo uso de la configuracin de la aplicacin.
c24. Enviar comentarios de la App a los desarrolladores:
El usuario podr reportar a los desarrolladores la existencia de bugs o mandar
sugerencias que permitan mejorar el programa.
c25. Establecer criterio de ordenacin de los listados:
El usuario debe poder decidir el campo que establecer el orden en el que se
muestran los listados.
c26. Ocultar o mostrar listados predeterminados:
El usuario debe poder establecer cules de los listados predefinidos desea que
aparezcan en el men principal y cules no. Este ajuste puede ser diferente para el
mismo usuario, segn el dispositivo que utilice.

13

Esquema de Navegacin de Casos de uso

14

Alcance del TFG

Por la extensin de la aplicacin se prev que no acabe con el trabajo de fin de grado, eso nos
obliga a asignar prioridades en funcin de las necesidades de la empresa colaboradora. Por lo
tanto hemos realizado una pila de producto para decidir qu funcionalidades abarca el
proyecto, de cules es posible su realizacin y cules estn previstas para un futuro fuera del
proyecto.
Pila de la aplicacin
Ordenaremos por orden de importancia las diferentes tareas asignadas para la aplicacin:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Visualizacin de listas de tareas en la aplicacin de iPhone

Visualizacin de las tareas sobre iPhone
Edicin de tareas en iPhone
Edicin de las listas en iPhone
Compatibilizar vistas sobre iPad
Permitir bsqueda de tareas
Men de ajustes de la aplicacin
Soporte para la utilizacin de la aplicacin de modo Offline
Adaptar la aplicacin para su uso en mviles Android
Adaptar la aplicacin para su uso en Tablets
Adaptar la aplicacin para otros dispositivos (BlackBerry, Windows Phone)

En principio intentaremos abarcar hasta el punto 5 de la pila, aunque en funcin del tiempo y
costes de realizacin dichas tareas, est sujeto a cambios.

15

Diseo
Diseo de las interfaces
El diseo de las interfaces se ha llevado a cabo mediante un detallado prototipado. Los
motivos y su evolucin estn explicados en el anlisis de requisitos de este mismo documento.
Listados

Resumen: En esta pantalla se mostrarn al usuario las tareas recin creadas que todava no
han sido revisadas. Desde este men el usuario podr editar tareas, aadirlas, o completarlas
de un modo cmodo y sencillo.
Casos de uso recogidos: c4: Filtrar listados, c7: Aadir tareas de modo simple, c8: Aadir una
tarea de modo avanzado, c10: Completar una tarea, c11: Ver una tarea

16

Listados -> Buscar

Resumen: En cualquier listado podemos pulsar el botn de bsqueda para encontrar las tareas
que contengan un texto.
Casos de uso recogidos: c5: Realizar bsquedas
Listados -> Editar

Resumen: En el modo de edicin de listados el usuario puede completar tareas, moverlas en

caso de que los listados no sean los predefinidos (Como por ejemplo el listado Hoy que se
calcula a partir del da de la tarea) o eliminarlas.
Casos de uso recogidos: c6: Asignar lista a las tareas, c9: Eliminar las tareas, c10: Completar
una tarea

17

Listados -> Editar -> Mover tareas

Resumen: Desde este men se pueden modificar los listados a los que pertenecer una tarea.
Casos de uso recogidos: c6: Asignar lista a las tareas
Men

Resumen: Deslizando el dedo hacia la derecha en un listado se accede al men, desde el cual
se podr acceder a los listados predeterminados, como Destacados, Hoy o Completadas, y
a los listados creados por el usuario.
Casos de uso recogidos: c3: Listar tareas

18

Men -> Listados predeterminados

(*) No definiremos todos los listados predeterminados ya que todos actan de forma similar (e.g. el listado destacados en base al
campo destacados que se modifica en la creacin o edicin de una tarea).

Resumen: El listado Hoy es un listado predeterminado en el que se muestran las tareas cuya
fecha de vencimiento establecida es el da actual. Como la fecha de vencimiento no se
establece en base a ningn listado prestablecido, no se pueden mover tareas a este listado, ni
desde este listado a otros. Si se desea mover una tarea al listado Hoy ser necesario cambiar
su fecha de vencimiento.
Casos de uso recogidos: c10: Completar una tarea, c11: Ver una tarea
Men -> Editar

Resumen: El modo de edicin permite ordenar los listados creados por el usuario y
reordenarlos, para facilitar la visualizacin de aquellos que se consideren ms importantes.
Aunque las bandejas predefinidas no se pueden borrar del mismo modo, s que se puede evitar
su visualizacin pulsando en ellas, donde podremos controlar su comportamiento y aparicin.
Casos de uso recogidos: c22: Eliminar una lista.
19

Men -> Editar -> Lista predefinida

Resumen: Al pulsar sobre una lista en el modo de edicin, llegaremos a esta ventana en la cual
podremos establecer los criterios de aparicin y ordenacin de las listas predefinidas. Las
opciones nos permiten establecer el criterio de ordenacin o de aparicin en el men,
pudiendo no mostrar un campo predefinido o mostrarlo slo si tiene algn elemento.
Casos de uso recogidos: c25: Establecer criterio de ordenacin, c26: Ocultar o mostrar listados
predeterminados.
Men -> Editar -> Lista creada

Resumen: Desde el men, con la opcin de edicin, pulsando una lista creada llegaremos a
esta ventana. Esta es igual a la de creacin de una nueva lista, con la salvedad de que en esta,
est la opcin de eliminacin de la lista.
Casos de uso recogidos: c25: Establecer un criterio de ordenacin, c21: Compartir una lista,
c22: Eliminar una lista.
20

Men -> Nueva lista

Resumen: Se abre en una ventana modal y permite la creacin de una nueva lista, donde se
establecen, adems del nombre y el criterio de ordenacin, los usuarios con los que se desea
compartirlas tareas de dicha lista.
Casos de uso recogidos: c25: Establecer un criterio de ordenacin, c21: Compartir una lista.
Men -> Nueva lista -> Compartir con

Resumen: Esta ventana sirve para seleccionar los usuarios con los que se desea compartir una
lista de tareas.
Casos de uso recogidos: c21: Compartir una lista.

21

Listados -> Crear/ Ver/ Editar tareas

Resumen: Desde este men se pueden ver y editar todas las caractersticas propias de cada
tarea, adems de posponer (retrasar la tarea un da) delegar a otra persona dicha tarea, o
eliminarla definitivamente.
Casos de uso recogidos: c9: Eliminar una tarea, c11: Ver una tarea, c12: Posponer una tarea,
c13: Delegar una tarea, c20: Editar tarea creada con anterioridad.

Resumen: Cada uno de los parmetros del men de edicin de las tareas ofrece una ventana
para configurarlo.
Casos de uso recogidos: c14: Aadir subtareas, c15: Establecer la prioridad de las tareas, c16:
Destacar tareas, c17: Etiquetar tareas, c18: Establecer intervalo de repeticin, c19: Establecer
fecha
de
vencimiento

22

Diagrama de navegacin por ventanas

23

Diseo en iPad
En iPad, el men lateral de la aplicacin estara fijo, y a su derecha se podr ver los listados desplegados, haciendo una navegacin ms fluida, tal y como se
muestra en el prototipo a continuacin:

24

Arquitectura de 4IKIM
4IKIM Knowledge Center, en adelante 4IKIM KC, est diseado para ser una aplicacin
completamente extensible. Vendra a ser un ncleo, una aplicacin base a la que se le pueden
aadir multitud de mdulos que permitan controlar de forma ms usable los distintos tipos de
elementos de 4iKIM (chats, gestin de tareas, gestin de documentos, etc.) o ampliar la
funcionalidad.
Aunque 4IKIM KC est pensada para ser el contenedor de otras aplicaciones, es una aplicacin
para la gestin de trabajo corporativo, conteniendo la funcionalidad genrica de 4iKIM y puede
ser utilizada de manera independiente sin tener ninguna de ellas activas.
Al margen de 4IKIM KC, las aplicaciones pueden ser instaladas de forma independiente. La
aplicacin a realizar en este proyecto es uno de los mdulos para 4IKIM KC, pero se har como
aplicacin independiente.
La estructura bsica de 4IKIM KC seguira el esquema que se muestra a continuacin.

Sabiendo esto, el tema del que trata el proyecto es la realizacin de una aplicacin para la
gestin de tareas, que contendra mdulo, formularios y servicios asociados partiendo de las
respectivas interfaces comunes con el resto de aplicaciones.

25

Arquitectura de Task4U
Arquitectura fsica
El modelo predominante de arquitectura en tres capas (cliente, servidor web y base de datos)
ha dejado paso a un nuevo modelo en el que un servidor web de APIs es consumido por varias
aplicaciones o servicios (aplicaciones mviles, webs, bus, colas).

Nuestra aplicacin seguir este modelo, por lo que obtendr y modificar los datos a travs de
un servidor API web, que es el encargando de mantener la persistencia de la informacin.
En un futuro sera posible integrar una persistencia propia de la aplicacin para poder utilizarla
en modo offline. Para ello se utilizara una base de datos SQLite que almacenara los datos
recogidos en el servidor de 4IKIM.
Arquitectura lgica
La arquitectura lgica de nuestra aplicacin estar basada en el patrn MVC (Modelo Vista
Controlador).

Los datos son obtenidos de la API mediante llamadas a los servicios REST con lo que se
alimentarn nuestros modelos. El controlador se encargar de la comunicacin entre el
modelo y la presentacin (la vista).
26

Patrones utilizados

Abstract Factory [GoF]: El patrn Abstract Factory nos permite crear, mediante una
interfaz, conjuntos o familias de objetos (denominados productos) que dependen
mutuamente y todo esto sin especificar cul es el objeto concreto.
State [GoF]: Se utiliza cuando el comportamiento de un objeto cambia dependiendo
del estado del mismo. Por ejemplo: una alarma puede tener diferentes estados, como
desactivada, activada, en configuracin. Definimos una interfaz Estado_Alarma, y
luego definimos los diferentes estados.
Strategy [GoF]: Determina cmo se debe realizar el intercambio de mensajes entre
diferentes objetos para resolver una tarea. El patrn estrategia permite mantener un
conjunto de algoritmos de entre los cuales el objeto cliente puede elegir aquel que le
conviene e intercambiarlo dinmicamente segn sus necesidades.
Template Method [GoF]: Abstrae todo el comportamiento que comparten las
entidades en una clase (abstracta) de la que, posteriormente, extendern dichas
entidades. Esta superclase definir un mtodo que contendr el esqueleto de ese
algoritmo comn (mtodo plantilla o template method) y delegar determinada
responsabilidad en las clases hijas, mediante uno o varios mtodos abstractos que
debern implementar.
Plugin [PoEAA]: permite agregar funcionalidad a nuestro sistema en forma dinmica
utilizando configuracin, por lo general se usan en frameworks que permitan agregar
nuevas formas de implementar funcionalidades ya existentes.

Uso de los patrones

Los patrones que se utilizan en la estructura de las aplicaciones y extensiones para 4IKIM KC
son los siguientes:

Nivel de aplicacin:
o Abstract Factory: Para enlazar la instanciacin del servicio, la factora de
formularios y los mdulos.
Nivel de servicio:
o Abstract Factory: Para enlazar en la instanciacin con el servicio web
correspondiente y el motor de persistencia local.
o State: Para diferenciar entre el funcionamiento Online y Offline.
Nivel de formularios:
o Abstract Factory + Plugin: Para la instanciacin y carga de los formularios.
o Strategy: Para la independencia entre IOS y Android.
o Template Method: Para algoritmos iguales que difieran en ciertas operaciones
nicamente.
Nivel de Mdulos:
o Plugin: Instanciacin y carga de los mdulos.

27

Diagramas de clases
Task4UApp
Utiliza la composicin para unir la interfaz, el servicio y la lgica.

Servicios
Los servicios se la que se encarga de las llamadas a la API. Utiliza el patrn state, ya que en
caso de estar en modo online debe llamar a la API mientras que si est offline debe utilizar una
base de datos SQLite, aunque por el tiempo limitado del proyecto se prev no dotar de
funcionalidad offline a nuestra aplicacin.
Task4UService extiende a I4UService, que es comn a todas las aplicaciones de la
plataforma.

28

Capa de Lgica de Negocio

La lgica de negocio la compone la clase Task4UModule que se encarga de nutrir a las
interfaces realizando las llamadas a la capa de servicio. Implementa la interfaz I4UModule,
comn a todas las aplicaciones de 4IKIM.

Capa de presentacin
Los formularios que utilizaremos en la aplicacin heredan de Task4UForm, la cual completa la
descripcin de I4UForm. Se utiliza el patrn strategy y los formularios resultantes sern la
capa visible de la aplicacin final.

29

Representacin de una tarea en Task4U

La clase Task ser el modelo que utilizaremos para representar una tarea en nuestra
aplicacin, servir en el men de visualizacin/edicin/creacin de tareas, el cual recoger la
mayor parte de sus datos de esta clase.
Est asociada a las clases Tag, User y Recurrence; Tag y User son clases que almacenan el
identificador y el nombre de estos elementos en 4IKIM, aunque en 4IKIM dichas entidades son
ms grandes, slo modelaremos lo necesario, la clase Recurrence por ser algo ms
complicada la explicar a continuacin.

30

Recurrence
Recurrence es la clase que representa la repeticin de las tareas, existir siempre y cuando
el valor booleano periodic de una tarea sea verdadero, y sus 3 valores representan cada
cundo ha de repetirse la tarea:

recurrenceFrequency: Segn este valor entero la tarea se pospondr

o 0: Das
o 1: Semanas
o 2: Meses
o 3: Aos
recurrenceInterval: Contendr el nmero de das, semanas, meses o aos tras los
cuales la tarea se repetir.
recurrenceSince: El momento a partir del cual la tarea comenzar a repetirse, por
defecto ser el momento de creacin de dicha tarea.

De este modo una tarea que tiene recurrenceFrequency 1, recurrenceInterval 2, y

recurrenceSince el 7 de Julio, se ejecutar por primera vez el 7 de Julio, la siguiente vez el
21 del mismo mes, etc
Representacin de una lista de tareas en Task4U
La clase TaskList ser el modelo que utilizaremos para representar una lista de tareas en
nuestra aplicacin, y servir para generar el men lateral de la aplicacin.
Est asociada a la clase User, la cual contiene el nombre del usuario propietario de la lista, su
id en 4IKIM, y el grupo al que pertenece dicho usuario.

31

Modelos simplificados de datos para la navegacin

En los listados navegables no se mostrar toda la informacin de las tareas ni de los listados de
tareas. Algunas propiedades de las tareas como su nombre o su prioridad sern visibles desde
un listado, otras sin embargo, tales como su intervalo de repeticin o sus subtareas, no lo
sern.
Del mismo modo que la informacin que se desprende de estos modelos debe ser una versin
ms reducida de los mismos, la informacin que se debe poder editar, tambin lo ha de ser,
por ejemplo podremos marcar como completa una lista desde el listado navegable, pero no
podremos cambiar su nombre o prioridad, as que dichos modelos nos servirn tambin para
limitar la responsabilidad de los listados.
Para ello, utilizaremos clases para modelar las listas de navegacin, del modo siguiente:

32

Implementacin
Por qu Appcelerator Titanium?
Para la creacin de nuestra aplicacin, hemos decidido utilizar el Framework de la empresa
Appcelerator, ya que nos ofrece una serie de ventajas, como son:

Es una Framework que nos permite desarrollar aplicaciones multiplatorma sin repetir
el cdigo, tanto para iPhone, como para iPad, Android, BlackBerry, etc. La mayor parte
del cdigo slo tendremos que pensarlo una vez, aunque cada dispositivo tiene una
serie de particularidades que hay que tratar individualmente.
Es gratuito tanto para uso personal como comercial.
Es software libre; tener acceso al cdigo fuente nos garantiza que no se est
inyectando cdigo malicioso en nuestra aplicacin, y asegura el mantenimiento del
cdigo a largo plazo.
El lenguaje de programacin utilizado es JavaScript, por lo que utilizaremos un
lenguaje muy frecuente y til para desarrollos posteriores, ya sea en nuevas
aplicaciones para mviles con Titanium, o bien en desarrollo de aplicaciones web.
Aspecto y uso de controles nativos.

Formacin JS
Al iniciar el proyecto, tan slo haba programado en JavaScript pequeos scripts para
aplicaciones web, al embarcarme en un proyecto de esta magnitud he tenido que dedicar una
semana a leer tutoriales y manuales de JavaScript, para familiarizarme con el lenguaje.
Mediante dichos tutoriales he aprendido las formas de emular orientacin a objetos con
JavaScript, cosa que el propio lenguaje no tiene de forma natural.

Decisiones de implementacin
Recurrence
Se ha decidido la creacin de una clase para la conversin de los valores de la clase que se
ocupa de la recurrencia llamada RecurrenceConverterHelper, la cual, a partir de unos
valores de la clase Recurrence, determina la repeticin de acuerdo al formulario de
repeticin de la tarea:

33

Interaccin entre clases

La comunicacin entre las distintas capas de nuestra aplicacin se realiza mediante
controladores de eventos y el paso de callbacks.
Callbacks
En algunos casos, cuando se necesita obtener informacin de la capa de datos para una vista,
se hace una llamada a la capa de lgica y, adems de los parmetros necesarios concernientes
a los datos requeridos para obtener los datos necesarios, se introduce una funcin propia de
ese formulario para que, una vez tengamos los datos de la capa correspondiente, la vista
pueda rellenarse.
De igual modo, cuando desde una vista abrimos otra, que podra hacer cambios en la primera,
abrimos la nueva vista pasando como parmetro una funcin callback a la que solemos
denominar fn_actionResponse, la cual es responsable de actualizar los datos de la primera
vista al salir de la segunda, en caso de que la segunda vista haga modificaciones en los datos
que deban reflejarse en la primera,.
Por ejemplo, cuando desde el listado de tareas, abrimos una tarea especfica para su edicin,
se introduce una funcin callback y, si el nombre de la tarea o alguna otra propiedad visible
en la lista de tareas cambia, dicha funcin se activar editando la tarea en el listado de acuerdo
a los cambios del formulario de edicin al salir del men de edicin.
Controladores de eventos
Hay ocasiones en las cuales es ms conveniente o inevitable el uso de controladores de
eventos para desencadenar la ejecucin de los mtodos de una clase desde otra, por requerir
una accin del usuario, una respuesta de la API o en ocasiones por simplicidad del cdigo.
A pesar de la gran potencia de los eventos en JavaScript, hay que controlarlos con cuidado, ya
que al establecerlos mediante EventListener quedan en memoria, por lo que es
conveniente eliminar todos los EventListener en el close() de los formularios.
Se usa EventListener, entre otras cosas, para controlar el cdigo que se ejecuta al hacer clic
en cualquier tabla de contenido dinmico, para la apertura o cierre del men, o para
completar los formularios cuando se recibe la informacin de la API.

34

Ejemplo de controlador de eventos y callback

Para ilustrar el uso de los controladores de eventos y los callback observamos el cdigo con el
que se interacta entre el formulario que lista las tareas y el que permite editar una de ellas.
Una vez construido el listado de tareas, en la tabla que muestra las tareas, colocamos un
EventListener que controle el clic en la tabla, y nos diga cul de las filas ha sido pulsada:

A la funcin taskListTableClick le pasamos el id del elemento que ha sido pulsado, su

nombre, necesario para mostrar en el ttulo del formulario de edicin de tareas, y tambin la
funcin de callback fn_refresh, que refrescar el listado en caso de que la tarea finalmente
sea modificada.

La funcin fn_refresh llama a la capa de lgica de negocio para obtener la lista de tareas y
mostrarlas actualizadas en el formulario del listado. Dicha llamada a la lgica de negocio
tambin nos servira para ilustrar el uso de callbacks y EventListener, pero nos
centraremos en la llamada inicial a tasksListTableClick.

Hemos escrito este mtodo en la lgica de negocio en lugar del formulario de listados, ya que,
aunque hace referencia al clic en la tabla de dicho formulario, requiere el uso de la factora de
formularios para la creacin de uno nuevo.
En este mtodo creamos un nuevo formulario del tipo Task4UTaskForm, al cual le pasamos,
adems de los parmetros requeridos para la creacin de dicho formulario, el parmetro
fn_callback que hace referencia a la funcin fn_refresh del listado de tareas.

35

Al iniciar el formulario, volvemos a requerir la lgica de negocio para la obtencin de los datos
del formulario, recordemos que no es posible obtener todos los datos para la generacin de la
tarea desde el listado, ya que el listado, para agilizar la carga y minimizar el uso de memoria,
usa un modelo simplificado de los datos (NavigationTasksListModel).

Cuando hemos recuperado los datos, desde la lgica volvemos a este formulario utilizando
eventos, para ello colocamos un EventListener en el formulario principal self de
Task4UTaskForm:

Y lo desencadenamos desde Task4UModule usando el cdigo siguiente en getTask:

Hecho esto, se ejecutar el mtodo getData de Task4UTaskForm, al que pasar, como se

puede observar en el cdigo anterior, los datos que ha recibido desde el servicio.

Con los datos recibidos, procedemos a rellenar el formulario utilizando el mtodo

fillTaskForm del formulario de edicin de las tareas.

36

Diagrama de secuencia
En el siguiente diagrama se puede observar el proceso mediante el cual la peticin de datos se traslada hasta el servicio API Web, y del mismo modo cmo
se devuelve la informacin al formulario que lo solicita.

37

Ejemplo de construccin de un formulario

Como ejemplo de la construccin de un formulario, tomaremos PriorityForm, mediante el
que asignamos la prioridad a una tarea. Veremos el cdigo por partes para ir comentando los
detalles del mismo.
La clase contiene lo siguiente:

En la primera lnea, declaramos Task4UForm, que es el formulario del que hereda. Eso se lo
especificamos en la penltima lnea, asignando al prototype de este formulario una instancia
de Task4UForm, lo que hace que las instancias de Task4UPriorityForm cuenten con los
mtodos especificados en Task4UForm.
En la ltima lnea exportamos este formulario para que pueda ser utilizado desde otras clases
de nuestro programa.
Observar que podramos llamar a este formulario desde cualquier otra parte de nuestro
cdigo, aunque en nuestro programa la funcin de creacin de formularios residir en un
formulario AbstractFactory diseado para tal fin.
Visto esto, veremos el contenido del formulario Task4UPriorityForm:

38

En JavaScript, el this tiene un comportamiento diferente al de otros lenguajes [1], eso hace que
en algunas partes del cdigo no tengamos visibilidad al contexto, y no podamos utilizar las
funciones del formulario Task4UForm desde el que estamos heredando. Para solucionar este
contratiempo, asignamos a la variable _this el contenido de this para poder utilizar el contexto
en cualquier lugar de nuestro formulario.
Despus de esto creamos funciones que utilizaremos para los eventos. Se puede apreciar la
creacin de dos funciones, fn_open, y fn_close, que las asignaremos a los distintos eventos.
Esto nos permite escribir cdigo que ejecutar en la apertura o cierre de nuestros formularios.
Por ejemplo, el cdigo que contiene el fn_close es el siguiente:

En la documentacin que hemos ledo, nos hemos informado de que JavaScript no siempre
elimina correctamente los EventListener al cerrar los formularios. Para asegurarnos de que
sean borrados y no consuman memoria, los eliminamos uno a uno con
removeEventListener.
Hecho esto, creamos la ventana principal, a la que denominamos self

Podemos observar el uso de this para la creacin de la ventana, esto hace que en lugar del
crear la ventana con el mtodo de Titanium, usamos el definido en Task4UForm, permitiendo
que herede la mayor parte de sus propiedades, y haciendo que no tengamos que repetir,
dichas propiedades en todos los formularios de nuestra aplicacin.
Despus aadimos los EventListener a la ventana que acabamos de crear:

http://www.etnassoft.com/2012/01/12/el-valor-de-this-en-javascript-como-manejarlo-correctamente/

39

Despus crearemos el TableView, una tabla que contiene una lista de filas. Este elemento es
muy importante ya que se utiliza en la mayora de los formularios de la aplicacin, para
mostrar listados, mens, o las propiedades de las tareas, por ejemplo.

Lo primero que hacemos, es crear el tableView y luego, una seccin (tableViewSection).

Las secciones nos permiten separar filas en grupos

Creamos las 9 filas tableViewRow con el for, utilizando el mtodo

createText11TableViewRow, de Task4UForm, y para cada una de ellas definimos su ttulo,
que ser las letras visibles en el tableViewRow, la imagen que se mostrar en su lateral, si
est o no desmarcado, segn la prioridad de la tarea, y otra serie de parmetro. Una vez
creada cada fila la introduciremos en la seccin con el mtodo add.
Una vez tenemos la seccin completa, la aadimos al elemento data del tableView, el cual
es un array de secciones. Si tuviera ms de una podramos aadirlas secuencialmente usando
el mtodo para arrays, push(), por ejemplo.
40

En esta parte del cdigo podemos ver un detalle interesante, el tableView se ha creado
llamando al this, el tableViewRow usando _this, ya que no est en el mismo mbito al estar
dentro del for, y para la creacin de la variable section (que sirve para crear diferentes
secciones dentro de un tableView), se ha utilizado Ti.UI.createTableViewSection(),
por lo que crearemos una seccin predeterminada por Appcelerator Titanium.
Una vez diseado el aspecto del tableView, pasaremos a darle funcionalidad, mediante un
EventListener al evento click del mismo:

En la primera lnea dentro de la funcin se lanza el evento al formulario superior, para que este
pueda actualizar su fila, con el nuevo valor que acabamos de cambiar.
La segunda lnea llama a la clase Task4UModule, que en nuestra aplicacin se encarga de
hacer las peticiones a los servicios, tanto para devolver en callback una serie de datos con
mtodos del tipo de getTasks como, en este caso, hacer modificaciones de los mismos en la
capa de datos por medio de la API.
Con la tercera lnea, modificaremos la prioridad en el objeto Task con el que estamos
trabajando. Acto seguido ejecutaremos una funcin que se ha pasado desde el padre como
parmetro, en concreto lo que hace dicha funcin es decirle al formulario de tareas que la
prioridad ha sido cambiada, para que sepa que al salir del formulario debe actualizar los datos
en el listado, ya que en el listado de tareas hay un indicador de prioridad asociado a cada tarea
(en la parte izquierda se muestra color azul, rojo o gris, segn si la urgencia de la tarea).
Para finalizar este evento cerramos la ventana eliminndola adems del NavigationGroup.

Por ltimo aadimos la tabla al formulario y lo devolvemos, para que cuando hagamos la
llamada a esta clase podamos hacer uso del formulario.

41

Task4UModule
La clase Task4UModule es la que se encarga de enlazar los formularios con los servicios.
El nmero de mtodos que esta clase tiene es muy grande. Entre otros, contiene mtodos para
crear nuevas tareas, buscar usuarios o grupos, marcar como favorita una tarea, etc.
Ejemplo: Funcionamiento de un mtodo de Task4UModule
Para ilustrar el funcionamiento de los mtodos de la clase veremos con ms detalle uno de
estos mtodos:

Observamos que el mtodo getTaskLists tiene dos partes, al principio declara una funcin,
llamada service_callback, que se utilizar ms adelante. En ella parsea los datos que
llegan del servicio aunque en este caso no sea necesario.
Despus de parsear los datos, que en este caso tan slo hace una asignacin de data, se lanza
un evento en el formulario, llamando al evento getData de ese formulario.
Aunque en la creacin del formulario de prioridad, no se puede apreciar, hay formularios, que
precisan una llamada a la capa de servicio para completar sus datos, ejemplos de estos
formularios podran ser: el listado de tareas, el formulario en que se edita una tarea, o en el
que se comparten y delegan.
Para ello, dichos formularios disponen de un EventListener adicional que llama a un
mtodo getData, que utilizan para completar el formulario con los datos recibidos.
Para aadir el EventListener se utiliza:

En este EventListener se puede apreciar que se incluye el identificador del formulario, para
que cuando se devuelvan los datos, solo sea este formulario quien los utilice.

42

El mtodo al que responde el evento y que completa el formulario es el siguiente:

Podemos observar que en este mtodo se utiliza la respuesta del servicio

callback.data.response, para la construccin de elementos del tipo
NavigationTasksListModel y con estos se crean las filas del formulario.
Una vez se termina de crear el service_callback, se hace la llamada al servicio, al cual se le
pasa el mtodo recin creado. Cuando finalice la llamada al servicio, se ejecutar este callback,
que concluir con la llamada al getData del formulario, y rellenar sus datos.
Task4UForm
La clase Task4UForm tiene los mtodos que utilizaremos para crear los elementos de
nuestros formularios, hereda de I4UForm, y algunos de los mtodos que contiene son los
siguientes:

La principal ventaja que nos otorga el uso de esta clase es que podemos redefinir el
comportamiento bsico de cualquier tipo de elemento de Titanium, y usarlo en todos nuestros
formularios sin tener que indicarlo en cada uno de ellos.

43

Por ejemplo, si queremos que todos nuestros botones tengan la propiedad style:
bordered, podemos hacer que el mtodo createButton cree, un botn Ti.UI.Button
con esa propiedad, y devolver el elemento creado en el return. Adems de poder utilizar
propiedades por defecto, tambin podemos elegir un comportamiento segn el dispositivo, o
aadir eventos y propiedades, que estos el elemento por defecto no trae.
Ejemplo: Funcionamiento de un mtodo de Task4UForm
Veremos con ms detalle uno de los mtodos de la clase, para que se comprenda mejor la
explicacin dada:

En el ejemplo, podemos observar la creacin de un botn. Se podr asignar adems un

comportamiento distinto segn el tipo de dispositivo.
En otros tipos de elementos ms complejos, adems de aadir parmetros, tambin se aade
eventos no nativos para tener mayor control sobre los mismos.

44

Slider
En la aplicacin para iPhone, y para iPad en modo vertical, se plante poner un men
deslizante en el lateral, que mostrara u ocultara los listados de tareas para poder acceder a
ellos de modo rpido:

Dicho men no es nativo, y fue necesario valorar distintas alternativas que encontramos. Unas
aseguraban ser compatibles con Android e iOS, otras por el contrario slo para iPhone, pero el
uso de ninguna era trivial, y plantearon varias complicaciones en su implementacin, ya que al
combinarla con los navigationGroup de Titanium daba algunos errores de la plataforma.
Las libreras para la implementacin de dicho complemento han sido seleccionadas de entre
varias encontradas de un repositorio de GitHub y adaptadas a nuestra aplicacin. Su
implementacin ha sido algo compleja, ya que est fuera del modelo de navegacin que
tenamos pensado inicialmente.

45

Adjunto un proyecto de prueba con el slider que al final decidimos utilizar [2]:

Puesto que, como hemos explicado, daba problemas el utilizar los NavigationGroup con los
distintos listados del men, se cre una clase adicional, MainMenuController, que
almacenara los distintos listados del men principal, de modo que, al estar todos los
formularios del men en dicha clase, se pueden abrir al cambiar entre los distintos listados sin
recurrir al control nativo. Adems, fueron realizadas pequeas modificaciones en el cdigo de
dicho Slider adaptndolo a nuestro programa.
El resultado final de la implementacin es el siguiente:

https://github.com/dbankier/CoverSliderExample

46

Otros aspectos
Internacionalizacin
Titanium cuenta con funciones para internacionalizacin bajo el namespace Ti.Locale,
dichas funciones sirven para convertir cadenas de texto, nmeros, fechas, etc. Para ello se
debe crear una carpeta i18n, dentro de la cual se crear una carpeta por idioma que deseemos
en la aplicacin usando para su nombre la ISO 639-1 [3]. Por ejemplo, para el idioma espaol
debemos crear la carpeta es y dentro un archivo con el nombre strings.xml, en el cual
escribiremos las cadenas que deseemos que se muestren en el idioma.

Para utilizar la cadena internacionalizada, escribiremos:

Mdulo para fechas

Para la gestin de fechas, se ha utilizado la librera moment.js [4] la cual es muy fcil de usar y
se encarga de convertir las fechas a gran variedad de formatos. Para utilizarla, se carga la
librera mediante require, y se usa pasndole la fecha que se desea convertir y el formato de
salida.

Variaciones entre dispositivos

Hay ocasiones, en las cuales se espera que la aplicacin se comporte de un modo distinto en
iPad y en iPhone, por ejemplo, el men lateral ser reemplazado por una ventana con dos
vistas (a la izquierda el men lateral y a la derecha el listado seleccionado), en el caso de que
se est ejecutando en iPad.
Para ello, podemos utilizar la propiedad Ti.Platform.osname que especifica el dispositivo
que se est utilizando, en nuestro caso, lo asignamos a la variable glb.device.

3
4

http://es.wikipedia.org/wiki/ISO_639-1
http://momentjs.com/

47

Formulario de listados y de edicin

Por ser estos probablemente los formularios ms importantes, hacemos una pequea
comparativa de los prototipos iniciales para estos formularios respecto a cmo ha quedado su
implementacin con Appcelerator Titanium

Se puede observar el gran parecido entre el prototipo inicial y el logrado en su implementacin

48

Conclusiones
A pesar de que la aplicacin final ha tenido algo menos de funcionalidad que la prevista en el
inicio, creemos que como prueba de concepto sirve de sobra para demostrar que una
herramienta como la desarrollada facilita en gran medida la gestin de tareas para los usuarios
de 4IKIM.
Mientras que las fases tempranas del proyecto (anlisis y diseo) se realizaron dentro de los
plazos previstos, la estimacin del coste de desarrollo de los formularios e interfaces se alej
bastante de las expectativas iniciales, adems tampoco se tuvo en cuenta el coste en
formacin de JavaScript necesario. Esta desviacin unida a la limitacin en el tiempo, nos ha
obligado a recortar funcionalidades, pero se ha procurado realizar las partes ms especficas
de la aplicacin, omitiendo las partes que supondran cdigo similar al realizado e intentando
marcar el camino para un desarrollo posterior. En vistas de esto, se ha avanzado ms en la
integracin con el iPad que con la realizacin de navegacin de las subtareas o las listas de las
mismas.
Puesto que el trabajo se ha realizado en estrecha colaboracin con la empresa, ya que el
desarrollo del proyecto lo hemos hecho dentro de sus instalaciones, somos conscientes que la
empresa est interesada en proseguir con el proyecto, signo de nuestro pequeo xito con la
aplicacin.

Lecciones aprendidas
Durante el proyecto he observado, entre otras cosas, la dificultad de estimar el alcance de un
proyecto de esta magnitud, y ms con el desconocimiento inicial tanto de la plataforma
Appcelerator Titanium como del uso de Mac, con el cual no estaba especializado, y con mi baja
experiencia en JavaScript.
Gracias a la extensa documentacin, y al personal de 4IKIM, hemos logrado desarrollar la
mayor parte del proyecto, pero creo que el mayor logro ha sido la gran cantidad de
conocimientos adquiridos, tanto en el lenguaje como en la programacin de aplicaciones para
mviles, as como tambin en manejar un proyecto de esta envergadura.
Mis conocimientos de JavaScript han mejorado notablemente, fue necesario estudiar
manuales y tutoriales de JavaScript. Con anterioridad haba usado mucho los eventos, ya que
en los formularios de C# haba usado bastante el paradigma dirigido por eventos, sin embargo,
no puedo decir lo mismo de los delegados, cuyo uso se me ha esclarecido mucho gracias al uso
casi imprescindible en este lenguaje de callbacks y funciones de retorno.
En cuanto a la programacin para dispositivos mviles ahora mismo sera capaz de programar
aplicaciones para todo tipo de dispositivos mviles de un modo rpido, ya que considero que
en este aspecto, es donde se ha concentrado la mayor parte del conocimiento adquirido.
Puesto que todo el lenguaje se ha realizado bajo su plataforma, el aprendizaje de Appcelerator
Titanium ha sido muy grande, y dada la proliferacin de los dispositivos mviles, creo que
estos conocimientos pueden representar un toque de distincin en mi perfil profesional.

49

Bibliografa
JavaScript

Osmani, A. 2012. Learning JavaScript Design Patterns. ISBN-13: 978-1449331818

Haverbeke, M. 2007. Eloquent JavaScript. ISBN-13: 978-1593272821
Joar, K. Mobk, M. Bjrky. 2013. Superhero.js. http://superherojs.com/

Appcelerator Titanium

Poulsen, T. Whinnery K. Lukasavage, T. Dowsett, P. 2009. Building Native Mobile

Applications. Appcelerator, Inc. E-book
Appcelerator. 2008. Titanium SDK & Titanium Studio Documentation.
http://docs.appcelerator.com/titanium/latest/

50

Anexo I: Prototipado en papel

51

52

53

54

55

56

57

58

59

60

61

62

63

64