Guia de Estilo do Portal Institucional Padrão

Transcrição

1 Guia de Estilo do Portal Institucional Padrão Identidade Padrão de Comunicação Digital do Poder Executivo Federal versão 5.0 /0

2 Edição versão data alteração.0 Novembro de 0 Criação do manual.0 Janeiro de 0 Check in e check out, Agenda, Banner Rotativo Destaques.0 Fevereiro de 0 Atualização do item de Agenda. Correções: Cores Correção dos HEXAS. Novo Módulos: Visão de álbuns e exibição de álbuns Maio de 0 Setembro de 0 Outubro de 0 Dezembro de 0 Reformulação do manual Atualização do item Planos e Programas Atualização do item Página de Destaque Atualização de nomenclatura Novo item: Portlets e cores da editorias.

3 Sumário Apresentação 06 Pilares de comunicação 08 Foco no público 09 Experiência digital comum 0 Acessibilidade Economicidade Diretrizes de linguagem Legenda Grid 5 Blocos 9 Tipografia Cores 7 Ícones 5 Elementos da Estrutura Principal Elementos da Estrutura Principal Barra Padrão da Identidade Padrão de Comunicação Digital do Governo Federal Cabeçalho 6 Coluna de menus Miolo 9 Rodapé 50 Barra Inferior da Identidade Padrão de Comunicação Digital do Governo Federal 55 Temas 57 Verde 58 Amarelo 59 Azul 60 Branco 6

4 Sumário 6 Planos e programas 6 Planos e programas 6 Links externos 5 Enquete 8 Redes sociais 7 Página de destaque 69 Apresentação 70 Agenda Dados e resultados 0 8 Módulos 85 Módulos 86 9 Portlets Apresentação Banner rotativo 87 Portal padrão coleção 5 Banner rotativo texto sobreposto 9 Portal padrão carrossel de imagens 50 Lista - últimos conteúdos 95 Portal padrão galeria de vídeos 5 Galeria de vídeos 00 Portal padrão galeria de áudios 56 Galeria de álbuns 05 Portal padrão de áudio 59 Galeria de imagens 0 Portal padrão de vídeo 6 Player de áudio 5 Galeria de áudio 0

5 Sumário 0 Templates 6 Agenda 65 Acessibilidade e responsividade 5 Alto contraste 6 Capa 67 Texto corrido 75 Listagem 78 Desenvolvimento Folha de estilo Listagem em colunas 80 Listagem de álbuns 8 Manuais da Identidade Padrão de Comunicação Digital do Poder Executivo Federal 6 Listagem em conteúdos 8 Fotos 87 Manchete 89 Bloco temático de chamadas 0 Banners 08 Formatos 09 Funcionalidades avançadas 6 Busca Multifacetada 8

6 . Apresentação

7 Apresentação Este Guia de Estilo foi desenvolvido com o objetivo de apresentar as funções, características e relações estruturais entre os diversos elementos do projeto gráfico, possibilitando a compreensão do conjunto e ao mesmo tempo oferecendo as informações necessárias para sua correta replicação. O Guia de Estilo é um complemento do Manual de Diretrizes. O documento, disponível para consulta no Site da Secretaria de Comunicação Social da Presidência da República, deve ser consultado em primeiro lugar, já que traz os conceitos da Identidade Padrão de Comunicação Digital, além de apresentar as funções, vantagens e características do Portal Institucional Padrão. Os módulos e demais peças gráficas listados e explicados neste manual são exemplos ideais de aplicação nos portais de órgãos do Poder Executivo Federal. Independentemente do sistema de gestão de conteúdo (CMS) escolhido, cada órgão deve perseguir este ideal para a correta padronização de estilo. 07

8 . Pilares de Comunicação Razões para padronização: foco no público, experiência digital comum, acessibilidade e economicidade.

9 Pilares de comunicação Foco no público Foco no público Os conteúdos das propriedades digitais são disponibilizados com foco no público principal. Aliado a uma linguagem multimídia de fácil entendimento, os sites e portais tornam-se acessíveis a todos. O objetivo aqui é que o interessado consiga, de fato, ter conhecimento e compreensão do assunto procurado. 09

10 Pilares de comunicação Experiência digital comum Experiência digital comum A fim de facilitar a identificação do público com as propriedades digitais ligadas ao governo federal, a Identidade Padrão de Comunicação Digital do Governo Federal foi desenvolvida equilibrando os padrões estabelecidos e as peculiaridades de cada órgão. Sempre com o foco no público, a padronização foi intencional para que o cidadão não tenha dificuldade em conseguir informações ao acessar as propriedades digitais do governo. Além da facilidade de acesso, acredita-se que a adoção das diretrizes da Identidade Padrão de Comunicação Digital pelos órgãos do Poder Executivo Federal gere mais credibilidade e posicionamento ao próprio governo ao criar uma identificação das propriedades digitais governamentais disponíveis à população. O Portal Institucional Padrão segue esta diretriz, conforme poderá ser visto nos próximos capítulos deste Guia de Estilo. 0

11 Pilares de comunicação Acessibilidade e Responsividade Acessibilidade e Responsividade Segundo o Decreto nº 5.96, de 00, que torna obrigatória a implementação dos critérios de acessibilidade, a Identidade Padrão de Comunicação Digital do Governo Federal busca garantir o acesso a todos, independentemente da forma ou dispositivo de conexão, assegurando a acessibilidade digital e o acesso ubíquo. Tendo em vista o crescimento no acesso à internet por meio de dispositivos móveis, a construção do Portal Padrão ocorreu de maneira responsiva. Isto é, o Portal já é concebido de maneira flexível para se adaptar aos diferentes tamanhos de tela, atendendo a uma ampla variedade de dispositivos, mantendo a gestão do conteúdo organizada e eficaz. Dessa maneira, o acesso é garantido em várias plataformas.

12 Pilares de comunicação Economicidade Economicidade A Identidade Padrão de Comunicação Digital do Governo Federal busca identificar iniciativas desenvolvidas por um órgão e que possam ser aplicadas em outros órgãos do Poder Executivo Federal. São premissas da Identidade Padrão de Comunicação Digital o uso ampliado, o desenvolvimento colaborativo e a replicação de soluções. Um exemplo de aplicação dessas premissas é o Portal Padrão, criado com uma estrutura reutilizável, ou seja, que pode ser aplicada em diferentes órgãos. Dessa forma não é preciso investir em uma nova arquitetura e criação, podendo reaproveitar as ferramentas já organizadas e pré-formatadas. O Portal Padrão é constituído de módulos prontos para serem desenvolvidos, possibilitando redução de custo material e humano.

13 . Diretrizes de Linguagem Detalhes sobre o uso correto de cores, tipografias e recomendações gerais de boas práticas de design. É recomendada a utilização das guias a seguir para personalizar o Portal Padrão, de modo a garantir que todo o conteúdo governamental publicado na internet seja íntegro e confiável. As diretrizes estão adequadas ao e-mag e ao projeto Tangram desenvolvido pela Diretoria de Tecnologia da Presidência da República - Ditec.

14 Diretrizes de Linguagem Legenda Legenda Elementos indicativos para especificação de leiautes, elementos master e grids, no que tange: espaçamentos alinhamentos formatos características Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e ao centro, se o espaçamento vertical não for especificado). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e ao centro, se o espaçamento vertical não for especificado). Indica quando um elemento tem suas características descritas ao lado da imagem. Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e embaixo porém respeitando as margens especificadas). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e em cima porém respeitando as margens sempre que especificadas). 0 px 0 px Indica o espaçamento vertical entre dois elementos (seja um objeto, uma cor de fundo ou o limite do leiaute). Indica o espaçamento horizontal entre dois elementos (seja um objeto, uma cor de fundo ou o limite do leiaute). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e em cima, porém respeitando as margens especificadas). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e embaixo porém respeitando as margens sempre que especificadas).

15 Diretrizes de Linguagem Grid Grid Cabeçalho e rodapé à parte, o grid é formado por dois grupos principais de colunas: CABEÇALHO (HEADER) o grupo da esquerda, que conterá sempre o Coluna de Menus, tem 50 pixels. o grupo da direita, que receberá o conteúdo principal de cada página, tem 750 pixels. O espaçamento entre esses dois grupos será sempre de 60 pixels. Dentro do segundo grupo, o grid é dividido em colunas, que podem ser organizadas da seguinte forma: MENU LATERAL ÁREA DE CONTEÚDO Bloco de conteúdo com largura de 750 pixels; Bloco de conteúdo dividido em duas partes, sendo uma delas com 0 e outra com 90 pixels de largura Bloco de conteúdo dividido em duas partes, sendo uma delas com 90 e outra com 0 pixels de largura; Bloco de conteúdo divivido em três partes, todas com 0 pixels de largura; Bloco de conteúdo dividido em seis partes, todas com 00 pixels de largura. RODAPÉ (FOOTER) O espaçamento entre elas sempre será de 0 pixels. 5

16 Diretrizes de Linguagem Grid Grid telas de 0 px de largura Grid da área central (menu e conteúdo), aplicado ao leiaute em uma área de 0 px (padrão de largura da janela de navegadores). Área de largura variável de acordo com tamanho da janela do navegador. 0 px 6

17 Diretrizes de Linguagem Grid Grid telas menores que 0 px de largura Grid da área central (menu e conteúdo), aplicado ao leiaute em uma área de 0 px (padrão de largura da janela de navegadores). Neste caso, o Coluna de Menus é suprimido e vira um botão abaixo do cabeçalho. Área de largura variável de acordo com tamanho da janela do navegador. 768 px 7

18 Diretrizes de Linguagem Grid Grid telas menores que 768 px de largura Grid do leiaute em uma área de 0 px (otimizado para telas de smartphones). Neste caso, o Coluna de Menus é suprimido e vira um botão abaixo do cabeçalho. Os módulos que compunham uma mesma linha, ocupando originalmente as colunas, passam todos para apenas uma coluna. Área de largura variável de acordo com tamanho da janela do navegador. 0 px 8

19 Diretrizes de Linguagem Blocos Blocos construção de blocos e caixas Blocos são unidades estruturais que delimitam e organizam módulos. Linhas-guia são utilizadas para orientar a construção de blocos de informação e caixas de sustentação, padronizando também as bordas e cantos das caixas e o uso de ícones. Os elementos já estão prédefinidos no Portal Padrão e seguem as regras a seguir. Desta forma, caixas da cor cinza com bordas de px, terão cantos arredondados. Em imagens, os cantos arredondados deverão possuir px. Preferencialmente, devem ser utilizadas caixas com raio de px. px Podem ser utilizadas, em algumas situações, caixas sem cantos arredondados. É o caso dos conteúdos textuais de cada página principal e dos chapéus das editorias presentes nos sites. No capítulo Módulos há o detalhamento dos blocos e caixas para cada módulo. 9

20 Diretrizes de Linguagem Blocos Blocos estilo e acabamento CERTO ERRADO As caixas podem ter bordas de px de espessura em linha contínua, sempre acompanhando toda sua extremidade. As abas inativas devem ficar oticamente sob a caixa principal. No entanto, não devem se esconder atrás do conteúdo. 0

21 Diretrizes de Linguagem Tipografia Tipografia Para a apresentação de todo o conteúdo dos novos sites do Governo Federal, somente duas fontes são utilizadas. São elas: Open Sans (Google Fonts) Arial A decisão pela escolha das duas fontes foi tomada a fim de trazer harmonia, padronização, conforto na leitura e acessibilidade. Open Sans & Arial Cada uma delas possui características próprias e ocasiões de uso muito claras que serão apresentadas nas páginas a seguir. A unidade de medida pt é uma referência Para para a o elaboração designer (arte) do CSS, elaborar o desenvolvedor o leiaute. poderá Para a elaboração usar em, % do CSS, ou px, o desenvolvedor como indicado poderá usar pelo em, WC % ( ou px, como indicado pelo WC (

22 Diretrizes de Linguagem Tipografia Tipografia open sans REGULAR Open Sans Bold Link para download da fonte Open Sans. regular AaBbCcDdEeFfGgHh Bold AaBbCcDdEeFfGgHh Font stack: Open Sans, Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Open Sans,...}

23 Diretrizes de Linguagem Tipografia Tipografia Arial regular Arial bold regular AaBbCcDdEeFfGgHh Bold AaBbCcDdEeFfGgHh Font stack: Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Arial,...}

24 Diretrizes de Linguagem Tipografia Tipografia comparativo entre famílias tipográficas Enquanto a Open Sans tem um desenho mais suave, mais aberto e com hastes que afinam nas junções, a Arial tem um desenho mais pesado, com menor desproporção entre hastes verticais e horizontais e com letras mais fechadas (Ex. letra a e letra c ). Open sans arial

25 Diretrizes de Linguagem Tipografia Tipografia usos específicos Em geral, a fonte Open Sans é utilizada em títulos de páginas, títulos de módulos e links de navegação - itens de menu, links do cabeçalho (header), rodapé (footer), módulos, etc. - e textos secundários. A fonte Arial é utilizada em chamadas, linhas finas e textos corridos. A exceção é o chapéu, que apesar de ser uma informação referente diretamente à notícia, usa Open Sans por dois motivos: aplicada em um tamanho menor e em caixa alta, a Open Sans contrasta (em peso e tamanho) com os outros componentes da notícia (chamada/linha fina), tornando o conjunto mais equilibrado. no chapéu, é utilizada a cor da editoria. Por isso, tem uma ligação visual direta com o título da editoria presente no módulo. Para reforçar esse vínculo, esses dois elementos utilizam também a mesma fonte. 5

26 Diretrizes de Linguagem Tipografia Tipografia tamanhos de fonte e entrelinhas As especificações de fonte serão detalhadas em cada módulo e nos templates ao longo deste manual. Para textos corridos, normalmente utilizados em notícias, releases, relatórios, entre outros, deve ser seguido o seguinte padrão: Texto corrido Arial Regular, 5 px Entrelinhas: px cor: #798 Links no texto Arial Regular, 5 px Entrelinhas: px cor: #c67cd Links no texto (hover) Arial Regular, 5 px Entrelinhas: px cor: #798 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6

27 Diretrizes de Linguagem Cores Cores Para apresentar a imagem do Governo Federal a partir de uma identidade única e fornecer maior articulação aos órgãos, foi desenvolvida uma paleta de cores derivadas de signos nacionais, tais como a Bandeira Nacional, os brasões, insígnias, entre outros. A seguir serão dispostos os discos cromáticos (paletas de cores) com suas derivações, complementos e recomendações. A cor exerce um papel fundamental ao exprimir a atmosfera do Governo Federal. Ela contém, subjetivamente, um código cultural que ressalta a importância dos signos brasileiros. A paleta foi desenvolvida sob os parâmetros de acessibilidade expostos no e-mag. As variações e combinações propostas podem ser intercaladas e usadas de diferentes formas, desde que estejam sempre de acordo com as instruções de acessibilidade do manual. A percepção de cor depende não apenas da pigmentação das superfícies em si, mas também da intensidade e do tipo de tom aplicados a ela. Esses fatores são determinantes no uso de degradês e contrastes. Dessa forma, sugere-se aplicar sempre o maior contraste possível sem que se perca a riqueza cromática da paleta. As cores presentes no disco cromático ao lado são as cores principais, portanto, são as cores temas. Dessa forma, nenhum portal poderá ser desenvolvido usando outra cor como tema. 7

28 Diretrizes de Linguagem Cores Cores disco cromático É possível combinar as quatro cores entre si. No entanto, sugere-se que não sejam usadas sempre juntas, possibilitando assim uma maior aderência e discernimento dentro do Portal Padrão. Para facilitar a escolha, foi selecionado um conjunto de duas cores complementares para cada matiz. Elas podem ser seguidas nessa orientação ou invertidas quando necessário. Verde 60% Amarelo 0% Azul 0% 60% Branco 0% Verde 0% Amarelo Amarelo 60% Azul 0% Branco 0% 60% Azul 0% Branco 0% Verde O modelo de leiaute com as cores de todos os temas se encontra no Manual de Diretrizes. 8

29 Diretrizes de Linguagem Cores Cores valores Cores em RGB e hexadecimal. CORES PRIMÁRIAS Em cabeçalhos e elementos de destaque, a cor primária branca é substituída pela cor cinza com o intuito de não ser confundida em fundos brancos, que estarão desta cor na maior parte da extensão dos sites baseados no Portal Padrão. HEX: RGB: #958 HEX: #F7C5 HEX: #E67B HEX: #ECEDF RGB: RGB: RGB: 7 As cores secundárias são variações cromáticas dentro dos tons da paleta principal e são utilizáveis em conjunto com as mesmas em chapéus, cabeçalhos (headers) de matérias e textos destacados. CORES SECUNDÁRIAS HEX: #F8F0 RGB: HEX: RGB: #8A5B HEX: RGB: #FFFFFF HEX: RGB: #76C HEX: RGB: #FDF HEX: RGB: # HEX: RGB: #0C90 76 HEX: RGB: #AE 6 0 9

30 Diretrizes de Linguagem Cores Cores degradês Exemplos de aplicação. Certo Degradês com efeito moderado de luminosidade e volume HEX: #788C RGB: 6 HEX: #F0FF RGB: 0 HEX: #FCDDE RGB: 5 78 HEX: #60BD RGB: HEX: #0050F RGB: HEX: #ECEDF RGB: 6 7 HEX: #F9C0 RGB: 9 96 HEX: #A7BC RGB: Errado Cores diferentes da paleta, com efeitos fortes de transição de cores Degradês devem obrigatoriamente ser aplicados partindo da base inferior ao topo e do tom mais escuro ao mais claro, somente nos cabeçalhos (headers) de cada site. 0

31 Diretrizes de Linguagem Ícones Ícones Os pictogramas auxiliam no entendimento do conteúdo e podem ser utilizados em conjunto com sua legenda ou sozinhos. Foi criado um repositório de ícones que pode ser reutilizado conforme a necessidade. Para casos nos quais não existam ícones pré-estabelecidos, os mesmos podem ser criados baseando-se na utilização de no máximo duas cores (quando cercado de quadrado colorido), na simplicidade e na manutenção de áreas de respiro, como presentes nos ícones a seguir. Os ícones também devem ser objetivos e fáceis de entender ao primeiro olhar contendo o mínimo possível de linhas e ornamentos, como mostrado nos exemplos a seguir. Devem ser observados os seguintes aspectos para a criação de novos ícones dentro da identidade padrão: utilização do grid de montagem, enquadramento perfeito no pixel, facilidade de cognição, objetividade e literalidade. Ícones de conteúdo (utilizados para direcionar a outras mídias) Versões reduzidas Ícones de funcionalidade (utilizados para acessar serviços e aplicações) Ícones dentro do quadrado são botões e geralmente acompanham um texto clicável (call-to-action). Os ícones soltos são apenas indicativos. Para conhecer todos os ícones do repositório e informações detalhadas sobre sua aplicação, acesse aqui.

32 . Elementos da Estrutura Principal Neste capítulo serão apresentados os componentes visuais que, juntos, formam os principais leiautes Portal Padrão: desde elementos avulsos até módulos.

33 Elementos da Estrutura Principal Elementos da Estrutura Principal Os elementos principais de qualquer site baseado no Portal Padrão são os seguintes: Barra Padrão da Identidade Padrão de Comunicação Digital do Governo Federal Cabeçalho (header) Coluna de Menus Miolo 5 6 Rodapé (footer) Barra Inferior da Identidade Padrão de Comunicação Digital do Governo Federal Eles devem estar presentes em todos os sites e em todas as páginas modelo (templates) desse mesmo Portal Padrão. 5 6

34 Elementos que compõem a Identidade Padrão de Comunicação Digital do Governo Federal Barra de Identidade Visual do Governo Federal na Internet Barra de Identidade Visual do Governo Federal na Internet 5 6 A Barra é parte constituinte da Identidade Padrão de Comunicação Digital do Governo Federal, tendo como funções identificar, padronizar e integrar sites e portais que devem seguir essas diretrizes. A barra também tem a função de proporcionar acesso direto ao Portal Brasil, às informações públicas de acordo com a Lei de acesso à informação, aos canais de participação social, ao portal de serviços prestados pelos diversos órgãos, página com toda a legislação brasileira e link para os canais de comunicação do Governo Federal. A Barra de Identidade Visual tem como característica a manutenção eficiente, permitindo intervenções únicas para replicação em todos os órgãos governamentais. Também permite mensuração estatística por meio de rastreamento dos hábitos de navegação dos usuários em todos os órgãos governamentais com uma única fonte. Eventualmente, a barra poderá ser customizada pela Secom em ocasiões especiais, como a proximidade de grandes eventos e ativações de campanhas. 5 6 Para oferecer manutenção eficiente, a barra está hospedada no Serviço Federal de Processamento de Dados (Serpro). As instruções para o uso da Barra de Identidade podem ser acessadas no site do Governo Eletrônico. Portal Brasil: acesso ao Portal Brasil, responsável por divulgar serviços e informações, com linguagem acessível ao cidadão, de temas dos ministérios e órgãos. Acesso à Informação: link para a página do Portal Brasil, que reúne atalhos para a Lei de Acesso à Informação, Portal da Transparência, Dados Abertos e o Portal Brasileiro de Dados Geoespaciais. Participe: Link para a página do Portal Brasil que reúne atalhos para os canais de Participação Social. Serviços: link para Guia de Serviços. Legislação: link para o Portal de Legislação do Governo Federal. Canais: Link para página do Portal Brasil, que apresenta os principais canais de comunicação do Governo Federal.

35 Elementos que compõem a Identidade Padrão de Comunicação Digital do Governo Federal Barra de Identidade Visual do Governo Federal na Internet Barra de Identidade Visual do Governo Federal na Internet 5 px 8 px px 0 px 6 px Composição da barra: Acesso à informação Open Sans Semibold, px, #606060/ R: 96 G: 96 B: 96 Fundo da barra #FFF/ R: G: B: Linha da barra #DFDFDF/ R: G: B: 5

36 Elementos da Estrutura Principal Cabeçalho Cabeçalho O cabeçalho (header) traz as informações básicas de identificação de um site como o nome, a qual ministério está subordinado, além dos menus de serviço, acessibilidade e redes sociais e a ferramenta de busca. Mais detalhes sobre conceituação desta parte da estrutura podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. Confira a seguir a composição do cabeçalho. Nas próximas páginas, a mesma estrutura é apresentada de acordo com as cores disponíveis para cada tema (template) do portal: Atalhos de teclado Arial Regular, 0 px Denominação do órgão Open Sans Regular, px Subordinação do órgão Open Sans Regular, px Barra de Acessibilidade Open Sans Regular, 0 px Campo de Busca Open Sans Regular, px Barra de Serviços Open Sans Regular, px Migalhas de pão (breadcrumb) Open Sans Regular, 0 px, caixa alta * As migalhas de pão (breadcrumb) podem não aparecer em algumas páginas, como, por exemplo, na página inicial. 9 0 Para compor a padronização de estilo (CSS), o texto não deve ser escrito em caixa alta, mas sim em caixa baixa e, então, indicado para ser transformado em caixa alta. Redes Sociais e RSS Os ícones de Redes Sociais e RSS disponíveis para utilização devem ser obrigatoriamente retirados do repositório. Caso algum ícone de rede social não seja contemplado no repositório, ele deve ser criado seguindo as diretrizes deste Guia, mas respeitando a identidade da plataforma em questão. Barra de Idiomas Open Sans Regular, 0 px Nome principal Open Sans Extrabold, 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como 7 indicado pelo WC ( 8 6

37 Elementos da Estrutura Principal Cabeçalho Cabeçalho verde Composição do cabeçalho (header): Atalhos de teclado #DCFFE/ R: 0 G: 55 B: 7 0 Barra de Idiomas #FFFFFF/ R: 55 G: 55 B: 55 Denominação do órgão #FFFFFF/ R: 55 G: 55 B: 55 Nome principal #FFFFFF/ R: 55 G: 55 B: 55 Subordinação do órgão #FFFFFF/ R: 55 G: 55 B: 55 Base cabeçalho topo mais claro: #788C/ R: G: 6 B: base mais escura: #0050F/ R: 0 G: 8 B: 5 Base barra de serviços #00a/ R: G: 66 B: 0 5 Barra de Acessibilidade #DCFFE/ R: 0 G: 55 B: Cor do ícone lupa #050/ R: G: 8 B: Barra de Serviços #FFFFFF/ R: 55 G: 55 B: Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 9 Redes Sociais e RSS #DAEADD/ R: 8 G: B: 7

38 Elementos da Estrutura Principal Cabeçalho Cabeçalho amarelo Composição do cabeçalho (header): Atalhos de teclado #06F/ R: G: 9 B: 0 Barra de Idiomas #06D/ R: G: 9 B: 09 Denominação do órgão #06F/ R: G: 9 B: Nome principal #06F/ R: G: 9 B: Subordinação do órgão #06F/ R: G: 9 B: Base cabeçalho topo mais claro: #FCDDE/ R: 5 G: B: 78 base mais escura: ##F9C0/ R: 9 G: 96 B: Base barra de serviços #e8ab0/ R: G: 7 B: 5 6 Barra de Acessibilidade #06F/ R: G: 9 B: Cor do ícone lupa #06F/ R: G: 9 B: Barra de Serviços #06F/ R: G: 9 B: Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 9 Redes Sociais e RSS #06F/ R: G: 9 B: 8

39 Elementos da Estrutura Principal Cabeçalho Cabeçalho azul Composição do cabeçalho (header): Atalhos de teclado #DCECFF/ R: 0 G: 6 B: 55 0 Barra de Idiomas #FFFFFF/ R: 55 G: 55 B: 55 Denominação do órgão #FFFFFF/ R: 55 G: 55 B: 55 Nome principal #FFFFFF/ R: 55 G: 55 B: 55 Subordinação do órgão #FFFFFF/ R: 55 G: 55 B: 55 Base cabeçalho base mais clara: #A7BC/ R: 58 G: B: 88 topo mais escura: #60BD/ R: G: 96 B: 89 Base barra de serviços #0e097/ R: G: 6 B: 5 5 Barra de Acessibilidade #DCECFF/ R: 0 G: 6 B: Cor do ícone lupa #FDA/ R: G: 77 B: Barra de Serviços #FFFFFF/ R: 55 G: 55 B: Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 9 Redes Sociais e RSS #D7ECFF/ R: 5 G: 6 B: 55 9

40 Elementos da Estrutura Principal Cabeçalho Cabeçalho branco Composição do cabeçalho (header): Atalhos de teclado #C66CE/ R: G: 0 B: 06 0 Barra de Idiomas #E65C9/ R: 6 G: 00 B: 00 Denominação do órgão #C66CE/ R: G: 0 B: 06 Nome principal #C66CE/ R: G: 0 B: 06 Subordinação do órgão #C66CE/ R: G: 0 B: 06 Base cabeçalho topo mais claro: #F0FF/ R: 0 G: B: base mais escura: #ECEDF/ R: 6 G: 7 B: Base barra de serviços #cfd0d/ R: 07 G: 08 B: Barra de Acessibilidade #C66CE/ R: G: 0 B: 06 Cor do ícone lupa #FDA/ R: G: 77 B: Barra de Serviços #C66CE/ R: G: 0 B: Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 9 Redes Sociais e RSS #6CF/ R: 9 G: 00 B: 07 0

41 Elementos da Estrutura Principal Cabeçalho Cabeçalho Espaçamentos, alinhamentos e formatos. 8 px Campo de busca x 0 px Lupa 9 x 9 px Redes Sociais e RSS 0 x 0 px 5 px 0 px 7 px 0 px 0 px 8 px 5 px 0 px 5 px 7 px 0 px Barra de Serviços A cor da Barra de Serviços deve ser uma variação mais escura da cor principal do cabeçalho (header). São essas: 0 px 5 px VERDE: #000C/ R: 0 G: 66 B: BRANCO: #DADCD8/ R: 8 G: 0 B: 6 AMARELO: #F8BA07/ R: 8 G: 86 B: 7 AZUL: #0F098/ R: 5 G: 6 B: 5

42 Elementos da Estrutura Principal Cabeçalho Cabeçalho Espaçamentos para título de site com duas linhas de texto principal. 5 px 0 px 50 px

43 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus A Coluna de Menus apresenta ao visitante as diferentes áreas de um site. Mais detalhes sobre conceituação desta parte da estrutura podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas (exceção para a Página de Destaque. Suas cores podem variar entre azul e verde, de acordo com o template utilizado. Menu de Relevância Menu Principal Menu Acesso à Informação Centrais de Conteúdos O Menu de relevância não pode ser aplicado abaixo dos outros dois menus. Por ser organizado com itens de acordo com sua relevância, esse menu é normalmente usado para links que possam já estar ou não presentes no menu.

44 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas padrão (templates). 0 px Linha colorida sobre assunto 50 x px Fundo sob assuntos cor #EAEBEE 5 px Linha colorida acima e abaixo editoria aberta 50 x px px Linha divisória interna 50 x px cor #D6DCD7 0 px 5 Fundo sob editoria aberta nível selecionado cor #EAEBEE nível nível selecionado cor #EAEBEE cor #EEE5 nível nível selecionado cor #D9DADC cor #DDD5 nível nível selecionado cor #CACBCE cor #C9CACD 5 nível cor #CCC 0 px 5 px 5

45 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus verde A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas padrão (templates). Menu de Relevância 5 Open Sans Regular, px #C66CE/ R: G: 0 B: 0 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Bold, pt, CAIXA ALTA #00500F/ R: 0 G: 80 B: 5 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Regular, px #798/ R: G: B: 56 Menu secundário sobre o órgão/site nível - Item normal Open Sans Regular, px #798/ R: G: B: 56 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 - Item normal Open Sans Regular, px #798/ R: G: B: 56 a 5 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 5 Linha colorida acima e abaixo editoria aberta #0050f/ R: 0 G: 8 B: 5 6 Ícones de Centrais de Conteúdos #00d0e/ R: 99 G: 8 B: 0 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Enquanto houver sub nível, o título deve ser Open Sans Bold. 5

46 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus amarelo A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas padrão (templates). Menu de Relevância Open Sans Regular, px #06F/ R: G: 9 B: Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Bold, px, CAIXA ALTA #06F/ R: G: 9 B: Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Regular, px #798/ R: G: B: 56 5 Menu secundário sobre o órgão/site nível - Item normal Open Sans Regular, px #798/ R: G: B: 56 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 - Item normal Open Sans Regular, px #798/ R: G: B: 56 a 5 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 5 Linha colorida acima e abaixo editoria aberta #0050f/ R: 0 G: 8 B: 5 6 Ícones de Centrais de Conteúdos #06f/ R: G: 9 B: 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Enquanto houver sub nível, o título deve ser Open Sans Bold. 6

47 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus azul A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas padrão (templates). Menu de Relevância Open Sans Regular, px #C66CE/ R: G: 0 B: 06 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Bold, px, CAIXA ALTA #C66CE/ R: G: 0 B: 06 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Regular, px #798/ R: G: B: 56 5 Menu secundário sobre o órgão/site nível - Item normal Open Sans Regular, px #798/ R: G: B: 56 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 - Item normal Open Sans Regular, px #798/ R: G: B: 56 a 5 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 5 Linha colorida acima e abaixo editoria aberta #0050f/ R: 0 G: 8 B: 5 6 Ícones de Centrais de Conteúdos #659bf/ R: G: 89 B: 9 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Enquanto houver sub nível, o título deve ser Open Sans Bold. 7

48 Elementos da Estrutura Principal Coluna de Menus Coluna de Menus branco A Coluna de Menus deve sempre ocupar a coluna lateral esquerda do site, estando presente em todas as páginas padrão (templates). Menu de Relevância Open Sans Regular, 5 px #C66CE/ R: G: 0 B: 06 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Bold, px, CAIXA ALTA #C66CE/ R: G: 0 B: 06 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Regular, px #798/ R: G: B: 56 5 Menu secundário sobre o órgão/site nível - Item normal Open Sans Regular, px #798/ R: G: B: 56 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 - Item normal Open Sans Regular, px #798/ R: G: B: 56 a 5 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 5 Linha colorida acima e abaixo editoria aberta #0050f/ R: 0 G: 8 B: 5 6 Ícones de Centrais de Conteúdos #659bf/ R: G: 89 B: 9 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Enquanto houver sub nível, o título deve ser Open Sans Bold. 8

49 Elementos da Estrutura Principal Miolo Miolo Este elemento da estrutura do site é composto por módulos de visualização de conteúdo, uma ferramenta que permite destacar no miolo das capas das páginas principais (homes e subhomes) textos, áudios, imagens, vídeos e publicações em redes sociais. A definição, os formatos, as propriedades e comportamentos dos diferentes tipos de módulos criados para a Identidade Padrão de Comunicação Digital podem ser acessados no capítulo Módulos. 9

50 Elementos da Estrutura Principal Rodapé Rodapé O rodapé (footer) é a quarta parte da estrutura do site na Identidade Padrão de Comunicação Digital e reúne atalhos para diferentes áreas do site. Mais detalhes sobre conceituação desta parte da estrutura podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. Confira a seguir a composição de cores e fontes do rodapé. Nas próximas páginas, a mesma estrutura é apresentada de acordo com as cores disponíveis para cada tema (template) do portal: 0 px 8 px 6 px Título da coluna Itens da coluna Linha pontilhada vertical 00 px 8 px Base 50

51 Elementos da Estrutura Principal Rodapé Rodapé verde Composição de cores e fontes do rodapé (footer): Título da coluna Open Sans Bold, 8 px #6B06F / R: 97 G:76 B: Itens da coluna Open Sans Regular, px #ffffff / R: 55 G: 55 B: 55 Linha pontilhada vertical #80A887 / R: 8 G: 68 B: 5 Base # 0050f / R: 0 G: 8 B: 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5

52 Elementos da Estrutura Principal Rodapé Rodapé amarelo Composição de cores e fontes do rodapé (footer): Título da coluna Open Sans Bold, 8 px #06F/ R: G: 9 B: Itens da coluna Open Sans Regular, px #06F/ R: G: 9 B: Linha pontilhada vertical #06F/ R: G: 9 B: Base #f8c00/ R: 8 G: 95 B: 0 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5

53 Elementos da Estrutura Principal Rodapé Rodapé azul Composição de cores e fontes do rodapé (footer): Título da coluna Open Sans Bold, 8 px #ffffff/ R: 55 G: 55 B: 55 Itens da coluna Open Sans Regular, px #ffffff/ R: 55 G: 55 B: 55 Linha pontilhada vertical #8BACDF/ R: 9 G: 7 B: Base #659BF/ R: G: 89 B: 9 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5

54 Elementos da Estrutura Principal Rodapé Rodapé branco Composição de cores e fontes do rodapé (footer): Título da coluna Open Sans Bold, 8 px #C66CE / R: G:0 B:06 Itens da coluna Open Sans Regular, px #C66CE / R: G:0 B:06 Linha pontilhada vertical #C66CE / R: G:0 B:06 Base #d5d5d5 / R: G: B: Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5

55 Elementos da Estrutura Principal Barra Inferior da Identidade Padrão de Comunicação Digital do Governo Federal Barra Inferior da Identidade Padrão de Comunicação Digital Este elemento da estrutura principal é constituído do Selo de acesso à informação, com link para seu endereço eletrônico, e do logotipo do Governo Federal representando sua identidade visual. Logo abaixo, há a nota de direitos autorais e desenvolvimento, indicando a propriedade de conteúdo e de desenvolvimento CMS. 00 px 8 px 55

56 Elementos da Estrutura Principal Barra Inferior da Identidade Padrão de Comunicação Digital do Governo Federal Barra Inferior da Identidade Padrão de Comunicação Digital Confira ao lado a Barra Inferior da Identidade Padrão de Comunicação Digital segundo a cor do tema (template) escolhido para o site Barra inferior tema verde #000c / R: 0 G: 66 B: Barra inferior tema amarelo #f8f00 / R: G: B: 0 Barra inferior temas azul e branco #00b / R: 0 G: 66 B: 78 56

57 5. Temas Neste capítulo serão apresentados os temas: templates com variações de cores principais que compõem o visual do site.

58 Temas Verde Verde 58

59 Temas Amarelo Amarelo 59

60 Temas Azul Azul 60

61 Temas Branco Branco 6

62 6. Planos e Programas Neste capítulo serão apresentados os módulos que compõem a estrutura de informação visual do leiaute do site.

63 Planos e Programas Planos e Programas Os órgãos do Poder Executivo Federal que possuírem Planos e Programas deverão disponibilizar informações e serviços de utilidade pública de maneira uniforme, organizada e acessível para seus públicos. Uma das formas de apresentar um plano ou programa é por meio de um site independente. Este site terá obrigatoriamente o tema branco como identidade. Acesse o Manual de Diretrizes para mais detalhes sobre a apresentação de Planos e Programas em site independente e em site institucional. 6

64 Planos e Programas Cores Cores Tema Branco Ao criar um site independente para planos ou programas, o gestor de conteúdo deve, obrigatoriamente, utilizar o tema branco. HEX: #ECEDF RGB: 7 Desta maneira confere-se unidade e identidade a todos os sites de planos ou programas do governo federal. Confira ao lado as especificações relativas ao tema branco. HEX: #F0FF RGB: 0 HEX: #ECEDF RGB: 6 7 6

65 Planos e Programas Cabeçalho Cabeçalho branco O cabeçalho (header) do site independente de Planos e Programas deverá contar com a mesma estrutura do cabeçalho do Portal Institucional Padrão. 7 Barra de Serviços #C66CE/ R: G: 0 B: 06 0 Barra de Idiomas #E65C9/ R: 6 G: 00 B: 00 Mais detalhes sobre o cabeçalho de um site independente de Planos e Programas podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. Confira a seguir a composição do cabeçalho: 8 9 Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 Redes Sociais e RSS #6CF/ R: 9 G: 00 B: 07 Base cabeçalho topo mais claro: #F0FF/ R: 0 G: B: base mais escura: #ECEDF/ R: 6 G: 7 B: Base barra de serviços #cfd0d/ R: 07 G: 08 B: 0 Atalhos de teclado #C66CE/ R: G: 0 B: 06 Denominação do órgão #C66CE/ R: G: 0 B: 06 Nome principal #C66CE/ R: G: 0 B: Subordinação do órgão #C66CE/ R: G: 0 B: Barra de Acessibilidade #C66CE/ R: G: 0 B: 06 6 Cor do ícone lupa #FDA/ R: G: 77 B: 6 65

66 Planos e Programas Coluna de Menus Coluna de Menus azul (parte ) Como já visto anteriormente, a coluna de menus deve sempre ocupar a coluna lateral esquerda do síte, estando presente em todas as suas páginas. Menu de Relevância Open Sans Regular, px #06F/ R: G: 9 B: Para um site independente de Planos e Programas, devem ser observadas algumas particularidades, como por exemplo a inclusão da logo do Plano ou Programa. Mais detalhes podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. Logo do plano ou programa 50 x 50px 5 6 Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos Open Sans Bold, px, CAIXA ALTA #06F/ R: G: 9 B: Menu Principal / Menu Acesso à Informação / Centrais de Conteúdos #798/ R: G: B: Linha colorida sobre assunto 50 x px 7 Ícones de Centrais de Conteúdos #00d0e/ R: 99 G: 8 B: Fundo sob assuntos cor #EAEBEE 5 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Enquanto houver sub nível, o título deve ser Open Sans Bold. 66

67 Planos e Programas Coluna de Menus Coluna de Menus azul (parte ) Confira a seguir a configuração de um item aberto na coluna de menus de um site independente de Planos e Programas Linha colorida acima e abaixo editoria aberta #06F/ R: G: 9 B: Menu secundário sobre o órgão/ site - nível - Item normal Open Sans Regular, px #798/ R: G: B: 56 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 - Item normal Open Sans Regular, px #798/ R: G: B: 56 a 5 nível - Item Selecionado Open Sans Bold, px #798/ R: G: B: 56 Fundo sob editoria aberta nível selecionado cor #EAEBEE nível nível selecionado cor #EAEBEE cor #EEE5 nível nível selecionado cor #D9DADC cor #DDD5 nível nível selecionado cor #CACBCE cor #C9CACD 5 nível cor #CCC 0 67

68 Planos e Programas Rodapé Rodapé branco O rodapé (footer) de um site independente de Planos e Programas é semelhante ao de um Portal Institucional Padrão. Mais detalhes podem ser acessados no Manual de Diretrizes de Comunicação Digital do Governo Federal. Confira a seguir a composição de cores e fontes do rodapé: Título da coluna Open Sans Bold, 8 px #C66CE / R: G:0 B:06 5 Base da barra inferior #00b / R: 0 G: 66 B: 78 Itens da coluna Open Sans Regular, px #C66CE / R: G:0 B:06 Linha pontilhada vertical #C66CE / R: G:0 B:06 5 Base #d5d5d5 / R: G: B: Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 68

69 7. Página de Destaque Neste capítulo serão apresentadas as campanhas institucionais e de utilidade pública.

70 Página de Destaque Apresentação Apresentação O objetivo principal da Página de Destaque é criar uma identidade visual própria desvinculada do portal em que foi criada para realçar as campanhas institucionais e de utilidade pública ao cidadão realizadas pelos órgãos que compõem o Poder Executivo Federal. Acesse o Manual de Diretrizes para mais detalhes sobre a apresentação de Páginas de Destaque bem como informações sobre as funções, vantagens e características da Identidade Padrão de Comunicação Digital do Governo Federal. 70

71 Página de Destaque Legenda Legenda Elementos indicativos para especificação de leiautes, elementos master e grids, no que tange: espaçamentos alinhamentos formatos características Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e ao centro, se o espaçamento vertical não for especificado). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e ao centro, se o espaçamento vertical não for especificado). Indica quando um elemento tem suas características descritas ao lado da imagem. Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e embaixo porém respeitando as margens especificadas). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e em cima porém respeitando as margens sempre que especificadas). 0 px 0 px Indica o espaçamento vertical entre dois elementos (seja um objeto, uma cor de fundo ou o limite do leiaute). Indica o espaçamento horizontal entre dois elementos (seja um objeto, uma cor de fundo ou o limite do leiaute). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à esquerda (e em cima, porém respeitando as margens especificadas). Indica que o alinhamento do texto dentro do elemento no qual ele está inserido é à direita (e embaixo porém respeitando as margens sempre que especificadas). 7

72 Página de Destaque Grid Grid O grid é formado por um único grupo de colunas: O espaçamento entre as colunas será sempre de 0 pixels. CABEÇALHO (HEADER) Essas colunas podem ser organizadas da seguinte forma: Bloco de conteúdo com largura de 960 pixels; Bloco de conteúdo dividido em duas partes, sendo uma delas com 60 e outra com 00 pixels de largura Bloco de conteúdo divivido em três partes, todas com 00 pixels de largura; ÁREA DE CONTEÚDO RODAPÉ (FOOTER) 7

73 Página de Destaque Grid Grid telas de 0 px de largura Grid da área central (menu e conteúdo), aplicado ao leiaute em uma área de 0 px (padrão de largura da janela de navegadores). Área de largura variável de acordo com tamanho da janela do navegador. 960 px 60 px 00 px 00 px 00 px 00 px 0 px 7

74 Página de Destaque Estrutura Estrutura A Página de Destaque possuiu uma versão mais simplificada em relação à estrutura do Portal Institucional Padrão. Ao invés do formato em C, com cabeçalho, coluna de menus e rodapé, a Página de Destaque prioriza a área de miolo e simplifica o espaço destinado ao cabeçalho e ao rodapé. Por fim, a coluna de menus deixa de ser vertical e passa a ocupar, quando necessário, o espaço destinado para a Barra de Serviços. Página de Destaque Portal Institucional Coluna Cabeçalho Rodapé 7

75 Página de Destaque Cabeçalho Cabeçalho O cabeçalho da Página em Destaque é uma versão reduzida em relação à estrutura definida para um Portal Institucional. A Barra Padrão do Governo é o único elemento a ser repetido nas duas estruturas. Ela deve ser mantida para identificar que todo o conteúdo faz parte da propriedade digital do Poder Executivo Federal. Como é comum a todos os sites que integram o Poder Executivo Federal, a atualização da barra não é feita no ambiente de gestão de conteúdo dos portais institucionais. O cabeçalho contém a identificação da campanha, menu de teclas de atalho, menu de acessibilidade e o menu de navegação horizontal (este apenas quando necessário). Como a Página de Destaque irá destacar seus conteúdos em uma única página e não haverá aprofundamento sobre o tema, o campo de busca e o mapa do site foram retirados do cabeçalho. O menu com ícones para as redes sociais também foi retirado do cabeçalho pois não é recomendada a criação de perfis específicos para uma campanha. O destaque para as interações nos citados sites deve ser realizado na seção Área de Conteúdo. 75

76 Página de Destaque Cabeçalho Cabeçalho Na área destinada à identificação da campanha, deve-se sempre seguir a imagem ao lado com a palavra Campanha ocupando o espaço conhecido no Portal Institucional como Denominação do Órgão e o nome pelo qual a campanha será batizada no espaço denominado Nome do Órgão. Importante: nenhum item deste menu é obrigatório, ficando a equipe de conteúdo livre para definir quais serão usados. Confira os leiautes criados para os itens que formam o menu horizontal. 0 A migalha de pão (breadcrumb) é própria e considera a capa da Página de Destaque como página inicial. O menu de navegação horizontal não obrigatório fica localizado abaixo do cabeçalho e alinhado à esquerda (no lugar ocupado pela Barra de Serviço no Portal Institucional, seguindo a formatação: O que é? link texto que irá apresentar a campanha; 5 Participe informações sobre como é feita a interação entre o público e o órgão responsável; Divulgação área para publicação de peças da campanha que possam ser utilizadas por outros órgãos do Poder Executivo Federal; 7 Legislação área para divulgação de legislação própria sobre a campanha. 8 Participantes informações sobre os órgãos parceiros da campanha; 9 Contato área de contato com o órgão ou link para página com informações dos gestores da campanha; 76

77 Página de Destaque Cabeçalho Cabeçalho Confira a seguir a composição de cores, fontes, espaçamentos e alinhamentos do cabeçalho de uma Página de Destaque: Atalhos de teclado #C66CE/ R: G: 0 B: 06 7 Identificação da campanha #C66CE/ R: G: 0 B: Nome da campanha #C66CE/ R: G: 0 B: 06 Barra de Acessibilidade #C66CE/ R: G: 0 B: 06 8 px 5 6 Menu de navegação horizontal #C66CE/ R: G: 0 B: 06 Migalhas de pão (breadcrumb) #C66CE/ R: G: 0 B: 06 5 px 5 px 5 px 8 px 8 px 7 Base cabeçalho topo mais claro: #F0FF/ R: 0 G: B: base mais escura: #ECEDF/ R: 6 G: 7 B: 8 Base menu de navegação horizontal #cfd0d/ R: 07 G: 08 B: 0 77

78 Página de Destaque Menu Menu Confira abaixo o layout dos itens de menu de uma Página de Destaque O que é Participe Divulgação Legislação Participantes 78

79 Página de Destaque Rodapé Rodapé Como é um site que se resolve em apenas uma página, a formatação do rodapé da Página de Destaque é diferente daquela apresentada nos portais institucionais. Como não existem links de primeiro nível, barra de serviço, menu de redes sociais e de navegação, o local será preenchido com atalhos para os órgãos do Poder Executivo Federal que fazem parte da campanha. O rodapé com os atalhos para demais órgãos só deverá ser configurado se houver uma parceria entre dois ou mais órgãos e instituições do Poder Executivo Federal. São mantidas obrigatoriamente ao fim da página a barra inferior com atalho para o site Acesso à Informação e a nota de direitos autorais e de desenvolvimento. Confira na próxima página o exemplo e a composição do rodapé de uma Página de Destaque. 79

80 Página de Destaque Rodapé Rodapé Composição de cores, fontes, espaçamentos e alinhamentos do rodapé: Itens do rodapé Open Sans Regular e Bold px #C66CE / R: G:0 B:06 Base #d5d5d5 / R: G: B: Base da barra de acesso à informação #00b / R:0 G:66 B:78 Logo do Governo px 6 px 80

81 Página de Destaque Área de Conteúdo Área de Conteúdo Espaço destinado para a publicação de conteúdo relativo à campanha. Possui um grid mais largo (do que ao aplicado no Portal Institucional) e conta com a ferramenta de exibição de imagem de fundo (background). Miolo Apesar de a área destinada ao conteúdo ter aumentado, não foi preciso realizar alterações nas configurações dos módulos de visualização de conteúdo (tiles). Os módulos que podem ser aplicados na Página de Destaque já foram listados no capítulo Orientações editoriais. A configuração desses módulos pode ser acessada no Manual de Gestão de Conteúdo do Portal Institucional Padrão - CMS Plone, disponível para consulta e download no Site Secom. A especificação técnica de cada um desses módulos pode ser encontrada no, também disponível para consulta e download no site da referida secretaria. Além daqueles já desenvolvidos, um novo módulo foi criado especificamente para a Página de Destaque. O tile Espaçador permite a inserção de texto alternativo (ALT) a ser exibido apenas para leitores de tela e na versão responsiva do site, além de indicar espaçamento vertical na capa para que a imagem de fundo aplicada não entre em conflito com outras chamadas. Imagem de fundo (background) Quando usada sua aplicação não é obrigatória -, a imagem de fundo da capa deverá atender algumas especificações. O arquivo tem de ser gravado com uma resolução de 7 dpi (dots per inches) e com a largura em 960 pixels (a altura é livre). Cada órgão/instituição tem a liberdade de produzir as peças gráficas, que irão ambientar o visitante à campanha que se quer destacar. As equipes envolvidas no processo de criação devem levar em conta possíveis limitações de altura da imagem ou de posicionamento de uma mensagem escrita para evitar interferências entre a imagem e demais módulos que irão fazer parte da capa. Por conta da acessibilidade, será preciso utilizar o módulo Espaçador sempre que uma imagem de fundo for aplicada (mesmo que não seja preciso definir um espaçamento vertical). É este módulo que garante aos programas que fazem leitura de tela a possibilidade de traduzir uma imagem em texto. 8

82 Página de Destaque Área de Conteúdo Área de Conteúdo Redes sociais Embora não seja recomendada a criação de perfis em redes sociais exclusivos para campanhas, os perfis que já existem para este fim devem ser divulgados. Recomenda-se o uso do módulo destinado às redes sociais Twitter e Facebook, já configurados e aplicados no Portal Institucional Padrão para exercer esta função. Quando não houver perfis próprios para as campanhas, o gestor de conteúdo deverá apresentar as interações que ocorrem nos perfis institucionais. 8

83 Página de Destaque Área de Conteúdo Área de Conteúdo Exemplos de aplicação Seguem abaixo exemplos de aplicação dos miolos. Com imagem de destaque Sem imagem de destaque Imagem de fundo e conteúdo horizontal Imagem de fundo e conteúdo vertical 8

84 Página de Destaque Tema Tema Para a Página de Destaque foi criado um tema específico (da cor cinza) para receber as alterações no cabeçalho, coluna de menus, rodapé e miolo descritas anteriormente. Página de Destaque Portal Institucional Os mesmos critérios de acessibilidade e usabilidade utilizados nos demais temas do Portal Institucional serão atendidos nesta criação específica. Na versão responsiva haverá omissão da imagem de fundo de uma capa, com exibição do texto de acessibilidade e remoção da altura de marcação introduzidos pelo novo módulo desenhado para esta finalidade. Na versão com alto contraste a imagem de fundo ficará aparente, portanto o texto de acessibilidade não aparecerá e todo texto sofrerá o contraste padrão e necessário. 8

85 8. Módulos Neste capítulo serão apresentados os módulos que compõem a estrutura de informação visual do leiaute do site.

86 Módulos Módulos Módulos são estruturas de visualização de conteúdo (imagens, vídeos, textos, áudios, publicações em redes sociais) que compõem as páginas de um site. Em geral, seu gerenciamento é flexível: podem ser adicionados ou retirados conforme as necessidades do gestor de conteúdo. Há também módulos de exibição de conteúdo presentes em posições fixas na coluna mais à direita do grid. Estes módulos são chamados de portlets e contam com uma configuração e funcionamento muito semelhantes aos módulos aplicados nas capas das páginas principais. Nas páginas principais (home e subhomes), os módulos devem ser organizados de forma que, em uma mesma linha, todos mantenham tenham a mesma altura. Assim, não surgem espaços em branco entre eles. A imagem ao lado ilustra o correto uso dos módulos em uma capa. A seguir, confira os módulos desenhados e que podem ser aplicados nos sites que seguem a Identidade Padrão de Comunicação Digital. CERTO CERTO ERRADO Apesar de serem independentes na sua estrutura, os módulos seguem algumas regras de composição entre si e de acordo com a página a ser desenvolvida. Quanto à sua posição, temos basicamente dois grupos de módulos: os utilizados apenas nas homes e sub homes, sendo estas páginas principais que agregam vários links para diferentes páginas. os que devem ser utilizados apenas nas páginas internas, como portlets. 86

87 Módulos Banner Rotativo Banner Rotativo Apresentação Quando é preciso apresentar mais de uma matéria com o mesmo peso em importância, o banner rotativo deverá ser usado. O banner rotativo mostra até quatro destaques em uma única área. O usuário tem a liberdade de escolher qual destaque deseja acessar clicando nos seletores (em forma de círculos) no canto inferior direito do módulo. A troca de exibição também é controlada por um temporizador (timer). 87

88 Módulos Banner Rotativo Banner Rotativo Abaixo, você pode conferir as indicações de fontes, tamanhos, cores, raio e máximo de caracteres. Crédito Arial Itálico, px cor: #798 Foto grande 750 x px canto (raio): 8 px Título da Matéria Arial Bold, px entre linha: 7 px cor: #798 máximo de caracteres: 90 Linha Fina Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 88

89 Módulos Banner Rotativo Banner Rotativo 5 Ícones paginação 5 x 5 px Os botões presentes no banner rotativo e que permitem a navegação entre as imagens ou chamadas varia conforme a cor escolhida para o tema (template). Tema Verde Paginação não selecionada base: #0f55f páginas: #ffffff Paginação selecionada base: #ffb00 páginas: #0f55f Tema Amarelo Paginação não selecionada base: #06f páginas: #ffffff Paginação selecionada base: #edeff páginas: #06f Tema Azul Paginação não selecionada base: #659bf páginas: #ffffff Paginação selecionada base: #edeff páginas: #659bf Tema Branco Paginação não selecionada base: #659bf páginas: #ffffff Paginação selecionada base: #edeff páginas: #659bf 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 89

90 Módulos Banner Rotativo Banner Rotativo Ao lado, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. 0 px 8 px 0 px 90

91 Módulos Banner Rotativo Texto Sobreposto Banner Rotativo Texto Sobreposto Apresentação Outra opção de aplicação do Banner Rotativo é com o texto da chamada sobreposto à imagem. Nesta configuração, o texto da chamada fica localizado dentro da imagem, sob um fundo cinza transparente. 9

92 Módulos Banner Rotativo Texto Sobreposto Banner Rotativo Texto Sobreposto Abaixo, você pode conferir as indicações de fontes, tamanhos, cores, raio e máximo de caracteres. Crédito Arial Itálico, px cor: #798 Foto grande 750 x 6 px canto (raio): 8 px Título da Matéria Arial Bold, 8 px entre linha: px cor: #ffffff máximo de caracteres: 0 Base transparente 750 x 70 px cor: # Opacidade: 70% Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 9

93 Módulos Banner Rotativo Texto Sobreposto Banner Rotativo Texto Sobreposto 5 Ícones paginação 5 x 5 px Os botões presentes no banner rotativo e que permitem a navegação entre as imagens ou chamadas varia conforme a cor escolhida para o tema (template). Tema Verde Paginação não selecionada base: #0f55f páginas: #ffffff Paginação selecionada base: #ffb00 páginas: #0f55f Tema Amarelo Paginação não selecionada base: #06f páginas: #ffffff Paginação selecionada base: #edeff páginas: #06f Tema Azul Paginação não selecionada base: #659bf páginas: #ffffff Paginação selecionada base: #edeff páginas: #659bf Tema Branco Paginação não selecionada base: #659bf páginas: #ffffff Paginação selecionada base: #edeff páginas: #659bf 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 9

94 Módulos Banner Rotativo Texto Sobreposto Banner Rotativo Texto Sobreposto Ao lado, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. 0 px 0 px 0 px 9

95 Módulos Lista - Últimos Conteúdos Lista - Últimos Conteúdos Apresentação O módulo apresenta a relação de qualquer tipo de conteúdo (notícias, imagens, vídeos e áudios) seguindo critérios de publicação definidos pelo gestor de conteúdo. Bloco de conteúdo com 0 px de largura Bloco de conteúdo com 90 px de largura O acesso é realizado clicando sobre o título de cada link. O visitante poderá clicar em um link no rodapé do módulo para acessar a listagem completa daquele determinado conteúdo. Nos exemplos ao lado, temos a reprodução de uma lista de últimas notícias em uma coluna (esquerda) e em duas colunas (direita). Trata-se de um módulo presente em capas e lista as últimas notícias publicadas em um portal. 95

96 Módulos Lista - Últimos Conteúdos Listagem - Últimos Conteúdos bloco com 0 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Título do texto Arial Bold, 5 px cor: #577 máximo de caracteres: 55 Texto do link do rodapé Open Sans Regular, px cor: #a5 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 96

97 Módulos Lista - Últimos Conteúdos Listagem - Últimos Conteúdos bloco com 0 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. Base 0 x 00 px cor: #eeeff/ contorno: #C0CC 0 px 0 px Linha divisória 0 x px cor: #C0CC Linha pontilhada entre chamadas 0 x px / px cor: #C0CC 0 px 0 px 8 px 8 px Este módulo só deve ser utilizado em blocos de conteúdo com largura de 90 e 0 pixels. 97

98 Módulos Lista - Últimos Conteúdos Listagem - Últimos Conteúdos bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Título do texto Arial Bold, 5 px cor: #577 máximo de caracteres: 55 Texto do link do rodapé Open Sans Regular, px cor: #a5 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 98

99 Módulos Lista - Últimos Conteúdos Listagem - Últimos Conteúdos bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. Base 90 x px cor: #eeeff/ contorno: #C0CC 5 px 5 px Linha divisória 90 x px cor: #C0CC Linha pontilhada entre chamadas 90 x px / px cor: #C0CC 0 px 0 px 0 px 5 px 5 px Este módulo só deve ser utilizado em blocos de conteúdo com largura de 90 e 0 pixels. 99

100 Módulos Galeria de Vídeos Galeria de Vídeos Apresentação No vídeo em destaque, os recursos de interação são os mesmos disponíveis em vídeos incorporados do Youtube. É possível dar início (play), pausar, retirar o som, avançar/retroceder o vídeo e assisti-lo em tela cheia. Bloco de conteúdo com 90 px de largura Bloco de conteúdo com 750 px de largura Também é possível clicar na miniatura (thumbnail) de um dos vídeos da lista para que ocupe o lugar do vídeo em destaque. Para a galeria de vídeos aplicadas em blocos de conteúdo com 90 pixels de largura, o gestor de conteúdo poderá exibir a quantidade de miniaturas que desejar, desde que respeite a estética e a clareza de conteúdo da página. O mesmo não ocorre dentro da galeria de vídeos em blocos de conteúdo com 750 px de largura, na qual é obrigatória a exibição de 5 miniaturas. O usuário também pode ter acesso aos demais vídeos clicando em Acesse a galeria de vídeos. 00

101 Módulos Galeria de Vídeos Galeria de Vídeos bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Regular, px cor: #FFFFFF CAIXA ALTA máximo de caracteres: 8 Chamada do vídeo de destaque Arial Bold, 6 px cor: #FFFFFF máximo de caracteres: 55 Chamadas de vídeos secundários Arial Bold, px entrelinhas: 6 px cor: #FFFFFF máximo de caracteres: 50 máximo de linhas: 5 Texto do link do rodapé Open Sans Regular, px cor: #FFFFFF CAIXA ALTA Linha fina da chamada do vídeo de destaque Arial Regular, px entrelinhas: 6 px cor: #FFFFFF máximo de caracteres: 55 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 0

102 Módulos Galeria de Vídeos Galeria de Vídeos bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. Base do cabeçalho 90 x px cor: #05D5B raio (cantos superiores): px Vídeo 90 x 8 px 5 6 Base área de outros vídeos 90 x 89 px cor: #05D5B Linha divisória pontilhada px / px cor: #E8 5 px 5 px Base área da chamada 90 x 89 px cor: #05D5B Linha divisória cheia px cor: #E8 7 Base do rodapé 90 x 8 px cor: #0688 raio (cantos inferiores): px 7 px 8 px 7 px 5 px 5 7 px 0 px px 5 px 5 px 5 px 5 px 5 px 0

103 Módulos Galeria de Vídeos Galeria de Vídeos bloco com 750 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máximo de caracteres. Título da galeria Open Sans Regular, px cor: #FFFFFF CAIXA ALTA máximo de caracteres: 8 Chamada do vídeo de destaque Arial Bold, 6 px cor: #FFFFFF máximo de caracteres: 55 5 Chamadas de vídeos secundários Arial Regular, px entrelinhas: 6 px cor: #FFFFFF máximo de caracteres: 50 máximo de linhas: Texto do link do rodapé Open Sans Regular, px cor: #FFFFFF CAIXA ALTA Linha fina da chamada do vídeo de destaque Arial Regular, px entrelinhas: 6 px cor: #FFFFFF máximo de caracteres: 50 máximo de linhas: 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 0

104 Módulos Galeria de Vídeos Galeria de Vídeos bloco com 750 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. Base do cabeçalho 750 x 60 px cor: #05D5B raio (cantos superiores): px Vídeo 5 x 0 px 5 6 Base área de outros vídeos 6 x 90 px cor: #05D5B Linha divisória pontilhada px / px cor: #E8 0 px 0 px 5 Base área da chamada 90 x 0 px cor: #05D5B Linha divisória cheia px cor: #E8 7 Base do rodapé 750 x 50 px cor: #0688 raio (cantos inferiores): px 5 px 5 px 6 5 px 6 px 7 5 px 5 px 0

105 Módulos Galeria de Álbuns Galeria de Álbuns Apresentação Na Galeria de Álbuns o visitante poderá acessar coleções de galerias de imagens separadas por temas específicos. Bloco de conteúdo com 90 px de largura Bloco de conteúdo com 750 px de largura A visualização do módulo é composta por uma imagem em destaque e seu título, descrição, crédito, local e data. Abaixo, o carrossel lista as miniaturas de demais galerias e um link para que o visitante acesse mais álbuns. A navegação lateral é ativada assim que a linha é completamente preenchida conforme a quantidade de galerias de álbuns registradas no portal. O módulo, utilizado exclusivamente para listar galerias de álbuns, exibe até 0 miniaturas. 05

106 Módulos Galeria de Álbuns Galeria de Álbuns bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 Título do álbum Arial Bold e Arial Italic, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: Descrição do álbum (quando houver) Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: 5 Crédito do álbum (quando houver) Arial Regular, px itálico entrelinhas: 8 px cor: #798 Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 06

107 Módulos Galeria de Álbuns Galeria de Álbuns bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. 5 px Base do cabeçalho 90 x 7 px cor: #edeff/ contorno: #D5D5D5 raio (cantos superiores): px 0 px Foto 90 x 0 px contorno: px/ cor: #555 5 Base da área de título e descrição do álbum 90 x 87 px cor: #edeff Caixa da galeria 78 x 0 px cor: #FFFFFF/ contorno: #CBCBCE Miniatura da foto 0 x 87 px 0 px 0 px px 6 Ícones x px 0 px 8 px 5 px 5 px 5 px 07

108 Módulos Galeria de Álbuns Galeria de Álbuns bloco com 750 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 Título do álbum Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: Descriçãob do álbum (quando houver) Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: 5 Crédito do álbum (quando houver) Arial Regular, px itálico entrelinhas: 8 px cor: #798 Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 08

109 Módulos Galeria de Álbuns Galeria de Álbuns bloco com 750 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, linha divisória e linha pontilhada. Base do cabeçalho 750 x 7 px cor: #edeff/ contorno: #D5D5D5 raio (cantos superiores): px 5 px 0 px Foto 750 x 0 px contorno: px/ cor: #555 Base da área de título e descrição do álbum 750 x 7 px cor: #edeff 5 6 Caixa da galeria 75 x 0 px cor: #FFFFFF/ contorno: #CBCBCE Miniatura da foto 0 x 87 px Ícones x px 0 px px 5 5 px px 0 px 0 px 09

110 Módulos Galeria de Fotos Galeria de Imagens Apresentação O módulo oferece ao usuário a possibilidade de visualizar uma coleção de imagens (fotografias, infográficos, logotipos, etc). Bloco de conteúdo com 90 px de largura Bloco de conteúdo com 750 px de largura A visualização do módulo é composta por uma imagem em destaque e seu título, descrição e crédito. Abaixo, o carrossel lista as miniaturas de demais imagens que façam parte da galeria e um link para que o visitante acesse mais imagens. A navegação lateral é ativada assim que a linha é completamente preenchida conforme a quantidade de imagens registradas em uma galeria. O módulo exibe até 0 miniaturas de imagem em sua linha inferior. Além de imagens este módulo também pode, se preciso, ser usado para destacar vídeos. Recomendase, no entanto, que o módulo Galeria de Vídeos seja usado para este fim. 0

111 Módulos Galeria de Fotos Galeria de Imagens bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 Título da imagem Arial Bold, px entrelinhas: 8 px cor: #798 máximo de linhas: Legenda da imagem Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: 5 Crédito da imagem Arial Regular, px itálico entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres.

112 Módulos Galeria de Fotos Galeria de Imagens bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, tamanhos das fotos e ícone. Base do cabeçalho 90 x 7 px cor: #EEEFF/ contorno: #D5D5D5 raio (cantos superiores): px 5 px 0 px Foto 90 x 68 px Base da área de legenda e galeria 90 x 70 px cor: #EEEFF Caixa da galeria 76 x 60 px cor: #FFFFFF/ contorno: #CBCBCE 5 Miniatura da foto 60 x 0 px 0 px 6 Ícone de navegação 5 x 5 px 0 px px 0 px 5 px

113 Módulos Galeria de Fotos Galeria de Imagens bloco com 750 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 Título da imagem Arial Bold, px entrelinhas: 8 px cor: #798 máximo de linhas: Legenda da imagem Arial Regular, px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: 5 Crédito da imagem Arial Regular, px itálico entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 5

114 Módulos Galeria de Fotos Galeria de Imagens bloco com 750 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento e tamanho das fotos. Base do cabeçalho 750 x 7 px cor: #EEEFF/ contorno: #D5D5D5 raio (cantos superiores): px 5 px 0 px Foto 750 x 56 px Base da área de legenda e galeria 750 x 70 px cor: #EEEFF Caixa da galeria 70 x 60 px cor: #FFFFFF/ contorno: #CBCBCE 5 Miniatura da foto 60 x 0 px 6 Ícone de navegação 5 x 5 px 0 px 0 px px 0 px 5 px

115 Módulos Player de Áudio Player de Áudio Apresentação O módulo reproduz arquivos deste tipo de mídia que estejam hospedados no site. O usuário pode, por meio de cliques, dar início (play), pausar ou retirar o som durante sua navegação. O módulo está disponível em formatação de uma ou duas colunas. Bloco de conteúdo com 0 px de largura Bloco de conteúdo com 90 px de largura 5

116 Módulos Player de Áudio Player de Áudio bloco com 0 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Descrição do áudio Arial Regular, px cor: #06767 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6

117 Módulos Player de Áudio Player de Áudio bloco com 0 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e ícone. Base 6 x 50 cor: #EDEFF / contorno: #C0CC Ícone Player 5 x 5 px cor: #0A967 0 px 0 px 5 px 7

118 Módulos Player de Áudio Player de Áudio bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Descrição do áudio Arial Regular, px cor: #06767 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 8

119 Módulos Player de Áudio Player de Áudio bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, player, área do título e ícone. Base 75 x 50 cor: #EDEFF / contorno: #C0CC Ícone Player 5 x 5 px 0px 0px 5 px 9

120 Módulos Galeria de Áudios Galeria de Áudios Apresentação A galeria de áudios oferece a possibilidade de ouvir uma lista de áudios reunidas em um único módulo. O visitante pode, por meio de cliques, dar início (play), pausar ou retirar o som durante sua navegação. No rodapé do módulo é oferecido a opção para que se acesse lista de áudios que fazem parte da galeria. Bloco de conteúdo com 0 px de largura Bloco de conteúdo com 90 px de largura O módulo está disponível em formatação para duas ou três colunas. 0

121 Módulos Galeria de Áudios Galeria de Áudios bloco com 0 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 CAIXA ALTA Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Título do áudio de destaque Arial Bold, px entrelinhas: 8 px cor: #798 máximo de caracteres: 55 máximo de linhas: Títulos dos áudios secundários Arial Regular, px cor: #798 máximo de caracteres: 60 máximo de linhas: Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres.

122 Módulos Galeria de Áudios Galeria de Áudios bloco com 0 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, player, área do título e ícone. Base 0 x 590 px cor: #EDEFF / contorno: #C0CC 5 px 5 px 5 px Player 0 x 5 px 0 px Área do título do áudio 0 x 90 px cor: #F6F7F8 5 px Ícone da lista da galeria 5 x 8 px cor: # Ícone de navegação 5 x 5 px cor: #0A967 Linha pontilhada vertical 90 x px #DDD px 0 px 0 px

123 Módulos Galeria de Áudios Galeria de Áudios bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título da galeria Open Sans Bold, 6 px cor: #555 CAIXA ALTA Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Título do áudio Arial Bold, px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Lista da galeria Arial Regular, px cor: #798 máximo de caracteres: 60 máximo de linhas: Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres.

124 Módulos Galeria de Áudios Galeria de Áudios bloco com 90 px de largura Abaixo, você pode conferir as indicações alinhamento, espaçamento, base, player, área do título e ícone. 5 px Base 90 x 50 px cor: #EDEFF / contorno: #C0CC 5 px px Player 66 x 58 px Área do título do áudio 90 x 6 px cor: #F6F7F8 65 px Ícone da lista da galeria 5 x 8 px cor: # Ícone de navegação 5 x 5 px cor: #0766F Linha pontilhada vertical 90 x px #DDD 7 px 7 px 6 8 px 5 5 px 5 px

125 Módulos Links Externos Links Externos Apresentação Este módulo reúne uma listagem de links que, ao serem clicados, redirecionam o usuário para páginas externas ao site em questão. O acesso é realizado clicando nos nomes apresentados na lista ou nos ícones à sua direita. Não há limites para a quantidade de links externos inseridos no módulo, no entanto, é importante avaliar se tal quantidade está adequada à estética, estrutura da página e objetivo da listagem. O visitante sempre poderá conhecer a listagem completa clicando em Acesse lista de [nome do conteúdo] O print ao lado indica o uso deste módulo para exibir uma lista de links de serviços prestados pelo Governo Federal. Este módulo só deve ser utilizado em blocos de conteúdo com largura de 0 pixels. 5

126 Módulos Links Externos Links Externos Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Chamada Arial Regular, px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Seta 0 x 0 px cor: #577 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 6

127 Módulos Links Externos Links Externos Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do cabeçalho 0 x 8 px cor: #ddd6 / contorno: #C0CC Linha divisória 0 x px cor: #C0CC Base dos itens cor : #F6F9F7 cor : #EAEBEE Linha pontilhada entre itens 90 x px / px cor: #C0CC 60 px 5 Base do rodapé 0 x 8 px cor: #ddd6 5 px 5 px 5 Este módulo não deve ser usado em colunas. 7

128 Módulos Enquete Enquete Apresentação O módulo de enquete é utilizado para que um visitante registre sua opinião sobre determinado assunto. É composto de tema, pergunta e uma lista de opções de respostas em caráter de múltipla escolha. Após escolher a opção preferida, o visitante poderá clicar em Enviar para ter sua opinião registrada. As respostas são salvas na própria enquete é necessário acessar o sistema para visualizar. Este módulo só deve ser utilizado em blocos de conteúdo com largura de 0 pixels. 8

129 Módulos Enquete Enquete Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Pergunta Arial Bold, 5 px cor: #577 máximo de caracteres: 55 máximo de linhas: 5 Botão Enviar Open Sans Bold, 5 px cor: #FFFFFF CAIXA ALTA Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Respostas Arial Regular, px cor: #577 máximo de caracteres: 60 máximo de linhas: 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 9

130 Módulos Enquete Enquete Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do cabeçalho 0 x 8 px cor: #edeff / contorno: #C0CC 0 px 0 px Base pergunta cor: #F6F9F7 57 px Base botão Enviar cor: #d7 Base rodapé 0 x 8 px cor: #EAEBEE 0 px 0 px 0 px px 0 px 0

131 Módulos Redes Sociais Redes Sociais Apresentação Este módulo oferece ao usuário interação nas redes sociais Facebook e Twitter. É importante considerar que tais interações são definidas pela programação nativa de cada serviço, não havendo influência do site no qual são exibidas. No twitter, é possível buscar conteúdos (tweets) de uma conta ou realizar busca por palavraschaves (chamadas no serviço em questão de hashtags). O usuário poderá trocar de rede social clicando nas abas no canto superior do módulo, não sendo possível a exibição de mais de uma rede na mesma aba. Recomenda-se que o módulo seja posicionado na última linha de conteúdo da página principal (home), à direita da tela do navegador. cabeçalho rodapé

132 Módulos Redes Sociais Redes Sociais Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e espaçamentos. Título do perfil Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 0 px 0 px Aba cor: #EAEBEE / contorno: #bbb6 Recomenda-se que o módulo seja posicionado na última linha de conteúdo da página principal (home), à direita da tela do navegador. cabeçalho rodapé

133 Módulos Agenda Agenda Apresentação Bloco de conteúdo com 0 px de largura Bloco de conteúdo com 90 px de largura O módulo Agenda exibe, de forma concentrada e simplificada, as principais informações da agenda de uma autoridade ou órgão. Pela barra de rolagem do módulo, o visitante poderá conhecer a listagem de compromissos e, ao clicar em qualquer um deles, ser direcionado para a agenda correspondente. Mesmo que não exista um compromisso oficial, a altura e a largura do módulo não são alterados. O cabeçalho da agenda deve ser preenchido com o cargo seguido do nome daquela autoridade. O módulo também permite o acesso a demais agendas gravadas no site pelo botão Acesse todas as agendas. Ao clicar neste link o visitante deve ser levado para uma capa interna que liste a agenda de todas as autoridades do órgão. Bloco de conteúdo com 750 px de largura Observação: O primeiro print (o mais estreito) é o exemplo para colunas. O último print (o mais largo) é o exemplo para coluna.

134 Módulos Agenda Agenda bloco com 0 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máximo de caracteres. Título do módulo Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 Título do compromisso Arial Bold, 5 px cor: #577 máximo de caracteres: 55 máximo de linhas: Data da agenda Arial Bold, 6 px cor: #798 5 Ícone de hora 5 x 5 px cor: # Hora do compromisso Open Sans Regular, px cor: #596E7F 6 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres.

135 Módulos Agenda Agenda bloco com 0 px de largura Ao lado, você pode conferir as indicações de tamanhos e espaçamentos. px 7 px 7 px 5 px 5 px 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 0 px 5

136 Módulos Agenda Agenda bloco com 90 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 Título do compromisso Arial Bold, 5 px cor: #577 máximo de caracteres: 55 máximo de linhas: Data da agenda Arial Bold, 6 px cor: #798 5 Ícone de hora 5 x 5 px cor: # Hora do compromisso Open Sans Regular, px cor: #596E7F 6 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 6

137 Módulos Agenda Agenda bloco com 90 px de largura Ao lado, você pode conferir as indicações de tamanhos e espaçamentos. 7 px 7 px 5 px 5 px 0 px 0 px 0 px 0 px 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 0 px 7

138 Módulos Agenda Agenda bloco com 750 px de largura Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do módulo Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 Título do compromisso Arial Bold, 5 px cor: #577 máximo de caracteres: 55 máximo de linhas: Data da agenda Arial Bold, 6 px cor: #798 Hora do compromisso Open Sans Regular, px cor: #596E7F 5 6 Ícone de hora 5 x 5 px cor: # Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6 Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 8

139 Módulos Agenda Agenda bloco com 750 px de largura Ao lado, você pode conferir as indicações de tamanhos e espaçamentos. 7 px 7 px 5 px 0 px 0 px 0 px 0 px 0 px 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 9

140 Módulos Dados e Resultados Dados e resultados Módulo utilizado para apresentar os números e resultados de um plano ou programa, com filtro para resultados gerais, por estado ou município. Quando existir sistema legado como fonte de dados, o órgão deve utilizá-lo para abastecer esta área de maneira automatizada e segura. A alimentação manual de dados pode gerar inconsistência, além de não ser instantânea. O módulo deve ser aplicado em duas colunas e trazer duas abas. A aba à esquerda com os resultados do plano ou programa no âmbito nacional, enquanto a outra aba com os dados estaduais, filtrados por municípios. Quando o visitante do portal clicar na aba Nacional, os resultados devem ser apresentados em duas colunas. A coluna à esquerda mostra o número do resultado e a coluna à direita a sua explicação em forma de texto. Quando o visitante clicar na aba Por Estado, o módulo irá exibir duas caixas de seleção. A primeira com as unidades federativas do País e a segunda com os municípios que pertencem ao estado escolhido anteriormente. Os resultados da segunda caixa só devem ser habilitados quando a unidade federativa for previamente marcada. Ao escolher o município, o módulo deve exibir uma tabela com as características geográficas e os indicadores daquela localidade. Um botão X deve ser habilitado para que o visitante volte à tela anterior. Além da tabela, o modulo apresenta os resultados específicos daquele município, seguindo a mesma disposição explicada anteriormente (número e texto). 0

141 Módulos Dados e Resultados Dados e resultados Ao lado, você pode conferir as indicações de tamanhos e espaçamentos. 5 px 7 px 7 px 5 px 5 px 0 px 0 px px px px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 0 px 0 px px px

142 Módulos Dados e Resultados Dados e resultados Título do módulo Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 Título do resultado Open Sans Bold, 6 px CAIXA ALTA cor: #555 máximo de caracteres: 0 Título da chamada Arial Regular, px bold cor: #a5 Numeração Open Sans, 0 px bold cor: #596e7f Aba Arial Regular, px bold cor: #a5 cor da aba selecionada: #DDD Linha pontilhada entre itens 70 x px / px cor: #C0CC Texto do quadro Open Sans Regular, px cor: #577 cor do quadro: #DDD Texto da fonte Arial Regular, 0 px cor: #a5 Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 8 9

143 9. Portlets Neste capítulo serão apresentados os portlets que compõem a estrutura de informação visual do leiaute do site.

144 Portlets Apresentação Apresentação Os portlets são pequenos módulos de visualização de conteúdo, geralmente localizados nas colunas às esquerda e direita dos sites da Identidade Padrão de Comunicação Digital. Toda a coluna de menus, localizada à esquerda, é visualizada pelo visitante do site a partir da configuração de portlets de navegação. O gestor de conteúdo também pode utilizar esta ferramenta para tornar mais atraente os textos publicados no site. São os chamados portlets de conteúdos relacionados, localizados sempre à direita da tela do monitor e que serão mais bem detalhados nas próximas páginas.

145 Portlets Portal Padrão Coleção Portal Padrão Coleção Apresentação O portlet de coleção apresenta a relação de últimas notícias, conteúdos relacionados ou outros critérios definidos pelo gestor de conteúdo. O acesso é realizado clicando sobre o título de cada link. O usuário também poderá clicar em Acesse a lista de notícias para acessar a listagem completa. Podemos aplicar ou não, nesse portlet de coleção de noticia imagens. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 5

146 Portlets Portal Padrão Coleção Portal Padrão Coleção Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do portlet Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Data da notícia Open Sans Regular, 0 px cor: #577 Título da notícia Open Sans Bold, px cor: #577 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6

147 Portlets Portal Padrão Coleção Portal Padrão Coleção Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do box 0 x 76 px cor: #edeff / contorno: #C0CC 0 px 5 px 5 px 5 px 0 px 0 px 7

148 Portlets Portal Padrão Coleção Portal Padrão Coleção Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do portlet Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Data da notícia Open Sans Regular, 0 px cor: #577 Título da notícia Open Sans Bold, px cor: #577 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 8

149 Portlets Portal Padrão Coleção Portal Padrão Coleção Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. 0 px 5 px Base do cabeçalho 0 x 5 px cor: #edeff / contorno: #C0CC Tamanho da foto 7 x px 5 px 5 px 0 px 0 px 9

150 Portlets Portal Padrão Carrossel de Imagens Portal Padrão Carrossel de Imagens Apresentação No portlet de Carrossel de imagens o visitante poderá acessar coleções de galerias de imagens separadas por temas específicos. A visualização do portlet é composta por uma imagem em destaque e seu título, descrição e crédito. Abaixo, o carrossel lista as miniaturas de demais galerias e um link para que o visitante acesse mais álbuns. A navegação lateral é ativada assim que a linha é completamente preenchida conforme a quantidade de galerias de álbuns registradas no portal. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 50

151 Portlets Portal Padrão Carrossel de Imagens Portal Padrão Carrossel de Imagens Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do portlet Open Sans Bold, 6 px cor: #555 máximo de caracteres: 0 5 Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Título da imagem Open Sans Bold, px cor: #555 Descrição da imagem Open Sans Regular, px cor: #555 Crédito da imagem Open Sans Semibold Italic, px cor: #555 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5

152 Portlets Portal Padrão Carrossel de Imagens Portal Padrão Carrossel de Imagens Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do box 0 x 5 px cor: #edeff / contorno: #C0CC 0 px 0 px Tamanho da foto x 66 px Tamanho da miniatura 5 x 6 px 0 px 0 px 0 px 0 px 5

153 Portlets Portal Padrão Galeria de Vídeos Portal Padrão Galeria de Vídeos Apresentação Um grupo de vídeos pode ser visto pelo usuário nesta galeria que incorpora arquivos vindos do Youtube. No vídeo em destaque possível dar play e pause, avançar, retroceder, retirar som e ver em tela cheia. Também há a possibilidade de acessar outros vídeos através do link Acesse a galeria de vídeos que direciona para uma página com lista de vídeos atuais. A galeria é composta por título, vídeo em destaque, título do vídeo, descrição do vídeo, lista de vídeo com título e atalho para acesso a mais vídeos. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 5

154 Portlets Portal Padrão Galeria de Vídeos Portal Padrão Galeria de Vídeos Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do portlet Open Sans Bold, 6 px cor: #555 CAIXA ALTA máximo de caracteres: 0 Título do vídeo Arial Bold, 6 px cor: #FFFFFF 5 Título da miniatura Open Sans Bold, px cor: #FFFFFF Texto do link do rodapé Open Sans Regular, px cor: #DEFF CAIXA ALTA Descrição do vídeo Arial Regular, px cor: #FFFFFF Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5 5

155 Portlets Portal Padrão Galeria de Vídeos Portal Padrão Galeria de Vídeos Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. 0 px 0 px Base do box 0 x 50 px cor: #07d6d Tamanho da foto 0 x 5 px Tamanho da miniatura 0 x 7 px 0 px 5 px 0 px 0 px 0 px 0 px 55

156 Portlets Portal Padrão Galeria de Áudios Portal Padrão Galeria de Áudios Apresentação Composta por título, player com áudio em destaque, título do áudio, lista de áudios com título, atalho para acesso a mais áudios. Nesta galeria é possível acessar diversos áudios com possibilidade de interagir dando play, pause, avançar, retroceder e retirar o som. Na lista o usuário pode clicar sobre um título descritivo e abri-lo acima. O usuário pode acessar outros arquivos clicando em acesse a galeria de áudios, que direciona para uma página com lista atual de áudios. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 56

157 Portlets Portal Padrão Galeria de Áudios Portal Padrão Galeria de Áudios Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do portlet Open Sans Bold, 6 px cor: #555 Título do áudio Open Sans Regular, px cor: # Texto do link do rodapé Open Sans Regular, px cor: #A5 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 57

158 Portlets Portal Padrão Galeria de Áudios Portal Padrão Galeria de Áudios Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do box 0 x 56 px cor: #edeff / contorno: #C0CC 5 px 5 px Base do player 06 x 8 px Tamanho do ícone x 6 px 5 px 5 px 0 px 0 px 58

159 Portlets Portal Padrão de Áudio Portal Padrão de Áudio Apresentação O portlet reproduz arquivos deste tipo de mídia que estejam hospedados no site. O usuário pode, por meio de cliques, dar início (play), pausar ou retirar o som durante sua navegação. Os elementos que compõem este portlet são título do áudio e player, e ele permite ouvir o áudio do site. Há controles de play, pause, avançar, retroceder e retirar o som. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 59

160 Portlets Portal Padrão de Áudio Portal Padrão de Áudio Abaixo, você pode conferir as indicações de fontes, tamanhos, cores e máxima quantidade de caracteres. Título do áudio Open Sans Bold, px cor: #555 Tempo Open Sans Italic, 0 px cor: #555 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 60

161 Portlets Portal Padrão de Áudio Portal Padrão de Áudio Abaixo, você pode conferir as indicações alinhamento, espaçamento, base e linhas. Base do player 0 x 8 px cor: #edeff / contorno: #C0CC Ícone player x px cor: #07d6d 0 px Tamanho do ícone x px cor: #07d6d 0 px 0 px 6

162 Portlets Portal Padrão de Vídeo Portal Padrão de Vídeo Apresentação Permite ao usuário assistir a um vídeo incorporado do Youtube, sendo composto por player e legenda. A descrição do vídeo é editável, com quantidade de caracteres em aberto. Através do controle nativo do Youtube o usuário pode dar play no vídeo, pausar, avançar ou retroceder, retirar o som e assistir ao vídeo em tela cheia. Este portlet só deve ser utilizado em blocos de conteúdo com largura de 0 pixels na coluna da direita. 6

163 Portlets Portal Padrão de Vídeo Portal Padrão de Vídeo Abaixo, você pode conferir as indicações de fontes, tamanhos, alinhamento, espaçamento e cores. Título do vídeo Open Sans Regular, px cor: #555 Tamanho da imagem 0 x 9 px 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 6

164 9. Templates Neste capítulo serão apresentados os templates que compõe a estrutura de informação visual do leiaute do site.

165 Templates Agenda Agenda lista autoridades Para sites que possuem mais de uma autoridade que necessite divulgar sua agenda, sugerimos criar uma capa com a lista de nomes das autoridades com links para cada agenda individual. 65

166 Templates Agenda Agenda página interna Neste template, a área de conteúdo é composta pela lista de compromissos de uma autoridade, enquanto a coluna à direita conta com ferramentas relacionada à esquerda. A coluna à esquerda deve manter a coluna de menus do portal. Na imagem é possível conferir as informações essenciais como: data, horário, pauta do compromisso, descrição da pauta e local do encontro, participantes e também o nome da autoridade responsável. Também é possível que o visitante imprima a agenda, reporte erros ou adicione o compromisso ao seu calendário pessoal. Título da agenda Arial Bold, px cor: #798 Alteração Arial Bold Italic, px cor: #596E7F Hora Open Sans Regular, px cor: #596E7F Título nome dos participantes Arial Regular, 5 px cor: #F Cargo dos participantes Arial Regular, px cor: # Local Arial Regular, px cor: #596E7F Adicionar ao meu calendário Open Sans, px cor: #798 Ícones imprimir e reportar erros

167 Templates Capa Capa página principal (home) A capa é a vitrine de um site (ou de uma área interna). É neste local em que devem ser destacados os principais conteúdos produzidos pela equipe de comunicação de um órgão. A imagem ao lado reproduz a capa utilizada para a página principal (também conhecido como home) de um site. Note que conteúdos produzidos para outras áreas internas (subhomes ou editorias) possui uma cor específica para que o visitante consiga identificar o assunto que é tratado. Importante: para que esta identificação ocorra é preciso que as cores usadas nas capas dessas áreas internas sejam correspondentes ao que será utilizado na página principal do site. Na próxima página confira mais detalhes sobre as cores disponíveis para utilização. 67

168 Templates Capa Capa página principal (home) As cores ao lado estão disponíveis para serem usadas na capa da página principal e nas capas das áreas internas (subhomes). As indicações visam a melhor harmonização cromática nas páginas. No entanto, o editor tem livre poder de decisão para aplicá-las como achar conveniente. RGB: #75900 RGB: #6c67 RGB: #867b7 RGB: 9 87 #d57f RGB: #07b6 RGB: #baa00 RGB: 6 85 #a55dd RGB: 86 8 #5676b RGB: #8698 RGB: 59 5 #b790 RGB: 85 0 #b97a00 RGB: #009e 68

169 Templates Capa Capa página principal (subhome) São utilizados os mesmos módulos da página inicial (home), no entanto, com uma diferença: somente a cor do nome da editoria (como em Ciência e Tecnologia, no exemplo da imagem ao lado) é utilizada nos elementos de cor variável, como nos chapéus das chamadas secundárias. 69

170 Templates Capa Capa página principal (subhome) Para melhor divisão dos conteúdos e suas importâncias, apresentamos duas variações de espaçamentos entre as linhas. As três primeiras linhas de módulos apresentam a distância de 5 px. px 5 px A última linha é reservada para o agrupamento de conteúdos relevantes e/ou mais acessados. Por não serem necessariamente produções recentes, esses conteúdos não precisam estar no topo da capa. Por não fazer parte, necessariamente, do restante do conteúdo, essa linha apresenta um espaçamento de entrelinha de 0px, um fio de px de altura e mais 0px. 5 px 5 px 0 px 0 px 75 px 0 px 70

171 Templates Capa Capa página principal (subhome) A segunda variação do módulo de notícias é exemplificada ao lado. Nela, a primeira linha é dividida em duas colunas com espaçamento de 0px. Na coluna à direita (de menor largura) o espaçamento entre cada chamada é de 50px. Assim como na variação anterior, a distância para a próxima linha deve ser de 5px. 5 px px 8 px 8 px 0 px 50 px 7

172 Templates Capa Capa montagem de uma capa (home e subhome) Um dos pilares da Identidade Padrão de Comunicação Digital é o foco no público. Por isso, a escolha dos menus é feita com base nos principais temas ou assuntos do órgão e não a sua estrutura organizacional. Por isso, evite o uso de siglas e de nome de secretarias (principalmente aquelas só conhecidas internamente) para dar nome a itens de menu. Prefira termos de fácil entendimento e que venham a atrair o seu público. Dessa maneira, a navegação deve ser direcionada a partir de itens que refletem os conteúdos relevantes para o público. Aliado a uma linguagem multimídia de fácil atendimento, o portal torna-se acessível a todos os brasileiros. Além disso, a montagem de capa deve ser orientada por módulos que agrupam informações procuradas pelos principais públicos, apresentando, ao mesmo tempo, conteúdos pouco acessados que também possam ser relevantes à audiência. Devem-se evitar redundâncias de endereçamentos no mesmo nível de apresentação. Em outras palavras, informações relevantes podem e devem possuir mais de um ponto de acesso, entretanto, em páginas diferentes. O espaço deve ser aproveitado de maneira a que o público tenha noção da amplitude dos assuntos tratados, bem como priorize informações que facilitem o acesso às utilidades públicas. Recomenda-se que as informações mais importantes sejam publicadas no topo das capas. Vídeos, imagens e demais elementos podem ser usados para atrair mais a atenção (e permanência) do visitante em seu portal. O uso de cores para as páginas que compõem o item de menu Assuntos podem ser escolhidas livremente pelo gestor de conteúdo devendo sempre levar em conta o estudo realizado pela equipe de arte do órgão. O trabalho conjunto entre a equipe de conteúdo (que produz textos, vídeos, imagens e áudios), arquitetura de informação (que hierarquiza a disposição desses conteúdos em uma página), informática (que garante a infraestrutura necessária para a navegação) e a equipe de arte (que harmoniza a disposição desse conteúdo) é fundamental para que a informação chegue de maneira clara e rápida ao público-alvo, evitando que a homepage e capas internas tornem-se pesadas, sem qualquer atrativo e de difícil navegação para o visitante. O Portal de Referência traz alguns modelos de capas para as páginas principais dos portais que seguem a Identidade Padrão de Comunicação Digital do Poder Executivo Federal. A seguir apresentamos alguns modelos de capas de páginas principais. Observe que os exemplos trazem tipos de uso dos módulos configurados para a Identidade Padrão de Comunicação Digital. 7

173 Templates Capa Capa montagem de uma capa (home e subhome) Capa da página principal (home) do Portal de Referência Capa de área interna (subhome) - versão Capa de área interna (subhome) - versão 7

174 Templates Capa Capa montagem de uma capa (home e subhome) Capa de área interna (subhome) - versão Página institucional (item de menu de uma subhome) Listagem de conteúdo (item de menu de uma subhome) 7

175 Templates Texto Corrido Texto Corrido interna de notícias O template ao lado mostra a configuração do template de uma notícia aberta (texto corrido) nos sites que seguem a Identidade Padrão de Comunicação Digital. Nome da área interna (editoria) Open Sans Bold, 6 px cor da editoria CAIXA ALTA Título da notícia Arial Bold, px entrelinhas: 7 px cor: #798 5 Autor da notícia Arial Regular, px cor: #C66CE Dados da publicação Arial Regular, px cor: #C66CE 55 px 0 px 0 px 0 px 5 0 px 9 px 0 px Linha fina (descrição) da notícia Arial Regular, 6 px entrelinhas: px cor: #798 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 75

176 Templates Texto Corrido Texto Corrido interna de notícias 6 Subtítulo do texto Arial Bold, 6 px entrelinhas: px cor: #798 0 px 6 7 Texto da notícia Arial Regular, 5 px entrelinhas: px cor: # Palavras-chave (tags) e vocabulários do VCGE Arial Regular, px cor: #A70D 5 px 8 5 px 5 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 76

177 Templates Texto Corrido Texto Corrido elementos obrigatórios e conteúdos relacionados As notícias publicadas na Identidade Padrão de Comunicação Digital devem conter obrigatoriamente chapéu (uma palavra-chave colocada acima do título de um texto), título, linha fina (ou subtítulo), palavras-chaves, termos do Vocabulário Controlado do Governo Eletrônico (VCGE), além do próprio texto em si. Também deve estar bem visível a seção (área interna ou editoria) na qual aquele texto está gravado. Além desses elementos obrigatórios, o gestor de conteúdo poderá fazer uso de outros recursos para que o conteúdo em texto fique mais atraente para o visitante do site. Recursos esses que vão de fotos e infográficos, a vídeos e postagens em redes sociais. Também é possível indicar conteúdos relacionados diretamente com o tema daquela notícia e que ficarão posicionados na coluna à direita do texto. São os portlets de conteúdos relacionados. Por exemplo, um texto que aborde a ação de um determinado programa do governo federal poderá vir acompanhado de uma galeria de fotos sobre aquele programa específico, um áudio com declarações de um beneficiário e uma galeria de vídeo com demais realizações promovidas por aquela iniciativa. Esses conteúdos reunidos e organizados em um único template enriquecem a notícia entregue para o visitante do site. Confira a seguir um exemplo de notícia que conta com conteúdos multimídias relacionados. 77

178 Templates Listagem Listagem Template de uma página interna que exibe a relação de notícias, imagens, vídeos e/ou áudios publicados em um site da Identidade Padrão de Comunicação Digital. 78

179 Templates Listagem Listagem Título da listagem Open Sans Bold, 8 px cor: #C66CE CAIXA ALTA Chapéu do texto Open Sans Regular, px cor: da editoria CAIXA ALTA Título do texto Arial Bold, 6 px entrelinhas: px cor: #798 0 px 0 px 0 px 5 px 5 px 0 px 5 px 7 px 5 0 px 0 px Linha Fina do texto Arial Regular, 5 px entrelinhas: px cor: #798 5 px 5 px 5 Palavras-chave (tags) Arial Regular, px entrelinhas: 6 px cor: #596E7F Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 7 px 79

180 Templates Listagem Listagem em Colunas Template alternativo para a listagem dos conteúdos disponíveis no site. Nesta configuração, o gestor de conteúdo deverá dispor as chamadas no miolo da página e pode fazer uso de um recurso gráfico (imagem ou vídeo) para dar mais destaques ao material publicado, como no exemplo ao lado. 80

181 Templates Listagem Listagem em Colunas Título da listagem Open Sans Bold, 8 px cor: #C66CE CAIXA ALTA Descrição da imagem Arial Bold, 6 px entrelinhas: px cor: #798 0 px 0 px 0 px Imagem 0 x 6 px 5 px 75 px 0 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 8

182 Templates Listagem Listagem de Álbuns Template utilizado para listagem dos álbuns publicados, com uso de imagens e organização por data. 8

183 Templates Listagem Listagem de Álbuns Título da listagem Open Sans Bold, 8 px cor: #C66CE CAIXA ALTA 0 px 0 px 0 px Imagem 0 x 6 px Título do álbum Arial Bold, 6 px entrelinhas: px cor: #798 0px Descrição do álbum Arial Regular, 5 px entrelinhas: 8 px cor: #798 0px 0px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 8

184 Templates Listagem Listagem de Conteúdos Neste módulo podem ser agrupados conteúdos variados, como notícias, imagens, vídeos ou áudios. A lista pode ser de apenas um tipo de conteúdo (somente notícias, somente áudios, por exemplo) ou com mais de um conteúdo (lista de notícias, áudios e vídeos). O gestor de conteúdo pode indicar o que deverá ser exibido para o visitante como: título e descrição de conteúdo, data de publicação, imagem e palavras-chave. No exemplo ao lado, a lista de últimas notícias exibe apenas a data de publicação e o título do texto. Esse módulo deve ser usado em casos excepcionais quando necessário o uso de chamadas com mais de 55 caracteres (tamanho máximo de caracteres para uma chamada) 8

185 Templates Listagem Listagem de Conteúdos Linha do cabeçalho 750 x px cor do tema adotado para o site 5 px 5 px Base do cabeçalho 750 x 6 px cor: #EEEFF 0 px 6 px Linha do rodapé 0 x px cor: #D6DCD7 0 px 5 px Base do rodapé 0 x 0 px cor: #EEEFF 5 px 5 px 0 px 0 px 0 px 85

186 Templates Listagem Listagem de Conteúdos Nome da editoria ou módulo Open Sans Regular, 8 px cor da editoria Chapéu ou data da matéria Open Sans Regular, px CAIXA ALTA cor de link do tema adotado Título da matéria em bloco de 90 px Arial Bold, 0 px Entrelinhas: 8 px cor: #798 Texto do link do rodapé Open Sans Regular, px cor: #577 CAIXA ALTA Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 86

187 Templates Fotos Fotos capa Há três formatos possíveis de fotos para aplicação nas capas (homes e subhomes). Porém, a sua aplicação nunca ocorre isoladamente, e sim dentro dos módulos de notícias. Foto para bloco de 0 px 0 x 6 px Foto para bloco de 90 px 90 x 6 px Foto para bloco de 750 px 750 x 0 px O uso de fotografias em capas deve ser sempre acompanhado de um texto informativo ou institucional. Imagens que não precisam de texto de suporte são tratadas como banner. Saiba mais sobre os formatos disponíveis. 87

188 Templates Fotos Fotos internas Para aplicação nas capas de áreas internas, as fotos podemocupar blocos com 0, 90 e 750 pixels de largura do grid destinadas ao conteúdo. Porém, a sua aplicação nunca ocorre isoladamente, e sim dentro dos módulos de notícias. 5 px Foto para bloco de 0 px 0 x px Foto para bloco de 90 px 90 x 8 px Foto para bloco de 750 px 750 x 57 px A foto sempre é acompanhada de uma legenda e dos créditos: Legenda e crédito Arial Regular px Entrelinhas: 6 px cor: #798 máx caracteres: 60 5 px Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Foto - A miniatura que acompanha os corridos ocupa bloco de 0 px e abre uma foto grande que ocupa bloco de 750 px ao ser clicada. CSS - utilize o elemento Caption para legendar as fotos. 5 px 88

189 Templates Manchete Manchete Para sites noticiosos como o Portal Brasil, deve-se usar este módulo para destacar as notícias mais importantes. Este módulo deve ser usado apenas na capa da página principal (home) e logo abaixo do cabeçalho. Nas próximas páginas, apresentaremos cinco variações da manchete, que buscam contemplar as seguintes possibilidades de notícias: com e sem fotos com vídeo um assunto (cabeçalho principal) para todas as notícias um assunto para cada notícia (cabeçalhos individuais) Todas as variações ocupam bloco de conteúdo com 750 pixels de largura do grid. 89

190 Templates Manchete Manchete agrupamento de notícias Agrupamento utilizado quando quando todas as notícias estiverem relacionadas ao mesmo assunto (consequentemente, dentro da mesma editoria). Neste caso, todos os chapéus da notícia terão a mesma cor da área interna (editoria). Agrupamento utilizado para quando cada notícia for de uma área interna (editoria) diferente. Neste caso, cada chapéu da notícia terá a cor da sua respectiva editoria. 90

191 Templates Manchete Manchete chamadas em bloco de 750 px com foto e em bloco de 0 px sem foto Foto grande 750 x 0 px canto (raio): 8 px 5 px 5 px 5 px 0 px 5 px 9

192 Templates Manchete Manchete chamadas em bloco de 750 px com foto e em bloco de 0 px sem foto Chapéu do texto de destaque Open Sans Bold, 6 px cor da editoria CAIXA ALTA Chapéu dos textos secundários Open Sans Regular, px cor da editoria CAIXA ALTA Título do texto de destaque Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha fina do texto de destaque Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: Título dos textos secundários Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres 55 máximo de linhas: Linha fina dos textos secundários Arial, px entrelinhas: px cor: #798 máximo de caracteres 55 máximo de linhas: 6 5 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 9

193 Templates Manchete Manchete chamadas em bloco de 750 px sem foto e em bloco de 0 px com foto Linha inferior do cabeçalho / divisória 750 x px cor: #D7D7D7 Foto pequena 0 x 6 px canto (raio): 8 px 5 px 0 px 0 px 0 px 8 px 5 px 5 px 0 px 9

194 Templates Manchete Manchete chamadas em bloco de 750 px sem foto e em bloco de 0 px com foto Chapéu do texto de destaque Open Sans Bold, 6 px cor da editoria CAIXA ALTA Título do texto de destaque Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha fina do texto de destaque Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: Chapéu dos textos secundários Arial Regular, 5 px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: Título dos textos secundários Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres 55 máximo de linhas: Linha fina dos textos secundários Arial Bold, px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: 5 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 9

195 Templates Manchete Manchete chamadas sem foto em bloco de 750 px e em bloco de 0 px Linha divisória inferior do cabeçalho 750 x px cor: #D7D7D7 0 px 5 px 0 px 0 px 0 px 8 px 95

196 Templates Manchete Manchete chamadas sem foto em bloco de 750 px e em bloco de 0 px Chapéu do texto de destaque Open Sans Bold, 6 px cor da editoria CAIXA ALTA Chapéu dos textos secundários Open Sans Regular, px cor da editoria CAIXA ALTA Título do texto de destaque Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha fina do texto de destaque Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: Título dos textos secundários Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Linha fina dos textos secundários Arial Bold, px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: 5 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 96

197 Templates Manchete Manchete chamada em bloco de 750 px sem foto Linha superior e inferior do módulo 750 x px cor: #798 Linha divisória inferior do cabeçalho 750 x px cor: #D7D7D7 5 px 0 px 0 px 0 px 97

198 Templates Manchete Manchete chamada em bloco de 750 px sem foto Chapeu do texto Open Sans Bold, 6 px cor da editoria CAIXA ALTA Título do texto Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha Fina do texto Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: 0 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 98

199 Templates Manchete Manchete chamadas em bloco de 750 px com foto e em bloco de 0 px sem foto Linha divisória 750 x px cor: #D7D7D7 Foto pequena 0 x 6 px canto (raio): 8 px 0 px 0 px 0 px 5 px 5 px 99

200 Templates Manchete Manchete chamadas em bloco de 750 px com foto e em bloco de 0 px sem foto Chapéu do texto de destaque Open Sans Regular, px cor da editoria CAIXA ALTA Título do texto de destaque Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha fina do texto de destaque Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: Chapéu dos textos secundários Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Título da chamada secundária Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Linha fina chamada secundária Arial Bold, px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: 5 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 00

201 Templates Manchete Manchete vídeo em bloco de 90 px e chamada com foto em bloco de 0 px Linha superior do módulo 750 x px cor: #C79 0 px 0 px Linha divisória inferior do cabeçalho 750 x px cor: #D7D7D7 0 px 5 px Player de vídeo 90 x 6 px canto (raio): 8 px 0 px 0 px Foto pequena 0 x 6 px canto (raio): 8 px 55 px 5 px 5 px 5 px 5 px 0 px 5 px 5 px 0 px 0

202 Templates Manchete Manchete vídeo em bloco de 90 px e chamada com foto em bloco de 0 px Chapéu Open Sans Bold, 6 px cor da editoria CAIXA ALTA Chapéu da chamada secundária Open Sans Regular, px cor da editoria CAIXA ALTA Título da Matéria Arial Bold, px entrelinha: 7 px cor: #798 máximo de caracteres: 55 Linha Fina Arial Regular, 6 px entrelinhas: px cor: #798 máximo de caracteres: Título dos textos secundários Arial Bold, 6 px entrelinhas: px cor: #798 máximo de caracteres: 55 máximo de linhas: Linha Fina dos textos secundários Arial Regular, 5 px entrelinhas: 8 px cor: #798 máximo de caracteres: 60 máximo de linhas: 5 6 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( Para manter a melhor visualização, recomenda-se sempre respeitar os limites de caracteres. 0

203 Templates Bloco Temático de Chamadas Bloco Temático de Chamadas Nesta composição são agrupadas as notícias pertencentes a uma mesma editoria ou mesmo assunto, com chamadas dispostas em uma linha com 750 pixels de largura e outra linha com 0 pixels de largura. 0

204 Templates Bloco Temático de Chamadas Bloco Temático de Chamadas Linha do cabeçalho de módulo 750 x px cor da editoria Base do cabeçalho de módulo 750 x 55 px cor: #EEEFF 0 px px 0 px 0 px 55 px Foto da chamada principal 0 x 6 px canto (raio): 8 px Linha divisória interna 0 x px cor #D6DCD7 0 px 0 px 5 Foto da chamada secundária 0 x 6 px canto (raio): 8 px 5 6 Linha do rodapé 0 x px cor da editoria 0 px 0 px 7 Base do rodapé de módulo 750 x 0 px cor: #EEEFF 0 px 0 px px 0 px 0 px 0

205 Templates Bloco Temático de Chamadas Bloco Temático de Chamadas Nome da editoria Open Sans Regular, 8 px cor da editoria Chapéu da chamada principal Open Sans Regular, px CAIXA ALTA cor da editoria Título do texto de destaque Arial Bold, 0 px Entrelinhas: 8 px cor: #798 Linha Final da chamada principal Arial Regular, 6 px entrelinhas: px cor: # Chapéu da chamada secundária Open Sans Regular, px CAIXA ALTA cor da editoria Chamada secundária Arial Bold, 6 px entrelinhas: px cor: #798 Linha Fina da chamada secundária Arial Regular, 5 px entrelinhas: 8 px cor: #798 Texto do link no rodapé Open Sans Regular, px CAIXA ALTA cor: # Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 05

206 Templates Bloco Temático de Chamadas Bloco Temático de Chamadas conteúdos em blocos de 0 px Nestas composições, são agrupadas as notícias pertencentes a uma mesma editoria ou, no caso de um órgão mais específico, um mesmo tema. No caso do Portal Brasil, existe a possibilidade de juntar chamadas sob um mesmo Tema Relevante. Para outros portais que não tenham diversas editorias, é possível que o usuário utilize a opção do módulo de últimas notícias. Há variações de: altura, para chamadas com ou sem fotos. título, tanto para abarcar o nome de uma editoria como o nome de um assunto. 06

207 Templates Bloco Temático de Chamadas Bloco Temático de Chamadas conteúdos em blocos de 0 px Nome da editoria ou seção Open Sans Regular, 8 px entrelinhas: 8 px cor da editoria 5 Texto do link do rodapé Open Sans Regular, px CAIXA ALTA cor: #798 Chapéu do texto Open Sans Regular, px CAIXA ALTA cor da editoria Título do texto Arial Bold, 6 px entrelinhas: px cor: # 798 Linha fina do texto Arial Regular, 5 px entrelinhas: 8 px cor: #798 Para a elaboração do CSS, o desenvolvedor poderá usar em, % ou px, como indicado pelo WC ( 5 07

208 0. Banners Neste capítulo serão apresentados possíveis formatos de banners para aplicação.

209 Banners Formatos Banner é um recurso gráfico utilizado para destacar qualquer tipo de conteúdo produzido em um portal, organizar e/ou dar ênfase para um plano, programa e campanha de um órgão do poder executivo ou do governo federal, servir de ponto de acesso para uma determinada área do portal, dar publicidade para o lançamento de um novo portal, entre outras ações que tenham como objetivo chamar atenção do visitante. As páginas seguintes deste capítulo exibem diferentes formatos de banners e exemplos de aplicação em capas (homepages e subhomes). A função que o banner irá cumprir nas capas é variado e justamente por isso deve ser planejado e decidido após decisão conjunta entre a equipe de texto e a equipe de de arte da área de comunicação de um órgão. Este recurso deve ser usado com moderação. O gestor de conteúdo deve evitar o uso excessivo de banners em uma mesma capa para que o visitante não tenha a sensação de que uma capa está pesada e poluída visualmente. Como se trata de um recurso gráfico, a criação desta peça deve ser feita pela equipe de arte (designers, diagramadores) da área de comunicação do órgão. 09

210 Banners Formatos Banner Destaque Esse banner é usado para divulgar campanhas pontuais e alertas importantes e deve ser usado exclusivamente na homepage de um portal institucional. Nesse caso, a peça gráfica será sempre posicionada entre o cabeçalho do portal e a coluna de menus e o miolo da homepage, substituindo a barra de destaque. Banner destaque x 00 px Banner destaque 960 x 00 px 0

211 Banners Formatos Banner Destaque Interno Assim como no caso anterior, esse banner deve divulgar campanhas pontuais e alertas importantes. A diferença é a que a peça deve ser usada exclusivamente nas editorias (subhomes) de um portal, sempre posicionada no topo do miolo de conteúdo. Banner destaque interno 750 x 90 px Banner destaque interno x 90 px

212 Banners Formatos Banner Em Capas retângulo Existem diferentes maneiras para aplicar o banner na home e em subhomes. No exemplo ao lado, o recurso gráfico tem a largura de uma coluna (0 pixels) e pode ser usado em qualquer uma das colunas do miolo da capa. Retângulo 0 x 0 px retângulo 0 x 0 px retângulo 0 x 0 px retângulo 0 x 0 px

213 Banners Formatos Banner Em Capas fullbanner Na variação ao lado, o grid é dividido em duas colunas estando o banner aplicado na coluna de maior largura (90 px), sempre à esquerda. Este banner pode ser utilizado tanto na home como nas subhomes. Fullbanner 90 x 70 px

214 Banners Formatos Banner Em Capas Square Existem diferentes maneiras para aplicar o banner na home e em subhomes. No exemplo ao lado, o recurso gráfico tem a largura de uma coluna (0 pixels) e pode ser usado apenas na coluna da direita do miolo da capa. Para evitar que home e subhome fiquem poluídas visualmente, orienta-se que seja usado apenas um banner por capa. Square 0 x 60 px Square 0 x 60 px

215 Banners Formatos Selo O banner ao lado cumpre a função de um selo e seu uso pode ser variado. O banner selo pode, por exemplo, indicar ao visitante do portal que todo o conteúdo posicionado abaixo pertence ou tem alguma relação ao tema tratado na arte gráfica. Também pode ser utilizado para chamar atenção do usuário e ser ponto de acesso para áreas distintas de um portal ou outros sites. Apesar de poder ser utilizado para diferentes situações, tanto na homepage quanto nas subhomes, avalie junto à equipe de arte da área de comunicação do órgão a melhor maneira de aplicá-lo. Selo 0 x 70 px 5

216 . Funcionalidades Avançadas

217 Funcionalidades Avançadas Funcionalidades Avançadas O Portal Padrão conta com funcionalidades avançadas, aprovadas e recomendadas pela Secretaria de Comunicação Social da Presidência da República (Secom), que podem melhorar a experiência do gestor de conteúdo e/ou dos visitantes de um site ou portal. Elas não acompanham o pacote de instalação do Portal Padrão pois sua implantação poderia aumentar o nível de complexidade deste produto da Identidade Padrão de Comunicação Digital do Governo Federal ou mesmo ter pré-requisitos que não compõem o produto padrão. Porém, podem ser úteis dependendo do projeto editorial para sites e portais de um órgão do Poder Executivo. Para ser escolhida pela Secom para fazer parte desta lista, a funcionalidade deve ser aplicada e testada com sucesso em um portal que aplique a Identidade Padrão de Comunicação Digital do Governo Federal. O teste da funcionalidade deve levar em conta a sua acessibilidade, segurança, navegabilidade e estabilidade de funcionamento. 7

218 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada A Busca Multifacetada é uma funcionalidade avançada que proporciona ao gestor de conteúdo uma ferramenta que melhora a pesquisa de objetos no site, com diversos formatos de filtros. Ela permite a pesquisa por termos e também por períodos de data, podendo seu resultado ser ordenado por mais de um critério. O seu funcionamento depende de um correto tagueamento dos conteúdos de um portal. O uso de palavras-chave em notícias, imagens, vídeos e áudios auxilia o gestor de conteúdo a criar filtros mais específicos e facilita a busca feita pelos visitantes do site. Confira as orientações sobre tagueamento no capítulo Recomendações sobre Tagueamento presente no Manual de Diretrizes, disponível no Site Secom. Apesar de não estar no pacote de instalação do Portal Padrão, sua aplicação pode ser acessada e testada no novo Portal Planalto e no novo Site Secom. Os dois portais fazem uso da Busca Multifacetada em diferentes áreas e para diferentes tipos de conteúdo. No Portal Planalto, por exemplo, esse tipo de busca é usado para que o visitante acesse arquivos de áudio, textos e avisos de credenciamento para eventos coordenados pelo Palácio do Planalto. Já no Site Secom, a Busca Multifacetada é aplicada, por exemplo, na seção que reúne todas as campanhas publicitárias (nos formatos áudio, vídeo, texto e imagem) assinadas pela Secom ou então que receberam algum tipo de apoio do órgão federal. Se você utiliza o CMS Plone, a busca Multifacetada já está pronta para uso. Saiba como realizar a instalação e as configurações acessando o Manual de Funcionalidades Avançadas para Portais - CMS Plone. Se utiliza outro CMS, veja a seguir mais detalhes para o desenvolvimento desta funcionalidade. 8

219 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada Campo para entrada de palavras para busca, seguido pelo botão Pesquisar. Campo de filtros de pesquisa (cabe ao gestor de conteúdo definir quais e quantos serão os filtros da busca multifacetada). Campo de resultado da busca. 9

220 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada A Busca Multifacetada permite encontrar conteúdos publicados em um portal com a utilização de critérios de busca mais específicos. Além do campo de busca por palavras-chaves no topo, a funcionalidade traz filtros de busca na coluna lateral à direita, definidos segundo a necessidade de cada órgão, mas sempre contendo a opção de filtro Por período. Orienta-se que os resultados sejam exibidos em ordem cronológica inversa (ou seja o mais novo em primeiro lugar) e que o número de resultados por página seja limitado a 0 itens (ou seja quando uma busca apresentar 5 itens, 0 ficam na primeira página e os outros 5 em uma segunda página). Ao escrever uma palavra no campo de busca e clicar no botão Pesquisar, o visitante terá acesso a uma lista de resultados em ordem cronológica de publicação. Os itens presentes na lista contêm data, hora e tipo de conteúdo acompanhado de ícone exibidos à esquerda, além do título do conteúdo, subtítulo (se houver) e palavras-chaves (tags) cadastradas naquele conteúdo. Ao clicar em um dos itens o visitante é levado diretamente ao conteúdo que escolheu, sem uma página-pedágio. Caso a pesquisa não encontre qualquer resultado, a Busca Multifacetada deverá exibir o seguinte texto ao visitante: Não há resultados para esta pesquisa A ordem de exibição do resultado da busca e a quantidade de itens que serão exibidos por páginas são definidas pelo gestor, na área de configurações da funcionalidade no ambiente de gestão de conteúdo do portal. Também cabe ao gestor a definição sobre quantos e quais filtros de buscas serão disponibilizados bem como que tipo de conteúdo a Busca Multifacetada irá procurar. Filtro por perídodo 0

221 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada A Busca Multifacetada permite que o visitante tenha controle sobre aquilo que está pesquisando em um portal. filtro(s) selecionado(s) anteriormente. O campo de busca não possui limite de caracteres, dando ao visitante a possibilidade de escrever a(s) palavra(s) que desejar. O resultado para essa busca só será gerado quando o visitante acionar o botão Pesquisar. Caso queira alterar a(s) palavra (s) registrada (s) no campo busca, o visitante deverá pressionar o botão Pesquisar novamente para que um novo resultado seja gerado. Caso seja de seu interesse, o visitante poderá refinar o resultado da busca apresentada ao clicar na lista de filtros definidas pelo órgão, posicionada na coluna à direita da Busca Multifacetada. É dada ao visitante a liberdade de escolher quais e quantos filtros ele deseja aplicar em sua busca. Os campos Data de início e Data final definem o intervalo de datas no qual a busca deve realizar a pesquisa. Ao clicar sobre um desses campos, será exibido um calendário para que seja indicado o ano, o mês e o dia. Item ativado da lista de filtros O resultado só poderá ser exibido quando os dois campos forem definidos e só deverá mostrar os itens publicados no período de tempo determinado pelo visitante. Caso os campos Data de início e Data final fiquem vazios, a busca deverá apresentar todos os resultados cadastrados no portal (independentemente de quando) de acordo com a(s) palavra(s)-chave definida(s) no campo de busca e no(s)

222 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada campo de busca Abaixo, você pode conferir as indicações de fontes, tamanhos, cores, alinhamento, espaçamento e base. Título da busca Open Sans Bold, px - caixa alta cor: #c66ce Campo de imput 70 x 0 px cor: #ffffff contorno: px #cfcfcf Sem limites de caracteres 5 px 5 px 0 px 5 px Botão Open Sans Bold, px - caixa alta cor: #ffffff 0 x 0 px cor: #7d7d7d Base 750 x 0 px cor: #e5e8ea 5 px

223 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada filtros de pesquisa Abaixo, você pode conferir as indicações de fontes, tamanhos, cores, alinhamento, espaçamento e base. 5 px 8 px Título do filtro Open Sans Bold, px cor: #798 0 px Itens do filtro Open Sans Regular, px cor: #798 Linha pontilhada 7 x px cor: #798 5 px 5 px Base 0 px largura, a altura é variavél cor: # edeff contorno: px #c0cc px

224 Funcionalidades Avançadas Busca Multifacetada Busca Multifacetada resultado da busca Abaixo, você pode conferir as indicações de fontes, tamanhos, cores, alinhamento, espaçamento e base. Título do resultado da busca Arial Bold, 6 px cor: #798 Texto do resultado da busca Arial Regular, px cor: #798 5 px 5 0 px Tags do resultado da busca Arial Regular, px cor: #c67cd 5 px 0 px Informações Open Sans Regular, px cor: #596e7f ícone: 5x5 px px 6 5 Linha pontilhada x 86px cor: #596e7f 6 Linha divisória 90 x px cor: #596e7f

225 . Acessibilidade e Responsividade Neste capítulo serão apresentadas as regras para tornar o site acessível para pessoas com deficiência visual.

226 Acessibilidade Alto Contraste Alto Contraste Seguindo os padrões de acessibilidade para pessoas com algum grau de deficiência visual, listamos as regras para alteração de cor válidas para todos os elementos: 5 Cor de fundo Independentemente da cor utilizada, ela deve ser alterada para preto (#000000). Cor de texto Independentemente da cor utilizada, ela deve ser alterada para branco (#FFFFFF). Links O modo normal do link deve ser sublinhado para se diferenciar do restante do texto. O mesmo vale para os modos hover e active. A cor do link deve ser alterada para amarelo (#FFF). Ícones Todos os ícones devem ser brancos. Linhas e contornos As linhas e os contornos de elementos devem ser alterados para branco. 6

227 Acessibilidade Alto Contraste Alto Contraste Áudio Últimos Conteúdos Enquete 7

228 Acessibilidade Alto Contraste Alto Contraste Foto Galeria de Áudios Galeria de Álbuns 8

229 Acessibilidade Alto Contraste Alto Contraste Galeria de Fotos e Vídeos Galeria de Vídeos Galeria de Vídeos 9

230 Acessibilidade Alto Contraste Alto Contraste Editoria em bloco de conteúdo de 750 px Editoria em bloco de conteúdo de 0 px Editoria em bloco de conteúdo de 0 px 0

231 Acessibilidade Alto Contraste Alto Contraste Redes Sociais Vídeo Últimas Notícias

232 . Desenvolvimento Neste capítulo serão apresentadas instruções para fazer o download e implementar os temas e estilos padrões no desenvolvimento dos sites.

233 Desenvolvimento Folha de Estilo Folha de Estilo A Secretaria de Comunicação Social da Presidência da República (Secom) disponibilizou no github um produto de tema Diazo pronto para ser utilizado no CMS Plone:

234 Desenvolvimento Folha de Estilo Folha de Estilo Caso o desenvolvedor utilize outro CMS, pode obter o estilo por meio do código do Portal Padrão em Plone, que está organizado da seguinte forma: - Estrutura do tema: tree/master/src/brasil/gov/portal/static - Esquema de cores: tree/master/src/brasil/gov/temas/themes

235 Desenvolvimento Folha de Estilo Folha de Estilo Caso o desenvolvedor utilize outro CMS, pode obter o estilo por meio do código do Portal Padrão em Plone, que está organizado da seguinte forma: - Estrutura do tema: tree/master/src/brasil/gov/portal/static - Esquema de cores: tree/master/src/brasil/gov/temas/themes 5