1. MASHUPS: BUILDING MULTIMEDIA DOCUMENTS ON THE WEB GENOVEVA VARGAS SOLAR FRENCH COUNCIL OF SCIENTIFIC RESEARCH, LIG-LAFMIA, FRANCE Genoveva.Vargas@imag.fr http://www.vargas-solar.com/

2. AGENDA  Mashing up Web data  Key concepts  Problem statement and objective  SUNO: a mashup definition environment  Principle: mashing up data in space  General architecture and main functions  Implementation issues  Conclusions and perspectives 2

3. SCENARIO  Data integration in the Web  Aggregation  Combination  Visualization 3

4. MASHUP  Mashlet  Atomic and reusable container that calls a data-provider and  Presents the retrieved data (e.g. a Web page)  Data Provider  Web scrapping  Feeds  Web services  Mashup 4

5. MASHUP  Mashlet  Mashup  Application that aggregate, integrate, manage and display data, which are retrieved from several data-providers  Examples  Yahoo! Pipes (Data Flow)  MS Montage (Spatial data organization) 5

6. MASHING UP DATA 6 Mashlet Graphical: widget Functional: web services Mashup Composition of mashlets Loosely coupled data integration Databases Web services Web Pages Local Files

7. EXISTING WORKS 7 CRITERIONWSO2 MASHUP SERVER YAHOO! PIPESINTEL MASHMAKER PRESTO TypePlatform Language/Platform ImplementationJavaScriptDrag-And-Drop D&D XML/ support for adding scripts Edition toolNavigator Eclipse/ Navigator DashbordWSO2 gadget serverYes CatalogueNoYes No

8. APPROACH  Mashlet: basic unit for retrieving data from a data service (service call) and visualizing results  Data service identified by an URI and exports an API with methods for retrieving data  Visualization defines a way how to display data in a 2D space (html page) and in time  Mashup: a set of mashlets associated by spatial and temporal relationships 8 M1 M2 S2: pages blanches S3: 118 000 S1 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook …

9. MASHLET  Visualization: associates a size, a position, a start time, and a duration to the data retrieved from a service  Management: frequency in which data have to be retrieved by calling the service 9 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook …

10. MASHLET  Visualization: associates a size, a position, a start time, and a duration to the data retrieved from a service  Management: frequency in which data have to be retrieved by calling the service 10 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … Present Genoveva’s current addresses during 10 minutes once data have been retrieved in the upper part of the space in a rectangle of 300 x 200 pixels 200 pixels x M1 y 300 pixels

11. MASHLET  Visualization: associates a size, a position, a start time, and a duration to the data retrieved from a service  Management: frequency in which data have to be retrieved by calling the service 11 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … Present Genoveva’s current addresses during 10 minutes once data have been retrieved in the upper part of the space In a rectangle of 300 x 200 pixels 10 minutes t data transfer interval

12. MASHLET  Visualization: associates a size, a position, a start time, and a duration to the data retrieved from a service  Management: frequency in which data have to be retrieved by calling the service 12 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … But Genoveva moves a lot and changes addresses frequently … S2 : Pages blanches M1 … so data have to be refreshed Get Genoveva’s address every week

13. MASHUP 13 Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … Inspired in http://www.123people.fr

14. MASHUP ELEMENTS 14 M1 M2 S2: pages blanches S1 S3: 118 000 Present Genoveva’s current addresses during 10 minutes once data have been retrieved in the upper part of the space In a rectangle of 300 x 200 pixels Present Genoveva’s telephone numbers during 10 minutes once data have been retrieved in the upper part of the space in a rectangle of 600 x 200 pixels Present Genoveva’s photos as long as data have been retrieved in the upper part of the space in a rectangle of 600 x 150 pixels M1M1 M2M2 M3M3

15. y x t MASHUP 15 M1 M2 S2: pages blanches S1 Compose M 1 and M 2 where M 1 is touches M 2 at the east and M 1 and M 2 are centered M1M1 M2M2

16. y x t MASHUP 16 S2: pages blanches S1 Compose M 1 and M 2 where M 1 is touches M 2 at the east and M 1 and M 2 are centered M4M4

17. y x t MASHUP 17 S2: pages blanches S1 S3: 118 000 Compose M 4 and M 3 where M 3 touches M 4 at the south and M 4 and M 3 are centred M3M3 M4M4

18. y x t MASHUP 18 S2: pages blanches S1 S3: 118 000 Compose M 4 and M 3 where M 3 touches M 4 at the south and M 4 and M 3 are centred

19. Genoveva.Vargas@imag.fr http://www.vargas-solar.com/

20. AGENDA Mashing up Web data Key concepts Problem statement and objective  SUNO: a mashup definition environment  Principle: mashing up data in space  General architecture and main functions  Implementation issues  Conclusions and perspectives 20

21. MASHING UP DATA IN A 2D SPACE PRINCIPLE  Principle 21 Video - YouTube Photo - CNN Photo - Flickr X Y News - LeMonde News – CNN (1,1) (16,9)(1,9) (16,1) (14,7) (18,7) S 2 S 3 S 4 S 5 Internet S 2 S 3 S 4 S 5 Internet

22. SUNO ARCHITECTURE 22 HTTP SOAP, REST Server User Accounts Mashlets Catalog Client User interface Edition Environment Presentation Data Sources Manager S 2 S 3 S 4 S 5 Internet

23. SUNO F UNCTIONS  Procedure  Step 1 Specify the sources  Step 2 Specify the data format  Step 3 Save the mashlet 23 M ASHLET DEFINITION Mashlet 1 Source = “http://…/CNN” Type = “Photo” Mashlet 2 … Mashlet Catalog Save

24. SUNO F UNCTIONS 24 M ASHUP 2D SPACE ORGANIZATION (I) Container AContainer B (10,1) (17,8) X Y “My First Mashup”

25. SUNO F UNCTIONS 25 M ASHUP 2D SPACE ORGANIZATION (II) Container AContainer B (10,1) (17,8) X Y

26. SUNO F UNCTIONS 26 L INKING MASHLETS FOR PRODUCING A MASHUP (I) Mashlets Catalog Container A Container B Mashlet 1 Mashlet 2

27. SUNO F UNCTIONS 27 L INKING MASHLETS FOR PRODUCING A MASHUP (II) Container A Container B Mashlet 1 Mashlet 2

28. SUNO F UNCTIONS 28 M ASHUP EXECUTION Mashlet 4 (Video - YouTube) Mashlet 1 ( Photo - CNN) M 5 (Photo - Flickr) Mashlet 2 (News - LeMonde) Mashlet 3 (News – CNN) (1,1) (16,9)(1,9) (16,1) (14,7) (18,7)

29. IMPLEMENTATION ISSUES  Development platform .NET 4 Platform  Silverlight  Tools and Technologies  XAML  C#  Visual Studio 2010  Communication Styles  RESTful  SOAP  Data Format  JSON  XML 29

30. Thanks 30