Design e implementação da nova interface gráfica do website institucional para a SETIF 2023

Resumo

O Artigo 217 da Constituição Brasileira [Brasil 2023] estabelece que “as universidades gozam de autonomia didático-científica, administrativa e de gestão financeira e patrimonial, e obedecerão ao princípio de indissociabilidade entre ensino, pesquisa e extensão”. Com o intuito de alcançar parte desse objetivo, os acadêmicos precisam cumprir atividades extracurriculares durante sua formação. Geralmente as universidades oferecem semanas de eventos para a comunidade acadêmica, onde os estudantes podem participar de atividades para compor essa carga horária extra.

As semanas de eventos se referem ao conjunto de dias destinados à realização de atividades que integram estudantes com objetivos acadêmicos. Durante esse período, são realizadas mesas-redondas, rodas de conversas, workshops, minicursos, oficinas, entre outras atividades. Essas atividades costumam estar relacionadas ao cotidiano escolar dos estudantes e podem variar de acordo com o tipo de formação, seja superior ou técnica, sendo diretamente relacionadas ao curso realizado.

No IFPR (Instituto Federal do Paraná) - Campus Paranavaí acontecem duas semanas de eventos, uma delas é a SETIF (Semana da Tecnologia da Informação do IFPR - Campus Paranavaí), que está em sua 10ª edição. Durante o evento são realizadas diversas apresentações de trabalhos, projetos, minicursos, palestras e competições, que visam integrar estudantes, professores e convidados. Durante os dias de evento são compartilhadas informações, experiências e conhecimento sobre tópicos específicos. Para melhor divulgar as atividades, geralmente as semanas de eventos contam com sites que centralizam as informações, além das publicações nas redes sociais.

Com a SETIF não é diferente, entretanto, seu site apresentava uma interface gráfica simples, não contemplando padrões focados em oferecer uma melhor experiência ao usuário, principalmente o público mais jovem (principais visitantes). Isso torna o acesso a algumas informações mais difícil, devido à comunicação não ser direcionada a esse público. Diante disso, percebeu-se uma necessidade de torná-lo mais atrativo e alinhado com os padrões observados nos sites mais visitados. Sendo assim, o objetivo geral deste trabalho é a atualização do site para a divulgação da SETIF - 2023, visando atualizar e melhorar a interface gráfica e manutenibilidade do código-fonte produzido.

A partir disso, objetivos específicos foram determinados, sendo eles: analisar e especificar os requisitos funcionais, não funcionais e de domínio; pesquisar sobre a estrutura de sites comumente visitados para usar como inspiração para o desenvolvimento; elaborar o protótipo da nova interface gráfica; identificar as falhas do site atual; descobrir formas de otimizá-lo e tornar a interface mais agradável; elaborar os diagramas de casos de uso e de classes; verificar a compatibilidade com dispositivos móveis (responsividade); versionar o código escrito; e, validar e implantar em ambiente de produção.

Este trabalho iniciou pela análise e especificação dos requisitos, incluindo a criação dos diagramas de classes e casos de uso, ambos da UML (Unified Modeling Language) [OMG 2023]. Em seguida, a interface gráfica do site foi prototipada utilizando o aplicativo Canva [Canva 2023], organizando os tópicos e informações. Paralelamente, foram realizadas buscas para identificar padrões de interface nos sites mais visitados no Brasil [Similarweb 2023]. Na sequência, a codificação foi iniciada aplicando as especificações.

No desenvolvimento deste trabalho, adotamos uma metodologia baseada nas metodologias ágeis [Sommerville 2019], que envolveu reuniões em equipe. Durante essas reuniões, discutimos as tarefas a serem realizadas, o progresso alcançado até o momento e as necessidades de atualização. Além disso, analisamos o que já estava concluído e avaliamos se havia oportunidades de aprimoramento. O Git [Chacon and Straub 2014] foi utilizado para controle de versões do código, que está disponibilizado no GitHub institucional do IFPR - Campus Paranavaí [Goes et al. 2023].

Para auxiliar na construção da interface gráfica foi utilizado o framework Bootstrap 5.0.2 [Bootstrap 2023]. Esse framework possui um conjunto de componentes gráficos e auxilia na gerência da responsividade. A linguagem de programação utilizada foi a PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) devido ao servidor previamente contratado para hospedagem fornecer suporte a ele. Também foram utilizadas a linguagem de marcação HTML (Hypertext Markup Language), a de estilização CSS (Cascading Style Sheets) e a SQL (Structured Query Language) para manipulação do banco de dados MySQL.

A estrutura interna do projeto foi organizada seguindo o MVC (Modelo-Visão-Controlador). O MVC é um padrão arquitetural que divide o sistema em três camadas segundo as suas funções. Sendo que o componente Modelo gerencia os dados do sistema e as operações a eles associadas. A Visão define e gerencia como os dados são apresentados ao usuário. O Controlador gerencia a interação do usuário e passa essas interações para Visão e Modelo [Sommerville 2019, p. 155].

Para o mapeamento entre o banco de dados e a aplicação (PHP) foi utilizado o padrão de projeto Data Access Object (DAO). O padrão DAO permite que os mecanismos de acesso a dados mudem independentemente do código que utiliza os dados [Oracle 2023], visto que encapsula o acesso ao banco de dados e fornece uma interface para que as outras camadas da aplicação possam se comunicar com ele. Além disso, a modelagem física do banco de dados foi idealizada para ser utilizada em versões futuras do site, sem ser necessário iniciar uma nova implementação a cada atualização, reduzindo e tornando mais prático o trabalho de novos desenvolvedores.

No total, foram desenvolvidas cinco páginas. A página “Apresentação” traz informações gerais sobre o evento, tais como sua descrição, a programação e localização. “Normas de Publicação” fornece detalhes sobre a submissão de artigos, incluindo diretrizes, exemplos e redirecionamento para o sistema de submissão. Em “Anais do Evento” e “Fotos” pode-se encontrar os artigos publicados e as fotos, respectivamente, separados por ano de publicação. Em “Corpo Editorial” estão os nomes dos colaboradores do evento. Além disso, na barra de navegação, há um item para acesso à edição anterior da SETIF. O site desenvolvido encontra-se em ambiente de produção [IFPR 2023].

Após a hospedagem do site no servidor Web, foi realizada uma pesquisa anônima com estudantes e servidores do IFPR - Campus Paranavaí com o objetivo de comparar a versão antiga do site com a desenvolvida por este trabalho. Ao todo, 70 participantes responderam o formulário. Desses, 86% preferiram a versão apresentada por este trabalho. Destaca-se que 42,9% dos participantes acessaram pelo navegador do celular e 57,1% pelo do computador. Entre outras perguntas, foi solicitado que os participantes, opcionalmente, enviassem um feedback para futuros aprimoramentos, o que resultou em um feedback positivo em relação ao nosso objetivo perante o site.

Por meio da pesquisa realizada sugere-se que o site passou a ter uma interface mais agradável, atrativa e dinâmica para o público, facilitando o acesso às informações do evento. Além disso, espera-se que as melhorias na estrutura interna, código-fonte e banco de dados possam melhorar o funcionamento do site e facilitar evoluções futuras. Futuras atualizações no site foram facilitadas, visto que o administrador poderá atualizar as informações sem precisar interferir no código-fonte, sendo apenas necessário substituir as informações no banco de dados.

Como trabalhos futuros pretende-se realizar a implementação de uma área administrativa para que a manipulação não seja feita diretamente no banco de dados. Além disso, na página de anais do evento precisam ser adicionadas funcionalidades de filtro e aprimorar os metadados de indexação do Google Scholar.