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/4K2b7RLink apresentação:

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

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

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

O que será abordado

1. Razões da padronização2. Características gerais3. Histórico4. O projeto em Joomla5. O case em Joomla6. Novos desafios / avisos importantes

@berlanda | #JDBR14

Razões para a padronização(pilares da comunicação)

@berlanda | #JDBR14

1. Foco no públicoOs 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

2. Experiência digital comumA 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)

3. Acessibilidade e responsividadeSegundo 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

4. EconomicidadeO 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

Características gerais

Estrutura em Cpadronizada

fonte: secom.gov.br

Cabeçalho

fonte: secom.gov.br

Cabeçalho

fonte: secom.gov.br

local padronizado paraperguntas frequentes e contato

Coluna

fonte: secom.gov.br

1

2

1

2

3

4

Coluna lateral

fonte: secom.gov.br

3 4

1

2

3

4

Rodapé

fonte: secom.gov.br

Cores

fonte: secom.gov.br

1 2 3 4

HistóricoDe crise a oportunidade

@berlanda | #JDBR14

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

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

"Entãotá beleza"

"Entãotá beleza"

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

Tem que dar tempo...

Projeto

@berlanda | #JDBR14

Identificação de partes interessadas

● Quem comunicar (e como)● Com quem contar● Com quem se preocupar

Permite saber:

Objetivos do projeto1. 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

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

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

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

Respeitar o conceito de editorias

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

EquipeDe 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

EquipeDe 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

EquipeE 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

● 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

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

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

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ícioFim

Manutenção(revezamento de equipes)

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

FimManutenção evolutiva do produto(coordenação)

O case em joomlacoisas que talvez vocês achem bacanas+ informações gerais sobre o projeto

@berlanda | #JDBR14

● Phoca GalleryGaleria de imagens

● JCE Editorsomente 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 ComponentPara página inicial e páginas de editoria

● K2Galeria de Publicações e de áudios

@berlanda | #JDBR14

● Template padraogoverno01Recebe todos os overrides de visualização das extensões

● mod_barragovernoOpções de configuração que podem ser úteis

● mod_chamadasPrincipal solução de conteúdo para montagem da página inicial e páginas de editorias

● mod_containerPrincipal solução de estrutura para montagem da página inicial e páginas de editorias

Extensões desenvolvidas

● mod_htmlcustomHTML rápido, sem editor

● mod_redes_sociaisMódulo da página inicial para configuração de twitter e facebook

Extensões desenvolvidas

Opções do tema

?cor=azultema=azul

Posições de módulos dinâmicas

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

Diferentes telas de item de conteúdo

Diferentes telas de item de conteúdo

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)

Edição do artigo

@berlanda | #JDBR14

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)

Edição do artigo

mod_chamadas1

2 3 4

5 6

7

mod_chamadas8

mod_chamadas

Configuração da fonte de dados

Configuração de parâmetros e sobreposições de dados

Configuração do formatode saída

K2 Phoca Gallery

Item de conteúdo

Galeria de fotos

Destaque principal

Chamadas de texto

@berlanda | #JDBR14

mod_chamadasConfiguração da fonte de dados

Configuração de parâmetros e sobreposições de dados

Configuração do formatode 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

mod_chamadas(outros exemplos de aplicação)

● 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

mod_container

Mais informações nadocumentação do projeto

● 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?

● 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

● 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

Resultados do projetoSuporte 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

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

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

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

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)

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

AVISOS IMPORTANTESESTE 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

AVISOS IMPORTANTESESTÁ 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.

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

Rafael de Souza Berlanda@berlandarafaelberlanda@gmail.com

Utilize / teste / participe!github.com/joomlagovbr

http://portalpadrao.joomlacalango.orgjoomlagovbr@joomlacalango.org

joomla-e-gov-br@googlegroups.comjoomlacalango@googlegroups.com

http://goo.gl/4K2b7R