<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery Content Delivery Network -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Java Script cdn -->
    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link href="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-->
        </section>
        
        <section class="container-fluid" id="datos">
          <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 navegador no soporta svg en línea
                    </svg>
                    <span>Popular</span></br>

                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#949494;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>Teatro Lido</span></br>
                  </div>
                  <div class="col-4 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>
                    <span>UVA Sol de Oriente</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#2ECDDA;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>El Poblado</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#ED1C24  ;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>Los Colores</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#FCEE21  ;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>Teatro al Aire Libre Pedregal</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#D9E021;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>UVA Nuevo Occidente</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#C69C6D;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>UVA Sin Fronteras</span></br>
                    <svg width="80" height="50">
                      <rect x="50" y="20" width="80" height="50" style="fill:#FF7BAC;" />
                      Lo sentimos, su navegador no soporta svg en línea
                    </svg>
                    <span>UVA El Paraiso</span>
                  </div>
                </div>
                
              </div>
            </div>
          </div>

        </section>

        <section>
          <div class="container">
            <p class="linea-texto">
              <span>Estrategia de Datos Abiertos</span>
            </p>
          </div>
            
            <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">
              
              
              <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>
            </div>
            <!-- Desplegables con formularios linkeados -->
            <div class="row">
              <div class="container">
                <div class="row col-sm-12  text-center ">
                  <div class="col-xs-6  col-sm-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>
                    <div id="propuesta" class="active collapse in">
                      <button type="button" class="btn btn-lg btn-warning btn-circle">1</button>
                      <p>Todo comienza con la propuesta.</p>
                      <h4>Objetivo: </h4>
                      <p>
                        Captar el valor, la motivación y capacidad de impacto de la propuesta
                      </p>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <button type="button" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#agenda">Agendamos <span class="glyphicon glyphicon-menu-down"></span></button>
                    <div id="agenda" class="collapse">
                      <button type="button" class="btn btn-lg btn-warning btn-circle">2</button>
                      <p>Con la aprobación se programa el evento</p>
                      <h4>Objetivo: </h4>
                      <p>
                        Calendario de eventos para divulgación y promoción en redes
                      </p>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <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>
                    <div id="registro" class="collapse">
                      <button type="button" class="btn btn-lg btn-warning btn-circle">3</button>
                      <p>Con la realización del evento se crea el valor
                      </p>
                      <h4>Objetivo: </h4>
                      <p>
                        Consolidar el valor del evento a través de la bitácora
                      </p>
                    </div>
                  </div>
                  <div class="col-xs-6  col-sm-3">
                    <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>
                    <div id="evaluar" class="collapse">
                      <button type="button" class="btn btn-lg btn-warning btn-circle">4</button>
                      <p>El valor es recibido y la percepción se valida</p>
                      <h4>Objetivo: </h4>
                      <p>
                        Captar la percepción de los usuarios y participantes como insumo para agregar más valor
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>


          <!--Sección Activaciones  -->
          <section class="container-fluid" id="activaciones">
            <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">
              <p class="linea-texto">
                <span>Visualicemos las Activaciones</span>
              </p>
              
              <p class="lead">Lectura a través del portal de Open Data del SIP, de entrega periódica de visualizaciones estadísticas detalladas de la gestión de las Activaciones por equipamentos y consolidado de datos significativos  </p>

                <div>
                  <p>Cantidad de Activaciones por equipamento en relación al presupuesto y la cantidad de beneficiarios potenciales.</p>
                  <img src="svg/PresupuestoParticipantesActivaciones.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
                </div>

              </div>

            </div>
          </section >

<!--Sección Microtalleres  -->
          <section class="container-fluid" id="microtalleres">
            <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">
              <p class="linea-texto">
                <span>Así van los Microtalleres</span>
              </p>
              
              <p class="lead">Lectura del portal de Open Data del SIP, de entrega periódica de visualizaciones estadísticas detalladas de la gestión de los Microtalleres por equipamentos y consolidado de datos significativos</p>
<!--Subtítulo Presupuesto  -->
              <p class="subtitulo">
                <span>Presupuesto</span>
              </p>

              <div class="row">
                <div class="col-md-7">
                  <p>Cantidad de Microtalleres por Equipamento en relación al presupuesto y la cantidad de beneficiarios potenciales.</p>
                  <img src="svg/Total-Presupuesto-microtalleres.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
                </div>
                <div class="col-md-5">
                  <img src="svg/Presupuesto-Circulos_microtalleres.svg" class="img-responsive" alt="Relación de Público y Presupuesto Microtalleres">
                  <p>* La falta de registro de datos, así como registros faltantes de beneficiarios potenciales, afectan el resultado de la visualización. </p>
                </div>

              </div>
<!--Sección Género  -->
              <p class="subtitulo">
                <span>Género</span>
              </p>

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

<!--Sección Público Objetivo & Categorías   -->
<p class="subtitulo">
                <span>Público Objetivo & Categorías </span>
              </p>

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

          </section >


          
          <!-- Bootstrap core JavaScript
          ================================================== -->
          <!-- Placed at the end of the document so the pages load faster -->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
          <script src="../../dist/js/bootstrap.min.js"></script>
          <script src="../../assets/js/docs.min.js"></script>
          <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
          <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
          <script src="scripts.js"></script>
        </body>
      </html>