7. Mashup

Nuova edizione 2010-11

Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazioneCorso di Design dell’Interazione

MashupRoberto Polillo AA 2009-2010

Riassunto della puntata precedente

Dal software come prodotto al software come servizio accessibile in rete

Computing: la quinta utility La nuvola: virtualizzazione e globalizzazione dei

servizi

R.Polillo - Ottobre 2010

3

4

Virtualizzazione e globalizzazione


Dal punto di vista di chi realizza applicazioni…

Grande disponibilità in rete di “building block” già pronti:- “ecosistemi” di componenti software fra loro compatibili, assiemabili per costruire applicazioni composite, spesso disponibili gratuitamente e con licenze open source- servizi applicativi accessibili in rete attraverso API pubbliche, per realizzare applicazioni composite, con tecniche di “mashup”


5

Ecosistemi di componenti: esempi WordPress (www.wordpress.org )

Grande disponibilità di widget e plugin Netvibes (www.netvibes.net )

Grande disponibilità di widget …

Esempio di uso di entrambi: www.tangonet.it


6

http://www.wordpress.org/

http://www.netvibes.net/

http://www.tangonet.it/

Mashup7

Dall’inglese: mash = miscuglio to mash = schiacciare

Applicazione web che integra dinamicamente contenuti o servizi provenienti da più fonti (es. via API o feed RSS), per creare un servizio nuovo

Vedi: http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)http://www.slideshare.net/valicac/mashups-87355#slideshow_stats


http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

http://www.slideshare.net/valicac/mashups-87355#slideshow_stats

Mashup: architettura8

Sorgenti:• Video• Foto• Mappe• News• RSS feeds•…

mashup web site

browser

interfaccia pubblica (API, RSS, …)

richiestarisposta

Manipolazione dei dati:• embedding•aggregazione• combinazione• selezione e filtraggio• normalizzazione e traduzione• visualizzazione


L’esempio più semplice: embedding

Per inserire un elemento multimediale in un sito, si copia un codice HTML (“snippet”) nella pagina Web desiderata


9

HTML (mio

sito)

flickr

foto

youtube

BROWSERMonitor

video

Esempi: embedding

www.rpolillo.it www.corsow.wordpress.com www.theworldisnotflat.com (drupal)

Video su come è stato fatto:http://it.youtube.com/watch?v=LoQOUiJpvw4&feature=user


10

http://www.rpolillo.it/

http://www.corsow.wordpress.com/

http://www.theworldisnotflat.com/

http://it.youtube.com/watch?v=LoQOUiJpvw4&feature=user

Esempio: slideshare embedding


11

(segue)


12

<div style="width:425px" id="__ss_5658041"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/rpolillo/8-web-design" title="8. Web design">8. Web design</a></strong><object id="__sse5658041" width="425" height="355"><param name="movie“ value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=8-webdesign-101103131651-phpapp02&stripped_title=8-web-design&userName=rpolillo" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse5658041" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=8-webdesign-101103131651-phpapp02&stripped_title=8-web-design&userName=rpolillo" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/rpolillo">Roberto Polillo</a>.</div></div>

Youtube embedding


13

Esempi: aggregazione14

Lifestreams: diario delle attività personali on-linehttp://adactio.com/extras/stream/

L’idea è di Jeremy Keith, in “Streaming my life away” ( http://adactio.com/journal/1202/ )

Interessanti commenti in in http://hyperradiant.net/blog/2007/05/lifestreams-an-essay-in-progre.html


http://adactio.com/extras/stream/

http://adactio.com/journal/1202/

http://hyperradiant.net/blog/2007/05/lifestreams-an-essay-in-progre.html

http://hyperradiant.net/blog/2007/05/lifestreams-an-essay-in-progre.html

http://www.perspctv.com/ 15

Un “cruscotto” per monitorare i flussi di notizie su determinati argomenti sui diversi canali informativi

Dati da CNN, Twitter Search, Technorati, Daylife, Alexa, Google Insight s for Search, ed altri

“This project presents different perspectives in our world, including that of Mainstream media and user-generated content on the Internet. Explore the similarities and the disparities, hear the many voices that have emerged and choose which view, if any, makes the most sense to you. What we think vs. what they say we think -- All the chatter on the Internet, all the traditional news media coverage, and all the pollsters -- Perspctv brings it all together in a simple and elegant manner -- and gives a unique "dashboard" picture of the elections at any one given moment in time, totally un-biased. “


http://www.perspctv.com/

Esempi: aggregazione dei risultati delle ricerche

http://www.triplify.com


16

http://www.triplify.com/

Esempi: combinazione17

www.housingmaps.comAppartamenti in affitto e in vendita geolocalizzati(Googlemaps + www.craigslist.com )


http://www.housingmaps.com/

http://www.craigslist.com/

Altri esempi di geolocalizzazione

La mappa delle public toilets in Manhattanhttp://www.diaroogle.com/

La mappa dei blog italianihttp://www.deeario.it/2006/08/21/mashup-mappa-dei-blog-italiani/

Real time mapping delle modifiche a Wikipedia http://www.lkozma.net/wpv/index.html

Real-time mapping di post su Flickr, Twitter, YouTube http://flickrvision.com/ , http://twittervision.com/, http://twitspy.com , http://spinvision.tv/


18

http://www.diaroogle.com/

http://www.deeario.it/2006/08/21/mashup-mappa-dei-blog-italiani/

http://www.deeario.it/2006/08/21/mashup-mappa-dei-blog-italiani/

http://www.lkozma.net/wpv/index.html

http://flickrvision.com/

http://twittervision.com/

http://twitspy.com/

http://spinvision.tv/

Esempi: combinazione

http://portwiture.com/ Cerca foto su flickr in tema con i tuoi tweet recenti


19

http://portwiture.com/

Esempio: selezione e conteggio

http://www.neoformix.com/Projects/TwitterVenn/view.php Diagrammi di Venn sui tweet di specificato contenuto

http://twitrratr.com/Tweet su un certo argomento, separando positivi, neutri e negativi


20

http://www.neoformix.com/Projects/TwitterVenn/view.php

http://www.neoformix.com/Projects/TwitterVenn/view.php

http://twitrratr.com/

Esempi: visualizzazione

http://www.search-cube.com/Visualizzazione grafica dei risultati di ricerca


21

http://www.search-cube.com/

Esempi: visualizzazione

http://www.nyartbeat.com/bubbles


22

http://www.nyartbeat.com/bubbles

Esempio: filtraggio

http://labs.ideeinc.com/multicolr/


23

http://labs.ideeinc.com/multicolr/

www.hyperwords.net


24

(sito qualsiasi)

fotoBROWSER

Monitor

hyperwords

http://www.hyperwords.net/

25

“There are creative people all around the world, hundreds of millions of them, and they are going to think of things to do with our basic platform that we didn’t think of.”

Vinton Cerf


Processi di sviluppo leggeri


26

Ricerca e selezione di componenti

Integrazione e prove

Uso ed evoluzione

Idea di mashup

Tools / ambiente di

integrazione / sandbox

sandbox

www.programmableweb.com 27

“Keeping you up to date with APIs, mashup and the Web as a platform”

Most popular mashups:http://www.programmableweb.com/mashups/directory/1?view=text


http://www.programmableweb.com/


Fonte: http://www.programmableweb.com/mashups

Quali mashup?28

Mashup: punti di forza29

“Lightweight” application(volume di codice ridotto basso costo di sviluppo dell’applicazione)

Facilità di sviluppo dell’applicazione(disponibilità di tools che non richiedono grandi competenze tecniche – es.pipes)

Disponibilità di vaste basi di dati Bassi (o nulli) costi di acquisizione e aggiornamento dati Set-up dell’applicazione rapido

(time-to-market, possibilità di quick prototyping)


Mashup: aspetti critici30

Dipendenza dalle data sources(qualità dei dati, prestazioni, disponibilità e continuità del servizio, cambiamenti di politiche di servizio, stabilità fragilità: “la forza dell’anello più debole”)

API: standards e versioning Proprietà intellettuale e copyright

(“right to remix”: fino a che punto?) Privacy

(incrociare e filtrare i dati può generare problemi non esistenti nei dati originari)(vedi ad es.: http://mashworks.net/images/5/59/Goodman_Moed_2006.pdf )


Mashup tools31

Esistono diverse proposte Esempi:

Yahoo!Pipes, Google Mashup Editor, Microsoft Popfly, Dapper, Openkapow IBM QEDWiki, …


Google OpenSocial32

OpenSocial è un insieme di API per applicazioni di social networking Sviluppato da Google con MySpace e altri social networks (da

novembre 2007) Il set di API comuni permetterà agli sviluppatori di non imparare

diversi linguaggi per creare applicazioni per svariati siti. Ma: “We don’t want to have the same application on multiple social

networks. We want applications that can use data from multiple social networks.” (Tim O’Reilly su OpenSocial, titolo del commento “It's the data, stupid!”)

http://en.wikipedia.org/wiki/OpenSocial


Yahoo!Pipes33

Applicazione web che permette di costruire delle pipes mediante una semplice interfaccia grafica (rilasciata in β a inizio 2007)

Una pipe è una combinazione di comandi che permettono di acquisire, filtrare, filtrare e manipolare in vario modo dati provenienti da varie sorgenti web (tipicamente, feed RSS)

“Unix pipes for the web”:“at the heart of the Unix philosophy is the idea that the power of a system comes more from the relationships among programs than from the programs themselves."

Kernighan & Pike, 1984


ALTERNATIVA

Pipes: il concetto34

Programma A

Programma B

Programma D

dati0 dati1 dati2

dati3

SEQUENZA DI “FILTRI”

Programma B’

LOOP


35


37

Mashup: LAVORO INDIVIDUALE

OBBLIGATORIO: Esplorare www.programmableweb.com , e segnalare esempi di

mashup particolarmente interessanti ed innovativi Realizzare un blog con, utilizzando wordpress.com o blogger.com,

utilizzando tecniche di mashup (embedding di immagini, foto, slide, ..).

FACOLTATIVO: Sperimentare l’uso di yahoo!pipes


7. Mashup

Education

Transcript of 7. Mashup