Para este sistema, uma categorização híbrida e multidimensional foi definida. A definição destas categorias busca abranger todo o escopo relativo a bacia Taquari-Antas em função das necessidades do usuário e da caracterização temática assertiva dos dados e informações, evitando heterogeneidades e ambiguidades incompatíveis. São três categorias a serem utilizadas na nova interface, apresentadas abaixo:
1. Tema – refere-se aos módulos de dados, inerente a temática das informações que o sistema aborda, sendo os itens Clima, Fauna e Qualidade da água. Esta categoria já era utilizada antes e representa a hierarquia de classes dos controladores;
2. Objetivo – refere-se aos objetivos principais que o sistema propõe ao usuário, de forma que os dados e informações sejam explorados em mais dimensões, sendo os itens Monitoramento, SIA Educativo e Gestão de dados;
3. Público-alvo – refere-se aos níveis de usuário, já implementados na versão antiga.
A novidade na nova interface é a categoria Objetivo (Figura 10). Se bem representada pelos outros sistemas da AI, pode promover uma visão mais clara do contexto e da função do sistema, de como o usuário pode utilizá-la e como ele pode planejar sua navegação. Quando associadas a categoria Tema e Objetivo, a interface fornece dois caminhos diferentes para alcançar as informações desejadas e podem promover conteúdos que antes estavam distantes do usuário.
Figura 10: Páginas organizadas em função da categoria Objetivo
Fonte: O autor
Caso o usuário queira analisar os relatórios sobre as condições ambientais da bacia Taquari-Antas utilizando gráficos, tabelas e mapas, deve seguir a navegação pela seção Monitoramento.
Caso tenha o interesse de conhecer os índices implementados, metodologias de análise e coleta de dados monitorados, acessar ferramentas educativas ou publicações relacionadas, deve seguir pela seção Educativo.
A seção Gestão dos Dados é seguida pelos usuários que têm o interesse de solicitar dados ou efetuar o envio, inserção e manutenção de dados (métodos CRUD), atividades normalmente associadas a quem utiliza o SIA como ferramenta de trabalho.
É importante destacar que os níveis de usuário mantêm-se implementados, limitando o acesso às páginas restritas para usuários sem a devida permissão. Em alguns casos, os links para as páginas restritas são ocultos, e em outros, o link fica ativo, levando o usuário a uma página indicando a restrição. Mesmo assim, esta organização favorece o entendimento para usuários de nível público sobre as atividades de usuários de outras categorias, por meio dos conceitos que os rótulos de atividades restritas trazem, como Gestão de Dados.
5.2 SISTEMA DE NAVEGAÇÃO
Neste sistema podemos observar a categorização definida na prática por meio de elementos visuais de navegação presentes em todas as páginas do SIA, que compõem o layout geral, e também componentes de navegação pelas páginas, como o mapa ou menus.
A implementação das categorias definidas para o sistema de organização influiu no sistema de navegação da interface, sendo necessário a modificação de arquivos de código HTML, CSS e javascript relacionados ao layout geral. Também foram modificados os métodos gerarAba, responsáveis pela lista de links existentes na navegação local (descrita abaixo). Este método é declarado no controlador primário do sistema e reescrito nos controladores primários de cada módulo.
Estes elementos estão listados a seguir:
1. A página inicial do sistema possui a função de contextualizar o usuário e apresentar as principais funções disponíveis a ele. Assim como na interface anterior, é exibido o componente de mapa para navegação pelo espaço geográfico da área de estudo, representando o item Monitoramento, da categoria Objetivo. Neste mapa, o usuário pode acessar diversas dimensões de dados do sistema por meio dos dados geográficos apresentados, levando aos relatórios de monitoramento que o sistema gera;
2. O logo do SIA mantém-se na mesma posição que antes e continua redirecionando a página inicial, mas foi atualizado esteticamente, com a retirada dos degradés existentes antes que promoviam uma impressão de profundidade;
3. O slogan do sistema “Sistema de Informações Ambientais da Bacia Taquari-Antas” agora é utilizado logo acima do rodapé do SIA, possibilitando uma rápida identificação do tema do site;
4. A navegação global, que antes utilizava dos elementos da categoria Tema (qualidade da água, clima e fauna), utilizam agora a categoria Objetivo. Apresentada no cabeçalho de todas as páginas, a navegação global apresenta links para as páginas de navegação rápida Gestão de dados e SIA Educativo;
5. As páginas de navegação rápida Gestão de dados e SIA Educativo, acessíveis pela navegação global, foram implementadas para fornecer acesso a um agrupamento de links, aqui categorizados em função dos temas, disponibilizando aos usuários de qualquer nível uma amostra das atividades que o sistema exerce, mesmo que o usuário não esteja logado;
6. Junto a navegação global, encontram-se os menus Usuário e Acessibilidade;
7. A barra de navegação lateral apresenta-se posicionada na mesma posição que a da interface anterior, à esquerda na tela, ao lado do conteúdo da página. Ela pode ser oculta da interface para que a visualização do conteúdo utilize 100% da largura da página. Dentro desta barra, estão contidos o menu de navegação local e o subsistema de navegação local, utilizando-se da característica multilocação, ou seja, mais de um componente no mesmo local;
8. A navegação local existe somente quando em profundidade em relação a hierarquia dos controladores, sendo variável em relação ao módulo de elemento ambiental (categoria Tema), apresentando links relativos e organizados em função da categoria Tarefa. Ela também pode ser utilizada de acordo com a atividade, como o mapa inicial, que mostra nele a legenda do mapa;
9. O subsistema de navegação global exibe uma lista de links de conteúdos mais amplos, como a página Sobre o Sistema e Bacia Taquari-Antas, e surge aberto ao usuário que se encontra em superfície de navegação, mas utiliza de um efeito de exibir/esconder acionado pelo usuário, sendo então, acessível em todas as páginas.
5.3 SISTEMA DE ROTULAÇÃO
Para a nova interface foi definida uma nova paleta de cores. As cores selecionadas foram escolhidas com relação a temática meio ambiente, sendo elas exibidas na Figura 11.
A cor cinza (de código RGB #738290), próxima a um azul marinho, lembra, assim como no ícone do mapa, os barramentos, normalmente cinzas pela cor do cimento e também
das formações rochosas, que acompanham os cursos de rios por toda bacia. Esta cor é utilizada nas barras que dividem o cabeçalho e rodapé do corpo da página e nas páginas de navegação rápida.
A cor verde (de código RGB #529A5B) lembra a natureza, as matas da região e a vida contida nelas. Presente no logotipo do SIA, nos mapas de satélite e na barra da navegação Sobre o Sistema.
A cor azul (de código RGB #65A6D1) remete as águas, recurso natural mais importante para a sociedade e essencial como objetivos da gestão ambiental. Esta cor é utilizada nos links.
A cor azul claro (de código RGB #D9EDF7) lembra o ar, a cor do céu e lembra o elemento clima. Ela é utilizada como cor base da barra de navegação lateral e também em textos com o fundo cinza.
O branco (de código RGB #FFFFFF) é utilizado como cor de fundo do sistema, base para que as outras possam interagir e formar uma interface agradável para leitura e estudos.
Os ícones utilizados são da biblioteca Glyphicons11, disponíveis gratuitamente quando associados a biblioteca Bootstrap, utilizada neste trabalho. Quando presentes, indicam uma ação que o usuário pode tomar. Aparecem junto a links e em recursos dinâmicos da interface.
5.4 RESULTADO
Para o desenvolvimento desta proposta, foram utilizados alguns softwares, que normalmente compõem o ambiente de trabalho dos programadores. Para a escrita do código- fonte foi utilizado o Ambiente de Desenvolvimento Integrado (IDE) Netbeans12 e para versionamento foi utilizada a ferramenta GIT13. Para executar a aplicação SIA em modo de
11 Disponível no endereço: http://glyphicons.com/
12 Disponível no endereço: https://netbeans.org/
13 Disponível no endereço: https://git-scm.com/
desenvolvimento, foi configurado um VirtualHost em um servidor Apache214. Para constantes avaliações e testes da aplicação durante o desenvolvimento foi utilizado o navegador web Firefox15, que possui ferramentas de auxílio ao desenvolvimento de códigos de lado cliente, especialmente a ferramenta para visualização em modo responsivo.
A figura 12 mostra o cruzamento entre as categorias Objetivo e Tema e em qual dimensão do sistema cada uma ficou implementada. A categoria Objetivo reside especificamente na interface, enquanto a categoria Tema representa a estrutura lógica, no lado servidor do SIA. Nesta figura apresenta-se a relação entre o controlador primário e os secundários do sistema, e seus métodos relacionados diretamente com a interface, como o método gerarAba, que define a navegação local, a lista de links relacionados ao módulo de dados que são, agora, organizados quanto aos objetivos. É importante salientar que o item Monitoramento da categoria Objetivo não possui um rótulo como os outros na página inicial (Figura 13), pois a própria página inicial a representa, sendo o mapa o recurso de acesso aos relatórios de monitoramento.
Em relação as intervenções no lado cliente, continuam sendo utilizadas as ferramentas atuais de exibição de informações, ou seja, a utilização do Openlayers para os 14 Disponível no endereço: https://httpd.apache.org/
15 Disponível no endereço: https://www.mozilla.org/pt-BR/firefox/
mapas, do C3.js para os gráficos e do JQgrid para as tabelas. O framework Bootstrap foi adotado com o objetivo de suprir as necessidades de renovação do design do sistema e principalmente de controle das dimensões do layout das páginas (responsividade), tendo em vista o acesso ao sistema por meio de dispositivos móveis. O resultado obtido é exibido na Figura 13.
Além dos diferentes recursos visuais e de interações disponíveis, a característica mais importante do Bootstrap é sua capacidade de adaptar o design de um website para dispositivos de diferentes resoluções ou dimensões de tela. Este é o chamado sistema de grids, que divide verticalmente a tela em 12 colunas de mesmo tamanho. Assim, os elementos HTML podem ser configurados para ocupar uma quantia determinada destas colunas de quatro formas diferentes, dependendo do dispositivo utilizado.
Na figura 13 é visível que o cabeçalho e o rodapé não dividem espaço horizontalmente com outros elementos. Já no corpo da página, o conteúdo divide espaço com a barra de navegação lateral, à esquerda, assim como na versão antiga, mas agora com a função de exibir/ocultar a barra lateral, possibilitando que o conteúdo seja exibido com a total largura da página. Considerando a utilização de diferentes dispositivos, são necessárias diferentes configurações para assegurar uma visualização completa da interface. Abaixo estão as três configurações determinadas para diferentes larguras de tela:
1. Para dispositivos de dimensões maiores de 992 pixels, 25% da tela é ocupada pela barra de navegação lateral e 75% para o conteúdo da página;
2. Para dispositivos de dimensões entre 768 e 992 pixels, 33.3% da tela é ocupada pela barra de navegação lateral e 66,6% para o conteúdo da página;
3. Para dispositivos de dimensões iguais ou menores que 768 pixels, o corpo da página mostra somente a barra de navegação lateral ou somente o conteúdo. Além disso, o cabeçalho e o rodapé comprimem-se automaticamente, para que nenhum elemento se sobreponha sobre outro.
Na figura 14 é exibida a página inicial adaptada a um dispositivo com resolução 360x640 pixels. Ela foi dividida em três partes para observar de uma só vez como a interface se comporta. A navegação global é convertida em um menu, que surge ao clicar no botão localizado ao lado do logotipo. A barra de navegação lateral, quando ativa, ocupa toda a área da tela. No rodapé, os logos das empresas envolvidas ocupam espaços iguais, sem problemas de sobreposição.
A Tabela 2 traz as soluções das limitações apontadas por Lorenzzetti (2013) no seu trabalho de conclusão de especialização, que analisou as atuais interfaces do sistema SIA. Na
primeira coluna é feita a referência ao item solucionado da Tabela 1 e sua solução na coluna 2. Esta análise foi considerada nesta pesquisa e serviu para complementar a reformulação proposta para o SIA.
Tabela 2 – Limitações indicadas por Lorenzetti (2013) solucionadas Limitação Solução
1 O texto “Olá visitante”, ou “Olá usuário” para usuários logados, foi oculto da página inicial, possibilitando a expansão do mapa e eliminando uma informação não-associada a área temática.
2 As atualizações do sistema continuam acessíveis em todas as páginas do sistema, mas foram posicionadas em uma área de menor destaque, dentro do subsistema de navegação global, descrito no Item 9 da seção 5.3.
3 O link “Informar erro” que ficava presente acima do conteúdo de todas as páginas do sistema, acompanhado por um ícone de inconformidade, foi deslocado para a navegação local do módulo Usuário e também para o menu do usuário da barra de navegação global, no topo da página, sendo agora categorizado como uma atividade do usuário. Agora acompanha um ícone de um megafone, indicando importância aos erros a serem avisados. O termo “Entre em contato” não foi utilizado pois o sistema já prevê outras formas de contato entre usuário e administração do sistema, como a solicitação de dados brutos, e sua utilização poderia gerar ambiguidade entre os rótulos das atividades.
4 O ícone da função “Sair do sistema”, antes representado por um cadeado foi substituído por um ícone Gliphycon apropriado a função de logout.
5 O termo “ logar” foi substituído por “Entrar no sistema”.
Diante dos resultados apresentados, podemos observar que todos apresentam-se na camada de lado cliente. Mas nem todas as modificações foram feitas nesta camada. Além de modificações de códigos CSS e Javascript, foram feitas modificações no lado servidor, nos templates Smarty16 que formatam a estrutura HTML das páginas e nos métodos gerarAba dos controladores, aplicando a categorização exibida na barra de navegação lateral. Em consequência desta categorização, também foram realocados alguns controladores para outros módulos do sistema, organizando-os de acordo com o contexto adequado.
6 CONSIDERAÇÕES FINAIS
Os primeiros sinais da necessidade de uma atualização na interface surgiram quando foram propostos a integração de novos elementos ambientais ao SIA. O Instituto de Saneamento Ambiental, sob posse de dados de monitoramento de sedimentos de recursos hídricos e também de dados de produção animal da região, vislumbrou o relacionamento destes dados com os dados de qualidade da água, fauna e clima no SIA como estratégia de promoção do sistema como ferramenta de gestão ambiental. Uma proposta que era inviável com a interface antiga, visto que, encontrava-se rígida quanto a inserção de novos elementos ambientais.
Além disso, diversos conteúdos do sistema eram pouco explorados, como os dados de espécies da região da bacia, resultante do monitoramento ambiental dos empreendimentos hidrelétricos, são vistas como uma importante ferramenta para promover o conhecimento da ecologia regional.
Sendo os três objetivos fundamentais do SIA, ou tarefas, agora representados pelos rótulos Monitoramento (aparecendo como o mapa principal e relatórios de monitoramento), SIA Educativo e Gestão dos Dados planejados no desenvolvimento deste trabalho, categorizam todas as funcionalidades, ou tarefas do sistema. Apresentadas já na página inicial, oferecem ao usuário uma visão ampla da utilidade do sistema.
O agrupamento destas funcionalidades nestas categorias, proporciona que o layout geral e a navegação seja estável quanto a adição de elementos ambientais ao sistema, possibilitando sua expansão. Além disso, proporciona uma redução considerável da entropia da informação, antes presente principalmente nos menus de navegação local, que não possuíam uma categorização padrão.
O SIA possui como temática de estudo o meio ambiente da região da bacia Taquari- Antas. Com a interface proposta, o usuário que busca uma informação precisa possui uma categoria a mais para alcançar seus objetivos, possibilitando que páginas que antes exigiam uma navegação em profundidade possam emergir para a superfície, contribuindo com o aspecto findability, ou “encontrabilidade” do SIA.
Conforme Levy (2000), existem duas atitudes opostas de navegação do usuário, a navegação por caçada, quando ele está buscando informações precisas, e a navegação por pilhagem, quando o usuário está vagamente interessado no assunto, a ponto de desviar-se de acordo com o momento. Neste formato da interface, as duas atitudes opostas são favorecidas,
sendo o mapa da página inicial convidativo à pilhagem e sendo capaz de proporcionar o acesso a diversas dimensões, visto que é um recurso interativo e robusto. E para os usuários que buscam informações precisas, podem seguir pelos recursos de navegação, rotulados pelo tema abordado ou pelo objetivo do usuário.
Estes fundamentos foram abordados a fim de responder a questão de pesquisa feita na Introdução: Quais adequações devem ser desenvolvidas na interface gráfica e arquitetura do SIA a fim de melhorar a apresentação e localização das informações? Em resposta, este trabalho apresenta uma nova interface que amplia a flexibilidade do SIA, possibilitando a ampliação e o acoplamento de novos módulos de dados ao sistema. A nova categoria Objetivo contribui com o a noção de contexto durante a navegação sem impactar na apresentação do tema, mantendo sua arquitetura lógica orientada aos elementos ambientais. Além disso, utiliza de tecnologias de lado cliente mais atuais, proporcionando o acesso por dispositivos móveis.
Uma avaliação desta nova interface é conveniente como trabalho futuro, coletando dados com os usuários do SIA que confirmem que os ajustes na categorização trarão os resultados esperados com a atualização feita.
De qualquer forma, a próxima grande funcionalidade será incorporar um novo módulo ao sistema, o Tema Produção Animal, onde será possível avaliar os impactos decorrentes desta atividade na qualidade da água, clima e fauna da região da bacia Taquari- Antas.
Espera-se que este trabalho sirva como orientação para futuras implementações na interface do sistema, até que seus objetivos principais sejam aprimorados novamente.
7 REFERÊNCIAS BIBLIOGRÁFICAS
BARBIERI, Carlos. BI-business intelligence: modelagem e tecnologia. Axcel Books, 2001.
BENYON, David. Interação humano-computador. 2.ed. São Paulo: Pearson Prentice Hall, 2011.
BIGOLIN, Marcio et al. Desenvolvimento de Software para cálculo de Índice da Qualidade da Água (IQA). In: CONGRESSO INTERNACIONAL DE TECNOLOGIAS PARA O MEIO AMBIENTE, 1., 2008, Bento Gonçalves. Anais... . Bento Gonçalves: Ucs, 2008. p. 1 - 8. Disponível em: <https://siambiental.ucs.br/congresso/index.php/anais/trabalhosTecnicos? ano=2008>. Acesso em: 3 maio 2017.
CAMARA, G.; QUEIROZ, G. R. de. Arquitetura de Sistemas de Informação Geográfica. São José dos Campos: INPE, 2001.
CAMARGO, M. U. de Carvalho e. Os Sistemas de Informações Geográficas (S.I.G.) como instrumento de gestão em saneamento. Rio de Janeiro: Associação Brasileira de Engenharia Sanitária e Ambiental, 1997.
COLAÇO, Methanias. Projetando Sistemas de Apoio à Decisão Baseados Em Data Warehouse. Axcel Books, 2004.
CONSELHO NACIONAL DO MEIO AMBIENTE. 357: RESOLUÇÃO N º357. Brasília:
Diário Oficial da União, 2005. Disponível em:
<http://www.mma.gov.br/port/conama/res/res05/res35705.pdf>. Acesso em: 30 maio 2017. ELMASRI, Ramez; NAVATHE, Shamkant B.. Sistemas de banco de dados. 4.ed. São Paulo: Addison-Wesley, 2005. 724 p. ISBN 8588639173.
FEPAM. Fundação Estadual de Proteção Ambiental Henrique Luiz Rossler. Disponível em: http://www.fepam.rs.gov.br/. Acessado em: 14 mar. 2017.
FERREIRA, Simone Bacellar Leal; NUNES, Ricardo Rodrigues. E-Usabilidade. Rio de Janeiro: Ltc - Livros Técnicos e Científicos Editora S.a., 2008.
ISAM. SIA Hidrelétricas. Disponível em: <https://siambiental.ucs.br>. Acesso em: 14 mar. 2017.
INTERNATIONAL ORGANIZATION FOR STANDARDIZATION. International Eletrotechnical Comission (ISO / IEC). Norma No 9241. Ergonomic requirements for office work with visual display terminals part 11: guidance on usability. [S. l.], 1998.
ISO (1997). ISO 9241-11: Ergonomic requirements for office work with visual display terminals (VDTs). Part 11 — Guidelines for specifying and measuring usability. Gènève: International Organisation for Standardisation.
JITKOFF, Nicholas. Design is never done. 2016. Disponível em: <https://design.google.com/articles/design-is-never-done/>. Acesso em: 18 maio 2017.
KIMBALL, Ralph; ROSS, Margy. The data warehouse toolkit: guia completo para modelagem dimensional. Rio de Janeiro, RJ: Campus, 2002. 494 p. ISBN 8535211292.
LARMAN, Craig. Utilizando UML e padrões: uma introdução à análise e ao projeto orientados a objetos e ao desenvolvimento interativo. 3.ed. Porto Alegre: Bookman, 2007. 695 p. ISBN 8560031528.
LORENZZETTI, Priscila da Silva. Proposta de melhoria em um sistema de informações ambientais aplicando teorias de design de interação. 2013. 57 f. Monografia