La web 2.0: retos y tecnologías para la internet de nueva generación, Universitat d'Alacant, julio 2008© 2008, Juan Antonio Pérez Ortiz

Manual de uso de la web 2.0Manual de uso de la web 2.0

TecnologíasTecnologías

Tipos de tecnologíasTipos de tecnologías

● Para el cliente y para el servidor:● Metodologías de desarrollo● Lenguajes de programación y frameworks● Gestión de datos● Algoritmos● Servidores/hosting● Programas existentes (Bitnami)

Metodologías de desarrolloMetodologías de desarrollo● Ciclo de desarrollo tradicional● Desarrollo ágil de webs:

● Basado en el desarrollo ágil de software● Múltiples iteraciones de pocas semanas, cada

una de las cuales es un proyecto en sí● Modelo de lavadora frente al modelo clásico

de cascada● Comunicación cara a cara● Poca documentación: el objetivo es conseguir

software que funcione

Lenguajes de programación Lenguajes de programación para el servidorpara el servidor

● Los habituales: PHP, Java, C#, etc.● Lenguajes dinámicos: Python, Ruby, etc.

Plataformas para el servidorPlataformas para el servidor● Las habituales: J2EE, .Net, etc.● Ruby on Rails (RoR):

● An open-source web framework that's optimized for programmer happiness and sustainable productivity. It lets you write beautiful code by favoring convention over configuration.

● Django:● Django is a high-level Python Web framework

that encourages rapid development and clean, pragmatic design.

Ruby on RailsRuby on Rails● Framework para el desarrollo de aplicaciones

web que usan bases de datos● Está escrito en Rails y sigue el paradigma

Model-View-Controller (MVC)● Genera automáticamente esqueletos de código● Máximas:

● Convention over configuration: solo has de escribir el código que se salga de lo habitual

● Don't repeat yourself: la información está en un único sitio

Tecnologías para el cliente o Tecnologías para el cliente o para el cliente/servidorpara el cliente/servidor

● Ajax● Google Web Toolkit● Silverlight● Flex● Java FX● ...

Ajax (1)Ajax (1)

● Ajax: Asynchronous JavaScript and XML● Técnica de desarrollo web para mejorar la

interactividad y funcionalidad de las aplicaciones web

● El cliente intercambia datos con el servidor de forma asíncrona, sin tener que recargar la página completa ante cada acción del usuario

Ajax (2)Ajax (2)

● Javascript es el lenguaje usado en el cliente● La comunicación con el servidor se realiza con

el objeto XMLHttpRequest● Los datos intercambiados, sin embargo, no

necesitan estar en XML; puede usarse texto, HTML, JSON, etc.

● La mayor parte de las tecnologías relacionadas son abiertas

Ajax (3)Ajax (3)

● Ajax no es una tecnología en sí, sino un conjunto de tecnologías con efectos sinérgicos

● Término acuñado por Jesse James Garrett en febrero de 2005 en � Ajax: a new approach to web applications�

● Las tecnologías implicadas ya existían desde años antes

Justificación de AjaxJustificación de Ajax

● Las aplicaciones web tradicionales formatean los datos en el servidor dentro de una nueva página HTML

● Esto impide muchos comportamientos habituales en las aplicaciones de escritorio; ejemplo: un control desplegable

● Ajax es una de las formas de implementar aplicaciones RIA (Rich Internet Applications)

Usos de AjaxUsos de Ajax

● Validación de formularios en tiempo real● Autocompleción● Carga incremental de una página● Controles más avanzados (calendarios,

árboles, menús, editores de texto, etc.)● Recarga parcial● Mashups● El navegador como plataforma

Ventajas de AjaxVentajas de Ajax

● Aprovechamiento del ancho de banda● Reducción de la carga del servidor● Aplicaciones más intuitivas e interactivas

Desventajas de AjaxDesventajas de Ajax

● Pérdida del historial de navegación; solución: iframes, cambio en el URI del navegador...

● La latencia de la conexión puede provocar desconcierto en el usuario; solución: throbbers, atenuación, � loading� ...

● Compatibilidad de Javascript; solución: Prototype, Scriptaculous, Dojo, Ext, GWT...

● �Same-origin policy�

Librerías de Ajax (1)Librerías de Ajax (1)● Existen más de 40 librerías de JavaScript

para Ajax; ¡no excluyentes!● Algunas de las más usadas:

● Prototype: mejora de JavaScript para darle un aspecto a lo Ruby

● Scriptaculous: efectos y elementos gráficos sobre Prototype

● demos● sigue...

Librerías de Ajax (2)Librerías de Ajax (2)● Más librerías:

● Dojo: aporta una funcionalidad mucho mayor que el resto (encriptación, carga dinámica, uso sin conexión), a costa de una complejidad de aprendizaje también mayor

● demos● Ext JS: centrada en conseguir una interfaz

muy elegante y visualmente atractiva● demos

Google Web Toolkit (1)Google Web Toolkit (1)

● Google Web Toolkit (GWT) aparece en 2006 ● Permite desarrollar aplicaciones Ajax sin conocer

JavaScript, HTML o XML● El desarrollo se hace en Java, y GWT lo traduce

automáticamente a HTML y JavaScript● JavaScript es como el ensamblador de los

compiladores tradicionales

Google Web Toolkit (2)Google Web Toolkit (2)

● Se evitan algunos de los problemas de Ajax:● la incompatibilidad entre navegadores● depuración de código● historial de navegación

Google Web Toolkit (3)Google Web Toolkit (3)● Durante el desarrollo se puede usar cualquier

IDE de Java (por ejemplo, Eclipse), incluso para depurar

● Proporciona una librería de controles gráficos similar a AWT, Swing o SWT

● Plataforma de código abierto:● Apache Open Source License 2.0

Google Web Toolkit (4)Google Web Toolkit (4)

● Crea una aplicación diferente para cada navegador e idioma (soporte para i18n)

● Puede insertarse código JavaScript directamente gracias a JSNI (JavaScript Native Interface)

Flex (1)Flex (1)

● Propiedad de Adobe● Tecnología para el cliente● Las aplicaciones se ejecutan sobre la

máquina virtual del reproductor de Flash (extensión del navegador)

● Lenguajes: MXML (declarativo; definición de la interfaz) y ActionScript (compatible con EcmaScript)

Flex (2)Flex (2)

● Flash Player 9; la versión 9 actualiza sustancialmente la máquina virtual (AVM2)

● Flex SDK; librerías; licencia abierta● Flex Builder; basado en Eclipse; código

cerrado● Flex Charting Components; visualización

avanzada de datos

Silverlight (1)Silverlight (1)● Propiedad de Microsoft● Las aplicaciones se ejecutan sobre una versión

de la máquina virtual de .Net llamada CoreCLR (extensión del navegador)

● Lenguajes: XAML (definición de la interfaz; usado ya en el subsistema gráfico de .Net, llamado Windows Presentation Foundation, WPF) y cualquier lenguaje de .Net

Silverlight (2)Silverlight (2)

● El desarrollo se realiza con Visual Studio● Plataforma muy joven: publicada a finales de

2006● Disponible parcialmente en Linux a través de

Moonlight del proyecto Mono

Del navegador al escritorioDel navegador al escritorio● Adobe Air (Windows, Linux y Mac):

● HTML, Ajax, Flash y Flex en el escritorio● Acceso a ficheros estrictamente locales● Comunicación entre aplicaciones

● Google Gears● Firefox 3 y su modo sin conexión● HTML 5 estandariza algunos aspectos del

trabajo sin conexión● ...

Factores a considerar al elegir Factores a considerar al elegir una tecnología adecuadauna tecnología adecuada

● Plataforma● Interoperabilidad● Código abierto o cerrado● Escalabilidad● Accesibilidad de las aplicaciones● Tiempo de aprendizaje● Tiempo de desarrollo● Comunidad de desarrolladores

¡Y algoritmos!¡Y algoritmos!● Fundamentales en las aplicaciones sociales:

● Votaciones, recomendaciones, personalización● Las técnicas fundamentales de reconocimiento de

formas se recogen en el libro Programming Collective Intelligence:● Minería de datos● Page ranking● Clasificación y agrupamiento● Algoritmos de búsqueda e indexación● ...

Servidores/hostingServidores/hosting● Software as a Service (SaaS)● Hardware as a Service (HaaS)

● Servicios web de Amazon (Amazon Web Services, AWS)

● Google App Engine

Amazon Web ServicesAmazon Web Services● AWS:

● Simple Storage Service (Amazon S3)● Elastic Compute Cloud (Amazon EC2), sobre

el que se pueden instalar diferentes imágenes y con persistencia a través de S3

● Simple Queue Service (Amazon SQS) para colas y mensajes entre los servidores

● Precios según uso; recursos escalables automáticamente según demanda en minutos; fiabilidad

Google App EngineGoogle App Engine

● Programable en Python● Google aporta un entorno de desarrollo

integrado● Gratuito para usos limitados

CréditosCréditos

● Los usos, ventajas y desventajas de Ajax se tomaron de la Wikipedia

● Plantilla de las transparencias