O documento descreve (1) como um grupo de usuários, desenvolvedores e designers de órgãos públicos no Distrito Federal se uniram para desenvolver uma versão do portal padrão do governo federal usando o CMS Joomla, (2) a palestra apresentará a história do projeto, as escolhas realizadas e soluções adotadas para concluí-lo no prazo, e (3) alertará sobre desafios futuros para o uso do Joomla no governo.

1. Rafael Berlanda | @berlanda
Em resposta à determinação de padronização dos portais do
governo federal, um grupo de usuários, desenvolvedores e
designers de diferentes órgãos públicos situados no Distrito Federal
se uniu para desenvolver uma versão do portal padrão em CMS
Joomla, capaz de fazer frente à única alternativa disponível que era
oferecida aos órgãos públicos, desenvolvida em outro CMS. Rafael
Berlanda foi um dos envolvidos na iniciativa, como desenvolvedor e
coordenador. A palestra pretende apresentar o histórico do projeto,
as escolhas realizadas para fins de atendimento aos requisitos e
mostrar algumas das soluções adotadas para que o projeto ficasse
pronto dentro do tempo hábil, além alertar a comunidade sobre os
desafios para a utilização do joomla no governo que estão por vir.
http://goo.gl/4K2b7R
Link apresentação:

2. Sobre o palestrante
@berlanda
● Coordenador do projeto e um dos desenvolvedores
do Portal Padrão em CMS Joomla
● Fã e participante dos joomla days desde 2008;
membro do comitê organizador do JDayBR10
● Analista de Sistemas com pós em desenvolvimento web e
certificação em gerência de projetos
● Consultor no Ministério da Educação; 7 anos de MEC
@berlanda | #JDBR14

3. Sobre o portal padrão
É uma iniciativa do governo federal para
padronizar o layout, a arquitetura da
informação e alguns serviços de sítios e portais
ligados ao governo federal.
A princípio, a mudança não foi obrigatória. A primeira fase do
projeto visava alcançar cerca de 33 instituições.
fonte: secom.gov.br

4. Sobre essa apresentação
1. Não falo em nome da SECOM-PR, do MEC ou
do governo (não me culpem)
2. Informações da SECOM utilizadas são públicas
(não me processem)
3. Tudo o que foi feito teve o intuito de ajuda
mútua e promoção da ferramenta.
Voluntariamente. (não nos critiquem,
nos ajudem :) @berlanda | #JDBR14

5. O que será abordado
1. Razões da padronização
2. Características gerais
3. Histórico
4. O projeto em Joomla
5. O case em Joomla
6. Novos desafios / avisos importantes
@berlanda | #JDBR14

6. Razões para a padronização
(pilares da comunicação)
@berlanda | #JDBR14

7. 1. Foco no público
Os conteúdos do portal são disponibilizados com foco no público principal.
Aliado a uma linguagem multimídia de fácil entendimento, o portal torna-se
acessível a todos. O objetivo aqui é que o interessado consiga, de fato, ter
conhecimento e compreensão do assunto procurado.
fonte: secom.gov.br
= arquitetura da informação
= linguagem mais acessível
= repositório de informações de governo

8. 2. Experiência digital comum
A fim de facilitar a identificação do público com os
portais ligados ao governo federal, o Portal Padrão foi
desenvolvido equilibrando a estrutura padrão
estabelecida e as peculiaridades de cada órgão.
Sempre com o foco no público, a padronização foi
intencional para que o cidadão não tenha dificuldade
em conseguir informações ao acessar outro portal do
governo. Além da facilidade de acesso, acredita-se que
o Portal Padrão, implantado em diversos órgãos, gere
mais credibilidade e posicionamento ao próprio governo
ao criar uma identificação digital dos portais
governamentais disponíveis à população.
fonte: secom.gov.br
= identificação institucional
= usabilidade (só se aprende uma vez)

9. 3. Acessibilidade e responsividade
Segundo o Decreto de Lei nº 5.296, de 2004, que torna
obrigatória a implementação dos critérios de acessibilidade em
portais para atender as pessoas com deficiência, o Portal
Padrão implantou, na página principal, um local destinado a
acessibilidade, que permite inserir esse público às ações
desenvolvidas e trabalhadas pelo governo federal. Tendo em
vista o crescimento no acesso à internet por meio de
dispositivos móveis, a construção do Portal Padrão ocorreu de
maneira responsiva. Isto é, o Portal já é concebido de maneira
flexível para se adaptar a diferentes tamanhos de tela,
atendendo a uma ampla variedade de dispositivos, mantendo a
gestão do conteúdo organizada e eficaz. Dessa maneira, o
acesso é garantido em várias plataformas.
fonte: secom.gov.br
= compatível com e-mag 3
= adaptável a dispositivos

10. 4. Economicidade
O Portal Padrão foi criado com uma estrutura reutilizável, ou seja, pode ser
aplicada em diferentes órgãos. Dessa forma não é preciso investir em uma
nova arquitetura e criação, podendo reaproveitar as ferramentas já
organizadas e pré-formatadas. O Portal Padrão é constituído de módulos
prontos para serem desenvolvidos, possibilitando redução de custo
material e humano.
fonte: secom.gov.br
= sem novos gastos com layout
= sem novos gastos com criação de CMS

11. Características gerais
Estrutura em C
padronizada
fonte: secom.gov.br

12. Cabeçalho
fonte: secom.gov.br

13. Cabeçalho
fonte: secom.gov.br
local padronizado para
perguntas frequentes e contato

14. Coluna
fonte: secom.gov.br
1
2
1
2
3
4

15. Coluna lateral
fonte: secom.gov.br
3 4
1
2
3
4

16. Rodapé
fonte: secom.gov.br

17. Cores
fonte: secom.gov.br

18. 1 2 3 4

20. HistóricoDe crise a oportunidade
@berlanda | #JDBR14

23. 1. De pronto, só havia a versão em Plone, o que
poderia resultar em migração em massa;
2. Redução de mercado potencial;
3. Equipes teriam que ser trocadas;
4. Novos serviços teriam que ser contratados;
5. Perda de cases importantes em Joomla.
Riscos
@berlanda | #JDBR14

26. Pode ser diferente
● Contrato de desenvolvimento específico em
outro CMS não impede que…
● … uma versão em CMS Joomla fosse
desenvolvida de forma independente.
@berlanda | #JDBR14

27. "Então
tá beleza"

28. "Então
tá beleza"

30. Problemas
● Pouco tempo (ninguém desenvolvia fulltime)
● Como entregar o projeto e ainda mudar a
versão de seus próprios órgãos no mesmo
prazo?
● Trabalho gratuito e possível exposição
negativa. Por quê?
● Apareceu menos ajuda do que esperava-se.
@berlanda | #JDBR14

32. Tem que dar tempo...

33. Projeto
@berlanda | #JDBR14

34. Identificação de partes interessadas
● Quem comunicar (e como)
● Com quem contar
● Com quem se preocupar
Permite saber:

35. Objetivos do projeto
1. Dar suporte aos utilizadores de Joomla no governo
federal já existentes, mitigando ou eliminando os
possíveis riscos à ferramenta
(2.5 e 3.2)
2. "Oficializar" o Joomla no grupo de ferramentas
utilizadas no Governo
3. Integrar utilizadores da ferramenta no contexto de
governo
@berlanda | #JDBR14

36. Planejamento
● Escopo
Com base na área pública do site, fazer uma versão em Joomla
do que existia em Plone, fiel no que fosse possível, considerando
os requisitos e as características da primeira versão.
@berlanda | #JDBR14

37. Alguns requisitos
● Aplicar o layout base
● Preservar as bases do projeto (acessibilidade e
responsividade)
● Manter compatibilidade desde o IE 7 (estatísticas
de acesso ao portal Brasil indicaram essa
necessidade)
● Emular as mesmas funcionalidades das diferentes
telas-tipo da primeira versão
@berlanda | #JDBR14

38. Permitir fácil configuração de cores
e informações principais do site

39. Respeitar o conceito de editorias

40. Diferentes telas de item de
conteúdo, para mesmo tema

41. Equipe
De forma estratégica, privilegiou-se o convite aos
seguintes perfis:
○ Profissionais que trabalhassem com governo e
compartilhassem do mesmo problema
○ Profissionais com proximidade física permitindo
reuniões presenciais
○ Profissionais conhecidos da comunidade que
pudessem agregar qualidade às fases do projeto
@berlanda | #JDBR14

42. Equipe
De forma estratégica, privilegiou-se o convite aos
seguintes perfis:
○ Profissionais que trabalhassem com governo e
compartilhassem do mesmo problema
○ Profissionais com proximidade física permitindo
reuniões presenciais
○ Profissionais conhecidos da comunidade que
pudessem agregar qualidade às fases do projeto

43. Equipe
E quando os perfis esperados não se prontificaram a
ajudar:
Criar descrições de pacotes de trabalho e
distribuí-los aqueles que mostraram
interesse no projeto (feito entre outubro e
novembro, para apoio à interface)
@berlanda | #JDBR14

44. ● Interface HTML
(Não foi possível utilizar mesma interface do
Plone, baseada em Diazo)
● Versão 2.5 (muitos utilizadores importantes no
momento)
● Versão 3.2 (projetos importantes entrando no ar)
Frentes do projeto
@berlanda | #JDBR14

45. Definição da interface
● Como a interface teria que ser refeita, utilizamos
padrões de mercado compatíveis com os requisitos:
○ HTML5
■ Incluindo players de áudio e vídeo
○ Less CSS
■ arquivos comuns às diferentes cores, em formato de _includes.
less
○ Bootstrap 2.3.2
■ Grid foi customizada para se aproximar ao máximo da grid
utilizada (que não é padrão)
○ Font awesome 3.2.1
■ Versão compatível com IE7 @berlanda | #JDBR14

46. Definição da interface
● Como a interface teria que ser refeita, utilizamos
padrões de mercado compatíveis com os requisitos:
○ HTML5
■ Incluindo players de áudio e vídeo
○ Less CSS
■ arquivos comuns às diferentes cores, em formato de _includes.
less
○ Bootstrap 2.3.2
■ Grid foi customizada para se aproximar ao máximo da grid
utilizada (que não é padrão)
○ Font awesome 3.2.1
■ Versão compatível com IE7

47. Ciclo desejado para o projeto
Interface HTML
(equipe 1)
Versão 2.5
(equipe 2)
Versão 3.2
(equipe 3)
Gestão
(coordenação)
Início
Fim
Manutenção
(revezamento de
equipes)

48. Ciclo realizado
Interface HTML
(coordenação /
voluntário A)
Versão 2.5
(coordenação /
equipe 2)
Versão 3.2
(coordenação / equipe 2
/ voluntário B)
Início
Fim
Manutenção evolutiva do produto
(coordenação)

49. O case em joomla
coisas que talvez vocês achem bacanas
+ informações gerais sobre o projeto
@berlanda | #JDBR14

50. ● Phoca Gallery
Galeria de imagens
● JCE Editor
somente 3.2, é dispensável
● YouTube Gallery (componente e
módulo)
Galeria de vídeos - decisão influenciada
por pesquisa prévia de equipe do Min.
das Comunicações
Extensões instaladas / configuradas
● Blank Component
Para página inicial e páginas de editoria
● K2
Galeria de Publicações e de áudios
@berlanda | #JDBR14

51. ● Template padraogoverno01
Recebe todos os overrides de visualização das extensões
● mod_barragoverno
Opções de configuração que podem ser úteis
● mod_chamadas
Principal solução de conteúdo para montagem da página inicial e
páginas de editorias
● mod_container
Principal solução de estrutura para montagem da página inicial e
páginas de editorias
Extensões desenvolvidas

52. ● mod_htmlcustom
HTML rápido, sem editor
● mod_redes_sociais
Módulo da página inicial para configuração de twitter e facebook
Extensões desenvolvidas

53. Opções do tema

54. ?cor=azul
tema=azul

55. Posições de módulos dinâmicas
Mais informações na documentação do projeto.

56. Diferentes telas de item de conteúdo

57. Diferentes telas de item de conteúdo

58. Chapéu da notícia
(campo referência-chave)
Título da notícia
Introdução
(introtext)
Opções de
compartilhamento
(mód. HMTL custom)
Olho da matéria
(estilo citação no
editor de texto rico)
Corpo do texto
(fulltext)
Categoria(s)
(hierarquia de níveis)
Assuntos(s)
(metakeys / tags)

59. Edição do artigo
@berlanda | #JDBR14

60. Chapéu da notícia
(campo referência-chave)
Título da notícia
Introdução
(introtext)
Opções de
compartilhamento
(mód. HMTL custom)
Imagem com lightbox
(imagem do artigo)
Créditos da imagem
(Legenda imagem)
Corpo do texto
(fulltext)
Legenda da foto
(Texto alternativo)

61. Edição do artigo

62. mod_chamadas
1
2 3 4
5 6
7

63. mod_chamadas
8

64. mod_chamadas
Configuração da
fonte de dados
Configuração de parâmetros e
sobreposições de dados
Configuração do formato
de saída
K2 Phoca Gallery
Item de conteúdo
Galeria de fotos
Destaque principal
Chamadas de texto
@berlanda | #JDBR14

65. mod_chamadas
Configuração da
fonte de dados
Configuração de parâmetros e
sobreposições de dados
Configuração do formato
de saída
1. article_content
2. manual
3. manual
4. manual
5. article_k2
6. article_content
7. listagem-box01-galeria
8. article_content
1. manchete-texto-lateral
2. chamada-secundaria
3. chamada-secundaria
4. chamada-secundaria
5. listagem-audio
6. listagem-box01
7. phoca_gallery
8. chamada-secundaria
1. qtd-itens = 1 | titulo = custom
2. variação de cor 1
3. variação de cor 2
4. variação de cor 3
5. IDs categorias 1 e 2
6. qtd-itens = 8
7. sfx classe = module-box-01
8. Título alternativo = Programas

66. mod_chamadas
(outros exemplos de aplicação)

67. ● Objetivo: permitir completa modularização, vertical e horizontal
mod_container
Modularização vertical:
posição nativa
Modularização horizontal:
posição configurada no mod_container
Flexibilidade:
1 a 3 colunas configuradas automaticamente
Benefício:
Template único e mais simples permitem
layouts mais complexos

68. mod_container
Mais informações na
documentação do projeto

69. ● Quando a interface ficou pronta ainda não havia
manuais que regulassem a utilização de
determinadas cores ou ícones
● As cores utilizadas na versão 1 do tema vieram
de prints obtidos de apresentações em ppt
(com exceção do tema verde)
● Havia opções mais fáceis a mão e pouco tempo
para implementar outras soluções
Por que ícones, cores exatas e
outros detalhes estavam diferentes
dos manuais e da versão em Plone?

70. ● Pouca experiência prática no git
● Muitas extensões utilizadas
● Pouco tempo para focar na criação de um pacote
de instalação
● Simplificar instalação local: baixar pacote,
executar banco de dados, mudar configuration.
php e usar.
Por que o Joomla todo está
versionado no github?
@berlanda | #JDBR14

71. ● Mais um item para se preocupar
(na verdade dois: um para cada versão)
● O foco não era simplificar para os recém-chegados
(que merecem todo o respeito, mas não era o foco)
Se é para simplificar, por que não
usar um pacote instalável do
Akeeba?
@berlanda | #JDBR14

72. Resultados do projeto
Suporte aos utilizadores de Joomla no governo federal já
existentes. "Não foi o portal padrão sonhado, mas foi o
portal possível, sendo um ótimo quick start".
"Oficializar" a ferramenta no grupo de ferramentas
utilizadas no Governo. (github do projeto foi mencionado
no portal da SECOM-PR)
Integrar utilizadores da ferramenta no contexto de governo
(há muito ainda por fazer)
@berlanda | #JDBR14

73. Lições aprendidas
● Quanto ao desenvolvimento do produto, foi
alcançado sucesso (produto)
● Não foi alcançado sucesso quanto ao
gerenciamento do projeto (método)
○ O acúmulo de funções comprometeu a gestão do
projeto e do ciclo de vida
○ A oportunidade para deixar um legado de integração
está passando @berlanda | #JDBR14

74. Lições aprendidas
● Projetos de desenvolvimento da
comunidade reproduzem os mesmos
problemas de comportamento da
comunidade:
○ poucos trabalham e muitos se beneficiam
○ muitos prometem se envolver, mas ações de fato
são feitas por poucos
○ projetos da comunidade são vistos como hobbies
@berlanda | #JDBR14

75. Lições aprendidas
● Profissionalização dos projetos de
comunidade será necessária para
avançar
○ Criação de associações e outras instituições que possam
remunerar projetos como esses
○ Permitirá contratação de profissionais até então
indisponíveis
○ Permitirá maior nível de cobrança sob os envolvidos
@berlanda | #JDBR14

76. Desafios futuros do portal padrão
● Landing page
● Agenda de dirigentes
● Vocabulário controlado do governo eletrônico
● Aumentar o nível de documentação
● Realizar novas avaliações de segurança
● Criação de máquinas virtuais (Vagrant)
● Portal do software público
● Manter uma padronização (desafio de todos)

77. Desafios futuros da comunidade
Joomla na área de governo
● Manter diálogo com Comitê Gestor do Portal
Padrão
● Retornar a interação entre desenvolvedores e
utilizadores de Joomla (DF e Brasil)
● Manter diálogo com outros comunidades de
CMS's
@berlanda | #JDBR14

78. AVISOS IMPORTANTES
ESTE PROJETO É RECOMENDADO PARA
PROFISSIONAIS COM EXPERIÊNCIA NA UTILIZAÇÃO
DO CMS JOOMLA.
Os voluntários deste grupo não se responsabilizam pela incorreta utilização deste pacote, bem
como pela incorreta configuração do servidor de produção, no que se refere aos quesitos
segurança e performance. Recomenda-se a utilização de ambiente LAMP (Linux, Apache, MySQL,
PHP), configurado para ambientes de produção de governo, o que implica configurações severas
de permissões de pasta, restrições de acesso ao diretório /administrator, realização de BACKUPS,
dentre outras boas práticas.
@berlanda | #JDBR14

79. AVISOS IMPORTANTES
ESTÁ CHEGANDO O PERÍODO ELEITORAL
(5 de julho a 5 de outubro [...])
Instale a nova barra do governo para não ter que se
preocupar em retirá-la depois
○ https://github.com/joomlagovbr/barra-do-governo
○ http://epwg.governoeletronico.gov.br/barra/
● Se você usa o portal padrão, desabilite a logo "BRASIL" do rodapé do
seu site durante o período eleitoral, indo em Gerenciador de Temas >
Portal Padrão > Avançado > Exibir logo "Brasil" = Não.

80. Agradecimentos
● Joomla Calango (sobretudo Ivanio Luiz e Paulo Ries)
● Organização #JDBR14
● Equipe da Secretaria de Comunicação Social da Presidência
● ACS e DTI do MEC
● Equipes do Min. da Defesa e Min. das Comunicações
● Roberson Pinheiro
● Antônio Morais
● Tiago Garcia
● Lucas Cosso
● Bruno Batista
● Érico Andrei (comunidade Plone) @berlanda | #JDBR14

81. Rafael de Souza Berlanda
@berlanda
rafaelberlanda@gmail.com
Utilize / teste / participe!
github.com/joomlagovbr
http://portalpadrao.joomlacalango.org
joomlagovbr@joomlacalango.org
joomla-e-gov-br@googlegroups.com
joomlacalango@googlegroups.com
http://goo.gl/4K2b7R