DESENVOLVIMENTO DE UMA APLICAÇÃO WEB PARA CADASTRO E PROCURA DE PONTOS DE COLETA SELETIVA

Ciências Exatas e da Terra, Volume 29 – Edição 141/DEZ 2024 / 18/12/2024

DEVELOPMENT OF A WEB APPLICATION FOR REGISTRATION AND SEARCH OF SELECTIVE COLLECTION POINTS

REGISTRO DOI: 10.69849/revistaft/ma10202412180852

Aguinaldo Santolin Júnior1
Felipe Diniz Dallilo2
Fabiana Florian3

 Resumo: O presente trabalho descreve o desenvolvimento de uma aplicação web voltada para o cadastro e a busca de pontos de coleta seletiva. A proposta visa facilitar o acesso a informações sobre locais de descarte de materiais recicláveis e estimular práticas sustentáveis, utilizando o CMS WordPress e plugins auxiliares como Elementor, Advanced Custom Fields, Filter Everything, One Click Accessibility e LiteSpeed Cache. A metodologia adotada incluiu pesquisa bibliográfica e descritiva, bem como a implementação técnica seguindo critérios de usabilidade, acessibilidade, performance e design responsivo. Os testes realizados confirmaram que a aplicação web desenvolvida se mostrou tecnicamente funcional e eficaz, para assim poder atender aos objetivos de facilitar a localização de pontos de coleta seletiva e conscientizar a população sobre a importância da preservação ambiental.

Palavras-chave: Aplicação web. Coleta seletiva. Sustentabilidade. WordPress. Usabilidade.

Abstract: The present work describes the development of a web application aimed at registering and searching for selective collection points. The proposal seeks to facilitate access to information about locations for disposing of recyclable materials and promote sustainable practices, using the WordPress CMS and auxiliary plugins such as Elementor, Advanced Custom Fields, Filter Everything, One Click Accessibility, and LiteSpeed Cache. The adopted methodology included bibliographic and descriptive research, as well as technical implementation following usability, accessibility, performance, and responsive design criteria. The tests carried out confirmed that the developed web application proved to be technically functional and effective, thus meeting the objectives of facilitating the location of selective collection points and raising public awareness about the importance of environmental preservation.

Keywords: Web application. Selective collection. Sustainability. WordPress. Usability.

1 INTRODUÇÃO

A tecnologia tem avançado a passos largos e, com isso, estamos acostumados a ver diversas soluções que chegam para facilitar o nosso dia a dia, como aplicações para facilitar o transporte, pedido de alimentos, entre outras. Entretanto, apesar dessa crescente digitalização, ainda existem desafios significativos relacionados à conscientização e à preservação do meio ambiente. Um dos maiores obstáculos é a dificuldade que muitas pessoas têm em adotar práticas adequadas de descarte de resíduos recicláveis. A falta de informações claras sobre o que pode ser reciclado, como separar os resíduos e, especialmente, onde encontrá-los pontos de descarte apropriados, são fatores que contribuem para essa dificuldade. Além disso, muitas vezes, a justificativa é a rotina corrida e a falta de tempo para se engajar nesse processo.

Em um cenário como este, a tecnologia surge como uma poderosa ferramenta para promover a conscientização e ações voltadas à preservação ambiental. Segundo Marchiorato (2018), a tecnologia tem o potencial de transformar a maneira como compreendemos e agimos em relação à natureza, e, mesmo que ainda não tenhamos uma plena consciência ambiental, é possível que, no futuro, a tecnologia desempenhe um papel crucial na educação e na conscientização ambiental.

Diante disso, esse trabalho tem como objetivo o desenvolvimento de uma aplicação web para cadastro e procura de pontos de coleta seletiva, que deve oferecer de forma eficaz as funcionalidades, tanto como um usuário que deseja procurar um ponto em seu município para poder descartar seus resíduos recicláveis, quanto um usuário que deseja cadastrar um ponto, podendo também, obter informações sobre quais materiais podem e não podem ser reciclados, contendo uma ideia de mostrar que pode ser uma aplicação tecnicamente funcional para facilitar e auxiliar na conscientização da sociedade para colaborar com esse assunto importante para a manutenção do meio ambiente.

Este trabalho descreve o desenvolvimento de uma aplicação web voltada para o cadastro e a localização de pontos de coleta seletiva. A aplicação foi construída com base em técnicas de avaliação de usabilidade, acessibilidade, performance e design, utilizando as tecnologias web PHP e o CMS WordPress, com auxílio de alguns plugins disponíveis em seu repositório oficial. O desenvolvimento seguiu métodos de pesquisa bibliográfica, que orientaram a escolha das ferramentas e práticas, e descritiva, que permitiu documentar detalhadamente as etapas do processo e os resultados obtidos.

A justificativa de ter escolhido o referido tema para o Trabalho de Conclusão de Curso (TCC) se dá pela relevância do mesmo, por se tratar de um assunto bastante importante no mundo que, através dessa proposta, pode estimular, facilitar e conscientizar as pessoas a fazerem a sua parte.

2 REVISÃO BIBLIOGRÁFICA 

2.1 A TECNOLOGIA NA CONSCIENTIZAÇÃO DA EDUCAÇÃO AMBIENTAL NO BRASIL

No Brasil, mais especificamente na década de 90, a preocupação com o meio ambiente entrou em pauta no governo federal, que desenvolveu um conjunto de medidas para orientar a sociedade a respeito da necessidade da aplicação de uma educação ambiental como política pública de conscientização visando, sobretudo, a conscientização, conservação e sustentabilidade.

A lei 9.795 de 1999 instituiu, regulamentou a educação ambiental e definiu como deveria ser trabalhada e incentivada pelo poder público, assim como instituí a Política Nacional de Educação Ambiental. Logo no primeiro artigo dela temos a educação ambiental definida da seguinte forma:

Entendem-se por educação ambiental os processos por meio dos quais o indivíduo e a coletividade constroem valores sociais, conhecimentos, habilidades, atitudes e competências voltadas para a conservação do meio ambiente, bem de uso comum do povo, essencial à sadia qualidade de vida e sua sustentabilidade. (Brasil, 1999).

A tecnologia é um ponto que pode ser muito bem explorado e utilizado hoje na questão da conscientização da educação ambiental, da manutenção do meio ambiente.

Para se promover uma educação ambiental de qualidade tem de passar uma reflexão positiva sobre a evolução da tecnologia, tem de buscar negociar o progresso da tecnologia e a preservação da natureza. (Marchiorato, 2018).

A coleta seletiva é um dos programas de grande importância na gestão de resíduos e colaboração para o bem do meio ambiente. É uma forma de contribuição para que todo cidadão, seja ele de qualquer parte do mundo ou influência econômica, assuma efetivamente seu papel na relação com a coletividade e com a sustentabilidade.

Diante da crescente necessidade de conscientização ambiental e da dificuldade que muitas pessoas enfrentam em adotar práticas corretas de descarte de resíduos recicláveis, uma aplicação web voltada para o cadastro e a busca de pontos de coleta seletiva pode se mostrar uma ferramenta essencial. A eficiência dessa proposta reside na sua capacidade de fornecer, de maneira simples e acessível, informações vitais sobre os locais adequados para o descarte, promovendo a educação ambiental e facilitando a participação ativa da sociedade. Através dessa plataforma, é possível estimular a mudança de comportamento, oferecendo um meio prático e intuitivo para que os cidadãos contribuem com a preservação do meio ambiente, além de promover a disseminação de conhecimento sobre os materiais que podem e não podem ser reciclados. Essa solução digital, ao alavancar a tecnologia, não apenas auxilia na logística do descarte, mas também potencializa a conscientização pública sobre a importância da sustentabilidade.

2.2 LINGUAGEM PHP

PHP, originalmente uma abreviação de Personal Home Page e atualmente conhecido como PHP: Hypertext Preprocessor, teve suas origens como um conjunto de binários CGI (Common Gateway Interface) escritos em linguagem C, desenvolvido por Rasmus Lerdorf e lançado em 1995. Em 1997, iniciou-se o processo de transformação dessa ferramenta, que passou de uma solução CGI para uma linguagem de programação mais robusta e eficiente. Essa evolução culminou no lançamento do PHP 3.0 em 1998, a primeira versão que se aproxima da linguagem que conhecemos hoje. (PHP, 2024).

O PHP é uma linguagem de código aberto e interpretada, amplamente reconhecida por sua flexibilidade e facilidade de integração com diversos bancos de dados, como MySQL, PostgreSQL e SQLite, além de servidores web como Apache e Nginx. Sua acessibilidade e eficiência fazem dele uma escolha popular no desenvolvimento web.

A linguagem é especialmente conhecida por sua aplicação em sistemas de gerenciamento de conteúdo (CMS), sendo o WordPress um exemplo notável. Alimentando milhões de sites em todo o mundo, o WordPress demonstra como o PHP é fundamental na construção de plataformas escaláveis e personalizáveis.

Desde o lançamento do PHP 3.0, a linguagem tem recebido atualizações constantes, incorporando melhorias e novas funcionalidades. A versão mais recente, o PHP 8.3, foi lançada em 2023, e o PHP Group oferece suporte oficial para cada versão por até três anos após seu lançamento.

De acordo com a W3Techs (2024), o PHP é usado em mais de 75% de todos os websites como linguagem de programação server-side.

2.3 SISTEMA DE GERENCIAMENTO DE CONTEÚDO

CMS é a sigla para Content Management System, que em português, significa Sistema de Gerenciamento de Conteúdo. A utilização de CMS em uma aplicação web possibilita a criação, alteração, o gerenciamento e a publicação de conteúdo de forma organizada, o que permite que o mesmo seja adicionado, modificado e excluído de forma fácil.

Um CMS é formado por duas partes, o CMA (Aplicativo de gerenciamento de conteúdo), que permite gerenciar e publicar conteúdos no site; e o CDA (Aplicativo de entrega de conteúdo), que é o back-end, ou seja, os bastidores que armazenam os conteúdos publicados e entregam para o público visitante.

O uso de CMS proporciona possibilidades para projetos de todos os tipos e tamanhos, permitindo comportar diferentes aplicações de diversos tipos com a mesma estrutura e funcionamento interno. (Rock Content, 2019).

2.4 WORDPRESS

O WordPress é um aplicativo CMS para web, destinado inicialmente para a criação de blogs, escrito em PHP, utilizando o banco de dados MySQL por padrão. Apesar de ter sido criado inicialmente com a proposta de desenvolver blogs, atualmente o WordPress é conhecido pela sua alta flexibilidade, possuindo recursos que possibilitam também a criação dos mais variados tipos de site, como landing pages, lojas virtuais, portfólios, sites institucionais, entre outros tipos de aplicações web. De acordo com Vieira (2019), o WordPress consiste em uma combinação de arquivos, scripts e bibliotecas que interagem com um banco de dados.

Trata-se de um software de código aberto, licenciado sob a GPL v2, proveniente da Free Software Foundation. Essa licença prevê 10 termos e condições sobre cópia, distribuição e modificação e, em termos gerais, baseia-se nas quatro liberdades seguintes:

  • Executar o programa para qualquer finalidade;
  • Estudar o funcionamento do software e modificá-lo conforme desejado;
  • Redistribuir cópias de modo a ajudar o próximo;
  • Aperfeiçoar o programa e liberar os aperfeiçoamentos para que a comunidade se beneficie deles.

Para que o WordPress possa ser utilizado de forma recomendada, é necessário que o servidor web que hospedará a aplicação cumpra com alguns requisitos, como rodar em um servidor baseado em UNIX/Linux, possuir instalado o PHP na versão 7.4 ou mais recente, o banco de dados MySQL versão 8.0 ou mais recente e memória para o PHP de pelo menos 64 MB.

O WordPress é utilizado por mais de 43% de todos os sites da internet (W3Techs, 2024). Esse CMS “[…] certamente é uma das melhores ferramentas de construção de site disponíveis no mercado hoje”. (Hostinger, 2024).

2.4.1 CARACTERÍSTICAS DO WORDPRESS

A instalação do WordPress pode ser feita em qualquer servidor web, desde que o mesmo atenda aos requisitos mencionados anteriormente. Isso possibilita o controle total do usuário do CMS sobre a aplicação.

O WordPress possui diferentes níveis de usuário para controlar o acesso aos diferentes recursos fornecidos, limitando a capacidade dos usuários criarem ou modificarem o conteúdo do site. Cada usuário pode definir um perfil detalhado, podendo controlar como esses detalhes são apresentados.

A geração de páginas é feita de forma dinâmica, não havendo reconstrução a cada atualização do site. Se utilizam modelos e o banco de dados, a página é gerada a cada solicitação do visitante.

O WordPress utiliza templates, que em português são chamados de modelos, para a geração automática de páginas. Outro recurso importante que esse CMS também fornece é a utilização de temas e estilos diretamente no site. Quando é necessário haver uma personalização mais completa do mesmo, o administrador do site tem a possibilidade de criar seu próprio tema, além de ser possível a instalação de plugins que estendam as funcionalidades do sistema.

Esse CMS possui uma flexibilidade e praticidade incrível que estão ligadas a dois tipos de extensões que expandem seu funcionamento e assim entregam poder ao usuário do WordPress, sendo os plugins e os temas. Os temas estão relacionados a maneira com a qual o site será visualizado e os plugins são módulos importantes que oferecem funções especiais para o site. (Workana, 2017).

2.5 PLUGINS AUXILIARES

Os plugins são ferramentas adicionais que podem ser integradas ao WordPress com o objetivo de ampliar suas funcionalidades, tornando a plataforma ainda mais versátil. Desenvolvidos geralmente pela comunidade, esses recursos estão disponíveis gratuitamente ou mediante pagamento, atendendo a diversas necessidades e possibilitando a customização do WordPress para diferentes nichos (TELES, 2018).

Um dos grandes atrativos dos plugins é que não costumam exigir conhecimento técnico avançado para sua utilização, o que facilita sua adoção por desenvolvedores e usuários iniciantes. Eles oferecem uma vasta gama de funcionalidades, como segurança, otimização para mecanismos de busca, edição de texto, limpeza de cache e muito mais. De acordo com Longen (2024), é justamente graças aos plugins que o WordPress alcançou tamanha popularidade, uma vez que proporcionam “super poderes” à plataforma, permitindo que ela seja adaptada para praticamente qualquer tipo de projeto.

2.5.1 ELEMENTOR

O Elementor é um dos plugins mais populares e amplamente utilizados no ecossistema WordPress, sendo uma ferramenta de construção de páginas (page builder) que oferece recursos avançados para o design de sites. Ele permite que usuários criem e personalizem páginas web por meio de uma interface visual intuitiva, eliminando a necessidade de conhecimentos avançados em programação. A interface de arrastar e soltar (drag and drop) é um dos destaques do Elementor, possibilitando a criação de layouts responsivos e modernos com facilidade e precisão.

Entre os principais recursos do Elementor estão a ampla gama de widgets pré-configurados, como botões, galerias, formulários e menus, além da possibilidade de personalização detalhada de cada elemento. Outro fator positivo do plugin é sua alta capacidade de customização, incluindo a opção de adicionar linhas de código extras a elementos pré-montados, recurso disponível em sua versão paga. (GRÜTZMANN; ZAMBALDE; BERMEJO, 2019). O plugin é oferecido em duas versões: uma gratuita, que apresenta algumas limitações, e uma paga, que garante acesso completo a funcionalidades avançadas, como widgets premium e templates exclusivos.

A flexibilidade e a acessibilidade proporcionadas pelo Elementor o tornam uma escolha estratégica para o desenvolvimento de aplicações web como a proposta neste trabalho. Ele oferece recursos de design responsivo, fundamentais para garantir que a aplicação funcione perfeitamente em dispositivos móveis, além de integrar ferramentas que facilitam a personalização de interfaces. Assim, o Elementor não apenas agiliza o processo de criação, mas também garante resultados profissionais, alinhados aos padrões modernos de usabilidade e estética.

Segundo a W3Techs (2024), dos milhões de sites da internet que utilizam WordPress, 24,2% deles usam também o plugin Elementor.

2.5.2 OUTROS PLUGINS AUXILIARES

Além do Elementor, existem outros plugins amplamente utilizados no WordPress para estender suas funcionalidades e melhorar a usabilidade, acessibilidade e performance de sites, como o PRO Elements, o Advanced Custom Fields (ACF), o Filter Everything, o One Click Accessibility e o LiteSpeed Cache.

O PRO Elements é um plugin gratuito que habilita funcionalidades avançadas do Elementor Pro (versão premium do plugin Elementor) sem a necessidade de pagamento ou ativação, pois ambos são licenciados sob a GNU General Public License, versão 3 (GPLv3). Essa solução permite acessar ferramentas como o Theme Builder, Popup Builder, formulários avançados com múltiplos passos, personalização de CSS tanto global quanto de widgets individuais, entre outros recursos avançados. Ademais, o plugin oferece atualizações automáticas, mantendo o sistema atualizado de forma prática e segura. Por proporcionar acesso gratuito a funcionalidades premium de forma totalmente legal, o PRO Elements torna-se uma alternativa altamente atrativa para projetos que buscam maximizar os recursos do Elementor sem incorrer em custos adicionais​.

O Advanced Custom Fields (ACF) é um plugin projetado para personalizar e estender as funcionalidades do WordPress, permitindo a criação de campos personalizados (meta fields), Custom Post Types (CPT) e taxonomias específicas. Ele possibilita a adição de campos extras a páginas, posts e tipos de conteúdo personalizados, fornecendo flexibilidade para armazenar e gerenciar informações exclusivas de forma estruturada. Sua interface intuitiva torna o gerenciamento dos campos acessível mesmo para usuários sem experiência técnica avançada.

De acordo com Duò (2019), o Advanced Custom Fields permite enriquecer páginas, posts e tipos de conteúdo personalizados de um site com mais dados e informações de forma simples e, além disso, é possível começar a coletar dados adicionais para qualquer conteúdo no site e exibi-los no front-end para que os visitantes possam visualizá-los.

O Filter Everything é um plugin que adiciona funcionalidades avançadas de filtragem ao WordPress, permitindo a criação de filtros personalizados para tipos de postagens, taxonomias e campos personalizados. É especialmente útil em projetos que envolvem a exibição de grandes volumes de dados, pois organiza e facilita a navegação por conteúdos específicos.

O One Click Accessibility é uma solução focada em melhorar a acessibilidade de sites, promovendo a inclusão digital. Ele oferece recursos como ajustes de contraste, aumento do tamanho da fonte e navegação por teclado, que podem ser ativados com facilidade. Esses recursos ajudam a tornar o site acessível a pessoas com diferentes tipos de limitações, alinhando-se às melhores práticas de design inclusivo.

O LiteSpeed Cache é um plugin voltado para otimização de performance, oferecendo ferramentas como cache de páginas, minificação de arquivos CSS e JavaScript, compressão de imagens e integração com Content Delivery Networks (CDNs). Ele ajuda a melhorar a velocidade de carregamento e a eficiência do uso de recursos do servidor, tornando-o uma escolha popular para desenvolvedores que buscam sites ágeis e responsivos.

O sistema de cache web é uma das maneiras mais eficientes de melhorar o desempenho de um site. Quando configurado corretamente, o cache pode acelerar o tempo de carregamento das páginas e reduzir a carga do servidor. A maneira mais simples de configurar esse recurso em um site que utiliza WordPress é por meio da instalação de um plugin de cache como o LiteSpeed Cache. (Hostinger, 2024).

3 DESENVOLVIMENTO

O desenvolvimento da aplicação web foi iniciado com base em uma análise exploratória das demandas relacionadas à conscientização ambiental e à gestão de resíduos recicláveis. Identificou-se a importância de uma ferramenta tecnológica que seja tecnicamente capaz de facilitar o acesso a informações sobre pontos de coleta seletiva, promovendo práticas sustentáveis de forma simples e acessível.

Portanto, o projeto precisou ser de fácil utilização e propor a ideia com um funcionamento de sistema rápido, responsivo e eficaz. Para isso, foram utilizadas as tecnologias web PHP e o CMS WordPress, com a utilização de alguns plugins disponíveis no repositório do CMS que auxiliaram no desenvolvimento.

3.1 O DESENVOLVIMENTO DA APLICAÇÃO WEB

3.1.1 INSTALAÇÃO DO WORDPRESS

A instalação do WordPress foi realizada em um ambiente configurado com os requisitos necessários:

  • Servidor Web: Um servidor baseado em UNIX/Linux;
  • PHP: Versão 7.4 ou superior;
  • Banco de Dados: MySQL versão 8.0 ou superior;
  • Outros Requisitos: Memória PHP de pelo menos 64 MB e um sistema de gerenciamento de arquivos compatível.

O processo incluiu:

  1. Download do WordPress diretamente do site oficial.
  2. Upload dos Arquivos para o Servidor, utilizando um cliente FTP como FileZilla.
  3. Configuração do Banco de Dados: Criação de um banco de dados MySQL e de um usuário com permissões completas.
  4. Configuração do wp-config.php: Arquivo editado com as credenciais do banco de dados.
  5. Execução do Instalador: Navegação para o domínio configurado para concluir a instalação, onde foram definidos o idioma, título do site e credenciais administrativas.

3.1.2 CONFIGURAÇÕES BÁSICAS DO WORDPRESS

Após a instalação, as configurações básicas foram ajustadas no painel administrativo:

  1. Ajustes Gerais: Configuração de título do site, descrição, fuso horário e idioma.
  2. Links Permanentes: Alteração para o formato “Nome do Post” para URLs amigáveis.
  3. Configurações de Leitura: Definição da página inicial como estática e escolha das páginas principais.
  4. Configuração de Usuários: Criação de perfis para gerenciar o conteúdo e manutenção.

3.1.3 INSTALAÇÃO E ATIVAÇÃO DOS PLUGINS AUXILIARES

Os plugins auxiliares foram instalados na ordem correta para evitar conflitos e garantir a integração ideal. O processo incluiu:

  1. Download e Instalação: Realizado diretamente pelo repositório oficial do WordPress.
  2. Ativação: Cada plugin foi ativado individualmente após a instalação.

Abaixo o propósito e configuração inicial de cada plugin:

  • Elementor: Instalado e ativado para possibilitar a criação de páginas personalizadas. Após a ativação, foram ajustadas configurações globais de fontes e cores, widgets básicos e iniciada a criação de layouts.
  • PRO Elements: Instalado para habilitar funcionalidades premium do Elementor, como os widgets premium e o Theme Builder. Não requer configurações adicionais, funcionando de forma integrada.
  • Advanced Custom Fields (ACF): Configurado para criar tipos de conteúdo e campos personalizados. Foram ajustadas opções de visualização no editor.
  • Filter Everything: Configurado para permitir filtros avançados. Foram definidas metas de filtragem para o Custom Post Type (CPT) “Ponto”.
  • One Click Accessibility: Configurado para habilitar ajustes de contraste, aumento de fontes e navegação por teclado.
  • LiteSpeed Cache: Ajustado para cache de páginas e minificação de arquivos CSS/JS, além de otimizações gerais.

3.1.4 INSTALAÇÃO DO TEMA HELLO ELEMENTOR

O tema Hello Elementor foi instalado diretamente do repositório oficial e ativado. Este tema foi escolhido por sua leveza, compatibilidade com o Elementor e ausência de elementos desnecessários, permitindo maior personalização. Isso garantiu a base perfeita para o desenvolvimento de páginas personalizadas.

3.1.5 CRIAÇÃO DO CUSTOM POST TYPE E CAMPOS PERSONALIZADOS

A criação do Custom Post Type (CPT) “Ponto” foi realizada utilizando o plugin Advanced Custom Fields (ACF), permitindo o gerenciamento eficiente de informações relacionadas aos pontos de coleta seletiva. Este CPT foi projetado para armazenar campos personalizados e exibir dados estruturados e relevantes sobre cada ponto de coleta, garantindo organização e funcionalidade.

A criação do CPT “Ponto” foi realizada da seguinte forma:

  • Acessou-se “ACF” no painel administrativo;
  • Selecionou-se “Tipos de post”, após isso “Adicionar novo” e foi configurado o nome, rótulo e visibilidade do tipo de conteúdo;
  • Foi habilitado suporte a campos personalizados e mantido o restante das configurações padrões.

A criação dos campos personalizados para o CPT “Ponto” foi realizada da seguinte forma:

  • Acessou-se “ACF” no painel administrativo;
  • Selecionou-se “Grupos de campos”, após isso “Adicionar novo” e foi configurado o nome;
  • Vinculou-se ao tipo de conteúdo personalizado (CPT) “Ponto” e definidas as condições de exibições.

Os campos personalizados foram criados de acordo com a organização das categorias específicas, conforme as necessidades do projeto.

Para a categoria Localização e Endereço:

  • Cidade: Campo de texto para inserir o nome da cidade;
  • Endereço Completo: Campo de texto para detalhar o endereço completo;
  • Bairro: Campo de texto para identificar o bairro;
  • CEP: Campo de texto para armazenar o código postal.

Para a categoria Horários de Funcionamento:

  • Horário de Funcionamento (Semana): Campo de texto para especificar horários de segunda a sexta-feira;
  • Horário de Funcionamento (Fim de Semana): Campo de texto para horários de sábado e domingo;
  • Fechado em Feriados: Checkbox para indicar se o ponto não opera em feriados.

Para a categoria Tipo de Material Aceito:

  • Tipos de Materiais: Campo de seleção múltipla com opções como plástico, papel, vidro, alumínio, metal, eletrônicos, pilhas/baterias e óleo usado;
  • Material Especial: Campo de texto para materiais não listados nas opções principais.

Para a categoria Informações de Contato:

  • Telefone: Campo de texto para um número de contato;
  • E-mail: Campo de texto para endereço de e-mail;
  • Website: Campo de URL para vincular a um site oficial ou página externa, se houver.

Para as categorias Acessibilidade e Informações Adicionais:

  • Acessível para Deficientes: Checkbox para indicar acessibilidade;
  • Estacionamento Disponível: Checkbox para informar se há estacionamento próximo;
  • Descrição do Ponto: Campo de texto longo para descrever o ponto e suas facilidades;
  • Imagem: Campo para upload de uma imagem do local.

Para a categoria Status de Funcionamento:

  • Ativo/Inativo: Checkbox para indicar o status atual do ponto;
  • Data de Início: Campo de data para informar quando o ponto começou a operar;
  • Data de Término: Campo de data para casos em que o ponto será desativado.

Para a categoria Avaliação ou Feedback:

  • Avaliação do Ponto: Campo numérico para permitir que os usuários avaliem o ponto com base na qualidade do serviço, acessibilidade e outros critérios;
  • Comentários de Usuários: Campo de texto para feedback ou observações deixadas pelos usuários.

3.1.6 CONFIGURAÇÃO DE FILTROS PERSONALIZADOS

Com o plugin Filter Everything, foram criados filtros personalizados para facilitar a busca e navegação pelos pontos de coleta seletiva na página de listagem do Custom Post Type (CPT) “Ponto”. Esses filtros foram configurados com base nos campos personalizados (meta fields) previamente criados, para garantir que os usuários possam refinar suas pesquisas de maneira prática e eficiente.

O processo de criação desses filtros personalizados foi realizado da seguinte forma:

  1. Acessou-se a página “Filters” no menu administrativo do WordPress, disponibilizada pelo plugin Filter Everything.
  2. Clicou-se no botão “Add New” para criar um novo conjunto de filtros (Filter Set).
  3. Foi dado um nome ao Filter Set, como “Filtros de Pontos de Coleta”, para facilitar sua identificação.
  4. No campo de seleção de post type, escolheu-se o CPT “Ponto”, vinculando os filtros a este tipo de conteúdo.
  5. Após configurar o Filter Set, adicionaram-se os filtros específicos, todos do tipo campo personalizado (meta field), conforme a lista abaixo:
  • Tipo de Material Aceito: Filtro para selecionar materiais como plástico, vidro, papel, entre outros;
  • Localização: Incluiu filtros para buscar por cidade, bairro e CEP;
  • Acessibilidade: Checkbox para marcar pontos acessíveis a pessoas com deficiência;
  • Avaliação Mínima: Campo para selecionar avaliações baseadas em estrelas (de 1 a 5).
  1. Após a configuração, os filtros foram testados para assegurar sua funcionalidade, garantindo que as opções de busca fossem exibidas corretamente e retornassem os resultados esperados na página de listagem.

3.1.7 CRIAÇÃO DE PÁGINAS E TEMPLATES

A criação de páginas e templates foi realizada com o plugin Elementor, que proporciona um editor visual e intuitivo, ideal para personalizar o design do site. O processo seguiu as etapas descritas abaixo:

  1. Criação de Páginas Personalizadas:
  • No painel do WordPress, navegou-se até “Páginas” e selecionou-se a opção “Adicionar Nova”;
  • As páginas a serem criadas foram “Home” (página inicial), “Sobre Nós”, “Cadastrar Ponto”, “Contato” e “Materiais Recicláveis”;
  • Cada página recebeu um título correspondente ao seu propósito, como Home, Sobre Nós, Contato, e outras listadas anteriormente;
  • Após criar uma nova página, clicou-se em “Editar com Elementor”, iniciando o editor visual do plugin.
  1. Design e Personalização

Com o Editor do Elementor, o design das páginas foi personalizado seguindo os seguintes passos:

  • Elementos visuais, como títulos, textos, imagens e botões, foram adicionados arrastando-os da barra lateral do editor para a área de trabalho;
  • Cada elemento foi configurado individualmente para atender ao design e conteúdo desejado, utilizando ferramentas de personalização para alterar cores, fontes, tamanhos e margens;
  • Configurações avançadas do Elementor foram empregadas para adicionar animações, interatividade e efeitos visuais, enriquecendo a experiência do usuário.
  1. Criação de Templates

Além das páginas personalizadas, templates específicos foram criados para atender às necessidades da aplicação:

  • Loop Item Template: Criado para ser utilizado com o widget de grid dinâmico, garantindo uma exibição consistente dos pontos na página de listagem;
  • Template Archive: Desenvolvido para exibir a listagem dos pontos de coleta seletiva cadastrados, sendo assim, a página de listagem;
  • Template Single Post: Projetado para apresentar as informações completas de um ponto de coleta em uma página individual.
  1. Otimização para Dispositivos Móveis

O Elementor oferece ferramentas específicas para ajustes responsivos. Durante o desenvolvimento:

  • Cada página foi revisada nos modos de visualização para desktop, tablet e smartphone, acessíveis diretamente no editor do Elementor;
  • Layouts e elementos foram ajustados para garantir que o site permanecesse responsivo e funcional em diferentes tamanhos de tela, proporcionando uma boa experiência de navegação em dispositivos móveis.

3.1.8 CONFIGURAÇÕES DE ACESSIBILIDADE E PERFORMANCE

Garantir a acessibilidade e a performance da aplicação foi uma prioridade no desenvolvimento. Para isso, os plugins One Click Accessibility e LiteSpeed Cache foram configurados para atender às melhores práticas e otimizar a experiência do usuário. A seguir, detalha-se o processo de configuração de cada um.

Com o plugin One Click Accessibility, foi possível implementar recursos de acessibilidade de maneira simples e eficaz, visando atender às melhores práticas de design inclusivo. Após a ativação do plugin, realizou-se a seguinte configuração:

  1. Acessou-se a nova opção “Acessibilidade” no menu do painel administrativo do WordPress.
  2. Dentro da aba “Barra de Ferramentas”, ajustaram-se os seguintes parâmetros:
  • Exibição da Barra de Ferramentas: Configurou-se para ser exibida em todos os dispositivos;
  • Rótulos das Labels: Personalizaram-se os textos dos botões visíveis na barra, como “Aumentar Texto”, “Diminuir Texto”, “Escala de Cinza”, e “Contraste Alto”.
  1. Ainda na aba “Barra de Ferramentas”, ativaram-se as seguintes funcionalidades:
  • Redimensionamento de fonte (aumentar e diminuir texto);
  • Escala de cinza;
  • Alto contraste e contraste negativo;
  • Fonte legível.
  1. Salvaram-se as configurações e verificou-se no front-end que a barra de ferramentas estava funcional e alinhada às configurações aplicadas.

O plugin LiteSpeed Cache foi configurado para otimizar o desempenho da aplicação, melhorando o tempo de carregamento e reduzindo o consumo de recursos do servidor. A configuração foi realizada conforme o seguinte passo a passo:

  1. Acessou-se a opção “LiteSpeed Cache” no menu do WordPress.
  2. Na aba “Geral”, confirmou-se que a opção “Cache” estava ativada, garantindo que o sistema de cache estivesse funcionando.
  3. Na aba “Otimização”, configuraram-se as opções:
  • Minificação: Ativou-se a minificação de HTML, CSS e JavaScript, reduzindo o tamanho dos arquivos e acelerando o carregamento;
  • Combinação de Arquivos: Habilitou-se a combinação de CSS e JavaScript para reduzir o número de requisições ao servidor;
  • Otimização de Imagens: Utilizou-se a ferramenta integrada para comprimir imagens sem perda significativa de qualidade.
  1. Na aba “Cache”, ajustaram-se as configurações específicas:
  • Configurou-se a purga automática para limpar o cache sempre que o conteúdo do site fosse atualizado;
  • Definiram-se exclusões para páginas críticas que não deveriam ser armazenadas em cache, como as páginas “Cadastrar Ponto” e “Contato”, que contém formulários e não devem ser armazenadas em cache.

3.2 INSERÇÃO DE DADOS E TESTES DE USABILIDADE E PERFORMANCE

Após a conclusão do desenvolvimento técnico, foi realizada a inserção de dados no site para simular um ambiente real de uso. Foram cadastrados diversos pontos de coleta seletiva no Custom Post Type (CPT) “Ponto”, utilizando os campos personalizados configurados no plugin Advanced Custom Fields (ACF). Adicionalmente, conteúdos foram criados para todas as páginas e templates desenvolvidos, como textos, imagens, e elementos de design, garantindo uma simulação realista das interações previstas para os usuários.

Com o site devidamente preenchido e funcional, iniciou-se a etapa de testes, que foi organizada em quatro categorias principais: usabilidade, performance, acessibilidade e design responsivo. Cada categoria contou com técnicas e ferramentas específicas para validar a eficácia da aplicação.

3.2.1 TESTES DE USABILIDADE

Os testes de usabilidade focaram em avaliar a facilidade de navegação, clareza das informações e intuitividade das interações no site. Foram realizadas simulações de cenários comuns de uso, como:

  • Localização de pontos de coleta por filtros;
  • Cadastro de novos pontos de coleta seletiva através do formulário.

As seguintes técnicas e ferramentas foram utilizadas:

  • Técnica de Heurísticas de Nielsen: Aplicada para identificar possíveis problemas de usabilidade com base em princípios gerais de design;
  • Testes de Gravação de Sessões Simuladas: Utilizando o Hotjar, foram simuladas navegações para registrar interações como cliques, rolagem de páginas e transições, permitindo observar o comportamento do sistema sob o ponto de vista de um usuário.

3.2.2 TESTES DE PERFORMANCE

O foco dos testes de performance foi garantir que o site apresentasse tempos de carregamento rápidos e consumo eficiente de recursos do servidor. Para isso, simulou-se o acesso ao site em condições variadas de rede e dispositivos, utilizando as seguintes ferramentas:

  • Google PageSpeed Insights: Avaliou métricas como tempo de carregamento de páginas e impacto de elementos de design;
  • GTmetrix: Forneceu relatórios detalhados sobre otimizações aplicadas (como cache e compressão de imagens) e gargalos que poderiam impactar a performance;
  • Lighthouse: Testou o desempenho técnico do site, incluindo impacto do código JavaScript e CSS.

3.2.3 TESTES DE ACESSIBILIDADE

Os testes de acessibilidade avaliaram se o site seguia os padrões estabelecidos pela WCAG 2.1 (Web Content Accessibility Guidelines), com foco nas funcionalidades ativadas para melhorar a experiência de navegação de pessoas com deficiência. Entre os aspectos avaliados, destacam-se:

  • Contraste adequado entre texto e fundo, incluindo alto contraste e contraste negativo;
  • Redimensionamento de texto para verificar se as fontes permaneciam legíveis em diferentes tamanhos;
  • Adaptação visual utilizando escalas de cinza.

As ferramentas Wave Accessibility Tool e Siteimprove Accessibility Checker foram utilizadas para analisar se as configurações de acessibilidade do site estavam alinhadas aos padrões essenciais, garantindo a funcionalidade das opções implementadas.

3.2.4 TESTES DE DESIGN RESPONSIVO

Os testes de design responsivo verificaram se o site se adaptava adequadamente a diferentes tamanhos de tela e dispositivos. Foram simulados acessos em resoluções de desktop, tablet e smartphone, com as seguintes ferramentas:

  • Responsinator: Avaliou a renderização em múltiplos dispositivos e navegadores;
  • Ferramenta Nativa do Elementor: Utilizada durante a edição para garantir que os layouts fossem responsivos.

4 RESULTADOS

A avaliação de um projeto de desenvolvimento pode ser realizada com base em critérios específicos que determinam se ele pode ser considerado finalizado. Entre esses critérios, destacam-se etapas importantes que envolvem a usabilidade e outros aspectos essenciais do projeto. (PRESSMAN; MAXIM, 2016).

  1. Funcionalidade: Garantir que todas as funcionalidades e recursos planejados foram implementados corretamente. Verifica-se se as partes interagem sem falhas e se não há erros ou bugs significativos.
  2. Design e Interface do Usuário: Avaliar a qualidade visual do projeto e sua usabilidade, garantindo que o design esteja alinhado à proposta do projeto e que a interface seja intuitiva e de fácil utilização.
  3. Responsividade: Certificar-se de que o projeto se adapta a diferentes dispositivos e tamanhos de tela, como computadores, tablets e smartphones. É importante verificar se os elementos são exibidos corretamente em todas as resoluções.
  4. Desempenho: Avaliar a velocidade de carregamento das páginas e o tempo de resposta do sistema, assegurando uma experiência ágil e eficiente para o usuário.
  5. Testes e Validação: Realizar testes completos para confirmar que as funcionalidades estão operando corretamente, com validações adequadas das entradas de dados e saídas consistentes.

4.1 TESTES DURANTE O DESENVOLVIMENTO

Durante o processo de desenvolvimento, algumas etapas de teste foram realizadas de forma contínua para identificar e corrigir problemas antes da fase final de avaliação.

  • Testes de Responsividade: Durante a criação das páginas e templates com o Elementor, foram identificados problemas de adaptação em dispositivos móveis. Essas inconsistências foram corrigidas diretamente pelo editor do Elementor, utilizando suas ferramentas nativas de ajustes responsivos;
  • Testes de Acessibilidade: Realizaram-se verificações preliminares com o objetivo de identificar áreas que poderiam comprometer a experiência de usuários com deficiências. As melhorias necessárias foram aplicadas através da configuração do plugin One Click Accessibility, habilitando recursos como redimensionamento de fontes, alto contraste e escala de cinza, conforme descrito na subseção 3.1.8;
  • Testes de Performance: Verificações iniciais apontaram oportunidades de otimização relacionadas ao carregamento das páginas. Como solução, foram aplicadas melhorias com a configuração do plugin LiteSpeed Cache, ativando funcionalidades como minificação de arquivos CSS/JS, otimização de imagens e cache avançado, conforme detalhado na subseção 3.1.8.

Esses testes realizados durante o desenvolvimento permitiram ajustes importantes, garantindo que a aplicação web pudesse ser concluída com maior qualidade técnica e alinhada aos padrões esperados.

4.2 RESULTADOS FINAIS DOS TESTES

Após a conclusão do desenvolvimento e a inserção de dados no site para simular um ambiente real de uso, conforme detalhado na subseção 3.2, foram realizados testes finais para validar a aplicação web em relação às categorias usabilidade, performance, acessibilidade e design responsivo. Os resultados obtidos foram positivos e atenderam aos critérios específicos de cada categoria:

  • Usabilidade: A interface foi avaliada quanto à intuitividade e facilidade de navegação. As funcionalidades, como a listagem de pontos de coleta seletiva, o filtro de pontos e o formulário de cadastro da página “Cadastrar Ponto”, demonstraram ser simples de usar e alinhadas à experiência esperada do usuário;
  • Performance: Os testes de desempenho, realizados com as ferramentas Google PageSpeed Insights e GTmetrix, indicaram tempos de carregamento rápidos e eficiência no uso dos recursos do servidor. A aplicação apresentou uma performance otimizada devido às configurações realizadas com o LiteSpeed Cache;
  • Acessibilidade: Verificou-se a conformidade com os critérios das WCAG 2.1, especialmente em relação às funcionalidades de acessibilidade implementadas. Os recursos de redimensionamento de texto, escalas de cinza e alto contraste foram validados e funcionaram corretamente em diferentes navegadores;
  • Design Responsivo: A aplicação foi testada em múltiplos dispositivos e tamanhos de tela, utilizando ferramentas como Responsinator. Os resultados confirmaram que o layout e os elementos visuais se adaptaram adequadamente a resoluções de desktop, tablets e smartphones, oferecendo uma experiência consistente para os usuários.

Esses resultados validaram a eficácia técnica e funcional da aplicação web, demonstrando que os objetivos planejados foram alcançados e que a plataforma está preparada para cumprir seu papel de facilitar o cadastro e a localização de pontos de coleta seletiva.

5 CONCLUSÃO

Os resultados obtidos, apresentados na seção 4, demonstraram que o projeto alcançou os objetivos inicialmente propostos. A aplicação web se mostrou tecnicamente funcional ao integrar as principais funcionalidades planejadas, como o cadastro de pontos de coleta seletiva, a busca eficiente por filtros personalizados e a apresentação intuitiva e responsiva das informações. Testes de usabilidade comprovaram que a interface desenvolvida é amigável, intuitiva e simples de navegar, garantindo uma experiência positiva para o usuário final.

Além disso, a performance otimizada do sistema, alcançada por meio das configurações avançadas do plugin LiteSpeed Cache, assegurou tempos de carregamento reduzidos e uma navegação eficiente, mesmo com o uso de dados simulados em volume considerável. Os recursos de acessibilidade, configurados com o plugin One Click Accessibility, permitiram que o site atendesse aos critérios estabelecidos pela WCAG 2.1, garantindo inclusão para usuários com necessidades específicas. Por fim, os testes de design responsivo confirmaram que o layout e os elementos visuais da aplicação se adaptam adequadamente a diferentes dispositivos e tamanhos de tela, proporcionando uma experiência consistente em desktops, tablets e smartphones.

Com base nesses resultados positivos, é possível afirmar que a aplicação desenvolvida cumpre com êxito seu papel ao oferecer uma solução tecnológica tecnicamente eficaz para assim, poder estimular práticas sustentáveis. A plataforma não apenas facilita o cadastro e a busca por pontos de coleta seletiva, mas também serve como um meio de conscientização, incentivando a população a desempenhar um papel ativo na preservação do meio ambiente.

Este trabalho reforça a importância de unir tecnologia e sustentabilidade como meio de transformação social e ambiental. Embora a aplicação tenha se mostrado eficiente em atender aos requisitos iniciais, o projeto abre espaço para evoluções futuras, como a implementação de funcionalidades adicionais, testes com usuários reais e integração com sistemas externos. Dessa forma, a plataforma poderá ampliar ainda mais seu impacto positivo, contribuindo para uma sociedade mais consciente e engajada com a manutenção do meio ambiente.

REFERÊNCIAS BIBLIOGRÁFICAS

MARCHIORATO, Henderson Bueno. Educação ambiental: a tecnologia a favor da natureza. Educação Ambiental, Kínesis, v.X, n.23, 2018. Disponível em: https://doi.org/10.36311/1984-8900.2018.v10n23.08.p85. Acesso em: 26 abr. 2024.

BRASIL, Lei nº 9.795, de 27 de abril de 1999, Capítulo I, DA EDUCAÇÃO AMBIENTAL, Art 1. Disponível em: http://www.planalto.gov.br/ccivil_03/leis/L9795.htm. Acesso em: 05 maio 2024.

PHP (2024). História do PHP. Disponível em: https://www.php.net/manual/pt_BR/history.php.php. Acesso em: 07 maio 2024.

W3TECHS (2024). Usage statistics of PHP for websites. Disponível em: https://w3techs.com/technologies/details/pl-php. Acesso em: 11 maio 2024.

ROCK CONTENT (2019). Sistema de gestão de conteúdos (CMS): por que implementar na sua empresa?. Disponível em: https://rockcontent.com/br/blog/cms. Acesso em: 18 maio 2024.

VIEIRA, Marcelo Xavier. WordPress para Desenvolvedores. Clube de Autores, 2019.

W3TECHS (2024). Usage statistics and market share of WordPress. Disponível em: https://w3techs.com/technologies/details/cm-wordpress. Acesso em: 20 maio 2024.

HOSTINGER (2024). WordPress é Bom? Conheça as Vantagens do CMS Mais Popular do Mundo. Disponível em: https://www.hostinger.com.br/tutoriais/wordpress-e-bom. Acesso em: 20 maio 2024.

WORKANA (2017). WordPress: muito mais do que um simples CMS. Disponível em: https://blog.workana.com/pt/freelanceando-pt/wordpress-muito-mais-do-que-um-simples-cms. Acesso em: 02 jun 2024.

TELES, Vinicius da Silva. Desenvolvimento Web com CMS, Trabalho de Conclusão de Curso. Universidade Federal Fluminense, 2018. Disponível em: https://app.uff.br/riuff/bitstream/handle/1/8935/TCC_VINICIUS_DA_SILVA_TELES.pdf?sequence=1&isAllowed=y. Acesso em: 05 jun 2024.

LONGEN, Andrei. O Que é WordPress, Como Funciona e Como Começar: Guia para Iniciantes, Hostinger, 2024. Disponível em: https://www.hostinger.com.br/tutoriais/o-que-e-wordpress. Acesso em: 05 jun 2024.

GRÜTZMANN, André; ZAMBALDE, André Luiz. BERMEJO, Paulo Henrique de Souza. Inovação, Desenvolvimento de Novos Produtos e as Tecnologias Internet: estudo em empresas brasileiras, 2019. Disponível em: https://www.scielo.br/j/gp/a/BYS8dyDMsMrRvBcn3bXCFrL/?lang=pt. Acesso em: 08 jun 2024.

W3TECHS (2024). Historical trends in the usage statistics of WordPress subcategories for websites. Disponível em: https://w3techs.com/technologies/history_details/cm-wordpress. Acesso em: 08 jun 2024.

DUÒ, Matteo. Tutorial Advanced Custom Fields: O Guia Definitivo, Kinsta, 2019. Disponível em: https://kinsta.com/pt/blog/advanced-custom-fields. Acesso em: 12 jun 2024.

HOSTINGER (2024). Como Otimizar o WordPress com o Plugin LiteSpeed Cache. Disponível em: https://www.hostinger.com.br/tutoriais/litespeed. Acesso em: 13 jun 2024.

PRESSMAN, R. S.; MAXIM, B.R. Engenharia de Software: Uma Abordagem Profissional. 8. ed. São Paulo: Bookman, 2016.

1Graduando do Curso de Sistemas de Informação da Universidade de Araraquara- UNIARA. Araraquara-SP. E-mail: aguinaldo-junior@hotmail.com
2Orientador. Docente do Curso de Sistemas de Informação da Universidade de Araraquara- UNIARA. Araraquara-SP. E-mail: felipedallilo@hotmail.com
3Coorientador. Docente do Curso de Sistemas de Informação da Universidade de Araraquara- UNIARA. Araraquara-SP. E-mail: fflorian@uniara.edu.br