Fare clic per modificare lo stile del sottotitolo dello schema

Mashup Tools

Corso di interazione uomo macchinaProf. Roberto PolilloAnno Accademico 2010/11

Caldara Mikko 706505Sala Paolo 701644

2

Sommario

Cos'è un mashup?

Tools e software

Dapper

Yahoo! Pipes

Conclusioni

3

Introduzione

"We know we don't have a corner on creativity.There are creative people all around the world,hundreds of millions of them, and they are goingto think of things to do with our basic platformthat we didn't think of."

Vint Cerf

4

Mashup

Letteralmente significa “poltiglia”Usa dati da più fonti per creare un servizio

completamente nuovo Il contenuto è preso da terzi via API, feed o

JavascriptSemplice da progettare: richiede minime

conoscenze tecnicheUser-generated contentStrumento tipico del Web 2.0

5

Stili di Mashup

Presentation Mashup: Informazioni mixate o accostate. Ex: portali

Client-side Data Mashup: Informazioni da servizi Web remoti, feeds, HTML => nuove informazioni

Client-side Software Mashup: Integrazione di codice per creare nuovi contenuti

Server-side Mashup: Mix di dati provenienti da diversi database

6

Stili di Mashup

Client-side implica alta portabilità e mobilità

Server-side semplifica il lavoro dell'utente ma offre una struttura di programmazione molto più avanzata potente.

7

Server-side Mashup

8

Client-side Mashup

9

Tools & Software

Yahoo! PipesGoogle Mashup Editor: abbandonato

nel 2009Microsoft Popfly: abbandonato nel

2009Dapper: specializzata nel display

advertising, comprata da Yahoo! nel 2010 ~ $100 mln

Openkapow: ora KapowSoftware, commerciale, enterprise

IBM QEDWiki: rimpiazzato da IBM Lotus Mashups, a pagamento

10

Dapper

Data MapperNon richiede conoscenze su protocolli

Internet o programmazione, al contrario di altri tools

Nonostante la semplicità d'uso, può essere molto potente

Può essere usato per estrarre dati da una fonte, creando una sorta di API che potrà essere ri-utilizzata tramite altri tools

11

Dapper

No software download, solo un web browser è richiesto. Gratis da usare.

Creare un account su http://open.dapper.netSi possono cercare Dapps create da altri: http://open.dapper.net/dapp-search.php

Si possono creare Dapps pubbliche e private

12

Dapper

Sono disponibili numerosi formati di output: feed RSS o Atom, HTML, XML, iCalendar, CVS, JSON, XSL, YAML...

...oppure una widget Flash!

13

Dapper

Purtroppo alcuni siti importanti bloccano l'accesso da parte di Dapper, ex: Google, Youtube, Twitter

14

Creare una Dapp - 1

Steps per creare una Dapp:Selezionare il sito sorgente da cui estrarre le

informazioni

In questo sito, selezionare 2 o più pagine campione, da far analizzare a Dapper

(opzionale) Scegliere una o più variabili di input. Ex: un campo di ricerca

15

16

Creare una Dapp - 2

Nelle pagine scelte in precedenza, selezionare i contenuti interessati. Ex: immagini, links...

(opzionale) Creare dei gruppi che racchiudano i contenuti selezionati

Visualizzare una preview dell'output

Dare titolo e descrizione alla Dapp creata!

17

18

19

Dapp - output

Una volta creata una Dapp, è possibile scegliere il formato dell'output: HTML, XML, etc.

(opzionale) Se ci sono delle variabili o URL di input, è possibile settarle.

20

21

Dapp - altre funzioni

Creazione di widget Flash, che successivamente è possibile includere in blog, forum, etc...

Creazione di un alert, impostandolo in modo che venga inviata una email se il contenuto del sito cambia.

Linking dell'output di una Dapp ad un'altra Dapp.

22

23

Yahoo! Pipes

24

Yahoo! Pipes

Yahoo! Pipes : il nome deriva dalle Unix Pipes, che permettevano di connettere fonti di dati a filtri e utility di diverso genere ;

Non richiede nessun tipo di installazione, è un servizio online, disponibile all’indirizzo http://pipes.yahoo.com (bisogna avere un account Yahoo!);

Gratuito;Permette la gestione dei Feed RSS e la

creazione di interessanti mashup;

25

Yahoo! Pipes

• Non richiede particolari conoscenze se non l’utilizzo di API esterne qualora si vogliano integrare particolari servizi;

• È composto da un editor grafico molto intuitivo, che permette di utilizzare una grande varietà di moduli semplicemente facendo “drag and drop”;

• Una volta create le Pipes possono essere pubblicate sul sito http://pipes.yahoo.com;

• Permette di ottenere i risultati in output in diversi formati.

26

Yahoo! Pipes – Output

Pipes permette di ottenere i risultati del proprio progetto in diverse forme:

• Pipes Badge : paragonabile a quelli che più comunemente chiamiamo widgets, stabilendone il colore, la dimensione e il numero di elementi;

• Rss;

• JSON;

• PHP;

• …

27

Yahoo! Pipes – Editor grafico

La funzionalità drag and drop è una delle caratteristiche principali di Yahoo! Pipes. Infatti attraverso il suo editor grafico vengono messe a disposizione dell’utente una serie di moduli che possono essere utilizzati semplicemente trascinandoli all’interno dell’area di lavoro.

28

Yahoo! Pipes – Editor grafico

29

Yahoo! Pipes

In rete molto spesso Yahoo! Pipes è definito come un semplice aggregatore di Feed RSS, ma nonostante questa sia una sua peculiarità le funzionalità offerte sono molte altre.

Possiamo definire questo strumento come un ambiente di programmazione visivo dirompente che dona alle persone la capacità di creare web mashups e applicazioni web-based che combinano dati da varie sorgenti con facilità ed efficacia.

30

Yahoo! Pipes

'Questo nuovo servizio Yahoo! Pipes è una pietra miliare nella storia del web. E’ un servizio che vuole sdoganare verso un pubblico più ampio l’idea dei mashup, fornendo un editor drag and drop che permette di accorpare dati provenienti da varie fonti in rete, elaborarli, e restituirti un output. Yahoo! lo descrive come "un manipolatore ed aggregatore di feed interattivi" che ti permette di "creare feed che sono più potenti, utili e rilevanti". Mentre è uno strumento ancora un po’ grezzo, ha un enorme potenziale nel convertire il web in un ambiente programmabile per chiunque.'' Tim O'Reilly - O'Reilly Radar

31

Yahoo! Pipes

Il modo migliore per spiegare le potenzialità e la semplicità di questo strumento è mostrare ciò che possiamo ottenere in pochi e semplici passi.

Per questo illustreremo ora due esempi che sfruttano diverse caratteristiche di Yahoo! Pipes:

1.Aggregatore di Feed RSS;

2.Geolocalizzazione dei Feed di Repubblica.it.

32

Yahoo! Pipes – Aggregatore Feed RSS

Una delle funzionalità offerte da Yahoo! Pipes è senza dubbio quella di permettere una gestione ottimale dei Feed a cui siamo abituati. Tutto questo senza avere nessuna conoscenza tecnica di linguaggi web o simili.

33

Yahoo! Pipes – Aggregatore Feed RSSNell’esempio che andiamo a mostrare vogliamo ottenere una lista di tutti i Feed Rss a cui siamo abbonati (Tecnorati, Techcrunch, Mashable). Il risultato di questa aggregazione sarà un componente che andremo poi ad inserire nel nostro sito internet.

34

Yahoo! Pipes – Aggregatore Feed RSSPer prima cosa selezioniamo il modulo che ci permette di recuperare i vari Feed semplicemente trascinando l’apposito componente disponibile nel menù a sinistra.

35

Yahoo! Pipes – Aggregatore Feed RSSIl passo successivo consiste nel modificare i titoli dei Feed per ottenerne una migliore classificazione a livello visuale.

Questa operazione è svolta tramite il modulo “Regex”, ovvero Regular Expression, che permette di modificare un valore passato attraverso la tecnica del patter matching.

36

Yahoo! Pipes – Aggregatore Feed RSSNel modulo “Regex” andremo ad anteporre al titolo del Feed il nome del sito a cui fa riferimento.

37

Yahoo! Pipes – Aggregatore Feed RSSIl passo successivo risulta essere il più semplice, infatti per ottenere il nostro risultato sarà sufficiente collegare tra di loro i vari moduli inseriti.

38

Yahoo! Pipes – Aggregatore Feed RSSA questo punto potremo visualizzare i risultati del nostro lavoro tramite il “debugger” presente al di sotto dell’area di lavoro. Questo strumento ci permette di selezionare i vari moduli per vedere il risultato di ognuno di essi. Selezionando invece il modulo “Output” vedremo il risultato finale.

39

Yahoo! Pipes – Aggregatore Feed RSS

40

Yahoo! Pipes – Aggregatore Feed RSSCiò che otterremo sarà una lista di tutti i Feed pubblicati sul sito Technorati.com.

41

Yahoo! Pipes – Aggregatore Feed RSS

Per raggiungere il nostro obiettivo, ovvero creare un aggregatore di Feed RSS non ci resta che eseguire le stesse operazioni per gli altri siti internet a cui siamo abbonati.

42

Yahoo! Pipes – Aggregatore Feed RSS

43

Yahoo! Pipes – Aggregatore Feed RSSA questo punto non ci resta che unire tutti i risultati per far si che confluiscano in un unico output. Per fare questo utilizzeremo l’operatore “Union”, che riesce ad unire fino a 5 flussi.

44

Yahoo! Pipes – Aggregatore Feed RSSUna volta salvata la nostra “Pipe” non ci resta che visualizzare il risultato che sarà il seguente.

45

Yahoo! Pipes – Mapping di Feed RSS

Mostriamo ora come con Yahoo! Pipes siano facilmente gestibili anche mashup che sfruttano il mapping di determinati elementi. In questo caso andremo a localizzare i Feed RSS del sito Repubblica.it sulle mappe di Yahoo! Maps.

46

Yahoo! Pipes – Mapping di Feed RSSPer prima cosa ripetiamo l’operazione mostrata in precedenza per recuperare i Feed RSS di Repubblica.it, utilizzando questa volta anche l’operatore “Truncate” (limita il numero di Feed).

47

Yahoo! Pipes – Mapping di Feed RSS

Il passo successivo consiste nell’ottenere le informazioni riguardanti la posizione geografica del contenuto del Feed. Questa operazione è risolvibile semplicemente tramite l’utilizzo del modulo “Location Extractor”, che analizza le informazioni nel Feed alla ricerca di un dato geografico (riconosce anche diversi standard).

48

Yahoo! Pipes – Mapping di Feed RSS

49

Yahoo! Pipes – Mapping di Feed RSS

Una volta salvata la nostra Pipe l’output generato conterrà un campo “Location” creato dal modulo citato in precedenza. Il visualizzatore di Yahoo Pipes riconosce che i dati sono di tipo geografico e quindi li visualizza automaticamente su Yahoo! maps.

50

Yahoo! Pipes – Mapping di Feed RSS

51

Yahoo! Pipes

Ovviamente le funzionalità offerte da Pipes non si limitano a quelle mostrate. Il menu laterale offre infatti una moltitudine di possibilità.

52

Yahoo! Pipes - Sources

La Tab “Sources” indica tutte le fonti da cui Pipes è in grado in maniera automatica di estrarre dati.

53

Yahoo! Pipes – User inputs

Questa voce del menu comprende invece i moduli che permettono all’utente di inserire dati in un determinato formato.

54

Yahoo! Pipes – Operators

In questo caso sono presenti tutti gli operatori messi a disposizione da Pipes per svolgere le operazioni più comuni.

55

Yahoo! Pipes – String

L’ultima sezione più importante mette invece a disposizione una serie di moduli per eseguire operazioni sulle stringhe.

56

Yahoo! Pipes - Conclusioni

Possiamo affermare che Yahoo! Pipes è senza dubbio il miglior strumento per la creazione di mashup, in quanto offre questa possibilità a chiunque, anche a coloro che non possiedono conoscenze informatiche specifiche. Offrendo infatti un’editor grafico con dei moduli pronti all’uso risulta essere molto semplice ed intuitivo.

57

Conclusioni

DapperVantaggi: semplice, intuitivoSvantaggi: piuttosto limitato, bloccato da

alcuni siti,

spesso va in timeout ed ha diversi problemi

Yahoo! PipesVantaggi: editor grafico molto semplice e

intuitivo, grandi potenzialità;Svantaggi: praticamente nessuno.

58

Grazie per l’attenzione