O documento discute o uso do CMS Joomla! nos sites governamentais brasileiros (e-GOV). Apresenta as vantagens do Joomla! para desenvolvimento de sites governamentais, como a facilidade de uso e manutenção. Também discute os desafios e adequações necessárias no template Joomla! utilizado pelo FNDE para melhor atender as necessidades dos usuários e as diretrizes dos padrões e-MAG, e-PWG e e-PING para acessibilidade e usabilidade nos sites governamentais.

1. Projetos governamentais:
adequações no seu template Joomla!
Paulo Ries - @paulories
Designer de Interfaces
Gerente da Equipe de Design do FNDE
www.joomlacalango.org

2. e-GOV e as adequações no seu template Joomla!

3. 2012
e-GOV e as adequações no seu template Joomla!

4. e-GOV e as adequações no seu template Joomla!

5. e-GOV e as adequações no seu template Joomla!

6. e-GOV e as adequações no seu template Joomla!

7. e-GOV e as adequações no seu template Joomla!

8. ( Gerenciador de conteúdo
Programação: PHP
Servidor Web: Apache ou IIS
Banco de dados: MySQL
Licença GPL
Última versão 2.5.6
J! 3.0 Alpha 2 - 16/8/12
O Joomla ajuda a manter um website
repleto de recursos e conteúdo, por
várias pessoas com pouco ou nenhum
conhecimento técnico.
e-GOV e as adequações no seu template Joomla!
Extensões: 9929
JUGs no Mundo: 151
Arquivos
Notícias
Tradução
Backup
Imagens
Usuários
SEO
Tags
Comentários
Calendário
Blog
etc...
)
Força da comunidade Joomla no mundo
JUGs no Brasil: 4 (BA, DF, PR, RS)
J!People
J!UX
Banner Formulários

9. A evolução do governo
e-GOV e as adequações no seu template Joomla!

10. A evolução do governo
e-GOV e as adequações no seu template Joomla!

11. A evolução do governo
e-serviços
e-GOV e as adequações no seu template Joomla!

12. A evolução do governo
e-GOV e as adequações no seu template Joomla!

13. A evolução do governo
e-GOV e as adequações no seu template Joomla!

14. A evolução do governo
FNDE 2012
Joomla! 2.5
?
? intuitiva
Navegação
Alternativas de fluxo
?
? usuário
Perfis de
Sub-páginas
?
? com e-serviços
Integração
?informação
Acesso à
? dos conteúdos
Pontuação
A diferença maior está na
UX/AI para proporcionar
ao usuário uma navegação
mais simples, com
informações agrupadas
por tipo e perfil.

15. A evolução do governo
e-GOV e as adequações no seu template Joomla!

16. http://joomlagov.info/
3161 sites .gov cadastrados
Brasil ~ 57
?
Ranking
765 Itália Kd os 200
211 Espanha sites do
e
162 USA Cesar Velam
135 Chile
95 Mongólia
e-GOV e as adequações no seu template Joomla!

17. IPEA MEC
e-GOV e as adequações no seu template Joomla!

18. DETRAN/PE GOVERNO DA PARAÍBA
e-GOV e as adequações no seu template Joomla!

19. TRF 5ª REGIÃO Univerdisade Estadual
da Paraíba
e-GOV e as adequações no seu template Joomla!

20. SECRETARIA DE PORTAL DAS
FAZENDA DO ACRE COMUNICAÇÕES
e-GOV e as adequações no seu template Joomla!

21. Dificuldades no governo
e-GOV e as adequações no seu template Joomla!

22. Dificuldades no governo
e-GOV e as adequações no seu template Joomla!

23. Dificuldades no governo
e-GOV e as adequações no seu template Joomla!

24. Dificuldades no governo
e-GOV e as adequações no seu template Joomla!

25. Dificuldades no governo
e-GOV e as adequações no seu template Joomla!

26. Dificuldades no governo
FNDE até 2009 = 1 FNDE até 2011 = 3 FNDE em 2012 = 7
Tarefas Tarefas As especialidades
- impressos - impressos tornam o trabalho mais
- portal - portal (Joomla) agradável e conduz
- intranet - intranet (Joomla) resultados de maior
- ppts - ppts
- wallpapers - wallpapers qualidade.
- planilhas - planilhas
- gráficos - gráficos 1 gerente
- banners - banners 1 + projetista de interface
- campanhas - campanhas 1 + programador de interface
- ...... - Interface para sistemas 1 + AI/UX/webdesigner
- Avaliação de protótipos UML 1 + gestão/documentação
- AI/UX 1 + gráfico
- ... 1 estagiário :D
e-GOV e as adequações no seu template Joomla!

27. Desenvolver para o governo
deve ir além do desejo de um bonito portifólio,
é preciso compreender a responsabilidade social
envolvida neste processo.
e-GOV e as adequações no seu template Joomla!

28. As regras do jogo
o que seu código precisa atender
e-GOV e as adequações no seu template Joomla!

29. As regras do jogo
e-GOV
FOCO INICIAL: Governo Federal
e-GOV e as adequações no seu template Joomla!

30. As regras do jogo
Três pontos
e-MAG
e-PWG
e-PING
e-GOV e as adequações no seu template Joomla!

31. As regras do jogo
e-MAG Modelo de Acessibilidade do Governo Eletrônico
Recomendações para que o processo de Recursos
acessibilidade dos sítios, portais e sistemas do
governo brasileiro seja conduzido de forma Modelo de Acessibilidade
padronizada e de fácil implementação.
Cursos EAD
Coerente com as necessidades brasileiras e em
conformidade com os padrões internacionais
Cartilha técnica
e-MAG 1: jan/2005
Cartilha de desenvolvimento
e-MAG 2: dez/2005
Checklist de usuário
e-MAG 3: ago/2011 Checklist de desenvolvedor
Cegos, surdos, deficientes, ASES
idosos, crianças, lesionados.
e-GOV e as adequações no seu template Joomla!

32. As regras do jogo
e-PWG Padrões Web do Governo Eletrônico
Melhorias ao cidadão Cartilhas
1. Comunicação
Cartilha de Codificação
2. Fornecimento de informações e serviços
Guia de Administração
Objetivos
Cartilha de Usabilidade
1. Estabelecer padrões de qualidade de uso, desenho, arquitetura de
informação e navegação;
Cartilha de Redação Web (webwriting)
2. Estabelecer um fluxo de criação, desenvolvimento e manutenção
na gestão dos sítios governamentais;
3. Consolidar a acessibilidade;
4. Criar artefatos de acordo com os padrões estabelecidos pelo W3C.
Cartilha de Desenho e Arquitetura de
Conteúdo – em desenvolvimento
Define padrões para a contratação de
Modelos e arquivos-base – em
empresas desenvolvimento
e-GOV e as adequações no seu template Joomla!

33. As regras do jogo
e-PING Padrões de Interoperabilidade de Governo Eletrônico
Para os órgãos do governo federal – Poder Executivo brasileiro a Está aberto o período para
adoção dos padrões e políticas contidos na e-PING é obrigatória
(Portaria SLTI/MP nº 5, de 14 de julho de 2005). consulta pública
Conjunto mínimo de premissas, políticas e especificações técnicas
que regulamentam a utilização da Tecnologia de Informação e
Comunicação, estabelecendo as condições de interação em geral. O que se fala por aí?
Recomendação para uso de PHP
1. Interconexão; em sistemas e serviços
governamentais (+ JOOMLA!)
2. Segurança;
3. Meios de Acesso;
4. Organização e Intercâmbio de Informações;
5. Áreas de Integração para Governo Eletrônico.
e-GOV e as adequações no seu template Joomla!

34. As regras do jogo
Por onde eu começo?
e-GOV e as adequações no seu template Joomla!

35. Usando o Joomla!
1º Programe-se
Um projeto que atenda às normas deve
ser pensado ANTES de iniciar o
desenvolvimento.
Leia e compreenda as normas
Avalie e programe-se para começar bem
Crie fluxos de verificação
e-GOV e as adequações no seu template Joomla!

36. Usando o Joomla!
2º Preocupe-se com AI e UX
Se você não conhece seu usuário, será
incapaz de projetar
a) facilidade de uso;
Segmente o conteúdo b) facilidade de aprendizado;
c) facilidade de memorização de tarefas;
Facilite a navegação d) produtividade na execução de tarefas;
e) prevenção, visando a redução de erros;
Crie marcações adequadas f) satisfação do indivíduo.
e-GOV e as adequações no seu template Joomla!

37. Usando o Joomla!
3º Layout deve ser acessível tbm
Verificar o contraste
Simular baixa visão e daltonismo
e-GOV e as adequações no seu template Joomla!

38. Usando o Joomla!
Maior variação: verde e vermelho (e seus derivados)
e-GOV e as adequações no seu template Joomla!

39. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

40. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

41. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

42. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

43. Usando o Joomla!
4º Abandone os
templates prontos!
A maioria dos órgãos já consegue
identificar o corpo mole
das empresas e funcionários.
Fazer do zero = código mais limpo e
compreensível para sua manutenção
*avaliar os requisitos!
e-GOV e as adequações no seu template Joomla!

44. Usando o Joomla!
4º Abandone os templates prontos!
Código sujo, debaixo do tapete!
e-GOV e as adequações no seu template Joomla!

45. Usando o Joomla!
5º Use webstandards
Seu código deve ser limpo
Aproveite o máximo o que o Joomla! lhe oferece
a) Códigos html
b) Multi templates
c) Override
Não use código semanticamente ultrapassado!
e-GOV e as adequações no seu template Joomla!

46. Usando o Joomla!
5º Use webstandards
}
Código sujo, debaixo do tapete!
e-GOV e as adequações no seu template Joomla!

47. Usando o Joomla!
5º Use webstandards
Código ultrapassado <center> no Phoca Gallery
CSS inline
e-GOV e as adequações no seu template Joomla!

48. Usando o Joomla!
6º Acessibilidade do início ao fim
Validar o site TODO, não apenas a Home
Algumas regras mudaram no e-MAG 3
? A, AA e AAA
Não existe mais
? mais comuns
Observar os erros
?
Conferir manualmente também
e-GOV e as adequações no seu template Joomla!

49. Usando o Joomla!
Principais erros:
1 - Links não apresentam descrições 6 - Formulários não funcionam
Exemplo: Clique aqui Exemplo: sem tabindex, sem labels, sem
comando via teclado
2 - Camadas lógicas desorganizadas
Exemplo: css inline 7 - Tabelas inacessíveis
Exemplo: layout em tabelas ( = morte_),
3 - Não existe alto contraste, ou não dados tabulares sem relacionamento de
funciona col/row ou headres)
4 - Imagens sem texto alt 8. Captchas
Exemplo: <img alt= ... Exemplo: sem opções para alterar img ou
utilizar o áudio
5 - Títulos fora da ordem
Exemplo: h2, h1, h5, h3, h4
e-GOV e as adequações no seu template Joomla!

50. Usando o Joomla!
7º Valide seu código
O primeiro passo é validar o código pelo validator.w3.org
e-GOV e as adequações no seu template Joomla!

51. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

52. Usando o Joomla!
8º Use o checklist do e-MAG
Funções automáticas agilizam parte do processo,
mas não simulam todos os problemas do usuário
Instale leitores de tela (Linux + ORCA ou DOSVOX),
feche os olhos e tente navegar
e-GOV e as adequações no seu template Joomla!

53. Usando o Joomla!
e-GOV e as adequações no seu template Joomla!

54. Usando o Joomla!
9º Valide com ASES
A versão atual ASES 2 está em beta e
apresenta alguns problemas...
e-GOV e as adequações no seu template Joomla!

55. Análise
Mão na massa
FNDE
e-GOV e as adequações no seu template Joomla!

56. Análise
Desde 2009 aprovado pelo e-MAG 2.0 e validado mensalmente pelo ASES.
Realizados os ajustes nos conteúdos, de acordo com os problemas reportados
e o e-MAG mudou .....
Em 2012, foi avaliado de acordo com o e-MAG 3.0 (mecânico e checklists)
1. Análise de código
2. Análise de desenho
3. Análise de acessibilidade
e-GOV e as adequações no seu template Joomla!

57. Análise de código
1.1 URL
Urls amigáveis: retirar o index.php e substituir abreviações
Exemplo: www.fnde.gov.br/index.php/ae-apresentacao
Para: www.fnde.gov.br/alimentacao-escolar-apresentacao
1.2 Quadros (iframes)
O uso de frames é ultrapassado. Substituir quando possível ou aninhar o elemento
a href dentro do iframe.
Em conformidade
1.3 Validação W3C
Apresentado um erro!
Obs: o erro é no código do gerador de RSS ! (Ninja RSS...)
e-GOV e as adequações no seu template Joomla!

58. Análise de código
1.4 Title
Algumas páginas não apresentam o título do website
Corrigir: habilitar nos menus do Joomla!
1.5 Declaração de idioma (pt-BR)
Verifica-se a correta declaração do idioma na página e suas devidas derivações,
quando necessário.
Em conformidade
1.6 Charset
Utilizar o charset com opções de alteração de imagens e uso de sons
Em conformidade
e-GOV e as adequações no seu template Joomla!

59. Análise de código
1.7 Independência de dispositovo
O website deve funcionar em dois ou mais navegadores, com o mínimo de
variação possível entre as renderizações.
Em conformidade
1.8 Utilização de Sistema de Gestão de Conteúdo - SGC
Seguindo o e-PWG, os SGCs (CMSs) devem ser adotados para permitir melhor
gestão.
Em conformidade - Usando Joomla! :P
1.9 HTML semântico
Estar em conformidade com o W3C
Recomendações: uso do abbr em alguns itens (FUNDEB, PDDE, etc)
Notícias usando o título como h4 na Home.
e-GOV e as adequações no seu template Joomla!

60. Análise de código
1.10 Css
Usar folha de estilos externa ao código da camada de visão
Recomendações: Alguns módulos com css inline
1.11 Camada de comportamento
Acesso às funções básicas não devem ser prejudicadas pelo uso de javascript
Recomendações: Módulo de banner rotativo está com problemas, ao desabilitar o
javascript
1.12 Peso dos elementos e página
As páginas devem ter peso compatível, permitindo o rápido acesso em conexão
com 56k.
Recomendações: Verificar o carregamento de javascript e imagens da home
e-GOV e as adequações no seu template Joomla!

61. Análise de desenho
1.1 Identidade visual
Utilizar a barra do Governo Federal atualizada (Barra Brasil)
Em conformidade
1.2 Padronização visual
Segundo a cartilha de desenho e AI do e-PWG, deve-se utilizar padronização
visual nas páginas dos websites envolvendo cores, tipografia e estilo visual
Em conformidade
1.3 Cabeçalho
Possuir logo e principais atalhos
Recomendações: Incluir no cabeçalho os links para Fale Conosco, Mapa do Sítio e
Acessibilidade
e-GOV e as adequações no seu template Joomla!

62. Análise de desenho
1.4 Paleta de cores
Verifica o contraste dos elementos e se a composição de cores mantém-se
Recomendações: alterar a cor dos links Aumentar/diminuir fonte
* ColorChecker !
1.5 Animações e recurso multimídia
Uso demasiado de animações e transições pode distrair o cidadão do foco
principal
Recomendações: Utilizar função de pausar o banner rotativo
1.6 Pregnância das imagens
Capacidade de um ícone transmitir uma mensagem/objetivo, ao qual foi criado
Recomendações: retirar imagens de consultas
*poluição visual. O menos é mais!
e-GOV e as adequações no seu template Joomla!

63. Análise de desenho
1.7 Diagramação e área branca
Verificar a correta diagramação das páginas e o uso de áreas brancas para
melhorar a harmonia e respiro do site
Em conformidade
1.8 Leiturabilidade
O texto deve ser lido de forma agradável, observando alinhamento, espaçamento,
largura, tamanho e tipografia.
Recomendações: ALINHAR O TEXTO À ESQUERDA!
e-GOV e as adequações no seu template Joomla!

64. Análise de acessibilidade
1.1 Indicadores de acessibilidade
Usar corretamente as marcações de acessibilidade para permitir a navegação
correta dos leitores de tela
Em conformidade
1.2 Avaliação mecânica do ASES
Verifica mecanicamente o códigos do site
Recomendações: encontrados 8 erros em todo site (rss e conteudo das internas)
1.3 Navegação via teclado
O website deve ser navegável utilizando apenas o telado
Em conformidade
*observar a ordem do html para a correta navagação.
e-GOV e as adequações no seu template Joomla!

65. Análise de acessibilidade
1.4 Descrição das imagens
As imagens devem conter texto alternativo (alt). Este texto deve descrever a
imagem de maneira sucinta.
Em conformidade
* Na época do desenvolvimento, foi necessário override nos módulos de banner e
notícia
1.5 Quebras de navegação
Avisar ao usuário sempre que ocorrer uma mudança da navegação lógica do
website.
Exemplo: Ao acessar uma página com _blank o usuário deve ser notificado
Recomendações: incluir aviso nos links dos sistemas do FNDE
e-GOV e as adequações no seu template Joomla!

66. Análise de acessibilidade
1.6 Página de descrição de recursos de acessibilidade
Deve-se criar uma página informando os recursos disponíveis de acessibilidade,
contendo as teclas de atalho e opções de redimensionamento, entre outras
informações pertinentes
Recomendação: criar a página
1.7 Barra de acessibilidade
Criar opções de aumentar/normal/diminuir a fonte e alto contraste, atalhos para
acesso rápido, seguindo a normatização do e-MAG 3
Recomendações: alterar os links dos atalhos, de acordo com a nova padronização
Exemplo: Conteudo [C] para Conteudo [1]
e-GOV e as adequações no seu template Joomla!

67. Análise de acessibilidade
1.8 Apresentação do Mapa do sitio
Disponibilizar, em forma de lista, a organização hierárquica do conteudo.
Em conformidade
1.9 Apresentação de formulários
utilizar adequadamente labels vinculados ao inputs, checkboxes, radio buttons, etc)
Em conformidade
* busca é form. Foi (e ainda é) preciso incluir um label na busca!
1.10 Apresentação de documentos
Utilizar preferencialmente a apresentação de documentos em HTML. É permitida a
utilização de formatos livres e PDF. Informar o usuário a extensão e tamanho em KB
Utilizar alternativa HTML ou ODF para documentos em PDF
Recomendações: Disponibilizar HTMLs e/ou ODF
e-GOV e as adequações no seu template Joomla!

68. JOOMLA! no Governo
J!-gov
Iniciativa para criar uma distribuição que atenda 100% as normas do e-GOV
Reunir equipes do governo brasileiro para somar as forças
Homologação de extensões
Compartilhamento de códigos e boas práticas
e-GOV e as adequações no seu template Joomla!

69. Obrigado!
@paulories
paulories@gmail.com
www.joomlacalango.org
e-GOV e as adequações no seu template Joomla!