Projeto PNUD BRA/12/018 – “Documento com as propostas de wireframes, telas e
userstories para o tema padrão do portal contendo definições, orientações e códigos.”
Consultor (a): Fabiano Rangel Cidade
Contrato no.: 2013/000200
Produto / nº : 03
Assinatura do Consultor
Local e data: Brasília/DF, --- de --- de 2013
Assinatura do Consultor: _____________________________________________
Aprovação do Supervisor
Atesto que os serviços foram prestados conforme estabelecido no Contrato de Consultoria.
Local e data: Brasília/DF, --- de --- de 2013
Documento com as propostas de wireframes, telas e userstories para o tema padrão do
portal contendo definições, orientações e códigos.
Título
Documento com as propostas de wireframes, telas e
userstories para o tema padrão do portal contendo
definições, orientações e códigos.
Língua do documento
Português - Brasil
Documentação de referência
Português (English, Español)
Unidade responsável
Secretaria Geral da Presidência da República (SG/PR)
Criador
Fabiano Rangel Cidade -
[email protected]
Taxonomias
Ícones e Design
Data de aprovação
Dezembro de 2013
Público
SG/PR, Parceiros e Sociedade Civil
Aplicabilidade
Aplicação para todas as atividades de desenvolvimento
do projeto.
Faz parte do
1º produto de Design - BRA12018
Em conformidade com a
Secretaria Geral da Presidência da República
3
Índice
1. Introdução sobre o Projeto ...4
2. Ícones de Participação Social ...5
3. Organização de Pasta de Ícones e código CSS – tema participar ...10
4. Paleta de cores de Temas ...14
5. Telas de Lançamento do Projeto Participa.br ...15
6. Fotos de Oficinas de apresentação do projeto ...23
7. Conclusão ...25
4
1. Introdução sobre o Projeto
A participação social no Brasil representa princípio jurídico-institucional presente na
Constituição Federal de 1988, que a definiu como forma de afirmação da democracia e da
consolidação da cidadania. Ao incorporar esse princípio como referência para a gestão
pública, o Governo Federal aprimora os processos de interação do Estado com a
sociedade e cria as condições institucionais para a prática da democracia participativa.
Com isso, verifica-se que, além da crescente participação social nas decisões
governamentais, as políticas públicas ganham maior legitimidade, uma vez que
expressam as atuais condições socioeconômicas e culturais da população brasileira em
suas diferentes realidades regionais.
Na estrutura administrativa do Poder Executivo Federal, cabe à Secretaria-Geral da
Presidência da República (SG/PR) a função de intermediar as relações do Governo com
as entidades da sociedade civil, conforme competências definidas pela Lei 10.683/2003 e
pelo Decreto no. 7.688/2012. Assim, a SG/PR é órgão incumbido de assessorar
diretamente a Presidenta da República e os órgãos e entidades do Governo Federal no
relacionamento e na articulação com os movimentos sociais, o que inclui a criação e a
implementação de canais que assegurem a consulta e a participação popular na discussão
e na definição da agenda prioritária do país.
O Brasil tem um rico histórico de efetivação da democracia participativa, sendo
reconhecido mundialmente. Os instrumentos institucionalizados como conselhos de
políticas públicas e conferências nacionais foram profundamente ampliados na última
década, contando com um legado volumoso de práticas e realizações. A maioria dos
programas de governo já conta com participação social prevista em, pelo menos, uma de
suas etapas. As práticas trazidas pelas novas mídias e pela cultura digital podem interagir
nesses espaços fortalecendo, ampliando e aprofundando a democracia participativa, já na
abordagem do novo século, pós redes sociais digitais.
Incentivando os atores a conectar perfis, blogs e demais instâncias de produção de
conteúdo na rede, o Portal de Participação Social poderá se estabelecer como um
repositório agregador do conhecimento sobre participação social hoje disperso na internet
e nas instâncias governamentais. A partir de uma interface clara que possibilite a
navegação pelos temas, o Portal de Participação Social pode ser um espaço onde os
diferentes agentes de governo, movimentos, organizações e cidadãos em geral
encontrarão solo fértil e facilitado para o exercício da pesquisa e do diálogo.
Tendo por base a premissa de que a incursão e abertura de canais de acesso ao poder
público na rede aumenta o conhecimento das ações do governo e diminui as barreiras
para participação de cidadãos, entidades e movimentos, esse projeto visa a construção de
um conjunto de ferramentas que poderão ser utilizadas por gestores e servidores para
5
proporcionar novas formas de participação a serem apropriadas pela cidadania. Além
disso, esse portal também buscará dar evidência às formas de participação existentes no
sentido de contextualizar, organizar e facilitar o acesso do cidadão às formas de incidir
nas diversas etapas das políticas públicas do governo brasileiro.
2. Ícones de Participação Social
Painel de Controle
96x96 pixels
48x48 pixels
6
16x16 pixels
Outras
7
8
9
10
3. Organização de Pasta de Ícones e código CSS – tema Participabr
A edição dos ícones do tema Participabr encontra-se dentro da pasta Noosfero > public >
designs > icons > participabr. Nesta pasta é possível visualizar todas as imagens de
ícones do projeto. Os ícones do tema, estão localizados dentro da pasta themes.
A pasta responsável pela apresentação dos ícones do site e imagens de painel de controle
Noosfero, se localizam na pasta icons.
Segue abaixo o exemplo de código Noosfero atual do projeto:
/**************************************************/ /******************PARTICIPA BR*******************/ /**************************************************/ /* ICONS PANEL */
.control-panel-edit-profile{ background-image: url(participabr/painel/edit-profile.png) } .control-panel-edit-location{ background-image: url(participabr/painel/set-geolocation.png) } .control-panel-todo{ background-image: url(participabr/painel/editpaste.png) }
.control-panel-blocks{ background-image: url(participabr/painel/blocks.png) }
.control-panel-design-editor{ background-image: url(participabr/painel/preferences-desktop-wallpaper.png) }
.control-panel-header-and-footer{ background-image: url(participabr/painel/header-footer.png) } .control-panel-cms{ background-image: url(participabr/painel/system-file-manager.png) } .control-panel-blog{ background-image: url(participabr/painel/edit-profile-enterprise.png) } .control-panel-change-password{ background-image: url(participabr/painel/password.png) } .control-panel-friends{ background-image: url(participabr/painel/contact.png) }
.control-panel-groups{ background-image: url(participabr/painel/system-users.png) } .control-panel-manage-spam{ background-image: url(participabr/painel/system-users.png) } .control-panel-manage-spam{ background-image: url(participabr/painel/mail-mark-junk.png) }
/******************SMALL ICONS********************/
.faltando-classe { background-image: url(participabr/outras/16x16/apps/gallery.gif) } .faltando-classe { background-image: url(participabr/outras/16x16/apps/observatory.gif) } .faltando-classe { background-image: url(participabr/outras/16x16/apps/tags.gif) }
.faltando-classe { background-image: url(participabr/outras/16x16/actions/invite-friend.gif) } .icon-edit { background-image: url(participabr/outras/16x16/apps/text-editor.png) }
.icon-home { background-image: url(participabr/outras/16x16/actions/go-home.png) } .icon-new,
11
.icon-close { background-image: url(participabr/outras/16x16/actions/gtk-cancel.png) }.icon-newfolder { background-image: url(participabr/outras/16x16/actions/folder-new.png) } .icon-folder { background-image: url(participabr/outras/16x16/places/folder.png) }
.icon-parent-folder { background-image: url(participabr/outras/16x16/places/folder_home.png) } .icon-newblog { background-image: url(participabr/outras/16x16/apps/text-editor.png) } .icon-blog { background-image: url(participabr/outras/16x16/apps/text-editor.png) } /*.icon-open { background-image: url(folder-open.gif) } UNUSED*/
/*.icon-cms { background-image: url(abiword_48.png) } UNUSED*/
.icon-save { background-image: url(participabr/outras/16x16/actions/filesave.png) }
.icon-send { background-image: url(participabr/outras/16x16/actions/stock_mail-forward.png) } .icon-cancel { background-image: url(participabr/outras/16x16/actions/gtk-cancel.png) }
.icon-person { background-image: url(participabr/outras/16x16/apps/system-config-users.png) } .icon-product { background-image: url(participabr/outras/16x16/mimetypes/package.png) } .icon-delete { background-image: url(participabr/outras/16x16/places/user-trash.png) } /*.icon-find { background-image: url(noosfero-find.png) } UNUSED*/
.icon-back { background-image: url(participabr/outras/16x16/actions/back.png) } .icon-next { background-image: url(participabr/outras/16x16/actions/go-next.png) } .icon-add { background-image: url(participabr/outras/16x16/actions/add.png) }
.icon-remove { background-image: url(participabr/outras/16x16/actions/gtk-remove.png) } .icon-more { background-image: url(participabr/outras/16x16/actions/add.png) }
.icon-up { background-image: url(participabr/outras/16x16/actions/go-up.png) } .icon-down { background-image: url(participabr/outras/16x16/actions/go-down.png) } .icon-left { background-image: url(participabr/outras/16x16/actions/go-previous.png) } .icon-right { background-image: url(participabr/outras/16x16/actions/go-next.png) }
.icon-up-disabled { background-image: url(participabr/outras/16x16/actions/go-up.png); opacity: 0.25; filter:alpha(opacity=25); }
.icon-down-disabled { background-image: url(participabr/outras/16x16/actions/go-down.png); opacity: 0.25; filter:alpha(opacity=25); }
.icon-left-disabled { background-image: url(participabr/outras/16x16/actions/go-previous.png); opacity: 0.25; filter:alpha(opacity=25); }
.icon-right-disabled { background-image: url(participabr/outras/16x16/actions/go-next.png); opacity: 0.25; filter:alpha(opacity=25); }
.icon-up-red { background-image: url(participabr/outras/16x16/actions/go-up-red.png) } .icon-forward { background-image: url(participabr/outras/16x16/actions/go-next.png) } .icon-search { background-image: url(participabr/outras/16x16/actions/search.png) }
.icon-ok { background-image: url(participabr/outras/16x16/actions/media-playback-start.png) } .icon-login { background-image: url(participabr/outras/16x16/actions/log-in.png) }
.icon-help { background-image: url(participabr/outras/16x16/apps/gnome-help.png) } .icon-firefox { background-image: url(firefox-24x24.gif) }
.icon-help32on { background-image: url(participabr/outras/32x32/apps/gnome-help.png) } .icon-help32off { background-image: url(participabr/outras/32x32/apps/gnome-help-red.png) } .icon-spread { background-image: url(participabr/outras/16x16/actions/spread.png) } .icon-todo { background-image: url(participabr/outras/16x16/actions/stock_paste.png) } .icon-eyes { background-image: url(participabr/outras/16x16/actions/find.png) } /*.icon-menu- { background-image: url(menu-without-ico-HC.gif) }*/
.icon-menu-home { background-image: url(participabr/outras/16x16/actions/go-home.png) } /*.icon-menu-blog { background-image: url(blog-HC.gif) } UNUSED*/
12
.icon-menu-product { background-image: url(participabr/outras/16x16/mimetypes/package.png) } .icon-menu-enterprise { background-image: url(participabr/outras/16x16/actions/go-home.png) }.icon-menu-community { background-image: url(participabr/outras/16x16/apps/system-config-users.png) } /*.icon-menu-edit { background-image: url(edit-HC.gif) } UNUSED */
.icon-menu-ctrl-panel { background-image: url(participabr/outras/16x16/categories/preferences-desktop.png) }
.icon-menu-admin { background-image: url(participabr/outras/16x16/categories/preferences-system.png) }
.icon-menu-my-groups { background-image: url(participabr/outras/16x16/apps/system-config-users.png) } .icon-menu-login { background-image: url(participabr/outras/16x16/actions/log-in.png) }
.icon-menu-logout { background-image: url(participabr/outras/16x16/actions/log-out.png) } .icon-menu-search { background-image: url(participabr/outras/16x16/actions/search.png) } /*.icon-menu-ed-design { background-image: url(edit-design-HC.gif) } UNUSED */
.icon-menu-events { background-image: url(participabr/outras/16x16/mimetypes/stock_calendar.png) } .icon-event { background-image: url(participabr/outras/16x16/mimetypes/stock_calendar.png) } .icon-newevent { background-image: url(participabr/outras/16x16/mimetypes/stock_calendar.png) } .icon-menu-articles { background-image: url(participabr/outras/16x16/apps/text-editor.png) }
/*.icon-menu-comments { background-image: url(blog-HC.gif) } UNUSED */
.icon-menu-people { background-image: url(participabr/outras/16x16/apps/user.png) } .icon-menu-mail { background-image: url(participabr/outras/16x16/apps/email.png) } .icon-upload-file { background-image: url(participabr/outras/16x16/actions/filesave.png) } .icon-newupload-file { background-image: url(participabr/outras/16x16/actions/filesave.png) } .icon-slideshow { background-image: url(participabr/outras/16x16/mimetypes/x-office-presentation.png) }
.icon-photos { background-image: url(participabr/outras/16x16/devices/camera-photo.png) } .icon-text-html { background-image: url(participabr/outras/16x16/mimetypes/text-html.png) } .icon-text-plain { background-image: url(participabr/outras/16x16/mimetypes/text-x-generic.png) } .icon-image-svg-xml { background-image: url(participabr/outras/16x16/mimetypes/image-x-generic.png) }
.icon-application-octet-stream { background-image: url(participabr/outras/16x16/mimetypes/binary.png) } .icon-application-x-gzip { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-x-gzip.png) }
.icon-application-postscript { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-postscript.png) }
.icon-application-pdf { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-pdf.png) }
.icon-application-ogg { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-ogg.png) }
.icon-video, .icon-video-mpeg { background-image: url(participabr/outras/16x16/mimetypes/video-x-generic.png) } .icon-application-vnd-oasis-opendocument-text { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-vnd.oasis.opendocument.text.png) } .icon-application-vnd-oasis-opendocument-spreadsheet { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-application-vnd.oasis.opendocument.spreadsheet.png) }
13
.icon-application-vnd-oasis-opendocument-presentation { background-image:url(participabr/outras/16x16/mimetypes/gnome-mime-application-vnd.oasis.opendocument.presentation.png) }
.icon-media-pause { background-image: url(participabr/outras/16x16/actions/media-playback-pause.png) } .icon-media-play { background-image: url(participabr/outras/16x16/actions/media-playback-start.png) } .icon-media-prev { background-image: url(participabr/outras/16x16/actions/media-skip-backward.png) } .icon-media-next { background-image: url(participabr/outras/16x16/actions/media-skip-forward.png) } .icon-lock { background-image: url(participabr/outras/16x16/actions/lock.png) }
.icon-chat { background-image: url(participabr/outras/16x16/apps/internet-group-chat.png); background-repeat: no-repeat }
.icon-reply { background-image: url(participabr/outras/16x16/actions/mail-reply-sender.png) } .icon-newforum { background-image: url(participabr/outras/16x16/apps/internet-group-chat.png) } .icon-forum { background-image: url(participabr/outras/16x16/apps/system-users.png) }
.icon-gallery { background-image: url(participabr/outras/16x16/mimetypes/image-x-generic.png) } .icon-newgallery { background-image: url(participabr/outras/16x16/mimetypes/image-x-generic.png) } .icon-locale { background-image: url(participabr/outras/16x16/apps/preferences-desktop-locale.png) } .icon-user-removed { background-image: url(participabr/outras/16x16/actions/gtk-cancel.png) }
.icon-user-unknown { background-image: url(participabr/outras/16x16/status/dialog-error.png) } .icon-alert { background-image: url(participabr/outras/16x16/status/dialog-warning.png) }
/******************LARGE ICONS********************/
.image-gallery-item .folder { background-image: url(participabr/outras/96x96/places/folder.png) } .image-gallery-item .gallery { background-image: url(participabr/outras/96x96/mimetypes/image-x-generic.png) }
