PROJETO FRAMEWORK - CELEPAR

KIT FT- 05 PADRES DE INTERFACE

Sumrio de Informaes do Documento

Tipo do Documento: Definio
Ttulo do Documento: Padro para Interface
Estado do Documento: EB (Elaborao)
Responsvel: Carlos Henrique Roland
Palavras-Chaves: interface, design
Resumo:
Nmero de pginas:
Software utilizados:
Verso
Data
1.0
17/01/05 Verso inicial
27/01/05 Reestruturao

Mudanas

Sumrio
1.Introduo....................................................................................................................................... 5
1.1.Interface.................................................................................................................................... 5
1.2.Modelo de Navegao...............................................................................................................5
2.Definies Tcnicas.........................................................................................................................9
2.1.Imagens..................................................................................................................................... 9
2.2.HTML..................................................................................................................................... 10
2.3.CSS......................................................................................................................................... 10
2.4.DOM....................................................................................................................................... 11
3.Estrutura....................................................................................................................................... 12
3.1.Login....................................................................................................................................... 12
3.2.Pginas Internas...................................................................................................................... 13
4.Detalhamento................................................................................................................................ 14
4.1.Dimenses da Tela..................................................................................................................14
4.2.Cabealho................................................................................................................................14
4.3.Login....................................................................................................................................... 14
4.4.Rodap.................................................................................................................................... 15
4.5.Menu....................................................................................................................................... 16
4.6.cones...................................................................................................................................... 17
a)Barra de cones......................................................................................................................18
4.7.Barra de Aes........................................................................................................................ 19
a)Localizao........................................................................................................................... 19
b)Aes.................................................................................................................................... 19
4.8.Ttulo.......................................................................................................................................20
a)Ttulo.....................................................................................................................................20
b)Subttulo................................................................................................................................20
4.9.Texto....................................................................................................................................... 21
4.10.Mensagens.............................................................................................................................21
a)Internas.................................................................................................................................. 21
b)Externas................................................................................................................................ 25
4.11.Abas...................................................................................................................................... 25
4.12.Indicaes............................................................................................................................. 26
4.13.Links..................................................................................................................................... 27
4.14.Formulrio............................................................................................................................ 27
3

a)Label......................................................................................................................................29
b)Textarea................................................................................................................................ 29
c)Textfield................................................................................................................................ 30
d)Combo e menulist................................................................................................................. 30
e)Radio e Check....................................................................................................................... 30
f)Botes.................................................................................................................................... 30
4.15.Listagem................................................................................................................................32
a)Lista.......................................................................................................................................32
b)Barra de paginao................................................................................................................33
4.16.Agrupamento de Informaes............................................................................................... 34
4.17.Popup.................................................................................................................................... 34
4.18.Ajuda.....................................................................................................................................34
a)Mais Informaes..................................................................................................................35
b)ndice Geral...........................................................................................................................35
c)Contedo............................................................................................................................... 36
d)Manual do Usurio................................................................................................................36
e)Contato.................................................................................................................................. 36
f)Pesquisar................................................................................................................................37
5.Construo.................................................................................................................................... 38
5.1.TILES......................................................................................................................................38
6.Performance.................................................................................................................................. 39
7.Modelo de Telas............................................................................................................................ 40
8.Internalizao................................................................................................................................40

1.Introduo
1.1.Interface
O objetivo desse documento fornecer as definies de interface, para a construo de
aplicativos WEB na Celepar. O objetivo no engessar a interface, mas sim criar uma
estrutura padro, de fcil construo e manuteno. Boa parte da interface ainda se manter
personalizvel para os clientes, mas os elementos das pginas sero os mesmos.
Sistemas web, so por definio, sistemas que podem ser acessados por qualquer pessoa
conectada internet, a qualquer hora e de qualquer lugar do mundo. Isso determina que os
sistemas devem ser fceis de usar, interativos e intuitivos. Qualquer projeto constitudo da
equao:
aplicativo = sistema + interface
O tipo de usurio a ser considerado de habilidade mdia. Um usurio que compreende
melhor as hierarquias e quer eficincia, mas no tm as dificuldades bsicas quanto ao uso
do computador.
Todos os dilogos devem ser SIMPLES e NATURAIS. Deve ser apresentada a informao
exata que o usurio precisa no momento. A seqncia de interao e o acesso aos objetos e
operaes devem ser compatveis com o modo pelo qual o usurio realiza as tarefas. A
terminologia utilizada deve ser baseada na LINGUAGEM DO USURIO e no orientada ao
sistema.

1.2.Modelo de Navegao
O Modelo de Navegao ser descrito atravs de um exemplo para facilitar sua
compreenso. O exemplo descreve um cadastro de Estabelecimento, com os dados do nome
do Estabelecimento e o seu Endereo.
O processo se inicia quando o usurio acessa a opo do menu ESTABELECIMENTO.
Neste momento a tela direcionada para a pgina de Estabelecimento, primeiramente com o
5

formulrio abaixo aberto.

ESTABELECIMENTO
nome:
buscar

incluir

Dentro desse formulrio o usurio pode executar todas as aes de cadastro do

Estabelecimento, garantindo maior agilidade a sua tarefa. Na parte superior abre um campo
de NOME aonde o usurio entrar com o nome do Estabelecimento. Feito isso ele solicitar
qual ao quer tomar: de fazer uma busca de quais Estabelecimentos esto registrados com
esse nome, ou fazer a incluso desse Estabelecimento, pelo nome digitado.
Se a opo for fazer a busca pelos Estabelecimentos registrados, aps entrar com o NOME e
clicar no boto BUSCAR, aparecer uma listagem abaixo deste campo de filtro mostrando
os registros que foram encontrados em formato de tabela. Esta tabela conter a opo
EXIBIR, aonde exibir os dados do registro selecionado, a opo NOME, com o nome do
estabelecimeto, a opo ALTERAR, que selecionada proporcionar a alterao do registro e
a opo de EXCLUIR, aonde o usurio poder remover o registro do Estabelecimento.

ESTABELECIMENTO
nome:
buscar

exibir nom
e
nome
nome
nome
nome

incluir

altera excluir
r

X
X
X
X

Ao clicar da opo de INCLUIR a pgina ser direcionada para uma tela aonde teremos o
ttulo INCLUIR ESTABELECIMENTO, que descreve claramente qual a ao solicitada. No
corpo do formulrio temos os campos de entrada de dados NOME e ENDEREO. E abaixo
os botes INCLUIR e CANCELAR.

INCLUIR ESTABELECIMENTO
nome:
endereo:
incluir

cancelar

Ao clicar da opo de EXIBIR a pgina ser direcionada para uma tela aonde teremos o
ttulo EXIBIR ESTABELECIMENTO ou DADOS DO ESTABELECIMENTO, que
descreve claramente qual a ao solicitada. No corpo do formulrio temos os campos texto
(no editveis) de dados NOME e ENDEREO. E abaixo o boto VOLTAR.

EXIBIR ESTABELECIMENTO
nome:

xxxxxxxxxxx

endereo: xxxxxx
voltar

Ao clicar da opo de ALTERAR a pgina ser direcionada para uma tela aonde teremos o
ttulo ALTERAR ESTABELECIMENTO, que descreve claramente qual a ao solicitada.
No corpo do formulrio temos os campos editveis de NOME e ENDEREO, j com dados
do estabelecimento . E abaixo os botes ALTERAR e CANCELAR.

ALTERAR ESTABELECIMENTO
nome:

xxxxxxxxxxx

endereo: xxxxxx
alterar

cancelar

Ao clicar da opo de EXCLUIR a pgina ser direcionada para uma tela de confirmao
aonde teremos o ttulo EXCLUIR ESTABELECIMENTO , que descreve claramente qual a
ao solicitada. No corpo do formulrio temos os campos texto (no editveis) de dados
NOME e ENDEREO. E abaixo o boto EXCLUIR e CANCELAR.

EXCLUIR ESTABELECIMENTO
nome:

xxxxxxxxxxx

endereo: xxxxxx
excluir

cancelar

As aes de ALTERAO e EXCLUSO, aps solicitadas retornam ao usurio uma

mensagem de confirmao da ao.

2.Definies Tcnicas
Deve-se utilizar os padres de conformidade da W3C, que um consrcio que define os padres da
internet, buscando desenvolver o potencial mximo da internet, atravs dos seus protocolos comuns
que promovam sua evoluo e garantam sua interoperabilidade.
O cabealho deve sempre conter:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
Que define que garante que a pgina estar em conformidade com os padres da W3C,
<title>JCA - Java Controle de Acesso</title> com o nome do sistema. e
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>
Que garante que o padro de caracteres utilizado o portugus, evitando problemas de acentuao.
Utilizaremos uma metodologia focada na utilizao de WEBSTANDARDS do HTML como guia,
DOM para construo de scripts e favorecendo o uso de CSS para formatao. Seguindo esse
padro o cdigo tende a ser semntico, ou seja, usa-se cada tag para sua apropriada misso.

2.1.Imagens
Em todas as imagens funcionais do contedo (cones, fotos, etc.) deve ser utilizado a
propriedade ALT com sua descrio.
<img src=imagem.png alt=descrio>
Os formatos de imagens utilizados devem ser JPG e PNG. Conforme recomendaes da
W3C.

Nomenclatura:

tipodeimagem_descricao.png
O tipodeimagem deve conter 4 letras
icon_descricao.png - para cone.
logo_descricao.png - para logotipos.
back_descricao.png - para backgrounds.

2.2.HTML
Adoo do padro HTML 4.0.1, especificado pelo W3C.

2.3.CSS
Todas as definies devem estar em uma folha de estilos (CSS), nunca usar formataes
dentro do cdigo.
Utilizar definies do CSS 2.
Deve ser utilizado no mnimo duas folhas de estilo independentes:

default.css - que ter todas as definies padres deste documento. Esse documento deve
ser alterado apenas em suas definies, no deve ser includo nenhuma classe, id ou tag.

<link rel=stylesheet type=text/css href=default.css>

screen.css que ter todas as definies de layout. Ficando livre a sua construo.

<link rel=stylesheet type=text/css href=screen.css>

print.css dever ser utilizado no caso de definies alternativas, especficas para

10

impresso.
<link rel=stylesheet type=text/css href=print.css media=print>

2.4.DOM
Utilizar o Modelo de Objeto de Documentos para todos os javascripts construidos

11

3.Estrutura
3.1.Login
A tela de login ser composta pelos campo USURIO e SENHA, com seus respectivos
labels. Um boto de ENTRAR e 3 opes (links): alterar senha, esqueci senha e ajuda.
Deve constar na pgina: a logo, ou nome do cliente; nome do sistema; a logo do governo
estadual; a logo do movimento software livre paran; a logo da celepar e as informaes
sobre browsers suportador e melhor resoluo.
Recomenda-se que a logo do software livre paran e da celepar estejam presentes no rodap
do sistema junto com a logo do governo estadual. A parte superior fica reservada para a logo
do cliente e do sistema.
O restante do layout fica livre para construo de acordo com as diretrizes do cliente.
Deve se utilizar o label USURIO e SENHA, evitando a utilizao de termos como:
LOGIN, USER, PASSWORD, etc.
A logo da Celepar, como assinatura de desenvolvimento, deve ter 80x18px (presente no
rodap). No caso da Celepar ser cliente o tamanho deve ser adequado ao layout do sistema.
A logo do Governo presente no rodap deve possuir as medidas de 50x38px. Quando a logo
da secretaria j engloba a logo do governo, a logo do governo fica dispensvel.
A logo do movimento software livre deve ter tamanho de 34x33px, sendo utilizada apenas a
imagem da gralha, sem o escrito. Esta sempre estar presente no rodap da tela de login.

12

3.2.Pginas Internas
Deve conter na parte superior um CABEALHO com layout derivado da tela de login,
contendo o nome/logo do sistema e a logo do cliente. Recomenda-se que internamente no
se repepita o rodap.
Abaixo do CABEALHO entra as opes do menu e na seqncia a barra de cones.
Na rea central da pgina est o CONTEDO, que est dividido em 4 reas, sendo que duas
delas so referentes a barra de AES, que se repete na parte superior e inferior, uma rea
referente ao TTULO da pgina e no box central a rea do formulrio.

13

4.Detalhamento
4.1.Dimenses da Tela
Define-se como dimenses padro de tela o formato 800x600, o que equivale a um tamanho
de tela til de aproximadamente 780 x 440px.
A largura da tela deve estar previsto para a largura acima, mas deve contemplar medidas em
porcentagem para se auto-ajustar as telas maiores (100%).
A altura no pode ultrapassar o equivalente a 3 reas de tela, o que corresponderia a
aproximadamente 1320px. Em telas que exigirem rolagem deve se apresentar o boto topo
ao final, que remeter ao cabealho da pgina.

Definies de estilo:

body { definies da pgina.}

4.2.Cabealho
Deve ser estreito, com altura de 27px e largura de 100% da tela, com layout derivado da tela
de login. Logo abaixo deve possuir a barra do menu e a barra de cones.

4.3.Login
obrigatrio o uso de USURIO e SENHA para o label dos campos. No caso especfico do
login ser feito por outro parmetro deve se utilizar o nome deste parmetro, por exemplo: EMAIL, CDIGO, etc.

14

Definies de estilo:

#login {bloco que contm os campos, boto e links.}

#login td { define o comportamento das clulas existentes dentro o bloco #login.}
.login_label {label dos campos da tela de login}
.login_funcoes {definies de texto da barra de links alterar senha, esqueci senha e
ajuda}
.login_funcoes a { links alterar senha, esqueci senha e ajuda. }
.login_funcoes a:hover {comportamento do mouse over nos links citados acima}
.login_botao {boto especfico do login}

4.4.Rodap
Deve ser apresentado somente na tela de login. Nele deve conter a logo do Governo
Estadual, a logo do projeto Software Livre Paran, a logo da Celepar e os detalhes quando a
melhor visualizao e navegadores suportados.

15

Definies de estilo:

#rodape { definies do bloco do rodap. }

#rodape table {definies da tabela interna do rodap.}
.text_rodape {Definies do texto do rodap}

4.5.Menu
O menu deve ter no mximo 3 nveis.
Utilizaremos o script Coolmenus4. Para sua configurao devemos editar os arquivos
config_menu.js e o default.css.

Definies de estilo:

config_menu.js
oCMenu.pxBetween=0 (espao entre os itens do primeiro nvel)
oCMenu.fromLeft=10 (distncia da lateral esquerda)
oCMenu.fromTop=27 (distncia do topo da pgina)
oCMenu.menuPlacement="left" (alinhamento do texto do menu)
oCMenu.offlineRoot="c:/projetos/framework" (diretrio do servidor)
oCMenu.onlineRoot="/framework/" (contexto do sistema)
16

oCMenu.level[0].width=110 (largura do menu)

oCMenu.level[0].height=17 (altura do menu)
oCMenu.level[0].regClass="clLevel0" (classe no default.css)
oCMenu.level[0].overClass="clLevel0over" (classe over no default.css)
oCMenu.level[0].borderClass="clLevel0border" (classe borda no default.css)
oCMenu.level[1].width=160 (largura do nvel)
oCMenu.level[1].height=20 (altura do nvel)
oCMenu.level[1].regClass="clLevel1" (classe no default.css)
oCMenu.level[1].overClass="clLevel1over" (classe over no default.css)
oCMenu.level[1].offsetX=oCMenu.level[1].width (posicionamento x em relao ao nvel
anterior).
oCMenu.level[1].offsetY=-22 (posicionamento y em relao ao nvel anterior).
oCMenu.level[1].borderClass="clLevel1border" (classe borda no default.css)
oCMenu.level[1].arrow="/images/icon_seta.png" (caminho da imagem da seta)
oCMenu.level[1].arrowWidth=7 (largura da seta)
oCMenu.level[1].arrowHeight=7 (altura da seta)
default.css
.clLevel0 {definies do primeiro nvel}
.clLevel0over {definies do mouse over}
.clLevel0border {definies da borda}
.clLevel1 {definies do segundo nvel}
.clLevel1over {definies do mouse over}
.clLevel1border {definies da borda}
.clLevel2 {definies do terceiro nvel}
.clLevel2over {definies do mouse over}
.clLevel2border {definies da borda}

17

4.6.cones
Defini-se como formato padro dos cones 16px de altura por 16px de largura, com fundo
transparente. Quando houver a necessidade de utilizar cones maiores utilizar o formato
24x24px ou 32x32px.
No deve-se utilizar um mesmo cone, ou uma mesmo conceito de imagem, para identificar
funes diferentes.

Funo

cone

Ajuda
Mais Informaes
Voltar
Fechar
Topo
Localizar
Sucesso
Erro
Aviso
Alterar
Excluir
Exibir

18

a)Barra de cones
Para garantir agilidade, nesta barra viro os atalhos de algumas funes do menu.
A barra de cones deve ter 28px de altura, por 100% da largura.

Definies de estilo:

#barra_icones {propriedades da barra de cones}

#barra_icones a {montagem do cones com seus links}
#barra_icones a:hover {comportamento no mouse over}

4.7.Barra de Aes
a)Localizao
Deve descrever o caminho que o usurio percorreu. Separar os caminhos por >. Fica
localizada dentro da barra de aes superior.

Definio de estilo:

#barra_localizacao {definies de fonte da barra}

19

b)Aes
Deve apresentar algumas aes de navegao alm do help do sistema. Deve ter 17px de
altura, por 100% da largura da pgina.

Quando for uma janela popup apresentar o cone fechar, quando for uma janela normal
apresentar o cone voltar.

Definies de estilo:
#barra_acao_top {propriedades da barra}
#barra_acao_top a,td {propriedades do link e das clulas}
#barra_acao_top a:hover {comportamento no mouse over}
#barra_acao_bottom {propriedades da barra}
#barra_acao_bottom a,td {propriedades do link e das clulas}
#barra_acao_bottom a:hover {comportamento no mouse over}

4.8.Ttulo
a)Ttulo
O ttulo deve descrever a funo da tela. Deve ser auto-explicativos, mas no genrico. Deve
conter de 2 a 6 palavras. Ex.: No utilizar apenas Estabelecimento para identificar uma
tela de incluso, usar Incluir Estabelecimento.
recomendado que um mesmo ttulo no se repita em telas diferentes.
Usar a tag <H1>.
20

Definies de estilo:
H1 {
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
text-align: center;
font-weight: bold;
}

b)Subttulo
Deve ser utilizado para separar os agrupamentos de informao internamente.
Usar as tags <H#> de acordo com a hierarquia, quanto maior o nmero menor sua posio
na hierarquia. <H2>, <H3>, <H4>, ....

Definies de estilo:
H2 {
font-family: Verdana, Helvetica, Arial;
font-size: 11px;
text-align: left;
font-weight: bold;
background-color: #000000;

21

4.9.Texto
Usar fonte tamanho 10px.

Definies de estilo:
.text_funcao
.text_normal {
font-family: Verdana, Helvetica, Arial;
font-size: 10px;
color: #000000; (definir a cor do texto de acordo com o layout)
}

4.10.Mensagens
A aplicao deve ter um tratamento para verificar onde est a origem da mensagem (falha,
sucesso, aviso), para no retornar uma mensagem genrica.
A qualidade da mensagem exibida ao usurio determinar o grau de compreenso do
problema e a rapidez de sua soluo.
a)Internas
Abaixo do TTULO fica reservado o espao para as mensagens internas.
Todas as mensagens acompanham um cone e cor de identificao de seu tipo.

Tipo

cone

Mensagem de Erro

22

Tipo

cone

Mensagem de Sucesso
Mensagem de Aviso

Definies de Estilo:
#msg {
background-color:#EEEEEE; (editvel de acordo com o layout)
border: 1px solid #CCCCCC; (editvel de acordo com o layout)
padding: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00004C; (editvel de acordo com o layout)
text-align:center;
margin-top:8px;
}

Erro

No deve intimidar o usurio, deve ajudar a esclarecer o problema.

Quando o erro no possibilita ao usurio sua correo, deve existir um cdigo e uma
informao de contato para o usurio buscar auxlio. Ex.: Ocorreu um erro inesperado.
Contate nossa Central de Atendimento pelo telefone 41 350-5007 ou e-mail
central@celepar.pr.gov.br, e informe o cdigo XXXXXXX.
Usar fonte vermelha.

23

Definio de estilo:
.msg_erro {
color:#CC0000;
}

Sucesso

Identifica o sucesso da operao. Ex.: O usurio Carlos foi includo com sucesso.
Utilizar fonte verde.

Definio de estilo:
.msg_sucesso {
color:#006600;
}

Aviso

Utilizar para mensagens de aviso.

Utilizar fonte preta.

Definio de estilo:
.msg_aviso {
color:#000000;

24

Exemplos de mensagens:

O campo Usurio de preenchimento obrigatrio.

obrigatrio o preenchimento de um dos campos.

Deseja realmente excluir o usurio nome?

O campo peso deve possuir valores entre 10 e 20 kg.

Incluso no permitida. O valor excedeu ao mximo de organizaes que podem

ser cadastradas (9 organizaes).

Data de nascimento no pode ser maior que a data atual.

Ocorreu um erro inesperado. Contate nossa Central de Atendimento pelo telefone

41 350-5007 ou e-mail central@celepar.pr.gov.br, e informe o cdigo
XXXXXXX.

Confirma a alterao do nome do usurio?

Usurio Amanda includo com sucesso!

b)Externas

Alerta e Confirmao

As mensagens de alerta devem utilizar o alert(). Ex.: O campo nome de preenchimento

25

obrigatrio. Neste caso deve retornar o foco para o campo menscionado.

Telas de confirmao devem existir sempre que ao for danosa a aplicao, por exemplo
EXCLUSO e ALTERAO.

Mensagem do Servidor

Este tipo de erro deve ser tratado para evitar o aparecimento. Quando ocorrer deve retornar
mensagem genrica Ocorreu um erro inesperado. Contate nossa Central de Atendimento
pelo telefone 41 350-5007 ou e-mail central@celepar.pr.gov.br, e informe o cdigo
XXXXXXX. ou Ocorreu um erro inesperado. Tente novamente mais tarde.

4.11.Abas
obrigatrio o uso de abas em formulrios muito extensos. As abas funcionam como um
identificador de ETAPAS do preenchimento, subdividindo o formulrio.
Foi contemplado trs estados da aba: ativa selecionada, ativa mas no selecionada e inativa
(existe visualmente mas no pode ser selecionada).

A aba ativa selecionada se obtm atravs da classe .aba_selecionada;

<td class="aba_selecionada">Fornecedor</td>

A aba ativa mas no selecionada o estado natural da aba com link no texto;
<td><a href="url">Identificao</a></td>

A aba totalmente inativa a aba em seu estado natural com apenas texto, sem link
<td>Clientes</td>

Usar cores contrastantes para identificar qual aba est ativa.

26

Definies de estilo:
.abas td { (Definies da aba que no est selecionada)
padding:5px;
border-left:1px solid #CCCCCC;
text-align:center;
}
.abas a { (Definies para o link das aba)
color:#00004C;
}
.aba_selecionada { (Definies para a aba selecionada)
text-align:center;
color:#00004C;
background-color:#FFFFFF;
font-weight: bold;
}

4.12.Indicaes
Deve estar presente tanto no cabealho quanto no rodap do formulrio.
Usar sempre (*) Campos de preenchimento obrigatrio.

Definies de estilo:

27

Usar .obs_descricao para definir a classe.

.obs_obrigatorio {
color:#999999;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
text-align:left;
margin:0px;
}

4.13.Links
Sempre deve estar sublinhado. Deve usar diferenciao entre visitado, hover, etc.

Definies de estilo:
a { (link normal)
color: #00004C;
}
a:hover { (estado do link quando o mouse passar por cima)
color: #99CC00;
}
a:visited { (estado do link quando este j foi visitado)
color: #4A6227;
}

4.14.Formulrio
O foco deve estar sempre no primeiro campo do formulrio.
<body onload=document.forms[0].nome_elemento.focus()>
A rea do formulrio deve estar sempre bem delimitada pelo bloco de contedo

28

#conteudo_corpo.

A distribuio do contedo do formulrio deve valorizar a distribuio horizontal sempre

que possvel, tendo como base a ordem de navegao do usurio. A distncia entre campos
deve ser de 15px. Um label existente na segunda coluna nunca pode tocar o campo da
primeira coluna.

Todas as definies de estilo referentes ao formulrio devem ser precedidas de

.form_descrio, com exceo do contedo corpo, que servir como definio de rea para
qualquer contedo.

Definies de estilo:
#conteudo_corpo {
background-color:#FFFFFF;
border: 1px solid #CCCCCC;
padding: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00004C;
text-align:left;
margin-top:8px;
line-height:150%;
}
.form_tabela { (tabela de diagramao dos campos)
}
29

.form_tabela td { (clulas da tabela de diagramao)

color:#00004C;
}
form { (tag form em alguns browsers gera um espao intil que pode ser removido
com essa definio)
margin: 0px;
padding: 0px;
}
a)Label
Deve ser curto e ocupar apenas uma linha.

Em campos que forem de preenchimento obrigatrio deve apresentar em seu lado esquerdo o
sinal de *

Definies de estilo:
.form_label {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #003366;
vertical-align: top;
padding: 3px;
}

b)Textarea
Nunca utilizar borda, pois no funciona em todos os browsers e essa propriedade varia de
30

acordo com o sistema operacional.

Definies de estilo:
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

c)Textfield

Definies de estilo:
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

d)Combo e menulist

Definies de estilo:
select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

e)Radio e Check
Apresentar o label do lado direito do input.
Utilizam as mesmas definies de estilo do textfield.

31

f) Botes
O texto do boto depende diretamente com o ttulo da pgina. Deve-se utilizar apenas o
verbo da ao. Ex.: Incluir, Alterar, Excluir, Exibir, Pesquisar, Cancelar, Voltar, ...
Em casos especficos trabalhar com mais uma palavra para auxiliar na descrio. Ex.: Uma
tela de incluso, mas que no formulrio precisa de mais um boto que pesquise os usurios,
ento utilizar Pesquisar Usurios.
As sadas devem estar claramente marcadas. Dentro do formulrio qualquer ao de
retorno/desistncia/cancelamento da ao utilizar o boto CANCELAR.
Utilizar sempre a tag <input type=button class=botao> para construir o boto. A
classe botao que guardar as definies de estilo.

Definies de estilo:
.form_botao {
background-color:#D4D0C8;
border-top:1px solid #F0EFEC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #F0EFEC;
color:#00004C;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding-top:2px;
padding-right:4px;
padding-bottom:2px;
padding-left:4px;
margin-left:1px;
margin-right:1px;
margin-top:2px;
}
32

4.15.Listagem
a)Lista
Deve possuir um cabealho com cor diferenciada.

Nas linhas obrigatrio apresentar ao lado esquerdo o cone de exibir e do lado direito os
cones de alterar e excluir (nesta ordem).
Deve possuir alternao de cores nas linhas para facilitar a leitura.

Definio de estilo:

#list_tabela { (Definies para a tabela da listagem)

margin-top:5px;
margin-bottom:5px;
border-top:1px solid #5F6E86;
border-right:1px solid #5F6E86;
}
#list_tabela th { (cabealho da tabela)
background-color: #9AA6B8;
border-bottom:1px solid #5F6E86;
border-left:1px solid #5F6E86;
}
33

#list_tabela td { (clulas da tabela)

padding:3px;
border-bottom:1px solid #5F6E86;
border-left:1px solid #5F6E86;
color:#00004C;
}
.list_cor_sim { (linhas inpares da tabela)
background-color: #FFFFFF;
}
.list_cor_hover { (situao de hover da linha)
background-color:#D6DAE2;
}
.list_cor_nao { (linhas pares da tabela)
background-color: #ECEEF2;
}
b)Barra de paginao
Deve apresentar qual registro est e o total de registros encontrados. Do lado direito deve
apresentar os links para navegao ( primeiro | anterior | prximo | ltimo ).
obrigatria sua presena no cabealho da listagem e no rodap.

Definio de estilo:

#barra_paginacao {
color:#00004C;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:100%;
}
34

#barra_paginacao td {
color:#00004C;
}
#barra_paginacao a {
color:#00004C;
}
#barra_paginacao a:hover {
color: #99CC00;
}

4.16.Agrupamento de Informaes
Para fazer o ideal agrupamento das informaes deve se utilizar primeiramente a marcao
para identificao do formulrio (exemplo), depois o subttulo para identificao do grupo e
para fazer uma subdiviso no grupo, deve utilizar o <HR> (linha).

Definies de estilo:
#conteudo_corpo { (Definies do bloco de informaes) }
h2 { (Definies do subttulo) }
hr { (linha para separao)
border-top:1px dashed #CCCCCC;
border-right:none;
border-bottom:none;
35

border-left:none;
height:1px;
margin:3px 0px 3px 0px;
}

36

4.17.Popup
Deve ter a Barra de Aes no topo e no rodap. O contedo interno deve estar diagramado
como nos formulrios.

4.18.Ajuda
Sempre deve existir a ajuda do sistema.
Deve haver um ndice que remeta aos contedos alm de fornecer formas de contato com a
Central de Atendimento.
Ao entrar no cone de ajuda (ajuda?) aberta uma nova janela (popup) com abas fazendo a
subdiviso da ajuda, de acordo com o contedo disponvel. obrigatria a presena de no
mnimo dois tipos: ndice Geral e Mais Informaes, conforme descrito abaixo.

37

a)Mais Informaes
Em campos que necessitam um maior esclarecimento deve ser apresentado ao seu dado o
cone (i). Quando o mouse passa por cima deste cone apresentado um quadro com as
informaes.

Definies:
Nesta ajuda utilizado um javascript chamado maisinfo.js.
<body>
<script language="javascript" src="../js/maisinfo.js"></script>
Na pgina deve ser chamado da seguinte forma:
<img src="../images/icon_info.png" onMouseOver="maisinfo('descrio da
informao');" onMouseOut="menosinfo();">

b)ndice Geral
Deve ser apresentado como referncia aos contedos. Utiliza um menu em formato de rvore
de diretrios. dtree.js

38

Definies:

<script type="text/javascript" src="../js/dtree.js"></script>

<script type="text/javascript">
<!-submenu0 = new dTree('submenu0');
submenu0.add(0,-1,'');
submenu0.add(1,0,'Recurso',''); */ primeiro tem pai*/
submenu0.add(2,1,'Fonte de Recurso','/apg2/tabelas/fonteRecurso/frm_inc.jsp'); */
filho,pai,texto e link. */
document.write(submenu0);
-->
</script>
c)Contedo
Descrio da ao com informaes necessrias ao usurio.

d)Manual do Usurio
Em sistemas que for produzido o Manual do Usurio para treinamento, recomendado
disponibilizar o PDF do documento, para download, nessa rea.

e)Contato
Informaes de contato com a Central de Atendimento.
39

Fone: 41 350-5007
E-mail: central@celepar.pr.gov.br
Horrio de Atendimento:

f) Pesquisar
Fornecer uma pesquisa de palavras chaves aos contedos existentes.

40

5.Construo
5.1.TILES
Os Tiles do Struts contemplam uma melhor soluo de construo de templates e layouts,
proporcionando reutilizao e uma melhor organizao.

41

6.Performance
Recomenda-se que a pgina no ultrapasse 50Kb de tamanho (contando css, imagens e o
cdigo). O tempo tolervel de download de uma pgina de 10 segundos.
Itens meramente estticos, no FUNCIONAIS interface, devem ser reduzidos ao mximo.
Isto garante um tamanho menor ao arquivo e um menor rudo no dilogo da pgina.
Problemas de performance devem ser analisados da seguinte forma:

Quais so os sintomas do problema?

Que componentes do sistema afetam o problema?

O problema afeta todos os usurios ou somente os usurios de determinada aplicao?

O problema intermitente ou constante?

Com que freqncia esta operao executada?

Qual o tempo de resposta requerido?

A partir desses dados fica mais fcil de identificar o problema e propor uma aoluo.
O problema mais comum de performance ocorre devido ao excesso de registros exibidos na
tela, tanto em combos quanto em listagens. Em ambos os casos deve existir um filtro
anterior (campo), que far com que o nmero de ocorrncias seja reduzido. No caso das
listagens deve-se aplicar a paginao das ocorrncias encontradas.

42

7.Modelo de Telas
Ver documento anexo.

8.Internalizao
Look and Feel design guidelines, construdo para cada projeto, seguindo as linhas desse documento.
Como um manual dos estilos utilizados.

43