Universidad ORT Uruguay

Transcripción

1 Universidad ORT Uruguay Facultad de Ingeniería Introducción a Tecnologías Enriquecidas para Internet Artículo Técnico Freddy Veit

2 Abstract Este artículo trata sobre las nuevas tendencias en aplicaciones Web, que permiten mayor riqueza gráfica y dinamismo en el transporte de la información entre el cliente Web y el servidor. Además se realiza una comparación entre aplicaciones de escritorio y aplicaciones Web convencionales. Se explica el modelo de comunicación sincrónica y asincrónica entre un servidor de aplicaciones Web y un cliente. Para finalizar se describen las tecnologías Ajax, Flash y Applets de Java que son representativas de la nueva tendencia para construcción de aplicaciones Web. 2

3 Índice 1. Introducción Aplicaciones de escritorio y aplicaciones Web convencionales Comunicación sincrónica y asincrónica para aplicaciones Web Aplicaciones y Tecnologías Enriquecidas para Internet Conclusiones Glosario Bibliografía

4 1. Introducción La tendencia a desarrollar aplicaciones en Internet viene creciendo a un ritmo muy acelerado y la mayoría de las empresas están empezando a aprovechar los beneficios que ésta brinda (Duhl, 2003). Hasta ahora, las aplicaciones de escritorio permitían una mayor riqueza gráfica y mejor respuesta en la interacción con el usuario en comparación con las aplicaciones Web. Se pensaba que las aplicaciones Web nunca alcanzarían la capacidad de interacción de las aplicaciones de escritorio. En efecto, ante cada acción del usuario que requería al servidor, se debía recargar la página Web utilizada o dirigirse a una nueva, perjudicando el tiempo de respuesta. Según Bradbury (2006) esto conduce a usuarios insatisfechos, lo cual redunda en pérdida de ingresos para las empresas. Esta brecha de desempeño se está cerrando y cada vez más las aplicaciones Web se acercan a las aplicaciones de escritorio; por ejemplo, se puede citar a Google Suggest (Google, 2008b), Google Maps (Google, 2008a) y Flickr (Yahoo, 2008) entre los casos más conocidos. El uso de Internet está cambiando junto con las expectativas de los usuarios (Farrell y Nezlek, 2007). La proliferación del ancho de banda, la demanda de los consumidores y la competencia de las empresas por llegar a nuevos mercados, crea la necesidad de impulsar nuevas tecnologías de desarrollo de aplicaciones que tengan el alcance de las aplicaciones Web, pero que tengan además el desempeño y la calidad de interacción de las aplicaciones de escritorio (Rogowski et.al., 2007). 2. Aplicaciones de escritorio y aplicaciones Web convencionales Las aplicaciones de escritorio presentan algunas diferencias con respecto a las aplicaciones Web convencionales, que se resumen a continuación. Características de una aplicación de escritorio. Según Noda y Helwig (2005) las aplicaciones de escritorio ofrecen las siguientes ventajas: mejora la experiencia del usuario en cuanto a audio, video y comunicaciones. Son más interactivas que las aplicaciones Web convencionales (ya que mantienen un contacto permanente entre los procesos internos del programa y lo que sucede en la interfaz de usuario). Permite acciones tales como arrastrar y pegar documentos, textos e imágenes. Los mayores problemas de las aplicaciones de escritorio son que dependen del sistema operativo del computador en el cual se va a instalar, y que la aplicación (junto con sus actualizaciones) debe ser instalada en cada computador utilizado. Características de una aplicación Web convencional. Según Noda y Helwig (2005) no es necesario realizar instalación, actualizaciones o parches en cada computador donde se ejecute la aplicación. Las aplicaciones pueden funcionar en diferentes sistemas operativos (independencia de la plataforma). Normalmente la interfaz de usuario es simple y estandarizada (baja curva de aprendizaje para los usuarios finales). Permiten a las empresas llegar a un mayor público a un menor costo. La comunicación con el servidor es sincrónica. La instalación se realiza en un único computador (servidor Web). 4

5 Dentro de los problemas que encontramos en una aplicación Web convencional se destacan: respuesta lenta y pérdida del contexto durante el envío y recepción de los datos al servidor. No hay respuesta inmediata a nuestros actos; se tiene que esperar que llegue la siguiente carga de pantalla. No permite acciones de interfase gráfica como arrastrar y pegar documentos, textos e imágenes. 3. Comunicación sincrónica y asincrónica para aplicaciones Web Existen dos modos de comunicación entre el cliente (definido como el equipo que requiere servicios del servidor) y el servidor (máquina desde la que se suministran servicios y que está a la espera de los requerimientos de los clientes). Estos dos modos son el sincrónico y el asincrónico (ver figura 1). La mayoría de las aplicaciones Web existentes realizan la comunicación de datos con el servidor de manera sincrónica (Potthast y Rowe, 2007). En una comunicación sincrónica se ejecutan los procesos en el siguiente orden: El cliente realiza una petición al servidor; el servidor envía los datos solicitados; el cliente comienza a recibir los datos y una vez finalizada la recepción de los datos en la página, el usuario vuelve a tener el control. Este proceso conduce a que cada vez que se está enviando información al servidor, el usuario pierde el control sobre la página Web que está visitando, limitándose de esta manera a esperar que la aplicación le devuelva el control. En cambio, con una aplicación Web que se comunica asíncronamente con el servidor, los procesos son los siguientes: El cliente realiza una solicitud al servidor; el servidor envía los datos solicitados; el cliente comienza a recibir los datos. El cliente en ningún momento pierde el control de las acciones sobre la página que está visualizando y permite acciones con el usuario durante la regresión de los datos. La comunicación asincrónica se puede utilizar para construir interfaces interactivas de usuario que son muy semejantes a las aplicaciones de escritorio tradicionales. 5

6 Figura 1: Modelos de comunicación sincrónica (imagen superior) y asincrónica (imagen inferior) en una aplicación Web entre el cliente y el servidor [Garrett, 2005] Aplicaciones y Tecnologías Enriquecidas para Internet Estas aplicaciones se denominan RIA (Rich Internet Applications). Son aplicaciones Web que tienen las características y funcionalidades de una aplicación de escritorio 1 Esta imagen ilustra la comunicación asincrónica de Ajax, pero el proceso ilustrado es genérico para cualquier tipo de comunicación asincrónica. 6

7 común, con la gran diferencia de que las RIA no necesitan instalar la aplicación en la máquina local del usuario. Sin embargo, algunas de estas aplicaciones necesitan instalar pequeños programas o componentes normalmente llamados plug-in la primera vez que se ejecutan en el computador del usuario. A las aplicaciones RIA se accede desde un navegador Web (Firefox, Internet Explorer, Opera, etc.). En teoría, la aplicación funciona igual sin importar desde qué plataforma se acceda (Morales-Chaparro, et. al. 2007). Las aplicaciones RIA trabajan de modo asincrónico (ver figura 2), lo que permite que sean más dinámicas que las aplicaciones Web tradicionales. De esta forma, reducen la diferencia con las aplicaciones de escritorio. Las aplicaciones construidas con tecnología enriquecida contienen los puntos fuertes de las aplicaciones de escritorio y de las aplicaciones Web convencionales (Noda y Helwig, 2005). Navegador del cliente Interfase del usuario Interfase del usuario Navegador del cliente Aplicación RIA Lenguaje del Servidor Lenguaje del Servidor Servidor Web Base de Datos Base de Datos Servidor Web Modelo de interacción entre el servidor y el navegador del cliente, para aplicaciones que utiliza tecnologías enriquecidas para Internet. Modelo de interacción entre el servidor y el navegador del cliente, para aplicaciones Web convencionales. Figura 2: Comparación entre arquitectura enriquecida (izquierda) y arquitectura Web convencional (derecha) Entre las principales ventajas (Dhul, 2003) que presentan este tipo de aplicaciones respecto a las aplicaciones Web convencionales se encuentran las siguientes: Acceso inmediato a la información en tiempo real. El usuario en ningún momento pierde el control sobre la página que esta visualizando. 7

8 Prestaciones de interfase gráfica. Algunas de estas tecnologías permiten funcionalidades como arrastrar y soltar los datos de una parte de la pantalla a otra. Generalidades de cliente. Se pueden utilizar desde cualquier computador con una conexión a Internet sin depender del sistema operativo que éste utilice. Se puede agregar Mantenibilidad. Permiten por ejemplo modificar y/o eliminar elementos sin necesidad de recargar la página en la cual estamos. Según la consultora Gartner (Driver et. al., 2005), en el 2010 al menos el 60% de los nuevos proyectos de software incluirán este tipo de tecnología. Algunas de las tecnologías que entran en el grupo de las RIA son Applets de Java, Adobe Flash y AJAX. Estas tecnologías y su comparación (ver tabla 1), se resumen a continuación. Adobe Flash. (Adobe, 2008) Es un pequeño programa que se instala como plug-in en el navegador del cliente para ejecutar archivos generados con Flash. En principio fue diseñado para ver películas interactivas. Ahora se utiliza bastante para hacer juegos monousuarios en Internet ya que es programable con ActionScript. Flash utiliza principalmente gráficos vectoriales, flujo de video y audio bidireccional. AJAX. Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), Ajax no es una tecnología, es el conjunto de muchas tecnologías (XHTML, CSS, DOM, XML, XSLT, XMLHttpRequest, JavaScript). Éstas se ejecutan en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y la manera de utilizar la misma (Garrett, 2005). Applets de Java. Un applet (Sun, 2008) es una pequeña aplicación que está escrita en el lenguaje de programación Java, que se descarga en el navegador del cliente. Una vez instalado el plug-in de Java en el navegador, la comunicación entre el cliente y el servidor es mucho más dinámica que una aplicación Web convencional.. 8

9 Criterio Ajax Flash Java Experiencia en la Baja Alta Media interfaz del usuario Velocidad de descarga Alta Media Baja Requisito de plug-in en No Flash Player JRE Cliente Seguridad Media Alta Alta Necesidad de Servidor No Si (Flex o Open Laszlo) No (para applet o Java Web Start) Tecnologías JavaScript, CSS, XML, DOM, JavaScript, Java XML, DOM, etc. Flash, ActionScript Soporta audio / video Bajo Alto Medio Alcance Alto Medio Medio Adopción de la Medio (pero cada vez Alto Bajo Tecnología más rápido) Costo No (para construcción Si (para Flex) No del cliente) No (para Open Laszlo) Soporte y Documentación Evolucionando Buena Buena Tabla 1: Ventajas y desventajas de las tecnologías Ajax, Flash y Java (traducido de DEB, 2008). 5. Conclusiones Como describimos anteriormente vemos que las preferencias de los usuarios se están inclinando hacia aplicaciones Web construidas con tecnología enriquecidas para Internet. En un futuro no muy lejano la mayoría de las aplicaciones Web utilizarán tecnología enriquecida, lo cual no quiere decir que desaparezcan las páginas Web estáticas; todas aquellas aplicaciones que no necesiten un alto nivel de interactividad con el usuario seguirán probablemente construyéndose como hasta ahora, por la sencillez y su rápido desarrollo. 9

10 6. Glosario ActionScript: es un lenguaje de programación orientado a objetos, utilizado en especial en aplicaciones web animadas realizadas en el entorno Adobe Flash, la tecnología de Adobe para añadir dinamismo al panorama Web. Por más información CSS: Cascading Style Sheets (Hojas de Estilo en Cascada), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. Por más información DOM: Document Object Model es un modelo de Objetos para la representación de documentos, que es esencialmente un modelo computacional a través del cual los programas y scripts pueden acceder y modificar dinámicamente el contenido, estructura y estilo de los documentos HTML y XML. Por más información JavaScript: es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. Por más información XHTML: extensible Hypertext Markup Language (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML, que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso con las cada vez más abundantes herramientas basadas en XML. Por más información XML: extensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. Por más información XMLHttpRequest: proporciona una manera de comunicarse con un servidor después de que una página web se ha cargado. Por más información XSL: Extensible Stylesheet Language (lenguaje extensible de hojas de estilo) es una familia de lenguajes basados en el estándar XML que permite describir cómo la información contenida en un documento XML cualquiera debe ser transformada o formateada para su presentación en un medio. Por más información: XSLT: Transformaciones XSL es un estándar de la organización W3C que presenta una forma de transformar documentos XML en otros e incluso a formatos que no son XML. 10

11 Las hojas de estilo XSLT realizan la transformación del documento utilizando una o varias reglas de plantilla. Por más información 11

12 Bibliografía ADOBE Flash resources. [online] [citado 10 agosto, 2008]. Disponible desde Internet: < BRADBURY, Danny Rich prospects as HTML comes of age. En: Computer Weekly: pp 50-52, 18 abril DEB, Brijesh A Look Into Available Technology Choices. [online] [citado 10 agosto, 2008]. Disponible en Internet: < DRIVER, M.; et. al Management Update: Rich Internet Applications Are the Next Evolution of the Web. Id Number G (Gartner, Inc.) [online] [citado 18 agosto, 2008]. Disponible en Internet: < > DUHL, Joshua Rich Internet Applications. Global Headquarters. Id. Number (IDC) [online] [citado 14 agosto, 2008]. Disponible en Internet: < > FARRELL, Jason; NEZLEK, George S Rich Internet Applications. The Next Stage of Application Development. En: Proceedings of the ITI th Int. Conf. on Information Technology Interfaces, Junio 25-28, 2007, Cavtat, Croacia. GARRETT, Jesse James Ajax: A New Approach to Web Applications. [online] [citado 5 agosto, 2008]. Disponible en Internet: <http//adaptivepath.com/ideas/essays/archives/ php>. GOOGLE, 2008a. Google Maps. [online] [citado 15 agosto, 2008]. Disponible en Internet: < GOOGLE, 2008b. Google Suggest. [online] [citado 15 agosto, 2008]. Disponible en Internet: < MORALES-CHAPARRO; et. al MVC Web design patterns and Rich Internet Applications. [online] [citado 27 agosto, 2008]. Disponible en Internet: NODA, Tom; HELWIG Shawn Rich Internet Applications, Technical Comparison and Case Studies of AJAX, Flash, and Java based RIA. Reporte de las mejores practicas de UW E-Business Consortium. [online] [citado 8 agosto, 2008]. Disponible en Internet: < POTTHAST, Stefan; ROWE, Mike An Analysis of Approaches for Asynchronous Communication in Web Applications. [online] [citado 8 agosto, 2008]. Disponible en internet: < 12

13 ROGOWSKI, Ron; et. al Financial Institutions Need Rich Internet Apps. (Forrester Research, Inc.) [online] [citado 14 agosto, 2008]. Disponible en Internet: < SUN Applets. [online] [citado 12 agosto, 2008]. Disponible en Internet: < YAHOO, Flickr. [online] [citado 16 agosto, 2008]. Disponible en Internet: < 13