Mashups Aplicaciones hacia el Enterprise 2.0

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

2. El
Problema

3. Problema a resolver
Los datos están
en cualquier parte
Los datos no son
integrados
Los datos son
internos y externos

4. Mashups

5. 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.

6. Definición
• Un Mashups es una aplicación web que combina
datos de mas de una fuente, dentro una
herramienta integrada simple

7. Jungla 2.0

8. Agregación social: centralizando y
sindicando tu vida online

9. Población de widgets
Muchos proveedores
•
Todos los sabores
•
Todos los gustos
•
N aplicaciones
•

10. Widgetmania

11. 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)

12. Ecosistema

13. Categorías

14. 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)

15. Categorías de Mashups

16. Características

17. Las 3 R de los Mashups
• Retorna valores rápidamente
• Rápida creación
• Reuso de capacidades existentes

18. 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

19. Propiedades
de los
Mashups

20. 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)

21. Ligero esfuerzo al programar
• Se precisa un poco de HTML y Javascript para
empezar

22. Aplicaciones web interactivas
• Estas también pueden proveer su propia API

23. Composición Ad-hoc
• No considera a largo plazo la estabilidad y la
solidez

24. Crecimiento de Mashups

25. Pros
Contras
Riesgos

26. 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)

27. 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

28. 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
•

29. 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

30. Clasificación

31. Clasificación
• Orientado hacia el cliente
• Orientado hacia el servidor

32. 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.

33. Mashups basado en el cliente

34. 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)

35. 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.

36. Mashups Basados en Servidor

37. 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,..

38. 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

39. Arquitectura

40. Tipología

41. Dentro del Mashup

42. Tecnologías
inmersas

43. Integración de Tecnologías

44. Tecnologías de los mashups
Screen Scraping
•
REST
•
Atom
•
RSS
•
APIs - Web API
•

45. 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.

46. 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.

47. 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.

48. 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.

49. 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

50. APIs en la Web

51. Mashups
Vs
SOA

52. SOA
• Centrados en el servidor
• Bien definido
• Conecta sistemas

53. Mashups
Centrado en el cliente
•
Basado en la Web
•
Ad hoc
•
Conecta usuarios
•

54. En resumen
• Los mashups son una extensión de SOA

55. Website (1992)
Web Services (2000)

56. RESTful Web services (2007)

57. Tendencia en la Jungla

58. Plataformas

59. 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

60. Constructores de Mashups
BEA Pages
•
IBM QEDWiki
•
JackBe Presto
•
Nexaweb Studio
•
Oracle WebCenter
•
Coghead
•
Intel Mash Maker
•

61. 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.

62. Ejemplos de Yahoo Pipes

63. Ejemplos de Yahoo Pipes

64. Ejemplos de Yahoo Pipes

65. 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.

66. Ejemplos de Google Mashup Editor

67. Ejemplos de Google Mashup Editor

68. 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.

69. Ejemplos de MS Popfly

70. Ejemplos de MS Popfly

71. Ejemplos de MS Popfly

72. 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.

73. Ejemplos de MS Silverlight

74. Ejemplos de MS Silverlight

75. Ejemplos de MS Silverlight

76. 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

77. Ejemplos de Damia

78. Ejemplos de Damia

79. 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

80. Ejemplos de IBM QEDWiki

81. Ejemplos de IBM QEDWiki

82. 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.

83. Ejemplos de Visualizacion

84. Ejemplos de Visualizacion

85. Otras plataformas para mashups
• fwicki com
• wicki.com
• www.jackbe.com
• openkapow.com
• Telephony mashups (BTO sylantro)

86. Construir
un
Mashup

87. 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)

88. 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, ...

89. El Futuro

90. Arquitectura orientada a la Web

91. Preguntas - Consultas

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