Identidade Digital de Governo usando o CMS Plone - FISL 2013
-
Upload
tania-andrea-moreira -
Category
Technology
-
view
358 -
download
2
description
Transcript of Identidade Digital de Governo usando o CMS Plone - FISL 2013
![Page 1: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/1.jpg)
Identidade Digitalde Governo
![Page 2: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/2.jpg)
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
![Page 3: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/3.jpg)
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
![Page 4: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/4.jpg)
IntroduçãoPor 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.
![Page 5: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/5.jpg)
IntroduçãoPor 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.
![Page 6: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/6.jpg)
IntroduçãoPor 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).
![Page 7: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/7.jpg)
IntroduçãoPor 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.
![Page 8: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/8.jpg)
Novo Padrão
![Page 9: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/9.jpg)
![Page 10: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/10.jpg)
![Page 11: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/11.jpg)
PortalComposição da estrutura padrão
2
![Page 12: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/12.jpg)
Barra de Governo
![Page 13: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/13.jpg)
Barra de governo
Estrutura padrão (nova barra)
![Page 14: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/14.jpg)
Cabeçalho
![Page 15: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/15.jpg)
CabeçalhoEstrutura 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
![Page 16: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/16.jpg)
Área de destaques
![Page 17: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/17.jpg)
Área de destaquesBarra 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.
![Page 18: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/18.jpg)
Área de destaquesBanner de destaque
• O banner de destaque é um elemento que pode ser incluído de acordo com a necessidade de exposição de uma campanha.
![Page 19: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/19.jpg)
Coluna de menus
![Page 20: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/20.jpg)
Coluna de menusEstrutura padrão
![Page 21: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/21.jpg)
Rodapé
![Page 22: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/22.jpg)
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.
![Page 23: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/23.jpg)
Miolo
![Page 24: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/24.jpg)
Exemplos de miolos:● Portal Brasil● Portal SECOM● página interna
![Page 25: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/25.jpg)
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.
![Page 26: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/26.jpg)
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.
![Page 27: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/27.jpg)
Identidade Visual
![Page 28: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/28.jpg)
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.
![Page 29: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/29.jpg)
TipografiaEstrutura 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
![Page 30: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/30.jpg)
TipografiaEstrutura 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.
![Page 31: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/31.jpg)
CoresReferências
Bandeiras dos Estados Brasileiros
Escudos e Brasões Nacionais
![Page 32: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/32.jpg)
CoresEstrutura padrão – Paleta Estendida
![Page 33: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/33.jpg)
![Page 34: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/34.jpg)
Elementos visuaisEstrutura 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.
![Page 35: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/35.jpg)
Identidade Digitalde Governo
![Page 36: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/36.jpg)
Tânia Andrea
● www.taniaandrea.com
● @taniaandrea_com
PloneGov-BR
● www.softwarelivre.gov.br/plone
● https://github.com/plonegovbr/
Contatos
![Page 37: Identidade Digital de Governo usando o CMS Plone - FISL 2013](https://reader034.fdocumentos.tips/reader034/viewer/2022052410/549652e6b479594c4d8b4f42/html5/thumbnails/37.jpg)