Manual de Edição: site Governo Digital

As orientações deste manual destinam-se aos responsáveis pela alimentação de conteúdo do site gov.br/governodigital.

VISÃO GERAL

A nova estrutura do site do Governo Digital toma como base:

• os Manuais orientadores do Padrão Digital de Governo;

• a Cartilha de Orientação para Construção de Conteúdo Acessível no gov.br;

• o Material de apoio para implementação de acessibilidade em sites;

• a utilização de layouts pré-definidos para páginas (capas) de 1º, 2º e 3º níveis.

OBJETIVOS

1. Compartilhar Boas Práticas para que o conteúdo produzido esteja alinhado aos objetivos da comunicação de governo.

2. Melhorar a Experiência do Usuário por meio de páginas simples, acessíveis e com um padrão mínimo de identidade do governo para site.

GESTÃO DO SITE

• Administrador: o Administrador é o responsável pela gestão administrativa do portal. Habilita usuários e faz a gestão de todo o conteúdo institucional no portal, mas não cria ou publica serviço.

• Revisor: o Revisor pode publicar itens para serem visualizados por membros e visitantes anônimos. Também pode rejeitar um conteúdo e sugerir mudanças para sua publicação, gerando uma mensagem de pendência.

• Leitor: o Leitor pode ler itens ainda não publicados, sem alterá-los.

• Membro: permite visualizar o conteúdo do portal e, em locais adequados, criar conteúdo e enviar a publicação. Há casos em que apenas usuários registrados, ou seja, membros poderão acessar determinados conteúdos do site.

• Editor: o Editor pode adicionar e editar qualquer item e conteúdo.

• Colaborador: o Colaborador pode adicionar novos itens, porém não é permitido que edite conteúdos existentes.

PÚBLICO-ALVO

Órgãos do sisp, empresas, organismos internacionais, pesquisadores e cidadãos. 

DIRETRIZES GERAIS

Embora o site do Governo Digital não contemple a estrutura de um órgão, em virtude de seu alcance transversal e da importância para a transformação digital do governo, a composição de seu conteúdo deve estar alinhada minimamente às principais diretrizes do padrão digital de governo. Essas diretrizes visam que o cidadão reconheça o governo, de forma confiante e segura, sendo acessível em qualquer uma de suas plataformas.

ESTRUTURA

A nova estrutura do site do Governo Digital toma como base:

• os Manuais orientadores do Padrão Digital de Governo;

• a Cartilha de Orientação para Construção de Conteúdo Acessível no gov.br;

• o Material de apoio para implementação de acessibilidade em sites;

• a utilização de layouts pré-definidos para páginas (capas) de 1º, 2º e 3º níveis.

CONTEÚDO

O conteúdo do site foi dividido em nove categorias com o objetivo de otimizar a alimentação dos editores e melhorar a navegação do usuário. São elas: 

• Estratégias e Governança Digital

• Plataformas e Serviços Digitais

• Identidade

• Acessibilidade e Usuário

• Contratações de TIC

• Privacidade e Segurança

• Infraestrutura Nacional de Dados

• Capacitação

• Legislação

HOME 

O layout do site segue a linha da identidade visual do Governo Federal, buscando sempre aplicar as boas práticas de design de experiência e interação do usuário.

A Capa do site governo digital poderá conter: 

• banner destaque no topo;

• banner rotativo ou carrosséis (item exclusivo da home; utilizado apenas uma vez);

• banners menores ou cards para acesso rápido;

• área de cards para acesso aos conteúdos em destaque;

• botões com links;

• barra de números (item exclusivo da home);

• área de notícias (item exclusivo da home);

• área de vídeos; 

• área dos Canais de Atendimento Fala.BR (item exclusivo da home).

CATEGORIAS

Os nomes das categorias foram definidos previamente pela gestão do ambiente e elas estão no 2º nível do site.

O layout padrão da capa das categorias contém:

• o banner padrão;

Exemplo de banner de 2º nível

• seguido pelo texto de apresentação;
• pelos cards dos temas que compõem a categoria; e
• pelos botões com links para as demais categorias.

PÁGINAS DE 3º NÍVEL

As páginas internas de 3º nível de cada categoria deverão ser iniciadas com o seguinte layout:

• um banner padrão como cabeçalho

Exemplo de banner de 3º nível

• logo abaixo, três boxes contendo os seguintes tópicos:

1. O que é (título obrigatório)
2. Objetivos (pode ser outro título)
3. Contexto (pode ser outro título)

Confira abaixo a visão dos boxes:

• abaixo dos boxes, o editor poderá utilizar os demais recursos e funcionalidades do layout do Plone, como cabeçalhos, texto rico, cards, banners e outros recursos acessíveis.

PÁGINAS DE 4º NÍVEL

O layout das páginas internas, do 4º nível em diante, poderá ser iniciado com o banner padrão, mas sem a imagem de pessoas, seguido pela livre edição da capa com os demais recursos do Plone.

Contudo, como alguns assuntos exigem uma apresentação mais detalhada para melhor entendimento do usuário, o editor poderá optar por usar o layout de 3º nível: banner padrão só com título e os três boxes. 

Exemplo de banner padrão de 4º nível

OBSERVAÇÃO: a edição dos banners para as páginas de 3º e 4º níveis em diante deverão ser solicitadas ao gestor do site.

PASTAS

Ao criar uma Pasta para abrigar diversos conteúdos, recomenda-se criar uma Capa para dar acesso aos demais conteúdos. 

Sobre upload de arquivos e imagens ou criação de links: para que esses conteúdos não fiquem espalhados dentro da pasta principal, uma boa prática é criar dentro dela outras pastas para receber esses itens: “Arquivos”; “Links” e “Imagens”. 

NOTÍCIAS 

Por padrão, a pasta Notícias é um item autônomo em todos os sites. As Notícias relacionadas/tagueadas com a expressão “Governo Digital” pelo Ministério da Gestão e da Inovação em Serviços Públicos (MGI) são replicadas no site do Governo Digital (inseridas na pasta, com os destaques inseridos na capa do site).

ATENÇÃO: 

• Não devem ser criadas pastas, páginas ou áreas de “Notícias” nas páginas internas do site do Governo Digital. 

• Não se deve copiar uma notícia publicada em um site e publicar novamente numa página interna.

• As notícias podem ser referenciadas em páginas internas por meio de links que levem o usuário para a notícia publicada originalmente, ou seja, no Ministério da Gestão. É o órgão quem publica e quem atualiza, caso o texto necessite de mudanças.

PÁGINAS 

Antes de criar uma Página, pesquisar no site se já não existe um conteúdo idêntico ou parecido;

Título da página: use títulos otimizados para que a URL e o rodapé não fiquem grandes. Exemplo:

• Título grande: Catálogos de Soluções de TIC com Condições Padronizadas. 

• Sugestão otimizada: Catálogos de Soluções de TIC. O restante da informação poderá vir no texto de suporte, descrição ou banner da página.

Garanta a leitura e compreensão das informações: os textos das páginas devem conter parágrafos curtos, objetivos e clareza. A linguagem deve prezar pela simplicidade e impessoalidade.

Listas: utilize listas de itens ao invés de uma longa série de palavras ou frases separadas por vírgulas. 

Siglas: disponibilize uma explicação na primeira ocorrência de siglas, abreviaturas ou palavras incomuns (ambíguas, desconhecidas ou utilizadas de forma muito específica).

Divulgue seu conteúdo: a criação de uma página sobre um projeto novo, uma solução ou um evento importante pode trazer ótimos resultados para o site e para o órgão se ela for bem divulgada. Sugere-se discutir com a Ascom os meios para divulgação do novo ambiente, seja por meio de uma notícia, redes sociais ou destaque na página principal (nesse caso, com o Administrador do site).  Recomenda-se, por exemplo, a realização de campanhas. 

ATENÇÃO: 

Antes de colar um texto numa página, leve-o para o Bloco de Notas e limpe a formatação. O texto vindo de outras fontes pode trazer informações desnecessárias que causam impacto no momento que outra pessoa precisar abrir o código para corrigi-lo ou atualizá-lo.

Deve-se usar os recursos da área da edição de texto para dar destaques ao conteúdo, como Título, Subtítulo, Identado, dentre outros, além dos ícones de Negrito, Marcadores, Numeração, Tabelas, por exemplo.

USO DE IMAGENS

Texto alternativo: uma das principais barreiras de acesso das pessoas com deficiência é o uso de imagens sem texto alternativo nas páginas. A ausência do ALT impede que pessoas cegas compreendam a foto publicada. 

Por isso, todas as vezes que o editor inserir um banner/imagem no site, é preciso colocar o texto alternativo: em banner, no campo de edição do mesmo; numa página, quando fizer o upload da imagem. 

Veja a seguir, como compor um texto alternativo:

1 - Descrição de uma imagem: deve ser adaptada ao contexto em que a imagem se encontra: identificar o tipo de imagem e personagem (foto, ilustração, mapa, gráfico… e “o que / quem”); localizar (onde); descrever a ação (o que faz, como faz); e referenciar (quando).

Veja exemplo de texto alternativo para a imagem abaixo:

Galho de uma caramboleira com uma fruta verde

2 - Ícones que funcionam como botões: o texto alternativo deve informar a ação da pessoa usuária e para onde ela será direcionada. 

Veja um exemplo:

Como descrever uma lupa que funciona como um botão de busca? O texto alternativo para descrever o botão seria “Consultar pedidos”. Não é necessário colocar “Lupa consultar pedidos”. O ícone é um apoio visual do texto, mas não é informativo.

ATENÇÃO:

Cuidado com o uso de textos dentro de imagens: recomenda-se o mínimo de texto em uma imagem, pois os leitores de tela não leem texto renderizado como imagem, constituindo-se assim uma barreira grave de acessibilidade. O texto complementar deve vir em em formato html logo abaixo da imagem ou em outra página com mais detalhes sobre o assunto. 

Contraste de cores: contrastes inadequados em imagens, gráficos e outros elementos visuais podem criar barreiras e causar impactos na experiência de navegação. O contraste está relacionado às cores, e também ao tamanho da fonte. Se a fonte é muito fina e pequena, o contraste deve ser maior.

LINKS

A construção de links deve ser feita de forma cuidadosa e com auditoria periódica para verificação de links quebrados. Entre as recomendações do Modelo de Acessibilidade em Governo eletrônico (e-MAG), estão as seguintes:

Descreva links de forma clara e sucinta: identifique claramente o destino de cada link. Além disso, é preciso que o texto do link faça sentido mesmo quando isolado do contexto da página.

• Exemplo Incorreto: Clique aqui para saber mais a respeito de acessibilidade.

• Exemplo Correto: Saiba mais sobre acessibilidade

ATENÇÃO:

“Não se deve fazer a utilização de links do tipo “clique aqui”, “leia mais”, “mais”, “saiba mais”, “veja mais”, “acesse a lista”, pois estas expressões não fazem sentido fora do contexto. Muitos usuários de leitores de tela navegam por links, tornando descrições como “Clique aqui”, “Veja mais” insuficientes para o usuário saber o destino do link, ou localizá-lo na página.” (e-MAG)

ACESSIBILIDADE

A edição do site do Governo Digital deve considerar os diversos usos e acessos ao ambiente, fazendo uso das recomendações:

• do e-MAG - Modelo de Acessibilidade em Governo Eletrônico;

• da Cartilha de Orientação para Construção de Conteúdo Acessível no gov.br; e

• do Material de apoio para implementação de acessibilidade em sites.

CADASTRO DE EDITORES

Para edição de conteúdo do site do Governo Digital, acesse o formulário de cadastro. 

AJUDA

O site Gestão de Conteúdo disponibiliza uma série de vídeos, manuais e tutoriais de ajudas para os conteudistas e administradores dos sites gov.br.

SERVIÇO DE SUPORTE

Para solicitar suporte para edição de conteúdo da plataforma GOV.BR, acesse o "GovSuporte".