***********************
.gov.br: Temas para IDG
***********************
.. contents:: Conteúdo
:depth: 2
Introdução
----------
Este pacote provê 2 temas (Diazo) modelo do Governo Federal para uso em sites Plone do Governo da República Federativa do Brasil.
O desenvolvimento deste pacote foi feito como parte da iniciativa `Portal Padrão <http://portalpadrao.plone.org.br>`_ da comunidade `PloneGov.Br <http://www.softwarelivre.gov.br/plone>`_.
Temas
-----
Tema Padrão
^^^^^^^^^^^
.. image:: https://raw.githubusercontent.com/plonegovbr/brasil.gov.temas/master/webpack/app/padrao/preview.png
:height: 214px
:width: 400px
Tema Branco
^^^^^^^^^^^
.. image:: https://raw.githubusercontent.com/plonegovbr/brasil.gov.temas/master/webpack/app/branco/preview.png
:height: 150px
:width: 200px
Estado deste pacote
-------------------
O **brasil.gov.temas** conta testes automatizados e, a cada alteração em seu
código os testes são executados pelo serviço `Travis <https://travis-ci.org/>`_.
O estado atual dos testes, a cobertura de código e o número de downloads deste pacote podem ser vistos nas imagens a seguir:
.. image:: http://img.shields.io/pypi/v/brasil.gov.temas.svg
:target: https://pypi.python.org/pypi/brasil.gov.temas
.. image:: https://img.shields.io/travis/plonegovbr/brasil.gov.temas/master.svg
:target: http://travis-ci.org/plonegovbr/brasil.gov.temas
.. image:: https://img.shields.io/coveralls/plonegovbr/brasil.gov.temas/master.svg
:target: https://coveralls.io/r/plonegovbr/brasil.gov.temas
.. image:: https://img.shields.io/codacy/grade/ec7cc947f31640b39078c4e153098d36.svg
:target: https://www.codacy.com/project/plonegovbr/brasil.gov.temas/dashboard
Instalação
----------
Para habilitar a instalação deste produto em um ambiente que utilize o buildout:
1. Editar o arquivo buildout.cfg (ou outro arquivo de configuração) e adicionar o pacote ``brasil.gov.temas`` à lista de eggs da instalação:
.. code-block:: ini
[buildout]
...
eggs =
brasil.gov.temas
2. Após alterar o arquivo de configuração é necessário executar ''bin/buildout'', que atualizará sua instalação.
3. Reinicie o Plone
4. Acesse o painel de controle e na opção **Temas** você verá os temas providos por este pacote listados.
Desenvolvimento
---------------
Passo a passo
^^^^^^^^^^^^^
1. Abrir um terminal, entrar na pasta do projeto, rodar buildout e iniciar a instancia;
2. Abrir outro terminal, entrar na pasta do projeto, iniciar o comando ``bin/watch-brasilgovtemas``;
3. Alterar os arquivos na pasta ``webpack``.
Mais detalhes
^^^^^^^^^^^^^
Utilizamos `webpack <https://webpack.js.org/>`_ para gerenciar o conteúdo estático do tema,
tomando vantagem das diversas ferramentas e plugins disponíveis para suprir nossas necessidades.
Utilizamos a receita de buildout `sc.recipe.staticresources <https://github.com/simplesconsultoria/sc.recipe.staticresources>`_ para integrar o `webpack`_ no Plone.
Ao desenvolver os temas iniciamos o watcher do `webpack`_ e trabalhamos somente na pasta "webpack" alterando os arquivos;
o `webpack`_ se encarrega de processar e gerar os arquivos em seu endereço final.
Segue uma lista dos principais arquivos:
.. code-block:: console
$ tree webpack/app
webpack/app
├── brasilgovtemas.js
├── favicons
│ └── Lista de imagens para o Favicon
├── fonts
│ └── Lista de Fontes utilizadas no site
├── index.html
├── js
│ └── Lista de módulos Javascript
├── rules.xml
├── scss
│ └── Lista de módulos Scss
├── tema-1
│ ├── brasilgovtemas.scss
│ ├── favicons
│ │ ├── browserconfig.xml
│ │ └── manifest.json
│ ├── img
│ │ └── sprite.png
│ ├── manifest.cfg
│ ├── preview.png
│ ├── sprite
│ │ └── Lista de Imagens para criação do sprite
│ └── _sprite.scss
├── tema-2
│ └── Arquivos do tema 2
└── tema-3
└── Arquivos do tema 3
Na estrutura atual, existem alguns arquivos comuns a todos os temas e alguns arquivos diferentes para cada tema.
Os arquivos globais ficam na pasta ``webpack/app`` enquanto os demais arquivos ficam dentro da pasta de cada tema.
Foi adotada a estratégia pouco comum ao Plone de não registrar os arquivos CSS e JS no ``portal_css`` e ``portal_javascripts``;
Ao invés disso, deixamos o trabalho de gerar um novo nome desses arquivos para o `webpack`_.
O arquivo ``brasilgovtemas.js`` é escrito em ES6 e, ao processar,
cria um arquivo ``brasilgovtemas-[hash].js`` transformado em ES5 através do compilador `Babel <https://babeljs.io/>`_,
e é criada uma cópia por tema desse arquivo.
Na pasta ``favicons`` existem as imagens necessárias para incluir o favicon do site para todas as plataformas.
Na pasta ``fonts`` possui as web fontes utilizadas nos temas deste pacote.
O arquivo ``index.html`` da pasta do Diazo não está no controlador de versões.
Ao invés disso, existe um ``index.html`` na pasta "webpack" que é processado a cada execução do buildout ou do `webpack`_,
e gera arquivos JS, CSS e ``index.html`` na pasta do Diazo.
Os arquivos JS e CSS possuem nomes especiais com um hash que é renovados a cada execução do buildout.
O arquivo ``rules.xml`` é copiado para cada tema, e a princípio é igual para todos os temas.
Na pasta ``scss`` existem os arquivos de estilos propriamente dito,
é la que devemos alterar alguma estrutura de CSS compartilhada por todos os temas,
e uma alteração nessa pasta repercurte em alteração me todos os temas após execução do `webpack`_.
Existe um arquivo ``brasilgovtemas.scss`` para cada tema;
nele existem definições de variáveis do que muda em cada tema, fontes, tamanhos e cores,
e importa os arquivos da pasta "scss" para processar cada tema.
Esse arquivo é transformado em ``brasilgovtemas-[hash].css`` após processamento.
Na pasta ``favicons`` dentro do tema possui arquivos de configuração relacionados ao favicon para algumas plataformas.
Estes arquivos foram criados um para cada tema pois precisam ser alterados em cada tema.
Existem ainda os arquivos ``manifest.cfg`` e ``preview.png`` que são únicos para cada tema, e são necessários pelo Diazo.
Cada tema ainda possui uma pasta "sprite", onde são adicionados os ícones utilizados no tema.
Esses ícones são processados gerando os arquivos ``_sprite.scss`` e ``img/sprite.png`` no tema.
O primeiro arquivo cria mixins utilizados no tema para facilitar a inserção de regras do sprite,
e o segundo arquivo é o sprite propriamente dito, que junta todas as imagens existens na pasta "sprite".
Foi adicionado um plugin para remover os arquivos antigos gerados com hash, para não acumular arquivos CSS e JS na pasta.
Este pacote adiciona os seguintes comandos na pasta bin do buildout para processar automaticamente os recursos estáticos:
.. code-block:: console
$ bin/env-brasilgovtemas
Este comando adiciona no terminal o node do buildout no PATH do sistema, dessa forma voce pode trabalhar com webpack conforme a documentação oficial.
.. code-block:: console
$ bin/watch-brasilgovtemas
Este comando instrui ao Webpack para esperar por qualquer mudança nos arquivos SASS e gera a versão minificada do CSS para a aplicação.
.. code-block:: console
$ bin/debug-brasilgovtemas
Este comando faz o mesmo que o comando watch, mas não minifica o CSS final. Utilizado para debugar a geração do CSS.
.. code-block:: console
$ bin/build-brasilgovtemas
Este comando cria o CSS minificado, mas não espera por mudanças.
Links de línguas no topo (Internacionalização)
----------------------------------------------
Hoje nos arquivos CSS existem regras para mostrar links de línguas,
como as classes ``language-en`` e ``language-es``.
Para adicionar links dessas línguas sem precisar customizar o tema,
adicione em ``site_actions`` actions com esse mesmo id e as regras do Diazo pegarão os links renderizados das actions posicionando corretamente na lista de línguas no tema.
Fazendo releases com o zest.releaser
------------------------------------
Os recursos estáticos do pacote são gerados usando o `webpack <https://webpack.js.org/>`_ e não são inclusos no VCS.
Se você está fazendo release usando o zest.releaser, você precisa fazer `upload manual dos arquivos no PyPI <https://github.com/zestsoftware/zest.releaser/issues/261>`_ ou você vai criar uma distribuição quebrada:
* execute ``longtest``, como de costume
* execute ``fullrelease``, como de costume, respondendo "não" a pergunta "Check out the tag?" para evitar o upload ao PyPI
* faça checkout na tag do release que você está liberando
* execute ``bin/build-brasilgovtemas`` para criar os recursos estáticos
* crie os arquivos da distribuição usando ``python setup.py sdist bdist_wheel``, como de costume
* faça o upload manual dos arquivos usando ``twine upload dist/*``
Em caso de erro você terá que criar um novo release pois o PyPI Warehouse `não permite reutilizar um nome de arquivo <https://upload.pypi.org/help/#file-name-reuse>`_.
Contribuidores
-----------------
O ``brasil.gov.temas`` não seria possível sem a contribuição das
seguintes pessoas:
- André Nogueira
- Carlos Vieira
- Danilo Barbato
- Érico Andrei
- Héctor Velarde
- Igor Prado
- Felipe Duardo
- Rennan Rodrigues
- Rodrigo Ferreira de Souza
- Tânia Andrea
Para comunicar problemas e sugerir melhorias, `abra um ticket no repositório deste pacote <https://github.com/plonegovbr/brasil.gov.temas/issues>`_.
Changelog
---------
2.0.3 (2019-02-22)
^^^^^^^^^^^^^^^^^^
- Corrige sobreposição do texto no tile de destaque no topo no responsivo.
[agnogueira]
- Exibe corretamente o valor do atributo "data-base-url" da tag Body.
[agnogueira]
2.0.2 (2018-12-28)
^^^^^^^^^^^^^^^^^^
- Corrige resultado de busca no responsivo.
[agnogueira]
- Corrige topo expansível no responsivo.
[agnogueira]
- Corrige posts do liveblog no responsivo.
[agnogueira]
- Ajustes de fontes no header e tiles.
[agnogueira]
- Alterar margens das linhas da capa.
[agnogueira]
- Corrige posicionamento do Em Alta (header expansível).
[agnogueira]
2.0.1 (2018-12-07)
^^^^^^^^^^^^^^^^^^
- Reposiciona link que impedia clique na aba de trocar senha.
[agnogueira]
- Correção de estilos do responsivo
[agnogueira]
- Corrige link para permitir que o video do liveblog seja iniciado.
[rodfersou, agnogueira]
2.0 (2018-12-04)
^^^^^^^^^^^^^^^^
- Usa API do YouTube para controlar video no topo do liveblog.
[rodfersou]
- Estilos para o tile de coleção.
[agnogueira]
- Estilos para vídeo de fundo na busca do header expansivel.
[agnogueira]
- Ajustes diversos no responsivo dos títulos dos tiles.
[agnogueira]
2.0rc1 (2018-11-23)
^^^^^^^^^^^^^^^^^^^
- Corrige erro de posicionamento do Destaque Topo causado pelas alterações de posicionamento do Social Like.
[agnogueira]
- Ajustes diversos no responsivo do tema (tiles e menu).
[agnogueira]
- Ajustes de layout no liveblog.
[agnogueira]
2.0b5 (2018-10-17)
^^^^^^^^^^^^^^^^^^
- Limita movimentação dos ícones de redes sociais para não invadir o rodapé do site.
[rodfersou]
- Corrige inserção dos links do portal actions.
[rodfersou]
- Atualiza configuração do webpack.
[rodfersou]
- Corrige inserção de viewlet de redes para permitir internacionalização.
[rodfersou]
- Move link para voltar para o topo em um viewlet no brasil.gov.portal para permitir internacionalização.
[rodfersou]
- Corrige cabeçalho expandido (fecha `#543 <https://github.com/plonegovbr/brasil.gov.temas/issues/543>`_).
[rodfersou, agnogueira]
- Move texto da licença de uso para um viewlet no brasil.gov.portal para permitir internacionalização.
[rodfersou]
- Corrige posição dos botões de compartilhamento da notícia.
[agnogueira, rodfersou]
2.0b4 (2018-10-05)
^^^^^^^^^^^^^^^^^^
- Alteração na largura do menu.
[agnogueira, rodfersou]
- Corrige altura da linha de destaque no topo.
[agnogueira, rodfersou]
2.0b3 (2018-09-28)
^^^^^^^^^^^^^^^^^^
- Adiciona estilo para controlar degrade do destaque topo.
[agnogueira]
- Altera a cor de fundo básica dos temas.
[agnogueira]
- Adiciona estilos para permitir uma imagem de fundo para o topo de uma capa.
[agnogueira]
- Corrige icone do estilo tile vinculado.
[agnogueira]
- Evita a emissão de source maps dos recursos estáticos.
[hvelarde]
2.0b2 (2018-09-04)
^^^^^^^^^^^^^^^^^^
.. warning::
Este release atualiza as dependências do processamento de recursos estáticos.
Em ambiente de desenvolvimento pode ser necessário remover as pastas ``parts`` e ``webpack/node_modules`` para efetivar a atualização de ambiente.
- Estilos iniciais para permitir a utilização de uma capa com fundo colorido.
Para que o estilo funcione, o usuário deve criar um modelo de capa com o nome "Capa fundo destacado".
[agnogueira]
- Corrige largura do tile de navegação.
[agnogueira]
- Corrige largura na tela de configuração (fecha `#211 <https://github.com/plonegovbr/brasil.gov.temas/issues/211>`_).
[agnogueira]
- Atualiza versões do `Node.js <https://nodejs.org/>`_ e sc.recipe.staticresources.
[rodfersou]
- Altera a cor do header de noticias no tema padrão.
[agnogueira]
- Correção de estilos para o funcionamento do share dos tiles
[agnogueira]
- Novas variações de tamanho para a foto sobreposta
[agnogueira]
- Novo título grande para notícias destacadas
[agnogueira]
- Deixa skip links visíveis quando acessados via teclado.
[agnogueira]
- Adiciona retorno visual para a navegação via teclado.
[agnogueira]
2.0b1 (2018-08-31)
^^^^^^^^^^^^^^^^^^
- Adiciona visäo de Filtro de resultados.
[rodfersou]
- Adiciona visão de Central de conteúdo.
[rodfersou]
- Novos estilos para a variação do header
[agnogueira]
- Adiciona novo tema branco.
[agnogueira, rodfersou]
- Corrige SCSS para que o tema funcione a partir de variáveis.
[agnogueira, rodfersou]
- Novos estilos para os tiles
[agnogueira]
- Adiciona template adicional ao diazo para variação do header
[agnogueira]
- Remove duplicidade de ID nos icones de redes sociais
[agnogueira]
- Utiliza logos do rodapé a partir da barra
[agnogueira]
- Adiciona novas variações da fonte principal.
[agnogueira]
- Revisão geral de fontes no header, footer, conteúdo e tiles.
[agnogueira]
- Altera a largura geral do Portal.
[agnogueira]
- Novo estilo para as tags.
[agnogueira]
- Ajustes visuais para as visões de coleção e filtro.
[agnogueira]
- Altera o ícone de contraste.
[agnogueira]
- Corrige o texto da licença do site e exibe em todas as páginas (ref. `#190 <https://github.com/plonegovbr/brasil.gov.temas/issues/190>`_).
[hvelarde, agnogueira]
- Corrige a exibição dos scripts para suporte a estatísticas web (fecha `#188 <https://github.com/plonegovbr/brasil.gov.temas/issues/188>`_).
[agnogueira]
2.0a6 (2018-07-06)
^^^^^^^^^^^^^^^^^^
- Ajusta a largura da página, cor de fundo e fontes.
[agnogueira]
- Revisa as fontes do topo do portal.
[agnogueira]
- Revisa estilos para brasil.gov.agenda.
[agnogueira]
2.0a5 (2018-06-06)
^^^^^^^^^^^^^^^^^^
- Revisa view de Galleria de Fotos.
[rodfersou]
- Revisão dos estilos para o topo do portal.
[agnogueira]
- Criação de estilos para os tiles do portal
[agnogueira]
- Criação de estilos para os tiles destacados no topo do portal
[agnogueira]
- Adiciona comportamento Flex por padrao aos tiles
[agnogueira]
- Variação na cor do header para seções específicas
[agnogueira]
- Evolução de estilos para o responsivo
[agnogueira]
- Variações visuais para linhas e colunas
[agnogueira]
- Estilos gerais para texto em notícias e páginas
[agnogueira]
2.0a4 (2018-02-08)
^^^^^^^^^^^^^^^^^^
- Corrige o path padrão do tema para não iniciar com "/".
[rodfersou]
- Não esconde o titulo do portal para dispositivos móveis.
[rodfersou]
2.0a3 (2018-01-11)
^^^^^^^^^^^^^^^^^^
- Corrige release quebrado.
[hvelarde]
2.0a2 (2018-01-11)
^^^^^^^^^^^^^^^^^^
- Ajustes do responsivo.
[agnogueira]
- Ajusta a busca.
[rodfersou, agnogueira]
- Adiciona favicon.
[rodfersou]
- Corrige funcionamento do contraste.
[rodfersou, agnogueira]
- Formatação básica dos conteúdos.
[agnogueira]
- Adiciona icones de redes sociais no topo e no rodapé.
[agnogueira]
- Adiciona estilos para os tiles.
[agnogueira]
- Corrige título e logo do portal.
[agnogueira]
2.0a1 (2017-12-27)
^^^^^^^^^^^^^^^^^^
- Release inicial.
[agnogueira, rodfersou, hvelarde]