Visualizaciones de datos e informe realizados para los Equipamentos Culturales de Medellín. Realizado por: Juliana Hernandez Diaz Fernando Castro T
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

356 lines
26KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Datos Visuales SIP-EC</title>
  8. <!-- CSS -->
  9. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  10. <!-- jQuery Content Delivery Network -->
  11. <script src="https://code.jquery.com/jquery.js"></script>
  12. <script src="https://cdn.wordart.com/wordart.min.js" async defer></script>
  13. <!-- Java Script cdn -->
  14. <script src="js/d3.js" charset="utf-8"></script>
  15. <script src="js/d3.layout.cloud.js"></script>
  16. <script src="js/d3.wordcloud.js"></script>
  17. <script src="js/bitacorasmt.json"></script>
  18. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  19. <link href="css/datos_visuales.css" rel="stylesheet">
  20. <link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
  21. </head>
  22. <body data-spy="scroll" data-target=".navbar" data-offset="50">
  23. <!-- Static navbar -->
  24. <nav class="navbar navbar-default navbar-fixed-top">
  25. <div class="container">
  26. <div class="navbar-header">
  27. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  28. <span class="sr-only">Toggle navigation</span>
  29. <span class="icon-bar"></span>
  30. <span class="icon-bar"></span>
  31. <span class="icon-bar"></span>
  32. </button>
  33. </div>
  34. <div id="navbar" class="navbar-collapse collapse">
  35. <ul class="nav navbar-nav">
  36. <li class="active"><a href="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
  37. <li><a href="#datos">Datos Abiertos</a></li>
  38. <li><a href="#activaciones">Activaciones</a></li>
  39. <li><a href="#microtalleres">Microtalleres</a></li>
  40. <li><a href="#recursos">Recursos</a></li>
  41. </ul>
  42. </div><!--/.nav-collapse -->
  43. </div>
  44. </nav>
  45. <!--/sección Inicio o Home -->
  46. <section class="container-fluid" id="home">
  47. <div class="container">
  48. <img src="svg/infografia_inicial.png" class="img-responsive" alt="Infográfico inicial">
  49. <div class="row">
  50. <div class="col-sm-4">
  51. <div class="row">
  52. <div class="col-sm-10 col-sm-offset-2 text-center"><h3 class="text-intro">Activamos</h3><p class="p-intro">Promovemos la transparencia para motivar la participación en una cultura de acceso a la información pública y recirculación de los datos abiertos por actores interesados para generar valor.</p><span class="glyphicon glyphicon-search " aria-hidden="true"></span></div>
  53. </div>
  54. </div>
  55. <div class="col-sm-4 text-center">
  56. <div class="row">
  57. <div class="col-sm-10 col-sm-offset-1 text-center"><h3 class="text-intro">Creamos Memoria</h3><p class="p-intro">Impulsamos la conservación de memoria y el seguimiento de los procesos, desarrollando mayores y mejores mecanismos para captar el valor generado</p><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
  58. </div>
  59. </div>
  60. <div class="col-sm-4 text-center">
  61. <div class="row">
  62. <div class="col-sm-10 text-center"><h3 class="text-intro">Vinculamos</h3><p class="p-intro">Fortalecemos la participación de cada persona de manera efectiva y fomentamos la acción colectiva, consolidando así procesos de mayor impacto, más representativos y vinculantes.</p><span class="glyphicon glyphicon-stats" aria-hidden="true"></span></div>
  63. </div>
  64. </div>
  65. </div>
  66. </div><!--/row-->
  67. <p class="linea-texto">
  68. <span>Consolidado Equipamentos Culturales</span>
  69. </p>
  70. <div class="container">
  71. <div class="row">
  72. <!--/convenciones colores casa de cultura-->
  73. <div class="col-sm-6">
  74. <img class="img-responsive logo"src="https://casasdecultura.bibliolabs.cc/milfs/images/secure/?file=600/a12167d2f257539b33cd2ca3ac619f20.png" alt="logo-SIP-Equipamentos-Culturales">
  75. <p>* Los datos contenidos en las siguientes visualizaciones, son resultado de la
  76. información colectada, entregada, consolidada y procesada
  77. a través del SIP.</p>
  78. </div>
  79. <!--/convenciones colores casa de cultura-->
  80. <div class="col-sm-6">
  81. <p>Con el SIP buscamos mediante un modelo de manejo de <strong>Datos Abiertos</strong>, colectar datos de forma ágil para dar accesibilidad a todos los vinculados e interesados en los procesos de los equipamentos; se puede ver como un sistema para la creación de formularios que realmente se convierten en aplicaciones web y móbil que al manejar el ingreso de datos de manera semántica permite su posterior interpretación y procesamiento para generar gráficas, estadísticas, visualizaciones, adelantar reportes e informes, medir tendencias, comprender impacto, hacer seguimiento.</p>
  82. <p>
  83. Nuestra estrategia para la capturar de toda la información que generan los Equipamentos y almacenarla de manera estructurada, que permita articular cientos de hojas electrónicas y documentos desorganizados en un sistema de datos mediante un subsistema de importación que permite subir datos almacenados en un archivo CSV.</p>
  84. <div class="row">
  85. <div class="col-8 col-sm-6">
  86. <svg width="80" height="50">
  87. <rect x="50" y="20" width="80" height="50" style="fill:#FCB53E;" />
  88. Lo sentimos, su navegador no soporta svg en línea
  89. <svg width="80" height="50">
  90. <rect x="50" y="20" width="80" height="50" style="fill:#009CDE;" />
  91. Lo sentimos, su navegador no soporta svg en línea
  92. </svg>
  93. <span> Ávila</span></br>
  94. <svg width="80" height="50">
  95. <rect x="50" y="20" width="80" height="50" style="fill:#0096B3;" />
  96. Lo sentimos, su navegador no soporta svg en línea
  97. </svg>
  98. <span>Alcázares</span></br>
  99. <svg width="80" height="50">
  100. <rect x="50" y="20" width="80" height="50" style="fill:#733A8E;" />
  101. Lo sentimos, su navegador no soporta svg en línea
  102. </svg>
  103. <span>Las Estancias</span></br>
  104. <svg width="80" height="50">
  105. <rect x="50" y="20" width="80" height="50" style="fill:#CD0081;" />
  106. Lo sentimos, su navegador no soporta svg en línea
  107. </svg>
  108. <span>Manrique</span></br>
  109. <svg width="80" height="50">
  110. <rect x="50" y="20" width="80" height="50" style="fill:#E56D00;" />
  111. Lo sentimos, su navegador no soporta svg en línea
  112. </svg>
  113. <span>Pedregal</span></br>
  114. <svg width="80" height="50">
  115. <rect x="50" y="20" width="80" height="50" style="fill:#00803A;" />
  116. Lo sentimos, su navegador no soporta svg en línea
  117. </svg>
  118. <span>Popular</span></br>
  119. <svg width="80" height="50">
  120. <rect x="50" y="20" width="80" height="50" style="fill:#949494;" />
  121. Lo sentimos, su navegador no soporta svg en línea
  122. </svg>
  123. <span>Teatro Lido</span></br>
  124. </div>
  125. <div class="col-4 col-sm-6">
  126. <svg width="80" height="50">
  127. <rect x="50" y="20" width="80" height="50" style="fill:#FCB53E;" />
  128. Lo sentimos, su navegador no soporta svg en línea
  129. </svg>
  130. <span>UVA Sol de Oriente</span></br>
  131. <svg width="80" height="50">
  132. <rect x="50" y="20" width="80" height="50" style="fill:#2ECDDA;" />
  133. Lo sentimos, su navegador no soporta svg en línea
  134. </svg>
  135. <span>El Poblado</span></br>
  136. <svg width="80" height="50">
  137. <rect x="50" y="20" width="80" height="50" style="fill:#ED1C24 ;" />
  138. Lo sentimos, su navegador no soporta svg en línea
  139. </svg>
  140. <span>Los Colores</span></br>
  141. <svg width="80" height="50">
  142. <rect x="50" y="20" width="80" height="50" style="fill:#FCEE21 ;" />
  143. Lo sentimos, su navegador no soporta svg en línea
  144. </svg>
  145. <span>Teatro al Aire Libre Pedregal</span></br>
  146. <svg width="80" height="50">
  147. <rect x="50" y="20" width="80" height="50" style="fill:#D9E021;" />
  148. Lo sentimos, su navegador no soporta svg en línea
  149. </svg>
  150. <span>UVA Nuevo Occidente</span></br>
  151. <svg width="80" height="50">
  152. <rect x="50" y="20" width="80" height="50" style="fill:#C69C6D;" />
  153. Lo sentimos, su navegador no soporta svg en línea
  154. </svg>
  155. <span>UVA Sin Fronteras</span></br>
  156. <svg width="80" height="50">
  157. <rect x="50" y="20" width="80" height="50" style="fill:#FF7BAC;" />
  158. Lo sentimos, su navegador no soporta svg en línea
  159. </svg>
  160. <span>UVA El Paraiso</span>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </section>
  167. <section class="container-fluid" id="datos">
  168. <div class="container">
  169. <p class="linea-texto">
  170. <span>Estrategia de Datos Abiertos</span>
  171. </p>
  172. <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center">
  173. <p class="lead">El SIP busca la consolidación del Sistema de Monitoreo,Seguimiento Evaluación y Control SMEyC en una plataforma centralizada que permite la gestión de informes que al mismo tiempo facilita la entrega de instrumentos como la planilla resumen de actividades, sub, y demás instrumentos del sistema de calidad y a su vez entrega material versatil para las evaluaciones de escritorio a través de ficha de seguimiento, grupo focal y análisis de contenidos. </p>
  174. </div>
  175. <!-- Desplegables con formularios linkeados -->
  176. <div class="row">
  177. <div class="container">
  178. <div class="row col-sm-12 text-center ">
  179. <div class="col-xs-6 col-sm-3">
  180. <button type="button" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#propuesta">Proponemos <span class="glyphicon glyphicon-menu-down"></span></button>
  181. <div id="propuesta" class="active collapse in">
  182. <button type="button" class="btn btn-lg btn-warning btn-circle">1</button>
  183. <p>Todo comienza con la propuesta.</p>
  184. <h4>Objetivo: </h4>
  185. <p>
  186. Captar el valor, la motivación y capacidad de impacto de la propuesta
  187. </p>
  188. </div>
  189. </div>
  190. <div class="col-xs-6 col-sm-3">
  191. <button type="button" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#agenda">Agendamos <span class="glyphicon glyphicon-menu-down"></span></button>
  192. <div id="agenda" class="active collapse in">
  193. <button type="button" class="btn btn-lg btn-warning btn-circle">2</button>
  194. <p>Con la aprobación se programa el evento</p>
  195. <h4>Objetivo: </h4>
  196. <p>
  197. Calendario de eventos para divulgación y promoción en redes
  198. </p>
  199. </div>
  200. </div>
  201. <div class="col-xs-6 col-sm-3">
  202. <button type="button" class="btn btn-lg btn-info btn-servicios" data-toggle="collapse" data-target="#registro">Registramos <span class="glyphicon glyphicon-menu-down"></span></button>
  203. <div id="registro" class="active collapse in">
  204. <button type="button" class="btn btn-lg btn-warning btn-circle">3</button>
  205. <p>Con la realización del evento se crea el valor
  206. </p>
  207. <h4>Objetivo: </h4>
  208. <p>
  209. Consolidar el valor del evento a través de la bitácora
  210. </p>
  211. </div>
  212. </div>
  213. <div class="col-xs-6 col-sm-3">
  214. <button type="button" class="btn btn-lg btn-info btn-servicios" data-toggle="collapse" data-target="#evaluar">Evaluamos <span class="glyphicon glyphicon-menu-down"></span></button>
  215. <div id="evaluar" class="active collapse in">
  216. <button type="button" class="btn btn-lg btn-warning btn-circle">4</button>
  217. <p>El valor es recibido y la percepción se valida</p>
  218. <h4>Objetivo: </h4>
  219. <p>
  220. Captar la percepción de los usuarios y participantes como insumo para agregar más valor
  221. </p>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </section>
  229. <!--Sección Activaciones -->
  230. <section class="container-fluid" id="activaciones">
  231. <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center">
  232. <p class="linea-texto">
  233. <span>Visualicemos las Activaciones</span>
  234. </p>
  235. <p class="lead">Conozcamos cómo van las activaciones, herramienta indispensable de la gestión cultural de los equipamentos, identificate, observa, compara y concluye, lo más importante es encontrar elementos que nos permitan informarnos para tomar mejores acciones y mejores decisiones </p>
  236. <!-- <h1>Word Cloud</h1> -->
  237. <div id='nubeactivaciones'></div>
  238. <div style="width: 100%; height: 80%;" data-wordart-src="https://cdn.wordart.com/json/h1zzzt36dt3f" ></div>
  239. <!--Subtítulo Objetivos - Publicos - Disciplinas -->
  240. <p class="subtitulo">
  241. <span>Objetivos, Público & Disciplina</span>
  242. </p>
  243. <div>
  244. <p>Lo que queremos lograr mediante qué actividades y para qué público. Esta gráfica nos acompaña a comprender cómo se relacionan los públicos con las disciplinas culturales y como impacta esto los objetivos que queremos alcanzar. Ubícate y detalla cada hilo de conexión, indaga y saca tus conclusiones que te acompañen a proponer, transformar y mejorar</p>
  245. <img src="svg/Activaciones-Objetivos-Disciplinas.svg" style="display:inline-block;"class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
  246. <h6>Ilustración SIP3</h6>
  247. </div>
  248. <!--colapsible -->
  249. <div class="container text-left">
  250. <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click para leer análisis de la gráfica</button>
  251. <div id="demo" class="collapse">
  252. <p class="col-md-8 text-justify">
  253. La gráfica anterior, nos indica la relación entre 4 factores, Los equipamientos, La categoría en la que está inscrita la propuesta, con que disciplina se encuentra relacionada la activación y cual es el público objetivo, Para leer una gráfica, es indispensable hacer preguntas concretas, comenzando por las más abiertas por ejemplo, Cual es la categoría principal en que están inscritas las activaciones, y cual es la categoría que tiene menos eventos asociados. La categoría de sensibilización es la categoría que tienen mayores eventos asociados, le sigue fortalecimiento comunitario, fortalecimiento sociocultural y formación de públicos, esto significa que gran cantidad de los eventos tienen un enfoque de emplear la cultura como ente movilizador de conciencia sobre un aspecto determinado, en cuanto a la formación de públicos este item hace referencia a el trabajo que se realiza con los públicos para que estén en capacidad de participar, co-crear y consumir cultura.
  254. En cuanto a las categorías que tienen un número menor de eventos asociados, está la memoria y la formación, recordemos que estos eventos corresponden a las activaciones, esto lo que nos demuestra es que las activaciones se están enfocando en lo que efectivamente es su fuerte, activar. En cuanto a los públicos, el público joven tienen el protagonismo en las activaciones, en el puesto menor está la primera infancia, seguido por adultos mayores.
  255. Podemos hacer preguntas relacionadas con actividades más apoyadas a través de las activaciones, para este caso, la música y las plásticas son las disciplinas con mayor número de activaciones, el circo, la moda y la cultura digital están totalmente relegadas. Si debemos tomar una decisión sobre que tipo de actividades se deben apoyar, la cultura digital, el circo o la moda desde un enfoque cultural en la ciudad de Medellín tienen mucha coherencia con planes de gobierno y en general con un ecosistemas que abordado desde los equipamientos culturales y las activaciones tiene mucho que aportar a la ciudad. Vemos también como la categoría de Agricultura ha tomado protagonismo en el ultimo año, gracias a actividades relacionadas con huertas, mantenimiento de espacios verdes, siembra de arboles, etc, este espacio se posiciona con más fuerza cada vez debido también al contexto de contaminación que atraviesa la ciudad y la necesidad de una cultura ecológica.
  256. Al hacer preguntas más específicas, podemos observar que El EC CDC Pedregal tiene el mayor número de activaciones registradas, efectivamente una porción de estas actividades está enfocada en sensibilización cumpliendo con la media, pero así también en las otras áreas incluida memoria y formación, acompañamiento, proyección y gestión, para la única categoría que no presenta activaciones es para entretenimiento. Para entretenimiento, el equipamiento que tiene mayor protagonismo es el CDC Alcázares y por ejemplo el TAL Pedregal enfoca sus activaciones en Gestión, proyección y acompañamiento, el Teatro Lido, CDC Poblado, CDC Ávila, también aportan su cuota de entretenimiento, mientras UVA El Paraíso, CDC Popular, y CDC Pedregal son los únicos con aporte a la categoría de memoria.
  257. La categoría de memoria debe ser considerada de gran importancia en una reconstrucción tanto social, cómo cultural de los mismos equipamientos y de los habitantes y públicos de estos equipamientos, generar más activaciones en torno a memoria, y también importante generar archivo de estas activaciones de los hallazgos y de lo colectado para enriquecer el archivo de cada equipamiento cómo protector de memoria sociocultural.
  258. </p>
  259. </div>
  260. </div>
  261. <!--Subtítulo -->
  262. <p class="subtitulo">
  263. <span>Presupuesto</span>
  264. </p>
  265. <div>
  266. <p>Cada periódo invertimos mucha energía en desarrollar las activaciones; en esta gráfica puedes ver como se relaciona la inversión de presupuesto, con la cantidad de actividades realizadas por cada equipamento y el público potencial alcanzado </p>
  267. <img src="svg/PresupuestoParticipantesActivaciones.svg" style="display:inline-block;"class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
  268. </div>
  269. </div>
  270. </section>
  271. <!--Sección Microtalleres -->
  272. <section class="container-fluid" id="microtalleres">
  273. <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center">
  274. <p class="linea-texto">
  275. <span>Así van los Microtalleres</span>
  276. </p>
  277. <p class="lead">Con los Microtalleres vinculamos saberes de la comunidad, aprendizajes espóntaneos y preparados. Conoce la lectura del portal de Open Data del SIP de los Equipamentos y como ha sido el trabajo en torno a los Microtalleres</p>
  278. <!-- <h1>Word Cloud</h1> -->
  279. <div id='nubemicrotalleres'></div>
  280. <div style="width: 100%; height: 80%;" data-wordart-src="https://cdn.wordart.com/json/8wqa464050pr" ></div>
  281. <!--Subtítulo Presupuesto -->
  282. <p class="subtitulo">
  283. <span>Presupuesto</span>
  284. </p>
  285. <div class="row">
  286. <div class="col-md-7">
  287. <p>Cantidad de Microtalleres por Equipamento en relación al presupuesto y la cantidad de beneficiarios potenciales.</p>
  288. <img src="svg/Total-Presupuesto-microtalleres.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
  289. </div>
  290. <div class="col-md-5">
  291. <img src="svg/Presupuesto-Circulos_microtalleres.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
  292. </div>
  293. </div>
  294. <!--SubSección Género -->
  295. <p class="subtitulo">
  296. <span>Género</span>
  297. </p>
  298. <img style="display: inline-block !important;"src="svg/Hombres-Mujeres_microtalleres.svg" class="img-responsive float-right" alt="Relación de Público y Presupuesto Microtalleres">
  299. <!--Sub Sección Público Objetivo & Categorías -->
  300. <p class="subtitulo">
  301. <span>Público Objetivo & Categorías </span>
  302. </p>
  303. <img style="display: inline-block !important;"src="svg/Publicos-Disciplinas_microtalleres.svg" class="img-responsive float-right" alt="Relación de Público y Presupuesto Microtalleres">
  304. </div>
  305. </section>
  306. <!--Sección Recursos -->
  307. <section class="container-fluid" id="recursos">
  308. <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center">
  309. <p class="linea-texto">
  310. <span>Recursos</span>
  311. </p>
  312. <p class="lead">En esta sección encontrarás recursos resultado del proceso de recolección, análisis, minería y procesamiento de documentos para la extracción de datos que hacen posible estas visualizaciones. Así como los documentos relacionados con la estrategia que se propone para consolidar el SIP en los equipamentos culturales y con la comunidad.</p>
  313. <div class="text-left">
  314. <h3>Minería de datos desde los formatos de apoyo</h3>
  315. <p><a href="https://docs.google.com/spreadsheets/d/16zt9qzrbJaHJf5VbCIE3a4kzw3rO4erpsWz3KC7wL4A/edit?usp=sharing" class="text-danger" target="_blank">Consolidado de datos</a></p>
  316. <p><a href="https://docs.google.com/spreadsheets/d/1PE4XdRzhZMj5xT6vPG_q-SpiLtItQvPYdMN4LSUGAQo/edit?usp=sharing" class="text-danger" target="_blank">Set de datos insumo de las gráficas</a></p>
  317. <h3>Presentaciones en PDF, estratégia de implementación y adopción</h3>
  318. <p><a href="https://archive.org/download/1PresentacionDeResultados/1Presentacion_de_Resultados.pdf" target="_blank" class="text-success">Presentación final</a></p>
  319. <p><a href="https://archive.org/download/EquipamentosCulturas/Equipamentos_Culturas.pdf" class="text-success">Presentación inicial</a></p>
  320. <h3>Documentos de apoyo</h3>
  321. </div>
  322. </div>
  323. </section>
  324. <!-- <div style="width: 100%; height: 80%;">
  325. <div id='wordcloud'></div>
  326. <script>
  327. d3.wordcloud()
  328. .size([900, 600])
  329. .fill(d3.scale.ordinal().range(["#2099a7", "#a4cc39", "#e5842c", "#b80d6b"]))
  330. .words(words)
  331. .onwordclick(function(d, i) {
  332. if (d.href) { window.location = d.href; }
  333. })
  334. .start();
  335. </script>
  336. </div>
  337. </div> -->
  338. <!-- Bootstrap core JavaScript
  339. ================================================== -->
  340. <!-- Placed at the end of the document so the pages load faster -->
  341. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  342. <script src="../../dist/js/bootstrap.min.js"></script>
  343. <script src="../../assets/js/docs.min.js"></script>
  344. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  345. <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  346. <script src="scripts.js"></script>
  347. </body>
  348. </html>