300 likes | 461 Views
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 /. Agenda. Mashing up Web data Key concepts Problem statement and objective
E N D
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/
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
Scenario • Data integration in the Web • Aggregation • Combination • Visualization
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
Mashup • Mashlet • Mashup • Application that aggregate, integrate, manageand display data, which are retrieved from several data-providers • Examples • Yahoo! Pipes (Data Flow) • MS Montage (Spatial data organization)
MASHING UP DATA • Mashlet • Graphical: widget • Functional: web services • Mashup • Composition of mashlets • Loosely coupled data integration • Databases • Web services • Web Pages • Local Files
APPROACH Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … M2 S2: pages blanches • 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 • Visualizationdefines 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 S3: 118 000 M1 S1
MASHLET Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … • 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 x M1 M1 … t y
MASHLET Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … • 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 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 y 300 pixels x M1 200 pixels
MASHLET Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … • 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 t 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 data transfer interval M1 M1 10 minutes
MASHLET Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … • 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 But Genoveva moves a lot and changes addresses frequently … … so data have to be refreshed M1 Get Genoveva’s address every week S2 : Pages blanches
MASHUP Digital profile of Genoveva Vargas : address, google, bing, flicker, facebook … Inspired in http://www.123people.fr
MASHUP ELEMENTS M1 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 M2 S2: pages blanches M3 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 M2 S3: 118 000 S1 M1 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
MASHUP M1 M2 S2: pages blanches x Compose M1 and M2 where M1 is touches M2 at the east and M1 and M2 are centered t M2 y S1 M1
MASHUP M4 x S2: pages blanches Compose M1 and M2 where M1 is touches M2 at the east and M1 and M2 are centered t y S1
MASHUP M4 x S2: pages blanches Compose M4 and M3 where M3 touches M4 at the south and M4 and M3 are centred t S3: 118 000 y M3 S1
MASHUP x S2: pages blanches t S3: 118 000 y Compose M4 and M3 where M3 touches M4 at the south and M4 and M3 are centred S1
Genoveva.Vargas@imag.fr http://www.vargas-solar.com/
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
Mashing up data in a 2D spacePrinciple • Principle X (1,1) (16,1) News - LeMonde Photo - CNN (18,7) (14,7) Y Internet Photo - Flickr (1,9) News – CNN (16,9) Video - YouTube S4 S4 S5 S5 S3 S3 Internet S2 S2
SUNO Architecture Client Server HTTP User interface User Accounts Edition Environment Presentation Mashlets Catalog Data Sources Manager SOAP, REST S4 S5 S3 Internet S2
SUNO Functions Procedure Step 1 Specify the sources Step 2 Specify the data format Step 3 Save the mashlet Mashlet definition Mashlet 1 Source = “http://…/CNN” Type = “Photo” Mashlet 2 … Save Mashlet Catalog
SUNO Functions Mashup 2D space organization (I) (10,1) Container A Container B X “My First Mashup” (17,8) Y
SUNO Functions Mashup 2D space organization (II) (10,1) Container A Container B X (17,8) Y
SUNO Functions Linking mashlets for producing a mashup (I) Container A Mashlet 1 Container B Mashlet 2 Mashlets Catalog
SUNO Functions Linking mashlets for producing a mashup (II) Container A Mashlet 1 Container B Mashlet 2
SUNO Functions Mashup execution (1,1) (16,1) Mashlet 1 ( Photo - CNN) Mashlet 2 (News - LeMonde) (18,7) (14,7) M 5 (Photo - Flickr) Mashlet 3 (News – CNN) (1,9) (16,9) Mashlet 4 (Video - YouTube)
Implementation issues • Development platform • .NET 4 Platform • Silverlight • Tools and Technologies • XAML • C# • Visual Studio 2010 • Communication Styles • RESTful • SOAP • Data Format • JSON • XML