projetos governamentais: ajustes no seu template joomla!

Paulo Ries - @pauloriesDesigner de Interfaces

Gerente da Equipe de Design do FNDE

Projetos governamentais:adequações no seu template Joomla!

www.joomlacalango.org

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

20

12


Gerenciador de conteúdo

Programação: PHPServidor Web: Apache ou IISBanco de dados: MySQLLicença GPL

Última versão 2.5.6J! 3.0 Alpha 2 - 16/8/12

O Joomla ajuda a um website

repleto de recursos e conteúdo, por várias pessoas com conhecimento técnico.

manter

pouco ou nenhum

Força da comunidade Joomla no mundoExtensões: 9929JUGs no Mundo: 151JUGs no Brasil: 4 (BA, DF, PR, RS)J!PeopleJ!UX

BannerArquivosNotíciasTraduçãoBackupImagensUsuários

FormuláriosSEOTagsComentáriosCalendárioBlogetc...

( )e-GOV e as adequações no seu template Joomla!

A evolução do governo



e-serviços



FNDE 2012

?Joomla! 2.5

?Navegação intuitiva?Alternativas de fluxo?Perfis de usuário?Sub-páginas?Integração com e-serviços?Acesso à informação?Pontuação dos conteúdos

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.

http://joomlagov.info/3161 sites .gov cadastrados

Brasil ~ 57

Ranking

765 Itália211 Espanha

162 USA135 Chile

95 Mongólia

?Kd os 200

sites do

Cesar Velame


IPEA MEC


DETRAN/PE GOVERNO DA PARAÍBA


TRF 5ª REGIÃO Univerdisade Estadual da Paraíba


SECRETARIA DEFAZENDA DO ACRE

PORTAL DASCOMUNICAÇÕES


Dificuldades no governo


Dificuldades no governo

FNDE até 2009 =

Tarefas

- impressos- portal- intranet- ppts- wallpapers- planilhas- gráficos- banners- campanhas- ......

1 FNDE até 2011 =

Tarefas

- impressos- portal (Joomla)- intranet (Joomla)- ppts- wallpapers- planilhas- gráficos- banners- campanhas- Interface para sistemas- Avaliação de protótipos UML- AI/UX- ...

3 FNDE em 2012 =

1 gerente1 + projetista de interface1 + programador de interface1 + AI/UX/webdesigner1 + gestão/documentação1 + gráfico1 estagiário :D

7

As especialidades tornam o trabalho mais agradável e conduz resultados de maior qualidade.


Desenvolver para o governodeve ir além do desejo de um bonito portifólio,é preciso compreender a responsabilidade socialenvolvida neste processo.


As regras do jogoo que seu código precisa atender


As regras do jogo

e-GOV

FOCO INICIAL: Governo Federal


As regras do jogo

Três pontos

e-MAG

e-PWG

e-PING


As regras do jogo

e-MAG

Recomendações para que o processo de acessibilidade dos sítios, portais e sistemas do governo brasileiro seja conduzido de forma padronizada e de fácil implementação.

Coerente com as necessidades brasileiras e em conformidade com os padrões internacionais

e-MAG 1: jan/2005

e-MAG 2: dez/2005

Cegos, surdos, deficientes, idosos, crianças, lesionados.

e-MAG 3: ago/2011

Modelo de Acessibilidade

Cursos EAD

Cartilha técnica

Cartilha de desenvolvimento

Checklist de usuário

Checklist de desenvolvedor

ASES

Recursos

Modelo de Acessibilidade do Governo Eletrônico


As regras do jogo

e-PWGMelhorias ao cidadão

1. Comunicação2. Fornecimento de informações e serviços

Objetivos

1. Estabelecer padrões de qualidade de uso, desenho, arquitetura de informação e navegação;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.

Define padrões para a contratação de empresas

Cartilha de Codificação

Guia de Administração

Cartilha de Usabilidade

Cartilha de Redação Web (webwriting)

Cartilha de Desenho e Arquitetura de Conteúdo – em desenvolvimento

Modelos e arquivos-base – em desenvolvimento

Cartilhas

Padrões Web do Governo Eletrônico


As regras do jogo

e-PINGPara os órgãos do governo federal – Poder Executivo brasileiro a 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).

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.

1. Interconexão;

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.

Padrões de Interoperabilidade de Governo Eletrônico

Está aberto o período para consulta pública

O que se fala por aí?

Recomendação para uso de PHP em sistemas e serviços governamentais (+ JOOMLA!)


As regras do jogoPor onde eu começo?


Usando o Joomla!

1º

Um projeto que atenda às normas deve ser pensado de iniciar o desenvolvimento.

Leia e compreenda as normas

Avalie e programe-se para começar bem

Crie fluxos de verificação

Programe-se

ANTES


Usando o Joomla!

2º

Se você não conhece seu usuário, será de projetar

Segmente o conteúdo

Facilite a navegação

Crie marcações adequadas

Preocupe-se com AI e UX

incapaz

a) facilidade de uso;b) facilidade de aprendizado;c) facilidade de memorização de tarefas;d) produtividade na execução de tarefas;e) prevenção, visando a redução de erros;f) satisfação do indivíduo.


Usando o Joomla!

3º

Verificar o contraste

Simular baixa visão e daltonismo

Layout deve ser acessível tbm


Usando o Joomla!

Maior variação: verde e vermelho (e seus derivados)


Usando o Joomla!


Usando o Joomla!

4º

A maioria dos órgãos já consegue identificar o corpo moledas empresas e funcionários.

Fazer do zero = código mais limpo e compreensível para manutenção

*avaliar os requisitos!

Abandone os

templates prontos!

sua


Usando o Joomla!

4º

Código sujo, debaixo do tapete!

Abandone os templates prontos!


Usando o Joomla!

5º

Seu código deve ser

Aproveite o máximo o que o Joomla! lhe oferece

a) Códigos htmlb) Multi templatesc) Override

Não use código semanticamente ultrapassado!

Use webstandards

limpo


Usando o Joomla!

5º

Código sujo, debaixo do tapete!

Use webstandards

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

Usando o Joomla!

5º

Código ultrapassado <center> no Phoca GalleryCSS inline

Use webstandards


Usando o Joomla!

6º

Validar o site TODO, não apenas a Home

Algumas regras mudaram no e-MAG 3

?Não existe mais A, AA e AAA

?Observar os erros mais comuns

?Conferir manualmente

Acessibilidade do início ao fim

também


Usando o Joomla!

Principais erros:

1 - Links não apresentam descriçõesExemplo: Clique aqui

2 - Camadas lógicas desorganizadasExemplo: css inline

3 - Não existe alto contraste, ou não funciona

4 - Imagens sem texto altExemplo: <img alt= ...

5 - Títulos fora da ordemExemplo: h2, h1, h5, h3, h4

6 - Formulários não funcionamExemplo: sem tabindex, sem labels, sem comando via teclado

7 - Tabelas inacessíveisExemplo: layout em tabelas ( = morte_), dados tabulares sem relacionamento de col/row ou headres)

8. CaptchasExemplo: sem opções para alterar img ou utilizar o áudio


Usando o Joomla!

7º

O primeiro passo é validar o código pelo validator.w3.org

Valide seu código


Usando o Joomla!


Usando o Joomla!

8º

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

Use o checklist do e-MAG


Usando o Joomla!


Usando o Joomla!

9º

A versão atual ASES 2 está em beta e apresenta alguns problemas...

Valide com ASES


Análise

Mão na massaFNDE


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

Em 2012, foi avaliado de acordo com o e-MAG 3.0 (mecânico e checklists)

1. Análise de código2. Análise de desenho3. Análise de acessibilidade

e o e-MAG mudou .....


Análise de código

1.1 URL

1.2 Quadros (iframes)

1.3 Validação W3C

Urls amigáveis: retirar o index.php e substituir abreviaçõesExemplo: www.fnde.gov.br/index.php/ae-apresentacaoPara: www.fnde.gov.br/alimentacao-escolar-apresentacao

O uso de frames é ultrapassado. Substituir quando possível ou aninhar o elemento a href dentro do iframe.Em conformidade

Apresentado um erro!Obs: o erro é no código do gerador de RSS ! (Ninja RSS...)


Análise de código

1.4 Title

1.5 Declaração de idioma (pt-BR)

1.6 Charset

Algumas páginas não apresentam o título do websiteCorrigir: habilitar nos menus do Joomla!

Verifica-se a correta declaração do idioma na página e suas devidas derivações, quando necessário.Em conformidade

Utilizar o charset com opções de alteração de imagens e uso de sonsEm conformidade


Análise de código

1.7 Independência de dispositovo

1.8 Utilização de Sistema de Gestão de Conteúdo - SGC

1.9 HTML semântico

O website deve funcionar em dois ou mais navegadores, com o mínimo de variação possível entre as renderizações.Em conformidade

Seguindo o e-PWG, os SGCs (CMSs) devem ser adotados para permitir melhor gestão.Em conformidade - Usando Joomla! :P

Estar em conformidade com o W3CRecomendações: uso do abbr em alguns itens (FUNDEB, PDDE, etc)Notícias usando o título como h4 na Home.


Análise de código

1.10 Css

1.11 Camada de comportamento

1.12 Peso dos elementos e página

Usar folha de estilos externa ao código da camada de visãoRecomendações: Alguns módulos com css inline

Acesso às funções básicas não devem ser prejudicadas pelo uso de javascriptRecomendações: Módulo de banner rotativo está com problemas, ao desabilitar o javascript

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


Análise de desenho

1.1 Identidade visual

1.2 Padronização visual

1.3 Cabeçalho

Utilizar a barra do Governo Federal atualizada (Barra Brasil)Em conformidade

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 visualEm conformidade

Possuir logo e principais atalhosRecomendações: Incluir no cabeçalho os links para Fale Conosco, Mapa do Sítio e Acessibilidade


Análise de desenho

1.4 Paleta de cores

1.5 Animações e recurso multimídia

1.6 Pregnância das imagens

Verifica o contraste dos elementos e se a composição de cores mantém-seRecomendações: alterar a cor dos links Aumentar/diminuir fonte* ColorChecker !

Uso demasiado de animações e transições pode distrair o cidadão do foco principalRecomendações: Utilizar função de pausar o banner rotativo

Capacidade de um ícone transmitir uma mensagem/objetivo, ao qual foi criadoRecomendações: retirar imagens de consultas*poluição visual. O menos é mais!


Análise de desenho

1.7 Diagramação e área branca

1.8 Leiturabilidade

ALINHAR O TEXTO À ESQUERDA

Verificar a correta diagramação das páginas e o uso de áreas brancas para melhorar a harmonia e respiro do siteEm conformidade

O texto deve ser lido de forma agradável, observando alinhamento, espaçamento, largura, tamanho e tipografia.Recomendações: !


Análise de acessibilidade

1.1 Indicadores de acessibilidade

1.2 Avaliação mecânica do ASES

1.3 Navegação via teclado

Usar corretamente as marcações de acessibilidade para permitir a navegação correta dos leitores de telaEm conformidade

Verifica mecanicamente o códigos do siteRecomendações: encontrados 8 erros em todo site (rss e conteudo das internas)

O website deve ser navegável utilizando apenas o teladoEm conformidade

*observar a ordem do html para a correta navagação.



1.4 Descrição das imagens

1.5 Quebras de navegação

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

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 notificadoRecomendações: incluir aviso nos links dos sistemas do FNDE



1.6 Página de descrição de recursos de acessibilidade

1.7 Barra 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 pertinentesRecomendação: criar a página

Criar opções de aumentar/normal/diminuir a fonte e alto contraste, atalhos para acesso rápido, seguindo a normatização do e-MAG 3Recomendações: alterar os links dos atalhos, de acordo com a nova padronizaçãoExemplo: Conteudo [C] para Conteudo [1]



1.8 Apresentação do Mapa do sitio

1.9 Apresentação de formulários

1.10 Apresentação de documentos

Disponibilizar, em forma de lista, a organização hierárquica do conteudo.Em conformidade

utilizar adequadamente labels vinculados ao inputs, checkboxes, radio buttons, etc)Em conformidade* busca é form. Foi (e ainda é) preciso incluir um label na busca!

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 PDFRecomendações: Disponibilizar HTMLs e/ou ODF


JOOMLA! no Governo

J!-govIniciativa 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


www.joomlacalango.org

Obrigado!@paulories

[email protected]


projetos governamentais: ajustes no seu template joomla!

Technology

anlise de acessibilidade1

anlise de cdigo1

anlise de desenho1

seu template joomla

cartilha de desenho

de acordo

em conformidade

em conformidade1