Universidad ORT Uruguay

Facultad de Ingeniera

Introduccin a Tecnologas Enriquecidas para Internet

Artculo Tcnico

Freddy Veit 129756

2008

Abstract Este artculo trata sobre las nuevas tendencias en aplicaciones Web, que permiten mayor riqueza grfica y dinamismo en el transporte de la informacin entre el cliente Web y el servidor. Adems se realiza una comparacin entre aplicaciones de escritorio y aplicaciones Web convencionales. Se explica el modelo de comunicacin sincrnica y asincrnica entre un servidor de aplicaciones Web y un cliente. Para finalizar se describen las tecnologas Ajax, Flash y Applets de Java que son representativas de la nueva tendencia para construccin de aplicaciones Web.

ndice

1. Introduccin.................................................................................................................. 4 2. Aplicaciones de escritorio y aplicaciones Web convencionales .................................. 4 3. Comunicacin sincrnica y asincrnica para aplicaciones Web .................................. 5 4. Aplicaciones y Tecnologas Enriquecidas para Internet............................................... 6 5. Conclusiones................................................................................................................. 9 6. Glosario ...................................................................................................................... 10 Bibliografa..................................................................................................................... 12

1. Introduccin La tendencia a desarrollar aplicaciones en Internet viene creciendo a un ritmo muy acelerado y la mayora de las empresas estn empezando a aprovechar los beneficios que sta brinda (Duhl, 2003). Hasta ahora, las aplicaciones de escritorio permitan una mayor riqueza grfica y mejor respuesta en la interaccin con el usuario en comparacin con las aplicaciones Web. Se pensaba que las aplicaciones Web nunca alcanzaran la capacidad de interaccin de las aplicaciones de escritorio. En efecto, ante cada accin del usuario que requera al servidor, se deba recargar la pgina Web utilizada o dirigirse a una nueva, perjudicando el tiempo de respuesta. Segn Bradbury (2006) esto conduce a usuarios insatisfechos, lo cual redunda en prdida de ingresos para las empresas. Esta brecha de desempeo se est cerrando y cada vez ms 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 ms conocidos. El uso de Internet est cambiando junto con las expectativas de los usuarios (Farrell y Nezlek, 2007). La proliferacin 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 tecnologas de desarrollo de aplicaciones que tengan el alcance de las aplicaciones Web, pero que tengan adems el desempeo y la calidad de interaccin 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 continuacin. Caractersticas de una aplicacin de escritorio. Segn 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 ms 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 imgenes. 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 aplicacin (junto con sus actualizaciones) debe ser instalada en cada computador utilizado. Caractersticas de una aplicacin Web convencional. Segn Noda y Helwig (2005) no es necesario realizar instalacin, actualizaciones o parches en cada computador donde se ejecute la aplicacin. 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 pblico a un menor costo. La comunicacin con el servidor es sincrnica. La instalacin se realiza en un nico computador (servidor Web).

Dentro de los problemas que encontramos en una aplicacin Web convencional se destacan: respuesta lenta y prdida del contexto durante el envo y recepcin 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 grfica como arrastrar y pegar documentos, textos e imgenes.

3. Comunicacin sincrnica y asincrnica para aplicaciones Web Existen dos modos de comunicacin entre el cliente (definido como el equipo que requiere servicios del servidor) y el servidor (mquina desde la que se suministran servicios y que est a la espera de los requerimientos de los clientes). Estos dos modos son el sincrnico y el asincrnico (ver figura 1). La mayora de las aplicaciones Web existentes realizan la comunicacin de datos con el servidor de manera sincrnica (Potthast y Rowe, 2007). En una comunicacin sincrnica se ejecutan los procesos en el siguiente orden: El cliente realiza una peticin al servidor; el servidor enva los datos solicitados; el cliente comienza a recibir los datos y una vez finalizada la recepcin de los datos en la pgina, el usuario vuelve a tener el control. Este proceso conduce a que cada vez que se est enviando informacin al servidor, el usuario pierde el control sobre la pgina Web que est visitando, limitndose de esta manera a esperar que la aplicacin le devuelva el control. En cambio, con una aplicacin Web que se comunica asncronamente con el servidor, los procesos son los siguientes: El cliente realiza una solicitud al servidor; el servidor enva los datos solicitados; el cliente comienza a recibir los datos. El cliente en ningn momento pierde el control de las acciones sobre la pgina que est visualizando y permite acciones con el usuario durante la regresin de los datos. La comunicacin asincrnica se puede utilizar para construir interfaces interactivas de usuario que son muy semejantes a las aplicaciones de escritorio tradicionales.

Figura 1: Modelos de comunicacin sincrnica (imagen superior) y asincrnica (imagen inferior) en una aplicacin Web entre el cliente y el servidor [Garrett, 2005]1.

4. Aplicaciones y Tecnologas Enriquecidas para Internet Estas aplicaciones se denominan RIA (Rich Internet Applications). Son aplicaciones Web que tienen las caractersticas y funcionalidades de una aplicacin de escritorio
Esta imagen ilustra la comunicacin asincrnica de Ajax, pero el proceso ilustrado es genrico para cualquier tipo de comunicacin asincrnica.
1

comn, con la gran diferencia de que las RIA no necesitan instalar la aplicacin en la mquina local del usuario. Sin embargo, algunas de estas aplicaciones necesitan instalar pequeos 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 teora, la aplicacin funciona igual sin importar desde qu plataforma se acceda (Morales-Chaparro, et. al. 2007). Las aplicaciones RIA trabajan de modo asincrnico (ver figura 2), lo que permite que sean ms dinmicas que las aplicaciones Web tradicionales. De esta forma, reducen la diferencia con las aplicaciones de escritorio. Las aplicaciones construidas con tecnologa 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

Aplicacin RIA

Lenguaje del Servidor

Lenguaje del Servidor

Base de Datos Servidor Web

Base de Datos Servidor Web

Modelo de interaccin entre el servidor y el navegador del cliente, para aplicaciones que utiliza tecnologas enriquecidas para Internet.

Modelo de interaccin entre el servidor y el navegador del cliente, para aplicaciones Web convencionales.

Figura 2: Comparacin 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 informacin en tiempo real. El usuario en ningn momento pierde el control sobre la pgina que esta visualizando.

Prestaciones de interfase grfica. Algunas de estas tecnologas 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 conexin 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 pgina en la cual estamos. Segn la consultora Gartner (Driver et. al., 2005), en el 2010 al menos el 60% de los nuevos proyectos de software incluirn este tipo de tecnologa. Algunas de las tecnologas que entran en el grupo de las RIA son Applets de Java, Adobe Flash y AJAX. Estas tecnologas y su comparacin (ver tabla 1), se resumen a continuacin. Adobe Flash. (Adobe, 2008) Es un pequeo programa que se instala como plug-in en el navegador del cliente para ejecutar archivos generados con Flash. En principio fue diseado para ver pelculas interactivas. Ahora se utiliza bastante para hacer juegos monousuarios en Internet ya que es programable con ActionScript. Flash utiliza principalmente grficos vectoriales, flujo de video y audio bidireccional. AJAX. Acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), Ajax no es una tecnologa, es el conjunto de muchas tecnologas (XHTML, CSS, DOM, XML, XSLT, XMLHttpRequest, JavaScript). stas se ejecutan en el navegador de los usuarios y mantiene comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma pgina 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 pequea aplicacin que est escrita en el lenguaje de programacin Java, que se descarga en el navegador del cliente. Una vez instalado el plug-in de Java en el navegador, la comunicacin entre el cliente y el servidor es mucho ms dinmica que una aplicacin Web convencional. .

Criterio Experiencia en la interfaz del usuario Velocidad de descarga Requisito de plug-in en Cliente Seguridad Necesidad de Servidor Tecnologas Soporta audio / video Alcance Adopcin de la Tecnologa Costo Soporte y Documentacin

Ajax Baja Alta No Media No Alta

Flash Media Baja JRE

Java

Media Flash Player Alta Si (Flex o Open Laszlo)

JavaScript, CSS, XML, DOM, etc. Bajo Alto Medio (pero cada vez ms rpido) No (para construccin Si (para Flex) del cliente) No (para Open Laszlo) Evolucionando Buena

Alta No (para applet o Java Web Start) XML, DOM, JavaScript, Java Flash, ActionScript Alto Medio Medio Medio Alto Bajo No Buena

Tabla 1: Ventajas y desventajas de las tecnologas Ajax, Flash y Java (traducido de DEB, 2008).

5. Conclusiones Como describimos anteriormente vemos que las preferencias de los usuarios se estn inclinando hacia aplicaciones Web construidas con tecnologa enriquecidas para Internet. En un futuro no muy lejano la mayora de las aplicaciones Web utilizarn tecnologa enriquecida, lo cual no quiere decir que desaparezcan las pginas Web estticas; todas aquellas aplicaciones que no necesiten un alto nivel de interactividad con el usuario seguirn probablemente construyndose como hasta ahora, por la sencillez y su rpido desarrollo.

6. Glosario ActionScript: es un lenguaje de programacin orientado a objetos, utilizado en especial en aplicaciones web animadas realizadas en el entorno Adobe Flash, la tecnologa de Adobe para aadir dinamismo al panorama Web. Por ms informacin http://www.adobe.com/devnet/actionscript/ CSS: Cascading Style Sheets (Hojas de Estilo en Cascada), es un mecanismo simple que describe cmo se va a mostrar un documento en la pantalla, o cmo se va a imprimir, o incluso cmo va a ser pronunciada la informacin presente en ese documento a travs de un dispositivo de lectura. Esta forma de descripcin de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. Por ms informacin http://www.w3.org/Style/CSS/ DOM: Document Object Model es un modelo de Objetos para la representacin de documentos, que es esencialmente un modelo computacional a travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido, estructura y estilo de los documentos HTML y XML. Por ms informacin http://www.w3.org/DOM/ JavaScript: es un lenguaje de programacin interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. Por ms informacin http://docs.sun.com/source/8166408-10/contents.htm XHTML: eXtensible Hypertext Markup Language (Lenguaje de Marcado de Hipertexto Extensible) es una versin ms estricta y limpia de HTML, que nace precisamente con el objetivo de remplazar a HTML ante su limitacin de uso con las cada vez ms abundantes herramientas basadas en XML. Por ms informacin http://www.w3c.es/Divulgacion/Guiasbreves/XHTML XML: eXtensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos (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 ms informacin http://www.w3.org/XML/ XMLHttpRequest: proporciona una manera de comunicarse con un servidor despus de que una pgina web se ha cargado. Por ms informacin http://www.w3.org/TR/XMLHttpRequest/ XSL: Extensible Stylesheet Language (lenguaje extensible de hojas de estilo) es una familia de lenguajes basados en el estndar XML que permite describir cmo la informacin contenida en un documento XML cualquiera debe ser transformada o formateada para su presentacin en un medio. Por ms informacin: http://www.w3.org/Style/XSL/ XSLT: Transformaciones XSL es un estndar de la organizacin W3C que presenta una forma de transformar documentos XML en otros e incluso a formatos que no son XML.

10

Las hojas de estilo XSLT realizan la transformacin del documento utilizando una o varias reglas de plantilla. Por ms informacin www.w3.org/TR/xslt.html

11

Bibliografa

ADOBE. 2008. Flash resources. [online] [citado 10 agosto, 2008]. Disponible desde Internet: <http://www.adobe.com/designcenter/flash/articles/flash_resources.html#tutorials> BRADBURY, Danny. 2006. Rich prospects as HTML comes of age. En: Computer Weekly: pp 50-52, 18 abril 2006. DEB, Brijesh. 2008. A Look Into Available Technology Choices. [online] [citado 10 agosto, 2008]. Disponible en Internet: <http://www.jaxmag.com/itr/online_artikel/psecom,id,828,nodeid,147.html> DRIVER, M.; et. al. 2005. Management Update: Rich Internet Applications Are the Next Evolution of the Web. Id Number G00127774 (Gartner, Inc.) [online] [citado 18 agosto, 2008]. Disponible en Internet: <http://sebringsoft.com/images/riacomfactbook.pdf > DUHL, Joshua. 2003. Rich Internet Applications. Global Headquarters. Id. Number 3906. (IDC) [online] [citado 14 agosto, 2008]. Disponible en Internet: <http://www.adobe.com/platform/whitepapers/idc_impact_of_rias.pdf > FARRELL, Jason; NEZLEK, George S. 2007. Rich Internet Applications. The Next Stage of Application Development. En: Proceedings of the ITI 2007 29th Int. Conf. on Information Technology Interfaces, Junio 25-28, 2007, Cavtat, Croacia. GARRETT, Jesse James. 2005. Ajax: A New Approach to Web Applications. [online] [citado 5 agosto, 2008]. Disponible en Internet: <http//adaptivepath.com/ideas/essays/archives/000385.php>. GOOGLE, 2008a. Google Maps. [online] [citado 15 agosto, 2008]. Disponible en Internet: <http://maps.google.com/> GOOGLE, 2008b. Google Suggest. [online] [citado 15 agosto, 2008]. Disponible en Internet: <www.google.com/webhp?complete=1&hl=en> MORALES-CHAPARRO; et. al. 2007. MVC Web design patterns and Rich Internet Applications. [online] [citado 27 agosto, 2008]. Disponible en Internet: www.sistedes.es/TJISBD/Vol-1/No-1/articles/SCHA-07-Morales-MVC.pdf NODA, Tom; HELWIG Shawn. 2005. 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: <http://www.uwebc.org/opinionpapers/docs/RIA.pdf> POTTHAST, Stefan; ROWE, Mike. 2007. An Analysis of Approaches for Asynchronous Communication in Web Applications. [online] [citado 8 agosto, 2008]. Disponible en internet: <http://www.micsymposium.org/mics_2007/papers/Potthast.pdf>

12

ROGOWSKI, Ron; et. al. 2007. Financial Institutions Need Rich Internet Apps. (Forrester Research, Inc.) [online] [citado 14 agosto, 2008]. Disponible en Internet: <http://www.adobe.com/enterprise/pdfs/financial_institutions_need_ria.pdf> SUN. 2008. Applets. [online] [citado 12 agosto, 2008]. Disponible en Internet: <http://java.sun.com/applets/> YAHOO, 2008. Flickr. [online] [citado 16 agosto, 2008]. Disponible en Internet: <http://www.flickr.com/>

13