Local e data: Brasília/DF, de de Assinatura do Consultor:

Transcrição

1 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/ 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 Assinatura e Carimbo:

2 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 Língua do documento Documentação de referência Unidade responsável Criador Taxonomias Documento com as propostas de wireframes, telas e userstories para o tema padrão do portal contendo definições, orientações e códigos. Português - Brasil Português (English, Español) Secretaria Geral da Presidência da República (SG/PR) Fabiano Rangel Cidade - fabiano.rangel@gmail.com Ícones e Design Data de aprovação Dezembro de 2013 Público Aplicabilidade Faz parte do Em conformidade com a SG/PR, Parceiros e Sociedade Civil Aplicação para todas as atividades de desenvolvimento do projeto. 1º produto de Design - BRA12018 Secretaria Geral da Presidência da República Revisado em 29 de novembro de 2013

3 Índice 1. Introdução sobre o Projeto Ícones de Participação Social Organização de Pasta de Ícones e código CSS tema participar Paleta de cores de Temas Telas de Lançamento do Projeto Participa.br Fotos de Oficinas de apresentação do projeto Conclusão Referências

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 /2003 e pelo Decreto no /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 4

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 32x32 pixels 5

6 16x16 pixels Outras 6

7 7

8 8

9 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,.icon-suggest { background-image: url(participabr/outras/16x16/actions/filenew.png) 10

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*/ /*.icon-menu-album { background-image: url(album-hc.gif) UNUSED*/ 11

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/preferencesdesktop.png).icon-menu-admin { background-image: url(participabr/outras/16x16/categories/preferencessystem.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/ .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-officepresentation.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-mimeapplication-x-gzip.png).icon-application-postscript { background-image: url(participabr/outras/16x16/mimetypes/gnome-mimeapplication-postscript.png).icon-application-pdf { background-image: url(participabr/outras/16x16/mimetypes/gnome-mimeapplication-pdf.png).icon-application-ogg { background-image: url(participabr/outras/16x16/mimetypes/gnome-mimeapplication-ogg.png).icon-video,.icon-video-mpeg { background-image: url(participabr/outras/16x16/mimetypes/video-xgeneric.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-applicationvnd.oasis.opendocument.spreadsheet.png) 12

13 .icon-application-vnd-oasis-opendocument-presentation { background-image: url(participabr/outras/16x16/mimetypes/gnome-mime-applicationvnd.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-xgeneric.png) 13

14 Paleta de cores de Temas RGB 14

15 4. Telas de Lançamento do Projeto Participa.br 15

16 16

17 17

18 18

19 19

20 20

21 21

22 22

23 5. Fotos de Oficina de apresentação do projeto Foram realizada diversas Oficinas de apresentação do projeto Participa.br. 23

24 24

25 6. Conclusão Os resultados esperando das oficinas entre a Secretaria Geral de Presidência da República e Governo é de apresentar a plataforma Noosfero ao público e realizar cadastrados de usuários e comunidades de teste. A plataforma encontra-se em desenvolvimento e com estas oficinas pode-se avaliar a usabilidades e detectar erros de funcionamento do sistema. A principal ideia destas oficinas é motivar e identificar possíveis novas comunidades para o lançamento do projeto. 7. Referências Participa.br Site