Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Los widgets del Idescat: una aplicación de las APIs

13,114 views

Published on

Anatomía de los widgets del Instituto de Estadística de Cataluña. Facilitar la movilidad de las tablas gracias a la incrustación inferible.

Published in: Technology
  • Be the first to comment

Los widgets del Idescat: una aplicación de las APIs

  1. 1. contra el apartheid <br />de los datos<br />Los widgets<br />del Idescat: <br />una aplicación de las APIs<br />Xavier Badosa (@badosa)<br />Instituto de Estadística de Cataluña<br />Canarias, mayo 2011<br />
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15. Al ser usuariossomostambién<br />validadores<br />
  16. 16. Al ser usuariossomostambién<br />validadores<br />La página principal es tambiénnuestropanel de control<br />
  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32. Anatomía<br />de los widgets<br />del Idescat<br />
  33. 33. Anatomía<br />de los widgets<br />del Idescat<br />
  34. 34. Anatomía<br />de los widgets<br />del Idescat<br />
  35. 35. Anatomía<br />de los widgets<br />del Idescat<br />
  36. 36. Anatomía<br />de los widgets<br />del Idescat<br />Javascript<br />Accesibilidad: contenidoalternativo<br />
  37. 37. Anatomía<br />de los widgets<br />del Idescat<br />Javascript<br />
  38. 38. Anatomía<br />de los widgets<br />del Idescat<br />Javascript<br />Encapsulador: independencia de la solución<br />...<br />http://api.idescat.cat/indicadors.js?...<br />
  39. 39. Anatomía<br />de los widgets<br />del Idescat<br />iframe + img<br />Javascript<br />Encapsulador: independencia de la solución<br />...<br />http://api.idescat.cat/indicadors.js?...<br />
  40. 40. Anatomía<br />de los widgets<br />del Idescat<br />iframe + img<br />Contexto: aislado<br />Contexto: página de inserción<br />Javascript<br />Encapsulador: independencia de la solución<br />...<br />http://api.idescat.cat/indicadors.js?...<br />
  41. 41. HTML con Javascript<br />iframe + img<br />Contexto: aislado<br />Contexto: página de inserción<br />Javascript<br />Encapsulador: independencia de la solución<br />...<br />
  42. 42. HTML con Javascript<br />iframe + img<br />Contexto: aislado<br />Contexto: página de inserción<br />Javascript<br />Encapsulador: independencia de la solución<br />...<br />http://api.idescat.cat/indicadors/v1/dades.json?...&callback=ini<br />
  43. 43. HTML con Javascript<br />3<br />iframe + img<br />2<br />Javascript<br />1<br />...<br />
  44. 44. HTML con Javascript<br />3<br />iframe + img<br />2<br />Javascript<br />1<br />...<br />Separa bien las distintascaducidades<br />
  45. 45. HTML con Javascript<br />Cachécorta<br />3<br />iframe + img<br />2<br />Cachélarga<br />Javascript<br />1<br />Cachémuylarga<br />...<br />Separa bien las distintascaducidades<br />
  46. 46.
  47. 47. Una aplicación<br />
  48. 48. Nuestrositio web es un cliente<br />más de nuestrasAPIs<br />Una aplicación<br />
  49. 49. Nuestrositio web es un cliente<br />más de nuestrasAPIs<br />Una aplicación<br />Ventajas<br />
  50. 50. Nuestrositio web es un cliente<br />más de nuestrasAPIs<br />Una aplicación<br />Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />
  51. 51. Nuestrositio web es un cliente<br />más de nuestrasAPIs<br />Una aplicación<br />Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />Desarrollomásrápido<br />
  52. 52. Nuestrositio web es un cliente<br />más de nuestrasAPIs<br />Una aplicación<br />Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />Desarrollomásrápido<br />Transparencia e igualdad<br />
  53. 53. Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />Desarrollomásrápido<br />Transparencia e igualdad<br />
  54. 54. Desventajas<br />Mayor consumo de máquina<br />Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />Desarrollomásrápido<br />Transparencia e igualdad<br />
  55. 55. Desventajas<br />Mayor consumo de máquina<br />Ventajas<br />Separación entre la interfaz de datos y la interfaz de usuario<br />Desarrollomásrápido<br />Transparencia e igualdad<br />Gestión de cachésmássencilla<br />(caché de datos / caché de interfaz)<br />
  56. 56.
  57. 57.
  58. 58. Reutilización<br />
  59. 59. Reutilización<br />Maleabilidad<br />
  60. 60. Reutilización<br />Maleabilidad<br />Movilidad<br />
  61. 61. Reutilización<br />Maleabilidad<br />Movilidad<br />
  62. 62. Reutilización<br />Maleabilidad<br />Movilidad<br />
  63. 63. Reutilización<br />Maleabilidad<br />Movilidad<br />
  64. 64. Inversión de la iniciativa<br />de la comunicacón<br />Movilidad<br />
  65. 65. Inversión de la iniciativa<br />de la comunicacón<br />El Idescat va a dondeestánsususuarios<br />Movilidad<br />
  66. 66. En la WWW todoestá a 1 clic de distancia<br />
  67. 67. En la WWW todoestá a 1 clic de distancia<br />
  68. 68. En la WWW todoestá a 1 clic de distancia<br />¿Puederebajarse a 0 clics?<br />
  69. 69.
  70. 70.
  71. 71. via<br />
  72. 72.
  73. 73.
  74. 74.
  75. 75.
  76. 76. rich<br />
  77. 77. rich<br />
  78. 78. via<br />
  79. 79. Gracias<br />
  80. 80. International Solidarity Movement<br />North Carolina<br />Prizmatic<br />Michelle Kinsey Bruns<br />Lushbunny<br />

×