identidade digital de governo usando o cms plone - fisl 2013

Download Identidade Digital de Governo usando o CMS Plone - FISL 2013

Post on 18-Dec-2014

353 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

O projeto da Identidade Digital Padrão de Governo tem como foco o desenvolvimento de Conteúdo, Arquitetura da Informação e Identidade Visual e foi desenvolvido em Plone. Se propõe a oferecer uma experiência única de navegação para os cidadãos e segue os critérios de acessibilidade através das normas do Modelo de Acessibilidade de Governo Eletrônico (e-MAG).

TRANSCRIPT

  • 1. Identidade Digital de Governo
  • 2. Tnia Andrea Cientista da Computao Ps em Software Livre e Ger. de Projetos Coordenadora de projetos no Grupo TV1 Secom/PR Consultora externa Diretora na APyB Big Kahuna 2013 PloneConf/PythonBrasil[9] Me de um casal lindo :) Sobre mim
  • 3. Introduo Planejamento de comunicao digital com o Sicom diagnstico com 18 rgos Projeto Tangram desenvolvido pela Ditec Cartilha do modelo de acessibilidade de governo eletrnico (e- MAG) Avaliao de acessibilidade do portal da Secretaria de Direitos Humanos Soluo portal padro desenvolvida pelo Serpro
  • 4. Introduo Por que padronizar? A escolha dos menus feita com base nos principais temas ou assuntos do ministrio ou secretaria. Aliado a uma linguagem multimdia de fcil atendimento, o portal torna-se acessvel a todos os brasileiros.
  • 5. Introduo Por que padronizar? A padronizao de elementos como cabealho, campo de busca, menu principal e demais atributos ajudam a identificar o portal como propriedade digital do governo federal gerando credibilidade.
  • 6. Introduo Por que padronizar? dever do ministrio ou secretaria cumprir o Decreto de Lei no 5.296, de 2004, que torna obrigatria a implementao dos critrios de acessibilidade em portais para atender as pessoas com deficincia atravs das normas do Modelo de Acessibilidade de Governo Eletrnico (e-MAG).
  • 7. Introduo Por que padronizar? A infraestrutura criada para o portal de um ministrio pode ser replicada em outros rgos, reduzindo custos e otimizando evolues de TI.
  • 8. Novo Padro
  • 9. Portal Composio da estrutura padro 2
  • 10. Barra de Governo
  • 11. Barra de governo Estrutura padro (nova barra)
  • 12. Cabealho
  • 13. Cabealho Estrutura padro Identificao do rgo: o nome escrito por extenso e nunca haver um logo. Menu de atalhos de teclado: devem constar os atalhos indicados pelo e-MAG. Menu de acessibilidade e menu de idiomas: idiomas (se tiver), mapa do site e outros. Busca: ser o buscador de contedos publicados naquele portal. Redes sociais: rea para incluir todos os cones de redes sociais que o rgo possui. Barra de servios: contato do rgo, sistemas, rea de imprensa e outros. 2 51
  • 14. rea de destaques
  • 15. rea de destaques Barra de destaque A barra de destaque abriga links para assuntos importantes do rgo, geralmente campanhas ou grandes eventos. Deve ser aplicada nas especificaes sugeridas para no ser confundido com um menu.
  • 16. rea de destaques Banner de destaque O banner de destaque um elemento que pode ser includo de acordo com a necessidade de exposio de uma campanha.
  • 17. Coluna de menus
  • 18. Coluna de menus Estrutura padro
  • 19. Rodap
  • 20. Rodap Estrutura padro O rodap deve ser composto pelo primeiro nvel do menu principal, barra de servios, redes sociais, idiomas e mapa do site para atender aos critrios de acessibilidade. Adicionalmente, devem constar no rodap a marca do Governo Federal e do Acesso Informao.
  • 21. Miolo
  • 22. Exemplos de miolos: Portal Brasil Portal SECOM pgina interna
  • 23. Landing pages rea para apresentao de temas especficos do rgo (campanhas, planos e programas vigentes). A landing page permite maior liberdade de insero de contedo pois elimina a coluna de menus esquerda.
  • 24. Sites temticos Sites temticos permitem trabalhar navegaes e layouts diferenciados. Geralmente so grandes planos ou programas interministeriais que fogem da alada de um nico rgo.
  • 25. Identidade Visual
  • 26. Grid a estrutura por trs dos layouts formada por colunas que, quando agrupadas, imprimem forma ao esquema modular proposto para o contedo. Alm disso, estabelece o espaamento entre elementos, fundamental para guiar a leitura do visitante entre os contedos. A base do grid um esquema de 24 colunas. As 4 colunas da direita formam o espao ocupado pelos menus de navegao. A partir da sexta coluna h a variao modular dos formatos do miolo.
  • 27. Tipografia Estrutura padro Open Sans: http://www.google.com/webfonts/specimen/Open+Sans Open Sans a fonte principal do projeto grfico. Ela usada nas seguintes ocasies: Nome do portal (rgo, programa, ministrio, etc) Informaes do cabealho Menus e itens de menus Ttulos de mdulos Textos de apoio navegao
  • 28. Tipografia Estrutura padro Arial a fonte de apoio. Ela usada nas seguintes ocasies: Chamadas de notcias ou contedos institucionais Textos corridos, sejam contedos noticiosos ou institucionais. Arial disponibilizada por todos os sistemas operacionais existentes no mercado.
  • 29. Cores Referncias Bandeiras dos Estados Brasileiros Escudos e Brases Nacionais
  • 30. Cores Estrutura padro Paleta Estendida
  • 31. Elementos visuais Estrutura padro Os elementos visuais desenvolvidos do suporte ao contedo e so parte importante da identidade dos sites. Foram criadas caixas com cantos arredondados, linhas divisrias para blocos de notcias, assuntos e menus, assim como cones de apoio navegao e identificao de tipos de contedo.
  • 32. Identidade Digital de Governo
  • 33. Tnia Andrea www.taniaandrea.com taniaa.moreira@gmail.com tania@ploneconf.org @taniaandrea_com PloneGov-BR www.softwarelivre.gov.br/plone https://github.com/plonegovbr/ Contatos