index.html

---
layout: default
---

<!-- bloco politica hacker -->
  <a class="anchor" name="abertura"></a>
<div class="video">
  <video poster="../img/poster.jpg" width="100%" heigth="auto" controls>
    <source src="../vid/video-pedro.mp4" type="video/mp4">
    <source src="../vid/video-pedro.ogg" type="video/ogg">
</video></div>

<!-- bloco politica hacker -->
 
<h2 class="anchor1"> <a name="politicahacker"></a></h2>
  
  <h1>Política Hacker</h1>
  <div class="content">
    <img class="caixa1" src="../img/caixa1.png">
      <p class="texto1">

  A política é a maior tecnologia de transformação de realidade.<br>
  Fuçar-Aprender-Dominar-Transformar.<br> 
  A lógica hacker se baseia na apropriação profunda da técnica e na decodificação de um sistema para sua operação e transformação.  
  Compartilhar, dar acesso, descentralizar e evoluir são causa, meio e consequência.
  Hackear a Política é levar as lógicas e a ética hacker para este ambiente tão fechado, centralizado, obscuro. 
  As soluções residem na sociedade.
     </p>
    <img class="tira1" src="../img/tira1.png">
    <a class="carta" href="#"><span class="carta-clic">Leia aqui a</span><br>carta<br>aos<br>hackers</a>
</div>


<!-- bloco crenças e valores de mandato -->

<h2 class="anchor2"> <a name="valores"></a></h2>
<div class="content1">
  <h2 class="valor">Crenças e Valores</h2>
  <div class="icons-valor1"><img src="../img/valores/cultura1.png">
    <h3>Cultura Digital</h3>
    <p>Cada um dos 55 gabinetes da Câmara Municipal dispõe de R$ 143.563,67 mensais para pagamento de funcionários. Imagina se boa parte dessa grana fosse usada para custear criadores e desenvolvedores de apps cívicos que facilitem, tragam transparência e aumentem a participação da população no legislativo. A meta é produzir interfaces tão (constragedoramente) simples e eficientes que os outros gabinetes não tenham como se recusar a usar.</p>
  </div>
 
  <div class="icons-valor"><img src="../img/valores/transparencia2.png">
    <h3>Transparência</h3>
    <p>Jovens talentosos e curiosos, circulando diariamente pela câmara, com acesso e orientação sobre conteúdos, produzindo projetos autorais e livres. A residência hacker é, ao mesmo tempo, um programa de formação de hackers políticos e uma forma de produção de conteúdo livre sobre o legislativo. 3 programas de residência por ano, cada um com 4 jovens selecionados - 48 ao final do mandato. (se você se interessou e quer ser informado quando isso começar, cadastre-se)</p>
  </div>

  <br>
 
  <div class="icons-valor1"><img src="../img/valores/direitos3.png">
    <h3>Direitos Humanos</h3>
    <p>No dia a dia de um vereador (conhecido como despacho), discussões sobre os temas em votação, recebimento de representantes comunitários e articulações com vereadores e outras esferas do poder público acontecem, geralmente, à portas fechadas nos gabinetes. Levar este processo para espaços públicos é não apenas um processo de transparência, como também um processo de aproximação e educação política. Ao menos uma vez por mês, haverá despacho em algum espaço público ou escola.
</p>
  </div>

    <div class="icons-valor"><img src="../img/valores/participacao4.png">
    <h3>Participação Social</h3>
    <p>No dia a dia de um vereador (conhecido como despacho), discussões sobre os temas em votação, recebimento de representantes comunitários e articulações com vereadores e outras esferas do poder público acontecem, geralmente, à portas fechadas nos gabinetes. Levar este processo para espaços públicos é não apenas um processo de transparência, como também um processo de aproximação e educação política. Ao menos uma vez por mês, haverá despacho em algum espaço público ou escola.
</p>
  </div>
</div>

<!-- bloco tecnologias de mandato -->
<h2 class="anchor3"> <a name="tecnologias"></a></h2>
  <div class="content2">
  <h2>Tecnologias de Mandato</h2>
  <div class="icons-tec"><img src="../img/icons/caixa-tec-1.png">
    <h3>Laboratório de Apps</h3>
    <p>Cada um dos 55 gabinetes da Câmara Municipal dispõe de R$ 143.563,67 mensais para pagamento de funcionários. Imagina se boa parte dessa grana fosse usada para custear criadores e desenvolvedores de apps cívicos que facilitem, tragam transparência e aumentem a participação da população no legislativo. A meta é produzir interfaces tão (constragedoramente) simples e eficientes que os outros gabinetes não tenham como se recusar a usar.</p>
  </div>
 
  <div class="icons-tec"><img src="../img/icons/caixa-tec-2.png">
    <h3>Residência Hacker</h3>
    <p>Jovens talentosos e curiosos, circulando diariamente pela câmara, com acesso e orientação sobre conteúdos, produzindo projetos autorais e livres. A residência hacker é, ao mesmo tempo, um programa de formação de hackers políticos e uma forma de produção de conteúdo livre sobre o legislativo. 3 programas de residência por ano, cada um com 4 jovens selecionados - 48 ao final do mandato. (se você se interessou e quer ser informado quando isso começar, cadastre-se)</p>
  </div>
 
  <div class="icons-tec"><img src="../img/icons/caixa-tec-3.png">
    <h3>Despacho na Praça</h3>
    <p>No dia a dia de um vereador (conhecido como despacho), discussões sobre os temas em votação, recebimento de representantes comunitários e articulações com vereadores e outras esferas do poder público acontecem, geralmente, à portas fechadas nos gabinetes. Levar este processo para espaços públicos é não apenas um processo de transparência, como também um processo de aproximação e educação política. Ao menos uma vez por mês, haverá despacho em algum espaço público ou escola.
</p>
  </div>

  <br>

  <div class="icons-tec"><img src="../img/icons/caixa-tec-4.png">
    <h3>Relatoria Aberta</h3>
    <p>Nos diversos temas do trabalho legislativo, os vereadores precisam consultar especialistas para tomar suas posições. Este processo (como a maioria das práticas de gabinete) é feito de forma fechada e não transparente. No Gabinete Hacker esta consultoria será realizada com colaboradores temáticos da sociedade civil (coletivos, entidades engajadas e técnicos especialistas) que concordarem em fornecer um parecer público e embasado sobre as questões. 
    Um dos principais trabalhos do legislador é relatar projetos de lei - isto é, dar sua opinião 
</p>
  </div>
 
  <div class="icons-tec"><img src="../img/icons/caixa-tec-5.png">
    <h3>Voto justificado</h3>
    <p>Hoje, você até consegue saber COMO seu vereador votou. Mas geralmente nunca sabe o PORQUÊ. O Mandato Hacker entende como fundamental e tem como protocolo básico a justificativa pública dos votos feitos em comissão e nas plenárias, sejam eles nominais, simbólicos ou secretos.
</p>
  </div>
 
  <div class="icons-tec"><img src="../img/icons/caixa-tec-6.png">
    <h3>Ombudsman</h3>
    <p>O Ombudsman é uma figura que representa o cidadão dentro de governos e empresas. Com autonomia e independência, ele é responsável por ponderar interna e publicamente sobre os questionamentos das pessoas sobre o funcionamento, a transparência e as posições da determinada entidade. O Gabinete Hacker terá um ombudsman para garantir o processo de autocrítica e evolução ao longo dos 4 anos.</p>
  </div>
</div>

  <!-- Quem é o Markun -->
  <h2 class="anchor4"> <a name="quem"></a></h2>

  <div class="content3">
    <h2>Quem é o Markun?</h2>
    <p class="bio">Hacker que tem ideias doidas para mudar o mundo por meio da política. Só recebe ordens de duas pessoas: Maria e Tereza, suas filhas.</p>
    <div class="pedro"><img src="../img/foto-pedro.png"></div>

    <h3 class="title-vid">Galeria de vídeos</h3>

<!-- Videos -->

    <div class="vid thumb1"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>

    <div class="vid thumb2"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>

    <div class="vid thumb3"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>

    <div class="vid thumb4"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>

    <div class="vid thumb5"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>

    <div class="vid thumb6"><a href="#">
      <div class="hovertext">
        <p>blabla</p>
      </div>
    </a></div>


<!-- projetos -->

<h3 class="title-proj"> Projetos </h3>

<div class="proj thumb7"><a href="#">
      <div class="hovertext round">
        <p>Transparência Hacker</p>
      </div>
    </a></div>

    <div class="proj thumb8"><a href="#">
      <div class="hovertext round">
        <p>Labhacker</p>
      </div>
    </a></div>

    <div class="proj thumb9"><a href="#">
      <div class="hovertext round">
        <p>Ônibus Hacker</p>
      </div>
    </a></div>

    <div class="proj thumb10"><a href="#">
      <div class="hovertext round">
        <p>Quem Manda Aqui?</p>
      </div>
    </a></div>

    <div class="proj thumb11"><a href="#">
      <div class="hovertext round">
        <p>Jogo da Política</p>
      </div>
    </a></div>

    <div class="proj thumb12"><a href="#">
      <div class="hovertext round">
        <p>Lab Hacker Câmara dos Deputados</p>
      </div>
    </a></div>

        <div class="proj thumb13"><a href="#">
      <div class="hovertext round">
        <p>Fast Food da Política</p>
      </div>
    </a></div>

        <div class="proj thumb14"><a href="#">
      <div class="hovertext round">
        <p>Monitor Legislativo</p>
      </div>
    </a></div>
</div>
    <!-- Cola Junto -->
<h2 class="anchor5"> <a name="colajunto"></a></h2>
    <div class="colajunto">
      <p class="chamada">Quer colar junto com a gente, clica no botão e manda uma mensagem pra nóis!<br />
        <a class="input" href="medium.com" target="_blank" >Cola Junto</a></p>

  
    </div>