92c26f1b
 Carlos Vieira
Adiciona arquivos...
|
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
|
Habilitando a barra na página
-----------------------------
Cole este código após a abertura da tag <body>.
.. code-block:: html
<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>
.. important::
A página deve implementar a `recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo`_. O primeiro link da página deve ser o de ir para o conteúdo. `Veja um exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo`_.
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>**.
.. code-block:: html
<script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>
.. note::
Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente 'defer' conforme `exemplo feito pelo W3Schools para a tag script`_.
Mantendo o contexto do órgão no Portal de Serviços ao clicar no link 'Serviços' da barra
----------------------------------------------------------------------------------------
Para habilitar o parâmentro 'orgao' no link de 'Serviços' cole este código na tag <head>.
.. code-block:: html
<meta property="creator.productor"
content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/NUMERO">
.. important::
Esse código é específico para cada órgão. Não utilize códigos de outros órgãos. Troque o **NUMERO** pelo número correto do órgão no SIORG. `Acesse o SIORG e procure pelo seu órgão`_.
Habilitando o footer dinâmico na barra
--------------------------------------
Para o footer dinâmico coloque este código no local do footer e aplique um dos css abaixo conforme seu tema
.. code-block:: html
<div id="footer-brasil"></div>
Coloque esse código css se o seu tema for o **verde**:
.. code-block:: css
#footer-brasil {
background: none repeat scroll 0% 0% #00420c;
padding: 1em 0px;
max-width: 100%;
}
Coloque esse código css se o seu tema for o **amarelo**:
.. code-block:: css
#footer-brasil {
background: none repeat scroll 0% 0% #2c66ce;
padding: 1em 0px;
max-width: 100%;
}
Coloque esse código css se o seu tema for o **branco** ou o **azul**:
.. code-block:: css
#footer-brasil {
background: none repeat scroll 0% 0% #0042b1;
padding: 1em 0px;
max-width: 100%;
}
Para habilitar/desabilitar o alto contraste na barra
----------------------------------------------------
Para habilitar o alto contraste da barra e do rodapé habilite a classe 'contraste' no body:
.. code-block:: html
<body class="contraste">
Para desabilitar o alto contraste da barra e do rodapé desabilite a classe 'contraste' no body:
.. code-block:: html
<body class="">
.. _`Veja um exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo`: https://github.com/plonegovbr/brasil.gov.temas/commit/8033373ec152d9caa3026107dd999d149a4ba7cf#diff-b7977cf34206f8facf114ac5d6795021L22
.. _`recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo`: http://emag.governoeletronico.gov.br/#s3.1
.. _`exemplo feito pelo W3Schools para a tag script`: http://www.w3schools.com/tags/tag_script.asp
.. _`Acesse o SIORG e procure pelo seu órgão`: http://siorg.planejamento.gov.br/
|