Projetos governamentais: ajustes no seu template Joomla!
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,115
On Slideshare
3,115
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
88
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Projetos governamentais: adequações no seu template Joomla! Paulo Ries - @paulories Designer de Interfaces Gerente da Equipe de Design do FNDEwww.joomlacalango.org
  • 2. e-GOV e as adequações no seu template Joomla!
  • 3. 2012e-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 governoe-GOV e as adequações no seu template Joomla!
  • 10. A evolução do governoe-GOV e as adequações no seu template Joomla!
  • 11. A evolução do governo e-serviçose-GOV e as adequações no seu template Joomla!
  • 12. A evolução do governoe-GOV e as adequações no seu template Joomla!
  • 13. A evolução do governoe-GOV e as adequações no seu template Joomla!
  • 14. A evolução do governoFNDE 2012Joomla! 2.5?? intuitivaNavegaçãoAlternativas de fluxo?? usuárioPerfis deSub-páginas?? com e-serviçosIntegração?informaçãoAcesso à? dos conteúdosPontuaçãoA diferença maior está naUX/AI para proporcionarao usuário uma navegaçãomais simples, cominformações agrupadaspor tipo e perfil.
  • 15. A evolução do governoe-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óliae-GOV e as adequações no seu template Joomla!
  • 17. IPEA MECe-GOV e as adequações no seu template Joomla!
  • 18. DETRAN/PE GOVERNO DA PARAÍBAe-GOV e as adequações no seu template Joomla!
  • 19. TRF 5ª REGIÃO Univerdisade Estadual da Paraíbae-GOV e as adequações no seu template Joomla!
  • 20. SECRETARIA DE PORTAL DAS FAZENDA DO ACRE COMUNICAÇÕESe-GOV e as adequações no seu template Joomla!
  • 21. Dificuldades no governoe-GOV e as adequações no seu template Joomla!
  • 22. Dificuldades no governoe-GOV e as adequações no seu template Joomla!
  • 23. Dificuldades no governoe-GOV e as adequações no seu template Joomla!
  • 24. Dificuldades no governoe-GOV e as adequações no seu template Joomla!
  • 25. Dificuldades no governoe-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 :De-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 atendere-GOV e as adequações no seu template Joomla!
  • 29. As regras do jogoe-GOV FOCO INICIAL: Governo Federale-GOV e as adequações no seu template Joomla!
  • 30. As regras do jogo Três pontos e-MAG e-PWG e-PINGe-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 desenvolvimentoe-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çãoe-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 daltonismoe-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 inlinee-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éme-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, h4e-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.orge-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 navegare-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 FNDEe-GOV e as adequações no seu template Joomla!
  • 56. AnáliseDesde 2009 aprovado pelo e-MAG 2.0 e validado mensalmente pelo ASES.Realizados os ajustes nos conteúdos, de acordo com os problemas reportadose 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ódigo2. Análise de desenho3. Análise de acessibilidadee-GOV e as adequações no seu template Joomla!
  • 57. Análise de código1.1 URLUrls amigáveis: retirar o index.php e substituir abreviaçõesExemplo: www.fnde.gov.br/index.php/ae-apresentacaoPara: www.fnde.gov.br/alimentacao-escolar-apresentacao1.2 Quadros (iframes)O uso de frames é ultrapassado. Substituir quando possível ou aninhar o elementoa href dentro do iframe.Em conformidade1.3 Validação W3CApresentado 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ódigo1.4 TitleAlgumas páginas não apresentam o título do websiteCorrigir: 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 conformidade1.6 CharsetUtilizar o charset com opções de alteração de imagens e uso de sonsEm conformidadee-GOV e as adequações no seu template Joomla!
  • 59. Análise de código1.7 Independência de dispositovoO website deve funcionar em dois ou mais navegadores, com o mínimo devariação possível entre as renderizações.Em conformidade1.8 Utilização de Sistema de Gestão de Conteúdo - SGCSeguindo o e-PWG, os SGCs (CMSs) devem ser adotados para permitir melhorgestão.Em conformidade - Usando Joomla! :P1.9 HTML semânticoEstar 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!
  • 60. Análise de código1.10 CssUsar folha de estilos externa ao código da camada de visãoRecomendações: Alguns módulos com css inline1.11 Camada de comportamentoAcesso à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 ojavascript1.12 Peso dos elementos e páginaAs páginas devem ter peso compatível, permitindo o rápido acesso em conexãocom 56k.Recomendações: Verificar o carregamento de javascript e imagens da homee-GOV e as adequações no seu template Joomla!
  • 61. Análise de desenho1.1 Identidade visualUtilizar a barra do Governo Federal atualizada (Barra Brasil)Em conformidade1.2 Padronização visualSegundo a cartilha de desenho e AI do e-PWG, deve-se utilizar padronizaçãovisual nas páginas dos websites envolvendo cores, tipografia e estilo visualEm conformidade1.3 CabeçalhoPossuir logo e principais atalhosRecomendações: Incluir no cabeçalho os links para Fale Conosco, Mapa do Sítio eAcessibilidadee-GOV e as adequações no seu template Joomla!
  • 62. Análise de desenho1.4 Paleta de coresVerifica o contraste dos elementos e se a composição de cores mantém-seRecomendações: alterar a cor dos links Aumentar/diminuir fonte* ColorChecker !1.5 Animações e recurso multimídiaUso demasiado de animações e transições pode distrair o cidadão do focoprincipalRecomendações: Utilizar função de pausar o banner rotativo1.6 Pregnância das imagensCapacidade 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!
  • 63. Análise de desenho1.7 Diagramação e área brancaVerificar a correta diagramação das páginas e o uso de áreas brancas paramelhorar a harmonia e respiro do siteEm conformidade1.8 LeiturabilidadeO 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 acessibilidade1.1 Indicadores de acessibilidadeUsar corretamente as marcações de acessibilidade para permitir a navegaçãocorreta dos leitores de telaEm conformidade1.2 Avaliação mecânica do ASESVerifica mecanicamente o códigos do siteRecomendações: encontrados 8 erros em todo site (rss e conteudo das internas)1.3 Navegação via tecladoO 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!
  • 65. Análise de acessibilidade1.4 Descrição das imagensAs imagens devem conter texto alternativo (alt). Este texto deve descrever aimagem de maneira sucinta.Em conformidade* Na época do desenvolvimento, foi necessário override nos módulos de banner enotícia1.5 Quebras de navegaçãoAvisar ao usuário sempre que ocorrer uma mudança da navegação lógica dowebsite.Exemplo: Ao acessar uma página com _blank o usuário deve ser notificadoRecomendações: incluir aviso nos links dos sistemas do FNDEe-GOV e as adequações no seu template Joomla!
  • 66. Análise de acessibilidade1.6 Página de descrição de recursos de acessibilidadeDeve-se criar uma página informando os recursos disponíveis de acessibilidade,contendo as teclas de atalho e opções de redimensionamento, entre outrasinformações pertinentesRecomendação: criar a página1.7 Barra de acessibilidadeCriar opções de aumentar/normal/diminuir a fonte e alto contraste, atalhos paraacesso 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!
  • 67. Análise de acessibilidade1.8 Apresentação do Mapa do sitioDisponibilizar, em forma de lista, a organização hierárquica do conteudo.Em conformidade1.9 Apresentação de formuláriosutilizar 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 documentosUtilizar preferencialmente a apresentação de documentos em HTML. É permitida autilização de formatos livres e PDF. Informar o usuário a extensão e tamanho em KBUtilizar alternativa HTML ou ODF para documentos em PDFRecomendações: Disponibilizar HTMLs e/ou ODFe-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áticase-GOV e as adequações no seu template Joomla!
  • 69. Obrigado! @paulories paulories@gmail.com www.joomlacalango.orge-GOV e as adequações no seu template Joomla!