• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Links and Widgets: the Fabric of the Web
 

Links and Widgets: the Fabric of the Web

on

  • 4,074 views

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.

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.

Statistics

Views

Total Views
4,074
Views on SlideShare
1,164
Embed Views
2,910

Actions

Likes
0
Downloads
0
Comments
0

43 Embeds 2,910

http://xavierbadosa.com 1987
http://stataccess.blogspot.com 203
http://stataccess.blogspot.se 202
http://ultimate 87
http://translate.googleusercontent.com 54
http://stataccess.blogspot.co.uk 45
http://stataccess.blogspot.fi 34
https://twitter.com 26
http://stataccess.blogspot.com.au 24
http://stataccess.blogspot.nl 22
http://stataccess.blogspot.in 19
http://stataccess.blogspot.com.es 18
http://stataccess.blogspot.fr 16
http://stataccess.blogspot.de 14
http://stataccess.blogspot.ca 14
http://stataccess.blogspot.co.nz 14
http://stataccess.blogspot.pt 13
http://stataccess.blogspot.ch 12
http://stataccess.blogspot.be 11
http://stataccess.blogspot.no 10
http://stataccess.blogspot.com.br 9
http://stataccess.blogspot.jp 9
http://stataccess.blogspot.it 7
http://abtasty.com 7
http://www.linkedin.com 6
http://stataccess.blogspot.kr 6
http://stataccess.blogspot.cz 5
http://stataccess.blogspot.sg 5
http://stataccess.blogspot.ru 5
http://stataccess.blogspot.mx 5
http://stataccess.blogspot.co.il 3
http://stataccess.blogspot.ie 3
http://stataccess.blogspot.hu 3
http://stataccess.blogspot.com.ar 2
http://stataccess.blogspot.hk 2
http://cloud 1
http://131.253.14.66 1
http://stataccess.blogspot.ae 1
http://www.stataccess.blogspot.com 1
http://stataccess.blogspot.dk 1
https://si0.twimg.com 1
http://www.statsblogs.com 1
http://www.google.es 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Links and Widgets: the Fabric of the Web Links and Widgets: the Fabric of the Web Presentation Transcript

    • 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
    • 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: built-in
    • <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Linksmechanism: built-ininterface: built-in
    • <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-Lee (click and go)Linksmechanism: built-ininterface: built-in
    • <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
    • <a href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</a>Tim Berners-LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
    • <a href="http://www.w3.org/People/Berners-Lee/"> WWW inventor</a>WWW inventorLinksmechanism: built-ininterface: built-incontent retrieval: none
    • <a href="http://www.w3.org/People/Berners-Lee/"> TimBL</a>TimBLLinksmechanism: built-ininterface: built-incontent retrieval: none
    • <a href="http://www.w3.org/People/Berners-Lee/"> Tim Bruce Lee</a>Tim Bruce LeeLinksmechanism: built-ininterface: built-incontent retrieval: none
    • 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 “content” − (for example, web beacons)(visible) content
    • 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 Catalonia. the Statistical Institute of Catalonia.
    • spreading atoms in the digital space Content Mobility
    • spreading atoms in the digital spacefrom a macro website to micro services Content Mobility
    • 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
    • reversing the communication initiative
    • Widgetsmechanism:interface:content retrieval:distance: 0 clicks !!!
    • <img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <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
    • <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
    • <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
    • <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
    • 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 side content
    • differentusers author differentusecases customization main content webmaster simplicity side 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:content retrieval:distance: 0 clicks
    • <img /> <audio /> <video /><iframe /><object /> <embed /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <iframe /><script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <iframe />Code simplification(Avoids iframe attributes)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <iframe />Solution encapsulation(independence from future changes)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <iframe />Analytics(same origin policy, HTTP_REFERER unreliable)<script />Widgetsmechanism: manyinterface:content retrieval:distance: 0 clicks
    • <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
    • 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 +"" />");
    • <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
    • Widgetsmechanism: manyinterface: must be builtcontent retrieval:distance: 0 clicks
    • 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 / clicks …….… 93% must be builtClicks on footer/ clicks ………….. 7%Clicks on footer / visit ……….. 0.04%
    • 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 must be built
    • Widgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
    • providerWidgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
    • 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 user user
    • provider requests∫( widget success installers’ popularity ) end end end end user user user user
    • 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 data7 data
    • almost never shared interface data data dataupdated frequently data data 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.cat end end end end user user user user
    • 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 end end user user user user
    • provider3. Distribute computing tasks end end end end user user user user
    • provider3. Distribute computing tasks end end end end user user user user scalability
    • <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>
    • .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>
    • .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 +"" />");
    • 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 +"" />");
    • 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>
    • 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>
    • 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>
    • 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,23,14 data ...ifr?p=i/16,10,40 data ...ifr?p=i/24,52,11 data7 ...ifr?p=i/2,41,28 data
    • 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>
    • 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"> </script> </body> Project
    • geo=tv&class=sex&metric=pop&time=2002&… <body> <script type="text/javascript"> var setup=getURIParameters(); </script> </body>
    • { 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>
    • <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 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>
    • <body> <script type="text/javascript"> var setup=getURIParameters(); buildDOM(setup.layout); var data=AjaxRetrieveData(setup.content); </script></body>
    • <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>
    • { "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>
    • <body> <script type="text/javascript"> var setup=getURIParameters(); buildDOM(setup.layout); var data=AjaxRetrieveData(setup.content); insertDataOnDOM(data); </script></body>
    • <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>
    • 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
    • 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&metric=pop&time=2002&…"></script>
    • 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(/^[^#]+#?/,);
    • <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>
    • <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>
    • <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>
    • <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>
    • <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>
    • <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>
    • Widgetsmechanism: manyinterface: must be builtcontent retrieval: yesdistance: 0 clicks
    • 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
    • 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
    • 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. 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)