Aplicacion "RIA" actividad para DAIII

INFORME DE PRÁCTICA

“RESULTADO DE APRENDIZAJE“

PRESENTA

POOL PERERA JORGE

ALERTO

CUATRIMESTRE Y GRUPO

5 to. “502”

NOMBRE DEL DOCENTE

ROGELIO VAZQUEZ HERNANDEZ

Cd. Nanchital, Ver., a 02 de FEBREROde 2014

Universidad Tecnológica del Sureste de Veracruz

Tecnologías de la Información y Comunicación



Universidad Tecnológica del Sureste de Veracruz pág. 2

Índice de Contenidos

Índice

Objetivo

Introducción

I. Desarrollo de la Práctica

II. Investigación

Conclusiones

Referencias Bibliográficas

Anexos




Objetivo

Que el alumno realice una aplicación RIA usando lo aprendido en clases.




Introducción

Se mostrara como se realizo una galería de imágenes usando html y jQuery.




DESARROLLO DE LA

PRÁCTICA

I




Desarrollo de la Práctica

I




RIA

Mostramos el HTML

Aquí se inicia el documento, se le coloca un titulo y se hace referencia a el archivo css que le dará

estilo a nuestra aplicación así como hacer referencia a los scripts que se utilizaron. También se le

da un poco de edición al estilo de los títulos.




Aquí declaramos los títulos que llevara cada imagen.

Aquí se le asigna a las miniaturas que imágenes abrirá al seleccionarse alguna.

Ahora pondremos una descripción a cada imagen.




Ahora creamos un div que contendrá las imágenes miniatura denominadas thumbs, hacemos el

link a cada una de ellas y asi se hara con las medianas y las mas grandes.




Este es un JavaScript incluido en el html el cual se hace cargo de las animaciones y los cambios

de imágenes al dar clic sobre ellas.




Cabe mencionar que la mayoría del código esta comentado en inglés.




Aquí se muestra el archivo css que es el que da vista o estilo a nuestra aplicación




Y finalmente el resultado final es el siguiente esto esta en un servidor obviamente

para ver si funciona correctamente.




INVESTIGACIÓN

2




Investigación

2




INTRODUCCIÓN A TECNOLOGÍAS ENRIQUECIDAS PARA INTERNET

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 (Rogowskiet.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).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.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]1

.

4. 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.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).

Modelo de interacción entre el Modelo de interacción entre el servidor y el




servidor y el navegador del cliente, para navegador del cliente, para aplicaciones

aplicaciones que utiliza tecnologías Web convencionales.

enriquecidas para Internet.

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.

Servidor Web Servidor Web

Navegador del

cliente

Navegador del

clienteInterfase del usuario

Lenguaje del Servidor

Base de Datos

Interfase del usuario

Aplicación RIA

Lenguaje del Servidor

Base de Datos8

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.

.9

Criterio Ajax Flash Java

Experiencia en la

interfaz del usuario

Baja Alta Media




Velocidad de descarga Alta Media Baja

Requisito de plug-in en

Cliente

No Flash Player JRE

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, etc.

XML, DOM, JavaScript,

Flash, ActionScript

Java

Soporta audio / video Bajo Alto Medio

Alcance Alto Medio Medio

Adopción de la

Tecnología

Medio (pero cada vez

más rápido)

Alto Bajo

Costo No (para construcción

del cliente)

Si (para Flex)

No (para Open Laszlo)

No

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

http://www.adobe.com/devnet/actionscript/

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 http://www.w3.org/Style/CSS/

DOM: DocumentObjectModel 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

http://www.w3.org/DOM/

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 http://docs.sun.com/source/816-

6408-10/contents.htm

XHTML: eXtensibleHypertextMarkupLanguage (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

http://www.w3c.es/Divulgacion/Guiasbreves/XHTML

XML: eXtensibleMarkupLanguage (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

http://www.w3.org/XML/

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

http://www.w3.org/TR/XMLHttpRequest/

XSL: Extensible StylesheetLanguage (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:

http://www.w3.org/Style/XSL/

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




Las hojas de estilo XSLT realizan la transformación del documento utilizando una o

varias reglas de plantilla. Por más información www.w3.org/TR/xslt.html




Conclusiones




Referencias Bibliograficas

http://www.ort.edu.uy/fi/pdf/freddyveitlicsistemasort.pdf

http://exa.unne.edu.ar/depar/areas/informatica/SistemasOperativos/TFLino.pdf

http://www.ort.edu.uy/fi/pdf/freddyveitlicsistemasort.pdf




ANEXOS




Anexo 1

Anexos

Aplicacion "RIA" actividad para DAIII

Technology

Transcript of Aplicacion "RIA" actividad para DAIII