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