Instruções para a IDG 1
========================
Habilitando a barra na página
-----------------------------
Cole este código após a abertura da tag .
.. code-block:: html
.. 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 ****. 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 ****.
.. code-block:: html
.. 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`_.
Caso deseje outra língua por favor verifique a seção `Outras línguas da barra`_.
Outras línguas da barra
-----------------------
A Barra Brasil está disponível em português do Brasil, inglês, francês e espanhol. Caso deseje utilizar outra língua altere para:
- Português: http://barra.brasil.gov.br/barra.js
- Inglês: http://barra.brasil.gov.br/barra.js.en
- Francês: http://barra.brasil.gov.br/barra.js.fr
- Espanhol: http://barra.brasil.gov.br/barra.js.es
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 .
.. code-block:: html
.. 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
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
Para desabilitar o alto contraste da barra e do rodapé desabilite a classe 'contraste' no body:
.. code-block:: html
Instruções para a IDG 2
========================
Habilitando a barra na página
-----------------------------
Cole este código após a abertura da tag .
.. code-block:: html
.. 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 ****. 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 ****.
.. code-block:: html
.. 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`_.
Caso deseje outra língua por favor verifique a seção `Outras línguas da barra`_.
Outras línguas da barra
-----------------------
A Barra Brasil está disponível em português do Brasil, inglês, francês e espanhol. Caso deseje utilizar outra língua altere para:
- Português: http://barra.brasil.gov.br/barra_2.0.js
- Inglês: http://barra.brasil.gov.br/barra_2.0.js.en
- Francês: http://barra.brasil.gov.br/barra_2.0.js.fr
- Espanhol: http://barra.brasil.gov.br/barra_2.0.js.es
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 .
.. code-block:: html
.. 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
Versão da Barra
===============
A versão da Barra Brasil pode ser encontrada no topo do Javascript na tag **@version**.
.. code-block:: console
$ curl -s https://barra.brasil.gov.br/barra.js | head -c 171 | grep @version
/** @version 2.2.18 @source http://softwarepublico.gov.br/gitlab/govbr/barra-govbr/
@license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0 */
.. _`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/