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.
Links and Widgets: the Fabric of the WebPresentation 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
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
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
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&i=f321,f187,f122,f261&lang=en&enc=iso-8859-1&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&i=f321,f187,f122,f261&lang=en&enc=iso-8859-1&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&i=f321,f187,f122,f261&lang=en&enc=iso-8859-1&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
<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>
<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
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(/^[^#]+#?/,);
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)
