Download as
Browse Code »

Commit ea0ce08938e64843bdf2f1340a106d0b260b62ee

Authored by Carlos Vieira
1 parent 95fe5dda
Exists in master

Novas orientações sobre a barra/rodapé dinâmico

Showing 2 changed files with 51 additions and 19 deletions   Show diff stats
atualize.html
  Diff comments   View file @ea0ce08
... ... @@ -9,7 +9,13 @@
9 9 <link rel="stylesheet" href="css/960.css" />
10 10 <link rel="stylesheet" href="css/demo.css"/>
11 11 <link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>
12   -
  12 + <style type="text/css">
  13 + #footer-brasil {
  14 + background: none repeat scroll 0% 0% #00420c;
  15 + padding: 1em 0px;
  16 + max-width: 100%;
  17 + }
  18 + </style>
13 19 <script type="text/javascript">
14 20 function alto_contraste(title) {
15 21 var i, a;
... ... @@ -79,13 +85,7 @@
79 85 </div>
80 86 </div>
81 87  
82   - <div id="brasil-footer">
83   - <div class="container_12">
84   - <div class="grid_6">
85   - <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>
86   - </div>
87   - <div class="clear"></div>
88   - </div>
  88 + <div id="footer-brasil">
89 89 </div>
90 90 <script defer="defer" async="async" src="//barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"></script>
91 91 </body>
... ...
index.html
  Diff comments   View file @ea0ce08
... ... @@ -9,7 +9,13 @@
9 9 <link rel="stylesheet" href="css/960.css" />
10 10 <link rel="stylesheet" href="css/demo.css"/>
11 11 <link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>
12   -
  12 + <style type="text/css">
  13 + #footer-brasil {
  14 + background: none repeat scroll 0% 0% #00420c;
  15 + padding: 1em 0px;
  16 + max-width: 100%;
  17 + }
  18 + </style>
13 19 <script type="text/javascript">
14 20 function alto_contraste(title) {
15 21 var i, a;
... ... @@ -69,7 +75,7 @@
69 75  
70 76 <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>
71 77  
72   - <p>Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no sítio da <a href="http://www.secom.gov.br/">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
  78 + <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>
73 79  
74 80 <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>
75 81  
... ... @@ -100,21 +106,47 @@
100 106 &lt;script defer="defer" async="async" src="//barra.brasil.gov.br/barra.js" type="text/javascript"&gt;&lt;/script&gt;
101 107 </pre>
102 108  
103   -Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente 'defer' e 'async' conforme <a href="http://www.w3schools.com/tags/tag_script.asp">especificação da tag script pelo W3C</a>.
  109 +<p>Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente 'defer' e 'async' conforme <a href="http://www.w3schools.com/tags/tag_script.asp">exemplo do feito pelo W3Schools</a>.</p>
  110 +
  111 +<p>Para o footer dinâmico coloque este código no local do footer e aplique um dos css abaixo conforme seu tema</p>
  112 +
  113 +<pre>
  114 + &lt;div id="footer-brasil"&gt;&lt;/div&gt;
  115 +</pre>
  116 +
  117 +<p>Coloque esse código css se o seu tema for o verde</p>
  118 +<pre>
  119 +#footer-brasil {
  120 + background: none repeat scroll 0% 0% #00420c;
  121 + padding: 1em 0px;
  122 + max-width: 100%;
  123 +}
  124 +</pre>
  125 +
  126 +<p>Coloque esse código css se o seu tema for o amarelo</p>
  127 +<pre>
  128 +#footer-brasil {
  129 + background: none repeat scroll 0% 0% #2c66ce;
  130 + padding: 1em 0px;
  131 + max-width: 100%;
  132 +}
  133 +</pre>
  134 +
  135 +<p>Coloque esse código css se o seu tema for o branco ou o azul</p>
  136 +<pre>
  137 +#footer-brasil {
  138 + background: none repeat scroll 0% 0% #0042b1;
  139 + padding: 1em 0px;
  140 + max-width: 100%;
  141 +}
  142 +</pre>
104 143  
105 144 </div>
106 145 <div class="clear"></div>
107 146 </div>
108 147 </div>
109 148  
110   - <div id="brasil-footer">
111   - <div class="container_12">
112   - <div class="grid_6">
113   - <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>
114   - </div>
115   - <div class="clear"></div>
116   - </div>
117   - </div>
  149 + <div id="footer-brasil"></div>
118 150 <script defer="defer" async="async" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>
119 151  
120 152 </body>
... ...