Tutorial para crear un Mashup o web hibrida





Un mashup es, según la Wikipedia, mashup, una plicación web híbrida. Es decir, se trata de una mezcla de varias aplicaciones que nos ofrecen determinados contenidos, filtrados a nuestro antojo y cuyo resultado final puede ser una web completa o una parte determinada de ella con un contenido totalmente renovado.

 

Como ejemplo perfecto de mashup tenemos Panoramio , que combina la API de Google Maps y las aportaciones de sus usuarios para crear álbumes fotográficos en los que estos pueden ubicar geográficamente sus fotografías en los lugares donde se tomaron. Otro ejemplo de mashup donde se ve muy clara la combinación de aplicaciones web podemos tenerlo en la red social Facebook, en la que es posible que cada usuario incluya aplicaciones de terceros en su propio perfil   gracias a la adaptación que los programadores han hecho de sus API de forma que, en nuestro perfil de Facebook, podemos mostrar también nuestros marcadores en del.icio.us, nuestros favoritos en StumbleUpon o nuestros últimos mensajes en Twitter, aparte de otros cientos de aplicaciones con un solo clic. Por cierto,  antes de continuar, sería conveniente recordaros que las API son pequeñas aplicaciones que algunos servicios web ponen a disposición  de los usuarios o webmasters para que tengan acceso y recursos para poder exponer en sus webs los contenidos de estos sitios sin tanta complicación y de una forma totalmente personalizada. Por lo tanto, la combinación de fuentes de contenidos, sindicaciones  y las propias API que muchos servicios web ponen a disposición de los webmasters para que puedan integrar o adaptar sus servicios  a sus sitios dan lugar a nuevos servicios con un contenido realmente asombroso y nuevo: los mashups.

 

Cómo crear nuestro propio mashup

Para ello, lo principal es tener una idea clara del objetivo. A continuación, debemos recabar información de los distintos códigos que vamos a necesitar (API, feeds, etc.) y guardarlos  para tenerlos disponibles cuando los necesitemos. Un editor de mashups (ver cuadro adjunto) será imprescindible para cualquiera de las recetas que vayamos a crear. Para hacerlo, no hay que tener unos amplios conocimientos de programación, pero sí es algo que influye proporcionalmente en el resultado final, por lo que sería conveniente tener algunos fundamentos de HTML, CSS, JavaScript, Ajax y PHP, que son los lenguajes de programación más comunes para trabajar con API. Enseguida, os vamos a mostrar cómo crear un sencillo mashup para complementar los contenidos de un sitio web. Éste va a tener como función mostrar en una página web los vídeos más visitados de YouTube y se irá actualizando según vayan apareciendo vídeos nuevos que se recojan en la página  principal de los más visitados. Para hacer esto, simplemente vamos a crear un feed de  YouTube con el software OpenKapow, filtraremos la información que nos interesa y le indicaremos el contenido  que queremos que extraiga. Una vez terminado, expondremos este feed en un sitio web gracias al Google Ajax Feed Api.

 

Paso 1

Primeros pasos

OpenKapow es un servicio web que provee a desarrolladores de servicios básicos para crear sus propios mashups, proporcionando tanto software como documentación gratuita y un escaparate para sus creaciones. Para llevar a cabo nuestro paso a paso, necesitamos registrarnos en la web y descargar e instalar en el PC la herramienta RoboMaker, que es el entorno de desarrollo virtual de OpenKapow. Tanto en su web, como en la ayuda que le acompaña, encontraremos toda la documentación, guías y ejemplos que necesitamos para trabajar con él. Una vez instalado, abrimos RoboMaker y marcamos Create an RSS/Atom feed [1]. Entonces, el asistente nos pedirá la dirección URL de la que vamos a extraer el feed, así que escribimos la de YouTube en español. En la siguiente pantalla, bautizaremos nuestra creación con un nombre, descripción y el formato de feed que obtendremos al final [2], y continuamos. En el próximo paso, dejamos la opción tal y como nos viene por defecto y finalizamos la tarea.

Paso 3

Filtra la información que te interese

Una vez finalizado el asistente, vemos cómo la interfaz de RoboMaker nos abre la página de YouTube en su interfaz [3]. Lógicamente, nosotros no queremos mostrar toda la información de esta página, sino sólo una parte. Para ello, le vamos a ir indicando al robot tanto la ruta como la información específica que queremos extraer de la página. con el botón derecho del ratón pinchamos sobre la pestaña Vídeos [4] y, en el menú emergente, elegimos la opción Click [5], indicando al robot por dónde tiene que seguir. La interfaz del editor nos cargará la página correspondiente a los vídeos. Nos situamos en el menú lateral de la misma, donde aparecen las categorías, pinchamos sobre Comedia y con el botón derecho volvemos a escoger la opción Click. Nos abrirá  la página de los vídeos de comedia [6], mostrándonos los más vistos. En este punto fijaros bien, porque en la parte superior iremos controlando los pasos que va a seguir para extraer la información [7]. Seleccionamos ahora la última capa que incluye los vídeos más vistos con el botón derecho del ratón y nos vamos hasta la opción Loops/For Each Tag Path [8]. Comprobamos que el color de nuestra

selección ha cambiado al rojo [9], y especificamos la ruta de la etiqueta HTML en Tag Path de la que el robot tiene que extraer la información, y que en este caso sería tr.td.div.div [10], ya que queremos que nos extraiga la información de todas las capas que se sucedan en esta ruta (que serían las que contienen el vídeo con su nombre y descripción). No podremos continuar [11] sin añadir un nuevo paso [12]. Cuando lo hacemos, observamos cómo el robot selecciona directamente la ruta que le habíamos indicado y el color de la selección es ahora azul [13]. Inmediatamente, comenzamos a sacar del contenido la información que nos interesa: nos situamos sobre el título [14] pinchando con el botón derecho del ratón y marcando Extract Title [15] para que le vaya poniendo los títulos a cada vídeo; seleccionamos de nuevo el título y volvemos a hacer clic con el botón derecho pero esta vez escogiendo Extract Url [16] para que nuestros contenidos tengan un destino; finalmente,  seleccionamos la descripción [17] con el botón derecho del ratón y elegimos Extract Description [18] y ya tendremos la descripción del vídeo.

 

Paso 4

Publicamos y obtenemos el feed

Ahora nos toca revisar mediante el modo Debugger la existencia de algún error en nuestra pequeña creación. Entramos a través de este icono [19] del menú de Robo- Maker y le damos al Play [20] para que comience con la revisión. Si el resultado final tiene el mismo aspecto que el nuestro  [21] habéis superado la prueba, si os marca algún error, es conveniente que leáis la información de ayuda. Con nuestro trabajo finalizado, ahora toca publicarlo en Openkapow, para lo que nos dirigimos al icono de publicación [22] e introducimos los datos de acceso a nuestra cuenta. En el recuadro que saldrá a continuación, podemos cambiar, entre otros datos, los que introdujimos para crear el feed; es decir, Título, URL, Categoría, Descripción, Etiquetas y la Frecuencia de actualización [23]. Para finalizar pinchamos en Publicar [24] y ya tenemos nuestro feed.

 

Paso 5

Cómo mostrar el feed en nuestra web

En un blog o una web podríamos utilizar cualquier widget de feeds para mostrar el contenido del que acabamos de construir; pero en esta ocasión, vamos a hacerlo con Google Ajax Feed Api. Para comenzar a trabajar con él, tendremos que registrarnos y poner la  URL de la web en la que vamos a utilizar esta API. Como resultado, obtendremos el API key con el que poder añadir este accesorio en nuestro site. La documentación y las guías son bastante completas, así que os recomendamos mirar los ejemplos para ver todo lo que podéis llegar a exprimir esta herramienta. Nosotros nos hemos decantado por Dynamic Feed Control, una forma muy instructiva para comenzar a manejar API  y conocer su funcionamiento con un resultado que puede llegar a ser tan vistoso como nosotros queramos. En el código HTML de nuestro sitio web, exactamente dentro de las etiquetas <head> </head>, debemos integrar el trozo de  código que incluye el API key y la referencia al Dynamic Feed Control [25] y sustituir el texto YOUR-KEY [26] por la API key que nos proporcionaron con el registro. Para proseguir, debemos localizar, dentro de las etiquetas <body></body>, el lugar en el que queramos mostrar nuestra aplicación, mediante el código que nos muestran [27]. Y, en la hoja de estilos CSS de nuestra página, podemos incluir un estilo para esta capa [28]. Para concluir, añadimos el código [29], con las personalizaciones y opciones que le queramos añadir y, como no podía ser de otra forma, sustituyendo el feed que trae por defecto [30] por el nuestro de los mejores vídeos de humor en YouTube. Una vez tengamos cada cosa en su sitio, ya podremos ver el resultado final de nuestro pequeño mashup [31].

Entradas relacionadas:

Categorías: Aplicaciones Web, Recursos Web, Tutoriales, web 2.0 |

2 Responses to “Tutorial para crear un Mashup o web hibrida”

  1. Bitacoras.comon 07 Oct 2008 at 2:56 pm 1

    Información Bitacoras.com…

    Si lo deseas, puedes hacer click para valorar este post en Bitacoras.com. Gracias….

  2. MASHUPS | EL CINE FRANCESon 27 Sep 2012 at 4:02 pm 2

    [...] VIA BINARIA Me gusta:Me gustaBe the first to like this. This entry was posted on 27 septiembre 2012, in MASUHUPS. Bookmark the permalink. Deja un comentario [...]

Trackback URI | Comments RSS

Deja un comentario