Implementação do Front-end

Finalizada a criação dos modelos no back-end, o front-end pôde ser imple- mentado. Os itens definidos na análise de requisitos funcionais foram, em sua maioria, contemplados no front-end através da criação de funções em Javascript e CSS. O desenho da plataforma foi elaborado seguindo uma orientação minimalista, atendendo ao requi- sito não funcional de Desempenho. O uso de HTML5 como linguagem de construção dos templates permitiu satisfazer o requisito Compatibilidade, uma vez que esta linguagem é aceita na grande maioria dos browsers atuais. Além disso, o design foi desenvolvido em três diferentes tamanhos de tela (padrões desktop, tablet e smartphone), graças ao uso de CSS, permitindo o atendimento do requisito de Portabilidade.

A Figura 9 apresenta a página de login da Ágora. Uma vez acessada, o browser do usuário armazena um cookie que o permite acessá-la posteriormente sem a necessidade de um novo login, satisfazendo o requisito RF016.

Figura 9 – Página de login da Ágora.

Uma vez autenticado, o usuário é encaminhado para a página inicial, mostrada na Figura 10, a qual contém todas as consultas abertas. Além do tema, a página tam- bém informa a etapa em que se encontra. Na parte superior, é possível notar uma barra em vermelho que irá acompanhar o usuário em todas as páginas que navegar. A partir desta barra, é possível acessar a página do projeto e-Ágora4, a página de configurações (ícone ferramenta) e ícone para sair da plataforma (símbolo de logout). Esta última fun- cionalidade atende ao requisito RF015, enquanto esta página inicial atende ao requisito RF007.

Selecionado o tema de que deseja participar, o usuário é encaminhado para a consulta. Em cada etapa, o usuário irá interagir com diferentes elementos da Ágora. Para exemplificar, a Figura 11 apresenta o header da página da Etapa 1. Os demais objetos, como artigos, debates, questões e propostas, aparecem imediatamente abaixo em uma disposição semelhante a uma timeline, e exibidos segundo as definições do requisito RF012. No topo do header é possível observar uma linha contendo os números de 1 a 5, sinalizando a etapa atual da consulta e possibilitando ao usuário consultar os resultados das etapas anteriores, atendendo ao requisito RF011.

Capítulo 4. Projeto e-Ágora: a Ágora e a Metodologia da Ação Comunicativa 101

Figura 10 – Página inicial da Ágora contendo as consultas abertas.

A Figura 12 exemplifica um objeto do tipo “Questão”. A imagem retrata uma pergunta dissertativa em que o usuário deve escrever livremente no espaço apropriado. Ao enviar sua resposta, a questão imediatamente some da sua timeline e um aviso de “resposta enviada” aparece sem que haja necessidade de carregar novamente a página. Responder questões de forma dinâmica atende ao requisito RF002 e eliminar a questão já respondida da timeline do usuário atende ao requisito RF013.

A Figura 13 exemplifica um objeto do tipo “Artigo”. Artigos são utilizados para que o administrador possa publicar informações úteis para o usuário. No exemplo da Figura 13, o artigo apresenta algumas informações sobre o processo de consulta da opinião pública e suas etapas.

A Figura 14 exemplifica um objeto do tipo “Debate”. Um debate é uma thread de comentários e réplicas sobre um assunto determinado pelo administrador. Cada usuário pode fazer apenas um único comentário por debate e uma única replica por comentário de outro usuário. Caso deseje alterar o que foi escrito, o ícone “lápis” permite editar seu comentário/réplica e o ícone “lixeira” permite excluir o conteúdo. Estas funcionalidades satisfazem os requisitos RF003 e RF004.

A Figura 15 apresenta um objeto do tipo “Relatório”. Relatórios são pequenos documentos contendo o resultado de alguma questão, exibida em forma de gráfico, ou

Figura 11 – Header da página da Etapa 1.

resultados mais gerais em formato de texto. No exemplo, o relatório é composto por um gráfico do tipo rosca.

Além dos elementos apresentados, a Ágora possui uma página de configuração em que o usuário pode personalizar seus dados públicos, como indicar um apelido que gostaria de ser identificado nos debates (neste caso, no debate, o apelido aparece entre parênteses ao lado do nome completo, uma vez que o anonimato não é permitido) ou alterar a foto do seu avatar. Além disso, também poderá alterar o e-mail em que deseja receber notificações. A página Configurações atende ao requisito RF006 e está ilustrada na Figura 16.

Por fim, um último elemento implementado e que satisfaz o requisito RF005, é a página “Meu Espaço”. Para acessá-la, o usuário deve clicar em um botão que fica fixo na tela no lado inferior esquerdo e escolher que tipo de feedback deseja fornecer: sugerir um artigo, questão, debate ou outro. O feedback enviado é visível unicamente ao administrador, o qual deve providenciar uma resposta adequada para o usuário. A Figura 17 mostra o botão e um dos quadros de sugestão do usuário.

Capítulo 4. Projeto e-Ágora: a Ágora e a Metodologia da Ação Comunicativa 103

Figura 12 – Exemplo de um objeto tipo “Questão”.

Figura 13 – Exemplo de um objeto tipo “Artigo”.

informal com um pequeno grupo de 15 pessoas. Ao término destes testes, a plataforma foi disponibilizada no endereço https://agora.dca.fee.unicamp.br.

Desta forma, finaliza-se a descrição do desenvolvimento da Ágora. No próximo tópico, será apresentada a Metodologia da Ação Comunicativa, uma proposta de pro- tocolo de uso da Ágora para a construção da opinião pública segundo a teoria da ação

Figura 14 – Exemplo de um objeto tipo “Debate”.

comunicativa.