Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Identidade Digital de Governo usando o CMS Plone - FISL 2013

793 views

Published on

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).

Published in: Technology
  • Be the first to comment

Identidade Digital de Governo usando o CMS Plone - FISL 2013

  1. 1. Identidade Digital de Governo
  2. 2.  Tânia Andrea ● Cientista da Computação ● Pós 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] ● Mãe de um casal lindo :) Sobre mim
  3. 3. Introdução ● Planejamento de comunicação digital com o Sicom – diagnóstico com 18 órgãos ● Projeto Tangram desenvolvido pela Ditec ● Cartilha do modelo de acessibilidade de governo eletrônico (e- MAG) ● Avaliação de acessibilidade do portal da Secretaria de Direitos Humanos ● Solução portal padrão desenvolvida pelo Serpro
  4. 4. Introdução Por que padronizar? A escolha dos menus é feita com base nos principais temas ou assuntos do ministério ou secretaria. Aliado a uma linguagem multimídia de fácil atendimento, o portal torna-se acessível a todos os brasileiros.
  5. 5. Introdução Por que padronizar? A padronização de elementos como cabeçalho, campo de busca, menu principal e demais atributos ajudam a identificar o portal como propriedade digital do governo federal gerando credibilidade.
  6. 6. Introdução Por que padronizar? É dever do ministério ou secretaria cumprir o Decreto de Lei no 5.296, de 2004, que torna obrigatória a implementação dos critérios de acessibilidade em portais para atender as pessoas com deficiência através das normas do Modelo de Acessibilidade de Governo Eletrônico (e-MAG).
  7. 7. Introdução Por que padronizar? A infraestrutura criada para o portal de um ministério pode ser replicada em outros órgãos, reduzindo custos e otimizando evoluções de TI.
  8. 8. Novo Padrão
  9. 9. Portal Composição da estrutura padrão 2
  10. 10. Barra de Governo
  11. 11. Barra de governo Estrutura padrão (nova barra)
  12. 12. Cabeçalho
  13. 13. Cabeçalho Estrutura padrão • Identificação do órgão: é 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 conteúdos publicados naquele portal. Redes sociais: área para incluir todos os ícones de redes sociais que o órgão possui. Barra de serviços: contato do órgão, sistemas, área de imprensa e outros. 2 51
  14. 14. Área de destaques
  15. 15. Área de destaques Barra de destaque • A barra de destaque abriga links para assuntos importantes do órgão, geralmente campanhas ou grandes eventos. Deve ser aplicada nas especificações sugeridas para não ser confundido com um menu.
  16. 16. Área de destaques Banner de destaque • O banner de destaque é um elemento que pode ser incluído de acordo com a necessidade de exposição de uma campanha.
  17. 17. Coluna de menus
  18. 18. Coluna de menus Estrutura padrão
  19. 19. Rodapé
  20. 20. Rodapé Estrutura padrão • O rodapé deve ser composto pelo primeiro nível do menu principal, barra de serviços, redes sociais, idiomas e mapa do site para atender aos critérios de acessibilidade. Adicionalmente, devem constar no rodapé a marca do Governo Federal e do Acesso à Informação.
  21. 21. Miolo
  22. 22. Exemplos de miolos: ● Portal Brasil ● Portal SECOM ● página interna
  23. 23. Landing pages Área para apresentação de temas específicos do órgão (campanhas, planos e programas vigentes). A landing page permite maior liberdade de inserção de conteúdo pois elimina a coluna de menus à esquerda.
  24. 24. Sites temáticos Sites temáticos permitem trabalhar navegações e layouts diferenciados. Geralmente são grandes planos ou programas interministeriais que fogem da alçada de um único órgão.
  25. 25. Identidade Visual
  26. 26. Grid • É a estrutura por trás dos layouts formada por colunas que, quando agrupadas, imprimem forma ao esquema modular proposto para o conteúdo. Além disso, estabelece o espaçamento entre elementos, fundamental para guiar a leitura do visitante entre os conteúdos. • A base do grid é um esquema de 24 colunas. As 4 colunas da direita formam o espaço ocupado pelos menus de navegação. A partir da sexta coluna há a variação modular dos formatos do miolo.
  27. 27. Tipografia Estrutura padrão Open Sans: http://www.google.com/webfonts/specimen/Open+Sans • Open Sans é a fonte principal do projeto gráfico. Ela é usada nas seguintes ocasiões: – Nome do portal (órgão, programa, ministério, etc) – Informações do cabeçalho – Menus e itens de menus – Títulos de módulos – Textos de apoio à navegação
  28. 28. Tipografia Estrutura padrão • Arial é a fonte de apoio. Ela é usada nas seguintes ocasiões: – Chamadas de notícias ou conteúdos institucionais – Textos corridos, sejam conteúdos noticiosos ou institucionais. Arial é disponibilizada por todos os sistemas operacionais existentes no mercado.
  29. 29. Cores Referências Bandeiras dos Estados Brasileiros Escudos e Brasões Nacionais
  30. 30. Cores Estrutura padrão – Paleta Estendida
  31. 31. Elementos visuais Estrutura padrão Os elementos visuais desenvolvidos dão suporte ao conteúdo e são parte importante da identidade dos sites. Foram criadas caixas com cantos arredondados, linhas divisórias para blocos de notícias, assuntos e menus, assim como ícones de apoio à navegação e identificação de tipos de conteúdo.
  32. 32. Identidade Digital de Governo
  33. 33.  Tânia 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

×