Voltar arrow_back
  • Desenvolvimento
  • Pesquisa

Desenvolvimento do Sistema de Gestão de Mídias

O projeto customiza tema e módulos no Omeka S para centralizar e proteger o acervo audiovisual da UFG com sistema seguro e personalizado.

  • calendar_today

    2025

  • ·
  • corporate_fare

    Forma/Ufes — UFG

Sobre o projeto

A UFG precisava reunir um acervo de mídias espalhado em vários lugares: fotos de formatura no site institucional, vídeos no YouTube, arquivos em plataformas que podem sumir ou mudar de política a qualquer momento. A resposta foi o Sistema de Gestão de Mídias (SGM), um ambiente próprio para catalogar, organizar e preservar esse conteúdo audiovisual.

O CMS escolhido foi o Omeka S, plataforma voltada a acervos digitais e usada em contextos institucionais e museológicos. Antes da minha entrada, a equipe também avaliou alternativas como WordPress, mas o Omeka S encaixou melhor no tipo de catalogação e preservação que o projeto exige.

Meu papel no projeto

Atuo no desenvolvimento front-end do SGM. O layout visual veio definido por um profissional de design da equipe e meu trabalho é implementá-lo dentro do Omeka S: montar as telas, garantir que funcionem bem no celular e no desktop, e deixar o sistema utilizável tanto para quem visita o acervo quanto para quem administra o conteúdo.

Customização do tema

O tema SGM UFG parte do The Daily, tema base do Omeka S, e foi adaptado quase do zero para o SGM. Na prática, isso significa construir a interface pública do sistema: cabeçalho e navegação, menu mobile, busca, páginas de item e coleção, rodapé e a forma como os blocos de conteúdo aparecem na tela.

Alguns pontos que exigiram mais trabalho:

  • Busca: pesquisa em páginas, itens e conjuntos do acervo, com trechos dos resultados e atalhos de busca configuráveis pela equipe.
  • Páginas compostas por blocos: banner de destaque no topo, demais seções organizadas em grid responsivo; algumas páginas permitem cabeçalho transparente sobre o banner.
  • Metadados em português: campos técnicos do acervo (Dublin Core e vocabulários relacionados) exibidos com rótulos traduzidos, para facilitar a leitura por quem consulta o repositório.
  • Galeria de mídia: visualização de imagens e arquivos nas páginas de item.

Do lado técnico, uso templates PHP do Omeka, Tailwind CSS e JavaScript. Mas o resultado visível é uma interface pública coerente com o design definido e integrada ao fluxo de edição do CMS.

Blocos customizados (SGMBlocks)

O editor de páginas nativo do Omeka S não tinha os componentes que o SGM precisava. Desenvolvi o módulo SGMBlocks, baseado no PageBlocks da comunidade e adaptado ao escopo do projeto.

A ideia é simples: a equipe de conteúdo monta páginas no painel administrativo, arrastando blocos prontos, sem escrever código. Eu construo a estrutura, o visual e o comportamento de cada bloco; quem edita preenche textos, imagens e links.

Hoje o módulo oferece:

  • Banner de página: faixa de destaque com imagem, título e descrição; na versão centralizada, pode incluir barra de pesquisa.
  • Barra de pesquisa: campo de busca do site, com sugestões opcionais.
  • Acordeão: seções expansíveis para FAQ e conteúdo segmentado.
  • Linha do tempo: marcos cronológicos; lista no celular, carrossel em telas maiores.
  • Botão: chamada para ação com link.
  • Ícone: bloco com imagem, título e texto.
  • Lista de recursos: grade de coleções, itens ou páginas, com paginação e ordenação.
  • Descrição e capa da página: resumo e thumbnail usados em listagens e exibições, separados do conteúdo principal.

Também inclui opções extras: cabeçalho transparente por página e sugestões de busca configuráveis uma vez e reutilizadas em diferentes partes do site.

Documentação do projeto

Além do código, mantenho a documentação do SGM em sgm.ufg.br/docs. O site tem duas trilhas:

  • Administração: guias para quem edita conteúdo no Omeka (itens, coleções, exibições e uso de cada bloco SGM).
  • Desenvolvimento: referência técnica do tema e do SGMBlocks para quem for dar manutenção ou evoluir o sistema.

Quando algo muda no tema ou nos blocos, atualizo os dois lados: o manual de uso para a equipe da UFG e a documentação técnica para desenvolvedores.


Acesse neste link o projeto ao vivo.