MASHUPS Expo AMI

MASHUPS
Aplicaciones Web Hibridas
(Web Applications Hybrid)

What is a Mashup?
ZDNetVideos - What is a Mashup.flv
Video Introductorio

HousingMaps - http://www.housingmaps.com/
Digg - http://digg.com/
Netvibes - http://www.netvibes.com/
iGoogle - www.google.com/ig
WikiCrimes - http://www.wikicrimes.org/
EJEMPLOS

HousingMaps

Digg

NetVibes

iGoogle

WikiCrimes

Es una página web o aplicación que combina datos o funcionalidad de dos o más fuentes externas, es decir, el contenido de otras aplicaciones web, para crear un nuevo servicio o contenido completo.
Los mashups son aplicaciones web que reutilizan la información de otras aplicaciones y servicios en la red.
CONCEPTO (Definicion Formal)

APIs (Application Programming Interface)
Interfaz de programación de aplicaciones.
Conjunto de funciones que sirven como plataforma sobre la cual otros programas pueden ser construidos.
XML feeds (RSS o Atom)
Es un medio o formato de redifusión de contenido web codificado en XML.
Screen-Scraping (raspado de pantalla)
Técnica para extraer los datos de una presentación.
Extraer los datos originales a partir de la imagen de una gráfica elaborada.
Extraer los datos de un informe en PDF para volcarlos en una hoja de cálculo.
FUENTES DE DATOS (Data Sources)

Proveedor de Contenidos
Es la fuente de los datos. El contenido es típicamente obtenido de otra fuente vía una interface pública o API(web services) o de Web Feeds(RSS o Atom).
El SitioMashup
Es la nueva aplicación web que provee un nuevo servicio utilizando información de diversas fuentes.
El Web Browser Cliente
Es la interfaz de usuario del mashup. El contenido puede ser mezclado por los web browser clientes usando lenguaje web del lado del cliente. Por ejemplo Javascript.
ARQUITECTURA TIPICA

API Protocols

ESTILOS DE MASHUPS

APIs masusados(Top APIs)

GoogleMaps API

Facebook API

Flickr API

Amazon API

TOP Mashups

MozillaUbiquity
http://ubiquity.mozilla.com/
JackBe Presto 2.7
http://www.jackbe.com/enterprise-mashup/
Yahoo Pipes
http://pipes.yahoo.com/pipes/
Editores de Mashups

Yahoo Pipes

1. Definir la aplicacion
2. Definir la Base de Datos
3. Fichero PHP paraacceso a la base de datos
4. Fichero PHP paraintroducirnuevosdatos
5. Visualizacion de Datos
6. Creacion del Javascript de Google Maps
Creacion de un Mashup

1 - Definir la aplicacion

2 – La Base de Datos

config.php - hacemos una conexión a la Base de Datos y en caso de que exista algún error mostramos un mensaje de error y salimos. Este fichero lo incluiremos en otros PHP con un simple include(’config.php’)
3 – Acceso a la base de datos

introducir.php - introducir nuevos datos en el mapa simplemente pulsando sobre una posición del mapa.
Obtener los parámetros que rellenamos en el formulario
Recuperamos la posición
4 – Introducirnuevosdatos

Comprobar que no hay ningún parámetro incorrecto
Realizamos la inserción

index.php - nos sirva de index para nuestro sitio, que tiene que poseer la siguiente funcionalidad:
Mostrar el mapa de Google Maps
Mostrar los restaurantes ya posicionados (acceder a la Base de Datos y consultarlos).
Mostrar una leyenda para entender los datos
Permitir introducir nuevos datos en el mapa simplemente pulsando sobre una posición del mapa
Añadir el buscador de Google Maps para poder posicionarnos en le mapa por dirección
5 – Visualizacion de Datos

Creacion varias variables que utilizaremos en el resto del fichero php.
Incluir los ficheros config.php e introducir.php
Obtener los restaurantes de la base de datosparamostrar los puntos en el mapa

Añadir el script de mapas de google, un script JavaScript que nos proporciona Google

process.php - crear el código Javascript necesario por Google maps para posicionar los puntos en el mapa
creación dinámica de los puntos del mapa
Incluir process.php en el fichero index.php
6 – CreacionJavascript de Google Maps

Programmable Web – APIs, Mashups, Ejemplos, etc.
http://www.programmableweb.com/
TwitGraph
http://twitgraph.appspot.com/
Google Hot Trends + Twitter + Google Maps
http://www.mibazaar.com/gtwitter.html
Iran Election Protest Tweet Map
http://www.mibazaar.com/irantweets.html
1000 songs
http://1000songs.ebotunes.com/
MAS EJEMPLOS - Recursos

TwitGraph

Google Hot Trends + Twitter + Google Maps

Iran Election Protest Tweet Map

1000 songs

GRACIAS !!!