-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·187 lines (150 loc) · 9.34 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!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>
<ol>
<li><h4>Habilitando a barra na página</h4>
<p>Cole este código 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> Atenção! A página deve implementar a <a href="http://emag.governoeletronico.gov.br/#s3.1"> recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo.</a> O primeiro link da página deve ser o de ir para o conteúdo</p>. Veja um <a href="https://github.com/plonegovbr/brasil.gov.temas/commit/8033373ec152d9caa3026107dd999d149a4ba7cf#diff-b7977cf34206f8facf114ac5d6795021L22">exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo.</a>
<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 para a tag script</a>.</p>
</li>
<li><h4>Mantendo o contexto do órgão no Portal de Serviços ao clicar no link 'Serviços' da barra</h4>
<p>Para habilitar o parâmentro 'orgao' no link de 'Serviços' cole este código na tag <head>.</p>
<pre>
<meta property="creator.productor" content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/<strong>NUMERO</strong>">
</pre>
<p>Atenção: Troque o <strong>NUMERO</strong> pelo número correto do órgão no SIORG. <a href="http://siorg.planejamento.gov.br">Acesse o SIORG e procure pelo seu órgão.</a></p>
</li>
<li>
<h4>Habilitando o footer dinâmico na barra</h4>
<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>
</li>
<li>
<h4>Para habilitar/desabilitar o alto contraste na barra</h4>
<p>Para habilitar o alto contraste da barra e do rodapé habilite a classe 'contraste' no body:</p>
<pre>
<body class="contraste">
</pre>
<p>Para desabilitar o alto contraste da barra e do rodapé desabilite a classe 'contraste' no body:</p>
<pre>
<body class="">
</pre>
</li>
</ol>
</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>