“Aplicaciones Ricas de Internet”. Evolución Internet 2.0

aplicacionesria

Las RIA (Aplicaciones Ricas de Internet, por sus siglas en inglés) suponen un avance en las aplicaciones web porque permiten nuevas y variadas posibilidades, como prescindir del navegador, trabajar sin conexión a Internet o dotar de nuevas características al ordenador del usuario.

Buscando encontramos como no, una estupenda referencia y descripción en Wikipedia “Aplicaciones de Internet Ricas”:

Consisten en el aprovechamiento de la experiencia del usuario en herramientas y funciones de escritorio tan naturales como copiar, cortar y pegar, redimensionar columnas, y ordenar etc., con el alcance y la flexibilidad de presentación y despliegue que ofrecen las aplicaciones o páginas Web junto con lo mejor de la multimedia (voz, vídeo, etc.).

Se puede decir que las RIA son la nueva generación de las aplicaciones y es una tendencia ya impuesta por empresas como Macromedia, Sun o Microsoft que se encuentran desarrollando recursos para hacer de este tipo de aplicaciones una realidad. Estas aplicaciones están basadas en plataformas J2EE o.NET, con un front-end Flash o Java swing y utilizan una arquitectura Cliente/Servidor asíncrona, segura y escalable, junto con una interfaz de usuario Web.

Entre los beneficios principales de aplicaciones RIA tenemos un mejoramiento importante en la experiencia visual, que hacen del uso de la aplicación algo muy sencillo, ofrece mejoras en la conectividad y despliegue instantáneo de la aplicación, agilizando su acceso, garantizan la desvinculación de la capa de presentación es decir acceso a la aplicación desde cualquier computador en cualquier lugar del mundo.

web20ria

Leemos en Eroski Consumer tecnología un artículo muy interesante sobre las aplicaciones RIA. Las aplicaciones ricas de Internet se extienden con sus diferentes combinaciones entre la Web y el ordenador del usuario:

Durante el último año y medio se han desarrollado diversos programas muy interesantes para Adobe Air, la plataforma más extendida, y Gears, la solución de Google, que además funcionan por lo general en los tres sistemas operativos más extendidos: Windows, Linux y Mac OS X.

Twhirl y TweetDeck

Twitter, el famoso sitio de microblogging, ha visto cómo se han desarrollado nuevas RIA gracias a su decisión de liberar su API. Dos de las más destacadas son Twhirl y TweetDeck, que funcionan ambas con Adobe Air. Como es lógico, estas aplicaciones sí precisan de la conexión a Internet para actualizar el estado del usuario y recibir los mensajes de los contactos.

Su baza radica en que permiten el manejo de Twitter sin necesidad de abrir la página web del sitio. Sólo se debe hacer clic en el icono del programa en el escritorio. Ambos notifican cuándo se reciben mensajes nuevos, una carencia del sitio web original, y ofrecen diversos servicios que acortan las direcciones, al estilo de TinyURL.

AlertThingy y Feedalizr

AlertThingy es otra opción distinta, también basada en Adobe Air. En su versión 3 muestra información de Twitter, Facebook, Flickr, entre otras redes sociales, con un diseño similar a TweetDeck. En la misma línea de mezclar diversas redes sociales se encuentra Feedalizr, que combina FriendFeed, Facebook y Twitter, entre otras.

Vídeos en Flash

RichFLV se apoya en Adobe Air para crear un editor de los vídeos en Flash, cuya extensión es “.flv”. Con la proliferación de estos contenidos audiovisuales en sitios como YouTube, resulta atractiva la posibilidad de crear remezclas gracias a esta herramienta combinada con complementos para Firefox como DownloadHelper.

Editar imágenes

En el apartado de las imágenes, destaca por su utilidad Shrink O’Matic, que permite redimensionar múltiples fotografías con sólo arrastrar y soltar en la ventana del programa. Trabaja con imágenes JPG, GIF y PNG y también usa Adobe Air.

Si se trata de editar imágenes, los más profesionales pueden optar por una solución de pago como StudioCloud. Quienes busquen una solución más sencilla disponen de Splashup Light, que realiza modificaciones más básicas como recortar, redimensionar o modificar el brillo y el contraste. Por otra parte, DeskTube facilita al usuario manejar YouTube desde una aplicación, sin necesidad de entrar en el sitio web. Estos tres últimos programas también funcionan con Adobe Air.

Organizar el trabajo

Para concentrarse en el trabajo, medir el tiempo que conlleva cada tarea y evitar distracciones, se puede emplear Klok , que organiza los proyectos de trabajo y las tareas que se deben realizar en un calendario para después cronometrarlas. Kronos efectúa el mismo trabajo aunque de manera más simple y después manda los resultados a Basecamp , un software de gestión de proyectos.

Focused trata de mantener la concentración por otro método: aislar al usuario del resto de aplicaciones del ordenador (correo electrónico, Twitter, etcétera) para que pueda escribir con tranquilidad. Para lograrlo, la pantalla se maximiza completamente y se ennegrece. Si se desea recordar las tareas pendientes, MiniTask permite escribirlas y fijar alarmas para avisar. Por otro lado, Webcam to GIF hace lo que sugiere su nombre y convierte las imágenes captadas por una de estas cámaras en un GIF animado que se puede usar como avatar en los foros y en las redes sociales. Todas ellas utilizan Adobe Air.

Fácil instalación y actualización

Las RIA se instalan con facilidad cuando funcionan a través de Adobe Air y Gears. Ni siquiera se necesita reiniciar el navegador para que comience a funcionar la aplicación. Por ejemplo, en Adobe Air surge una ventana donde se confirma la instalación y se debe conceder el permiso para que accedan tanto a Internet como a los archivos del equipo. Se debe aceptar porque, en caso contrario, no funcionaría. De igual forma, estas aplicaciones web detectan cuándo necesitan una actualización y el proceso se efectúa de forma automática sin necesidad de reiniciar nada.

Fuente: Consumer Eroski

:) Esperamos que esta información te haya sido de utilidad. Un saludo, Diseño Web ProfesionalNet.
(Si hay algún enlace roto, si simplemente estás agradadecid@ o si conoces algún otro detalle  importante sobre las Aplicaciones RIA que no esté y debiera de estar
aquí, por favor,  háznoslo saber en un rápido comentario, gracias!)

profesionalnet-disenoweb2

Adobe lanza AIR para aplicaciones web.

Adobe Interactive Runtime (AIR) estará disponible para ser descargada en forma gratuita y de código abierto. También serán dados a conocer los consumidores que ya utilizan la tecnología para crear aplicaciones de negocios y consumo.

adobe-air.jpg


Adobe lanzará la primera versión de su software de desarrollo de aplicaciones de internet AIR, y según señaló Kevin Lynch, oficial en jefe de Tecnología, cientos de miles de desarrolladores han descargado el kit (SDK) desde que esta tecnología se lanzó como beta el pasado mes de junio. Junto con este anuncio, la compañía revelará qué aplicaciones creadas en este nuevo lenguaje ya se encuentran disponibles.

AIR tendría muchas similitudes con las Rich Internet Applications (RIAs) que han sido creadas usando Adobe Flash y Flex Builder, y actuaría como envoltorio de las mismas, permitiendo que puedan correr en forma local en Flash Player.

Adobe también lanzará Flex3, una nueva versión de su software para desarrollo de estructura de RIA’s, junto con Adobe BlazeDS, tecnología que agilizará la comunicación entre el software encargado de la interfaz y el que corre en el servidor. Los tres lanzamientos serán de código abierto y gratis.

Adobe estaría jugando en un área dominada por Microsoft a nivel de aplicaciones de escritorio y negocios, como su navegador Silverlight y su set de diseño y gráfica Expression; en caso de que resultara la compra de Yahoo!, el uso de Silverlight aumentaría al dejar atrás el uso de Flash en las aplicaciones web, según fuentes de Microsoft.

Desde Adobe, Lynch señala que le parece un poco difícil que el trato entre Microsoft-Yahoo! promueva el abandono de una tecnología que demoró cerca de 10 años en lograr la aceptación de la mayoría de los internautas, en un 99%. “No es fácil llegar a ese tipo de distribución”, señaló a PCWorld.com y agregó que la compañía no tendría problemas en recibir más competencia, “lo que mantendría a nuestros equipos parados sobre sus pies”.

La adquisición de Macromedia en el 2005, permitió a Adobe la creación de un set completo de herramientas comprensibles, para desarrolladores enfocados en multimedia, desarrollo web y aplicaciones de alto impacto. Sólo Microsoft sería un verdadero rival. Con AIR, la compañía busca involucrarse en el círculo de los negocios y empresas.

Algunos de los consumidores que ya están usando la nueva tecnología de Adobe son el Deutsche Bank con “db-direct” para el escritorio, que informará a los clientes de la actividad en sus mediante con alertas; EBay, uno de los primeros, con “ebay Desktop” para el computador, y AOL, con “Top 100 Music Videos”, que permitirá a los usuarios buscar videos incluso si están offline. A esta lista se agregaría The New York Times Company y The Nasdaq Stock Market.

Tips de inclusión en Dreamweaver CS3

dreamweavercs3

Damián Pérez Valdés, es un Webmaster, Administrador de Sistemas, con experiencia en desarrollo web y de aplicaciones, que además escribe unos artículos que calificamos excelentes, reproducimos aquí el artículo publicado en Maestros del Web referido a Tips de inclusión en Dreamweaver CS3:

Dreamweaver trae muchas mejoras en cada versión que no debemos pasar por alto aunque parezcan sencillas. En el siguiente artículo presentamos algunos consejos útiles para los usuarios de Dreamweaver CS3.

Dreamweaver es una poderoso Editor WYSIWYG de páginas web. Este producto fue creado por Macromedia y luego adquirido por Adobe. La última versión de este producto Adobe Dreamweaver CS3, incorpora muchas mejoras que hacen que nuestro trabajo sea más sencillo y ahorra tiempo en el desarrollo de proyectos.

Esta poderosa herramienta es muy utilizada por los programadores y diseñadores web, entre los lenguaje que podemos utilizar para crear nuestros sitios web se encuentran (HTML, ColdFusion, PHP, ASP, XSLT, CSS, JavaScript, XML, JSP, ASP .Net).

Razones que plantea Adobe por las cuales debemos actualizar:

  • Estructura Spry para Ajax
  • Datos Spry
  • Objetos Spry
  • Efectos Spry
  • Integración con Adobe Photoshop® y Fireworks®
  • Comprobación de compatibilidad con el explorador
  • Sitio web CSS Advisor (Asesor de CSS)
  • Diseños de CSS
  • Gestión de CSS
  • Adobe Device Central CS3

Definir Sitio:

Definir un sitio nos ayuda a administrar de una forma más fácil nuestro sitio web, ya sea local o remoto. También nos posibilita el uso de “Templates”, crear caché de nuestro sitio entre otras posibilidades. Para ello debemos ir a la ventana “Files” u oprimir la tecla “F8”.

Uso de Templates:

El uso de Templates nos ayuda a mantener una plantilla de nuestro sitio. Esto nos posibilita el no tener que modificar todo el sitio cuando necesitamos realizar cambios. Para ello debemos seleccionar regiones editables.

  • Make Template: esta opción nos permite salvar nuestra página web como plantilla, podemos definir su nombre. El sitio con el cual usaremos la plantilla.
  • Editable Region: con ésta opción podemos definir las regiones que serán editables en el sitio. Debemos tener en cuenta que las regiones no editables deberán modificarse desde la plantilla.

Para crear una página desde la platilla es necesario crear un nuevo documento y seleccionar desde plantilla, luego nos mostrará una lista de las plantillas que hemos creado.

Chequear la compatibilidad de las páginas Web:

El verificar nuestro sitio es un paso importante ya que nos ayuda a comprobar si el mismo es compatible o no, con la mayoría de los navegadores. Con la opción “Check Browser Compatibility” podemos verificar la compatibilidad. Nos mostrará los resultados en la ventana de resultados.

Podemos configurar los navegadores con los cuales analizaremos la compatibilidad y su versión, para ello solo debemos ir a “Settings”.

Validación de documentos:

Debemos tener en cuenta lo útil y necesario que es el realizar validaciones de nuestro sitio. Podemos configurar las validaciones de los documentos en “Settings”.

Estas validaciones se realizan en el documento actual, en el sitio completo que tenemos definido, o seleccionar los ficheros que deseamos validar.

Usar HTML en caracteres especiales:

En muchas ocasiones encontramos páginas web que en lugar de mostrarnos los caracteres especiales como vocales con tildes (á, é, í, ó, ú) muestras caracteres extraños ilegibles . Para que esto no ocurra debemos sustituirlo por su código HTML.

Entre los caracteres especiales que más usamos encontramos:

  • á – á
  • é – é
  • í – í
  • ó – ó
  • ú – ú

Estos caracteres especiales los podemos encontrar en la pestaña “Text” que se encuentra en la ventana “Insert”.

Es muy aconsejable usarlos siempre que necesitemos insertar estos tipos de caracteres.

Usar la Regla:

Esta importante opción que muchas veces pasamos por alto nos ayuda a mantener una alineación de nuestro diseño.

Si pinchamos la regla con el clic izquierdo del mouse y arrastramos hacia el área de trabajo, nos mostrará unas líneas que nos ayudarán a mantener en alineación los objetos de nuestro diseño.

Usar hojas de estilos CSS:

Es muy útil tener organizado los estilos en un fichero. En la esta ventana CSS se encuentra en la parte derecha de Dreamweaver, también podemos activarla con las teclas “Shift+F11”.

Con los botones de la parte inferior derecha podemos:

  • Adjuntar una hoja de estilo externo.
  • Agregar una nueva regla.
  • Editar regla.
  • Eliminar regla.

Vincular hojas de estilos a nuestras páginas del sitio nos ayuda a no repetir los códigos, y al realizar un cambio solo hacerlo en el fichero CSS.

Vista previa:

Esta opción nos permite tener una vista previa de nuestras páginas web. En la lista de navegadores podemos seleccionar el navegador con el que deseamos realizar la vista previa. También podemos Editar esta lista en la opción “Edit Browser List”.

Dreamweaver CS3 incorpora una nueva opción que nos permite tener una vista previa de nuestra Web en diferentes marcas y modelos de teléfonos celulares, esta opción se llama “Preview in Device Central”.

Barra de código:

Esta barra nos permite varias opciones como:

  • Crear nuevo documentos.
  • Colapsar código completo.
  • Colapsar código seleccionado.
  • Expandir todo.
  • Seleccionar código.
  • Mostrar número de líneas.
  • Señalar código no válido.
  • Crear comentario.
  • Borrar comentario.
  • Mover estilos a un fichero externo.
  • Alinear código.
  • Aplicar formato al códigos.

Utilizar Spry framework para AJAX:

Entre las mejoras incorporadas en Dreamweaver CS3 en esta nueva versión, se encuentran el SPRY framework para AJAX.
El Spry framework para Ajax esta compuesto por librerías Javascript para proveer funcionalidades en el diseño Web.

Los Spry de Datos nos permite mostrar datos desde un XML. Veremos en varios pasos como crearlo. Primeramente debemos definir los “Spry XML Data Set”, en este caso hemos utilizado el xml de Maestros del Web.

Pasos 1 : Spry XML Data Set

Definir el XML del cual podremos leer los datos.

  • Data Set Name: Aquí definiremos el nombre, podemos definir el que deseemos. En este caso usamos “MaestrosDelWeb”.
  • XML Source: Ruta donde se encuentra el XML, del cual se leerán los datos (preferiblemente debe estar dentro del directorio del sitio).
  • Get schema: Al presionar este botón se verifican los elementos que contiene.
  • Row element: Seleccionamos los elementos a mostrar. En este caso seleccionamos “item”, ya que son solo esos datos los que necesitamos leer.
    También podemos definir el tipo de datos, dirección, el tiempo en que se refrescaran los datos.
  • Luego presionamos el botón “OK”, si todo esta correcto.

Paso 2 : Spry Region. Insertar la región de los Spry

Aquí se definirá el contenedor de los datos, el tipo, y el “Spry Data Set” a utilizar. En el paso anterior lo definimos con el nombre “MaestrosDelWeb”.

Spry Repeat. Mostrar los diferentes registros o item del XML. Si agregamos directamente los “Spry Repeat” sin seleccionar los “Spry Region” este nos preguntará si deseamos agregarla. Como es un paso necesario debemos agregarla.

Si solo deseamos mostrar un solo registro o item del XML no necesitamos usar los “Spry Repeat”. Estos nos permitirán recorrer todos los item del XML, para poder mostrarlos.

Pasos 3 : Insert Spry Repeat List. Insertar en forma de lista

Esta opción nos permite insertar los datos provenientes del xml en forma de lista. Podemos seleccionar el contenedor. El nombre del Spry de Datos “MaestrosDelWeb” y los datos que mostraremos. Estos podemos agregarlos de uno en uno si queremos mostrar varios. Insert Spry Table. Insertar en forma de tabla.
Y esta opción para resolver nuestros problemas cuando queremos mostrar nuestros datos en forma de tabla.

  • Spry Data Set: Seleccionamos el nombre de nuestro Spry de Datos.
  • Columns: Agregamos/Quitamos columnas, y la cambiamos de posición.
  • Luego oprimimos OK.

Las otras opciones podemos ajustarlas a nuestro gusto, estilos y demás. Estos también pueden ser insertados por la Ventana de Aplicación “Bindings”, podemos mostrarla de forma rápida con las teclas “Ctrl+F10”. Podemos marcarlos y arrastrarlos.

Con los Spry de Validación podemos validar Campos de Texto, Listas Desplegables, Checkbox. Esta importante función nos brinda la posibilidad de validar los formularios de nuestro sitio web de parte del cliente, sin necesidad de realizar un POST a nuestro sitio.

Al seleccionar esta opción, podemos seleccionar el tipo de validación del campo, que puede ser Correo Electrónico, Dirección IP, Fecha, URL, Código Postal, etc. Podemos definir el formato con el que se va a validar. Definir una cantidad mínima y máxima de caracteres.

Los Spry Layout, nos brindan la posibilidad de crear interfaces de usuarios más dinámicas mediante componentes AJAX.

  • Spry Menu Bar: nos brindan la posibilidad de crear menús horizontales y verticales. En las propiedades podemos configurarlo y adaptarlo a nuestras necesidades.
  • Spry Tabbed Panels: como su nombre lo indica podemos crear paneles tabulados de una forma muy fácil.
  • Spry Accordion, con esta opción podemos crear menú en forma de Acordión.
  • Spry Collapsible Panel, nos permite crear paneles plegables, con los mismos podemos mostrar y ocultar información al seleccionarlos.

Esperamos que estos tips les permitan hace buen uso de las diferentes opciones que brinda Adobe Dreamweaver CS3 y compartan su experiencia en los comentarios en el uso del programa.