Links and Widgets: the Fabric of the Web

7,942 views
8,078 views

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
7,942
On SlideShare
0
From Embeds
0
Number of Embeds
5,751
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)

×