Mashups
Aplicaciones hacia el
Enterprise 2.0
Esteban Saavedra Lopez, Ph.D
CEO Opentelematics
Internacional Bolivia
email: ...
El
Problema
Problema a resolver

                       Los datos están
                       en cualquier parte


                  ...
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
  ...
Definición
• Un Mashups es una aplicación web que combina
  datos de mas de una fuente, dentro una
  herramienta integrada...
Jungla 2.0
Agregación social: centralizando y
sindicando tu vida online
Población de widgets

                    Muchos proveedores
                •
                    Todos los sabores
     ...
Widgetmania
Inteligencia colectiva (Folksonomy)
• Categorización colaborativa basada en etiquetas
  (tags)
• La opinión de los usuario...
Ecosistema
Categorías
Categorías de Mashups
    De mapas: wikimapia.org
•
    De fotos: wikimapia + flickr + youtube = jotle.com
•
    De compra...
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 integra...
Propiedades
   de los
 Mashups
Agregar contenido desde más de
una fuente
• APIS: webservices públicos
• Screen Scraping (scrAPIs) de sitios web existente...
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 u...
Pros para los usuarios
    Ocio y diversión
•
    Trabajo en entornos Web 2.0
•
    Ahorro de tiempo y dinero
•
    Democr...
Contras
    Anuncios no deseados
•
    Dependencia de los proveedores
•
    Propiedad Intelectual / LPD
•
    Contenidos d...
Riesgos
• Pasible a las estrategias más comunes para
  ataques
  > Cross-site-scripting (XSS)
  > Cross-site-request-forge...
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
  in...
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
 ...
Orientado hacia el servidor
• En éste, la integración y manipulación de la
  información suceden en ambos lados: servidor ...
Mashups Basados en Servidor
Tecnologías Web 2.0 en el servidor
• SOAP, REST, JCC (Servicios Web)
• SSO, Registro, Federación de Identidad
  (Autentica...
Ejemplos de Mashups
• HousingMaps.com
• www.programmableweb.com/mashups
• www.webmashup.com
• mashupawards.com
• www.jumpc...
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
  (normalment...
REST (Representational State
Transfer)
• REST , según algunos, la mejor manera de crear
  interfaces para servicios web qu...
Atom
• Formato de Redifusión Atom, que básicamente es
  un fichero en formato XML.
• Protocolo de Publicación Atom, es un ...
RSS
  > Rich Site Summary (RSS 0.91)
  > RDF Site Summary (RSS 0.9 y 1.0)
  > Really Simple Syndication (RSS 2.0)
• RSS es...
API(Appligation Programming
Interface)
• Es un programa o código para crear otros
  programas
• Funciones instantáneas: Es...
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

• Micros...
Constructores de Mashups
    BEA Pages
•
    IBM QEDWiki
•
    JackBe Presto
•
    Nexaweb Studio
•
    Oracle WebCenter
•...
Yahoo Pipes: pipes.yahoo.com
• Al igual que las tuberías de Unix, son comandos simples que
  pueden ser combinadas para cr...
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 conjunt...
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...
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...
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 u...
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...
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ó...
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: ...
Pasos de la construcción
  Seleccionar 2 o mas APIs de webservices
•
  Estudiar la funcionalidad de capas y los formatos d...
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: ...
Upcoming SlideShare
Loading in …5
×

Mashups Aplicaciones hacia el Enterprise 2.0

5,075 views

Published on

Mashups
Aplicaciones hacia el
Enterprise 2.0

Published in: Technology, Business

Mashups Aplicaciones hacia el Enterprise 2.0

  1. 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. 2. El Problema
  3. 3. Problema a resolver Los datos están en cualquier parte Los datos no son integrados Los datos son internos y externos
  4. 4. Mashups
  5. 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. 6. Definición • Un Mashups es una aplicación web que combina datos de mas de una fuente, dentro una herramienta integrada simple
  7. 7. Jungla 2.0
  8. 8. Agregación social: centralizando y sindicando tu vida online
  9. 9. Población de widgets Muchos proveedores • Todos los sabores • Todos los gustos • N aplicaciones •
  10. 10. Widgetmania
  11. 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. 12. Ecosistema
  13. 13. Categorías
  14. 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. 15. Categorías de Mashups
  16. 16. Características
  17. 17. Las 3 R de los Mashups • Retorna valores rápidamente • Rápida creación • Reuso de capacidades existentes
  18. 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. 19. Propiedades de los Mashups
  20. 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. 21. Ligero esfuerzo al programar • Se precisa un poco de HTML y Javascript para empezar
  22. 22. Aplicaciones web interactivas • Estas también pueden proveer su propia API
  23. 23. Composición Ad-hoc • No considera a largo plazo la estabilidad y la solidez
  24. 24. Crecimiento de Mashups
  25. 25. Pros Contras Riesgos
  26. 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. 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. 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. 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. 30. Clasificación
  31. 31. Clasificación • Orientado hacia el cliente • Orientado hacia el servidor
  32. 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. 33. Mashups basado en el cliente
  34. 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. 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. 36. Mashups Basados en Servidor
  37. 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. 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. 39. Arquitectura
  40. 40. Tipología
  41. 41. Dentro del Mashup
  42. 42. Tecnologías inmersas
  43. 43. Integración de Tecnologías
  44. 44. Tecnologías de los mashups Screen Scraping • REST • Atom • RSS • APIs - Web API •
  45. 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. 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. 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. 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. 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. 50. APIs en la Web
  51. 51. Mashups Vs SOA
  52. 52. SOA • Centrados en el servidor • Bien definido • Conecta sistemas
  53. 53. Mashups Centrado en el cliente • Basado en la Web • Ad hoc • Conecta usuarios •
  54. 54. En resumen • Los mashups son una extensión de SOA
  55. 55. Website (1992) Web Services (2000)
  56. 56. RESTful Web services (2007)
  57. 57. Tendencia en la Jungla
  58. 58. Plataformas
  59. 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. 60. Constructores de Mashups BEA Pages • IBM QEDWiki • JackBe Presto • Nexaweb Studio • Oracle WebCenter • Coghead • Intel Mash Maker •
  61. 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. 62. Ejemplos de Yahoo Pipes
  63. 63. Ejemplos de Yahoo Pipes
  64. 64. Ejemplos de Yahoo Pipes
  65. 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. 66. Ejemplos de Google Mashup Editor
  67. 67. Ejemplos de Google Mashup Editor
  68. 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. 69. Ejemplos de MS Popfly
  70. 70. Ejemplos de MS Popfly
  71. 71. Ejemplos de MS Popfly
  72. 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. 73. Ejemplos de MS Silverlight
  74. 74. Ejemplos de MS Silverlight
  75. 75. Ejemplos de MS Silverlight
  76. 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. 77. Ejemplos de Damia
  78. 78. Ejemplos de Damia
  79. 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. 80. Ejemplos de IBM QEDWiki
  81. 81. Ejemplos de IBM QEDWiki
  82. 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. 83. Ejemplos de Visualizacion
  84. 84. Ejemplos de Visualizacion
  85. 85. Otras plataformas para mashups • fwicki com • wicki.com • www.jackbe.com • openkapow.com • Telephony mashups (BTO sylantro)
  86. 86. Construir un Mashup
  87. 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. 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. 89. El Futuro
  90. 90. Arquitectura orientada a la Web
  91. 91. Preguntas - Consultas
  92. 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

×