✨ About app (#56)

* Add About app with mkdocs

Signed-off-by: Matheus Fernandes <[email protected]>

* Add About app to settings

Signed-off-by: Matheus Fernandes <[email protected]>

* Fix layout bug

Signed-off-by: Matheus Fernandes <[email protected]>

* Fix about static directory

Signed-off-by: Matheus Fernandes <[email protected]>

.gitignore

@@ -108,4 +108,8 @@ node_modules/
 *.sqlite3
 
 # Redis
-dump.rdb
+dump.rdb
+
+# mkdocs
+src/apps/about/static/mkdocs_build
+src/apps/about/mkdocs.yml

Pipfile

@@ -1,17 +1,12 @@
 [[source]]
-
 url = "https://pypi.python.org/simple"
 verify_ssl = true
 name = "pypi"
 
-
 [dev-packages]
-
 ipdb = "*"
 
-
 [packages]
-
 django = "*"
 python-decouple = "*"
 django-compressor = "*"
@@ -32,8 +27,8 @@ lxml = "< 3.4.99"
 django-macros = "*"
 django-widget-tweaks = "*"
 pydiscourse = "*"
-
+mkdocs = "*"
+mkdocs-material = "*"
 
 [requires]
-
 python_version = "3.6"

src/apps/about/__init__.py

@@ -0,0 +1 @@
+default_app_config = 'apps.about.apps.AboutConfig'

src/apps/about/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AboutConfig(AppConfig):
+    name = 'apps.about'
+    verbose_name = 'Sobre'

src/apps/about/diazo.xml

@@ -0,0 +1,8 @@
+<rules
+    xmlns="http://namespaces.plone.org/diazo"
+    xmlns:css="http://namespaces.plone.org/diazo/css"
+    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <before css:theme-children="head" css:content-children="head" />
+    <after css:theme-children=".edem-content-wrapper" css:content-children="body" />
+    <merge attributes="class" css:theme="body" css:content="body" />
+</rules>

src/apps/about/management/commands/build_mkdocs.py

@@ -0,0 +1,31 @@
+from django.core.management.base import BaseCommand
+from django.template.loader import render_to_string
+from mkdocs.config import load_config
+from mkdocs.commands.build import build
+from apps import about
+import os
+
+
+class Command(BaseCommand):
+
+    def handle(self, *args, **options):
+        mkdocs_path = os.path.dirname(about.__file__)
+        filename = os.path.join(mkdocs_path, 'mkdocs.yml')
+        self.generate_config(mkdocs_path, filename)
+        self.build(filename)
+
+    def build(self, config_filename):
+        mkdocs_config = load_config(config_file=config_filename)
+        build(mkdocs_config)
+
+    def generate_config(self, mkdocs_path, filename):
+        rendered = render_to_string('mkdocs.yml', {
+            'mkdocs_dir': mkdocs_path,
+        })
+
+        with open(filename, 'w'):
+            # Clean file
+            pass
+
+        with open(filename, 'w') as config_file:
+            config_file.write(rendered)

src/apps/about/mkdocs_pages/audiencias.md

@@ -0,0 +1,20 @@
+# O que são Audiências Interativas?
+
+O objetivo das audiências públicas interativas é ampliar o alcance do debate das comissões promovendo interação com a sociedade. Por meio de vídeo-chat disponibilizado no Portal e-Democracia, qualquer cidadão tem a oportunidade de comentar, dar sugestões, fazer perguntas ou simplesmente assistir aos debates dos grandes temas nacionais realizados nas Comissões.
+
+
+## Audiência Pública Interativa
+
+Durante a discussão dos projetos de lei, as comissões temáticas da Câmara dos Deputados buscam cercar-se de informações úteis e qualificadas para a tomada de decisão. Um instrumento largamente utilizado para a consecução desse objetivo é a realização de audiências públicas, com especialistas no tema em questão.
+
+Contudo, tendo em vista limitações físicas e de segurança, os plenários das comissões não comportam um grande número de pessoas. Além disso, ainda que o espaço físico não fosse limitante à participação popular nestes eventos, sabe-se que outros fatores dificultariam a presença de um maior número de pessoas, como o alto custo de deslocamento para e hospedagem em Brasília.
+
+Por conta disso, o portal e-Democracia disponibiliza a ferramenta Audiência Pública Interativa, por meio da qual são transmitidas ao vivo as imagens e o áudio captados nos plenários das comissões, com a possibilidade de o cidadão acompanhar tudo o que ocorre na reunião. Além disso, os internautas podem ainda contribuir com perguntas e sugestões, que são lidas aos palestrantes pelo deputado que preside a reunião.
+
+Com o objetivo de facilitar essa interação, a nova versão da ferramenta Audiência Pública Interativa promoveu a separação dos ambiente de chat –  em que os internautas podem conversar livremente sobre o tema em discussão –, do setor de perguntas, no qual o cidadão inclui um questionamento que pretende seja feito às autoridade presentes fisicamente à audiência pública. Com isso, evita-se a necessidade de um moderador acompanhar exaustivamente o fluxo participativo a fim de identificar eventuais questionamento para, daí então, comunicá-lo à autoridade inquirida.
+
+Outra inovação dessa nova versão é o ranqueamento das perguntas feitas pelos cidadãos. Com isso, os próprios internautas podem votar nas perguntas por eles incluídas, organizando-as, eles próprios, por ordem de relevância.
+
+Também com o intuído de facilitar a interação do usuário com a ferramenta, mas, nesse caso no que se refere ao histórico da discussão, incluíram-se links para as respostas das autoridades no vídeo. Na imagem abaixo, é possível perceber um botão com a frase “respondido em” logo abaixo de cada pergunta ranqueada pelos usuários. Clicando nele, é mostrado no vídeo gravado e disponibilizado na interface, o trecho exato em que é dada a resposta ao questionamento. A tela abaixo representa essa dinâmica:
+
+![Ambiente de interação da ferramenta Audiência Pública Interativa](images/audiencias1.png)

src/apps/about/mkdocs_pages/expressao.md

@@ -0,0 +1,38 @@
+# O que é o Expressão?
+
+No Expressão os cidadãos têm liberdade para criar novas discussões sobre quaisquer temas. Os deputados podem interagir nesses debates por escrito, postando suas opiniões, bem como através de vídeos. É preciso acompanhar as discussões a fim de divulgar as threads buscando atrair a participação de outros cidadãos e também dos demais deputados interessados na temática.
+
+## Fóruns
+
+Os fóruns virtuais de discussão funcionam de maneira assíncrona: a qualquer momento o cidadão pode acessá-los, assenhorar-se do que já foi debatido até então e contribuir com sua opinião, através de texto, áudio ou vídeo. 
+Contudo, uma das principais dificuldades na construção de conhecimento em larga escala através de fóruns de debate online reside na dificuldade de controle sobre a pulverização da discussão. A chamada “fragmentação do debate” é promovida, principalmente, pelo comportamento dos usuários em criar vários tópicos de discussão com assuntos muito semelhantes, prática pode ser estimulada pelo design da ferramenta em que os fóruns virtuais estão ambientados . Essa questão assume especial relevância quando os temas debatidos se referem à agenda política e as discussões incluem as percepções de representantes eleitos pelos cidadãos , como é o caso do portal e-Democracia.
+
+Ciente dessa problemática, o Laboratório Hacker da Câmara dos Deputados lançou no ano de 2016 uma nova modalidade de Fóruns, desenvolvida com base na plataforma Discourse , solução gratuita e de código aberto, customizada para as especificidades do portal e-Democracia. Dentre as principais inovações, destacam-se as que se relacionam com o objetivo de minimizar os efeitos da já mencionada pulverização da discussão virtual:
+
+### Apresentação de tópicos de discussão segundo critérios de recenticidade e relevância
+
+A nova plataforma de interações por meio de fóruns do portal e-Democracia, denominada Expressão, inaugura a possibilidade de apresentação dos tópicos de discussão segundo outros critérios além da mera classificação por categorias – única possibilidade da ferramenta que vinha sendo até então utilizada no portal. Conforme exemplificado na imagem abaixo, tornou-se possível ao usuário identificar tópicos de discussão recentemente criados e também aqueles em que a discussão está mais movimentada. Essas novas opções contribuem para mitigar a disfunção pela qual o usuário do fórum tende a recriar novos tópicos para discutir assunto já em debate, por não perceber a preexistência de discussões mais antigas sobre o tema que ele tem em mente.
+
+![Listagem dos tópicos segundo o critério “relevância” na ferramenta Expressão](images/expressao1.png)
+
+### Orientações preliminares à criação de tópicos
+
+A possibilidade de interagir com o usuário enquanto este se utiliza da plataforma é uma das principais inovações trazidas pelo Expressão. Ao iniciar o procedimento de criação de um novo tópico, é apresentada ao usuário uma tela com orientações para a formatação do novo espaço discursivo pleiteado. Algumas delas dizem respeito à utilização de linguagem adequada (gentil, não agressiva), técnicas para comunicar bem o assunto em mente (título, frase inicial) e também sobre a importância de evitar-se a dispersão da discussão. 
+A primeira orientação dada pelo sistema é para que o usuário explore a lista de tópicos com o objetivo de averiguar se aquele tópico que se pretende criar não estaria já contemplado em alguma discussão preexiste. Na imagem a seguir, o quadro azul contém esse alerta:
+
+![Mensagem do Sistema orienta usuário sobre criação de tópicos de discussão](images/expressao2.png)
+
+### Sistema de notificação de semelhança com tópicos preexistentes
+
+Outra funcionalidade do Expressão é a identificação de semelhança entre textos de tópicos preexistentes e daquele que está sendo criado pelo usuário. Essa análise ocorre em tempo real e notifica o usuário sobre a possível correspondência, convidando-o a participar da discussão naqueles ambientes em que o debate já está em andamento. A imagem abaixo demonstra a interação proativa do sistema, que se dá por meio de mensagens pré-programadas:
+
+![Mensagem do sistema informa sobre identificação de tópico com temática semelhante](images/expressao3.png)
+
+### Dados das mensagens e possibilidades de interações simples
+
+Diante da narrativa participativa até aqui demonstrada, bem como tendo em vista a pujança do fluxo de interações ostentado pelo portal e-Democracia, o desenvolvimento da nova interface concebeu também possibilidades de interferências mais simples no debate por parte do usuário. 
+Isso porque, após ser notificado da pré-existência de discussões semelhantes a que o gostaria de iniciar, o cidadão poderia sentir-se desestimulado a dar sua contribuição, uma vez percebendo que sua opinião estaria contemplada naquilo que já houvesse sido escrito por outros participantes. 
+
+Desta forma, acrescentou-se para o internauta as possibilidades de “curtir”, “favoritar” e compartilhar os tópicos de discussão nas mídias sociais, inaugurando novas modalidades de interação com o conteúdo.  Esse tipo de interação contribui também para a ampliação da visibilidade do debate, fortalecendo-o ao invés de enfraquecê-lo, em contraposição à dinâmica observada na versão anterior do sistema, responsável pela dispersão das discussões virtuais do portal e-Democracia . Essas inovações estão representadas na imagem a seguir:
+
+![Opções de interações simples na ferramenta Expressão](images/expressao4.png)

src/apps/about/mkdocs_pages/index.md

@@ -0,0 +1,34 @@
+# Sobre o e-Democracia
+
+O portal e-Democracia da Câmara dos Deputados é um mecanismo múltiplo de participação, composto de variadas ferramentas. Significa dizer que são disponibilizadas diversas modalidades de interação, que podem ser utilizadas segundo o interesse, habilidade e motivação de cada cidadão.
+
+O principal objetivo da plataforma é aprimorar o relacionamento entre cidadãos e deputados, fortalecendo o princípio representativo, de modo a mitigar um dos mais importantes déficits democráticos apontados pela literatura, qual seja a sensação de distanciamento entre a sociedade e seus representantes, em especial os do poder legislativo. 
+
+Nesse sentido, o portal e-Democracia contribui para a busca por uma maior sintonia entre a opinião popular e a atuação dos parlamentares, dinâmica descrita no meio acadêmico pelo termo representação circular. 
+
+Além disso, objetiva-se contribuir com a ampliação da transparência no processo legislativo e com uma melhor compreensão, pela sociedade, da complexidade do trabalho legislativo .
+
+Criado em junho de 2009, o portal e-Democracia surgiu com o formato de projeto piloto, abrigando inicialmente duas discussões, organizadas em comunidades legislativas virtuais. Por meio dessas comunidades, foram discutidos com a sociedade dois projetos de lei específicos, que estavam em tramitação na Câmara dos Deputados: um sobre a política de mudança do clima e o outro sobre o estatuto da juventude.
+
+Ao longo do tempo, os resultados dessas discussões, bem como o expressivo interesse da sociedade em participar do ambiente instituído, levaram à criação de novas comunidades legislativas virtuais, sobre diversos temas. 
+
+Com isso, o portal deixou de ser um mero projeto piloto para institucionalizar-se através da Resolução 49/2013, que criou a Seção de Gestão do portal e-Democracia, no âmbito organizacional do Laboratório Hacker da Câmara dos Deputados, subordinado administrativamente à Diretoria Geral da Casa. 
+
+No ano de 2016 o portal e-Democracia passou por ampla reformulação, que deu origem ao site como ele é hoje. Contudo, ainda é possível acessar o antigo ambiente, que está mantido para fins de consulta do histórico das discussões produzidas até então.
+
+## Ferramentas de Participação
+
+O portal e-Democracia da Câmara dos Deputados abriga discussões temáticas sobre assuntos específicos em tramitação na Casa, bem como debates livres, criados pelos próprios usuários da plataforma.  
+
+A organização dessas discussões aconteciam originalmente no âmbito das chamadas Comunidades Legislativas Virtuais, criadas mediante demanda dos deputados (relator da matéria ou presidente de comissão parlamentar), sendo nesses espaços disponibilizadas variadas ferramentas de participação.
+
+A partir da mencionada reformulação do portal, levada a cabo ao longo do ano de 2016, o protagonismo do cidadão no ambiente participativo do portal e-Democracia passa a assumir um novo patamar de relevância. Uma das inovações, por exemplo, está em permitir, já na página inicial do site (home), a personalização da exibição dos conteúdos participativos da plataforma conforme os temas de preferência do Usuário. A tela abaixo representa essa dinâmica: 
+
+![Home (página inicial) do portal e-Democracia](images/edemocracia1.png)
+
+Conforme se observa, já no seu primeiro contato com o sistema o cidadão tem a possibilidade de redefinir as sugestões de oportunidades de participação ofertadas pela plataforma clicando no botão “selecione os temas de seu interesse”. 
+
+A partir dessa seleção, o portal promove uma “filtragem” dos conteúdos de todas as ferramentas de interação, com base nos parâmetros informados, facilitando a localização, pelo usuário, daquilo que é mais importante, segundo sua avaliação pessoal. 
+
+A ideia orientadora dessa nova modalidade de interface é personalizar o fluxo de informações que é apresentado ao cidadão, facilitando sua participação na plataforma. Essa abordagem substitui a “curadoria de conteúdos” até então feita pela equipe do portal e-Democracia, a quem cabia definir quais seriam os temas em destaques na página inicial do portal. Esse conceito está presente também na reformulação de cada um dos mecanismos de participação do site.
+A nova página inicial do portal e-Democracia, como visto, representa uma mudança de abordagem na apresentação dos conteúdos da plataforma, que deixam de ser organizados em Comunidades Legislativas, para serem apresentados em raias diferenciadas por modalidades de participação – ou ferramentas de participação. Nelas o cidadão pode interagir com os deputados e outros cidadãos através de fóruns de discussão, edição colaborativa de textos legislativos e questionamentos ao vivo, conforme se descreve a seguir.

src/apps/about/mkdocs_pages/stylesheets/extra.css

@@ -0,0 +1,13 @@
+.md-header {
+  background-color: #134836;
+}
+
+.md-icon--home {
+  display: none;
+}
+
+.md-nav--secondary {
+  -webkit-transition: border-left .25s;
+  transition: border-left .25s;
+  border-left: .4rem solid #e9c23a;
+}