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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Projetos governamentais: ajustes no seu template Joomla!

3,015
views

Published on

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,015
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
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!