Padrão de Interfaces

Padrões de Interface para aplicações WEB

Versão 1.11
Histórico de Revisão
Data Versão Descrição Autor

20/12/2011 1.0 Documento que estabelece o padrão de Luduvice e Eduardo
interfaces para aplicações Web utilizado no
DSI-G.
10/01/2013 1.1 Definição de número máximo de itens de Jeronimo
Consulta; Definição de atalho para ajuda.
14/01/2013 1.2 Atualização que inclui técnicas de Design Jeronimo
Responsivo e a adoção do Bootstrap
Framework.
28/02/2013 1.3 Revisão do documento. Jeronimo
04/04/2013 1.4 Inclusão de exemplos e revisão do Jeronimo
documento.
09/04/2013 1.4.1 Inclusão de Mensagens Genéricas Jeronimo
16/04/2013 1.4.2 Inclusão de orientação de Título de Página Jeronimo
19/04/2013 1.5 Inclusão do elemento Perfil na Área de Jeronimo
Identificação e Hora. Regras para uso de
ícones.
20/05/2013 1.6 Inclusão de orientação e exemplos para Jeronimo
Desabilitar funcionalidades as quais o
usuário não possui permissão de acesso.
15/10/2014 1.7 Alteração do link de inclusão. Alteração do Jeronimo
grid de resultados.
08/12/2014 1.8 Alteração do grid com paginação. Karina - PrimeUp
09/12/2014 1.9 Inclusão de Definição das Mensagens Karina - PrimeUp
15/12/2014 1.10 Inclusão Ocultação de Elementos Sérgio - PrimeUp
13/03/2015 1.11 Evolução do Padrão Visual de Furnas Karina - PrimeUp
Documento confidencial 1/ 51
Sumário
1. Introdução Error! Bookmark not defined.
1.1 Propósito Error! Bookmark not defined.
1.2 Escopo Error! Bookmark not defined.
1.2.1 Browser Error! Bookmark not defined.
1.3 Convenções do Documento Error! Bookmark not defined.
1.4 Feedback Error! Bookmark not defined.
2. Regras de Ouro do desenvolvimento de interfaces Error! Bookmark not defined.
3. Orientações para desenvolvimento de Design Responsivo Error! Bookmark not defined.

3.1 Layout Fluido Error! Bookmark not defined.
3.2 Imagens e recursos flexíveis Error! Bookmark not defined.
3.3 Media Queries Error! Bookmark not defined.
4. Estrutura Básica Error! Bookmark not defined.

4.1 Layout Error! Bookmark not defined.
4.1.1 Título de Página Error! Bookmark not defined.
4.1.2 Topo Error! Bookmark not defined.
4.1.3 Data e hora atuais Error! Bookmark not defined.
4.1.4 Menu de Opções Error! Bookmark not defined.
4.1.5 Breadcrumb Error! Bookmark not defined.
4.1.6 Área de Trabalho Error! Bookmark not defined.
4.1.7 Rodapé Error! Bookmark not defined.
4.2 Login Error! Bookmark not defined.
4.3 Opção de Ajuda Error! Bookmark not defined.
4.4 Páginas internas Error! Bookmark not defined.
4.4.1 Conteúdo Error! Bookmark not defined.
4.4.2 Área de Trabalho Error! Bookmark not defined.
5. Template Básica – Formatação da Página Error! Bookmark not defined.

5.1 Topo Error! Bookmark not defined.
5.2 Data e hora atuais Error! Bookmark not defined.
5.3 Menu de Opções Error! Bookmark not defined.
5.3.1 Interior do Menu de Opções Error! Bookmark not defined.
5.3.2 Menu de Navegação Responsivo (slicknav) Error! Bookmark not defined.
5.4 BreadCrumb Error! Bookmark not defined.
5.5 Área de Trabalho Error! Bookmark not defined.
5.6 Rodapé Error! Bookmark not defined.
5.7 Grid de Resultados Error! Bookmark not defined.
5.7.1 Grid de Resultados de Ações Simples Error! Bookmark not defined.
5.7.2 Grid de Resultados de Ações Múltiplas Error! Bookmark not defined.
5.7.3 Grid com Paginação Error! Bookmark not defined.
5.7.4 Grid com Efeito Sanfona Error! Bookmark not defined.
5.8 Elementos Desabilitados Error! Bookmark not defined.
5.9 Elementos Ocultos Error! Bookmark not defined.
6. Template Básica – Aparência Error! Bookmark not defined.
6.1 Topo Error! Bookmark not defined.

6.2 Login Error! Bookmark not defined.
6.3 Data e hora atuais Error! Bookmark not defined.
6.4 Menu Error! Bookmark not defined.
6.5 Conteúdo Error! Bookmark not defined.
6.6 Rodapé Error! Bookmark not defined.
7. Objetos de uso geral Error! Bookmark not defined.

7.1 Cores de fontes Error! Bookmark not defined.
7.2 Ícones Error! Bookmark not defined.
7.3 Tamanhos de fontes Error! Bookmark not defined.
7.4 Caixas de texto Error! Bookmark not defined.
7.4.1 Caixas de texto com conteúdo texto Error! Bookmark not defined.
7.4.2 Caixas de texto com conteúdo de valor numérico Error! Bookmark not defined.
7.4.3 Caixas de texto com conteúdo do tipo data Error! Bookmark not defined.
7.5 Listas de Seleção Error! Bookmark not defined.
7.6 Listas de Seleção Múltipla Error! Bookmark not defined.
7.7 Listas de Seleção com dependência Error! Bookmark not defined.
7.8 Botões de Opção Error! Bookmark not defined.
7.9 Datepicker (Jquery) Error! Bookmark not defined.
7.10 Accordion (Jquery) Error! Bookmark not defined.
7.11 Abas (Jquery) Error! Bookmark not defined.
7.12 Janela Modal (Jquery) Error! Bookmark not defined.
7.13 Tabela de Resultados Responsivo (FooTable) Error! Bookmark not defined.
8. Mensagens Error! Bookmark not defined.

8.1 Confirmações Error! Bookmark not defined.
8.2 Não Conformidade Error! Bookmark not defined.
8.3 Avisos Error! Bookmark not defined.
8.3.1 Avisos de Esclarecimento Error! Bookmark not defined.
8.3.2 Avisos de Realização de Ações Error! Bookmark not defined.
8.4 Mensagens Genéricas Error! Bookmark not defined.
8.5 Definição das Mensagens Error! Bookmark not defined.
Índice de Ilustrações
Figura 1 - Layout ...........................................................................................................................................................7
Figura 2 - Tela de Login ................................................................................................................................................9
Figura 3 – Opção de Ajuda no Menu de Opções ...........................................................................................................9
Figura 4 - Tela de Pesquisa com Default Todos .......................................................................................................... 12
Figura 5 - Tela de Pesquisa com Default Selecione..................................................................................................... 13
Figura 6 - Tela de Inclusão .......................................................................................................................................... 13
Figura 7 - Tela de Alteração ........................................................................................................................................ 14
Figura 8 - Tela de Exclusão ......................................................................................................................................... 15
Figura 9 - Exemplo Topo............................................................................................................................................. 16
Figura 10 - Exemplo Data e Hora Atuais .................................................................................................................... 16
Figura 11 - Exemplo Menu de Opções ........................................................................................................................ 17
Figura 12 – Exemplo de Menu de Navegação Responsivo ......................................................................................... 19
Figura 13 - Exemplo Breadcrumb ............................................................................................................................... 21
Figura 14 – Projeto 12 Colunas Grid966 ..................................................................................................................... 22
Figura 15 – Exemplo de Classes e Marcações ............................................................................................................. 23
Figura 16 - Exemplo Rodapé ....................................................................................................................................... 24
Figura 17 - Grid de Ações Simples .............................................................................................................................. 26
Figura 18 - Grid de Ações Múltiplas ........................................................................................................................... 28
Figura 19 - Barra de navegação ................................................................................................................................... 31
Figura 20 - Sanfona Inicial .......................................................................................................................................... 34
Figura 21 - Sanfona com Elemento Expandido ........................................................................................................... 34
Figura 22 - Botão habilitado e desabilitado ................................................................................................................. 35
Figura 23 - Tooltip de ícones ....................................................................................................................................... 38
Figura 24 - Exemplo checkbox .................................................................................................................................... 41
Figura 25 - Exemplo radio button ............................................................................................................................... 41
Figura 26 – Exemplo de Datepicker ............................................................................................................................ 42
Figura 27 – Exemplo de Accordion ............................................................................................................................. 43
Figura 28 – Exemplo de Abas ..................................................................................................................................... 44
Figura 29 – Exemplo de Modal ................................................................................................................................... 45
Figura 30 – Exemplo de Tabela de Resultados Responsivo ........................................................................................ 46
Figura 31 – Exemplo de Colunas Escondidas.............................................................................................................. 48
Figura 32 - Aviso de Confirmação .............................................................................................................................. 49
Figura 33 - Aviso de Realização de Ações .................................................................................................................. 50
1. Introdução
1.1 Propósito
O propósito deste documento é disponibilizar padrões para o desenvolvimento de interfaces WEB.
Aderir a um padrão de estilo de interface é uma excelente prática garantida pela indústria para tornar o
desenvolvimento mais eficiente e a manutenção de aplicações com menor custo.
Estas orientações representam o nível mínimo de padronização esperado em interfaces WEB.
1.2 Escopo
Este documento disponibiliza um conjunto de orientações sobre a formatação das interfaces e estas
orientações são aplicáveis à web sites e aplicações clientes mais sofisticadas. Além disso, este
documento contempla prioritariamente interfaces de aplicações desenvolvidas para acesso em desktops
e computadores pessoais.
Em conjunto com este trabalho, foi desenvolvido um arquivo estilo_padrão.zip (disponibilizado na
página Arquitetura de Sistema do departamento) que contém o estilo padrão detalhado neste
documento e páginas de exemplo do uso correto deste padrão.
1.2.1 Browser
A versão do browser homologada por Furnas e que deverá ser utilizada o Internet Explorer 8.0 ou
superior.
1.3 Convenções do Documento

O código de exemplo é mostrado utilizando a fonte Code e exibe a sintaxe do código como pode ser
analisado no editor de texto do Visual Studio.
1.4 Feedback
Os Feedback para estas orientações é altamente encorajado para que o padrão seja em constante
evolução e sempre atenda as expectativas dos usuários finais. Por favor, envie suas questões e
comentários para o seu arquiteto de aplicações.
2. Regras de Ouro do desenvolvimento de interfaces

As seguintes orientações são aplicáveis a todos os aspectos do desenvolvimento de interfaces:
 Siga o estilo de formatação existente.
 Mantenha a consistência usando a mesma terminologia nos menus e telas
3. Orientações para desenvolvimento de Design Responsivo
Com a grande variedade de dispositivos que os usuários podem utilizar para acessar uma aplicação, cada
vez mais se torna importante a definição de um único layout que se adapte às diferentes características
destes dispositivos. As aplicações que possuem a características de se adaptar conforme o dispositivo da
qual esta é acessada possuem web design responsivo.
Um design responsivo bem sucedido é suportado por três pilares tecnológicos:
 Layout fluido.
 Imagens e recursos flexíveis,
 Media queries.
3.1 Layout Fluido

Desenvolver páginas com layout fluido consiste em especificar medidas relativas em vez de medidas
fixas aos elementos da página. Dessa forma, a estrutura se adapta automaticamente a diferentes
resoluções de tela.
Portanto, em vez de especificar os elementos de uma página em pixel (px) que é uma medida fixa,
devemos defini-los com as medidas:
 Em: É uma medida escalável e relativa ao seu elemento pai. Por exemplo, se o tamanho da fonte
do elemento pai é 12px então 1em é igual a 12 px e 0.5em seria igual 6px.
 Porcentagem (%): Funciona da mesma forma que em. Por exemplo, se especificarmos uma
fonte com tamanho igual a 75% e seu elemento pai é definido como 12px e o seu tamanho será
exibido como uma fonte de tamanho igual a 9px.
Devido à natureza destes dois elementos, “Em” deve ser utilizado para lidar com fontes e elementos
textuais e “Porcentagem” deve ser utilizada para elementos estruturais, como por exemplo, largura,
borda e margem.
Definido a unidade de medida apropriada, resta definir o valor escalável para que o elemento tenha a
aparência desejada. Para converter a medida fixa em escalável basta aplicarmos a fórmula abaixo que
define a medida escalável como a razão entre a medida alvo, i.e a da aparência que desejamos, e o valor
de contexto que representa o valor de seu ancestral imediatamente superior. Por exemplo, se temos um
bloco ocupando 400px e dentro dele queremos que um bloco ocupe 200px podemos defini-lo com
largura igual a 50%.
Medida Escalável = Alvo/Contexto
Considerando que a fonte default para browsers desktop é 16px, se quisermos que um elemento tenha
aparência de 24px basta defini-lo com 1,5em (24/16).
3.2 Imagens e recursos flexíveis
Para que as imagens e recursos visuais se adaptem ao layout fluido é importante que tenham definidos
em seu estilo max-width seja definido em : 100%.
3.3 Media Queries
O escopo deste documento é dedicado a aplicações Web para desktop, o uso de media queries não foi
aplicado.
4. Estrutura Básica
4.1 Layout
Figura 1 - Layout
4.1.1 Título de Página
O cabeçalho do browser deve apresentar o título da página atual. Dessa forma, o título da página
representará a ação corrente do usuário. Por exemplo, se o usuário está na página de “Exclusão de
mensagem” o título de página será exibido como “Exclusão de mensagem”.
4.1.2 Topo
Apresenta a imagem que identifica a marca Furnas, a sigla do sistema, o nome do sistema e a
identificação do usuário que contém nome do usuário e o seu perfil.
4.1.3 Data e hora atuais

Exibe Informações de data e hora atuais que são alinhados à direita.
4.1.4 Menu de Opções

Apresenta a lista de funcionalidades do sistema e a opção de Sair. A opção de Sair deve ser alinhada à
direita, para evitar acidentes.
Quando necessário, deve ser exibida a opção Home que quando selecionada deve redirecionar o usuário
até a tela inicial do sistema. A opção Home deve ser a primeira opção a ser listada no Menu de Opções,
e portanto, a primeira da esquerda para direita.
4.1.5 Breadcrumb
Apresenta o caminho percorrido pelo usuário até a página atual. No Breadcrumb são exibidos links das
páginas anteriormente percorridas e o nome da página atual, facilitando assim o retorno a alguma
página anterior ou a identificação de onde o usuário se encontra dentro da hierarquia do sistema.
4.1.6 Área de Trabalho

Apresenta as informações pertinentes às funcionalidades do sistema. É através da área de trabalho que
o usuário executa suas operações. Essa seção possui alguns padrões que deverão ser usados de acordo
com a natureza da funcionalidade a ser disponibilizada.
4.1.7 Rodapé
Deve ser apresentado somente na tela de login. Ele deve conter a mensagem "Todos os direitos
reservados a Furnas ©” acrescida do ano de publicação. Opcionalmente podem ser exibidos detalhes
acerca da melhor visualização, como por exemplo, navegadores suportados.
4.2 Login
A tela de login será composta pelos campos USUÁRIO e SENHA, com seus respectivos labels e um botão
de ACESSAR. No label do campo USUÁRIO a tela apresentará um exemplo deste campo (Ex:fr99999).
Acima do formulário de login será exibido o texto: “Utilize o usuário e a senha de acesso à rede
corporativa”.
Devem constar na página o nome do sistema e o logo de Furnas. Caso as informações sobre browsers
suportados e melhor resolução sejam acrescentadas estas devem estar contidas no rodapé.
Deve-se utilizar o label USUÁRIO e SENHA, evitando a utilização de termos como: USER, PASSWORD, etc.
No caso específico do login ser feito por outro parâmetro deve se utilizar o nome deste, por exemplo: E-
MAIL, CÓDIGO, etc. Exemplo:
Figura 1 - Tela de Login
4.3 Opção de Ajuda
As aplicações devem prover meios para o usuário obter ajuda. Com o objetivo de aproveitar o
conhecimento prévio do usuário com outras ferramentas. A aplicação deve disponibilizar um atalho para
conteúdo de Ajuda, podendo ser acessada no Menu De Opções. Tal conteúdo de ajuda pode ser sensível
ao contexto ou seguir especificação do sistema.
A inclusão ou não da opção Ajuda no Menu De Opções influencia o elemento conforme ilustrado na
seção 5.3 (Template Menu de Opções).
Figura 3 – Opção de Ajuda no Menu de Opções
4.4 Páginas internas
Deve conter na parte superior um cabeçalho TOPO, contendo o nome/logo do sistema, o logo de Furnas
e a identificação do usuário que contém nome do usuário e o seu perfil. Recomenda-se que
internamente não se repita o rodapé.
Caso o usuário possua apenas um perfil, tal informação deve ser apresentada ao abaixo do nome do
usuário. Caso o usuário possua mais de um perfil, estes devem ser apresentados abaixo do nome do
usuário separados por “|”.
Abaixo da área de IDENTIFICAÇÃO temos o MENU DE OPÇÕES conforme especificado na seção 4.1.4.
Abaixo do MENU DE OPÇÕES temos o BREADCRUMB (seção 4.1.5), que exibe o caminho percorrido pelo
usuário até a página atual. Cada opção será representada por um elemento visual do tipo link.
Por fim, temos a ÁREA DE TRABALHO (4.1.6) que fornece formulários e elementos necessários para que
o usuário execute a ação desejada. Na ÁREA DE TRABALHO, o usuário selecionará qual ação quer tomar:
fazer uma busca, fazer uma inclusão ou visualizar todos os dados clicando no registro desejado (No caso
do exemplo, o nome do fornecedor).
Caso o usuário não possua permissão de acesso a alguma funcionalidade, tal elemento deve ser exibido
ocultado.
4.4.1 Conteúdo
Na ÁREA DE TRABALHO são exibidos campos com o qual o usuário pode interagir para submeter
informações e também podem ser exibidas informações para o usuário, como por exemplo, alertas,
resultados de pesquisas e mensagens de ajuda.
4.4.1.1 Informações Cadastrais

Cada elemento apresentado possui um label associado que define a informação associada ao elemento
visual. Os labels de uma mesma coluna são todos alinhados à esquerda. Os elementos mais comuns são:
 Caixa de Texto – Utilizada para informações alfanuméricas em geral;

 Lista de Seleção – Utilizada para informações que possuam um conjunto de valores (domínio)
pré-definido;
 Botões de Opção (checkbox ou radio button) – Utilizada também para informações que possuam
um pequeno conjunto de valores (domínio) pré-definido. Podem ser de dois tipos, permitindo
ou não múltipla seleção dos valores apresentados.
Nas interfaces com entrada de dados, os campos obrigatórios são apresentados com o caractere * no
final da descrição do campo. No caso do não preenchimento de um ou mais campos obrigatórios o
sistema deverá apresentar uma mensagem ao usuário informando os campos obrigatórios não
preenchidos.

4.4.1.2 Resultados de Consulta

Utilizada para apresentar um conjunto de itens. Deve possuir um título, um conjunto de atributos
associados a cada item apresentado, organizados em colunas e um conjunto de links que possibilite a
navegação entre as páginas de resultados.
Os links para navegação entre páginas poderão não ser exibidos desde que a lista de registros seja
pequena o suficiente para ser exibida na sua totalidade em apenas uma página, ou seja, possua
quantidade de registros inferior a dez itens.
Caso a quantidade de registros ultrapasse este valor mínimo, as seguintes medidas devem ser tomadas:
 Na apresentação inicial da interface os dez primeiros itens são recuperados e apresentados na

lista inicial. Os demais itens são agrupados em múltiplos de dez elementos por página.
 Deve ser possível também navegar para a primeira e última página da lista, assim como para
página imediatamente anterior e imediatamente seguinte.
 A lista deve ser sempre ordenada por um dos atributos apresentados na mesma.
Caso seja necessário que uma página exiba uma quantidade superior a dez itens, tal orientação deve ser
devidamente expressa em documento de Especificação Complementar.
Conforme definido na seção 7.8, um campo do tipo ComboBox pode ser exibido como valores iniciais
que podem ser “Selecione” ou “Todos”. Vale ressaltar que se o valor inicial for “Todos”, então um grid
deverá ser carregado com os resultados da consulta no instante em que a página for acessada.
Entretanto, caso o valor inicial for “Selecione”, esse grid de resultados não será exibido.

4.4.2 Área de Trabalho
Figura 4 - Tela de Pesquisa com Default Todos

Ações:
 Pesquisar – Processa a pesquisa das informações com o filtro informado e apresenta lista com as
informações resultantes.
 Incluir [Item] – Apresenta a interface de cadastro com os atributos sem preenchimento
possibilitando a inclusão de um novo item.
 Excluir - Recupera as informações do item selecionado e apresenta interface de cadastro com os
atributos preenchidos, porém não estará disponível a modificação dos atributos.
 Alterar - Recupera as informações do item selecionado e apresenta interface de cadastro com os
atributos preenchidos.
O exemplo acima prevê duas ações para um dado registro (Alterar e Excluir). Caso sejam necessárias
mais de três ações, será exibido apenas a ação Detalhar que redireciona o usuário para uma nova tela
que exibe todas as ações necessárias.

Figura 5 - Tela de Pesquisa com Default Selecione

4.4.2.1 Formulário de inclusão
Figura 6 - Tela de Inclusão
BREADCRUMB:
Descreve o caminho que o usuário percorreu até a página corrente e informa a página atual.
Formulário:
Possui os campos de entrada de dados e botões de ação.
Os botões de ação deste formulário são respectivamente Voltar e Incluir.
Ações:
 Incluir – Realiza validações das informações apresentadas, inclui novo item utilizando as
informações validadas e retorna para a página chamadora da interface.
 Voltar – Retorna para a página chamadora da interface.

4.4.2.2 Formulário de alteração
Figura 7 - Tela de Alteração
BREADCRUMB:
Descreve o caminho que o usuário percorreu.
Formulário:
Os botões de ação deste formulário são respectivamente Voltar e Alterar.
Ações:
 Alterar – Realiza validações das informações apresentadas, altera o item utilizando as
informações validadas e retorna para a página chamadora da interface.

4.4.2.3 Formulário de exclusão
Figura 8 - Tela de Exclusão
BREADCRUMB:
Descreve o caminho que o usuário percorreu.
Formulário:
Os botões de ação deste formulário são respectivamente Voltar e Excluir.
Ações:
 Excluir – Apresenta uma mensagem solicitando a confirmação da exclusão. Caso seja
confirmado, o item é excluído e retorna para a página chamadora da interface. No caso da não
confirmação nenhuma ação é executada.
5. Template Básica – Formatação da Página

Nesta seção, é demonstrado como as páginas devem ser estruturadas.
5.1 Topo
O cabeçalho Topo deve exibir o símbolo de Furnas, a sigla e o nome do sistema e a identificação do
usuário que contém nome do usuário e o seu perfil. Para exibição correta do elemento, o cabeçalho
deve ser declarado da seguinte forma:
<div id="header-wrapper"> 
<div class="container">
<div id="header">
<div class="grid_5 logo">
<img src="~/Content/images/logozdp9.png" alt="Furnas" />
</div>

<div class="grid_7 prefix_5">
<div class="user-box-inner">
<div class="user-info">
<ul>
<li>
<span class="glyphicon glyphicon-
user">
</span> Bem-Vindo, John Cotrim
</li>
<li>
credit-card">
</span> Perfil: <b>Administrador |
Operador </b>
</li>
</ul>
</div>
</div>
</div>
<div class="grid_5 logoFurnas">
<img src="~/Content/images/logo.png" alt="Furnas"/>
<div>
</div>
</div>
</div>
A figura 8 abaixo exibe o uso correto do header.
Figura 9 - Exemplo Topo
5.2 Data e hora atuais

Para exibição correta do elemento, a data e hora atuais devem ser declaradas como ilustrado nos
exemplos abaixo.
<div class="grid_7 prefix_5 right">
<span class="glyphicon glyphicon-calendar"></span>
Quinta-feira, 18 de Abril de 2013 - 10:12:47
</div>
<div class="clear"></div>
</div>
A figura 9 exibe o uso correto da data e hora atuais.
Figura 10 - Exemplo Data e Hora Atuais

5.3 Menu de Opções

O Menu de Opções deve exibir as funcionalidades do sistema disponíveis ao usuário. Para facilitar a
leitura, nesta seção abstraímos as informações dos links do menu, dessa forma, apenas a estrutura do
Menu de Opções são abordadas no código abaixo. Os detalhes da implementação dos links são
abordados na seção 5.3.1 e a responsividade do menu é abordada na seção 5.3.2.
@*INICIO - Menu*@
<div class="menu">
<div class="grid_10">
<!—Opções de Funcionalidades-->
</div>
<div class="grid_4 prefix_8 right">
<!—Opção de Sair-->
</div>
</div>
</div>
@*FIM - Menu*@
Dessa forma, o Menu De Opções se subdivide em duas áreas: uma área que contém as principais
funcionalidades do sistema que ocupa até 11/12 da largura do Menu, e uma área reservada para a
opção Sair que ocupa 1/12 do Menu e se encontra no canto direito. A imagem abaixo, ilustra uma
construção correta do Menu de Opções.
Figura 2 - Exemplo Menu de Opções
5.3.1 Interior do Menu de Opções

Nesta seção a estrutura interna do Menu de Opções é detalhada. O código abaixo detalha como podem
ser definidas as funcionalidades, complementando os trechos comentados na seção anterior.
<!—Opções de Funcionalidades-->
<div id="nav">
<ul id="menu">
<!—Menu Principal-->
<li><a href="@Url.Action("Index", "Home")"><span class="glyphicon
glyphicon-home"></span> Home</a>
</li>
<li><a href="@Url.Action("Index","Mensagens")">Mensagens</a></li>
<li><a href="@Url.Action("Index", "Eventos")">Eventos</a></li>
<!—SubMenu Exemplo 2º nível-->
<li><a href="#">Exemplo <span class="glyphicon glyphicon-chevron-
down"></span></a>
<ul class="submenu">
<li><a href="#">NadaFaz</a></li>
<li><a disabled="true" href="#">FazNada</a></li>
<!—SubMenu Exemplo 3º nível-->

<li class="dropdown-submenu" role="presentation">
<a role="menuitem" tabindex="-1"
href="#">Auditoria <span class="glyphicon
glyphicon-chevron-right"></span></a>
<ul class="dropdown-menu">
<li role="presentation">
href="#">Interna</a>
</li>
href="#">Externa</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
O código a seguir detalha as opções de Ajuda e Sair que devem ficar alinhados a direita e, portanto ficam
situadas dentro da div de classe “grid_4 prefix_8 right” da seção anterior.
<!—Opção de Ajuda e Opção de Sair-->
<!—Opção de Ajuda-->
<a id="help" title="Ajuda" href=@Url.Action("Ajuda", "Home")>
<span class="glyphicon glyphicon-question-sign"></span></a> -
<!—Opção de Sair-->
<a id="exit" href=@Url.Action("LogOff", "Identidade")>
<span class="glyphicon glyphicon-off"></span> Sair</a>

5.3.2 Menu de Navegação Responsivo (slicknav)
Figura 12 – Exemplo de Menu de Navegação Responsivo

Características:
 Menu de navegação mobile
 Sustentação do menu Multi-level
 Flexível, marcação simples
 Compatibilidade cross-browser
 Acessível por Teclado
5.3.2.1 Instruções de uso
 Incluir o CSS e JS - slicknav.css pode ser modificado para se adequar o design do site
<link rel="stylesheet" href="SlickNav/slicknav.css" /> <script
src="SlickNav/jquery.slicknav.min.js"></script>
 Menu de marcação
<ul id="menu">
<li>
<a href="#">item 1</a>
</li>
<li>
</li>
<li>
</li>
<li>
<a href="#">item 4</a></li>
</ul>

 Inicializar
<script> $(function(){ $('#menu').slicknav(); }); </script>
Sem qualquer configuração adicional, tanto os menus originais e móveis serão exibidos. Recomenda-se
usar consultas de mídia para esconder o menu original e exibir o menu móvel quando apropriado.
Por exemplo:
.slicknav_menu { display:none; } @media screen and (max-width: 40em) { /*
#menu is the original menu */ .js #menu { display:none; } .js .slicknav_menu
{ display:block; } }
Opções
Propriedade Omissão Descrição
Label "MENU" Etiqueta para o botão de menu. Use uma cadeia vazia para
nenhum rótulo.
Duplicate true Se for verdade, uma cópia do elemento do menu é feito para o
menu móvel. Isto permite a funcionalidade separada para ambas
as versões móveis e não móveis.
Duration 200 A duração da animação deslizante.
easingOpen "swing" Flexibilização utilizado para animações abertas. "Swing" e
"Linear" estão disponíveis com jQuery. Mais funções de
atenuação estão disponíveis com o uso de plug-ins, como o
jQuery UI .
easingClose "swing" Flexibilização utilizado para animações próximos. "Swing" e
"Linear" estão disponíveis com jQuery. Mais funções de
atenuação estão disponíveis com o uso de plug-ins, como o
jQuery UI .
closedSymbol "& # Caractere para fechar o painel.
9658;"
openedSymbol "& # Caractere para abrir o painel.
9660;"
prependTo "Corpo" Elemento, objeto jQuery, ou jQuery selector string para o
elemento para preceder o menu móvel.
parentTag "Um" Tipo de elemento para itens de menu pai. Tag Anchor é
recomendada para a acessibilidade.
closeOnClick false Fechar menu quando um link é clicado. Útil ao navegar dentro
de uma única página.
allowParentLinks false Permitir links clicáveis como elementos pai.
Callbacks
Propriedade Parâmetros Descrição
o init function () {} Chamado após a criação SlickNav.
open function (trigger) {} Chamado depois menu ou sub-menu aberto.

close function (trigger) {} Chamado depois menu ou sub-menu fechado.
Métodos
Método Descrição
$ ('. menu') slicknav (‘toggle '); Método para alternar o menu.
$ ('. menu') slicknav ('open.'); Método para abrir o menu.
$ ('. menu') slicknav ('close.'); Método para fechar o menu.
HTML
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li><a href="http://github.com">View on Github</a></li>
</ul>
JavaScript
$('#menu').slicknav({
prependTo:'#demo1'
});
Referência: http://slicknav.com/
5.4 BreadCrumb
O elemento BreadCrumb exibe o caminho percorrido desde a Página Inicial até a página corrente. Para
exibição correta do elemento, o Breadcrumb deve ser declarado da seguinte forma:
<div class="conteudo">
<section id="breadcrumb">
<ul class="breadcrumb">
<li class="home"><a href="@Url.Action("Index",
"Home")"></a></li>
<li><a href="@Url.Action("Index",
"Mensagens")">Mensagens</a></li>
<li class="last"><a href="#">Incluir</a></li>
</ul>
</section>
...
</div>
Figura 3 - Exemplo Breadcrumb

5.5 Área de Trabalho
O sistema de grid 996 CSS é uma ferramenta utilizada para desenvolver uma formatação com uma
melhor disposição de itens para o design web. Todo o código pode ser personalizado para atender as
mais diferentes demandas, sendo assim, o resultado é um layout versátil e de fácil utilização. A
ferramenta também inclui um arquivo css para manter a formatação de forma consistente em todos os
navegadores.
Responsividade
O 996 Grid é muito sensível ao ambiente e suporta navegadores móveis através da utilização de
consultas de mídia. O sistema de Grids mostrar o conteúdo corretamente em qualquer dispositivo seja
ele desktop, laptop, tablet ou smartphone.
Projeto 12 colunas
O Grid 996 está dividido horizontalmente em 12 colunas. Esse sistema pode ser subdividido em colunas
iguais de dois, três, quatro ou seis.
Figura 14 – Projeto 12 Colunas Grid966
Marcação
<p>Column 1</p>
</div>
<p>Column 2</p>
</div>
<p>Column 3</p>
</div>
<p>Column 4</p>

</div>
</div>
Arquivos Utilizados
CSS
 normalize.css | Utilizado para realizar normalizações CSS e correções de bugs comuns
 base.css | Base HTML5 para um projeto consistente em todos os navegadores
 grid.css | O núcleo do Grid 996
 style.css | Folha de estilo para os estilos do usuário. Inclui uma variedade de consultas de mídia
úteis
JS
 Modernizr | Ajustes para navegadores mais antigos
Explicação de Classes e Marcações
Figura 15 – Exemplo de Classes e Marcações
.container
É um div 996px de largura, fixado no centro da tela e permitindo que o layouts tenha um fundo que se
estende e completa toda a página visualizada. As colunas são, em seguida, alinhadas dentro da div
container.
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12
As classes “.grid_” do CSS para as colunas podem ser usadas em qualquer combinação, representando o
limite de 12 e em uma única fileira. É possível até mesmo utilizar colunas dentro de colunas.
.alfa, .omega
Para alinhar as colunas em alguns casos, a primeira coluna precisa da classe “.alfa”, as últimas a classe

“.omega”. Essas duas classes remover as margens esquerda e direita para que as colunas se encaixam
corretamente dentro de sua linha pai.
.prefix_1, .prefix_2, .prefix_3, .prefix_4, .prefix_5, .prefix_6, .prefix_7, .prefix_8, .prefix_9, .prefix_10,
.prefix_11 .suffix_1, .suffix_2, .suffix_3, .suffix_4, .suffix_5, .suffix_6, .suffix_7, .suffix_8, .suffix_9,
.suffix_10, .suffix_11
As classes de prefixo & sufixo podem ser utilizadas para o espaçamento entre, antes ou depois de uma
coluna sem adição de marcação extra simplesmente para fins de espaçamento.
Referência: http://996grid.com/
5.6 Rodapé
O Rodapé deve exibir a mensagem "Todos os direitos reservados a Furnas ©” acrescida do ano de
publicação. Para exibição correta do Rodapé o mesmo deve ser declarado da seguinte forma:
<footer id="login-footer">
Todos os direitos reservados à Eletrobras Furnas ©2015
</footer>
Dessa forma, a aparência do Rodapé é definida exclusivamente pelo estilo-padrão.
A Figura 16 ilustra o uso adequado do elemento.
Figura 16 - Exemplo Rodapé
5.7 Grid de Resultados

Quando o usuário realiza uma pesquisa, é exibido um conjunto de dados formatados em uma tabela.
Para cada registro da tabela, o usuário poderá executar um conjunto de operações com o objetivo de
manipular seus dados.
Com o objetivo de facilitar a interação do usuário existem dois tipos de Grids de Resultados, cada um
com as suas particularidades e vantagens: Grid de Resultados de Ações Simples e Grid de Resultados de
Ações Múltiplas.
Além disso, cada Grid de Resultados pode apresentar recursos como paginação ou sanfona.
A paginação é um recurso bastante útil para organizar a quantidade de registros que são exibidos para o
usuário.
O recurso de sanfona serve para ocultar e revelar informações adicionais de um dado registro.
5.7.1 Grid de Resultados de Ações Simples

O Grid de Resultados de Ações Simples deve ser utilizado quando o usuário precise alterar apenas um
registro por vez. Para exibição correta do Grid de Resultados de Ações Simples, o mesmo pode ser
declarado da seguinte forma:

<div class="box3">
<div class="box-panelHead blue">Grid por registros</div>
<div class="box-panelTop">
<table class="footable table resultadosDePesquisa" data-
sort="false" data-page-size="5">
<thead>
<tr>
<th>
</th>
<th>Código</th>
<th>Descrição</th>
<th>Sistema</th>
<th>Valor</th>
<th>Atualizado</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Mensagens.Select((valor,
indice) => new { indice, valor }))
{
<tr>
<td>
@(item.indice + Model.Mensagens.FirstItemOnPage)
</td>
<td>@item.valor.Codigo</td>
<td>@item.valor.Descricao</td>
<td>@item.valor.Sistema</td>
<td>1</td>
<td>07/09/2014</td>
<td>
<a href="@Url.Action("Editar",
"Mensagens", new {id = item.valor.Id })"><span class="glyphicon glyphicon-
pencil"></span></a>
<a href="@Url.Action("Excluir",
"Mensagens", new {id = item.valor.Id })"><span class="glyphicon glyphicon-
remove"></span></a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>

</div>
A Figura abaixo ilustra o uso adequado do elemento.
Figura 17 - Grid de Ações Simples

Dada à simplicidade da abordagem, este grid é o default.
5.7.2 Grid de Resultados de Ações Múltiplas

O Grid de Resultados de Ações Múltiplas deve ser utilizado quando o usuário precise alterar vários
registros de uma só vez. Para exibição correta do Grid de Resultados de Ações Múltiplas, o mesmo pode
ser declarado da seguinte forma:
<div class="box3">
<div class="box-panelHead blue">Grid de seleção </div>
<thead>
<tr>
<th>
<span class="input-group-addon">
<input type="checkbox"
onclick="toggle(this)" />
</span>
</th>
<th>Código</th>
<th>Sistema</th>
<th>Valor</th>
<th>Atualizado</th>

</tr>
</thead>
<tbody>
@foreach (IDadosDeMensagem item in
Model.Mensagens)
{
<tr>
<td>
<input type="checkbox" name="id"
value="@item.Id">
</span>
</td>
<td>@item.Codigo</td>
<td>@item.Descricao</td>
<td>@item.Sistema</td>
<td>1 </td>
<td>07/09/2014</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="5">
<div class="box-panelFooter right push_1">
<button class="btn btn-default"
type="submit" name="Edit"><span
class="glyphicon glyphicon-
pencil"></span> Editar</button>
<button class="btn btn-default"
type="submit" name="Exclude">
remove"></span> Excluir</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

Figura 18 - Grid de Ações Múltiplas
Além disso, para que as funcionalidades de selecionar todos os registros ou desmarcar todos os registros
com um único gesto seja disponibilizada é necessário inserir o código javascript abaixo.
<script>
function toggle(source) {
checkboxes = document.getElementsByName('id');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
5.7.3 Grid com Paginação

Quando for necessário dividir os resultados da pesquisa em páginas, o Grid de Resultados deve prover
meios para que o usuário navegue por estas páginas de modo que encontrar o registro desejado seja o
mais simples possível.
Para inserir a barra de navegação de registros basta acrescentar as classes Paginador.cs e Extensoes.cs
ao projeto e acrescentar o elemento abaixo ao Grid de Resultados.
<div class="box3">
<div class="box-panelHead blue">Grid por registros</div>
<thead>
<tr>
<th>

</th>
<th>Código</th>
<th>Sistema</th>
<th>Valor</th>
<th>Atualizado</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<!—Código referente a exibição do resultado-->
</tbody>
<tfoot>
<tr>
<td colspan="5">
<!—Abaixo Código referente a barra de navegação de registros -->
<div class="pagination pagination-centered hide-if-no-paging">
@Html.Paginador(Model.Mensagens, x => Url.Action("Buscar", new {
paginaAtual = x }), "formBuscar", "resultadoBusca")
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</table>
A classe Extensoes.cs contém o método que é usado na view como um Html Helper responsável por criar
o html dos ícones de navegação enquanto a classe Paginador.cs contém os métodos necessários para
montar cada um dos elementos html. O elemento gerado será semelhante ao abaixo.
<div class="pagination pagination-centered hide-if-no-paging">
<ul>
<li class="footable-page-arrow">
<a onclick="SelecionarPaginaDestino(1)" href="javascript:void(0)"
data- page="first"><<</a>
</li>
<li class="footable-page-arrow"><a
onclick="SelecionarPaginaDestino(1)" href="javascript:void(0)"
data-page="prev"><</a>
</li>

data-page="0">1</a></li><li class="footable-page-arrow"><a
disabled="true" onclick="SelecionarPaginaDestino(2)"
href="javascript:void(0)" data-page="1">2</a>
</li>
data-page="2">3</a>
</li>
data-page="footable-page-arrow next">></a>
</li>
data-page="footable-page-arrow last">>></a>
</li>
</ul>
</div>
Caso sejam utilizados outros nomes para as classes dos elementos ou para as funções javascript é
necessário modificá-los também no construtor da classe Paginador.cs.
public Paginador(IPagedList listaPaginada, RequestContext context)
{
ListaPaginada = listaPaginada;
Context = context;
builder = new StringBuilder();

urlHelper = new UrlHelper(Context);
// Defaults
NextClass = "icon-forward";
LastClass = "icon-step-forward";
PreviousClass = "icon-backward";
FirstClass = "icon-step-backward";
ComboBoxClass = "numero-de-pagina";
DivClass = "panel-footer";
SpanClass = "pull-right navegadorResultados";
TotalRecordsText = "{0} - {1} de {2}";
NumeroMaximoDeProxPaginas = 4;
NumeroMaximoDePaginasAnteriores = 5;
funcaoJSmudarPagina = "SelecionarPaginaDestino({0})";
funcaoJScomboBox = "SelecionarPagina()";
}

Figura 49 - Barra de navegação
5.7.4 Grid com Efeito Sanfona

Alguns tipos de registros necessitaram de um tratamento diferenciado. Por exemplo, caso um dado
registro possua uma complexidade elevada para sua exibição pode ser útil omitir parte dessas
informações de modo que o usuário possa revela-las se necessário.
Para este tipo de casos, o Grid de Resultados deve ser construído para dar suporte a tal recurso. Para
obter tal efeito, é necessário utilizar os seguintes parâmetros data-toggle e data-parent para atribuir a
função de ocultação assim como o parâmetro data-target para apontar o objeto que será oculto ou
exibido. O trecho de código abaixo explica melhor o funcionamento.
<div class="box3">
<div class="box-panelHead blue">Grid de seleção</div>
<table class="footable table resultadosDePesquisa resultadosDePesquisaComCallapse"
data-sort="false" data-page-size="5">
<thead>
<tr>
<th>
<input type="checkbox" onclick="toggle(this)" />
</span>

</th>
<th>Código</th>
<th>Sistema</th>
<th>Valor</th>
<th>Atualizado</th>
</tr>
</thead>
<tbody>
@{
int contador = 0;
foreach (IDadosDeMensagem item in Model.Mensagens)
{
contador++;
<tr>
<td>
<input type="checkbox" name="id" value="@item.Id">
</span>
</td>
<td>
<span data-toggle="collapse" data-parent="#accordion"
data-target="#collapse_@contador">
<a class="accordion-toggle">@item.Codigo</a>
</span>
</td>
<td>@item.Descricao</td>
<td>@item.Sistema</td>
<td>1</td>
<td>07/09/2014</td>
</tr>
<tr>
<td colspan="5">
<div id="collapse_@contador" class="panel-collapse collapse">
<span>Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a

bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS. </span>
</div>
</td>
</tr>
}
}
</tbody>
<tfoot>
<tr>
<td colspan="5">
<div class="pagination pagination-centered hide-if-no-
paging"></div>
<div class="box-panelFooter right push_1">
<button class="btn btn-default" type="submit"
name="Edit"><span class="glyphicon glyphicon-pencil"></span> Editar</button>
<button class="btn btn-default" type="submit"
name="Exclude"><span class="glyphicon glyphicon-remove"></span> Excluir</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
A figura abaixo ilustra o comportamento inicial do elemento.

Figura 20 - Sanfona Inicial

E a figura abaixo ilustra o resultado do clique em um elemento.
Figura 21 - Sanfona com Elemento Expandido

5.8 Elementos Desabilitados

Dependendo do perfil do usuário, um conjunto de funcionalidades pode ser ocultado ou desabilitado.
Quando o usuário não possui permissão para executar uma ação, o elemento que indica tal ação não
deve ser exibido, entretanto, se sua exibição for feita esta deve indicar que a ação não está disponível.
Para desabilitar um botão, basta definir o atributo disabled com o valor "disabled". O código abaixo
demonstra a diferença entre um botão normal e um botão desabilitado.
<!— Botão habilitado e desabilitado -->

<button class="btn btn-default" disabled="disabled" type="submit"name="Edit">
<span class="glyphicon glyphicon-pencil"></span> Editar
</button>
<button class="btn btn-default" type="submit" name="Exclude">
<span class="glyphicon glyphicon-remove"></span> Excluir
</button>
A figura abaixo ilustra a aparência do botão desabilitado e a diferença para o botão normal.
Figura 22 - Botão habilitado e desabilitado
5.9 Elementos Ocultos

Dependendo do perfil do usuário, um conjunto de funcionalidades pode ser ocultado. Quando o usuário
não possui permissão para executar uma ação, o elemento que indica tal ação deve ser exibido de forma
desabilitada (conforme apresentado no item anterior) ou ocultado. O método de ocultação é descrito
abaixo e é integrado com o sistema de Controle de Acesso a Sistemas de Furnas.
Para ocultar qualquer item basta utilizar a extensão VerificarAutorizacao detalhada abaixo:
public static bool VerificarAutorizacao(this HtmlHelper html, string perfil)
{
ProvedorDeAutenticacaoInterno provider =
(ProvedorDeAutenticacaoInterno)Membership.Provider;
Usuario usuario = provider.RetornaUsuario(Membership.GetUser().UserName,
"ZDP9");
if (usuario != null)
{
return usuario.TemPermissao(perfil);
}
else
{
return false;
}
}
O método é uma extensão que pode ser utilizada nas páginas. Para o correto funcionamento do mesmo
é importante incluir a sigla correspondente ao sistema presente no Sistema de Controle de Permissões

em Furnas. No exemplo acima é utilizado o “ZDP9” que corresponde ao sistema de Controle de

Mensagens.
Para utilizar a extensão basta incluir um comando IF na página envolvendo todo o conteúdo que pode
estar oculto dependendo do papel do usuário. Como condição do IF é utilizada o método da extensão
recebendo como o parâmetro o código do papel cadastrado no sistema de controle de permissões
(autorizações). No exemplo abaixo é utilizado o código “ADM” que representa um administrador.
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
@if (Html.VerificarAutorizacao("ADM"))
{
<a role="menuitem" href=@Url.Action("Listagem", "Mensagem")>Mensagens</a>
</li>
}
</ul>
Caso o usuário tenha o papel de administrador o conteúdo será apresentado, caso contrário o conteúdo
não será incluído no HTML renderizado na página.
6. Template Básica – Aparência

Em geral o tipo de fonte a ser utilizada deverá ser Verdana, Helvética ou Arial, no tamanho de
14px. e nas cores #ffffff, #555, #3e6372, #333, #1e4f8a e #23527c. Relativo ao tamanho dos elementos
é importante recordar o exposto na seção 3.1(layout fluido).
6.1 Topo
 Identificação do usuário:
Tamanho: 12 px;
Alinhamento à direita.
6.2 Login
 Identificação do usuário:
Label : Usuário
Texto: FR, FC ou FE seguido de matrícula sem dígito verificador;
Alinhamento à esquerda.
 Senha:
Label : Senha
Texto: o sistema deverá substituir os caracteres digitados por asterisco ou outro caractere que
não permita reconhecimento do texto.
Alinhamento à esquerda.

6.3 Data e hora atuais
 Data e hora atuais:

Tamanho: 12 px;
Alinhamento à direita.
Formato: Dia da semana, dia do mês e do ano, hh:mm:ss;
Ex: Quinta-feira, 4 de Março de 2010 09:14:27
6.4 Menu
 Menu de opções:
Tipo Drop down;
Tamanho: 14 px;
Cores: #ffffff com Cor de fundo #0072C6
6.5 Conteúdo
 BreadCrumb
Tamanho: 10px
Cores: #3e6372, #757f8c
 Formulário
Tamanho: 10px
Formulários:
 Filtros:
Tipo ComboBox;
Caso a operação seja de inclusão, o valor inicial deve ser “Selecione”.
Caso a operação seja de consulta, o valor inicial pode ser “Selecione” ou “Todos” a ser definido
no documento de Especificação Complementar.
Ordenação alfabética crescente para os demais valores;
Devem manter o valor selecionado após a apresentação da pesquisa.
Tipo textBox
Sem valor inicial.
Devem manter o valor selecionado após a apresentação da pesquisa.
6.6 Rodapé
 Mensagem do Rodapé:
Cor de fundo: transparente;

Cor da fonte: white;

Alinhamento do texto: centro;
Posição: relative;
Bottom: 0px;
Width: 100%
7. Objetos de uso geral
7.1 Cores de fontes

As cores de fonte a serem utilizadas são #ffffff, #555, #3e6372, #333, #1e4f8a e #23527c.
7.2 Ícones
Para facilitar a interação do usuário, ícones podem ser utilizados em algumas situações. Quando um
ícone for utilizado, o nome do elemento deve ser exibido caso o usuário passe com o mouse acima dele,
conforme ilustra a figura abaixo.
Figura 23 - Tooltip de ícones

Os ícones podem ser utilizados substituindo informações textuais, como a opção de Ajuda é exibida
acima, ou acrescida de informações conforme é ilustrado na opção Sair.
A tabela abaixo representa as regras para utilização de ícones.
Ação Símbolo Descrição Local
Início Link para tela de Início Menu de Opções
Ajuda Link para tela de Ajuda Menu de Opções
Sair Link para sair do sistema Menu de Opções
Pesquisar Botão de Pesquisa Área de Trabalho/Formulário de
Busca
Consultar Link para consulta de um Área de Trabalho/Grid de Resultados
registro para exibição de mais
informações
Editar Link para tela de Alteração de Área de Trabalho/Grid de Resultados
um registro

Excluir Link para tela de Exclusão de Área de Trabalho/Grid de Resultados

um registro
Primeira Link para primeira página de Área de Trabalho/Paginação de
Página registros Resultados
Página Link para página anterior de Área de Trabalho/Paginação de
Anterior registros Resultados
Próxima Link para próxima página de Área de Trabalho/Paginação de
Última Link para última página de Área de Trabalho/Paginação de
7.3 Tamanhos de fontes

Em geral o tamanho de fonte a ser adotado é 14 px, salvo informação específica para determinados
alguns tipos de texto, conforme lista a seguir.
7.4 Caixas de texto
7.4.1 Caixas de texto com conteúdo texto

 Alinhamento: à esquerda;
 Formatação para os campos que possuem máscara padrão (CEP, CPF, CNPJ, Data): O usuário
deverá digitar apenas os números. A máscara será inserida automaticamente pelo sistema;
7.4.1.1 Formatação de CPF

O formato esperado é de nove dígitos para o corpo do CPF e dois dígitos como verificadores do CPF.
Deverá seguir a formatação a seguir: XXX.XXX.XXX-XX. Aqui o caractere X está representando um valor
numérico.
7.4.1.2 Formatação de CNPJ

O número de inscrição no CNPJ é composto por 14 dígitos e deverá seguir a formatação a seguir:
XX.XXX.XXX/XXXX-XX. Aqui o caractere X está representando um valor numérico.

7.4.1.3 Formatação de Data

O formato esperado do elemento é: dois dígitos para o dia, dois dígitos para o mês e quatro dígitos para
o ano. Entre os valores que representam dia e mês deve-se incluir o caractere / assim como entre os
valores que representam mês e ano (dd/mm/aaaa). Somente caracteres numéricos são permitidos e
devem ser respeitados também os domínios para número de dias em um mês e meses de um ano e só
serão válidos os anos maiores que 1850. Sempre é apresentado em conjunto com um label que define a
data a ser informada e um botão que ao ser selecionado apresenta um calendário que possibilita a
escolha de uma data válida.
7.4.2 Caixas de texto com conteúdo de valor numérico

 Alinhamento: à direita;
 Separador decimal: vírgula;
 Separador de milhar: ponto;
 Número de casas decimais: duas, exceto quando especificação contrária;
 Não usar casas decimais para valores inteiros;
 Valor negativo: sinal negativo e em cor vermelha;
7.4.3 Caixas de texto com conteúdo do tipo data

 Alinhamento: à esquerda;
 Formatação: dd/mm/aaaa. O usuário deverá digitar apenas os números. A máscara será inserida
automaticamente pelo sistema.
7.5 Listas de Seleção

Aparece associada a um label que define a informação do objeto. Somente um dos valores pode ser
selecionado.
7.6 Listas de Seleção Múltipla

Para um elemento que possua um conjunto de valores pré-definidos e onde seja possível a seleção de
mais de um item.
A seleção é realizada através da escolha de elementos nas listas e do conjunto de botões apresentados
entre as listas. Os dois primeiros transferem os elementos selecionados de uma lista para outra
obedecendo à orientação dos botões. Os dois últimos transferem todos os elementos de uma lista para
a outra obedecendo também à orientação dos botões.
7.7 Listas de Seleção com dependência

É utilizado quando existem dependências entre elementos e normalmente os elementos estão
organizados de forma hierárquica. Esta dependência permite a filtragem de informações de um

elemento de mais alto nível da hierarquia para o elemento para o elemento do nível imediatamente
inferior.
7.8 Botões de Opção

Cada valor é apresentado descrito por um label e um botão para seleção daquele valor. O conjunto de
duplas label/botão é agrupado e contém um título em forma de label que define o significado do
conjunto de valores apresentados.
Os botões de opção podem permitir ou não a seleção múltipla de valores. O padrão inicial é nenhuma
opção marcada.
A figura abaixo ilustra um exemplo de botões de opções que permite seleções múltiplas (checkbox).
Figura 24 - Exemplo checkbox

A figura abaixo ilustra um exemplo de botões de opções sem permissões para seleções múltiplas (radio
button).
Figura 25 - Exemplo radio button
7.9 Datepicker (Jquery)

O datepicker está vinculado a um campo de entrada de dados de um formulário padrão. Selecione o
campo de entrada de dados (clique, ou use a tecla tab) para abrir um calendário interativo em uma
pequena janela. Escolha uma data, clique em outra parte da página (borrar a entrada), ou pressione a
tecla Esc para fechar. Se a data for escolhida, o feedback é mostrado como o valor da entrada.

Figura 26 – Exemplo de Datepicker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="<CaminhoParaOArquivo>/jquery-ui.css">
<script src="<CaminhoParaOArquivo>/jquery-1.10.2.js"></script>
<script src="<CaminhoParaOArquivo>/jquery-ui.js"></script>
<link rel="stylesheet" href="<CaminhoParaOArquivo>/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
7.10 Accordion (Jquery)

Clique nos cabeçalhos para expandir / recolher conteúdo que é dividido em seções lógicas, bem como
guias. Opcionalmente, mude seções abertas / fechadas em mouseover.
A marcação HTML subjacente é uma série de cabeçalhos (tags H3) e divs “conteudo” para que o
conteúdo seja utilizável sem JavaScript.

Figura 27 – Exemplo de Accordion
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - Default functionality</title>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p> Conteúdo 1 </p>
</div>
<h3>Section 2</h3>
<div>
</div>
<h3>Section 3</h3>
<div>
<p> Conteúdo 3</p>
</div>
<h3>Section 4</h3>
<div>


</div>
</div>
</body>
</html>
7.11 Abas (Jquery)
Figura 28 – Exemplo de Abas
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p> Conteúdo 1</p>
</div>
<div id="tabs-2">
<p> Conteúdo 1</p>

</div>
<div id="tabs-3">
<p> Conteúdo 1</p>
</div>
</div>
</body>
</html>
Referência: http://jqueryui.com/
7.12 Janela Modal (Jquery)
Figura 29 – Exemplo de Modal
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
modal: true,
buttons: {

OK: function() {$(this).dialog("close");}

},
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script></head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px
50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.
Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum,
enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor
elit eros a lectus.</p>
</body>
</html>
7.13 Tabela de Resultados Responsivo (FooTable)
Figura 30 – Exemplo de Tabela de Resultados Responsivo
Para utilizar as tabelas de apresentam informações de forma responsiva, basta seguir os passos
apresentados abaixo:
1. Incluir o CSS abaixo
<link href="<CaminhoParaOArquivo>/footable.core.css" rel="stylesheet"

type="text/css" />
2. Incluir o JQuery
<script src="<CaminhoParaOArquivo>/jquery.min.js"
type="text/javascript"></script>
3. Incluir o plugin da tabela para o JQuery

<script src="<CaminhoParaOArquivo>/footable.js"
type="text/javascript"></script>
4. Inicializar a tabela
<script type="text/javascript">
$(function () {
$('.footable').footable();
});
</script>
5. Utilizar os pontos de interrupção

FooTable trabalha o conceito de pontos de interrupção. Estes podem ser personalizados, e os padrões
de pontos de interrupção são:
breakpoints: {
phone: 480,
tablet: 1024
}
Para alterar os limites de faturamento é necessário usar a opção de breakpoints ao inicializar FooTable:
$('.footable').footable({
breakpoints: {
tiny: 100,
medium: 555,
big: 2048
}
});
Em seguida, é necessário especificar no FooTable quais colunas podem ser escondidas e em que pontos
de interrupção, especificando atributos data-hide nas colunas do Head da tabela:

Figura 31 – Exemplo de Colunas Escondidas

<table class="footable table">
<thead>
<tr>
<th>Name</th>
<th data-hide="phone">Job Title</th>
<th data-hide="phone,tablet">Status</th>
<th data-hide="all">Description</th>
</tr>
</thead>
</table>
Referência: http://fooplugins.com/footable-demos/
8. Mensagens
8.1 Confirmações
Mensagem apresentada quando se faz necessária uma confirmação, por parte do usuário, de alguma
ação a ser realizada pelo sistema. A ação de exclusão deve sempre apresentar uma mensagem de
confirmação. Outras situações devem ser definidas a cada caso. A mensagem deve apresentar duas
opções de ações possíveis: confirmação da ação e cancelamento da ação, utilizando as opções OK e
Cancelar respectivamente.
8.2 Não Conformidade

Mensagem apresentada quando se faz necessário notificar ao usuário de alguma não conformidade
ocorrida em uma ação realizada pelo sistema. Duas formas de mensagem podem ser apresentadas, com
validação local ou no servidor:

Validação local abrange obrigatoriedade, tipo e formatação dos atributos, deve-se utilizar o
mesmo padrão das mensagens de confirmação. Neste caso é apresentada uma única mensagem para a
primeira não conformidade encontrada.
Validação no servidor abrange além dos itens anteriores, as regras de negócio, deve-se utilizar a
área de mensagens da área de conteúdo da página. Neste caso são apresentadas mensagens para cada
uma das não conformidades encontradas, o texto das mensagens e os labels correspondentes são
apresentados na cor vermelha.
Aqui também são tratados os erros do sistema.
8.3 Avisos
Mensagem apresentada quando se faz necessário notificar ao usuário de alguma ação realizada pelo
sistema ou esclarecê-lo com alguma informação relevante ao uso do sistema. A figura abaixo ilustra um
exemplo de notificação.
Figura 32 - Aviso de Confirmação
A aparência do alerta é determinada pelo grau de severidade da informação a ser apresentada.

Cor Teor
alert- danger Mensagens de erro
alert-success Mensagens de sucesso de operação
alert- warning Mensagens de alerta

8.3.1 Avisos de Esclarecimento

Quando o texto contiver mais que 2 linhas de informações deve-se utilizar uma página de pop-up.
8.3.2 Avisos de Realização de Ações

Quando da confirmação de uma ação realizada, pode ser apresentada uma mensagem conforme o
padrão das mensagens de confirmação, porém somente com a opção OK. Também pode ser
apresentada a mensagem utilizando a área de mensagens da área de conteúdo da página.
Figura 33 - Aviso de Realização de Ações
8.4 Mensagens Genéricas

Com o objetivo de facilitar a experiência do usuário é importante definir um conjunto de mensagens que
podem ser reutilizadas em diferentes tipos de sistemas. A tabela abaixo lista as mensagens genéricas
que podem ser reutilizadas por diferentes sistemas.
Código Descritivo
MG0001 Inclusão realizada com sucesso.
MG0002 Alteração realizada com sucesso.
MG0003 Exclusão realizada com sucesso.
MG0004 Informe o(s) campo(s) obrigatório(s).
MG0005 Operação Cancelada.
MG0006 Formato inválido para [nome do campo].
MG0007 Selecione pelo menos um item.
MG0008 Confirma a exclusão?
MG0009 Nenhum registro foi encontrado para o critério de pesquisa.
MG0010 Problema de acesso ao Banco de Dados.
MG0011 Permissão de acesso negada.
MG0012 Matrícula ou senha inválida.
MG0013 Matrícula não encontrada.
MG0014 A matrícula deve ser numérica.
MG0015 O código deve ser numérico.
MG0016 As permissões de acesso foram atualizadas.
MG0017 Para a separação de casas decimais, use vírgula.
MG0018 Nome não encontrado.
MG0019 Local não encontrado.

MG0020 Local não foi selecionado.

MG0021 Não foi possível realizar a inclusão. [%] já existe no sistema.
MG0022 A fórmula de cálculo não foi especificada.
MG0023 Renovação realizada com sucesso.
8.5 Definição das Mensagens

Para facilitar a modificação das mensagens é utilizado um arquivo Mensagens.resx para definir cada
uma delas conforme o exemplo.
Name Value
MG0001 Inclusão realizada com sucesso.
MG0002 Alteração realizada com sucesso.
MG0003 Exclusão realizada com sucesso.
MG0004 Informe o(s) campo(s) obrigatório(s).
MG0005 Operação Cancelada.
MG0006 Formato inválido para [nome do campo].
Para que as mensagens sejam exibidas na tela deve ser chamado no inicio do código da página o método
da classe Extensões responsável por exibir as mensagens.
@Html.ExibirMensagensDeErro()
Também é necessário definir as mensagens que serão mostradas pelo nome especificado no arquivo
Mensagens.
<!— Exemplo de definição de mensagem de erro para um campo obrigatório -->
[Required(ErrorMessageResourceType=typeof(Mensagens),ErrorMessageResourceName="MensagensC
odigoObrigatorio")]
public string Codigo { get; set; }

Padrão de Interfaces

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Padrão de Interfaces

Enviado por

Direitos autorais:

Formatos disponíveis

Padrões de Interface para aplicações WEB

Padrões de Interface para aplicações WEB

Data Versão Descrição Autor

2. Regras de Ouro do desenvolvimento de interfaces Error! Bookmark not defined.

3. Orientações para desenvolvimento de Design Responsivo Error! Bookmark not defined.

4. Estrutura Básica Error! Bookmark not defined.

5. Template Básica – Formatação da Página Error! Bookmark not defined.

6. Template Básica – Aparência Error! Bookmark not defined.

6.1 Topo Error! Bookmark not defined.

7. Objetos de uso geral Error! Bookmark not defined.

8. Mensagens Error! Bookmark not defined.

1.3 Convenções do Documento

2. Regras de Ouro do desenvolvimento de interfaces

 Mantenha a consistência usando a mesma terminologia nos menus e telas

3. Orientações para desenvolvimento de Design Responsivo

3.1 Layout Fluido

Medida Escalável = Alvo/Contexto

4.1.3 Data e hora atuais

4.1.4 Menu de Opções

4.1.6 Área de Trabalho

Figura 1 - Tela de Login

4.3 Opção de Ajuda

Figura 3 – Opção de Ajuda no Menu de Opções

4.4 Páginas internas

4.4.1.1 Informações Cadastrais

 Caixa de Texto – Utilizada para informações alfanuméricas em geral;

Documento confidencial 10/ 51

4.4.1.2 Resultados de Consulta

 Na apresentação inicial da interface os dez primeiros itens são recuperados e apresentados na

Documento confidencial 11/ 51

4.4.2 Área de Trabalho

Figura 4 - Tela de Pesquisa com Default Todos

Documento confidencial 12/ 51

Figura 5 - Tela de Pesquisa com Default Selecione

Figura 6 - Tela de Inclusão

Documento confidencial 13/ 51

4.4.2.2 Formulário de alteração

Figura 7 - Tela de Alteração

Documento confidencial 14/ 51

4.4.2.3 Formulário de exclusão

Figura 8 - Tela de Exclusão

5. Template Básica – Formatação da Página

Documento confidencial 15/ 51

Figura 9 - Exemplo Topo

5.2 Data e hora atuais

Figura 10 - Exemplo Data e Hora Atuais

Documento confidencial 16/ 51

5.3 Menu de Opções

Figura 2 - Exemplo Menu de Opções

5.3.1 Interior do Menu de Opções

Documento confidencial 17/ 51

Documento confidencial 18/ 51

5.3.2 Menu de Navegação Responsivo (slicknav)

Figura 12 – Exemplo de Menu de Navegação Responsivo

Documento confidencial 19/ 51

Documento confidencial 20/ 51

close function (trigger) {} Chamado depois menu ou sub-menu fechado.

Figura 3 - Exemplo Breadcrumb

Documento confidencial 21/ 51

5.5 Área de Trabalho

Figura 14 – Projeto 12 Colunas Grid966

Documento confidencial 22/ 51

Explicação de Classes e Marcações