Links and Widgets:the Fabric of the WebXavier Badosa (@badosa)Statistical Institute of Catalonia (Idescat)Task force for t...
link-centered medium             Web
link-centered medium             Web       value of a page        incoming links
PageRank
Linksmechanism:   built-in
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Berners-Lee</a>Linksmechanism:                           buil...
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Berners-Lee</a>Linksmechanism:                           buil...
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Berners-Lee</a>Tim Berners-Lee               (click and go)Li...
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism:                ...
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism:                ...
<a href="http://www.w3.org/People/Berners-Lee/">         WWW inventor</a>WWW inventorLinksmechanism:                      ...
<a href="http://www.w3.org/People/Berners-Lee/">         TimBL</a>TimBLLinksmechanism:                           built-ini...
<a href="http://www.w3.org/People/Berners-Lee/">         Tim Bruce Lee</a>Tim Bruce LeeLinksmechanism:                    ...
SIMPLE ! = SUCCESS !Linksmechanism:           built-ininterface:           built-incontent retrieval:     none
Linksmechanism:           built-ininterface:           built-incontent retrieval:     nonedistance:             1 click !
<img src="http://graphics8.nytimes.com/images/misc/nytlogo153x23.gif"/>
static   dynamic                   Content and service                   disseminationfunct.   data
Content and servicedissemination
Widget       Content and service             disseminationembeddable   content
Widget                        dynamic content                    +   static content    embeddable          invisible “cont...
Linksmechanism:           built-ininterface:           built-incontent retrieval:     nonedistance:             1 click
For a map of Esterri de Cardós, visit      For statistics on Esterri de Cardós, visitthe Cartographic Institute of Catalon...
spreading atoms in the digital space                    Content Mobility
spreading atoms in the digital spacefrom a macro website                                                     to micro serv...
spreading atoms in the digital spacefrom a macro website                                                                  ...
reversing the communication   initiative
Widgetsmechanism:interface:content retrieval:distance:            0 clicks !!!
<img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism:                     manyinterface:con...
<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 <ahref="https://twitter.com/search/?q=%2...
<div style="width:300px; font-family:Helvetica Neue, Helvetica, Arial,sans-serif; line-height:20px"><div style="background...
wizardWidgetsmechanism:            manyinterface:content retrieval:distance:            0 clicks
explicit widget     Builder
Seamless integration
Side content
Explicit embeddingSide content
side content
side contentmain content
authormain content       webmaster                           side content
differentusers        author   differentusecases            main content       webmaster                                  ...
differentusers   author   differentusecases                                                 customization     main content...
author               implicit widgetsmain contentsimplicity               auto-embedding               widget linkification
author               implicit widgetsmain contentsimplicity
Discovery
XMLJSON       ...
XML<iframe />             JSON                    ...
<img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism:                     manyinterface:con...
<img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism:                     manyinterface:con...
<iframe /><script />Widgetsmechanism:            manyinterface:content retrieval:distance:            0 clicks
<iframe />Code simplification(Avoids iframe attributes)<script />Widgetsmechanism:                    manyinterface:conten...
<iframe />Solution encapsulation(independence from future changes)<script />Widgetsmechanism:                            m...
<iframe />Analytics(same origin policy, HTTP_REFERER unreliable)<script />Widgetsmechanism:                               ...
<iframe />http://api.idescat.cat/emex.js?p=id/080193;i/f321,f187,f122,f261&lang=en<script />Widgetsmechanism:             ...
var pW = "";var nomWidget = encodeURIComponent("Emex-Tbl");try{...}catch (exc){…}var paginaWidget = encodeURIComponent(pW)...
<iframe />http://api.idescat.cat/emex.ifr?p=id/080193;i/f321,f187,f122,f261&lang=en<script />Widgetsmechanism:            ...
Widgetsmechanism:                  manyinterface:           must be builtcontent retrieval:distance:                  0 cl...
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 / clic...
Main content     Maximize     looks/usefulness                        must be built
Main content     Maximize     looks/usefulness     Resizability                        must be built
Side content               must be built
IntegrationLayout customization                       Side content                                      must be built
IntegrationLayout customization                        Side contentMiniaturizationContent customization                   ...
Widgetsmechanism:                  manyinterface:           must be builtcontent retrieval:             yesdistance:      ...
providerWidgetsmechanism:                  manyinterface:           must be builtcontent retrieval:             yesdistanc...
providerinstaller
provider        installerend    end    end    enduser   user   user   user
providerinstaller     installer     installer      end    end    end    end      user   user   user   user
provider       requestsend    end    end    enduser   user   user   user
provider       requests      # installs          x# end users per installend    end    end    enduser   user   user   user
provider          requests∫(      widget success # end users per install    ) end      end    end     end user     user   ...
provider           requests∫(      widget success     installers’ popularity   ) end       end    end    end user      use...
provider       requests installers’ popularityend    end    end    enduser   user   user   user external factor!
1
7
data    data    data    data    data    data7   data
shared interface                 data                 data                 data                 data                 data ...
almost never   shared interface                                      data                                      data       ...
providerend    end    end    enduser   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.idescat....
provider2. Separate content almost never   frequently     end    end    end    end     user   user   user   user
provider2. Separate content almost never        frequently  A different cache policy (interface / data)     end     end   ...
provider3. Distribute computing tasks     end     end    end     end     user    user   user    user
provider3. Distribute computing tasks     end     end    end     end     user    user   user    user                    sc...
<script type="text/javascript"src="http://api.idescat.cat/emex.js?p=id/080193;i/f321,f187,f122,f261&amp;lang=en"></script>...
.js <script type="text/javascript" src="http://api.idescat.cat/emex.js?p=id/080193; i/f321,f187,f122,f261&amp;lang=en"></s...
.jsvar pW = "";var nomWidget = encodeURIComponent("Emex-Tbl");try{pW =window.top.location.href;if(typeof pW == "undefined"...
cache.js                                                  very long                                   clientvar pW = "";va...
cache.js                                                very long                               client.ifr<body> <div id="...
cache.js                                                very long                               client.ifr<body> <div id="...
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    ...ifr?p=i/8...
http://api.idescat.cat/{widget}.ifr?geo=tv&class=sex&metric=pop&time=2002&… <body>  <div id="Giny">    <div id="cantoul" c...
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">  </scr...
geo=tv&class=sex&metric=pop&time=2002&… <body>  <script type="text/javascript">    var setup=getURIParameters();  </script...
{    content: {       metric: ["pop"], geo: ["tv"], time: ["2001"], class: ["sex"],       lang: "en"    },    layout: {   ...
<body> <script type="text/javascript">   var setup=getURIParameters();   buildDOM(setup.layout); </script></body>
<table>   <caption></caption>   <thead>      <tr><th></th><th scope="col"></th></tr>   </thead>   <tfoot>      <tr><td col...
<body> <script type="text/javascript">   var setup=getURIParameters();   buildDOM(setup.layout);   var data=AjaxRetrieveDa...
<body>                                               Same origin policy <script type="text/javascript">   var setup=getURI...
{    "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=AjaxRetrieveDa...
<table>   <caption>Tuvalu population by sex</caption>   <thead>      <tr><th></th><th scope="col">2002</th></tr>   </thead...
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...
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=sex&me...
A script is unaware about itself<script type="text/javascript" src="http://api.idescat.cat/{widget}.js#geo=tv&class=sex&me...
<script type="text/javascript">       widgetSetup = {             "geo": "tv",             "class": "sex",             "me...
<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">Idescat.wid...
<script type="text/javascript"src="http://api.idescat.cat/{widget}.js"></script><script type="text/javascript">new Idescat...
<div class="IdescatWidget"data-type="TimeSeriesWidget"data-params="geo=tv;class=sex;metric=pop;time=2002;..."></div><scrip...
<div class="IdescatWidget"data-type="TimeSeriesWidget"data-params="geo=tv;class=sex;metric=pop;time=2002;..."></div><scrip...
Widgetsmechanism:                  manyinterface:           must be builtcontent retrieval:             yesdistance:      ...
1. Use a dedicated server for third party services2. Implement a different cache policy for interface/data3. Run in the cl...
4. Main content widgets must be resizable5. Side content widgets must be customizable   (layout / content)(If both resizab...
6. Provide an <iframe /> façade7. But also a <script /> façade8. Allow auto-embedding   mechanism:                     many
Thank you
Thank youSlide #1ff. Web image by zzathras777 (CC BY-NC)Slide #4 PageRank chart by 345Kai (Public domain)Slide #10ff. Aust...
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Links and Widgets: the Fabric of the Web
Upcoming SlideShare
Loading in...5
×

Links and Widgets: the Fabric of the Web

5,821

Published on

Opening contribution to the Task force for the strategic project on the development and use of common ESS tools and services for dissemination. Eurostat, Luxembourg, 20 September 2012.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,821
On Slideshare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Links and Widgets: the Fabric of the Web

  1. 1. Links and Widgets:the Fabric of the WebXavier Badosa (@badosa)Statistical Institute of Catalonia (Idescat)Task force for the strategic project on the development anduse of common ESS tools and services for disseminationEurostat, Luxembourg, 20 September 2012
  2. 2. link-centered medium Web
  3. 3. link-centered medium Web value of a page incoming links
  4. 4. PageRank
  5. 5. Linksmechanism: built-in
  6. 6. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Linksmechanism: built-in
  7. 7. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Linksmechanism: built-ininterface: built-in
  8. 8. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-Lee (click and go)Linksmechanism: built-ininterface: built-in
  9. 9. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
  10. 10. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
  11. 11. <a href="http://www.w3.org/People/Berners-Lee/"> WWW inventor</a>WWW inventorLinksmechanism: built-ininterface: built-incontent retrieval: none
  12. 12. <a href="http://www.w3.org/People/Berners-Lee/"> TimBL</a>TimBLLinksmechanism: built-ininterface: built-incontent retrieval: none
  13. 13. <a href="http://www.w3.org/People/Berners-Lee/"> Tim Bruce Lee</a>Tim Bruce LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
  14. 14. SIMPLE ! = SUCCESS !Linksmechanism: built-ininterface: built-incontent retrieval: none
  15. 15. Linksmechanism: built-ininterface: built-incontent retrieval: nonedistance: 1 click !
  16. 16. <img src="http://graphics8.nytimes.com/images/misc/nytlogo153x23.gif"/>
  17. 17. static dynamic Content and service disseminationfunct. data
  18. 18. Content and servicedissemination
  19. 19. Widget Content and service disseminationembeddable content
  20. 20. Widget dynamic content + static content embeddable invisible “content” − (for example, web beacons)(visible) content
  21. 21. Linksmechanism: built-ininterface: built-incontent retrieval: nonedistance: 1 click
  22. 22. For a map of Esterri de Cardós, visit For statistics on Esterri de Cardós, visitthe Cartographic Institute of Catalonia. the Statistical Institute of Catalonia.
  23. 23. spreading atoms in the digital space Content Mobility
  24. 24. spreading atoms in the digital spacefrom a macro website to micro services Content Mobility
  25. 25. spreading atoms in the digital spacefrom a macro website to micro services Content dissemination with zero distortion Increased visibility Content Mobility Increased customer base brand strengthening Better customer service
  26. 26. reversing the communication initiative
  27. 27. Widgetsmechanism:interface:content retrieval:distance: 0 clicks !!!
  28. 28. <img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  29. 29. <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>Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  30. 30. <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> <ahref="http://www.slideshare.net/badosa/idescat-on-the-google-public-data-explorer" title="Idescat onthe Google Public Data Explorer" target="_blank">Idescat on theGoogle Public Data Explorer</a> </strong> from <strong><ahref="http://www.slideshare.net/badosa" target="_blank">XavierBadosa</a></strong> </div>Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  31. 31. <blockquote class="twitter-tweet"><p>Data Protocols:community-based, light-weight <ahref="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> forcollaborative, distributed work with data <a href="http://t.co/KTzLtvo8" title="http://ow.ly/cjz0o">ow.ly/cjz0o</a> <ahref="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) <ahref="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>Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  32. 32. <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><scriptsrc="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 <ahref="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
  33. 33. wizardWidgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  34. 34. explicit widget Builder
  35. 35. Seamless integration
  36. 36. Side content
  37. 37. Explicit embeddingSide content
  38. 38. side content
  39. 39. side contentmain content
  40. 40. authormain content webmaster side content
  41. 41. differentusers author differentusecases main content webmaster side content
  42. 42. differentusers author differentusecases customization main content webmaster simplicity side content
  43. 43. author implicit widgetsmain contentsimplicity auto-embedding widget linkification
  44. 44. author implicit widgetsmain contentsimplicity
  45. 45. Discovery
  46. 46. XMLJSON ...
  47. 47. XML<iframe /> JSON ...
  48. 48. <img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  49. 49. <img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  50. 50. <iframe /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  51. 51. <iframe />Code simplification(Avoids iframe attributes)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  52. 52. <iframe />Solution encapsulation(independence from future changes)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  53. 53. <iframe />Analytics(same origin policy, HTTP_REFERER unreliable)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  54. 54. <iframe />http://api.idescat.cat/emex.js?p=id/080193;i/f321,f187,f122,f261&lang=en<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  55. 55. 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;border:none" src="http://www.idescat.cat/images/1x1.html?v=emex&id="+ paginaWidget +"" />");
  56. 56. <iframe />http://api.idescat.cat/emex.ifr?p=id/080193;i/f321,f187,f122,f261&lang=en<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
  57. 57. Widgetsmechanism: manyinterface: must be builtcontent retrieval:distance: 0 clicks
  58. 58. must be built
  59. 59. It’s a widget but it’s a link too.(The widget promotes the widget.) must be built
  60. 60. 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 builtClicks on footer/ clicks ………….. 7%Clicks on footer / visit ……….. 0.04%
  61. 61. Main content Maximize looks/usefulness must be built
  62. 62. Main content Maximize looks/usefulness Resizability must be built
  63. 63. Side content must be built
  64. 64. IntegrationLayout customization Side content must be built
  65. 65. IntegrationLayout customization Side contentMiniaturizationContent customization must be built
  66. 66. Widgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
  67. 67. providerWidgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
  68. 68. providerinstaller
  69. 69. provider installerend end end enduser user user user
  70. 70. providerinstaller installer installer end end end end user user user user
  71. 71. provider requestsend end end enduser user user user
  72. 72. provider requests # installs x# end users per installend end end enduser user user user
  73. 73. provider requests∫( widget success # end users per install ) end end end end user user user user
  74. 74. provider requests∫( widget success installers’ popularity ) end end end end user user user user
  75. 75. provider requests installers’ popularityend end end enduser user user user external factor!
  76. 76. 1
  77. 77. 7
  78. 78. data data data data data data7 data
  79. 79. shared interface data data data data data data7 data
  80. 80. almost never shared interface data data dataupdated frequently data data data data
  81. 81. providerend end end enduser user user user
  82. 82. 1. Protect the provider ’s website end end end end user user user user
  83. 83. 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
  84. 84. provider2. Separate content almost never frequently end end end end user user user user
  85. 85. provider2. Separate content almost never frequently A different cache policy (interface / data) end end end end user user user user
  86. 86. provider3. Distribute computing tasks end end end end user user user user
  87. 87. provider3. Distribute computing tasks end end end end user user user user scalability
  88. 88. <script type="text/javascript"src="http://api.idescat.cat/emex.js?p=id/080193;i/f321,f187,f122,f261&amp;lang=en"></script><noscript><ahref="http://www.idescat.cat/emex/?id=080193&amp;lang=en">The municipality infigures</a></noscript>
  89. 89. .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>
  90. 90. .jsvar 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 +"" />");
  91. 91. cache.js very long clientvar 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 +"" />");
  92. 92. 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=f321,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini“></script></body>
  93. 93. 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=f321,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini"></script></body>
  94. 94. 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=f321,f187,f122,f261&amp;lang=en&amp;enc=iso-8859-1&amp;callback=ini"></script></body>
  95. 95. cache.js very long client.ifr long client.json
  96. 96. cache.js very long client.ifr long client.json short client, server
  97. 97. Idescat JSON
  98. 98. World Bank JSON
  99. 99. Census Bureau JSON
  100. 100. JSON-stat JSON
  101. 101. SDMX-JSON JSON
  102. 102. 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 data7 ...ifr?p=i/2,41,28 data
  103. 103. 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>
  104. 104. http://api.idescat.cat/{widget}.ifr#geo=tv&class=sex&metric=pop&time=2002&… Project
  105. 105. http://api.idescat.cat/{widget}.ifr#geo=tv&class=sex&metric=pop&time=2002&… <body> <script type="text/javascript"> </script> </body> Project
  106. 106. geo=tv&class=sex&metric=pop&time=2002&… <body> <script type="text/javascript"> var setup=getURIParameters(); </script> </body>
  107. 107. { 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>
  108. 108. <body> <script type="text/javascript"> var setup=getURIParameters(); buildDOM(setup.layout); </script></body>
  109. 109. <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>
  110. 110. <body> <script type="text/javascript"> var setup=getURIParameters(); buildDOM(setup.layout); var data=AjaxRetrieveData(setup.content); </script></body>
  111. 111. <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>
  112. 112. { "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>
  113. 113. <body> <script type="text/javascript"> var setup=getURIParameters(); buildDOM(setup.layout); var data=AjaxRetrieveData(setup.content); insertDataOnDOM(data); </script></body>
  114. 114. <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>
  115. 115. 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 data7 ...ifr#p=i/2,41,28 data
  116. 116. http://api.idescat.cat/{widget}.js?geo=tv&class=sex&metric=pop&time=2002&…
  117. 117. http://api.idescat.cat/{widget}.js#geo=tv&class=sex&metric=pop&time=2002&…
  118. 118. 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>
  119. 119. 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(/^[^#]+#?/,);
  120. 120. <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>
  121. 121. <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>
  122. 122. <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>
  123. 123. <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>
  124. 124. <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>
  125. 125. <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>
  126. 126. Widgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
  127. 127. 1. Use a dedicated server for third party services2. Implement a different cache policy for interface/data3. Run in the client as many computing tasks as possible content retrieval: yes
  128. 128. 4. Main content widgets must be resizable5. Side content widgets must be customizable (layout / content)(If both resizable and customizable, better.) interface: must be built
  129. 129. 6. Provide an <iframe /> façade7. But also a <script /> façade8. Allow auto-embedding mechanism: many
  130. 130. Thank you
  131. 131. Thank youSlide #1ff. Web image by zzathras777 (CC BY-NC)Slide #4 PageRank chart by 345Kai (Public domain)Slide #10ff. Australian one way sign (GNU Free DocumentationLicense)Slide #13 Bruce Lee image, author unknownSlide #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)

×