====== RF-013 – Página de Imprensa ====== Hub de comunicação externa do TCE-GO, reunindo notícias institucionais, galeria fotográfica (Flickr), clipping eletrônico e rádio institucional. Cada notícia possui página de detalhe com corpo rico, compartilhamento em redes sociais, bloco de atendimento e newsletter. **Local de acesso:** `/imprensa` · `/imprensa/noticias` · `/imprensa/noticias/[slug]` --- ===== Atores ===== ^ Nível ^ Perfil ^ Autenticação ^ Abrangência ^ | Público | Cidadão / Imprensa | Não requerida | Acesso irrestrito a todas as telas | --- ===== Telas ===== ==== Tela 01 – Hub de Imprensa (`/imprensa`) ==== {{:pres:gerti:gestao_de_ativos:portal:pasted:20260428-120428.png}} ^ Elemento ^ Tipo ^ Obrigatório ^ Condição de exibição ^ | Cabeçalho da página | Título "Imprensa", subtítulo descritivo e trilha de navegação `Início > Imprensa` | Sim | Sempre | | Seção Notícias — título e link "Ver todas as notícias" | Cabeçalho de seção com acesso à lista completa | Sim | Sempre | | Grade de cards de notícia (6 itens) | Grade responsiva 3 colunas (desktop) / 2 (tablet) / 1 (mobile) | Sim | Sempre | | Card de notícia — imagem de destaque | Imagem em proporção 16/9 | Sim | Por card | | Card de notícia — badge de assunto | Badge laranja para notícias em destaque; azul para as demais | Sim | Por card | | Card de notícia — faixa de destaque na base da imagem | Faixa decorativa laranja | Condicional | Somente notícias marcadas como destaque | | Card de notícia — rótulo "★ Destaque" | Texto identificador acima do título | Condicional | Somente notícias marcadas como destaque | | Card de notícia — título, resumo, data e "Leia mais" | Texto | Sim | Por card | | Seção Momentos do TCE-GO — título e link "Ver todas as fotos" | Cabeçalho de seção com acesso ao acervo externo | Sim | Sempre | | Grade de álbuns Flickr (3 itens) | Grade responsiva 3/2/1 colunas via embed oficial do Flickr | Sim | Sempre | | Seção Rádio TCE-GO | Banner com identificação da rádio e botão "Ouvir ao vivo" | Sim | Sempre | | Seção Onde o TCE-GO Apareceu — título e link "Ver todos" | Cabeçalho de seção com acesso ao clipping completo | Sim | Sempre | | Feed de clipping (máx. 5 itens do último mês) | Lista com selo de data e ícone de download por item | Sim | Sempre | ==== Tela 02 – Lista de Notícias (`/imprensa/noticias`) ==== {{:pres:gerti:gestao_de_ativos:portal:pasted:20260427-132925.png}} ^ Elemento ^ Tipo ^ Obrigatório ^ Condição de exibição ^ | Cabeçalho da página | Título "Notícias" e trilha de navegação `Início > Imprensa > Notícias` | Sim | Sempre | | Botão "Filtros e busca" | Botão de alternância que exibe ou oculta o painel de filtros | Sim | Somente em dispositivos móveis | | Painel de filtros — campo de busca por texto | Campo de texto livre para pesquisa por título ou resumo | Sim | Sempre | | Painel de filtros — tipo de notícia | Seleção única: "Todas as Notícias" ou "Destaque" | Sim | Sempre | | Painel de filtros — assunto | Lista suspensa com as categorias de assunto disponíveis | Sim | Sempre | | Painel de filtros — período De / Até | Dois campos de data para delimitar o intervalo de publicação | Sim | Sempre | | Botão "Limpar Filtros" | Reinicia todos os campos e retorna ao estado inicial | Sim | Sempre | | Botão "Pesquisar" | Executa a pesquisa; desabilitado durante a execução | Sim | Sempre | | Área de resultados — estado inicial | Orientação ao usuário: "Use os filtros ao lado para localizar notícias do TCE-GO." | Sim | Antes da primeira pesquisa | | Área de resultados — estado em execução | Indicador de carregamento com texto "Pesquisando notícias..." | Sim | Durante a execução da pesquisa | | Contador de resultados | "Encontramos N resultado(s) para essa pesquisa" | Condicional | Somente quando há resultados | | Seletor de itens por página | Opções: 10, 20 ou 50 itens por página | Condicional | Somente quando há resultados | | Paginação (superior e inferior) | Controle de navegação entre páginas | Condicional | Somente quando o total de páginas for superior a 1 | | Card de resultado — badges de assunto e destaque | Badge de assunto sempre exibido; badge "Destaque" apenas para notícias marcadas | Sim | Por card | | Card de resultado — título, resumo com marcação de termos, data e "Leia mais" | Texto com destaque visual sobre os termos pesquisados | Sim | Por card | | Área de resultados — estado sem resultados | "Nenhum resultado encontrado" / "Tente outros termos ou ajuste os filtros." + link "Limpar filtros" | Condicional | Quando a pesquisa não retorna resultados | ==== Tela 03 – Detalhe da Notícia (`/imprensa/noticias/[slug]`) ==== {{:pres:gerti:gestao_de_ativos:portal:pasted:20260427-132102.png}} ^ Elemento ^ Tipo ^ Obrigatório ^ Condição de exibição ^ | Cabeçalho da página | Trilha de navegação `Início > Imprensa > Notícias > [título]`; título truncado a 60 caracteres | Sim | Sempre | | Subtítulo | Texto de apoio exibido acima do título principal | Condicional | Somente quando o campo subtítulo estiver preenchido | | Título principal (H1) | Título completo da notícia | Sim | Sempre | | Barra de autoria e compartilhamento | "Por Redação TCE-GO — Goiânia, GO", tag de assunto clicável, data de publicação, tempo relativo e ícones de compartilhamento | Sim | Sempre | | → Ícones de compartilhamento | Facebook, WhatsApp, X (Twitter), LinkedIn e Copiar link | Sim | Sempre | | → Tag de assunto clicável | Filtra a lista de notícias pelo assunto da notícia atual | Sim | Sempre | | Imagem de destaque | Imagem principal da notícia em proporção 16/9 | Sim | Sempre | | → Legenda da imagem | Texto descritivo em itálico abaixo da imagem | Condicional | Somente quando o campo legenda estiver preenchido | | → Crédito de foto | Identificação do fotógrafo ou agência | Condicional | Somente quando o campo crédito estiver preenchido | | Banner de destaque | Identificação de destaque institucional com botão "Ver mais" | Condicional | Somente quando a notícia for marcada como destaque e possuir link de destaque | | Corpo da notícia | Texto completo em formato Rich Text | Sim | Sempre | | Separador visual | Linha horizontal separando o conteúdo editorial dos blocos de serviço | Sim | Sempre | | Bloco de atendimento — Cidadão | Telefone `(62) 3256-9300` (link `tel:`) e e-mail `ouvidoria@tcego.tc.br` (link `mailto:`) | Sim | Sempre | | Bloco de atendimento — Imprensa | Telefone `(62) 3256-9340` (link `tel:`) e e-mail `imprensa@tcego.tc.br` (link `mailto:`) | Sim | Sempre | | Bloco de newsletter — formulário | Campo de e-mail e botão "Inscrever" | Sim | Enquanto o usuário não tiver realizado a inscrição | | Bloco de newsletter — confirmação | Mensagem de sucesso com confirmação do e-mail informado | Condicional | Após a submissão do formulário | | Seção Notícias Relacionadas | Grade de cards de notícias do mesmo assunto | Condicional | Somente quando existirem outras notícias do mesmo assunto | --- ===== Fluxos ===== ==== Fluxo 01 – Acesso ao Hub de Imprensa ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário acessa `/imprensa` | | | | 02 | Sistema exibe o cabeçalho com título "Imprensa" e trilha de navegação `Início > Imprensa` | | Tela 01 | | 03 | Sistema seleciona e ordena as notícias a serem exibidas | RN01 | Tela 01 | | 04 | Sistema exibe a grade com os 6 cards de notícia; notícias em destaque recebem tratamento visual diferenciado | RN02 | Tela 01 | | 05 | Sistema exibe a grade de álbuns Flickr via embed oficial da plataforma; título de cada álbum posicionado abaixo da imagem | RN03 | Tela 01 | | 06 | Sistema seleciona os clippings a serem exibidos no feed | RN04, RN05 | Tela 01 | | 07 | Sistema exibe o feed de clipping com rótulo padronizado por data e ícone de download por item | RN06 | Tela 01 | | 08 | Sistema exibe o banner da Rádio TCE-GO com botão "Ouvir ao vivo" | | Tela 01 | ==== Fluxo 02 – Navegação a partir do Hub ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário clica em qualquer área de um card de notícia | RN07 | Tela 01 | | 01.1 | Sistema navega para a página de detalhe da notícia selecionada | | Tela 03 | | 02 | Usuário clica em "Ver todas as notícias" | | Tela 01 | | 02.1 | Sistema navega para `/imprensa/noticias` | | Tela 02 | | 03 | Usuário clica no ícone de download de um item do clipping | | Tela 01 | | 03.1 | Sistema abre o arquivo do clipping em nova aba | RN08 | — | | 04 | Usuário clica em "Ver todas as fotos" | | Tela 01 | | 04.1 | Sistema abre o acervo fotográfico do TCE-GO no Flickr em nova aba | RN08 | — | | 05 | Usuário clica em "Ouvir ao vivo" | | Tela 01 | | 05.1 | Sistema abre o player da Rádio TCE-GO em nova aba | RN08 | — | | 06 | Usuário clica em "Ver todos" (seção Clipping) | | Tela 01 | | 06.1 | Sistema navega para `/imprensa/clipping` | | — | ==== Fluxo 03 – Pesquisa e Filtragem de Notícias ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário acessa `/imprensa/noticias` | | | | 02 | Sistema exibe a página no estado inicial com orientação: "Use os filtros ao lado para localizar notícias do TCE-GO." | | Tela 02 | | 03 | Usuário preenche um ou mais campos do painel de filtros (texto, tipo, assunto, período) | | Tela 02 | | 04 | Usuário clica em "Pesquisar" ou pressiona Enter no campo de busca | | Tela 02 | | 05 | Sistema desabilita o botão "Pesquisar" e exibe indicador de carregamento com texto "Pesquisando notícias..." | RN09 | Tela 02 | | 06 | Sistema aplica todos os filtros ativos de forma cumulativa sobre o conjunto de notícias | RN10, RN11 | Tela 02 | | 07 | Sistema ordena os resultados com notícias em destaque no topo, seguidas das demais por data de publicação | RN12 | Tela 02 | | 07.1 | Resultados encontrados → sistema exibe contador "Encontramos N resultado(s) para essa pesquisa", seletor de itens por página, paginação e cards de resultado | | Tela 02 | | 07.2 | Nenhum resultado → sistema exibe "Nenhum resultado encontrado" e "Tente outros termos ou ajuste os filtros." | | Tela 02 | | 08 | Usuário clica em um card de resultado | | Tela 02 | | 08.1 | Sistema navega para a página de detalhe da notícia selecionada | | Tela 03 | | 09 | Usuário clica em "Limpar Filtros" ou "Limpar filtros" (estado sem resultados) | | Tela 02 | | 09.1 | Sistema reinicia todos os campos e retorna ao estado inicial | | Tela 02 | ==== Fluxo 04 – Acesso ao Detalhe da Notícia ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário acessa `/imprensa/noticias/[slug]` | | | | 02 | Sistema verifica se a notícia existe com base no endereço acessado | | | | 02.1 | Notícia não encontrada → sistema exibe página de erro 404 | RN13 | — | | 03 | Sistema gera os metadados de compartilhamento (Open Graph) da notícia | RN14 | | | 04 | Sistema exibe cabeçalho com título truncado a 60 caracteres e trilha de navegação com título truncado a 40 caracteres | RN15 | Tela 03 | | 05 | Sistema exibe o subtítulo acima do título principal somente se o campo estiver preenchido | | Tela 03 | | 06 | Sistema exibe o título principal seguido da barra de autoria e compartilhamento com autor, data, tempo relativo, assunto e ícones | RN16 | Tela 03 | | 07 | Sistema exibe imagem de destaque em proporção 16/9 com legenda e crédito quando preenchidos | | Tela 03 | | 08 | Sistema verifica se a notícia é destaque e se possui link de destaque associado | RN17 | Tela 03 | | 08.1 | Ambas as condições atendidas → sistema exibe banner de destaque com botão "Ver mais" | RN17 | Tela 03 | | 08.2 | Qualquer condição ausente → banner não é exibido | | Tela 03 | | 09 | Sistema exibe o corpo da notícia seguido de separador visual | | Tela 03 | | 10 | Sistema exibe o bloco de atendimento (Cidadão e Imprensa) e o bloco de newsletter no estado de formulário | | Tela 03 | | 11 | Sistema seleciona notícias do mesmo assunto excluindo a notícia atual, limitado a 4 itens | RN18 | Tela 03 | | 11.1 | Existem notícias relacionadas → sistema exibe a seção "Notícias Relacionadas" | | Tela 03 | | 11.2 | Não existem notícias relacionadas → seção omitida | | Tela 03 | ==== Fluxo 05 – Compartilhamento de Notícia ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário clica no ícone do Facebook | | Tela 03 | | 01.1 | Sistema abre o compartilhador do Facebook com a URL da notícia em nova aba | RN08 | — | | 02 | Usuário clica no ícone do WhatsApp | | Tela 03 | | 02.1 | Sistema abre o compartilhador do WhatsApp com título e URL da notícia em nova aba | RN08 | — | | 03 | Usuário clica no ícone do X (Twitter) | | Tela 03 | | 03.1 | Sistema abre o compartilhador do X com título e URL da notícia em nova aba | RN08 | — | | 04 | Usuário clica no ícone do LinkedIn | | Tela 03 | | 04.1 | Sistema abre o compartilhador do LinkedIn com a URL da notícia em nova aba | RN08 | — | | 05 | Usuário clica no botão "Copiar link" | | Tela 03 | | 05.1 | Sistema copia a URL da notícia para a área de transferência do dispositivo | RN19 | Tela 03 | | 05.2 | Sistema exibe confirmação visual no botão por 2 segundos | RN19 | Tela 03 | | 05.3 | Após 2 segundos, o botão retorna ao estado padrão | | Tela 03 | | 06 | Usuário clica na tag de assunto na barra de autoria | | Tela 03 | | 06.1 | Sistema navega para a lista de notícias pré-filtrada pelo assunto da notícia atual | | Tela 02 | ==== Fluxo 06 – Inscrição na Newsletter ==== ^ Passo ^ Ação ^ Regra ^ Tela ^ | 01 | Usuário preenche o campo de e-mail no bloco de newsletter | | Tela 03 | | 02 | Usuário clica no botão "Inscrever" | | Tela 03 | | 03 | Sistema valida que o campo de e-mail está preenchido | RN20 | Tela 03 | | 03.1 | Campo vazio → submissão não prossegue | RN20 | Tela 03 | | 04 | Campo preenchido → sistema registra a inscrição | RN21 | Tela 03 | | 05 | Sistema substitui o formulário pela mensagem de confirmação | | Tela 03 | | 06 | Sistema exibe "Inscrição realizada com sucesso!" e "[e-mail informado] foi adicionado à nossa lista." | | Tela 03 | --- ===== RN – Regras de Negócio ===== ^ Regra ^ Descrição ^ | RN01 | **Seleção e ordenação de notícias no Hub** — O hub exibe as últimas 6 notícias publicadas, ordenadas de forma que as marcadas como destaque apareçam primeiro; as demais seguem a ordem decrescente de data de publicação. | | RN02 | **Tratamento visual de notícia em destaque** — Notícias marcadas como destaque recebem, em seu card: borda superior na cor de destaque institucional, faixa decorativa na base da imagem, badge do assunto em laranja e rótulo "★ Destaque" acima do título. | | RN03 | **Galeria Flickr — posicionamento do título** — O título de cada álbum deve ser exibido externamente ao elemento de embed do Flickr, pois o script oficial da plataforma substitui o conteúdo interno do elemento ao inicializar. | | RN04 | **Clipping — exibição restrita ao último mês** — O sistema identifica o mês e ano mais recentes entre todos os clippings cadastrados e exibe somente os itens pertencentes a esse período. | | RN05 | **Clipping — limite de 5 itens** — Dentro do mês mais recente, o sistema exibe no máximo os 5 clippings mais recentes em ordem decrescente de data. | | RN06 | **Clipping — rótulo padronizado** — O rótulo exibido para cada item do feed segue o padrão "Notícias do dia {dia} de {mês}", independentemente do título original do clipping. | | RN07 | **Card de notícia inteiramente clicável** — Todo o card de notícia é uma área de clique que navega para a página de detalhe, sem elementos internos com links independentes que concorram com o foco de acessibilidade. | | RN08 | **Links externos abertos em nova aba** — Todos os links para destinos externos ao Portal (Flickr, Rádio TCE-GO, redes sociais, arquivos de clipping) são abertos em nova aba do navegador, mantendo o Portal na aba de origem. | | RN09 | **Indicador de carregamento na pesquisa** — Ao acionar a pesquisa, o sistema exibe um indicador de carregamento por 500 milissegundos antes de apresentar os resultados. | | RN10 | **Filtros aplicados de forma cumulativa** — Na lista de notícias, todos os filtros ativos são aplicados simultaneamente; o conjunto de resultados corresponde à interseção de todos os critérios selecionados. | | RN11 | **Busca por texto — escopo e sensibilidade** — A busca por texto livre pesquisa nos campos título e resumo da notícia, sem distinção entre maiúsculas e minúsculas. | | RN12 | **Ordenação dos resultados de pesquisa** — Os resultados são exibidos com as notícias marcadas como destaque no topo, seguidas das demais em ordem decrescente de data de publicação. | | RN13 | **Endereço inválido na página de detalhe** — Quando o endereço acessado não corresponde a nenhuma notícia cadastrada, o sistema exibe a página de erro 404. | | RN14 | **Metadados de compartilhamento (Open Graph)** — A página de detalhe gera automaticamente metadados de título, descrição, imagem, URL e tipo de conteúdo para uso em compartilhamentos em redes sociais. | | RN15 | **Truncamento de título nos elementos de navegação** — O título exibido no cabeçalho da página é truncado a 60 caracteres com reticências. O título exibido na trilha de navegação é truncado a 40 caracteres. | | RN16 | **Tempo relativo de publicação** — O tempo decorrido desde a publicação é calculado e exibido de forma aproximada: mesmo dia → "Atualizado há 2 horas"; 1 dia → "Atualizado há 1 dia"; 2 a 6 dias → "Atualizado há N dias"; 1 a 4 semanas → "Atualizado há N semana(s)"; 1 mês ou mais → "Atualizado há N mês(es)". | | RN17 | **Banner de destaque — condição dupla** — O banner de destaque é exibido na página de detalhe somente quando a notícia é marcada como destaque e possui um link de destaque associado. A ausência de qualquer uma das condições suprime o banner. | | RN18 | **Notícias relacionadas** — O sistema exibe notícias do mesmo assunto da notícia atual, excluindo-a, com limite de 4 itens. A seção é suprimida quando nenhuma notícia atende ao critério. | | RN19 | **Copiar link — confirmação visual** — Ao copiar o link da notícia para a área de transferência, o sistema exibe uma confirmação visual no botão por 2 segundos, retornando ao estado padrão em seguida. Falhas silenciosas na operação de cópia não são sinalizadas ao usuário. | | RN20 | **Newsletter — campo de e-mail obrigatório** — A submissão do formulário de inscrição na newsletter exige que o campo de e-mail esteja preenchido. A ausência do valor impede o prosseguimento. | | RN21 | **Newsletter — confirmação de inscrição** — Após a submissão bem-sucedida, o formulário é substituído por uma mensagem de confirmação contendo o e-mail informado. | | RN22 | **Contatos clicáveis no bloco de atendimento** — Os números de telefone do bloco de atendimento devem ser renderizados como links `tel:`, permitindo ao usuário iniciar uma chamada diretamente pelo dispositivo. Os endereços de e-mail devem ser renderizados como links `mailto:`, abrindo o cliente de e-mail padrão do dispositivo. Ambos seguem o mesmo estilo visual dos demais links da interface. | --- //Gerado com: documentar-funcionalidade-v1.md// \\ --- //Revisado por: Paulo Ricardo Amorim Silva - pramorim@tce.go.gov.br//