Responsive

This commit is contained in:
kleper 2017-11-26 15:47:40 -05:00
parent d33895f604
commit 25488d25d7
4 changed files with 1134 additions and 61 deletions

125
.index.html.~350f4a89 Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datos Visuales SIP-EC</title>
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery Content Delivery Network -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.wordart.com/wordart.min.js" async defer></script>
<!-- Java Script cdn -->
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/d3.layout.cloud.js"></script>
<script src="js/d3.wordcloud.js"></script>
<script src="js/bitacorasmt.json"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/datos_visuales.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
<li><a href="#datos">Datos Abiertos</a></li>
<li><a href="#activaciones">Activaciones</a></li>
<li><a href="#microtalleres">Microtalleres</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contexto<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#mecanismos">Mecanismos</a></li>
<li><a href="#herramientas">Herramientas</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--/sección Inicio o Home -->
<section class="container-fluid" id="home">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 text-center"><h3>Activamos</h3><p>Promovemos la Transparencia para propiciar el establecimiento de una cultura de acceso a la información pública y de reutilización de los datos abiertos.</p><span class="glyphicon glyphicon-search " aria-hidden="true"></span></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center"><h3>Creamos Memoria</h3><p>Impulsamos la conservación de memoria y el seguimiento de los procesos, desarrollando mayores y mejores mecanismos que prioricen el interés colectivo.</p><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 text-center"><h3>Vinculamos</h3><p>Fortalecemos la participación ciudadana 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>
</div>
</div>
</div>
</div><!--/row-->
<p class="linea-texto">
<span>Consolidado Equipamentos Culturales</span>
</p>
<div class="container">
<div class="row">
<!--/convenciones colores casa de cultura-->
<div class="col-sm-6">
<img class="img-responsive logo"src="https://casasdecultura.bibliolabs.cc/milfs/images/secure/?file=600/a12167d2f257539b33cd2ca3ac619f20.png" alt="logo-SIP-Equipamentos-Culturales">
<p>* Los datos contenidos en las siguientes visualizaciones, son resultado de la
información colectada, entregada, consolidada y procesada
a través del SIP.</p>
</div>
<!--/convenciones colores casa de cultura-->
<div class="col-sm-6">
<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>
<p>
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>
<div class="row">
<div class="col-8 col-sm-6">
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#FCB53E;" />
Lo sentimos, su navegador no soporta svg en línea
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#009CDE;" />
Lo sentimos, su navegador no soporta svg en línea
</svg>
<span> Ávila</span></br>
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#0096B3;" />
Lo sentimos, su navegador no soporta svg en línea
</svg>
<span>Alcázares</span></br>
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#733A8E;" />
Lo sentimos, su navegador no soporta svg en línea
</svg>
<span>Las Estancias</span></br>
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#CD0081;" />
Lo sentimos, su navegador no soporta svg en línea
</svg>
<span>Manrique</span></br>
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#E56D00;" />
Lo sentimos, su navegador no soporta svg en línea
</svg>
<span>Pedregal</span></br>
<svg width="80" height="50">
<rect x="50" y="20" width="80" height="50" style="fill:#00803A;" />
Lo sentimos, su n

View File

@ -100,6 +100,7 @@ padding: 20px 40px;
section { section {
padding-top: 100px;
margin-top: 50px; margin-top: 50px;
margin-bottom: 80px; margin-bottom: 80px;
} }
@ -114,7 +115,7 @@ section {
.logo{ .logo{
margin-bottom: 80px; margin-bottom: 80px;
margin-top: 50px; margin-top: 50px;
max-width: 531px max-width: 80%;
} }
.collapse{ .collapse{

View File

@ -72,9 +72,7 @@
</div> </div>
</div> </div>
</div><!--/row--> </div><!--/row-->
</section>
<section class="container-fluid" id="datos">
<p class="linea-texto"> <p class="linea-texto">
<span>Consolidado Equipamentos Culturales</span> <span>Consolidado Equipamentos Culturales</span>
</p> </p>
@ -176,7 +174,7 @@
</div> </div>
</div> </div>
</section> </section>
<section> <section class="container-fluid" id="datos">
<div class="container"> <div class="container">
<p class="linea-texto"> <p class="linea-texto">
<span>Estrategia de Datos Abiertos</span> <span>Estrategia de Datos Abiertos</span>
@ -191,7 +189,7 @@
<div class="row"> <div class="row">
<div class="container"> <div class="container">
<div class="row col-sm-12 text-center "> <div class="row col-sm-12 text-center ">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-md-3">
<button type="button" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#propuesta">Proponemos <span class="glyphicon glyphicon-menu-down"></span></button> <button type="button" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#propuesta">Proponemos <span class="glyphicon glyphicon-menu-down"></span></button>
<div id="propuesta" class="active collapse in"> <div id="propuesta" class="active collapse in">
<button type="button" class="btn btn-lg btn-warning btn-circle">1</button> <button type="button" class="btn btn-lg btn-warning btn-circle">1</button>
@ -251,15 +249,25 @@
<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 decisiones </p> <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 decisiones </p>
<!-- <h1>Word Cloud</h1> --> <!-- <h1>Word Cloud</h1> -->
<div id='nubeactivaciones'></div> <div id='nubeactivaciones'></div>
<div style="width: 1000px; height: 800px;" data-wordart-src="https://cdn.wordart.com/json/h1zzzt36dt3f" ></div> <div style="width: 100%; height: 80%;" data-wordart-src="https://cdn.wordart.com/json/h1zzzt36dt3f" ></div>
<!--Subtítulo Presupuesto --> <!--Subtítulo Objetivos - Publicos - Disciplinas -->
<p class="subtitulo">
<span>Objetivos, Público & Disciplina</span>
</p>
<div>
<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>
<img src="svg/Activaciones-Objetivos-Disciplinas.svg" style="display:inline-block;"class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
</div>
<!--Subtítulo -->
<p class="subtitulo"> <p class="subtitulo">
<span>Presupuesto</span> <span>Presupuesto</span>
</p> </p>
<div> <div>
<p>Cantidad de Activaciones por equipamento en relación al presupuesto y la cantidad de beneficiarios potenciales.</p> <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>
<img src="svg/PresupuestoParticipantesActivaciones.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres"> <img src="svg/PresupuestoParticipantesActivaciones.svg" style="display:inline-block;"class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
</div> </div>
</div> </div>
</div> </div>
@ -271,10 +279,10 @@
<span>Así van los Microtalleres</span> <span>Así van los Microtalleres</span>
</p> </p>
<p class="lead">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> <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>
<!-- <h1>Word Cloud</h1> --> <!-- <h1>Word Cloud</h1> -->
<div id='nubemicrotalleres'></div> <div id='nubemicrotalleres'></div>
<div style="width: 1000px; height: 800px;" data-wordart-src="https://cdn.wordart.com/json/8wqa464050pr" ></div> <div style="width: 100%; height: 80%;" data-wordart-src="https://cdn.wordart.com/json/8wqa464050pr" ></div>
<!--Subtítulo Presupuesto --> <!--Subtítulo Presupuesto -->
<p class="subtitulo"> <p class="subtitulo">
<span>Presupuesto</span> <span>Presupuesto</span>
@ -301,7 +309,8 @@
<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"> <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">
<div id='wordcloud'></div> <!-- <div style="width: 100%; height: 80%;">
<div id='wordcloud'></div>
<script> <script>
d3.wordcloud() d3.wordcloud()
.size([900, 600]) .size([900, 600])
@ -312,7 +321,8 @@
}) })
.start(); .start();
</script> </script>
</div> </div>
</div> -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 36 KiB