Unidad I. Aplicaciones RIA – Rich Internet Aplications.

Aplicaciones RIA Rich Internet Aplication (Aplicaciones de internet enriquecidas o mejoradas)

  1. Qué son las Aplicaciones RIA
  2. Estructura de una Aplicación RIA
  3. Tecnologías de programación de aplicaciones RIA.
  4. Elementos de Aplicaciones RIA
  5. 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, 6mail 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.

facebook-twitter-logo

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:

image003

Una aplicación RIA sería algo así:

image004


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)

image002

 

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:
  1. 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.
  2. 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.

XMXMLL 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.

Ejemplo de la estructura de un documento XML
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>

XH200px-XHTML.svgTML 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 -->
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
 <head>
 <title>Titulo de la pagina</title>
 </head>
 <body>
 <p>Primer documento XHTML, es decir un, Hola mundo</p>
 </body>
 </html>

CSS del inglés Cascading Style Sheets(Hojas de Estilo en Cascada) Este es un lenguaje que se utiliza para dar formato, estilo, presentación a un documento en HTML al igual que un XHTML o XML y su principal finalidad de este es el de separar la estructura del documento de su presentación para así trabajar por separado uno de lo otro, actualmente se encuentra en su versión CSS3 con muchas mejoras.

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.

DOM

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

Programacion en XML: el nuevo lenguaje de Internet. Los apuntes de un curso bastante completo sobre XML, realizado en Granada,http://geneura.ugr.es/cursos/xml/programa.shtml

https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxyZXBvc2l0b3Jpb3RpY2ZlbGlwZXxneDo0NmM2MjQ4NWUyMmQxYzEy

Deja un comentario