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

9,432 views
9,675 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,432
On SlideShare
0
From Embeds
0
Number of Embeds
6,343
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />

×