Projetos governamentais: ajustes no seu template Joomla!
-
Upload
paulo-ries -
Category
Technology
-
view
3.090 -
download
8
description
Transcript of 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
e-GOV e as adequações no seu template Joomla!
e-GOV e as adequações no seu template Joomla!
e-GOV e as adequações no seu template Joomla!
e-GOV e as adequações no seu template Joomla!
e-GOV e as adequações no seu template Joomla!
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-GOV e as adequações no seu template Joomla!
A evolução do governo
e-GOV e as adequações no seu template Joomla!
A evolução do governo
e-serviços
e-GOV e as adequações no seu template Joomla!
A evolução do governo
e-GOV e as adequações no seu template Joomla!
A evolução do governo
e-GOV e as adequações no seu template Joomla!
A evolução do governo
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.
A evolução do governo
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
IPEA MEC
e-GOV e as adequações no seu template Joomla!
DETRAN/PE GOVERNO DA PARAÍBA
e-GOV e as adequações no seu template Joomla!
TRF 5ª REGIÃO Univerdisade Estadual da Paraíba
e-GOV e as adequações no seu template Joomla!
SECRETARIA DEFAZENDA DO ACRE
PORTAL DASCOMUNICAÇÕES
e-GOV e as adequações no seu template Joomla!
Dificuldades no governo
e-GOV e as adequações no seu template Joomla!
Dificuldades no governo
e-GOV e as adequações no seu template Joomla!
Dificuldades no governo
e-GOV e as adequações no seu template Joomla!
Dificuldades no governo
e-GOV e as adequações no seu template Joomla!
Dificuldades no governo
e-GOV e as adequações no seu template Joomla!
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.
e-GOV e as adequações no seu template Joomla!
Desenvolver para o governodeve ir além do desejo de um bonito portifólio,é preciso compreender a responsabilidade socialenvolvida neste processo.
e-GOV e as adequações no seu template Joomla!
As regras do jogoo que seu código precisa atender
e-GOV e as adequações no seu template Joomla!
As regras do jogo
e-GOV
FOCO INICIAL: Governo Federal
e-GOV e as adequações no seu template Joomla!
As regras do jogo
Três pontos
e-MAG
e-PWG
e-PING
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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!)
e-GOV e as adequações no seu template Joomla!
As regras do jogoPor onde eu começo?
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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.
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
3º
Verificar o contraste
Simular baixa visão e daltonismo
Layout deve ser acessível tbm
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
Maior variação: verde e vermelho (e seus derivados)
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template 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
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
4º
Código sujo, debaixo do tapete!
Abandone os templates prontos!
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
7º
O primeiro passo é validar o código pelo validator.w3.org
Valide seu código
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template 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
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
e-GOV e as adequações no seu template Joomla!
Usando o Joomla!
9º
A versão atual ASES 2 está em beta e apresenta alguns problemas...
Valide com ASES
e-GOV e as adequações no seu template Joomla!
Análise
Mão na massaFNDE
e-GOV e as adequações no seu template Joomla!
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 .....
e-GOV e as adequações no seu template Joomla!
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...)
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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.
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
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!
e-GOV e as adequações no seu template Joomla!
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: !
e-GOV e as adequações no seu template Joomla!
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.
e-GOV e as adequações no seu template Joomla!
Análise de acessibilidade
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
e-GOV e as adequações no seu template Joomla!
Análise de acessibilidade
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]
e-GOV e as adequações no seu template Joomla!
Análise de acessibilidade
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
e-GOV e as adequações no seu template Joomla!
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
e-GOV e as adequações no seu template Joomla!
www.joomlacalango.org
Obrigado!@paulories
e-GOV e as adequações no seu template Joomla!