Ingeniería del Software II:
AJAX vs Silverlight
Diego Martín-Serrano Fernández Francisco José Oteo Fernández Jesús Martínez-Campos Martínez
Índice
1. Introducción a Ajax...... 3 2. Profundizando en Ajax...... 4 2.1. Frameworks para desarrollo Ajax...... 5 3. Conclusión sobre Ajax...... 6 4. Introducción a Silverlight...... 7 5. Profundizando en Silverlight...... 8 6. Conclusión sobre Silverlight...... 10 7. Comparativa Ajax vs Silverlight...... 11 8. Bibliografía...... 14
Índice de tablas Tabla 1. Posibles valores del atributo readyState del objeto XMLHTTPRequest...... 4 Tabla 2. Frameworks para el lado del servidor, según el lenguaje de programación...... 6 Tabla 3. Comparativa características técnicas Silverlight & Ajax...... 12 Tabla 4. Comparativa de las capacidades 3D para las tecnologías Silverlight & Ajax...... 13
1. Introducción a AJAX
AJAX, del inglés Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una tecnología de desarrollo web utilizada para crear RIA (Rich Internet Applications). La idea es hacer que lo que está en Internet parezca que es una aplicación local dando una rica experiencia de usuario y ofreciendo características que normalmente sólo aparecen en aplicaciones de escritorio. El término AJAX fue acuñado por Jesse James Garret en 2005. AJAX en realidad es un conjunto de tecnologías que trabajan juntas para mejorar la experiencia del usuario:
● XHTML (o HTML) y CSS para mostrar la página. ● DOM (Document Object Model) + lenguaje ECMAScript (implementación JavaScript o Jscript) para modificar la página sin ser recargada. ● Objeto XMLHttpRequest para hacer las peticiones AJAX al servidor. ● XML, JSON, HTML o texto plano para mostrar la información.
No es necesario que el contenido esté formateado en XML. Tampoco es necesario que las peticiones AJAX sean asíncronas.
Navegadores que permiten AJAX (es decir, tienen implementado el objeto XMLHttpRequest): ● Los basados en Gecko (como Mozilla Firefox, Epiphany, Netscape, etc) ● Los basados en KHTML (como Konqueror y Safari) ● Google Chrome ● Internet Explorer 5.0 y superior ● Opera 8.0 y superior ● Navegadores móviles, como el navegador de la S60 de Nokia a partir de la tercera generación o Opera Mobile Browser 8.0 y superior
Los navegadores antiguos, basados en texto y para invidentes no soportan AJAX.
Aunque AJAX es un estándar del W3C, cada navegador (sobre todo versiones antiguas) ha llamado al objeto XMLHttpRequest de una manera diferente, por lo que hay que diferenciar entre cada navegador o tipo de navegador a la hora de crear el objeto.
2. Profundizando en AJAX
El objeto XMLHttpRequest es el núcleo de las aplicaciones AJAX. Su especificación es la siguiente. XMLHttpRequest
<
+abort():void +getAllResponseHeaders():string +getResponseHeader(header:string):string +open(method:string, url:string):void +send(content) +setRequestHeader(header:string, value:string):void +setResponseHeader(header:string, value:string):void
La propiedad status contiene el código del resultado de la conexión HTTP: 200 (correcto), 404 (no encontrado), 500 (error del servidor), etc. El estado del objeto (atributo readyState) puede tener los valores mostrados en la tabla 1. Estado Valor Descripción Observaciones
Sin inicializar 0 No se ha llamado a open()
Cargando 1 Abierta (open). No se ha llamado a send()
Cargando 2 Enviado. Se ha Cabeceras y estado llamado a send() disponibles.
Interacción 3 Descargando o responseText tiene recibiendo datos parciales
Completado 4 Operación completa Datos recibidos Tabla 1. Posibles valores del atributo readyState del objeto XMLHTTPRequest.
2.1. Frameworks para desarrollo AJAX
Un framework de desarrollo AJAX es un framework que ayuda a desarrollar aplicaciones web que utilizan AJAX. Los datos se leen del servidor o se envían al mismo con peticiones Javascript. Sin embargo, puede que se necesite algún tipo de proceso en el servidor para manejar estas peticiones, como encontrar y almacenar los datos. Esto se puede llevar a cabo más facilmente con el uso de un framework dedicado a procesar las peticiones AJAX. El objetivo del framework es proveer un motor AJAX y funciones asociadas en el lado del cliente y en el lado del servidor.
De esta forma, existen dos tipos de framework para el desarrollo de aplicaciones AJAX: ● Frameworks para el desarrollo en Javascript del Cliente. Simplifican el desarrollo de aplicaciones web que utilizan AJAX, evitando tener que controlar el objeto XMLHttpRequest “a mano”. ● Frameworks para el desarrollo del Servidor. Simplifican el desarrollo del servidor a la hora de generar los contenidos XML que se enviarán al cliente y procesar las peticiones enviadas por el cliente.
Dentro del primer tipo (Javascript en el Cliente) podemos encontrar los siguientes frameworks: ● Prototype. Es uno de los más importantes. Viene incluído en el framework Ruby on Rails. ● jQuery. Incluida por Microsoft y Nokia en sus entornos de desarrollo. ● script.aculo.us. Basado en Prototype, permite todo tipo de efectos visuales, incluyendo drag&drop. También viene incluído con Ruby on Rails. ● ExtJS. Inicialmente era una extensión de YUI, jQuery y Prototype. Actualmente puede utilizarse como framework independiente. ● Mootools (My object oriented tools). Tiene de una API más enfocada a la Programación Orientada a Objetos. ● Yahoo UI Library (YUI). Incluye una serie de controles, utilidades y recursos para el desarrollo web. Dojo toolkit. Incluye widgets (controles) de diferentes tipos y skins para los mismos, además de soporte AJAX y almacén de datos en el cliente y en el servidor.
Dentro del segundo tipo de framework (en el lado del servidor) podemos encontrar los siguientes frameworks:
Lenguaje Frameworks
Java DWR, Google Web Toolkit (GWT).
Python Django, TurboGears, Pyjamas
Ruby Ruby on Rails
.NET ASP.NET AJAX (anteriormente Microsoft Atlas)
C++ Wt
PHP Quicknet, Sajax, Xajax Tabla 2. Frameworks para el lado del servidor, según el lenguaje de programación.
Algunos de estos frameworks (como Pyjamas, un port a Python de GWT, o el mismo GWT) no se utilizan únicamente en el servidor, si no que generan automáticamente código javascript. Son compiladores python-javascript o java-javascript.
3. Conclusión sobre Ajax La principal ventaja de AJAX sobre otras plataformas para desarrollo de RIAs (Rich Internet Applications) es que es un estándar del W3C. Por esta razón cualquier software puede realizar su propia implementación del estándar (objeto XMLHttpRequest). De esta manera una aplicación AJAX se ejecuta en cualquiera de los navegadores más populares, independientemente de su sistema operativo y arquitectura.
Otras tecnologías similares como Adobe Flash o Microsoft Silverlight son propietarias: sólo funcionan en los navegadores soportados por dichas empresas y únicamente utilizando su propio producto.
La combinación de AJAX con el nuevo estándar HTML5 permite el desarrollo de aplicaciones con una mejor experiencia gráfica. También pueden utilizarse efectos gráficos en 3D con el uso de X3D.
4. Introducción a Silverlight
Microsoft Silverlight es un complemento de Microsoft que nos permite desarrollar aplicaciones enriquecidas para la web. Silverlight funciona sobre varias plataformas y múltiples exploradores y proporciona una nueva generación de experiencias de usuario basadas en .NET.
Tras una descarga que se instala en segundos, Silverlight posibilita una nueva plataforma rica, segura y escalable.
Silverlight ofrece un modelo de programación flexible y coherente compatible con lenguajes .NET como Visual Basic, C# y F#, y otros como AJAX, Python, Ruby y que además se integra con las aplicaciones web existentes.
Silverlight supone una nueva forma de aprovechar los elementos multimedia en los principales navegadores entre los que se incluyen Firefox, Safari e Internet Explorer tanto en MacOS como en Windows.
Sirve por tanto como estructura para complementar las aplicaciones web que agrega nuevas funciones multimedia como la reproducción de vídeos, gráficos vectoriales, animaciones e interactividad, en forma similar a lo que hace Adobe Flash.
Silverlight compite con Adobe Flex, NexaWeb, OpenLaszlo y algunas presentaciones de componentes AJAX.
La primera versión de Silverlight fue lanzada en septiembre de 2007 y actualmente su versión 4.0 se distribuye de forma gratuita.
5. Profundizando en Silverlight
Vamos a ver qué cosas ofrece Silverlight.
Silverligh se caracteriza por:
Experiencias de usuario atractivas para diferentes plataformas:
● Proporciona experiencias multimedia enriquecidas (RIA) para la Web que incorporan vídeo, animaciones, interactividad e interfaces de usuario sensacionales.
● Pequeña instalación gracias a un complemento de unos 5Mb, el cual es fácil de instalar y que funciona en los principales navegadores.
● Experiencias coherentes en Mac y Windows sin requisitos adicionales de instalación.
● Crea experiencias web más completas y atractivas que aprovechan al máximo la capacidad del cliente para obtener el mejor rendimiento.
● Gráficos vectoriales, archivos multimedia, texto, animación y capas superpuestas permiten la integración perfecta de gráficos y efectos en cualquier aplicación web existente.
● Mejora las aplicaciones existentes con unos gráficos y archivos multimedia más ricos, y mejore su rendimiento y capacidades con Silverlight.
Un modelo de programación flexible con herramientas de colaboración:
● Basadas en .NET Framework, Silverlight permite que los desarrolladores y diseñadores usen de una manera fácil las habilidades y herramientas existentes para proporcionar experiencias de medios y RIA para la Web.
● La integración sencilla con las tecnologías y los activos web existentes significa que Silverlight funciona con cualquier plataforma o tecnología web back-end. Silverlight se integra con su infraestructura y aplicaciones existentes, que incluyen Apache, PHP, así como JavaScript y XHTML en el cliente.
● Diferentes opciones de lenguajes de desarrollo que incluyen C#, Visual Basic.NET y F# además de JavaScript, Ruby, Python, etc.
● Herramientas de funcionalidad específica tanto para diseñadores como para desarrolladores que aprovechan los estándares web y la amplia variedad de características de la plataforma de aplicaciones .NET de Microsoft.
● Expression Studio (diseñadores) para crear interfaces de usuario interactivas y experiencias de medios enriquecidas, preparar medios para su codificación y distribución, y crear sitios compatibles con estándares W3C mediante los nuevos XHTML, XML, XSLT, CSS y ASP.NET.
● Visual Studio (desarrolladores) para el desarrollo de código de cliente y servidor con la característica Intellisense completa, depuración eficaz en varias plataformas, compatibilidad con lenguaje enriquecido y mucho más.
● Modelo de presentación coherente con XAML, el lenguaje de presentación declarativo usado en aplicaciones de Windows 7. Los controles, diseños visuales, archivos multimedia y otros elementos se pueden presentar con total fidelidad de diseño en las aplicaciones de Silverlight y de Windows.
● El modelo de control extensible facilita la adición de contenido y comportamientos enriquecidos mientras que permite la reutilización y el uso compartido del código.
Totalmente multimedia:
● El formato de archivos multimedia unificado abarca desde contenidos HD hasta formatos para dispositivos móvilesmediante Vídeo de Windows Media (WMV), la implementación de Microsoft del estándar SMPTE VC-1 de video, al igual que compatibilidad con audio WMA y MP3.
● Agrega gráficos vectoriales y capas compatibles con la integración de gráficos ampliables hasta cualquier tamaño, así como superposiciones con estilo de emisión televisiva para la adición de bandas y subtítulos (CC).
● Soluciones flexibles de inserción de anuncios con vídeos y animaciones que incluyen la capacidad de proporcionar vídeo con estilo de emisión televisiva o anuncios animados sin pérdidas de fidelidad visual ni calidad de movimiento.
● Amplio ecosistema de herramientas de multimedia, servidores y soluciones compatible con la plataforma Tecnologías de Windows Media.
● Herramienta de codificación eficaz para la publicación en vivo y a petición de experiencias de medios con Expression Media Encoder, que incluye la codificación con aceleración de hardware de WMV, VC-1, H.264, AAC y otros.
Servidores y servicios conectados a la Web:
● Desarrolla fácilmente aplicaciones de web híbridas e incorpore los servicios y datos de cualquier parte de la Web gracias a la compatibilidad de Silverlight con LINQ y LINQ a XML mientras se obtiene acceso a esos datos con protocolos comunes como JSON, RSS, POX y REST.
● Aumento de la capacidad de detección(SEO) de contenidos RIA que se pueden indexar y buscar gracias al formato XAML basado en texto, que describe la interfaz y el contenido en una aplicación de Silverlight.
6. Conclusión sobre Silverlight
Silverlight nos ofrece un modelo de programación flexible y coherente compatible con lenguajes .NET como Visual Basic, C# y F#, y otros como AJAX, Python, Ruby y que además se integra con las aplicaciones web existentes.
Permite crear aplicaciones web enriquecidas muy potentes y de manera sencilla.
Se ha convertido por tanto en una estructura para complementar las aplicaciones web que agrega nuevas funciones multimedia como la reproducción de vídeos, gráficos vectoriales, animaciones e interactividad, en forma similar a lo que hace Adobe Flash.
7. Comparativa Ajax vs Silverlight
El desarrollo de RIA que incluyan 3D es cada vez más interesante con la aparición de sistemas de desarrollo en manos de grandes corporaciones y también de nuevas tecnologías de software libre.
Rich Internet Applications (Aplicaciones Ricas de Internet) es un nuevo tipo de aplicación con más ventajas que las tradicionales aplicaciones Web. Esta surge como una combinación de las ventajas que ofrecen las aplicaciones Web y las aplicaciones tradicionales. Normalmente en las aplicaciones Web, hay una recarga continua de páginas cada vez que el usuario pulsa sobre un enlace. De esta forma se produce un tráfico muy alto entre el cliente y el servidor, llegado muchas veces, a recargar la misma página con un mínimo cambio. Otra de las desventajas de las tradicionales aplicaciones Web es la poca capacidad multimedia que posee. Para ver un vídeo tenemos que usar un programa externo para su reproducción. Los entornos RIA, en cambio, no se producen recargas de página, ya que desde el principio se carga toda la aplicación y sólo se produce comunicación con el servidor cuando se necesitan datos externos como datos de una Base de Datos o de otros ficheros externos.
Las capacidades multimedia son totales gracias a que estos entornos tienen reproductores internos y no hace falta ningun reproductor del Sistema Operativo del usuario. Hay muchas herramientas para la creación de entornos RIA. Entre estas podemos mencionar las plataformas Flash y Flex de Macromedia, AJAX, Open Laszlo ( herramienta Open Source), Silverlight de Microsoft y JavaFx Script de Sun Microsystems.
En este caso el artículo se centra en las herramientas AJAX y Silverlight y, tras haberlas presentado anteriormente, ahora se pasará a comparar a modo de tabla las características más importantes de ambas.
En la tabla 3 se presenta una comparativa a modo de resumen de las características técnicas de las dos tecnologías presentadas evaluando “Riqueza Gráfica” de las aplicaciones generadas, “Contenedor” donde se ejecutará la aplicación, tiempo de “Descarga de Aplicación”, “Soporte Audio/Vídeo”, “Disponibilidad”, “Consistencia en Diferentes Entornos Informáticos”, “Requisitos del Servidor” de la aplicación, “Plug-in/Requisitos de Ejecución en el Cliente”, “Lenguaje de programación” necesarios para desarrollar la aplicación, “Desafío de Desarrollo” entendido por el grado de dificultad, “Conocimientos de Desarrollo” además de los lenguajes de programación, “Aspectos de seguridad” de las aplicaciones desarrolladas y “Coste de Licencia” a adquirir para su utilización.
En la tabla 4 se presentan las capacidades 3D de las tecnologías analizadas, incluyendo capacidades de interacción y otras propias de definición de mundos tridimensionales. Así se evalúa la capacidad de definir y representar elementos “3D” y como el formato de archivo utilizado, las posibilidades de definir “Modelos 3D, luces y cámaras”, capacidad de incluir “Texturas”, la forma de representar “Animaciones”, si se considera la definición de “Grupos”, representación de “Cinemática inversa”, posibilidad de representar “Dinámica y partículas”, posibilidades de “Interacción gráfica” e “Interacción vocal”, posibilidad de hacer uso de “Dispositivos de interacción complejos”, conseguir “Visualización estereoscópica”, “Capacidades de pantalla completa para dispositivos HMD2”, “Audio” y finalmente “Proyectos” representativos del uso de cada tecnología.
Microsoft Silverlight Ajax
Riqueza Gráfica Rica Media (Misma que HTML)
Contenedor Ligero Muy ligero (en el navegador)
Descarga de Aplicación Rápido Rápido
Soporte Audio/Video OK Pobre (a menos que use ActiveX)
Disponibilidad Ms. Windows, Linux, Mac OS Ms. Windows, Mac OS
Consistencia en Diferentes Relativamente consistente Varía Entornos Informáticos fuera de Ms. IE
Requisitos del Servidor Microsoft .NET Ninguno o mínimos (TIBCO Genera Interface)
Plugin/Requisitos de Microsoft Silverlight Plug-in para X3D Ejecución en el Cliente
Lenguaje de programación C#, Visual Basic JavaScript
Desafío de Desarrollo Relativamente fácil con las Muy complejo sin herramientas Ms. Visual herramientas tales como Studio o Ms. Expresión Blend TIBCO
Conocimientos de - CSS, XML, XSLT, DOM, Desarrollo ActiveX, X3D
Aspectos de seguridad Ficheros XAML generados Códigos JavaScript abiertos al público
Coste de Licencia SI NO Tabla 3. Comparativa características técnicas Silverlight & Ajax
Microsoft Silverlight Ajax
3D “3D real” (XAML) “3D real” (X3D)
Modelos 3D, luces y - Capacidades propias de X3D cámaras
Texturas Capacidades propias de Capacidades propias de X3D XAML
Animaciones Programables Programables
Grupos - Capacidades propias de X3D
Interacción gráfica “2D sobre 3D” OK
Interacción vocal SGRS -
Dispositivos de interacción - A través de X3D Complejos
Visualización - A través de X3D estereoscópica
Capacidades de pantalla - A través de X3D completa para dispositivos HMD
Audio - A través de X3D
Proyectos CodePlex AJAX3D Tabla 4. Comparativa de las capacidades 3D para las tecnologías Silverlight & Ajax
Para concluir se puede decir que cada tecnología presentada ofrecen ventajas e inconvenientes según el criterio que se considere, pero que lo que se debe hacer es combinarlas e integrarlas con otras tecnologías para obtener mejores beneficios.
8. Bibliografía AJAX ● AJAX: A Beginner's Guide. Steven Holzner. McGraw-Hill. ● http://es.wikipedia.org/wiki/AJAX ● http://en.wikipedia.org/wiki/Ajax_(programming) ● Introducción a AJAX, Javier Eguíluz Pérez, http://librosweb.es/ajax/index.html ● https://developer.mozilla.org/en/AJAX ● XMLHttpRequest en W3C: http://www.w3.org/TR/XMLHttpRequest/
Frameworks AJAX ● http://en.wikipedia.org/wiki/List_of_Ajax_frameworks ● 15 frameworks AJAX, http://www.caudalweb.com/blog/15-frameworks-javascript-de- ajax/ ● Página de JQuery, http://jquery.com/ ● Página de Prototype, http://www.prototypejs.org/ ● Página de Scriptaculous, http://script.aculo.us/ ● Página de DWR, http://directwebremoting.org/ ● Dojo Toolkit, http://dojotoolkit.org/
Javascript ● Manipulación del DOM mediante Javascript, http://www.maestrosdelweb.com/editorial/ dom/ ● XML in Firefox, http://www.ibm.com/developerworks/xml/library/x-ffox15.html
Silverlight ● http://es.wikipedia.org/wiki/Microsoft_Silverlight ● http://en.wikipedia.org/wiki/Microsoft_Silverlight ● Página oficial de Microsoft Silverlight, http://www.silverlight.net/ ● http://msdn.microsoft.com/es-es/silverlight/bb187401.aspx
Desarrollo Web y RIAS ● H. Olmedo-Rodríguez, D. Escudero-Mancebo, V. Cardeñoso-Payo. 3D en las Rich Internet Applications: comparativa de opciones tecnológicas. ● http://recursos.dotnetclubs.com/ftp/dnc-alicante/pub/ppts/FUT09/DesarrolloWeb.pptx