index.html
7.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Identidade Visual do Governo Federal na Internet</title>
<link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/demo.css"/>
<link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>
<style type="text/css">
#footer-brasil {
background: none repeat scroll 0% 0% #00420c;
padding: 1em 0px;
max-width: 100%;
}
</style>
<script type="text/javascript">
function alto_contraste(title) {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
</head>
<body>
<a href="#content" style="text-indent: -999em;position: absolute; left: -999em;">Ir para Conteúdo</a>
<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px;display:block;">
<ul id="menu-barra-temp" style="list-style:none;">
<li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a><br/></li>
<li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
</ul>
</div>
<div id="acessibilidade">
<div class="container">
<ul class="atalhos">
<li><a href="#content" accesskey="1" class="ipular">Ir para Conteúdo</a></li>
</ul>
<ul class="links">
<li><a href="#" class="iacessibilidade" onclick="alto_contraste('','1')">Contraste Normal</a></li>
<li><a href="#" class="iautocontraste" onclick="alto_contraste('alto_contraste','1')">Alto Contraste</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="header">
<div class="container_12">
<div class="grid_8 suffix_1">
<h1>Identidade Visual do Governo Federal na Internet</h1>
<p>Sobre o uso e a aplicação da barra de identidade. Para maiores detalhes consulte o <a href="http://www.secom.gov.br/orientacoes-gerais/comunicacao-digital/nova-barra-de-identidade-do-governo-federal.pdf">Manual de Identidade Visual do Governo Federal na Internet Regras de aplicação da Barra de Identidade</a>.</p>
</div>
<div class="grid_3">
<a href="http://www.governoeletronico.gov.br" title="Sítio do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
</div>
<div class="clear"></div>
</div>
</div>
<div id="content">
<div class="container_12">
<div class="grid_12 suffix_1">
<h2>Sobre a barra</h2>
<p>A barra de Identidade Visual do Governo Federal na Internet tem a função de identificar, padronizar e integrar sítios e portais do Governo Federal. A barra também tem a função de proporcionar acesso direto ao Portal Brasil - <a href="http://brasil.gov.br">brasil.gov.br</a>, à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 - <a href="http://servicos.gov.br/">servicos.gov.br/</a>, página com toda a legislação brasileira - <a href="http://planalto.gov.br/legislacao/">planalto.gov.br/legislacao/</a> e link para os canais de comunicação do Governo Federal.</p>
<p>Seu uso está normatizado por meio da Instrução Normativa nº 8, de 19 de dezembro de 2014, que pode ser encontrada no sítio da <a href="http://www.secom.gov.br/acesso-a-informacao/institucional/legislacao/arquivos-de-instrucoes-normativas/2014in08-comunicacao-digital.pdf">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
<p>Com o objetivo de padronizar a codificação e garantir a aderência às normas da Administração Pública, a nova versão da barra utiliza uma arquitetura integrada e dinâmica, não precisa ser desenvolvida, pois sua funcionalidade encontra-se corretamente configurada e pronta para uso.</p>
<p>A publicação da barra pelos órgãos deverá ser feita de maneira dinâmica por meio da inclusão do código publicado no item Instruções para Uso da Barra no HTML do sítio ou portal.</p>
<p>Após esta primeira publicação, as demais atualizações serão automáticas.</p>
<p>A barra funciona de maneira unificada. Todos os sítios e portais que utilizam esta versão apresentam os conteúdos uniformizados.</p>
<h2>Instruções para o uso da barra</h2>
<h3>Aplicando os Scripts</h3>
<p>Cole este código logo após a abertura da tag <body>.</p>
<pre>
<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
<ul id="menu-barra-temp" style="list-style:none;">
<li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li>
<li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
</ul>
</div>
</pre>
<p>Cole este código ao final antes do fechamento da tag <body>. A boa prática orienta que códigos JavaScript que modificam a página no momento do carregamento devem ser declarados ao final do elemento <body>.</p>
<pre>
<script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>
</pre>
<p>Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente 'defer' conforme <a href="http://www.w3schools.com/tags/tag_script.asp">exemplo feito pelo W3Schools</a>.</p>
<p>Para o footer dinâmico coloque este código no local do footer e aplique um dos css abaixo conforme seu tema</p>
<pre>
<div id="footer-brasil"></div>
</pre>
<p>Coloque esse código css se o seu tema for o verde</p>
<pre>
#footer-brasil {
background: none repeat scroll 0% 0% #00420c;
padding: 1em 0px;
max-width: 100%;
}
</pre>
<p>Coloque esse código css se o seu tema for o amarelo</p>
<pre>
#footer-brasil {
background: none repeat scroll 0% 0% #2c66ce;
padding: 1em 0px;
max-width: 100%;
}
</pre>
<p>Coloque esse código css se o seu tema for o branco ou o azul</p>
<pre>
#footer-brasil {
background: none repeat scroll 0% 0% #0042b1;
padding: 1em 0px;
max-width: 100%;
}
</pre>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer-brasil"></div>
<script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>
</body>
</html>