govbr / barra.govbr

Barra dinâmica do governo brasileiro - migrada para https://portal.softwarepublico.gov.br/gitlab/govbr/barra-govbr

Barra.gov.br

Barra dinâmica do governo brasileiro. Nesse projeto está incluído o código da barra e do rodapé de governo.

Captura de tela da barra/rodapé

Exemplo de uso da barra/rodapé

O exemplo de como utilizar a barra no seu sítio está publicado em Manual da Barra do Governo Brasileiro. A página de testes está disponível em Teste da Barra do Governo Brasileiro. Você pode contribuir e melhorar o exemplo no Código do Manual da Barra do Governo Brasileiro.

Sugerindo nova campanha/profile

Copie o profile 'vaso' e altere os arquivos referentes a campanha ou a barra e crie um pull request.

Como gerar a barra/rodapé

Mudanças no visual da barra

Mande sua sugestão para [email protected] com cópia para [email protected] e sugira um PR.

Mudando o profile

Execute o make com o parâmetro de PROFILE. Exemplo:

	PROFILE=outubrorosa make run 

Dependências:

• python2.7

• io.js

• sass

• zlib

Para criar o ambiente de desenvolvimento execute:

  make venv 

Para profiling é necessário além dos acima:

• werkzeug

E execute o

make profile

Usando vagrant:

O Vagrant vai criar o ambiente de desenvolvimento.

vagrant up
vagrant ssh
cd barra-govbr

Geração da barra

Execute o comando:

PROFILE=outubrorosa make run

O profile selecionado é o outubrorosa nesse exemplo

Testes da barra

Execute o comando:

make teste

Para gerar um teste em XUNIT execute

make testReport

Requisitos da Barra

---

1. A Barra deve ser adaptável a um desenho fluído e fixo
2. A Barra deve suportar diferentes opções de cor de fundo
3. A Barra deve suportar a inclusão dinâmica do nome da organização
4. A Barra deve funcionar nos navegadores:

Internet Explorer versão 11 ou superior

Mozilla Firefox versão 24

Google Chrome versão C30

Safari versão S6

Opera versão 12

Navegadores de dispositivos móveis

5. A Barra deve degradar graciosamente (graceful degradation ou progressive enhancement) clientes que não possuam compatibilidade ou no qual o javascript esteja desligado.

6. A barra deve ser acessível.

7. A Barra deve conter tanto o rodapé como a barra.

Considerações sobre a arquitetura

---

1. A barra será hospedada em local centralizado e chamada de forma distribuída pelos portais institucionais;

2. A barra será incluída via javascript minificado.

3. O rodapé será incluído via javascript minificado.

barra.govbr's Issues

Ajustar posição de um dos elementos HTML

Em vários portais a aplicação da barra brasil apresenta uma das barras verticais deslocada, como segue abaixo:

O comportamento acontece em vários portais, e provavelmente é incompatibilidade com algum estilo pronto muito utilizado. O exemplo acima foi tirado de http://cnpc.cultura.gov.br

aviso de alerta no console JS do navegador

analisando o console JS do navegador, recebo esse aviso:

Pedido entre origens bloqueado: a política de mesma origem proíbe a leitura de recursos remotos em http://barra.brasil.gov.br/static/opensans-bold.woff. Isto pode ser corrigido movendo-se o recurso para o mesmo domínio ou ativando o CORS. opensans-bold.woff

downloadable font: download failed (font-family: "Open Sans" style:normal weight:bold stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://barra.brasil.gov.br/static/opensans-bold.woff

Dificuldade para atualizar a barra para o modelo 2020

Olá, descobri que existe uma barra atualizada no link: https://softwarepublico.gov.br/gitlab/govbr/barra-govbr
com data de atualização em 2020. Porém não consigo importar para o Joomla o arquivo baixado em "zip" deste site. Como faço isso? Alguém me daria uma luz?

Não é possivel acessar o link do Vlibras pela barra

Tá dando problema na barra o menu do Vlibras, ele fica por baixo, não importa se adicionamos !important ao Z-index, não está dando para acessar o link.

Vi o problema em Firefox Mac OS 45.0.2 e mobile Android 5.1.1

Sugiro simplificar o código para:

<a title="Acessível em Libras" href="http://vlibras.gov.br/" class="logo-vlibras"><img href="" alt="VLibras"></a>

Text in SVG not applying font

Different browsers not working the same way with css font-family and font-weight.

Barra apresenta erro de java script

A barra apresenta erro após a atualização para a versão 2.1.8 nesta parte do código fonte:
t=t||$().jquery,i=r.replace(p,"")

Erro no navegador:
Uncaught TypeError: $ is not a function

Melhoria na barra

Percebi que a barra só abre e fecha através do pequeno botão a direita.

Foi necessário criar um script simples, para que ao clicar fora da barra, no site do cliente... a barra feche automaticamente ou se apertar a tecla ESC, a barra fecha.

Gostaria de contribuir para que se acharem interessante, implementem na barra.

Segue codigo:
// pode se usar html ou body, se alguem quiser colocar no barrabrasil.js reescreva em javascript puro ou em qualquer .js que vai para o cliente do seu site.

$("html").click(function (e) {
// esconde barra brasil
if ($('#orgaos-governo-barra').is(":visible")) {
javascript: toggleOrgaosGoverno();
}
}).keyup(function (e) {
if (e.keyCode == 27) {
// esconde barra brasil
if ($('#orgaos-governo-barra').hasClass("mostra-orgaos")) {
javascript: toggleOrgaosGoverno();
}
}
});

// by Tiago Garcia

Janela do VLibras bloqueando acesso a links

Desde a última atualização é impossível acessar qualquer link que esteja na área coberta pela janela do VLibras, mesmo quando a janela não está visível.

Percebi o problema hoje em um site aqui da Universidade, mas verifiquei que o problema ocorre também no portal brasil.gov.br (Chrome e Firefox).

Qual a melhor forma de atender a diretiva "É importante ressaltar que o primeiro link da página deve ser o de ir para o conteúdo." usando a barra de governo?

Seguindo as regras da barra hoje em http://barra.governoeletronico.gov.br/:

Habilitando a barra na página

Cole este código logo após a abertura da tag <body>.

Não conseguimos atender a Recomendação 1.5 – Fornecer âncoras para ir direto a um bloco de conteúdo, pois o primeiro link passa a ser o "Atualize sua barra" se não tiver javascript e, se tiver, passa a ser o link do brasil.gov.br.

No brasil.gov.temas o @caduvieira fez uma modificação que atende a essa determinação do e-mag, mas achamos que esse tipo de informação deveria também estar presente em http://barra.governoeletronico.gov.br/ para as pessoas que não usam o IDG (ou alguma outra solução, se houver). O que acham?

Barra não aparece

Olá, até 31/10/2014 a barra funcionou normalmente com o código abaixo.
Hoje, 5/11/2014, ela não está aparecendo mais....
Estamos usando joomla.
[]s
Andréa

• Portal do Governo Brasileiro
• Atualize sua Barra de Governo

<script defer="defer" async="async" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>

Erro de javascript

Ao carregar a Barra Aparece o seguinte Erro:

barra.js?cor=verde:1 Uncaught TypeError: a.createTextNode is not a function

Quando o Cookie "vasoPlantaCounter" atinge o valor 2, o erro não acontece.

Endereço do site: http://www.formiga.ifmg.edu.br/

Rodapé automatizado impossibilita fazer assinatura conjunta

Considerando o manual de Marca do Governo Federal, versão Jan/2015[1]

O rodapé que agora esta sendo automatizado juntamente com a barra de governo prejudicou a aplicação de assinatura conjunta. (p16 - 1.13, Manual Marca GF)

[1] http://www.secom.gov.br/orientacoes-gerais/publicidade/manual-da-marca-do-gf-jan-2015.pdf

Proposta para solução:
Orientar o órgão adicionar uma ou mais CLASS abrevidas na DIV do rodapé qual orienta o script renderizar as assinaturas conjuntas quais foram indicadas. Exemplo:

<div id="footer-brasil" class="mj mj-sal"></div>

Renderiza o footer com a Marca do Governo seguido da assinatura em conjunto do Ministério da Justiça (mj) e depois da Secretaria de Assuntos Legislativos (mj-sal). Caso seja somente (mj), será somente do Ministerio da Justiça; caso seja mais de uma Secretaria, outra sigla deve ser inserida, exemplo: (mj mj-sal mj-snj) mj-snj = Secretaria Nacional de Justiça

Acredito que seja possível renderizar todas as siglas, imagens e código de estilo através do script para montar a partir de um template SVG, convertendo para outros formatos.

z-index da .list de links abaixo do cabeçalho

Como comentado no pull request #3 (comment)

O item .list ficou abaixo de itens do cabeçalho; é preciso adicionar em #barra-brasil .list o valor de ordem z-index: 9;.

Bug do screenshot.

Troca do Apache pelo Nginx

Logos no footer-brasil estão pixelados

Olá pessoal,
tínhamos um cartão no repositório do Portal de Serviços sobre os logos do footer-brasil estarem pixelados. O cartão é este: https://github.com/servicosgovbr/portal-de-servicos/issues/350

Consegui os logos em svg com o @almeidafab, aqui tem o logo de Acesso a Informação e aqui o logo Brasil Pátria Educadora ambos em SVG.

Ao tentar editar, cheguei na questão de que usamos o footer pronto de vocês, então não consigo mudar isso.

Vocês podem dar uma olhada? :)
Obrigada!

Problema no VLibras

Olá,

Estou utilizando o template do egov joomla e percebi que o vLibras não está rodando no site, apresentando a seguinte mensagem: "An error occuerred running the Unity content on this page. See your browser JavaScript console for more info. The error was: Script error."

Fiz o acesso no portal ouvidorias.gov.br e lá está funcionando perfeitamente.

Alguém poderia me auxiliar com esse erro?

Obrigado
Nemésio

Escrever estilo da barra para impressão

Atualmente a Barra não possui estilo para impressão, sugiro criar um estilo minimo para barra ser melhor visualizada quando impresso, exemplo a bandeira que não renderiza. Ex. cód.:

@media print {
    blih {
          color: #000;
    }
    /* etc */
}

Erro com o jQuery em modo 'noConflict' (campanha do mosquito)

A atualização com a campanha do mosquito está causando erro em nossos sites em WordPress, o qual utiliza o jQuery em modo "noConflict".

Acredito que seja simples de solucionar, substituindo as chamadas $(document).ready(function() { por jQuery(document).ready(function($) { no código javascript da barra.

Exemplo de site com problema: http://wp.ufpel.edu.br/cra/

Referências:
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Ícone de Burger Icon é png e fica pixelado em displays retina

Olá!
Percebi que o burger icon da Barra Brasil é um png que fica pixelado. Uma sugestão seria usar o ícone-fonte do Font Awesome: http://fortawesome.github.io/Font-Awesome/icon/bars/

O que acham?

Melhorias para barra em telas com resolução abaixo de 900px

Avaliar pull request: #3

Histórico do desenvolvimento dessa Issue esta em plonegovbr/brasil.gov.barra#17

Novos relatos devem ser abertos aqui ou em https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/?

Consta no repositório que esse repositório foi migrado para https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/, mas ele continua a ter atividade aqui no github. Como o git é distribuído, acreditamos que isso é apenas um mirror, correto?

No caso, não seria o caso de fecharmos o recurso desse repositório para abertura de issues e centralizá-los em https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/? Antes de abrirmos o relato https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/issues/1, ficamos na dúvida sobre qual repositório usar.

Erro de acesso misto no Chrome

Quando a barra é inserida em um site acessado via HTTPS o Chrome exibe um erro de conteúdo misto (no console) para o endereço http://eselo-prd.brazilsouth.cloudapp.azure.com:8080/buscar-avaliacao

Bootstrap + Barra Brasil quebra elementos de CSS

A aplicação da barraem páginas desenvolvidas com bootstrap sempre quebra alguns elementos de CSS.
Issue relacionada: culturagovbr/id-cultura#8

Migrar Barra Brasil para Software Público?

O novo portal do Software Público esta no AR; Lá temos ferramentas como gitlab, lista de discussões, comunidade (rede social), etc..

Acredito que "apesar" de ser somente uma barra padrão; É uma tecnologia em potêncial para ser adotado em outras esferas do governo e também por outros paises.

Essa Issue trata de disso, criar o cadastro do projeto Barra Brasil no portal do Software Público e criar um mirror do repositório por lá. Vamos unir forças a plataforma que agora também é de colaboração no código.

Att,
Valessio Brito

Tradução para espanhol

Traduzir o arquivo https://github.com/govbr/barra.govbr/blob/master/recipes/default/assets/conteudo-barra.html e gerar automaticamente a barra em espanhol

• Traduzir para espanhol
• Gerar arquivo da barra-es automaticamente

O vlibras esta dando problema com do topo da página

Todo link que esse vlibras cobre, deixou de funcionar... Mesmo quando essa imagem não é mostrada, os links continuam inativos.

Imagem do VLibras extrapolando o viewport em dispositivos móveis

Registrando aqui porque não consigo criar issue no GitLab do Portal do Software Público.