The document discusses links and widgets as the building blocks of the web. It describes how links were one of the first mechanisms built into the web as a way to connect pages. Widgets then emerged as a way to embed content like images, videos, and scripts directly into pages from external sources. The document outlines how widgets can retrieve content with no clicks compared to one click for links, and how their interfaces must be built to work, but allow for easy integration and customization.

1. Links and Widgets:
the Fabric of the Web
Xavier Badosa (@badosa)
Statistical Institute of Catalonia (Idescat)
Task force for the strategic project on the development and
use of common ESS tools and services for dissemination
Eurostat, Luxembourg, 20 September 2012

2. link-centered medium
Web

3. link-centered medium
Web
value of a page
incoming links

4. PageRank

5. Links
mechanism: built-in

6. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>
Links
mechanism: built-in

7. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>
Links
mechanism: built-in
interface: built-in

8. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>
Tim Berners-Lee (click and go)
Links
mechanism: built-in
interface: built-in

9. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>
Tim Berners-Lee
Links
mechanism: built-in
interface: built-in
content retrieval: none

10. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Berners-Lee
</a>
Tim Berners-Lee
Links
mechanism: built-in
interface: built-in
content retrieval: none

11. <a href="http://www.w3.org/People/Berners-Lee/">
WWW inventor
</a>
WWW inventor
Links
mechanism: built-in
interface: built-in
content retrieval: none

12. <a href="http://www.w3.org/People/Berners-Lee/">
TimBL
</a>
TimBL
Links
mechanism: built-in
interface: built-in
content retrieval: none

13. <a href="http://www.w3.org/People/Berners-Lee/">
Tim Bruce Lee
</a>
Tim Bruce Lee
Links
mechanism: built-in
interface: built-in
content retrieval: none

14. SIMPLE ! = SUCCESS !
Links
mechanism: built-in
interface: built-in
content retrieval: none

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

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

22. static dynamic
Content and service
dissemination
funct. data

23. Content and service
dissemination

24. Widget Content and service
dissemination
embeddable
content

25. Widget
dynamic content
+ static content
embeddable invisible “content”
− (for example, web beacons)
(visible) content

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

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

29. spreading atoms in the digital space
Content Mobility

30. spreading atoms in the digital space
from a macro website
to micro services
Content Mobility

31. spreading atoms in the digital space
from a macro website
to micro services
Content dissemination with zero distortion
Increased visibility Content Mobility
Increased customer base
brand strengthening
Better customer service

32. reversing the communication initiative

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

34. <img /> <audio /> <video />
<iframe />
<object /> <embed />
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

35. <div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js = d.createElement(s);
js.id = id; js.src = "//connect.facebook.net/en_US/all.js
#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document,
'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://jsonstat.org"
data-send="true“ data-layout="button_count" data-width="450"
data-show-faces="true"></div>
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

36. <iframe src="http://www.slideshare.net/slideshow/
embed_code/8495428" width="427" height="356"
frameborder="0" marginwidth="0" marginheight="0"
scrolling="no" style="border:1px solid #CCC;border-width:
1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
<div style="margin-bottom:5px"> <strong> <a
href="http://www.slideshare.net/badosa/
idescat-on-the-google-public-data-explorer" title="Idescat on
the Google Public Data Explorer" target="_blank">Idescat on the
Google Public Data Explorer</a> </strong> from <strong><a
href="http://www.slideshare.net/badosa" target="_blank">Xavier
Badosa</a></strong> </div>
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

37. <blockquote class="twitter-tweet"><p>Data Protocols:
community-based, light-weight <a
href="https://twitter.com/search/?q=%23data"><s>#</s>
<b>data</b></a> <a href="https://twitter.com/search/?
q=%23protocols"><s>#</s><b>protocols</b></a> for
collaborative, distributed work with data <a href="http://t.co/
KTzLtvo8" title="http://ow.ly/cjz0o">ow.ly/cjz0o</a> <a
href="https://twitter.com/search/?q=%23json"><s>#</s><b>json</b>
</a> <a href="https://twitter.com/search/?q=%23api"><s>#</s><b>api
</b></a></p>&mdash; JSON-stat.org (@jsonstat) <a
href="https://twitter.com/jsonstat/status/225589541841551360"
data-datetime="2012-07-18T13:55:12+00:00">July 18, 2012</a>
</blockquote><script src="//platform.twitter.com/widgets.js" charset="utf-
8"></script>
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

38. <div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial,
sans-serif; line-height:20px"><div style="background-color:#333; padding:
0px 5px; font-weight:bold"><div style="color:#fff; font-size:12px; line-height:
20px;"><a href="http://data.worldbank.org/indicator/AG.LND.AGRI.ZS/
countries?display=graph" style="color:#fff;text-decoration:none;" class="active">
Agricultural land (% of land area)</a></div></div><script type="text/javascript">
widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/
web_widgets_3/AG.LND.AGRI.ZS/countries/1W", "width": 300, "height": 225,
"widgetid": "web_widget_iframe_467ec58867ea6c51dd94ebcf9761e050" };</script>
<div id="web_widget_iframe_467ec58867ea6c51dd94ebcf9761e050"></div><script
src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/
web_widgets_iframe.js"></script><div style="font-size: 10px; color:#000">Data from <a
href="http://data.worldbank.org/indicator/AG.LND.AGRI.ZS/countries?display=graph"
style="color:#CCC;">World Bank</a></div></div>
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

39. wizard
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

40. explicit widget
Builder

42. Seamless integration

43. Side content

44. Explicit embedding
Side content

46. side content

47. side content
main content

48. author
main content webmaster
side content

49. differentusers author differentusecases
main content webmaster
side content

50. differentusers author differentusecases
customization
main content webmaster
simplicity
side content

51. author
implicit widgets
main content
simplicity
auto-embedding
widget linkification

52. author
implicit widgets
main content
simplicity

56. Discovery

57. XML
JSON
...

58. XML
<iframe />
JSON
...

59. <img /> <audio /> <video />
<iframe />
<object /> <embed />
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

60. <img /> <audio /> <video />
<iframe />
<object /> <embed />
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

61. <iframe />
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

62. <iframe />
Code simplification
(Avoids iframe attributes)
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

63. <iframe />
Solution encapsulation
(independence from future changes)
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

64. <iframe />
Analytics
(same origin policy, HTTP_REFERER unreliable)
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

65. <iframe />
http://api.idescat.cat/emex.js?p=
id/080193;i/f321,f187,f122,f261&lang=en
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

66. var pW = "";
var nomWidget = encodeURIComponent("Emex-Tbl");
try{...}catch (exc){…}
var paginaWidget = encodeURIComponent(pW);
var wp = "&wp=" + encodeURIComponent("pw=" + paginaWidget +
"&nw=" + nomWidget);
document.write("<iframe style="height:102px;width:100%px;border-
width:0px;border-style:solid;border-
color:black;padding:0;margin:0;max-width:400px" height="102"
width="100%" frameborder="0" scrolling="no" border="0"
allowTransparency="true"
src="http://api.idescat.cat/emex.ifr?bc=719ee1&amp;lc=0000cc&amp;
c=000000&amp;t=0&amp;e=f&amp;enc=iso-8859-
1&amp;tc=ffffff&amp;id=080193&amp;i=f321,f187,f122,f261&amp;lang
=en" + wp + ""></iframe><img alt="" border="0"
style="vertical-
align:super;display:inline;width:1px;height:1px;margin:0;padding:0;bord
er:none" src="http://www.idescat.cat/images/1x1.html?v=emex&id="
+ paginaWidget +"" />");

67. <iframe />
http://api.idescat.cat/emex.ifr?p=
id/080193;i/f321,f187,f122,f261&lang=en
<script />
Widgets
mechanism: many
interface:
content retrieval:
distance: 0 clicks

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

69. must be built

70. It’s a widget but it’s a link too.
(The widget promotes the widget.)
must be built

71. It’s a widget but it’s a link too.
(The widget promotes the widget.)
Clicks / visit ……………………….… 0.6%
Clicks on content / clicks …….… 93% must be built
Clicks on footer/ clicks ………….. 7%
Clicks on footer / visit ……….. 0.04%

72. Main content
Maximize
looks/usefulness
must be built

73. Main content
Maximize
looks/usefulness
Resizability
must be built

74. Side content
must be built

75. Integration
Layout customization
Side content
must be built

76. Integration
Layout customization
Side content
Miniaturization
Content customization
must be built

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

78. provider
Widgets
mechanism: many
interface: must be built
content retrieval: yes
distance: 0 clicks

79. provider
installer

80. provider
installer
end end end end
user user user user

81. provider
installer installer installer
end end end end
user user user user

82. provider
requests
end end end end
user user user user

83. provider
requests
# installs
x
# end users per install
end end end end
user user user user

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

85. provider
requests
∫( widget success
installers’ popularity )
end end end end
user user user user

86. provider
requests
installers’ popularity
end end end end
user user user user
external factor!

87. 1

88. 7

89. data
data
data
data
data
data
7 data

90. shared interface
data
data
data
data
data
data
7 data

91. almost never shared interface
data
data
data
updated frequently data
data
data
data

92. provider
end end end end
user user user user

93. 1. Protect the provider ’s website
end end end end
user user user user

94. 1. Protect the provider ’s website
A different content server for third parties
www.idescat.cat api.idescat.cat
end end end end
user user user user

95. provider
2. Separate content almost never frequently
end end end end
user user user user

96. provider
2. Separate content almost never frequently
A different cache policy (interface / data)
end end end end
user user user user

97. provider
3. Distribute computing tasks
end end end end
user user user user

98. provider
3. Distribute computing tasks
end end end end
user user user user
scalability

99. <script type="text/javascript"
src="http://api.idescat.cat/emex.js?p=id/080193;
i/f321,f187,f122,f261&amp;lang=en"></script>
<noscript><a
href="http://www.idescat.cat/emex/?id=080193
&amp;lang=en">The municipality in
figures</a></noscript>

100. .js
<script type="text/javascript"
src="http://api.idescat.cat/emex.js?p=id/080193;
i/f321,f187,f122,f261&amp;lang=en"></script>
<noscript><a
href="http://www.idescat.cat/emex/?id=080193
&amp;lang=en">The municipality in
figures</a></noscript>

101. .js
var pW = "";var nomWidget = encodeURIComponent("Emex-Tbl");try{pW =
window.top.location.href;if(typeof pW == "undefined") throw "nodefinits";}catch (exc){try{pW =
window.parent.location.href;if(typeof pW == "undefined") throw exc;}catch(excp){pW =
document.location.href;}}var paginaWidget = encodeURIComponent(pW);var wp = "&wp=" +
encodeURIComponent("pw=" + paginaWidget + "&nw=" + nomWidget);
document.write(“
<iframe src="http://api.idescat.cat/emex.ifr?bc=719ee1
&amp;lc=0000cc&amp;c=000000&amp;t=0&amp;e=f&amp;enc=iso-88591&amp;tc=ffffff
&amp;id=080193&amp;i=f321,f187,f122,f261&amp;lang=en" + wp + "" style="height:102px;
width:100%px;border-width:0px;border-style:solid;border-color:black;padding:0;margin:0;
max-width:400px" height="102" width="100%" frameborder="0" scrolling="no"
border="0" allowTransparency="true"
></iframe>
<img alt="" border="0" style="vertical-
align:super;display:inline;width:1px;height:1px;margin:0;padding:0;border:none"
src="http://www.idescat.cat/images/1x1.html?v=emex&id=" + paginaWidget +"" />
");

102. cache
.js very long client
var pW = "";var nomWidget = encodeURIComponent("Emex-Tbl");try{pW =
window.top.location.href;if(typeof pW == "undefined") throw "nodefinits";}catch (exc){try{pW =
window.parent.location.href;if(typeof pW == "undefined") throw exc;}catch(excp){pW =
document.location.href;}}var paginaWidget = encodeURIComponent(pW);var wp = "&wp=" +
encodeURIComponent("pw=" + paginaWidget + "&nw=" + nomWidget);
document.write(“
<iframe src="http://api.idescat.cat/emex.ifr?bc=719ee1
&amp;lc=0000cc&amp;c=000000&amp;t=0&amp;e=f&amp;enc=iso-88591&amp;tc=ffffff
&amp;id=080193&amp;i=f321,f187,f122,f261&amp;lang=en" + wp + "" style="height:102px;
width:100%px;border-width:0px;border-style:solid;border-color:black;padding:0;margin:0;
max-width:400px" height="102" width="100%" frameborder="0" scrolling="no"
border="0" allowTransparency="true"
></iframe>
<img alt="" border="0" style="vertical-
align:super;display:inline;width:1px;height:1px;margin:0;padding:0;border:none"
src="http://www.idescat.cat/images/1x1.html?v=emex&id=" + paginaWidget +"" />
");

103. cache
.js very long client
.ifr
<body>
<div id="Giny">
<div id="cantoul" class="cantonada"></div><div id="cantou" class="canto"></div>
<div id="cantour" class="cantonada"></div><div id="titol"></div>
<div id="cantol" class="canto"></div><div id="Contenidor" class="carrega"></div>
<div id="cantor" class="canto"></div><div id="cantodl" class="cantonada"></div>
<div id="cantod" class="canto"></div><div id="cantodr" class="cantonada"></div>
<address>
<span>Widget provided by</span>
<a target="_top" href="http://www.idescat.cat/api/emex/giny/indicadors/?lang=en">
<img alt="Idescat" title="add this widget to your web page"
src="http://www.idescat.cat/images/idescat.png" />
</a>
</address>
</div>
<script type="text/javascript" src="
http://api.idescat.cat/emex/v1/dades.json?id=080193&amp;i=f3
21,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini“></script>
</body>

104. cache
.js very long client
.ifr
<body>
<div id="Giny">
<div id="cantoul" class="cantonada"></div><div id="cantou" class="canto"></div>
<div id="cantour" class="cantonada"></div><div id="titol"></div>
<div id="cantol" class="canto"></div><div id="Contenidor" class="carrega"></div>
<div id="cantor" class="canto"></div><div id="cantodl" class="cantonada"></div>
<div id="cantod" class="canto"></div><div id="cantodr" class="cantonada"></div>
<address>
<span>Widget provided by</span>
<a target="_top" href="http://www.idescat.cat/api/emex/giny/indicadors/?lang=en">
<img alt="Idescat" title="add this widget to your web page"
src="http://www.idescat.cat/images/idescat.png" />
</a>
</address>
</div>
<script type="text/javascript" src="
http://api.idescat.cat/emex/v1/dades.json?id=080193&amp;i=f3
21,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini"></script>
</body>

105. cache
.js very long client
.ifr long client
<body>
<div id="Giny">
<div id="cantoul" class="cantonada"></div><div id="cantou" class="canto"></div>
<div id="cantour" class="cantonada"></div><div id="titol"></div>
<div id="cantol" class="canto"></div><div id="Contenidor" class="carrega"></div>
<div id="cantor" class="canto"></div><div id="cantodl" class="cantonada"></div>
<div id="cantod" class="canto"></div><div id="cantodr" class="cantonada"></div>
<address>
<span>Widget provided by</span>
<a target="_top" href="http://www.idescat.cat/api/emex/giny/indicadors/?lang=en">
<img alt="Idescat" title="add this widget to your web page"
src="http://www.idescat.cat/images/idescat.png" />
</a>
</address>
</div>
<script type="text/javascript" src="
http://api.idescat.cat/emex/v1/dades.json?id=080193&amp;i=f3
21,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini"></script>
</body>

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

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

108. Idescat
JSON

109. World Bank
JSON

110. Census Bureau
JSON

111. JSON-stat
JSON

112. SDMX-JSON
JSON

113. shared interface
...ifr?p=i/21,7,22 data
...ifr?p=i/6,13,9 data
...ifr?p=i/36,39,15 data
...ifr?p=i/8,23,14 data
...ifr?p=i/16,10,40 data
...ifr?p=i/24,52,11 data
7 ...ifr?p=i/2,41,28 data

114. http://api.idescat.cat/{widget}.ifr?
geo=tv&class=sex&metric=pop&time=2002&…
<body>
<div id="Giny">
<div id="cantoul" class="cantonada"></div><div id="cantou" class="canto"></div>
<div id="cantour" class="cantonada"></div><div id="titol"></div>
<div id="cantol" class="canto"></div><div id="Contenidor" class="carrega"></div>
<div id="cantor" class="canto"></div><div id="cantodl" class="cantonada"></div>
<div id="cantod" class="canto"></div><div id="cantodr" class="cantonada"></div>
<address>
<span>Widget provided by</span>
<a target="_top" href="http://www.idescat.cat/api/emex/giny/indicadors/?lang=en">
<img alt="Idescat" title="add this widget to your web page"
src="http://www.idescat.cat/images/idescat.png" />
</a>
</address>
</div>
<script type="text/javascript" src="
http://api.idescat.cat/{service}/v1/{resource}.json?geo=tv
&amp;class=sex&amp;metric=pop&amp;time=2002&amp;lang=en&amp;callback=ini"></script>
</body>

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

116. http://api.idescat.cat/{widget}.ifr#
geo=tv&class=sex&metric=pop&time=2002&…
<body>
<script type="text/javascript">
</script>
</body>
Project

117. geo=tv&class=sex&metric=pop&time=2002&…
<body>
<script type="text/javascript">
var setup=getURIParameters();
</script>
</body>

118. {
content: {
metric: ["pop"], geo: ["tv"], time: ["2001"], class: ["sex"],
lang: "en"
},
layout: {
borderColor: "#f0f0f0", textColor: "#ff0000", ...
}
}
geo=tv&class=sex&metric=pop&time=2002&…
<body>
<script type="text/javascript">
var setup=getURIParameters();
</script>
</body>

119. <body>
<script type="text/javascript">
var setup=getURIParameters();
buildDOM(setup.layout);
</script>
</body>

120. <table>
<caption></caption>
<thead>
<tr><th></th><th scope="col"></th></tr>
</thead>
<tfoot>
<tr><td colspan=""></td></tr>
</tfoot>
<tbody>
<tr><th scope="row"></th><td></td></tr>
<tr><th scope="row"></th><td></td></tr>
<tr><th scope="row"></th><td></td></tr>
</tbody>
</table>
<body>
<script type="text/javascript">
var setup=getURIParameters();
buildDOM(setup.layout);
</script>
</body>

121. <body>
<script type="text/javascript">
var setup=getURIParameters();
buildDOM(setup.layout);
var data=AjaxRetrieveData(setup.content);
</script>
</body>

122. <body>
Same origin policy
<script type="text/javascript">
var setup=getURIParameters(); http://api.idescat.cat/{widget}.ifr#...
buildDOM(setup.layout);
var data=AjaxRetrieveData(setup.content);
http://api.idescat.cat/{...}.json?...
</script>
</body>

123. {
"dataset" : {
"label" : "Tuvalu population by sex in the 2002 Census",
"value" : [4729, 4832, 9561],
"dimension" : {
"id" : ["metric", "time", "geo", "sex"], "size" : [1, 1, 1, 3],
"sex" : {
"label" : "Sex",
"category" : {
"index" : { "M" : 0, "F" : 1, "T" : 2 },
"label" : { "M" : "Men", "F" : "Women", "T" : "Total" }
}
}, …
<body>
Same origin policy
<script type="text/javascript">
var setup=getURIParameters(); http://api.idescat.cat/{widget}.ifr#...
buildDOM(setup.layout);
var data=AjaxRetrieveData(setup.content);
http://api.idescat.cat/{...}.json?...
</script>
</body>

124. <body>
<script type="text/javascript">
var setup=getURIParameters();
buildDOM(setup.layout);
var data=AjaxRetrieveData(setup.content);
insertDataOnDOM(data);
</script>
</body>

125. <table>
<caption>Tuvalu population by sex</caption>
<thead>
<tr><th></th><th scope="col">2002</th></tr>
</thead>
<tfoot>
<tr><td colspan="2">Source: Central Statistics Division – Government of Tuvalu.</td></tr>
</tfoot>
<tbody>
<tr><th scope="row">Men</th><td> 4,729 </td></tr>
<tr><th scope="row">Women</th><td> 4,832 </td></tr>
<tr><th scope="row">Total</th><td> 9,561 </td></tr>
</tbody>
</table>
<body>
<script type="text/javascript">
var setup=getURIParameters();
buildDOM(setup.layout);
var data=AjaxRetrieveData(setup.content);
insertDataOnDOM(data);
</script>
</body>

126. shared interface
...ifr#p=i/21,7,22 data
...ifr#p=i/6,13,9 data
...ifr#p=i/36,39,15 data
...ifr#p=i/8,23,14 data
...ifr#p=i/16,10,40 data
...ifr#p=i/24,52,11 data
7 ...ifr#p=i/2,41,28 data

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

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

129. A script is unaware about itself
<script type="text/javascript" src="
http://api.idescat.cat/{widget}.js#
geo=tv&class=sex&metric=pop&time=2002&…
"></script>

130. A script is unaware about itself
<script type="text/javascript" src="
http://api.idescat.cat/{widget}.js#
geo=tv&class=sex&metric=pop&time=2002&…
"></script>
hack
var s=document.getElementsByTagName('script');
var params=s[s.length-1].src.replace(/^[^#]+#?/,'');

131. <script type="text/javascript">
widgetSetup = {
"geo": "tv",
"class": "sex",
"metric": "pop",
"time": "2002",
...
};
</script>
<script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>

132. <script type="text/javascript">
widgetSetup = {
"geo": "tv", Variable conflict
"class": "sex",
"metric": "pop",
"time": "2002",
...
};
</script>
<script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>

133. <script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>
<script type="text/javascript">
Idescat.widget(
{
"geo": "tv",
"class": "sex",
"metric": "pop",
"time": "2002",
...
}
);</script>

134. <script type="text/javascript"
src="http://api.idescat.cat/{widget}.js">
</script>
<script type="text/javascript">
new Idescat.Widget(
{
"geo": "tv",
"class": "sex",
"metric": "pop",
"time": "2002",
...
}
).start();</script>

135. <div class="IdescatWidget"
data-type="TimeSeriesWidget"
data-params="geo=tv;class=sex;
metric=pop;time=2002;..."></div>
<script type="text/javascript"
src="http://api.idescat.cat/widgets.js">
</script>

136. <div class="IdescatWidget"
data-type="TimeSeriesWidget"
data-params="geo=tv;class=sex;
metric=pop;time=2002;..."></div>
<script type="text/javascript">
(function() {
var js, id='IdescatJS', d=document,s='script',
e=d.getElementsByTagName(s)[0];
if (d.getElementById(id)) /*nonstandard*/ return;
js = d.createElement(s); js.id = id; /*nonstandard*/
js.src = "http://api.idescat.cat/widgets.js";
e.parentNode.insertBefore(js, e);
}());
</script>

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

138. 1. Use a dedicated server for third party services
2. Implement a different cache policy for interface/data
3. Run in the client as many computing tasks
as possible
content retrieval: yes

139. 4. Main content widgets must be resizable
5. Side content widgets must be customizable
(layout / content)
(If both resizable and customizable, better.)
interface: must be built

140. 6. Provide an <iframe /> façade
7. But also a <script /> façade
8. Allow auto-embedding
mechanism: many

141. Thank you

142. Thank you
Slide #1ff. Web image by zzathras777 (CC BY-NC)
Slide #4 PageRank chart by 345Kai (Public domain)
Slide #10ff. Australian one way sign (GNU Free Documentation
License)
Slide #13 Bruce Lee image, author unknown
Slide #16ff. Chain links image by Eric M. Martin (CC BY-NC-ND)
Slide #32 Peacocks image by Michelle Kinsey Bruns (CC BY-SA)
Slide #39 Magic wand image by Sheeshoo (CC BY-NC-SA)