Академический Документы
Профессиональный Документы
Культура Документы
Institucional Padro
Identidade Padro de Comunicao Digital do Poder Executivo Federal
Economicidade 12 Miolo 49
Rodap 50
11 Formatos 209
Banners 208
12 Busca Multifacetada
Funcionalidades avanadas 216
218
1. Apresentao
Apresentao
Este Guia de Estilo foi desenvolvido com o objetivo de apresentar as funes, caractersticas e relaes estruturais entre os diversos elementos do projeto grfico, possibilitando a compreenso
do conjunto e ao mesmo tempo oferecendo as informaes necessrias para sua correta replicao.
O Guia de Estilo um complemento do Manual de Diretrizes. O documento, disponvel para consulta no Site da Secretaria de Comunicao Social da Presidncia da Repblica, deve ser
consultado em primeiro lugar, j que traz os conceitos da Identidade Padro de Comunicao Digital, alm de apresentar as funes, vantagens e caractersticas do Portal Institucional Padro.
Os mdulos e demais peas grficas listados e explicados neste manual so exemplos ideais de aplicao nos portais de rgos do Poder Executivo Federal. Independentemente do sistema
de gesto de contedo (CMS) escolhido, cada rgo deve perseguir este ideal para a correta padronizao de estilo.
Foco no pblico
Os contedos das propriedades digitais so disponibilizados com foco no pblico principal. Aliado a uma
linguagem multimdia de fcil entendimento, os sites e portais tornam-se acessveis a todos. O objetivo aqui
que o interessado consiga, de fato, ter conhecimento e compreenso do assunto procurado.
A fim de facilitar a identificao do pblico com as propriedades digitais ligadas ao governo federal, a
Identidade Padro de Comunicao Digital do Governo Federal foi desenvolvida equilibrando os padres
estabelecidos e as peculiaridades de cada rgo. Sempre com o foco no pblico, a padronizao foi intencional
para que o cidado no tenha dificuldade em conseguir informaes ao acessar as propriedades digitais
do governo. Alm da facilidade de acesso, acredita-se que a adoo das diretrizes da Identidade Padro de
Comunicao Digital pelos rgos do Poder Executivo Federal gere mais credibilidade e posicionamento ao
prprio governo ao criar uma identificao das propriedades digitais governamentais disponveis populao.
O Portal Institucional Padro segue esta diretriz, conforme poder ser visto nos prximos captulos deste Guia
de Estilo.
Acessibilidade e Responsividade
Segundo o Decreto n 5.296, de 2004, que torna obrigatria a implementao dos critrios de acessibilidade,
a Identidade Padro de Comunicao Digital do Governo Federal busca garantir o acesso a todos,
independentemente da forma ou dispositivo de conexo, assegurando a acessibilidade digital e o acesso
ubquo.
Tendo em vista o crescimento no acesso internet por meio de dispositivos mveis, a construo do Portal
Padro ocorreu de maneira responsiva. Isto , o Portal j concebido de maneira flexvel para se adaptar
aos diferentes tamanhos de tela, atendendo a uma ampla variedade de dispositivos, mantendo a gesto do
contedo organizada e eficaz. Dessa maneira, o acesso garantido em vrias plataformas.
Economicidade
A Identidade Padro de Comunicao Digital do Governo Federal busca identificar iniciativas desenvolvidas
por um rgo e que possam ser aplicadas em outros rgos do Poder Executivo Federal. So premissas da
Identidade Padro de Comunicao Digital o uso ampliado, o desenvolvimento colaborativo e a replicao de
solues.
Um exemplo de aplicao dessas premissas o Portal Padro, criado com uma estrutura reutilizvel, ou seja,
que pode ser aplicada em diferentes rgos. Dessa forma no preciso investir em uma nova arquitetura e
criao, podendo reaproveitar as ferramentas j organizadas e pr-formatadas.
O Portal Padro constitudo de mdulos prontos para serem desenvolvidos, possibilitando reduo de custo
material e humano.
Legenda
Elementos indicativos para especificao de Indica que o alinhamento do Indica que o alinhamento do
leiautes, elementos master e grids, no que tange: texto dentro do elemento texto dentro do elemento no
espaamentos no qual ele est inserido qual ele est inserido direita
alinhamentos esquerda (e ao centro, se o (e ao centro, se o espaamento
formatos espaamento vertical no for vertical no for especificado).
caractersticas especificado).
Grid
Cabealho e rodap parte, o grid formado por
dois grupos principais de colunas: CABEALHO (HEADER)
de largura;
Bloco de contedo divivido em trs partes,
todas com 230 pixels de largura;
Bloco de contedo dividido em seis partes,
todas com 100 pixels de largura.
1 1
1024 px
1 1
768 px
320 px
Tipografia
Para a apresentao de todo o contedo dos
novos sites do Governo Federal, somente duas
fontes so utilizadas.
So elas:
Open Sans (Google Fonts)
Arial
Tipografia
open sans REGULAR regular
AaBbCcDdEeFfGgHh
Open Sans Bold
1234567890
Bold
AaBbCcDdEeFfGgHh
1234567890
Font stack: Open Sans, Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Open Sans, .....}
Tipografia
Arial regular regular
AaBbCcDdEeFfGgHh
Arial bold
1234567890
Bold
AaBbCcDdEeFfGgHh
1234567890
Font stack: Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Arial, .....}
1 Texto corrido
Arial Regular, 15 px
Entrelinhas: 21 px
cor: #172938
Links no texto
Arial Regular, 15 px
Entrelinhas: 21 px
cor: #2c67cd
Cores
Para apresentar a imagem do Governo Federal a partir
de uma identidade nica e fornecer maior articulao aos
rgos, foi desenvolvida uma paleta de cores derivadas
de signos nacionais, tais como a Bandeira Nacional, os
brases, insgnias, entre outros. A seguir sero dispostos
os discos cromticos (paletas de cores) com suas
derivaes, complementos e recomendaes.
A cor exerce um papel fundamental ao exprimir
a atmosfera do Governo Federal. Ela contm,
subjetivamente, um cdigo cultural que ressalta
a importncia dos signos brasileiros. A paleta foi
desenvolvida sob os parmetros de acessibilidade
expostos no e-MAG. As variaes e combinaes
propostas podem ser intercaladas e usadas de diferentes
formas, desde que estejam sempre de acordo com as
instrues de acessibilidade do manual.
A percepo de cor depende no apenas da pigmentao
das superfcies em si, mas tambm da intensidade
e do tipo de tom aplicados a ela. Esses fatores so
determinantes no uso de degrads e contrastes. Dessa
forma, sugere-se aplicar sempre o maior contraste
possvel sem que se perca a riqueza cromtica da paleta.
Cores valores
Cores em RGB e hexadecimal. CORES PRIMRIAS
Cores degrads
Exemplos de aplicao.
Certo Degrads com efeito moderado de luminosidade e volume
cones
cones de contedo cones de funcionalidade
Os pictogramas auxiliam no entendimento do (utilizados para direcionar a outras mdias) (utilizados para acessar servios e aplicaes)
contedo e podem ser utilizados em conjunto com
sua legenda ou sozinhos. Foi criado um repositrio
de cones que pode ser reutilizado conforme a
necessidade. Para casos nos quais no existam
cones pr-estabelecidos, os mesmos podem ser
criados baseando-se na utilizao de no mximo duas
cores (quando cercado de quadrado colorido), na
simplicidade e na manuteno de reas de respiro,
como presentes nos cones a seguir.
Os cones tambm devem ser objetivos e fceis
de entender ao primeiro olhar contendo o mnimo
possvel de linhas e ornamentos, como mostrado nos
exemplos a seguir.
Devem ser observados os seguintes aspectos para a Verses reduzidas
criao de novos cones dentro da identidade padro:
utilizao do grid de montagem, enquadramento
perfeito no pixel, facilidade de cognio, objetividade
e literalidade.
2 Cabealho (header)
3
3 Coluna de Menus
4 Miolo
5 Rodap (footer)
4
1 2 3 4 5 6
A Barra parte constituinte da Identidade Padro de Comunicao Digital do Governo Para oferecer manuteno eficiente, a barra est hospedada no Servio Federal de
Federal, tendo como funes identificar, padronizar e integrar sites e portais que devem Processamento de Dados (Serpro). As instrues para o uso da Barra de Identidade
seguir essas diretrizes. podem ser acessadas no site do Governo Eletrnico.
1 Portal Brasil: acesso ao Portal Brasil, responsvel por divulgar servios e informaes,
A barra tambm tem a funo de proporcionar acesso direto ao Portal Brasil, s
com linguagem acessvel ao cidado, de temas dos ministrios e rgos.
informaes pblicas de acordo com a Lei de acesso informao, aos canais de
participao social, ao portal de servios prestados pelos diversos rgos, pgina com toda Acesso Informao: link para a pgina do Portal Brasil, que rene atalhos para
2
a legislao brasileira e link para os canais de comunicao do Governo Federal. a Lei de Acesso Informao, Portal da Transparncia, Dados Abertos e o Portal Brasileiro
de Dados Geoespaciais.
A Barra de Identidade Visual tem como caracterstica a manuteno eficiente, permitindo
3 Participe: Link para a pgina do Portal Brasil que rene atalhos para os canais de
intervenes nicas para replicao em todos os rgos governamentais. Tambm
Participao Social.
permite mensurao estatstica por meio de rastreamento dos hbitos de navegao dos
usurios em todos os rgos governamentais com uma nica fonte. 4 Servios: link para Guia de Servios.
Composio da barra:
1 Acesso informao
Open Sans Semibold, 11 px,
#606060/ R: 96 G: 96 B: 96
2
Fundo da barra
#F1F1F1/ R: 241 G: 241 B: 241
3
Linha da barra
#DFDFDF/ R: 223 G: 223 B: 223
Cabealho
O cabealho (header) traz as informaes bsicas 4 Subordinao do rgo Para compor a padronizao de estilo (CSS),
de identificao de um site como o nome, a qual Open Sans Regular, 12 px o texto no deve ser escrito em caixa alta,
ministrio est subordinado, alm dos menus de servio,
mas sim em caixa baixa e, ento, indicado
acessibilidade e redes sociais e a ferramenta de busca. 5 Barra de Acessibilidade para ser transformado em caixa alta.
Open Sans Regular, 10 px
Mais detalhes sobre conceituao desta parte da 9 Redes Sociais e RSS
estrutura podem ser acessados no Manual de Diretrizes 6 Campo de Busca Os cones de Redes Sociais e RSS
de Comunicao Digital do Governo Federal. Open Sans Regular, 12 px disponveis para utilizao devem ser
obrigatoriamente retirados do repositrio.
Confira a seguir a composio do cabealho. Nas 7 Barra de Servios Caso algum cone de rede social no seja
prximas pginas, a mesma estrutura apresentada Open Sans Regular, 12 px contemplado no repositrio, ele deve
de acordo com as cores disponveis para cada tema ser criado seguindo as diretrizes deste
(template) do portal: 8 Migalhas de po (breadcrumb) Guia, mas respeitando a identidade da
Open Sans Regular, 10 px, caixa alta plataforma em questo.
1 Atalhos de teclado
* As migalhas de po (breadcrumb) podem
Arial Regular, 10 px 10 Barra de Idiomas
no aparecer em algumas pginas, como,
por exemplo, na pgina inicial. Open Sans Regular, 10 px
2 Denominao do rgo
Open Sans Regular, 12 px
3 Nome principal
Open Sans Extrabold, 40 px
1 5 10
2
3 6
4 9
Para a elaborao do CSS, o desenvolvedor
7
poder usar em, % ou px, como
indicado pelo W3C (www.w3c.com.br). 8
Cabealho verde
Composio do cabealho (header):
5 Barra de Acessibilidade 1 5 10
#DCFFE3/ R: 220 G: 255 B: 227 2
11 6
3
6 Cor do cone lupa
4 9
#015210/ R: 1 G: 82 B: 16
12 7
7 Barra de Servios 8
#FFFFFF/ R: 255 G: 255 B: 255
8 Migalhas de po (breadcrumb)
#2C66CE/ R: 44 G: 102 B: 206
Cabealho amarelo
Composio do cabealho (header):
2 Denominao do rgo
11 Base cabealho
#03316F/ R: 3 G: 49 B: 111 topo mais claro: #FCDD4E/ R: 252 G: 221 B: 78
base mais escura: ##F9C404/ R: 249 G: 196 B: 4
3 Nome principal
#03316F/ R: 3 G: 49 B: 111
12 Base barra de servios
#e8ab02/ R: 232 G: 171 B: 2
4 Subordinao do rgo
#03316F/ R: 3 G: 49 B: 111
5 Barra de Acessibilidade 5
1 10
#03316F/ R: 3 G: 49 B: 111 2
11 6
3
6 Cor do cone lupa
4 9
#03316F/ R: 3 G: 49 B: 111
12 7
7 Barra de Servios 8
#03316F/ R: 3 G: 49 B: 111
8 Migalhas de po (breadcrumb)
#2C66CE/ R: 44 G: 102 B: 206
Cabealho azul
Composio do cabealho (header):
1 Atalhos de teclado
10 Barra de Idiomas
#DCECFF/ R: 220 G: 236 B: 255 #FFFFFF/ R: 255 G: 255 B: 255
5 Barra de Acessibilidade 1 5 10
#DCECFF/ R: 220 G: 236 B: 255 2
11 6
3
6 Cor do cone lupa
4 9
#1F4DA3/ R: 31 G: 77 B: 163
12 7
7 Barra de Servios 8
#FFFFFF/ R: 255 G: 255 B: 255
8 Migalhas de po (breadcrumb)
#2C66CE/ R: 44 G: 102 B: 206
Cabealho branco
Composio do cabealho (header):
5 Barra de Acessibilidade 5
1 10
#2C66CE/ R: 44 G: 102 B: 206 2
11 6
3
6 Cor do cone lupa
4 9
#1F4DA3/ R: 31 G: 77 B: 163
12 7
7 Barra de Servios 8
#2C66CE/ R: 44 G: 102 B: 206
8 Migalhas de po (breadcrumb)
#2C66CE/ R: 44 G: 102 B: 206
Cabealho
Espaamentos, alinhamentos e formatos.
48 px
48 px
1 Campo de busca
221 x 30 px
15 px 15 px
30 px
2 Lupa 30 px
1 2
19 x 19 px
17 px 15 px
3
30 px 17 px
3 Redes Sociais e RSS 4 30 px
30 px
20 x 20 px
10 px 5 px
4 Barra de Servios
A cor da Barra de Servios deve ser uma
variao mais escura da cor principal do
cabealho (header). So essas:
VERDE: #00420C/ R: 0 G: 66 B: 12
BRANCO: #DADCD8/ R: 218 G: 220 B: 216
AMARELO: #F8BA07/ R: 248 G: 186 B: 7
AZUL: #0F4098/ R: 15 G: 64 B: 152
Cabealho
Espaamentos para ttulo de site com duas linhas
de texto principal.
15 px
30 px
50 px
Coluna de Menus
A Coluna de Menus apresenta ao visitante as diferentes
reas de um site. Mais detalhes sobre conceituao desta
1
parte da estrutura podem ser acessados no Manual de
Diretrizes de Comunicao Digital do Governo Federal.
2
A Coluna de Menus deve sempre ocupar a coluna lateral
esquerda do site, estando presente em todas as pginas
(exceo para a Pgina de Destaque.
1 Menu de Relevncia
2 Menu Principal
3
3 Menu Acesso Informao
4 Centrais de Contedos
Coluna de Menus
A Coluna de Menus deve sempre ocupar a coluna
lateral esquerda do site, estando presente em
todas as pginas padro (templates). 30 px
cor #C1C2C4
#00520f/ R: 0 G: 82 B: 15
#00520f/ R: 0 G: 82 B: 15
#00520f/ R: 0 G: 82 B: 15
#00520f/ R: 0 G: 82 B: 15
Miolo
Este elemento da estrutura do site composto
por mdulos de visualizao de contedo, uma
ferramenta que permite destacar no miolo das
capas das pginas principais (homes e subhomes)
textos, udios, imagens, vdeos e publicaes em
redes sociais.
Rodap
O rodap (footer) a quarta parte da estrutura do site na
Identidade Padro de Comunicao Digital e rene atalhos
para diferentes reas do site.
do portal: 2
1 Ttulo da coluna
100 px
2 Itens da coluna
28 px
4 Base
Rodap verde
Composio de cores e fontes do rodap (footer):
1 Ttulo da coluna
Open Sans Bold, 18 px
#61B06F / R: 97 G:176 B:111
2 Itens da coluna 1
Open Sans Regular, 13 px
#ffffff / R: 255 G: 255 B: 255 3
4 Base
# 00510f / R: 0 G: 81 B: 15 4
Rodap amarelo
Composio de cores e fontes do rodap (footer):
1 Ttulo da coluna
Open Sans Bold, 18 px
#03316F/ R: 3 G: 49 B: 111
2 Itens da coluna 1
Open Sans Regular, 13 px
#03316F/ R: 3 G: 49 B: 111 3
4 Base
#f8c300/ R: 248 G: 195 B: 0 4
Rodap azul
Composio de cores e fontes do rodap (footer):
1 Ttulo da coluna
Open Sans Bold, 18 px
#ffffff/ R: 255 G: 255 B: 255
2 Itens da coluna 1
Open Sans Regular, 13 px
#ffffff/ R: 255 G: 255 B: 255 3
4 Base
#1659BF/ R: 22 G: 89 B: 191 4
Rodap branco
Composio de cores e fontes do rodap (footer):
1 Ttulo da coluna
Open Sans Bold, 18 px
#2C66CE / R: 44 G:102 B:206
2 Itens da coluna 1
Open Sans Regular, 13 px
#2C66CE / R: 44 G:102 B:206 3
4 Base
#d5d5d5 / R: 213 G:213 B:213 4
100 px
18 px
2
3 Barra inferior temas azul e branco
#0042b2 / R: 0 G: 66 B: 178
Verde
Amarelo
Azul
Branco
Planos e Programas
Os rgos do Poder Executivo Federal que possurem Planos e Programas devero disponibilizar informaes e servios de utilidade pblica de maneira uniforme, organizada e acessvel para
seus pblicos.
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 apresentao de Planos e Programas em site independente e em site institucional.
Cores
Tema Branco
HEX: #ECEDF1
Ao criar um site independente para planos ou programas, o gestor de
RGB: 231 237 241
contedo deve, obrigatoriamente, utilizar o tema branco.
HEX: #ECEDF1
RGB: 236 237 241
Cabealho branco
O cabealho (header) do site independente de Planos
7 Barra de Servios 10 Barra de Idiomas
e Programas dever contar com a mesma estrutura do
#2C66CE/ R: 44 G: 102 B: 206 #2E65C9/ R: 46 G: 100 B: 200
cabealho do Portal Institucional Padro.
1 Atalhos de teclado
#2C66CE/ R: 44 G: 102 B: 206
2 Denominao do rgo
#2C66CE/ R: 44 G: 102 B: 206
1 5 10
3 Nome principal 2
4 9
4 Subordinao do rgo
7 12
#2C66CE/ R: 44 G: 102 B: 206
8
5 Barra de Acessibilidade
#2C66CE/ R: 44 G: 102 B: 206
cor #EAEBEE
6
8
8 Linha colorida acima e abaixo 10 Fundo sob editoria aberta 9
editoria aberta 1 nvel selecionado
#03316F/ R: 3 G: 49 B: 111 cor #EAEBEE
2 nvel 2 nvel selecionado
9 Menu secundrio sobre o rgo/ cor #EAEBEE cor #E1E2E5
10
site - 1 nvel - Item normal 3 nvel 3 nvel selecionado
Open Sans Regular, 14 px cor #D9DADC cor #D1D2D5
#172938/ R: 23 G: 41 B: 56 4 nvel 4 nvel selecionado
1 nvel - Item Selecionado cor #CACBCE cor #C9CACD
Open Sans Bold, 14 px 5 nvel
#172938/ R: 23 G: 41 B: 56 cor #C1C2C4
- Item normal
Open Sans Regular, 13 px
#172938/ R: 23 G: 41 B: 56
2 a 5 nvel - Item Selecionado
Open Sans Bold, 13 px
#172938/ R: 23 G: 41 B: 56
Rodap branco
O rodap (footer) de um site independente de Planos
e Programas semelhante ao de um Portal Institucional
Padro.
1
Confira a seguir a composio de cores e fontes do rodap:
2
3
1 Ttulo da coluna 5 Base da barra inferior
Open Sans Bold, 18 px #0042b2 / R: 0 G: 66 B: 178
#2C66CE / R: 44 G:102 B:206
2 Itens da coluna
Open Sans Regular, 13 px 4
#2C66CE / R: 44 G:102 B:206
5
3 Linha pontilhada vertical
#2C66CE / R: 44 G:102 B:206
4 Base
#d5d5d5 / R: 213 G:213 B:213
Apresentao
O objetivo principal da Pgina de Destaque criar uma identidade visual prpria desvinculada do portal em que foi criada para realar as campanhas institucionais e de
utilidade pblica ao cidado realizadas pelos rgos que compem o Poder Executivo Federal.
Acesse o Manual de Diretrizes para mais detalhes sobre a apresentao de Pginas de Destaque bem como informaes sobre as funes, vantagens e caractersticas da
Identidade Padro de Comunicao Digital do Governo Federal.
Legenda
Elementos indicativos para especificao de Indica que o alinhamento do Indica que o alinhamento do
leiautes, elementos master e grids, no que tange: texto dentro do elemento texto dentro do elemento no
espaamentos no qual ele est inserido qual ele est inserido direita
alinhamentos esquerda (e ao centro, se o (e ao centro, se o espaamento
formatos espaamento vertical no for vertical no for especificado).
caractersticas especificado).
Grid
O grid formado por um nico grupo de 3 colunas:
CABEALHO (HEADER)
O espaamento entre as colunas ser sempre de 30
pixels.
RODAP (FOOTER)
1 1
630 px 300 px
1024 px
Estrutura
A Pgina de Destaque possuiu uma verso mais simplificada Pgina de Destaque Portal Institucional
em relao estrutura do Portal Institucional Padro.
Coluna
Rodap
Cabealho
O cabealho da Pgina em Destaque uma verso reduzida
em relao estrutura definida para um Portal Institucional.
Cabealho
Na rea destinada identificao da campanha, Importante: nenhum item deste menu obrigatrio, ficando a equipe de contedo livre para definir
3
deve-se sempre seguir a imagem ao lado com a palavra quais sero usados. Confira os leiautes criados para os itens que formam o menu horizontal.
Campanha ocupando o espao conhecido no Portal
Institucional como Denominao do rgo e o A migalha de po (breadcrumb) prpria e considera a capa da Pgina de Destaque como
nome pelo qual a campanha ser batizada no espao 10
pgina inicial.
denominado Nome do rgo.
Cabealho
Confira a seguir a composio de cores, fontes,
espaamentos e alinhamentos do cabealho de uma
Pgina de Destaque:
1 4
1 Atalhos de teclado 2
7
#2C66CE/ R: 44 G: 102 B: 206 3
5 8
2 Identificao da campanha
#2C66CE/ R: 44 G: 102 B: 206 6
3 Nome da campanha
#2C66CE/ R: 44 G: 102 B: 206
4 Barra de Acessibilidade
#2C66CE/ R: 44 G: 102 B: 206 48 px
7 Base cabealho
topo mais claro: #F0F2F1/ R: 240 G: 242 B: 241
base mais escura: #ECEDF1/ R: 236 G: 237 B: 241
Menu
Confira abaixo o layout dos itens de menu de uma Pgina de Destaque
Rodap
Como um site que se resolve em apenas uma pgina, a formatao do rodap da Pgina de Destaque diferente daquela apresentada nos portais institucionais.
Como no existem links de primeiro nvel, barra de servio, menu de redes sociais e de navegao, o local ser preenchido com atalhos para os rgos do Poder
Executivo Federal que fazem parte da campanha.
O rodap com os atalhos para demais rgos s dever ser configurado se houver uma parceria entre dois ou mais rgos e instituies do Poder Executivo Federal.
So mantidas obrigatoriamente ao fim da pgina a barra inferior com atalho para o site Acesso Informao e a nota de direitos autorais e de desenvolvimento.
Rodap
Composio de cores, fontes, espaamentos e alinhamentos
do rodap:
1 Itens do rodap 1
Open Sans Regular e Bold 14 px 2
42 px
46 px
rea de Contedo
Espao destinado para a publicao de contedo relativo campanha. Possui um grid mais largo (do que ao aplicado no Portal Institucional) e conta com a ferramenta
de exibio de imagem de fundo (background).
Miolo
Apesar de a rea destinada ao contedo ter aumentado, no foi preciso realizar alteraes nas configuraes dos mdulos de visualizao de contedo (tiles).
Os mdulos que podem ser aplicados na Pgina de Destaque j foram listados no captulo Orientaes editoriais. A configurao desses mdulos pode ser acessada
no Manual de Gesto de Contedo do Portal Institucional Padro - CMS Plone, disponvel para consulta e download no Site Secom.
A especificao tcnica de cada um desses mdulos pode ser encontrada no Guia de Estilo do Portal Institucional Padro, tambm disponvel para consulta e
download no site da referida secretaria.
Alm daqueles j desenvolvidos, um novo mdulo foi criado especificamente para a Pgina de Destaque. O tile Espaador permite a insero de texto alternativo (ALT)
a ser exibido apenas para leitores de tela e na verso responsiva do site, alm de indicar espaamento vertical na capa para que a imagem de fundo aplicada no
entre em conflito com outras chamadas.
Cada rgo/instituio tem a liberdade de produzir as peas grficas, que iro ambientar o visitante campanha que se quer destacar. As equipes envolvidas no
processo de criao devem levar em conta possveis limitaes de altura da imagem ou de posicionamento de uma mensagem escrita para evitar interferncias entre
a imagem e demais mdulos que iro fazer parte da capa.
Por conta da acessibilidade, ser preciso utilizar o mdulo Espaador sempre que uma imagem de fundo for aplicada (mesmo que no seja preciso definir um
espaamento vertical). este mdulo que garante aos programas que fazem leitura de tela a possibilidade de traduzir uma imagem em texto.
rea de Contedo
Redes sociais
Embora no seja recomendada a criao de perfis em redes sociais exclusivos para campanhas, os perfis que j existem para este fim devem ser divulgados.
Recomenda-se o uso do mdulo destinado s redes sociais Twitter e Facebook, j configurados e aplicados no Portal Institucional Padro para exercer esta funo.
Quando no houver perfis prprios para as campanhas, o gestor de contedo dever apresentar as interaes que ocorrem nos perfis institucionais.
rea de Contedo
Exemplos de aplicao
Com imagem de destaque Sem imagem de destaque Imagem de fundo e contedo horizontal Imagem de fundo e contedo vertical
Tema
Para a Pgina de Destaque foi criado um tema especfico Pgina de Destaque Portal Institucional
(da cor cinza) para receber as alteraes no cabealho,
coluna de menus, rodap e miolo descritas anteriormente.
Mdulos
Mdulos so estruturas de visualizao de contedo Nas pginas principais (home e subhomes), os mdulos devem ser organizados de forma que,
(imagens, vdeos, textos, udios, publicaes em redes em uma mesma linha, todos mantenham tenham a mesma altura. Assim, no surgem espaos
sociais) que compem as pginas de um site. Em geral, em branco entre eles. A imagem ao lado ilustra o correto uso dos mdulos em uma capa.
seu gerenciamento flexvel: podem ser adicionados ou
retirados conforme as necessidades do gestor de contedo. A seguir, confira os mdulos desenhados e que podem ser aplicados nos sites que seguem
a Identidade Padro de Comunicao Digital.
H tambm mdulos de exibio de contedo presentes
em posies fixas na coluna mais direita do grid. Estes
mdulos so chamados de portlets e contam com uma
configurao e funcionamento muito semelhantes aos
mdulos aplicados nas capas das pginas principais. CERTO CERTO ERRADO
Banner Rotativo
Apresentao
Banner Rotativo
Abaixo, voc pode conferir as indicaes de fontes,
tamanhos, cores, raio e mximo de caracteres.
1
1 Crdito
Arial Itlico, 12 px
cor: #172938 2
2 Foto grande
750 x 423 px
canto (raio): 8 px
3 Ttulo da Matria
Arial Bold, 34 px
entre linha: 37 px
cor: #172938
mximo de caracteres: 90
4 Linha Fina
Arial Regular, 14 px
entrelinhas: 18 px
cor: #172938
mximo de caracteres: 115
Banner Rotativo
5 cones paginao
25 x 25 px
Tema Verde
Paginao no selecionada Tema Azul
base: #0f551f Paginao no selecionada
pginas: #ffffff base: #1659bf
Paginao selecionada pginas: #ffffff
base: #ffb400 Paginao selecionada
pginas: #0f551f base: #edeff1
pginas: #1659bf
Tema Amarelo
Paginao no selecionada Tema Branco
base: #03316f Paginao no selecionada
pginas: #ffffff base: #1659bf
Paginao selecionada pginas: #ffffff
base: #edeff1 Paginao selecionada
pginas: #03316f base: #edeff1 5
pginas: #1659bf
Banner Rotativo
Ao lado, voc pode conferir as indicaes alinhamento,
espaamento, base, linha divisria e linha pontilhada.
10 px
18 px
20 px
1 Crdito
1
Arial Itlico, 12 px
cor: #172938
2 Foto grande
750 x 463 px
canto (raio): 8 px
2
3 Ttulo da Matria
Arial Bold, 18 px
entre linha: 22 px
cor: #ffffff
mximo de caracteres: 130
4 Base transparente
750 x 70 px
cor: #000000
Opacidade: 70%
3
4
Tema Verde
Paginao no selecionada Tema Azul
base: #0f551f Paginao no selecionada
pginas: #ffffff base: #1659bf
Paginao selecionada pginas: #ffffff
base: #ffb400 Paginao selecionada
pginas: #0f551f base: #edeff1
pginas: #1659bf
Tema Amarelo
Paginao no selecionada Tema Branco
base: #03316f Paginao no selecionada
pginas: #ffffff base: #1659bf
Paginao selecionada pginas: #ffffff
base: #edeff1 Paginao selecionada
pginas: #03316f base: #edeff1
pginas: #1659bf
5
10 px
20 px 40 px
1 Ttulo do mdulo
Open Sans Bold, 16 px 1
cor: #454545
CAIXA ALTA
mximo de caracteres: 20
2 Ttulo do texto
Arial Bold, 15 px
cor: #335277 2
mximo de caracteres: 55
1 Base
230 x 400 px 10 px 1
2 Linha divisria
230 x 1 px
cor: #C0C1C1
20 px
8 px
8 px
1 Ttulo do mdulo
1
Open Sans Bold, 16 px
cor: #454545
CAIXA ALTA
mximo de caracteres: 20
2
2 Ttulo do texto
Arial Bold, 15 px
cor: #335277
mximo de caracteres: 55
1 Base 15 px
490 x 442 px 15 px 1
2
cor: #eeeff1/ contorno: #C0C1C1
2 Linha divisria
490 x 1 px
cor: #C0C1C1
2
15 px
15 px
30 px
Galeria de Vdeos
Apresentao
No vdeo em destaque, os recursos de interao so Bloco de contedo com 490 px de largura Bloco de contedo com 750 px de largura
os mesmos disponveis em vdeos incorporados do
Youtube. possvel dar incio (play), pausar, retirar o
som, avanar/retroceder o vdeo e assisti-lo em tela
cheia.
vdeo de destaque
Arial Regular, 13 px
entrelinhas: 16 px
cor: #FFFFFF
mximo de caracteres: 55
5
15 px
1 Base do cabealho 5 Base rea de outros vdeos 1
15 px
490 x 44 px 490 x 89 px
cor: #051D5B cor: #051D5B
3
raio (cantos superiores): 4 px 2
1 px
cor: #213E83 15 px
15 px
17 px 6
15 px
7
30 px
15 px 15 px 15 px
15 px
mximo de linhas: 3
15 px 15 px
Galeria de lbuns
Apresentao
Na Galeria de lbuns o visitante poder acessar Bloco de contedo com 490 px de largura Bloco de contedo com 750 px de largura
colees de galerias de imagens separadas por temas
especficos.
20 px
1 Base do cabealho
2
490 x 47 px
cor: #edeff1/ contorno: #D5D5D5
raio (cantos superiores): 4 px
2 Foto
490 x 102 px
contorno: 1 px/ cor: #454545
6 cones
8 px
22 x 22 px 10 px
35 px
15 px
5 px
cor: #172938 4
mximo de caracteres: 60
mximo de linhas: 2
2 Foto
750 x 420 px
contorno: 1 px/ cor: #454545
Galeria de Imagens
Apresentao
Bloco de contedo com 490 px de largura Bloco de contedo com 750 px de largura
O mdulo oferece ao usurio a possibilidade de
visualizar uma coleo de imagens (fotografias,
infogrficos, logotipos, etc).
1 Base do cabealho 20 px
490 x 47 px 2
2 Foto
490 x 368 px
4 Caixa da galeria
476 x 60 px
cor: #FFFFFF/ contorno: #CBCBCE
Miniatura da foto
5 10 px
60 x 40 px
3
6 cone de navegao 10 px
15 x 15 px 4
5
10 px
6
10 px
5 px
2
3
4
Para a elaborao do CSS, o desenvolvedor
poder usar em, % ou px, como
indicado pelo W3C (www.w3c.com.br).
5
2 Foto
750 x 562 px
4 Caixa da galeria
730 x 60 px
cor: #FFFFFF/ contorno: #CBCBCE
5 Miniatura da foto
60 x 40 px
10 px
6 cone de navegao 3
15 x 15 px 10 px
4
5
10 px
6
10 px
15 px
Player de udio
Apresentao
1 Descrio do udio
Arial Regular, 12 px
cor: #062767
1 Base
216 x 50
cor: #EDEFF1 / contorno: #C0C1C1
2 cone Player
25 x 25 px
cor: #0A2967 10 px 10 px
1
5 px
1 Descrio do udio
Arial Regular, 12 px
cor: #062767
1 Base
275 x 50
cor: #EDEFF1 / contorno: #C0C1C1
10px 10px
2 cone Player 1
25 x 25 px
2
5 px
Galeria de udios
Apresentao
4
Para manter a melhor visualizao,
recomenda-se sempre respeitar os limites
de caracteres.
20 px
2 Player
204 x 54 px
3
3 rea do ttulo do udio
15 px
230 x 90 px
cor: #F6F7F8
5 cone de navegao
6
15 x 15 px
cor: #0A2967
15 px
10 px
5
10 px
2 Ttulo do udio
Arial Bold, 14 px 2
entrelinhas: 21 px
cor: #172938
mximo de caracteres: 55
mximo de linhas: 2 3
3 Lista da galeria
Arial Regular, 12 px
cor: #172938
mximo de caracteres: 60
mximo de linhas: 3
Base 1
1 15 px
490 x 450 px 24 px
cor: #EDEFF1 / contorno: #C0C1C1
2 Player
466 x 58 px 2
5 cone de navegao 4
15 x 15 px
cor: #07266F 6
17 px
6 Linha pontilhada vertical
490 x 1 px
#D3D3D3 17 px
15 px
38 px 5
15 px
Links Externos
Apresentao
Links Externos
Abaixo, voc pode conferir as indicaes de fontes,
tamanhos, cores e mxima quantidade de caracteres.
2 Chamada 2
Arial Regular, 14 px
entrelinhas: 21 px
cor: #172938
mximo de caracteres: 55
mximo de linhas: 2
3
3 Seta
20 x 20 px
cor: #335277
Links Externos
Abaixo, voc pode conferir as indicaes alinhamento,
espaamento, base e linhas.
1 Base do cabealho
1
230 x 48 px 2
cor: #d4d4d6 / contorno: #C0C1C1
2 Linha divisria
230 x 1 px
cor: #C0C1C1
5 Base do rodap
230 x 48 px
4
cor: #d4d4d6
15 px 5 15 px
Enquete
Apresentao
Enquete
Abaixo, voc pode conferir as indicaes de fontes,
tamanhos, cores e mxima quantidade de caracteres.
3 Respostas
Arial Regular, 14 px
cor: #335277
mximo de caracteres: 60
mximo de linhas: 2 4
Enquete
Abaixo, voc pode conferir as indicaes alinhamento,
espaamento, base e linhas.
1 Base do cabealho
10 px
230 x 48 px
1
cor: #edeff1 / contorno: #C0C1C1 10 px
2 Base pergunta 2
57 px
cor: #F6F9F7
4 Base rodap 30 px
230 x 48 px
cor: #EAEBEE
10 px
3
10 px
4
12 px 10 px
Redes Sociais
Apresentao
cabealho
rodap
Redes Sociais
Abaixo, voc pode conferir as indicaes de fontes,
tamanhos, cores e espaamentos.
30 px 2 30 px
1 Ttulo do perfil 2
2 Aba
cor: #EAEBEE / contorno: #b3b4b6
cabealho
rodap
Agenda
Bloco de contedo com 230 px de largura Bloco de contedo com 490 px de largura
Apresentao
O mdulo tambm permite o acesso a demais agendas Bloco de contedo com 750 px de largura
gravadas no site pelo boto 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 rgo.
17 px
15 px
15 px
20 px
20 px
Para a elaborao do CSS, o desenvolvedor
poder usar em, % ou px, como
indicado pelo W3C (www.w3c.com.br).
17 px
15 px
15 px
30 px 20 px
30 px 20 px
20 px
1
1 Ttulo do mdulo 4 Ttulo do compromisso
Open Sans Bold, 16 px Arial Bold, 15 px
2
CAIXA ALTA cor: #335277
cor: #454545 mximo de caracteres: 55
mximo de caracteres: 20 mximo de linhas: 2
3 4
2 Data da agenda 5 cone de hora
Arial Bold, 16 px 15 x 15 px
cor: #172938 cor: #424242
5
6
Para a elaborao do CSS, o desenvolvedor
poder usar em, % ou px, como
indicado pelo W3C (www.w3c.com.br).
17 px
15 px
30 px
30 px
20 px
20 px
20 px
20 px
Dados e resultados
Mdulo utilizado para apresentar os nmeros e resultados Quando existir sistema legado como fonte de dados, o rgo deve utiliz-lo para abastecer
de um plano ou programa, com filtro para resultados gerais, esta rea de maneira automatizada e segura. A alimentao manual de dados pode gerar
por estado ou municpio. inconsistncia, alm de no ser instantnea.
Dados e resultados
Ao lado, voc pode conferir as indicaes de tamanhos 17 px
e espaamentos.
17 px
25 px
25 px
25 px
10 px 30 px
24 px
24 px
24 px
10 px
Para a elaborao do CSS, o desenvolvedor
poder usar em, % ou px, como 10 px
12 px
indicado pelo W3C (www.w3c.com.br).
12 px
Dados e resultados
1 Ttulo do mdulo 5 Aba 1
Open Sans Bold, 16 px Arial Regular, 14 px bold
CAIXA ALTA cor: #444a53
2 5
cor: #454545 cor da aba selecionada: #D3D3D3
mximo de caracteres: 20
6 Linha pontilhada entre itens
3
2 Ttulo do resultado 470 x 1 px / 1 px
Open Sans Bold, 16 px cor: #C0C1C1
CAIXA ALTA
cor: #454545 7 Texto do quadro 7
mximo de caracteres: 20 Open Sans Regular, 11 px
cor: #335277
3 Ttulo da chamada cor do quadro: #D3D3D3
Arial Regular, 14 px bold
cor: #444a53 8 Texto da fonte 6
Arial Regular, 10 px
4 Numerao cor: #444a53 4
3
Apresentao
Os portlets so pequenos mdulos de visualizao de contedo, geralmente localizados nas colunas s esquerda e direita dos sites da Identidade Padro
de Comunicao Digital.
Toda a coluna de menus, localizada esquerda, visualizada pelo visitante do site a partir da configurao de portlets de navegao.
O gestor de contedo tambm pode utilizar esta ferramenta para tornar mais atraente os textos publicados no site. So os chamados portlets de contedos
relacionados, localizados sempre direita da tela do monitor e que sero mais bem detalhados nas prximas pginas.
2 Data da notcia 3
3 Ttulo da notcia
Open Sans Bold, 13 px
cor: #335277
1 Base do box
20 px 1
230 x 376 px
cor: #edeff1 / contorno: #C0C1C1 15 px
15 px
15 px
10 px 10 px
2 Data da notcia
Open Sans Regular, 10 px
cor: #335277
2
3 Ttulo da notcia 3
Open Sans Bold, 13 px
cor: #335277
1 Base do cabealho
230 x 534 px 2
cor: #edeff1 / contorno: #C0C1C1
2 Tamanho da foto
217 x 141 px
15 px
15 px
10 px 10 px
2 Ttulo da imagem
Open Sans Bold, 13 px
cor: #454545
3 Descrio da imagem
Open Sans Regular, 13 px
cor: #454545
4 Crdito da imagem 2
10 px
1 Base do box 1
230 x 425 px
10 px
cor: #edeff1 / contorno: #C0C1C1
2 Tamanho da foto 2
222x 166 px
3 Tamanho da miniatura
45 x 36 px
10 px
10 px
10 px 10 px
3 Descrio do vdeo
Arial Regular, 13 px 3
cor: #FFFFFF
2
1 Base do box
230 x 540 px
cor: #072d6d
2 Tamanho da foto
220 x 154 px
3 Tamanho da miniatura 20 px
102 x 72 px
15 px
10 px
10 px
10 px 10 px
1 Ttulo do portlet
Open Sans Bold, 16 px 1
cor: #454545
2 Ttulo do udio
Open Sans Regular, 13 px
cor: #000000
2
1 Base do box 15 px 1
230 x 356 px
cor: #edeff1 / contorno: #C0C1C1 15 px
2 Base do player 2
206 x 48 px
3 Tamanho do cone
12 x 16 px
15 px
15 px
10 px 10 px
1 Ttulo do udio
Open Sans Bold, 13 px
cor: #454545 1
2 Tempo
Open Sans Italic, 10 px
cor: #454545 2
1 Base do player
230 x 48 px
cor: #edeff1 / contorno: #C0C1C1
2 cone player 10 px
1
23 x 23 px 2 3
cor: #072d6d
3 Tamanho do cone
11 x 11 px 10 px 10 px
cor: #072d6d
2
1 Ttulo do vdeo
Open Sans Regular, 13 px
cor: #454545
2 Tamanho da imagem
230 x 129 px
10 px
1
3 Hora 7
Open Sans Regular, 12 px 7 Adicionar ao meu
cor: #596E7F calendrio
Open Sans, 11 px
4 Ttulo nome cor: #172938
8
dos participantes
Arial Regular, 15 px 8 cones imprimir
cor: #231F20 e reportar erros
RGB: 130 105 56 RGB: 59 115 144 RGB: 185 122 0 RGB: 0 67 158
#826938 #3b7390 #b97a00 #00439e
30 px
30 px
75 px
30 px
54 px
24 px
18 px
50 px
30 px
18 px
Arial Bold, 34 px 30 px
4
entrelinhas: 37 px
5
cor: #172938 20 px
7 Texto da notcia
Arial Regular, 15 px
7
entrelinhas: 21 px
cor: #172938
Listagem
Template de uma pgina interna que exibe a relao de
notcias, imagens, vdeos e/ou udios publicados em um
site da Identidade Padro de Comunicao Digital.
Listagem
1 Ttulo da listagem
Open Sans Bold, 28 px
cor: #2C66CE
CAIXA ALTA 30 px 1
Chapu do texto 30 px
2 30 px
Open Sans Regular, 11 px 2
15 px 3
cor: da editoria
15 px 4
CAIXA ALTA
30 px
5
17 px 30 px
3 Ttulo do texto 30 px
Arial Bold, 16 px 15 px
entrelinhas: 21 px
cor: #172938
5 Palavras-chave (tags)
Arial Regular, 12 px
entrelinhas: 16 px
cor: #596E7F
17 px
Para a elaborao do CSS, o desenvolvedor
poder usar em, % ou px, como
indicado pelo W3C (www.w3c.com.br).
Listagem em Colunas
Template alternativo para a listagem dos contedos
disponveis no site. Nesta configurao, o gestor de
contedo dever dispor as chamadas no miolo da pgina
e pode fazer uso de um recurso grfico (imagem ou vdeo)
para dar mais destaques ao material publicado, como no
exemplo ao lado.
Listagem em Colunas
1 Ttulo da listagem
Open Sans Bold, 28 px
cor: #2C66CE
CAIXA ALTA
30 px 1
2 Descrio da imagem 30 px
Arial Bold, 16 px 30 px
entrelinhas: 21 px
cor: #172938
3 Imagem
230 x 136 px 15 px
2
75 px
3
30 px
Listagem de lbuns
Template utilizado para listagem dos lbuns
publicados, com uso de imagens e organizao
por data.
Listagem de lbuns
1 Ttulo da listagem 30 px
1
Open Sans Bold, 28 px 30 px
cor: #2C66CE 30 px
CAIXA ALTA
2
2 Imagem
230 x 136 px
3 Ttulo do lbum 3
Arial Bold, 16 px
entrelinhas: 21 px 4
cor: #172938 20px
20px
4 Descrio do lbum
Arial Regular, 15 px 30px
entrelinhas: 18 px
cor: #172938
Listagem de Contedos
Neste mdulo podem ser agrupados contedos variados,
como notcias, imagens, vdeos ou udios.
Listagem de Contedos
15 px
1 Linha do cabealho
750 x 4 px
1
cor do tema adotado para o site 15 px
2 64 px
2 Base do cabealho
750 x 64 px
20 px
cor: #EEEFF1
20 px
3 Linha do rodap
230 x 1 px
cor: #D6DCD7 15 px
4 Base do rodap
230 x 40 px
15 px
cor: #EEEFF1
15 px
30 px
30 px
3
10 px
4
Listagem de Contedos
1 Nome da editoria ou mdulo
Open Sans Regular, 28 px
cor da editoria
1
Fotos capa
H trs formatos possveis de fotos para 1
aplicao nas capas (homes e subhomes). Porm,
a sua aplicao nunca ocorre isoladamente, e sim
dentro dos mdulos de notcias.
Fotos internas
Para aplicao nas capas de reas internas, as fotos 1 2
podemocupar blocos com 230, 490 e 750 pixels de
largura do grid destinadas ao contedo.
Manchete
Para sites noticiosos como o Portal Brasil, deve-se usar este
mdulo para destacar as notcias mais importantes. Este
mdulo deve ser usado apenas na capa da pgina principal
(home) e logo abaixo do cabealho.
Manchete chamadas em bloco de 750 px com foto e em bloco de 230 px sem foto
1 Foto grande
15 px
750 x 320 px
canto (raio): 8 px
15 px
15 px
30 px
15 px
Manchete chamadas em bloco de 750 px com foto e em bloco de 230 px sem foto
1 Chapu do texto de destaque 4 Chapu dos textos secundrios 1
Manchete chamadas em bloco de 750 px sem foto e em bloco de 230 px com foto
1 Linha inferior do cabealho / divisria
750 x 1 px
cor: #D7D7D7
2 Foto pequena
230 x 136 px 30 px
canto (raio): 8 px 15 px
30 px
1
30 px
8 px
2
15 px
15 px
1
30 px
Manchete chamadas em bloco de 750 px sem foto e em bloco de 230 px com foto
1 Chapu do texto de destaque 4 Chapu dos textos secundrios
Open Sans Bold, 16 px Arial Regular, 15 px
cor da editoria entrelinhas: 18 px
CAIXA ALTA cor: #172938
mximo de caracteres: 60
2 Ttulo do texto de destaque
mximo de linhas: 2
Arial Bold, 34 px 1
2
entrelinha: 37 px
5 Ttulo dos textos secundrios
cor: #172938 3
Arial Bold, 16 px
mximo de caracteres: 55
entrelinhas: 21 px
3 Linha fina do texto de destaque cor: #172938 4
Arial Regular, 16 px mximo de caracteres 55
entrelinhas: 21 px mximo de linhas: 2
cor: #172938
mximo de caracteres: 130 6 Linha fina dos textos secundrios
Arial Bold, 14 px
entrelinhas: 21 px
5
cor: #172938
mximo de caracteres: 55 6
mximo de linhas: 2
30 px
15 px
30 px
30 px
1
30 px
8 px
mximo de linhas: 2
30 px
30 px
1
2 Ttulo do texto
Arial Bold, 34 px
entrelinha: 37 px
1
cor: #172938
mximo de caracteres: 55 2
Manchete chamadas em bloco de 750 px com foto e em bloco de 230 px sem foto
1 Linha divisria
750 x 1 px
cor: #D7D7D7
2 Foto pequena
230 x 136 px
canto (raio): 8 px 10 px
30 px
1
30 px
15 px
35 px
Manchete chamadas em bloco de 750 px com foto e em bloco de 230 px sem foto
1 Chapu do texto de destaque 4 Chapu dos textos secundrios
Open Sans Regular, 11 px Arial Bold, 16 px
cor da editoria entrelinhas: 21 px
CAIXA ALTA cor: #172938
mximo de caracteres: 55
2 Ttulo do texto de destaque mximo de linhas: 2
1
Arial Bold, 34 px
entrelinha: 37 px 5 Ttulo da chamada secundria 2
cor: #172938 Arial Bold, 16 px
mximo de caracteres: 55 entrelinhas: 21 px
cor: #172938
3 Linha fina do texto de destaque 3
mximo de caracteres: 55
Arial Regular, 16 px
mximo de linhas: 2
entrelinhas: 21 px
cor: #172938 4
6 Linha fina chamada secundria
mximo de caracteres: 130
Arial Bold, 14 px 5
entrelinhas: 21 px
cor: #172938 6
mximo de caracteres: 55
mximo de linhas: 2
2 30 px
Linha divisria inferior do cabealho
15 px
750 x 1 px
cor: #D7D7D7
3 Player de vdeo
490 x 461 px 30 px
2
canto (raio): 8 px 30 px
4 15 px
Foto pequena
55 px
230 x 136 px
4
canto (raio): 8 px 3
15 px
15 px
15 px
30 px
15 px
15 px
30 px
6 Linha do rodap 10 px 30 px
230 x 1 px
cor da editoria
30 px
H variaes de:
altura, para chamadas com ou sem fotos.
ttulo, tanto para abarcar o nome de uma editoria
como o nome de um assunto.
2 Chapu do texto
Open Sans Regular, 11 px
CAIXA ALTA
cor da editoria
3 Ttulo do texto
Arial Bold, 16 px 3
entrelinhas: 21 px
cor: # 172938
4
4 Linha fina do texto
Arial Regular, 15 px
entrelinhas: 18 px
cor: #172938
Formatos
Banner um recurso grfico utilizado para destacar
qualquer tipo de contedo produzido em um portal,
organizar e/ou dar nfase para um plano, programa
e campanha de um rgo do poder executivo ou do
governo federal, servir de ponto de acesso para uma
determinada rea do portal, dar publicidade para
o lanamento de um novo portal, entre outras aes que
tenham como objetivo chamar ateno do visitante.
Banner Destaque
Esse banner usado para divulgar campanhas pontuais e
alertas importantes e deve ser usado exclusivamente na
homepage de um portal institucional.
1 Banner destaque
960 x 100 px
750 x 90 px
1 Retngulo
230 x 120 px
1 Fullbanner
490 x 70 px
1 Square
230 x 260 px
Square
230 x 260 px
Selo
O banner ao lado cumpre a funo de um selo e seu uso
pode ser variado.
1 Selo
230 x 70 px
Funcionalidades Avanadas
O Portal Padro conta com funcionalidades avanadas, aprovadas e recomendadas pela Secretaria de Comunicao Social da Presidncia da Repblica (Secom),
que podem melhorar a experincia do gestor de contedo e/ou dos visitantes de um site ou portal.
Elas no acompanham o pacote de instalao do Portal Padro pois sua implantao poderia aumentar o nvel de complexidade deste produto da Identidade Padro
de Comunicao Digital do Governo Federal ou mesmo ter pr-requisitos que no compem o produto padro. Porm, podem ser teis dependendo do projeto
editorial para sites e portais de um rgo 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 Padro
de Comunicao Digital do Governo Federal. O teste da funcionalidade deve levar em conta a sua acessibilidade, segurana, navegabilidade e estabilidade de
funcionamento.
Busca Multifacetada
A Busca Multifacetada uma funcionalidade avanada que proporciona ao gestor de contedo uma ferramenta que melhora a pesquisa de objetos no site, com
diversos formatos de filtros. Ela permite a pesquisa por termos e tambm por perodos de data, podendo seu resultado ser ordenado por mais de um critrio.
O seu funcionamento depende de um correto tagueamento dos contedos de um portal. O uso de palavras-chave em notcias, imagens, vdeos e udios auxilia
o gestor de contedo a criar filtros mais especficos e facilita a busca feita pelos visitantes do site. Confira as orientaes sobre tagueamento no captulo
Recomendaes sobre Tagueamento presente no Manual de Diretrizes, disponvel no Site Secom.
Apesar de no estar no pacote de instalao do Portal Padro, sua aplicao 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 contedo.
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 Palcio do Planalto.
J no Site Secom, a Busca Multifacetada aplicada, por exemplo, na seo que rene todas as campanhas publicitrias (nos formatos udio, vdeo, texto e imagem)
assinadas pela Secom ou ento que receberam algum tipo de apoio do rgo federal.
Se voc utiliza o CMS Plone, a busca Multifacetada j est pronta para uso. Saiba como realizar a instalao e as configuraes acessando o Manual de Funcionalidades
Avanadas para Portais - CMS Plone. Se utiliza outro CMS, veja a seguir mais detalhes para o desenvolvimento desta funcionalidade.
Busca Multifacetada
1 Campo para entrada de palavras para busca,
seguido pelo boto Pesquisar.
3
2
Busca Multifacetada
A Busca Multifacetada permite encontrar contedos Orienta-se que os resultados sejam exibidos em ordem cronolgica inversa (ou seja o mais
publicados em um portal com a utilizao de critrios novo em primeiro lugar) e que o nmero de resultados por pgina seja limitado a 20 itens (ou
de busca mais especficos. Alm do campo de busca por seja quando uma busca apresentar 25 itens, 20 ficam na primeira pgina e os outros 5 em uma
palavras-chaves no topo, a funcionalidade traz filtros de segunda pgina).
busca na coluna lateral direita, definidos segundo a
necessidade de cada rgo, mas sempre contendo a opo
de filtro Por perodo.
Busca Multifacetada
A Busca Multifacetada permite que o visitante tenha filtro(s) selecionado(s) anteriormente.
controle sobre aquilo que est pesquisando em um portal.
1 Ttulo da busca
Open Sans Bold, 13 px - caixa alta
cor: #2c66ce
2 Campo de imput 15 px
1 4
720 x 30 px 5 px
2
cor: #ffffff 10 px
contorno: 1px #cfcfcf 3
15 px
Sem limites de caracteres
3 Boto 15 px
Open Sans Bold, 14 px - caixa alta
cor: #ffffff
130 x 30 px
cor: #7d7d7d
4 Base
750 x 120 px
cor: #e5e8ea
1 Ttulo do filtro
Open Sans Bold, 12 px
20 px
cor: #172938 2
2 Itens do filtro
Open Sans Regular, 11 px
cor: #172938
25 px
3
3 Linha pontilhada 25 px
227 x 1px
cor: #172938
4 Base
230 px largura, a altura variavl
cor: # edeff1
contorno: 1px #c0c1c1
12 px
cor: #2c67cd 30 px
6
4 Informaes
Open Sans Regular, 12 px 24 px
cor: #596e7f
cone: 15x15 px
5 Linha pontilhada
1 x 186px
cor: #596e7f
6 Linha divisria
490 x 1px
cor: #596e7f
Alto Contraste
Seguindo os padres de acessibilidade para
pessoas com algum grau de deficincia visual,
listamos as regras para alterao de cor vlidas
para todos os elementos:
1 Cor de fundo
Independentemente da cor utilizada, ela
deve ser alterada para preto (#000000).
2 Cor de texto
Independentemente da cor utilizada, ela
deve ser alterada para branco (#FFFFFF).
3 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 (#FFF333).
4 cones
Todos os cones devem ser brancos.
5 Linhas e contornos
As linhas e os contornos de elementos
devem ser alterados para branco.
Alto Contraste
Alto Contraste
Alto Contraste
Alto Contraste
Editoria em bloco de contedo de 750 px Editoria em bloco de contedo de 230 px Editoria em bloco de contedo de 230 px
Alto Contraste
Folha de Estilo
A Secretaria de Comunicao Social da Presidncia
da Repblica (Secom) disponibilizou no github um
produto de tema Diazo pronto para ser utilizado no
CMS Plone:
https://github.com/plonegovbr/brasil.gov.temas
Folha de Estilo
Caso o desenvolvedor utilize outro CMS, pode
obter o estilo por meio do cdigo do Portal
Padro em Plone, que est organizado da
seguinte forma:
- Estrutura do tema:
https://github.com/plonegovbr/brasil.gov.portal/
tree/master/src/brasil/gov/portal/static
- Esquema de cores:
https://github.com/plonegovbr/brasil.gov.temas/
tree/master/src/brasil/gov/temas/themes
Folha de Estilo
Caso o desenvolvedor utilize outro CMS, pode
obter o estilo por meio do cdigo do Portal
Padro em Plone, que est organizado da
seguinte forma:
- Estrutura do tema:
https://github.com/plonegovbr/brasil.gov.portal/
tree/master/src/brasil/gov/portal/static
- Esquema de cores:
https://github.com/plonegovbr/brasil.gov.temas/
tree/master/src/brasil/gov/temas/themes
Manual de Consulta Rpida para Gesto de Contedo do Portal Institucional Padro - CMS Plone
Trata-se de um guia de consulta rpida para a publicao de contedos nos sites que adotam a Identidade Digital do Poder Executivo Federal. L esto relacionadas
algumas das aes imprescindveis para a publicao dos objetos mais usuais e montagem de capas na plataforma Plone 4.3.
Manuais de apoio
Os demais manuais que fazem parte da Identidade Padro, entre eles o Manual de Orientao para atuao em Mdias Sociais, esto disponveis no Site Secom.