Mashups

Aplicaciones hacia el
Enterprise 2.0
Esteban Saavedra Lopez, Ph.D
CEO Opentelematics
Internacional Bolivia
email: estebansaavedra@yahoo.com
http://jesaavedra.opentelematics.org
 El
Problema
Problema a resolver

Los datos están

en cualquier parte

Los datos no son

integrados

Los datos son

internos y externos
Mashups
Que es un Mashup?
• Un Mashup es un sitio web que accede a datos o
servicios de terceros y los combina para crear una
nueva aplicación.
• Un aplicación Web híbrida, que usa contenido de
más de una fuente para crear un nuevo servicio
completo.
Definición
• Un Mashups es una aplicación web que combina
datos de mas de una fuente, dentro una
herramienta integrada simple
Jungla 2.0
Agregación social: centralizando y
sindicando tu vida online
Población de widgets

• Muchos proveedores
• Todos los sabores
• Todos los gustos
• N aplicaciones
Widgetmania
Inteligencia colectiva (Folksonomy)
• Categorización colaborativa basada en etiquetas
(tags)
• La opinión de los usuarios cuenta y mucho.
• Agregación de datos de diferentes fuentes
(Mashups)
Ecosistema
Categorías
Categorías de Mashups
• De mapas: wikimapia.org
• De fotos: wikimapia + flickr + youtube = jotle.com
• De compras: shopping.com + amazon.com = secretprices.com
• De noticias: digg.com + del.icio.us + slashdot = doggdot.us
• De gobierno: chicagoCrime.org
• De tecnologia movil: wikiloc.com (Mashup gratuito para compartir rutas con
GPS)
Categorías de Mashups
Características
Las 3 R de los Mashups
• Retorna valores rápidamente
• Rápida creación
• Reuso de capacidades existentes
Características
• Hecho por y para el usuario y compartirlo con más
usuarios
• Capacidad dinámica de compartir e integrar de la
misma manera con otras fuentes.
• Utilización tanto de servicios Web públicos, así
como servicios internos.
• Orientado hacia la empresa, sus clientes y aliados
de negocio
Propiedades
de los
Mashups
Agregar contenido desde más de
una fuente
• APIS: webservices públicos
• Screen Scraping (scrAPIs) de sitios web existentes
• Datos locales que adicionalmente son provistos por
los proveedores
• Información provista por usuarios (wikis
compartidos o privados)
Ligero esfuerzo al programar
• Se precisa un poco de HTML y Javascript para
empezar
Aplicaciones web interactivas
• Estas también pueden proveer su propia API
Composición Ad-hoc
• No considera a largo plazo la estabilidad y la
solidez
Crecimiento de Mashups
 Pros
Contras
Riesgos
Pros para el desarrollo
• Aplicaciones de alto nivel
• Pocos recursos
• Tecnología accesible
• Interesar a un público global (contenidos)
• Experimentar con las últimas tecnologías Web.
• Creatividad muy importante
• No solo para programadores (+creatividad, +mashups,
+know-how)
Pros para los usuarios
• Ocio y diversión
• Trabajo en entornos Web 2.0
• Ahorro de tiempo y dinero
• Democratización de la tecnología
• Acceso a nuevos y mejores servicios
• Los usuarios salimos beneficiados
• Los usuarios somos lo más importante en la
Web2.0
Contras
• Anuncios no deseados
• Dependencia de los proveedores
• Propiedad Intelectual / LPD
• Contenidos de poca calidad
• Congestión de la red
• Cuellos de botella de la red
• Daños por la falla de una servicio
Riesgos
• Pasible a las estrategias más comunes para
ataques
> Cross-site-scripting (XSS)
> Cross-site-request-forgery (CSRF)
> JSON Hijacking
• Muchos riegos resultan de las nuevas arquitecturas
y tecnologías
Clasificación
Clasificación
• Orientado hacia el cliente
• Orientado hacia el servidor
Orientado hacia el cliente
• Orientado hacia el navegador (browser)
• Está más enfocado en la mezcla o composición de
información con imágenes del lado del navegador,
principalmente usando Javascript como lenguaje de
programación para lograrlo.
Mashups basado en el cliente
Tecnologías Web 2.0 en el cliente
• CSS (Separación de Diseño y Contenido)
• RSS, RDF, ATOM (Sindicación y agregación de
contenidos)
• AJAX (Aplicaciones Web basadas en HTML y XML con
componentes asíncronos)
• JAVA WEB START, FLEX, LASZLO, FLASH (Clientes
Ricos Ligeros no HTML)
• CAPTCHA (Palabra aleatoria y distorsionada sólo legible
para ojos humanos que sirve para evitar el acceso de
robots)
Orientado hacia el servidor
• En éste, la integración y manipulación de la
información suceden en ambos lados: servidor y
navegador.
• Su uso principal es interactuar con información de
diferentes sistemas para generar vistas necesarias
para la toma de decisiones.
Mashups Basados en Servidor
Tecnologías Web 2.0 en el servidor
• SOAP, REST, JCC (Servicios Web)
• SSO, Registro, Federación de Identidad
(Autenticación, Autorización y Seguridad en el
acceso a las Aplicaciones WEB)
• JAVASCRIPT, RUBY, PYTHON, PHP, Groovy
(Lenguajes de Script)
• Frameworks ágiles: RubyOnRails, Jruby, Grails,
Django, TurboGears,..
Ejemplos de Mashups
• HousingMaps.com
• www.programmableweb.com/mashups
• www.webmashup.com
• mashupawards.com
• www.jumpcut.com/view?id=C086AA92568811DCAB02000423CF381C
• www.youtube.com/watch?v=-GeU3Rp7wnY
Arquitectura
Tipología
Dentro del Mashup
Tecnologías
inmersas
Integración de Tecnologías
Tecnologías de los mashups
• Screen Scraping
• REST
• Atom
• RSS
• APIs - Web API
Screen scraping
• Es una técnica de programación que consiste en
tomar una presentación de una información
(normalmente texto, aunque puede incluir
información gráfica) para, mediante ingeniería
inversa, extraer los datos que dieron lugar a esa
presentación.
REST (Representational State
Transfer)
• REST , según algunos, la mejor manera de crear
interfaces para servicios web que promulguen ante
todo el débil acoplamiento .
• REST depende directamente del protocolo HTTP,
utiliza un conjunto simple y pequeño de
operaciones bien definidas: POST, GET, PUT y
DELETE.
Atom
• Formato de Redifusión Atom, que básicamente es
un fichero en formato XML.
• Protocolo de Publicación Atom, es un protocolo
simple basado en HTTP para crear o actualizar
recursos en Web.
RSS
> Rich Site Summary (RSS 0.91)
> RDF Site Summary (RSS 0.9 y 1.0)
> Really Simple Syndication (RSS 2.0)
• RSS es una familia de formatos de fuentes web
codificados en XML, utilizado para suministrar a
suscriptores de información actualizada
frecuentemente.
• El formato permite distribuir contenido sin
necesidad de un navegador.
API(Appligation Programming
Interface)
• Es un programa o código para crear otros
programas
• Funciones instantáneas: Es todo lo que necesita un
programador para crear nuevas aplicaciones
APIs en la Web
Mashups
Vs
SOA
SOA
• Centrados en el servidor
• Bien definido
• Conecta sistemas
Mashups
• Centrado en el cliente
• Basado en la Web
• Ad hoc
• Conecta usuarios
En resumen
• Los mashups son una extensión de SOA
Website (1992)

Web Services (2000)

RESTful Web services (2007)
Tendencia en la Jungla
Plataformas
Plataformas para mashups
• Yahoo! Pipes
> pipes.yahoo.com

• Google Mashup Editor

> editor.googlemashups.com

• Microsoft Popfly
> www.popfly.ms

• IBM Alphaworks
> services.alphaworks.ibm.com
Constructores de Mashups
• BEA Pages
• IBM QEDWiki
• JackBe Presto
• Nexaweb Studio
• Oracle WebCenter
• Coghead
• Intel Mash Maker
Yahoo Pipes: pipes.yahoo.com
• Al igual que las tuberías de Unix, son comandos simples que
pueden ser combinadas para crear una salida que satisfaga sus
necesidades:
• Combina muchos canales (feeds) dentro uno solo, para luego
ordenarlos, filtrarlos y traducirlos
• Geo-codifica tus canales favoritos y permite navegar por los
items dentro un mapa interactivo
• Incluye el poder de los widgets/badges en tu sitio web
• Permite grabar la salida de cualquier tuberia (pipe) como RSS,
JSON, KML y otros formatos.
Ejemplos de Yahoo Pipes
Ejemplos de Yahoo Pipes
Ejemplos de Yahoo Pipes
Google Mashup Editor
• code.google.com/gme
• editor.googlemashups.com/editor
• Es un marco de desarrollo AJAX y un conjunto de
herramientas que permiten a los desarrolladores crear
rápida y fácilmente aplicaciones web sencillas y mashups
con los servicios de Google como Google Maps y Google
Base
• Es una gran herramienta para el acaparamiento de la
información de los canales y permitir que los usuarios ver y
manipular la misma.
Ejemplos de Google Mashup Editor
Ejemplos de Google Mashup Editor
MS Popfly: www.popfly.ms
• Popfly es una forma divertida y fácil de construir y
compartir mashups, gadgets y páginas Web.
• Está formada por herramientas visuales en linea,
para la creación de páginas web y mashups y una
red social, donde se puede acoger, compartir,
puntuar, comentar e incluso remezclar creaciones
de otros usuarios de Popfly.
Ejemplos de MS Popfly
Ejemplos de MS Popfly
Ejemplos de MS Popfly
MS Silverlight: silverlight.net
• Silverlight es un plug-in multiplataforma, que se
incluirá en la próxima generación de .NET, que
proveerá medios de comunicación basados en ricas
experiencias y aplicaciones interactivas para la
Web.
• Silverlight ofrece un modelo de programación
flexible que soporta AJAX, VB, C #, Python y Ruby,
y se integra con las aplicaciones Web.
Ejemplos de MS Silverlight
Ejemplos de MS Silverlight
Ejemplos de MS Silverlight
IBM DAMIA: services.alphaworks.ibm.com/damia/
• A través de una interfaz basada en Web, proporciona una
forma fácil de usar herramientas que los desarrolladores y
usuarios de IT, pueden utilizar para reunir rápidamente
datos desde Internet y una variedad de fuentes de datos
empresariales.
• Los beneficios de este servicio, incluye la posibilidad de
agregar y transformar una amplia variedad de canales de
datos o contenidos, que puede ser utilizados en mashups
empresariales
Ejemplos de Damia
Ejemplos de Damia
IBM QEDWiki: services.alphaworks.ibm.com/qedwiki/
• QEDWiki es un navegador basado en el manejo de canvas
utilizado para crear mashups simples.
• Un constructor de mashups es un entorno en el que el
creador de mashups utiliza componentes de software (o
servicios) puestos a disposición por los proveedores.
• QEDWiki Wiki es un marco único en el que ofrece tanto los
usuarios y desarrolladores Web un único espacio para
desarrollar y alojar aplicaciones web 2.0
Ejemplos de IBM QEDWiki
Ejemplos de IBM QEDWiki
Visualization:
services.alphaworks.ibm.com/ManyEyes
many-eyes.com
• Many eyes es un servicio que combina la
visualización de información con software social,
permitiendo la visualización colaborativa por parte
de grupos de usuarios.
Ejemplos de Visualizacion
Ejemplos de Visualizacion
Otras plataformas para mashups
• fwicki com
• wicki.com
• www.jackbe.com
• openkapow.com
• Telephony mashups (BTO sylantro)
Construir
un
Mashup
Metáforas de usuario
• Mapas: Googlemaps no es la única (immo.search.ch)
• Calendarios: Colección de eventos
• Streeming: Agregación de multiples fuentes de
streeming (diggdot.us)
• Wiki: espacio para compartir documentos
• Portales: Juxtaposición de Web widgets (netvibes.com)
Pasos de la construcción
• Seleccionar 2 o mas APIs de webservices
• Estudiar la funcionalidad de capas y los formatos de datos
• Probar el acceso al API (registro)
• Seleccionar una metáfora de mezcla (Mashups Metaphor)
para el usuario
• Diseñar el mashup (basado en cliente o en servidor)
• Construirlo usando su lenguaje favorito
> Cliente/Browser: HTML/Javascript/Flash
> Server: PHP, JSP, Ruby, JOpera, Python, ...
El Futuro
Arquitectura orientada a la Web
Preguntas - Consultas
Mashups
Aplicaciones hacia el
Enterprise 2.0
Esteban Saavedra Lopez, Ph.D
CEO Opentelematics
Internacional Bolivia
email: estebansaavedra@yahoo.com
http://jesaavedra.opentelematics.org