Links and Widgets: the Fabric of the Web

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Links and Widgets:
the Fabric of the Web

Xavier Badosa (@badosa)
Statistical Institute of Catalonia (Idescat)

Task forc...

link-centered medium

Web

link-centered medium

Web

value of a page
incoming links

PageRank

Links
mechanism: built-in

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>

Links
mechanism: ...

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>

Links
mechanism: ...

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>

Tim Berners-Lee (click and ...

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>

Tim Berners-Lee

Links
mechanism: ...

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>

Tim Berners-Lee

Links
mechanism: ...

<a href="http://www.w3.org/People/Berners-Lee/">
WWW inventor
</a>

WWW inventor

Links
mechanism: ...

<a href="http://www.w3.org/People/Berners-Lee/">
TimBL
</a>

TimBL

Links
mechanism: b...

<a href="http://www.w3.org/People/Berners-Lee/">
Tim Bruce Lee
</a>

Tim Bruce Lee

Links
mechanism: ...

SIMPLE ! = SUCCESS !

Links
mechanism: built-in
interface: built-in
content retrieval: none

Links
mechanism: built-in
interface: built-in
content retrieval: none
distance: 1 clic...

<img src=
"http://graphics8.nytimes.com/
images/misc/nytlogo153x23.gif"
/>

static dynamic

Content and service
dissemination

funct. data

Content and service
dissemination

Widget Content and service
dissemination

embeddable
content

Widget
dynamic content
+ static content
embeddable invisible “c...

Links
mechanism: built-in
interface: built-in
content retrieval: none
distance: 1 click

For a map of Esterri de Cardós, visit For statistics on Esterri de Cardós, visit
the Cartographic Institute of Catalo...

spreading atoms in the digital space

Content Mobility

spreading atoms in the digital space
from a macro website

to micr...

spreading atoms in the digital space
from a macro website

...

reversing the communication initiative

Widgets
mechanism:
interface:
content retrieval:
distance: 0 clicks !!!

<img /> <audio /> <video />

<iframe />

<object /> <embed />

<script />

Widgets
mechanism: many
i...

<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)...

<iframe src="http://www.slideshare.net/slideshow/
embed_code/8495428" width="427" height="356"
frameborder="0" marginwidth...

<blockquote class="twitter-tweet"><p>Data Protocols:
community-based, light-weight <a
href="https://twitter.com/search/?q=...

<div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial,
sans-serif; line-height:20px"><div style="backgro...

wizard

Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

explicit widget
Builder

Seamless integration

Side content

Explicit embedding
Side content

side content

side content
main content

author

main content webmaster

side content

differentusers author differentusecases

main content webmaster

...

differentusers author differentusecases

customization
main c...

author
implicit widgets
main content
simplicity

auto-embedding

widget linki...

author
implicit widgets
main content
simplicity

Discovery

XML

JSON
...

XML
<iframe />

JSON
...

<img /> <audio /> <video />

<iframe />

<object /> <embed />

<script />

Widgets
mechanism: many
i...

<img /> <audio /> <video />

<iframe />

<object /> <embed />

<script />

Widgets
mechanism: many
i...

<iframe />

<script />

Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

<iframe />
Code simplification
(Avoids iframe attributes)
<script />

Widgets
mechanism: many
interfa...

<iframe />
Solution encapsulation
(independence from future changes)
<script />

Widgets
mechanism: ...

<iframe />
Analytics
(same origin policy, HTTP_REFERER unreliable)
<script />

Widgets
mechanism: ...

<iframe />
http://api.idescat.cat/emex.js?p=
id/080193;i/f321,f187,f122,f261&lang=en
<script />

Widgets
mechanism: ...

var pW = "";
var nomWidget = encodeURIComponent("Emex-Tbl");
try{...}catch (exc){…}
var paginaWidget = encodeURIComponent(...

<iframe />
http://api.idescat.cat/emex.ifr?p=
id/080193;i/f321,f187,f122,f261&lang=en
<script />

Widgets
mechanism: ...

Widgets
mechanism: many
interface: must be built
content retrieval:
distance: ...

must be built

It’s a widget but it’s a link too.
(The widget promotes the widget.)

must be built

It’s a widget but it’s a link too.
(The widget promotes the widget.)

Clicks / visit ……………………….… 0.6%
Clicks on content...

Main content
Maximize
looks/usefulness

must be built

Main content
Maximize
looks/usefulness

Resizability

must be built

Side content

must be built

Integration
Layout customization

Side content

must be bu...

Integration
Layout customization

Side content
Miniaturization
Content customization

...

Widgets
mechanism: many
interface: must be built
content retrieval: yes
distance: ...

provider

Widgets
mechanism: many
interface: must be built
content retrieval: ye...

provider

installer

provider

installer

end end end end
user user user user

provider

installer installer installer

end end end end
user user user user

provider

requests

end end end end
user user user user

provider

requests

# installs
x
# end users per install

end end end end
user user us...

provider

requests

∫( widget success
# end users per install )
end end end end
user ...

provider

requests

∫( widget success
installers’ popularity )
end end end end
user ...

provider

requests

installers’ popularity

end end end end
user user user user

external facto...

data

data

data

data

data

data

7 data

shared interface
data

data

data

data

...

almost never shared interface
data

data

...

provider

end end end end
user user user user

1. Protect the provider ’s website

end end end end
user user user user

1. Protect the provider ’s website

A different content server for third parties
www.idescat.cat api.ide...

provider

2. Separate content almost never frequently

end end end end
user user user user

provider

2. Separate content almost never frequently

A different cache policy (interface / data)

end ...

provider

3. Distribute computing tasks

end end end end
user user user user

provider

3. Distribute computing tasks

end end end end
user user user user

...

<script type="text/javascript"
src="http://api.idescat.cat/emex.js?p=id/080193;
i/f321,f187,f122,f261&lang=en"></scrip...

.js

<script type="text/javascript"
src="http://api.idescat.cat/emex.js?p=id/080193;
i/f321,f187,f122,f261&lang=...

.js

var pW = "";var nomWidget = encodeURIComponent("Emex-Tbl");try{pW =
window.top.location.href;if(typeof pW == "unde...

cache
.js very long client

var pW =...

cache
.js very long client
.ifr

<body>
<di...

cache
.js very long client
.ifr

<body>
<di...

cache
.js very long client
.ifr ...

cache
.js very long client
.ifr long client
.json

cache
.js very long client
.ifr long client
.json short client, server

Idescat
JSON

World Bank
JSON

Census Bureau
JSON

JSON-stat
JSON

SDMX-JSON
JSON

shared interface
...ifr?p=i/21,7,22 data

...ifr?p=i/6,13,9 data

...ifr?p=i/36,39,15 data

.....

http://api.idescat.cat/{widget}.ifr?
geo=tv&class=sex&metric=pop&time=2002&…

<body>
<div id="Giny">
<div id="canto...

http://api.idescat.cat/{widget}.ifr#
geo=tv&class=sex&metric=pop&time=2002&…

Project

http://api.idescat.cat/{widget}.ifr#
geo=tv&class=sex&metric=pop&time=2002&…

<body>

<script type="text/javascript">

...

geo=tv&class=sex&metric=pop&time=2002&…

<body>

<script type="text/javascript">

var setup=getURIParameters();

...

{
content: {
metric: ["pop"], geo: ["tv"], time: ["2001"], class: ["sex"],
lang: "en"
},
layout:...

<body>

<script type="text/javascript">

var setup=getURIParameters();
buildDOM(setup.layout);

</script>

</bo...

<table>
<caption></caption>
<thead>
<tr><th></th><th scope="col"></th></tr>
</thead>
<tfoot>
<tr><...

<body>

<script type="text/javascript">

var setup=getURIParameters();
buildDOM(setup.layout);
var data=AjaxRetr...

<body>
Same origin policy
<script type="text/javascript">

var setup=ge...

{
"dataset" : {
"label" : "Tuvalu population by sex in the 2002 Census",
"value" : [4729, 4832, 9561],
...

<body>

<script type="text/javascript">

var setup=getURIParameters();
buildDOM(setup.layout);
var data=AjaxRetr...

<table>
<caption>Tuvalu population by sex</caption>
<thead>
<tr><th></th><th scope="col">2002</th></tr>
</t...

shared interface
...ifr#p=i/21,7,22 data

...ifr#p=i/6,13,9 data

...ifr#p=i/36,39,15 data

.....

http://api.idescat.cat/{widget}.js?
geo=tv&class=sex&metric=pop&time=2002&…

http://api.idescat.cat/{widget}.js#
geo=tv&class=sex&metric=pop&time=2002&…

A script is unaware about itself

<script type="text/javascript" src="

http://api.idescat.cat/{widget}.js#
geo=tv&class=s...

A script is unaware about itself

<script type="text/javascript" src="

http://api.idescat.cat/{widget}.js#
geo=tv&class=s...

<script type="text/javascript">
widgetSetup = {
"geo": "tv",
"class": "sex",
...

<script type="text/javascript">
widgetSetup = {
"geo": "tv", Variable conflict
...

<script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>

<script type="text/javascript">
Idesca...

<script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>

<script type="text/javascript">
new Id...

<div class="IdescatWidget"
data-type="TimeSeriesWidget"
data-params="geo=tv;class=sex;
metric=pop;time=2002;..."></div>

...

<div class="IdescatWidget"
data-type="TimeSeriesWidget"
data-params="geo=tv;class=sex;
metric=pop;time=2002;..."></div>

<...

Widgets
mechanism: many
interface: must be built
content retrieval: yes
distance: ...

1. Use a dedicated server for third party services

2. Implement a different cache policy for interface/data

3. Run in th...

4. Main content widgets must be resizable

5. Side content widgets must be customizable
(layout / content)

(If both re...

6. Provide an <iframe /> façade

7. But also a <script /> façade

8. Allow auto-embedding

mechanism: ...

Thank you

Thank you
Slide #1ff. Web image by zzathras777 (CC BY-NC)
Slide #4 PageRank chart by 345Kai (Public domain)
Slide #10ff. A...

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

Rectificaciones: una propuesta de e... by Xavier Badosa 16369 views
La difusión estadística y la apertu... by Xavier Badosa 14484 views
Anatomía de las APIs del Idescat by Xavier Badosa 16470 views
El Idescat en Google Public Data Ex... by Xavier Badosa 15988 views
Standards for statistical data diss... by Xavier Badosa 18128 views
La difusión estadística y la apertu... by Xavier Badosa 15524 views

Top clipped slide

1 of 142 Ad

1 of 142 Ad