IMPLEMENTADO FRAMEWORKS HTML5

Transcripción

1 IMPLEMENTADO FRAMEWORKS HTML5 Nuevas tendencias de desarrollo Miguel Ángel Mejía Ingeniero de Desarrollo Infotrack S.A. Bogotá Colombia Juan Carlos Ramírez Arquitecto de Soluciones de Software Infotrack S.A. Bogotá Colombia Resumen Este artículo presenta un análisis de tres frameworks de desarrollo para aplicativos Web bajo estándares HTML5. El método de comparación se realizó mediante la exploración de cada uno y su implementación sobre un caso de estudio definido. Se profundizó en criterios como tiempo de desarrollo, depuración de errores, manejo de excepciones, manejo de sesiones, interfaz de desarrollo, controles y componentes, manejo de datos y carga de archivos. Palabras Claves; Híbrido; HTML5; WebService; Inventarios; AJAX; ios; Android; Tecnologías Mobile;.Net; Eclipse; IDE; xcode; Aplicación Nativa; Componentes; Hardware; Universal; Landscape; Portrait; Mobile; Servicios; Centralización; RestFull; Sencha; PhoneGAP, Kendoui, Telerik. I. INTRODUCCIÓN El continúo avance y evolución de la WEB, así como el impacto que esta tiene dentro de los procesos de las empresas, obligan a entidades encargadas del desarrollo e implementación de estos procesos a examinar nuevas tendencias de desarrollo, esto con el fin de presentar soluciones con las últimas tecnologías del mercado y que al mismo tiempo sigan teniendo la robustez y seguridad que requieren las empresas y mejorando aspectos como velocidad y amigabilidad hacia el usuario final. Con la salida a la luz de HTML5 y CSS3, el modo en que las paginas se desarrollaban cambió, surgió una súbita relevancia de la usabilidad del cliente y generó un gran paradigma del cómo debían adaptarse a estos cambios las empresas desarrolladoras de software en donde todo el camino recorrido para dejar del lado del servidor la lógica de negocio y los lineamientos de despliegue Web se ven reversados por una tecnología que requiere grandes esfuerzos del lado del cliente bajo un lenguaje general como lo es JavaScript. La idea de arriesgarse a salir del círculo de confianza de lenguajes del lado del servidor como JAVA,.NET o PHP y modificar la forma en que se centralizan todos los procesos para crear páginas dinámicas y con poca complejidad, requiere una decisión que podría marcar un cambio en el modo en que todos los componentes se desarrollan, y puesto que las alternativas de interfaces de usuario ricas e interactivas que varían para cada plataforma y navegador fracasaron en su intento de ser universales, las empresas desarrolladoras de software se ven avocadas a decidir o relegarse, y es que ese gran afán por estandarizar la manera en que un aplicativo Web debe desplegar una interface de usuario enriquecida, con comportamientos trasversales para todos los navegadores del mercado ha obligado a los desarrolladores a adquirir tecnologías sin un considerable nivel de maduración como lo viene siendo HTML5, si le sumamos a esto las tendencias de uso, tráfico de red y rentabilidad de aplicaciones para Smartphones (ios, Android), hacen que la decisión sea mucho más que inevitable para cualquier casa de desarrollo de software Web [5]. Sin embargo se suponen ciertas ventajas al poder pensar en más dispositivos y usuarios finales con esta transversalidad. En base a lo mencionado anteriormente, se desarrolló un caso de estudio en el que se evalúan temas particulares tanto para la parte Web como para la parte Mobile, dichos aspectos se enfocan a como los componentes que posee cada nueva tendencia se comportan en un entorno empresarial más controlado. Para el caso específico del entorno móvil, se evalúa también el acceso a controles nativos del aplicativo (GPS, Cámara). Se analizaron 2 Frameworks para aplicativos Web móviles: Sencha Touch y Phonegap, ayudado por Jquery Mobile. Para aplicaciones Web, el análisis se hizo con KendoUI de Telerik. II. CASO DE ESTUDIO El caso de estudio se posiciona en un escenario administrativo, en donde se realizan movimientos de inventarios para entradas, salidas o traslados de producto en una bodega. Adicionalmente, se plantea una arquitectura de comunicación entre la aplicación y los datos basada en servicios web bajo C# para la transmisión y recepción de los inventarios. La idea principal de esto, es centralizar la entrada y salida de información del servidor, y que esta funcione apropiadamente con cada tecnología evaluada, sin la necesidad de que los servicios web se modifiquen. La meta es crear un sistema transparente para soluciones HTML5 donde tener la menor cantidad de lógica del negocio del lado del cliente es la mayor necesidad y así IMPLEMENTADO FRAMEWORKS HTML5 Página 1 de 10

2 mismo, el reto más grande. En cada una de las soluciones, se evaluaron varios de los siguientes aspectos según su aplicación particular en cada una: Manejo de lógica de negocio. Tiempo. Depuración de errores. Manejo de excepciones. Manejo de sesiones. Interfaz de desarrollo. Controles y componentes. Manejo de datos. Carga de archivos. Algunos de los aspectos se evaluaron por cada Framework, pero la depuración de errores, datos y archivos serán generales, ya que el proceso básicamente es el mismo para todas las tecnologías. III. SERVICIOS WEB Teniendo en cuenta el desafío presentado anteriormente, se plantea un sitio en C# encargado de la comunicación entre la lógica del aplicativo y los clientes WEB Mobile. En primer lugar, se define una estructura de comunicación de los datos para la solución, en este caso las respuestas del servidor entregaban objetos de transporte bajo una estructura JSON (JavaScript Object Notation) [6] el cual podría manejarse adecuadamente en los clientes. Se definen cuatro métodos para el correcto funcionamiento del aplicativo. El primero consiste en la transmisión de los últimos movimientos de inventario registrados. El segundo consta de la transmisión de los catálogos para el llenado de combos. El tercero, más específico, se encarga del envío de productos para la solicitud de un nuevo movimiento, donde se reciben algunos parámetros por parte del cliente. El último servicio se encarga de la transmisión del objeto de transporte con todo el inventario para su posterior procesamiento sobre la base de datos. Con este protocolo de comunicación se procede a la evaluación una a una de las tecnologías de implementación seleccionadas. Dentro de la implementación del código se deben tener en cuenta factores puntuales para el correcto funcionamiento y respuesta de los Servicios. Uno de estos es configurar el método para responder estructuras JSON, ya que es el objeto de transporte definido para el proceso. Para esto, se requiere en la cabecera del Servicio Web en C# ingresar el siguiente metatag de método [ScriptMethod( ResponseFormat = ResponseFormat.Json )]. Otro punto a tener en cuenta es la recepción de objetos de transporte, puesto que por defecto, los servicios de.net no aceptan peticiones AJAX. Para solucionar ese inconveniente, se coloca en la cabecera de clase (o se eliminan las líneas de comentario en la cabecera del servicio para proyectos Visual Studio 2010) la línea [System.Web.Script.Services.ScriptService]. Los objetos de respuesta deben tener una estructura JSON. Para esto se puede utilizar la librería de JSON por defecto de.net, o referencias de terceros que realicen dicha función [9]. El servicio se encuentra alojado en una instancia de Amazon EC2, esto con el fin de garantizar una disponibilidad alta del servicio para su consumo, La base de datos es MS-SqlServer 2008 R2, y el servidor Windows Server 2008 R2. Esto también con el objetivo de analizar los tiempos de respuesta del servidor, así como de la recepción y envió de datos en un entorno local o remoto. Para la configuración del servidor, el único requerimiento importante, en el caso de IIS (Internet Information Services) es establecer el MIME Type de application/json. Lo anterior debido a que por defecto el tipo json no se encuentra relacionado en el servidor, y por ende no funcionará apropiadamente. Otro modelo de comunicación en el que se profundizó, fue el modelo REST [7], este permite una comunicación más limpia con el servidor, puesto que ya define tipos de dato de respuesta por defecto, lo cual facilita el modo en que se entrega el resultado a la petición solicitada. Para este caso se pretendía definir un servicio REST con el fin de cumplir con los métodos definidos para el WebService. En primera instancia se define un proyecto SVC en Visual Studio, y se crea la cabecera explicativa del método, en este caso: [WebInvoke(Method="GET",ResponseFormat= Web MessageFormat.Json,BodyStyle= WebMessageBodyStyle.WrappedRequest,UriTemplate = "getproducts")] con lo que se define la cabecera del servicio, se puede ver que la respuesta ya posee un formato de tipo Json. En esta definición de servicios se posee de una Interface que describe todos los métodos y con sus respectivas cabeceras, donde la clase WCF implementa dicha interface y sus métodos. Cabe aclarar que para definir el servicio se debe realizar una configuración previa sobre el web.config del proyecto; En esta se debe definir el servicio, con su seguridad y enlaces para que estos sean procesados dentro del servidor. Puesto que para el ejercicio REST y SOAP no eran un punto de evaluación crítico, se tomó SOAP como el protocolo de comunicación debido al conocimiento previo que se tenía sobre este. IV. SENCHA TOUCH Sencha Touch es un framework de desarrollo HTML5 para dispositivos móviles. Sencha [1] además ofrece componentes y herramientas de desarrollo tanto para Web de escritorio como para Web Mobile, brindando un ecosistema completo para el desarrollo de aplicaciones Web que funcionen sobre diferentes dispositivos tanto móviles como de escritorio, las cuales pueden ser desarrolladas en su IMPLEMENTADO FRAMEWORKS HTML5 Página 2 de 10

3 herramienta de implementación denominada Sencha Architech que permite el diseño, desarrollo y despliegue de aplicaciones bajo un mismo entorno. La implementación de aplicaciones móviles en este entorno se hace mediante un modelo-vista-controlador (MVC), donde el modelo define la estructura en modo de objeto para la interacción con las vistas. El acceso a datos se da mediante objetos llamados Stores, que pueden ser locales (Basados en Arrays o cadenas JSON apuntando sobre archivos internos), o remotas mediante llamadas a servidores para la obtención de inventarios y catálogos. El controlador por su parte, define cada uno de los componentes generados anteriormente que se usaran en el flujo normal de la vista. Así mismo, define métodos, referencias y funciones que dan acceso a las múltiples definiciones y características que se tienen sobre sus elementos internos. Sencha Touch posee varias librerías de extensiones para usarse ya sea sobre Web o Mobile, algunas de estas pagas, y compuestas por otros componentes o extensiones de los mismos. Para el consumo de WebServices se utiliza un protocolo SOAP para la recepción de objetos de transporte con estructura JSON, los cuales son almacenados en stores específicos para su posterior uso. En la definición del modelo, se define la estructura del objeto de transporte, esto con el fin de utilizarlo como un único objeto dentro del cliente. La figura 1 muestra la interfaz gráfica para desarrollar aplicativos en Sencha touch, esta interfaz viene con la licencia de desarrollo de Sencha. Su precio oscila entre los USD $1000 y USD $19000 dependiendo del número de desarrolladores. datos, esto se produce luego de consumir uno de los servicios definidos anteriormente. Fig. 2. B. Plataforma de desarrollo. Visualización de últimos inventarios. Desde la relación de los controles, Sencha Architect presenta una interfaz Drag and Drop donde solamente con arrastrar los componentes a la vista se pueden ir configurando, ya sea para agregarle controles, referencias, storage o cualquier configuración que se quiera aplicar. Este IDE viene con el paquete de desarrollo que provee Sencha al momento de su compra, sin embargo, se puede probar por 30 días descargándolo desde la página oficial del producto: Sencha Arquitect provee controles que pueden ser para la interacción de los objetos, o para la vista; Dichos controles pueden ser botones, listas, datos, formularios, menús, árboles, contenedores, gráficas o controles de comportamiento, lo que hace que la disponibilidad de Sencha sea amplia en comparación a los demas frameworks, los cuales son mas específicos en sus controles por defecto. La figura 3 muestra controles de Sencha conectados con el Store de catálogos obtenido por el Web Service. Fig. 1. Panel de visión de componentes Sencha Architect. A. Lógica de Negocio. La implementación de lógica dentro de la solución se limita a validación o cálculos menores, debido a que los servicios WEB se encargan de definir y ejecutar toda la lógica necesaria para la correcta ejecución del sistema. En el cliente, los eventos JavaScript o los Storage ofrecidos por HTML5 permiten realizar un almacenamiento parcial de la información para su posterior procesamiento desde el servidor. La figura 2 muestra una de las ventanas, donde se presentan los últimos inventarios procesados dentro de la base de Fig. 3. Controles de Sencha touch. IMPLEMENTADO FRAMEWORKS HTML5 Página 3 de 10

4 V. PHONEGAP JQUERY MOBILE C. Tiempo. Al final del ejercicio, se invirtieron 4 días en evaluar cada uno de los aspectos y el nivel de dificultad fue elevado debido a la complejidad en un principio de la herramienta, a esto se le suma el tiempo de adaptación a la estructura de los archivos, ya que si bien contenían JavaScript, también tenían una estructura que en algún momento podía ser algo engorrosa para seguir el código. D. Configuración para despliegue Al crear un proyecto en Sencha Architect, se define una pagina de inicio de la aplicación, la cual en este caso sera el único acceso HTML que tendra el aplicativo; Esto debido a que Sencha maneja vistas definidas por una estructura Javascript pura. En caso de que la solución sea WEB para mobile, se podran hacer pruebas, depuraciones y verificaciones dentro del explorador. Para lo anterior, usando IIS, basta con crear el sitio, definir la pagina de inicio como el archivo.html del sitio y ejecutar. Al ser una interpretación de codigo Javascript, el servidor no tendra problemas para ejecutar la aplicación. E. Manejo de sesiones. El manejo de sesiones se hace sobre los eventos, ya que son las únicas partes que dejan ingresar código JavaScript puro, además, gracias a HTML5, se utilizan los SessionStorage para almacenar las credenciales de usuario. El método de acceso a las sesiones de HTML5 se realiza mediante el uso de la función Javascript SessionStorage.getItem (llave) donde la llave es el identificador de la sesión sobre el documento. A diferencia del localstorage, la sesión solo existe mientras la pestaña se encuentre abierta, mientras que localstorage persiste la información mientras el navegador se encuentre disponible. F. Depuración de errores / Manejo de excepciones. En lo que respecta a depuración de errores y manejo de excepciones, la estructura que posee sencha no permite hacer un seguimiento completo del flujo, y hace que la búsqueda de errores sea más complicada, sin embargo, la interfaz gráfica de Sencha es muy restrictiva sobre donde se inserta código. Esto es bueno en el sentido en que los errores son detectables rápidamente, pero sigue siendo complicado un correcto proceso de depuración. El tiempo de desarrollo puede variar dependiendo de la necesidad y del manejo que se tenga sobre el lenguaje, además se debe tener en cuenta la complejidad de los proyectos para tomar el riesgo. Phonegap se presenta como un framework open source HTML5 para la creación de aplicaciones Web Móviles que combinado con la flexibilidad que propone jquery con respecto a estilos y diseños dentro de un aplicativo WEB, proporciona un marco de desarrollo enfocado específicamente a páginas web móviles. Ambos surgen a razón de observar cómo el tráfico de red sobre dispositivos portables era tan elevado y la alta demanda de componentes para navegación fluida sobre móviles que esto originaba, todo ligado al tiempo de renderizado y descarga de la página al momento de visitarse sobre Smartphones, como resultado, una creciente ola de componentes del lado del cliente móvil de aplicativos Web, que ha sido materializada por estos dos frameworks. Dentro de la ejecución del caso de estudio en phonegap [3] se debieron tener en cuenta variables de implementación del producto final, puesto que en este punto, la fase investigativa se abrió en 2 ramas: interfaz WEB e implementación nativa, la primera enfocada al despliegue de las páginas Web directamente sobre un navegador y la segunda por medio de un aplicativo nativo instalado sobre el sistema operativo. A. Implementación WEB: Para la implementación de la interfaz WEB se utilizó Adobe Dreamweaver CS6, jquery Mobile [2] y jquery Básicamente el desarrollo de esta parte fue HTML puro, mediante funciones de jquery se obtuvieron los datos del servidor, la mayoría de configuración sobre los controles se hizo mediante JavaScript y propiedades Mobile incluidas en los Tags de HTML. Como se mencionó anteriormente, las ventajas que proporciona en almacenamiento HTML5 se usan para mantener la información de los catálogos o los productos una vez son solicitados, esto con el fin de mantener la información fuera de la página y aumentar su velocidad de descarga. La figura 5 muestra la interfaz de desarrollo y como se va trabajando en vivo sobre esta. En esta imagen se pueden apreciar los controles de jquery, los cuales se definen como atributos en los Tags HTML de la página; para el caso del botón se hace mediante la especificación data-theme= b lo cual asigna automáticamente los estilos para el botón. Cabe resaltar que para realizar el escalamiento se debe hacer una definición sobre la definición de la página con el objetivo de aceptar dichas necesidades. Para el ejemplo se incluye <meta name="viewport" content="user-scalable=yes, initialscale=1.0, minimum-scale=1.0, width=device-width" > con lo que se realizar el escalamiento según tamaño de pantalla. IMPLEMENTADO FRAMEWORKS HTML5 Página 4 de 10

5 características y estructuras mencionadas, en una aplicación nativa para un dispositivo específico (RIM, Windows Phone, ios, Android). B. Implementación nativa: En esta parte de la solución se abordaran 2 objetivos para las pruebas finales: Android y ios. La razón de estos 2 se ve en el mercado que aborda cada uno, donde tienen un gran impacto sobre la venta de dispositivos y el tráfico que estos tienen sobre Internet. [5]. Fig. 4. Adobe Dreamweaver CS6 / jquery Mobile. Un punto a tener en cuenta al momento de la toma de decisiones, es que al ser código HTML directo, se pueden relacionar una mayor cantidad de componentes en comparación a Sencha. Al mismo tiempo, las pruebas que se hacen son directas al explorador, pero la visualización de errores y las pruebas son más simples respecto a la anterior tecnología. La figura 5 presenta los últimos inventarios registrados, basados en la información que se recibe del Servicio WEB. El desafío está en el acceso a controles nativos del dispositivo final, ya que jquery no ofrece controles de este tipo. La Solución aparece con librerías open Source dedicadas a la interacción del código WEB con el código nativo de los dispositivos de Gama Media-Alta, Phonegap. Para presentar el listado de detalles del movimiento, se especifica el listado de la siguiente forma: <ul data-role="listview" data-inset="true" datafilter="true" data-filter-placeholder="buscar">, donde cada una de las características del Tag, definen el tipo de componente y si esta tendrá o no filtro. a. Interfaz de desarrollo / configuración de despliegue Para el desarrollo de aplicaciones en Android, existen varios entornos de desarrollo que ayudan a tener un control en el código (Netbeans, Eclipse, Adobe Flash Builder), sin embargo es necesaria la instalación de plugins, plantillas y SDK s complementarios para su correcto funcionamiento. Para el caso del ejercicio se utilizó Eclipse [11], donde desde el repositorio de Android se obtuvieron las plantillas de proyecto. Adicional a esto, se descargó el SDK Manager para obtener las versiones de Sistema Operativo y poder trabajar sobre ellas, por otro lado el AVD Manager permite virtualizar los dispositivos con el fin de hacer las pruebas en un simulador con versiones específicas de Android. Cabe aclarar que si se dispone de un dispositivo Android, basta con activar el modo de Debug en Equipo que se encuentra en las opciones de desarrollo y al conectarlo al equipo, Eclipse lo reconocerá como un dispositivo para probar aplicaciones. A su vez, se debe descargar la librería de Phonegap que se encuentra en su página, la cual contiene las referencias y librerías necesarias para que este funcione en el sistema nativo. Fig. 5. Componente de listas jquery Mobile. Las aplicaciones nativas de Android están compuestas por vistas XML y controladas bajo lenguaje JAVA, lo que en principio haría imposible que compilase el código WEB. Para solucionar esto, en el directorio principal se crean los directorios /Assets/www y se coloca todo el sitio WEB; Luego, se agrega la librería de Phonegap en el proyecto para luego importarse en la actividad principal o main de la solución (mainactivity.java). Posteriormente se define el archivo de inicio que se encuentra en la carpeta www (index.html). La figura 6 presenta el árbol de carpetas que debe tener el proyecto de Android para poder compilar una aplicación WEB como nativa. Phonegap permite mediante el llamado de un Archivo JavaScript (.js), acceso a controles nativos de dispositivo (Notificaciones, Storage, GPS, Conexiones, Cámara). El objetivo de phonegap es realizar una interfaz unificada para cualquier lenguaje Mobile y que solo baste con construir el instalador basado en la interfaz WEB definida, es decir, convertir una Pagina WEB y todos sus eventos, IMPLEMENTADO FRAMEWORKS HTML5 Página 5 de 10

6 Fig. 7. Jerarquía de carpetas para el proyecto xcode. b. Manipulación del Hardware. Fig. 6. Jerarquía de carpetas para el proyecto Android. En el caso de ios, la limitación principal se encuentra en que se debe contar con un equipo Apple para poder ejecutar el proyecto, además se necesita de una licencia de desarrollador para poder realizar pruebas sobre el equipo. El IDE de desarrollo para aplicaciones ios o MacOS es xcode [4] (se puede descargar desde el MacStore). El entorno viene con emuladores (ipad, iphone) y con las últimas versione s de ios para sus pruebas. Lo segundo necesario, al igual que con Android, es contar con la librería de Phonegap, que para este caso en especial, viene con una serie de funciones que generan el proyecto con la correcta estructura (referencias, permisos, redirecciones) y solo basta con adicionar el sitio WEB. El archivo de configuración del proyecto permite determinar el objetivo de Trabajo (iphone, ipad, Universal para el caso de los 2), así como las modo de visualización (Landscape/Portrait). La Figura 7 muestra el árbol de carpetas para la ejecución de aplicaciones WEB como nativas en ios. Luego de compilado el proyecto se puede apreciar cómo se generó un instalador de Android (.apk) con el proyecto WEB convertido en un aplicativo nativo para este sistema, dando acceso a sus controles nativos y manteniendo la misma configuración gráfica y de comportamientos que tendrá en otro Sistema Operativo. Como se mencionó anteriormente, Phonegap busca obtener acceso a los controles nativos del sistema, sin importar la máquina que lo consuma, todo esto bajo un mismo estándar de código. Un punto de configuración a revisar se encuentra en los permisos que se le dan a la aplicación y a los plugins de Phonegap para que tengan acceso al sistema como tal. Esto se hace en el archivo de configuración en la carpeta www y en el que se encuentra en la carpeta /res/xml [8] donde el primero contiene toda la configuración de los plugins, mientras el otro lleva consigo todo lo referente a permisos, ya sean de URL o de acceso a terminal. La figura 7 y 8 presentan la aplicación instalada en un sistema Android, en este caso un Samsung Galaxy Tab 10.1 y un Samsung Galaxy S3 respectivamente, mostrando el acceso a la cámara y al GPS del dispositivo. Dentro de las configuración que se hacen sobre los Config.xml del proyecto de Android, se debe definir una serie de url s a las que este dispositivo podrá acceder en tiempo de ejecución. Para el caso del GPS, se utilizó GoogleMaps V3, a lo que se insertaron las url s necesarias para la obtención de información y posterior geo localización de la siguiente manera: <access origin = " /> y <access origin = " />, asegurando el acceso para la visualización del mapa en la pantalla. Para obtener la posición actual del dispositivo, se utiliza navigator.geolocation.getcurrentposition (onsuccess, onerror), donde se obtiene un objeto con las coordenadas en el método onsuccess en caso de que las localice. Fig. 8. Acceso a cámara desde Samsung Galaxy Tab. IMPLEMENTADO FRAMEWORKS HTML5 Página 6 de 10

7 Fig. 10. Acceso a cámara desde iphone 4S. Fig. 9. Acceso a GPS desde Samsung Galaxy S3. Del mismo modo que con Android, el desafío principal era obtener acceso a las funciones nativas de Cámara y GPS. La Figura 10 y 11 muestran respectivamente el comportamiento de los controles en la aplicación, teniendo en cuenta que el código dentro del sitio WEB es el mismo, la única diferencia es el archivo de Componente Phonegap que se usó, ya que cada sistema posee un único archivo Javascript para su uso. Los dispositivos en que se realizaron las pruebas fueron un ipad 2 y un iphone 4S, esto con el fin de verificar que la interfaz, así como el diseño no se arruinara por el tamaño de la pantalla. Para obtener acceso a la cámara, basta con llamar la función navigator.camera.getpicture(onsuccess, onfail, { quality : 50, destinationtype : Camera.DestinationType.DATA_URL }) donde se realiza una configuración de la cámara en factores de calidad, y lo más importante, la ruta final del archivo, ya que si no se desea guardar en la carpeta local, se especifica en esta parte. Para el ejemplo, la imagen se convierte en un Base64 para su posterior envío al servidor. Fig. 11. Acceso a GPS desde ipad 2. Se puede ver como la dimensión de las pantallas en los dispositivos no afecta la visibilidad ni el funcionamiento del aplicativo. Para el caso de estudio, se usaron pantallas entre 3.5 y 10.1 pulgadas. Adicionalmente el código WEB (Salvo el archivo.js de Phonegap), es exactamente el mismo para los 2 sistemas operativos, a lo cual se puede afirmar que el desarrollo echo es universal para el Sistema operativo móvil que lo requiera. C. Controles y componentes. JQuery mobile, como se mencionó anteriormente, se encuentra enfatizado en la visualización de información de una manera ordenada, simple y al mismo tiempo llamativa para el usuario. Los controles que se pueden encontrar se centran en formularios, botones, listas, campos de texto y animaciones para el cambio de ventanas básicamente. Lo anterior también debido al control que se debe tener sobre los recursos de la maquina final, ya que se debe tener mucho cuidado con este tema. IMPLEMENTADO FRAMEWORKS HTML5 Página 7 de 10

8 VI. KENDO UI(WEB) KendoUI es el nombre clave que telerik, un muy conocido militante del selecto grupo de proveedores de controles enriquecidos para desarrolladores, ha dado a su suite de controles HTML5. Este framework provee controles tanto para sitios Web de escritorio como para aplicaciones Web móviles, este último con la posibilidad de realizar compilaciones nativas para dispositivos android, ios, blackberry y Windows Phone. El framework para aplicativos de escritorio ofrece controles y Widgets dependientes de jquery. El caso de estudio se aplicó sobre el framework para aplicaciones Web de escritorio. Fig. 12. Directorio WEB para el caso de prueba. Luego de sumergirnos en el mundo móvil de aplicaciones Web y bajo la premisa de mantener la misma estructura de las anteriores implementaciones, se realizó el montaje de un sitio Web HTML5 con este framework. Kendo UI [10] ofrece controles que mediante llamados AJAX, ejecutan procesos de negocio desde clientes WEB simples en desarrollo, pero al mismo tiempo robusto en procesos de negocios. Kendo UI provee controles para Autocompletado de texto, grillas, listados, editores de texto enriquecido, listas desplegables, menú, árboles y cargas de archivos principalmente; Esto enfocado a los controles necesarios para el desarrollo empresarial. A. Manejo de lógica de negocio. Basta con agregar los directorios Styles y Js para el correcto funcionamiento de Kendo UI. Por otro lado, la interfaz gráfica para el cliente WEB debía utilizar controles más fuertes que los usados en Mobile, esto debido al tamaño de la pantalla y la accesibilidad visibilidad de información que se requiere en este tipo de clientes. Tanto Jquery como javascript permiten la interacción con los controles, y el llamado a la lógica puede realizar a través de servicios Web o de llamados Rest. B. Plataforma de desarrollo. Para la implementación del entorno WEB se utilizó Adobe Dreamweaver CS6, ya que al igual que en la parte mobile, este permitía ver el código en vivo, y además ofrecía amplias herramientas para la maquetación y correcto desarrollo de código HTML5. Adicional a esto se utilizó la librería Open Source de Kendo UI, la cual basta con descargarla, descomprimirla y adicionar los plugins al proyecto WEB. La figura 12 muestra la estructura del directorio para la implementación del cliente WEB. El desafío para la implementación, como se mencionó anteriormente, estaba enfocado en el consumo de los mismos servicios que se utilizaron en la implementación móvil, esto con el fin de centralizar el acceso y salida de la información (importante en la seguridad de los datos). Para esto se utilizó jquery y sus funciones AJAX para la obtención de datos. En este caso, al ser una aplicación WEB nativa, no fue necesaria una configuración Adicional, salvo que si el Server es IIS (Internet Information S ervice), se debe agregar el Mime Type Application/json para la correcta comunicación de estructuras JSON, esto aplica también cuando el cliente Mobile no es nativo sino que interactua directamente con el navegador, lo cual es muy usado en la actualidad ya que dependiendo del tamaño de la pantalla, se presenta una Aplicación WEB para escritorio o para Smartphone. La figura 13 y 14 muestran los últimos inventarios cargados y la gestión para uno nuevo En el caso de la primera imagen, el código para definirla es <div id="gris" data-role="grid" class="k-grid"> donde el rol y la clase son los encargados de definir el comportamiento que tendrá en ejecución; En Javascript, el código necesario para visualizar la grilla inicia con la definición de esta misma con $("#grid").kendogrid() donde se presentaran una serie de atributos como datos, columnas, ordenamiento, filtros, etc. Para el caso de las listas desplegables (Combos), se define $("#cliente").kendocombobox() lo cual le asigna automáticamente los comportamientos y estilos que posee kendo para este componente. Fig. 13. Registro de inventarios WEB Kendo UI. IMPLEMENTADO FRAMEWORKS HTML5 Página 8 de 10

9 Fig. 14. VII. Movimiento de Inventario WEB Kendo UI. CONSIDERACIONES GENERALES PARA EL DESARROLLO CON JAVASCRIPT En este apartado se describe el análisis que se refiere a los puntos comunes entre estos Frameworks, ya que al poseer un lenguaje común como Javascript, es posible revisar aspectos relacionados con el flujo y desarrollo del código sobre el proceso, de la misma manera sobre todos los entornos. A. Depuración de errores / Manejo de excepciones. En el caso de jquery mobile (phonegap, kendoui), el método de depuración posee los mismos inconvenientes que cualquier código javascript, puntualmente, al ser interpretado por el navegador no se pueden aplicar trazas de depueración, sin embargo, las herramientas para desarrollo que proveen distintos navegadores, permiten que estas labores sean más manejables hoy en día. Internet explorer, dentro de sus herramientas posee una pestaña de Scripts, la cual permite la depuración de código JavaScript directamente sobre el navegador, basta con seleccionar el punto de sobre el código donde se quiera hacer seguimiento y refrescar la página, de igual forma plugins de terceros permiten realizar esta tarea, este es el caso de firebug, un ya viejo conocido del mundo Javascript para Firefox. B. Manejo de datos / carga de archivos. Phonegap, que permite la interacción de controles internos del sistema sobre la interfaz WEB, posee métodos de acceso sobre archivos del sistema, en este caso, bases de datos locales; Esto con el fin de mantener un almacenamiento de información en caso de que se pierda conexión sobre el servidor de datos. Para el uso de este componente, al igual que con los demás, se le deben dar permisos de acceso sobre el sistema, y con la función window.opendatabase(archivo, versión, nombre, tamaño) se tendrá acceso a la base interna donde ya dependiendo de la lógica que se tenga, se almacenara información para su posterior uso en modo off-line. Del mismo modo que phonegap ofrece funciones para el acceso a la base de datos, donde luego de ejecutar la función anterior se obtiene un objeto de gestión para la base de datos, se pueden realizar transacciones para la obtención y/o manipulación de datos. Gracias a la función db.transaction(populatedb, errorcb, successcb) donde db es la base de datos, permite la manipulación de información sobre la interfaz gráfica; El primer parámetro (populatedata) es el encargado de las transacciones, dado que será la función que se ejecutará cuando la petición de transacción sea exitosa. En caso contrario errorcb presentara el error de transacción. Del mismo modo, esta librería ofrece funciones para apertura y escritura de archivos bajo la función FileReader() la cual trae una serie de métodos para crear, abrir, consultar y escribir ficheros dentro de la máquina. Tanto phonegap como kendoui permiten estas implementaciones ya que ambos se apoyan en jquery para la implementación de lógica de negocio. Para aplicaciones Web de escritorio, en el caso de la subida de archivos de carga, se utiliza el comando $("#files").kendoupload() para poder tener un control de la carga. Cabe aclarar que para la carga del archivo, se deben tener las mismas consideraciones que para una carga normal en WEB (configuración del formulario). C. Análisis del proceso de implementación. Los resultados obtenidos con el caso de estudio fueron evaluados bajo 2 aspectos, complejidad y tiempo. Desde la parte de la complejidad, Sencha Touch ofrecía un control limitado sobre la estructura del código, debido a que restringe las regiones donde este se puede ingresar, sin embargo, la arquitectura que ofrece, y la esquematización de los archivos, hace que el análisis de errores, el mantenimiento de código y la reusabilidad sea mínima. Respecto a jquery Mobile, la gran ventaja que este tiene es su arquitectura, basada en el uso de HTML puro, no muy lejos del desarrollo WEB estándar, haciendo sencilla la implementación y el proceso de aprendizaje para futuras soluciones. Sobre el cliente WEB, se encontraron controles muy completos para el manejo de información, donde su configuración y mantenimiento no iban más allá de unas cuantas líneas de código. Los requerimientos para la implementación se limitaban al conocimiento de HTML y de Javascript desde la parte WEB, y un conocimiento sobre Programación Orientada a Objetos para configurar los objetos de comunicación. En la parte de los Servicios WEB, se pudo definir un único acceso a los datos, proporcionando una capa de seguridad para la E/S de información; Esto provoca que la lógica de negocio sea transparente para el cliente que la IMPLEMENTADO FRAMEWORKS HTML5 Página 9 de 10

10 consume, ya que todos los métodos e implementaciones lógicos importantes para el funcionamiento del aplicativo se encuentran encapsulados tras los servicios WEB, limitando su acceso y su manejo a solo llamados de consumo sobre el cliente. VIII. CONCLUSIONES servidor, permiten crear clientes independientes, y adaptar fácilmente estos clientes entre diferentes navegadores. Aunque el estándar HTML5 depende totalmente de Javascript para crear aplicaciones interactivas con lógica de negocio robusta, un enfoque de arquitectura SOA es adecuado y procedente para el despliegue de portales de negocios. El mercado de aplicaciones para Smartphones, gracias a su demanda y capacidad de consumo, permite explorar alternativas de mercado para el desarrollo de soluciones empresariales robustas al alcance de una mayor cantidad de clientes. El desarrollo de Aplicativos para móviles se puede centralizar con el fin de reusar código, hacer un entorno mantenible y poder crear un estándar en la implementación de estas soluciones, puesto que si se hace por el lenguaje nativo de cada sistema, se podría perder el control de las aplicaciones. Centralizar la entrada y salida de información mediante el uso de Servicios WEB garantiza el encapsulamiento de la lógica del sistema en un entorno seguro para el cliente, donde cualquier modificación no tenga gran impacto sobre el producto final, ya que este solo interpretara la información recibida siendo transparente el proceso lógico sobre la respuesta final, ya que el cliente únicamente interpretara lo que recibe. El uso de controles basados en JavaScript, mejora el tiempo de respuesta y la velocidad de carga de la información debido a que las llamadas al servidor y la carga de la página son reducidas en comparación a otros lenguajes. El tiempo de desarrollo es proporcional al conocimiento inicial que se tenga sobre cada lenguaje, sin embargo, el proceso de aprendizaje de este al ser tan limitado el tema, es adecuado. Las aplicaciones nativas para dispositivos móviles, permiten un mayor manejo del hardware del equipo, sin embargo, la migración a otro Sistema podría provocar la reescritura de mucho código. La publicación del Servicio WEB, se realiza del mismo modo que la de un sitio WEB estándar en IIS (Para el caso de.net), sin embargo el cliente WEB que implementa HTML5 y Javascript, puede publicarse en cualquier WEB server independiente al lenguaje nativo que interprete, esto debido a que cualquier WEB-Server interpreta HTML. La complejidad de implementación del cliente es dependiente de la necesidad del usuario, sin embargo, el continuo desarrollo de componentes JavaScript, permiten realizar estas tareas de una manera más simple, sin la necesidad de gran cantidad de código. Verificamos que es posible crear aplicaciones Web trasversales entre dispositivos, sin importar que sean de escritorio o móviles, el bajo acoplamiento que tiene HTML5 con los artefactos de software del lado del REFERENCIAS [1] Sencha Touch [2] jquerymobile [3] Phonegap [4] xcode [5] Análisis de trafico en la red ios Andriod [6] JSON [7] RESTful Web services: The basics, [8] Getting started with PhoneGap in Eclipse for Android, [9] JSON library, [10] Kendo UI documentation, [11] Eclipse, IMPLEMENTADO FRAMEWORKS HTML5 Página 10 de 10