Aplicacion "RIA" actividad para DAIII

Universidad Tecnológica del Sureste de Veracruz
Tecnologías de la Información y Comunicación

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


Índice de Contenidos
Índice
Objetivo
Introducción
I.

Desarrollo de la Práctica

II.

Investigación

Conclusiones
Referencias Bibliográficas
Anexos


pág. 2


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


pág. 3


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


pág. 4


I
DESARROLLO DE LA
PRÁCTICA


pág. 5


I
Desarrollo de la Práctica


pág. 6


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.


pág. 7

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.


pág. 8


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.


pág. 9

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.


pág. 10



pág. 11


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


pág. 12

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


pág. 13



pág. 14



pág. 15

Y finalmente el resultado final es el siguiente esto esta en un servidor obviamente
para ver si funciona correctamente.


pág. 16


2
INVESTIGACIÓN


pág. 17


2
Investigación


pág. 18


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

pág. 19

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
permanente entre los

(ya

que

mantienen

un

contacto

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


pág. 20

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
comunicación

sincrónica

(Potthast

y

Rowe,

2007).

En

una

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

pág. 21

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 (MoralesChaparro, 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

pág. 22

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.

pág. 23

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

pág. 24

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.

pág. 25

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
representación de

es

un

modelo

de

Objetos

para

la

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

pág. 26

del lenguaje Java y el
http://docs.sun.com/source/816-

lenguaje

C.

Por

más

información

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

pág. 27

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


pág. 28


Conclusiones


pág. 29


Referencias Bibliograficas
http://www.ort.edu.uy/fi/pdf/freddyveitlicsistemasort.pdf
http://exa.unne.edu.ar/depar/areas/informatica/SistemasOperativos/TFLino.pdf


pág. 30


ANEXOS


pág. 31


Anexos

Anexo 1


pág. 32

Aplicacion "RIA" actividad para DAIII

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Destacado

Destacado (8)

Similar a Aplicacion "RIA" actividad para DAIII

Similar a Aplicacion "RIA" actividad para DAIII (20)

Último

Último (19)

Aplicacion "RIA" actividad para DAIII