Inicio - SETI
- Governança-TIC
- 01. Estrutura do DTIC e Comitês
- 02. Estratégia de TIC
-
02. Plano Capacitação TIC
-
02. Plano Continuidade SE TIC
-
02. Plano Contratações TIC
- 02. Plano Diretor TIC
-
02. Plano Riscos TIC
-
02. Plano Transformação Digital
- 03. iGovTIC-JUD
- 03. Indicadores TIC
- 03. Pesquisa Satisfação TIC
-
04. Processos de TIC
- 05. Segurança de TIC
- 06. Portfólio de TIC
- Atendimento a Usuários
-
BI e Relatórios TIC
- Modelos e sobre TI
- Normativos TIC
-
Rede sem fio (Wi-Fi)
- Videoconferência
- O sistema deve ser aberto em um pop-up a partir da intranet (para tirar a barra de ferramentas);
- A barra de ferramentas não deve aparecer para ganhar mais espaço na tela;
- Todos os elementos devem caber em uma única tela, sem scroll horizontal e, na medida do possível deve-se evitar também o scroll vertical;
- Deverão ser utilizados blocos para destacar diferentes áreas da tela, com o intuito de tornar mais clara a identificação da organização dos dados pelo usuário;
- As caixas ou blocos utilizados para destacar diferentes áreas da tela devem ocupar uma coluna e ficar uma embaixo da outra; (evitar o lado a lado para blocos)
- A mudança de foco deve se dar com a tecla TAB (padrão Web); Teclas Enter e Setas não são recomendados por não serem padrão Web;
- Os itens sempre mostrados na tela são:
- Cabeçalho
- Menu da Aplicação
- Usuário + Informações complementares + Links rápidos
- Área útil variável em cada tela da aplicação
Cabeçalho
Visível de todas as opções/telas do sistema;- Alinhado a esquerda: Texto com o nome sucinto do Sistema em fundo escuro (tom mais escuro da palheta de cores);
- Alinhado a direita: imagem em degradê de cinza, transparente (para deixar transparecer a cor mais escura da palheta) com o Texto: “Tribunal de Justiça do Paraná” em destaque e “Dpto de Informática – Divisão de Análise” em letras menores logo abaixo para diferenciar o desenvolvimento interno dos sistemas desenvolvidos por terceiros. Na mesma figura alinhada à estrema direita encontra-se também o brasão do estado com a figura do ceifador ao centro;
Menu
- A terceira linha do cabeçalho deverá conter o menu principal da aplicação, alinhado à esquerda e com tamanho variável de acordo com cada opção.
- Sempre acessível de qualquer ponto da aplicação;
- Menu personalizado pela aplicação: Ela define as opções constantes no menu e solicita a criação deste a uma Tag padrão que busca as permissões no Sistema de Segurança;
- Formato: Superior Horizontal, padrão Amazon.com e Banco do Brasil;
- Linha mais fina que a linha da identificação do sistema logo acima;
- Barrinhas na vertical dividindo as opções principais do menu;
- As opções principais estarão sempre visíveis durante toda a utilização do sistema, e quando for visitada pelo mouse mostrará um grande menu geral com todas as opções para o referido módulo, dividido por itens que apenas organizarão a grande lista de opções, não sendo submenus.
- A largura da “caixa de menu” é fixa, ou seja todos os menus têm a mesma largura, não importando a quantidade de itens; (Porém esse tamanho da caixa pode ser alterado no css de cada aplicação)
- A caixa de menu deve se iniciar na posição da tela onde a descrição do menu estiver localizada e não na extrema esquerda da tela;
OBS: Dentro dessa largura fixa, a aplicação pode escolher o número de colunas que quiser (atentar para que se o css “mandar” uma largura onde só cabe 2 colunas e a aplicação colocar 3 colunas em uma das opções de menu, o layout pode quebrar!!)
A quantidade de colunas a ser utilizada em cada opção de menu é configurada diretamente na definição do menu.
Usuário + Informações Complementares + Links Rápidos
- A quarta linha do cabeçalho deve conter a identificação do usuário logado e informações relevantes ao sistema;
- Visível de todas as telas/opções da aplicação;
- Identificação através do rótulo: “Usuário” na cor padrão da aplicação;
- Deverá ser apresentado o nome completo, em cor destaque (ver item deste mesmo nome no item Cor) adotada para o sistema;
- As informações de ambiente ou escopo/contexto de utilização como Comarca e Vara, devem ser colocadas logo em seguida ao nome do usuário, obedecendo o mesmo padrão de cores adotado para este;
- Esta linha deve utilizar a mesma cor de fundo que o restante da tela principal;
- Alinhado à direita encontramos o menu de links rápidos com opções padrões a todas as aplicações, com ícones pequenos seguidos de texto descritivo:
ícone | texto | caminho |
---|---|---|
casinha | Inicio | página inicial da aplicação |
interrogação | Ajuda | página de Ajuda |
X | Fechar | fechar a aplicação |
Botões
- Botões serão utilizados para representar apenas operações padrão das aplicações que denotem uma ação muito utilizada, básica, e que contenha um texto simples;
- Demais ações, operações, ou visualizações serão representadas através de links com texto, sem ícone e com separador (|) entre as opções. Este caso é recomendado para ações não muito utilizadas, e com texto mais longo;
- A representação de uma ação em botão ou em link, fica a critério da aplicação, excetuando-se operações básicas listadas abaixo, que devem obrigatoriamente estar em botão;
- Todos os botões terão o mesmo tamanho suportando até 2 aumentos de fonte;
- SEM figura devido à dificuldade de se produzir ícones satisfatórios atualmente;
- O componente utilizado será o button;
- O conjunto de botões deve estar alinhado sempre à direita da tela;
- Uma linha horizontal deve guiar a leitura do usuário da esquerda para a direita da tela para que os botões não fiquem “perdidos” caso o espaço entre os dados e o botão seja grande;
- Rótulos padrões para as operações básicas:
- Pesquisa Pesquisar
- Inclusão Novo
- Alteração/Edição Alterar
- Gravação Salvar
- Exclusão Remover
- Cancelamento Cancelar / Voltar
- Impressão Imprimir
- Relatório Gerar Relatório
- Inclusão de Item Adicionar
- Remoção de Itens Remover
- Seleção de um ou muitos Confirmar Seleção
- Remoção de um ou muitos Confirmar Remoção
Botão Voltar
- Deve constar em toda a tela que tiver sido invocada por outra, dispensado seu uso nos casos onde a tela iniciou-se a partir de uma opção de Menu (ex. Telas de Pesquisa).
- Sua função é a de voltar para a tela que ofereça a opção imediatamente anterior a atual dentro do contexto da aplicação, e não a tela que necessariamente o invocou (history back);
- Deve ser representado através do componente Button e ser o último botão a ser mostrado, ao lado dos demais botões apresentados na tela (situados na parte inferior logo abaixo dos dados);
- Para telas que utilizem rolagem vertical é recomendada a adoção de um atalho com a a finalidade de posicionar a leitura diretamente no fim ou no topo da tela facilitando o encontro do botão Voltar.
- Os atalhos devem estar situados ao lado direito da tela, acompanhados por uma flecha (para cima ou para baixo) e serem representados pelo seguintes textos: “Fim da Página” e “Início da Página”;
- Em alguns casos, como nas telas de cadastro, é recomendada a sua substituição pelo botão CANCELAR para evidenciar o cancelamento da operação e a volta à página anterior.
Fonte
- Padrão utilizado: Verdana
- Será permitido o aumento através do navegador (serão utilizados os recursos já disponibilizados por estes sem nenhuma funcionalidade própria). A aplicação deverá se adequar para não quebrar o layout caso o navegador permita o aumento;
- Os rótulos seguirão o padrão normal COM Negrito e DOIS PONTOS; para tudo, sem distinção para Tela Detalhe e Tela de Cadastro ou relatórios de qualquer tipo;
Obs: nota de rodapé.
Cor
- Padrão de cores pode variar de sistema para sistema;
- O número de cores utilizado nos sistemas deve ser padronizado, seguindo o estudo de cores previamente realizado. Atualmente: 7 (sete);
- Recomenda-se a utilização do conjunto de paletas de cores para a escolha das cores de uma nova aplicação;
- Uma vez adotada uma das paletas, deve-se seguir estritamente os tons sugeridos pela mesma (não alterar os tons);
- A cor de fundo do menu, quando aberto, deve ser complementar à cor padrão adotada para o sistema, em tom claro. Exemplo, se cor padrão = azul, então cor do menu= laranja ou amarelo claro.