Aplicaciones RIA Rich Internet Aplication (Aplicaciones de internet enriquecidas o mejoradas)
- Qué son las Aplicaciones RIA
- Estructura de una Aplicación RIA
- Tecnologías de programación de aplicaciones RIA.
- Elementos de Aplicaciones RIA
- Ventajas y Desventajas de las RIA
El red o internet es algo que se ha vuelto tan indispensable para nosotros los usuarios que no debería de ser tedioso o incluso aburrido de utilizar, sino atractiva y es lo que se ha logrado con el paso del tiempo pues se ha pasado de aplicaciones lineales y sencillas a aplicaciones con interfaces más interactivas y aún más funcionales dando como resultado lo que ahora se conoce como Aplicaciones Ricas de Internet o por sus siglas en ingles RIA (Ritch Internet Applications). Aquí una explicación de cómo es que funcionan estas aplicaciones.
Qué son las Aplicaciones RIA
Las aplicaciones RIA son aplicaciones web que tienen la mayoría de las características de las aplicaciones de escritorio tradicionales ya que soporta gráficos y escenarios de transmisión de medios, al tiempo que proporciona la mayor parte de las ventajas de la implementación y el mantenimiento de una aplicación web.
Las diferencia de las aplicaciones web habituales, las RIA (Rich Internet Applications) enriquecen la experiencia del usuario, suelen ser más interactivas y mayor capacidad gráfica y multimedia. Un ejemplo claro sería el de Gmail, la aplicación de Google para la gestión del correo electrónico, que tiene un interfaz web que permite al usuario efectuar acciones sobre su correo igual que si estuviera utilizando un programa cliente instalado en su propio equipo. También facebook y twitter que son redes sociales o Flickruna página donde puedes publicar fotos.
Fig.1.1 Ejemplo de Aplicaciones RIA
Estructura de una aplicación RIA.
Una implementación típica RIA utiliza una infraestructura Web combinada con una aplicación de cliente que se encarga de la presentación. El plug-in ofrece rutinas de biblioteca para ricos soporte gráfico, así como un contenedor que limita el acceso a los recursos locales por motivos de seguridad .
La arquitectura de una aplicación Web tradicional sería la siguiente:
Una aplicación RIA sería algo así:
Tecnologías de programación de aplicaciones RIA.
Se consideran principalmente dos categorías de aplicaciones:
- Desktop: Aplicaciones que no utilizan navegador web y que se instalan en cada equipo personal.
- RWA (Rich Web Applications): Aplicaciones que se ejecutan utilizando el navegador web.
Ejemplo de Tecnologías disponibles en el mercado:
- Ajax (por ejemplo el que genera el Google Web Toolkit)
- Flex (Adobe). Requiere tener instalado el Adobe Flash Player en el equipo del usuario
- Silverlight (Microsoft)
- JavaFX (Sun Microsystems)
- OpenLaszlo (código abierto)
Ventajas de estas aplicaciones son:
- Agilidad en la respuesta.
- Cálculos rápidos, controles prediseñados y funciones gráficas, interactivas y multimedia avanzadas.
- Uso desde cualquier ordenador con acceso a Internet.
Elementos de una aplicación RIA.
Almacenamiento en caché
RIA generalmente utilizan el mecanismo normal de almacenamiento en caché del navegador. Los recursos de almacenamiento en caché inteligente mejorará el rendimiento de la aplicación.
Instrucciones en el diseño de una estrategia de almacenamiento en caché:
- Al dividir las aplicaciones cliente de gran tamaño en pequeños componentes por separado descargables, puede almacenar en caché estos componentes para mejorar el rendimiento y minimizar los viajes redondos red. Evitar la descarga y crear instancias de toda la aplicación en el arranque, si es posible.
- Permitir que el navegador de objetos de caché que no son susceptibles de cambiar durante una sesión. Utilizar almacenamiento local RIA específica de información que cambia durante una sesión, o que debe persistir entre las sesiones.
- Para evitar excepciones no previstas , compruebe que el almacenamiento aislado es lo suficientemente grande para contener los datos que va a escribir en él.
Composición
Composición le permite construir aplicaciones que se pueden mantener o ampliar más fácilmente sin re implementación o redistribución de toda la aplicación o o permitir que la aplicación sea más fácil de personalizar o personalizado por el usuario, o la medida de la función del usuario o tarea.
Instrucciones en el diseño de una estrategia de composición.
- Composición puede ayudarle a diseñar aplicaciones que pueden ser reutilizados en diferentes escenarios con cambios mínimos o nulos. Sin embargo, evite los diseños que introducen dependencias que requerirán redistribución aplicación frecuente.
- La composición se adapta bien a mash-up de aplicaciones que integran información y la funcionalidad de diferentes fuentes, o en situaciones en que el usuario de la aplicación extensible o personalizable.
Acceso a datos
Implementaciones RIA solicitar los datos desde el servidor Web a través de los servicios de la misma manera como un cliente de AJAX. Después de los datos lleguen al cliente, se puede almacenar en caché para maximizar el rendimiento.
Instrucciones en el diseño de una estrategia de acceso a datos:
- Utilice la caché del cliente para minimizar el número de viajes ida y vuelta al servidor, y para proporcionar una interfaz de usuario más sensible.
- Filtrar datos en el servidor y no en el cliente para reducir la cantidad de datos.
Logging
Inicio de sesión con el propósito de depuración o la auditoría puede ser un reto en una aplicación RIA.
- Ejemplo:
- El acceso al sistema de archivos del cliente no está disponible en las aplicaciones de Silverlight y la ejecución del cliente y el servidor de proceder de forma asincrónica.
- Archivos de registro de un usuario de cliente se deben combinar con los archivos de registro del servidor para obtener una imagen completa de la ejecución del programa.
La instalación de la RIA Plug –In
Debe tomar en cuenta en cuenta cómo va a gestionar la instalación del plug -in RIA cuando no está instalado:
- Intranet . Utilizar el software de distribución de la aplicación o la característica de directiva de grupo de Active Directory ® de Microsoft para preinstalar el plug-in en cada equipo en la organización. Como alternativa , considere el uso de Windows Update, donde Silverlight es un componente opcional .
- Internet. Los usuarios deben instalar el plug-in de forma manual, por lo que debe proporcionar un vínculo a la ubicación adecuada para descargar la versión actual del Plug in Para los usuarios de Windows , Windows Update proporciona el plug-in como un componente opcional .
- Plug-in de actualizaciones. Las actualizaciones del plug-in tienen en cuenta la compatibilidad con versiones anteriores. Puedes hacer objetivo a una versión plug-in en particular, sino considerar la implementación de un plan para verificar la funcionalidad de la aplicación en las nuevas versiones de los plug -in del navegador a medida que estén disponibles.
XML, XHTML y CSS
Las RIA como cualquier aplicación está diseñada con algún lenguaje el cual le da la funcionalidad que poseen y estabilidad, de igual forma utilizan hojas de estilo las cuales les da la apariencia aquí la explicación de estos.
XML de sus siglas en Ingles eXtensible Markup Language(Lenguaje de Marcas Extensible), es un lenguaje de marcas desarrollado por el W3C, el cual permite definir la gramática de lenguajes específicos, la principal característica de este lenguaje es la de permite compartir datos para que se trabajen en otros niveles de la aplicación por todas la aplicaciones y soportes otra es que da soporte a Base de Datos logrando así la comunicación entre varias aplicaciones.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!--?xml version="1.0" encoding="UTF-8" ?--> <!--?xml version="1.0" encoding="UTF-8" ?--> <? xml version = "1.0" encoding = "UTF-8" ?> <!DOCTYPE Edit_Mensaje SYSTEM "Edit_Mensaje.dtd"> < Edit_Mensaje > < Mensaje > < Remitente > < Nombre >Nombre del remitente</ Nombre > < Mail > Correo del remitente </ Mail > </ Remitente > < Destinatario > < Nombre >Nombre del destinatario</ Nombre > < Mail >Correo del destinatario</ Mail > </ Destinatario > < Texto > < Asunto > Este es mi documento con una estructura muy sencilla no contiene atributos ni entidades... </ Asunto > < Parrafo > Este es mi documento con una estructura muy sencilla no contiene atributos ni entidades... </ Parrafo > </ Texto > </ Mensaje > </ Edit_Mensaje > |
XHTML Siglas del inglés eXtensible HyperText Markup Language, este lenguaje solo HTML expresado como XML valido, la diferencia con HTML es que XHTML es más estricto a la hora de la escritura de esta forma resulta más fácil corregir errores o mejorar la escritura en pocas palabras es la versión XML de HTML.
Ejemplo de XHTML
4
5
6
7
8
9
10
11
12
13
|
</ pre > <? xml version = "1.0" encoding = "UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!--Este es un comentario y no sera tomado en cuenta por el navegador --> < head > < title >Titulo de la pagina</ title > </ head > < body > < p >Primer documento XHTML, es decir un, Hola mundo</ p > </ body > </ html > |
Ejemplo de una hoja de estilo CSS
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
.tabs label { background : linear-gradient( top , #5ba4a4 0% , #4e8c8a 100% ); font-size : 15px ; line-height : 40px ; height : 40px ; position : relative ; padding : 0 20px ; float : left ; display : block ; width : 80px ; color : #385c5b ; letter-spacing : 1px ; text-transform : uppercase ; font-weight : bold ; text-align : center ; text-shadow : 1px 1px 1px rgba( 255 , 255 , 255 , 0.3 ); border-radius: 3px 3px 0 0 ; box-shadow: 2px 0 2px rgba( 0 , 0 , 0 , 0.1 ), -2px 0 2px rgba( 0 , 0 , 0 , 0.1 ); } .tabs input:hover + label { background : #5ba4a4 ; } .tabs label:first-of-type { z-index : 4 ; box-shadow: 2px 0 2px rgba( 0 , 0 , 0 , 0.1 ); } .tab-label -2 { z-index : 3 ; } .tab-label -3 { z-index : 2 ; } .tab-label -4 { z-index : 1 ; } |
Modelo de Objeto
El Document Object Model o DOM (‘Modelo de Objetos del Documento’ o ‘Modelo en Objetos para la Representación de Documentos’) es una interfaz de programación de aplicaciones las llamadas API el cual proporciona una jerarquía de objetos con la cual podemos armar por decirlo así la estructura o elementos de una página web que está mostrando un navegador un ejemplo seria el historial o el tamaño de la ventana de este.
Fig. 1.4 Estructura del DOM
XMLHttpRequest(Ajax)
XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), también conocido como objeto XHR, es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Esas peticiones se hacen a través de cualquier codificación incluyendo lo anterior mencionado como XML, JSON, HTML entre otras. Actualmente este objeto tiene propiedades y métodos diferentes los que tenía en la primera aplicación de AJAX como los métodos open(“método”, ”url”) o el método send(contenido) métodos principales para aplicar este objeto.
Para poder hacer uso del objeto XHR basta con crear una instancia de este objeto abrir la dirección url y enviar la petición ya sea tipo get o post ósea con o sin parámetros. Pero aunque este es usado en diferentes protocolos la principal dentro de las RIA es con el protocolo HTTP.
XHR tiene un método de llamado y respuesta o retorno lo que hace que el navegador en el cual se efectué siga con su funcionamiento hasta que la petición regrese es así como XHR sea utilizado para actualizar recuperar o actualizar datos o partes de la página en donde se encuentra
Aquí un ejemplo de una implementación del objeto XHR de llamada
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function callScript ( scriptName, args ){ var xhr_object = null; // ### Construcción del objeto XMLHttpRequest según el tipo de navegador if (window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if (window.ActiveXObject) xhr_object = new ActiveXObject( "Microsoft.XMLHTTP" ); else { // XMLHttpRequest no es soportado por el navegador alert( "Su navegador no soporta los objetos XMLHTTPRequest..." ); return ; } xhr_object.open( "POST" , scriptName, true); // Definición del comportamiento a adoptar en el cambio de estado del objeto XMLHttpRequest xhr_object.onreadystatechange = function () { if (xhr_object.readyState == 4) { //alert(xhr_object.responseText); // DEBUG MODE //document.write(xhr_object.responseText); eval (xhr_object.responseText); } return xhr_object.readyState; } xhr_object.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ); // Envio de la petición xhr_object.send(args); } |
Bibliografía
Microsoft. (2014). microsoft.com. Recuperado el 11 de Enero de 2014, de Microsoft: http://msdn.microsoft.com/en-us/library/ee658083.aspx
Tito Fernando Ale Nieto. (2012). Monografias.com. Recuperado el 03 de Enero de 2014, de Aplicaciones RIA: http://www.monografias.com/trabajos89/ria-aplicaciones-internet-enriquecidas/ria-aplicaciones-internet-enriquecidas.shtml#quetecnola
Villate., J. E. (5 de Mayo de 2001). Introducción a XML. Recuperado el 10 de Enero de 2014,de http://quark.fe.up.pt/cursoxml/curso.pdf