Guia Front End

GUIA FRONT-END
Guia rpido de boas prticas para o

desenvolvimento front-end de web sites.
Em desenvolvimento: 2011
Por: Bruno Jos Dos Santos

Designer de Interao
Blog: brunojose.com.br
Esta obra foi licenciada com uma Licena Creative Commons - Atribuio - Partilha nos
Mesmos Termos 3.0 No Adaptada
http://creativecommons.org/licenses/by-sa/3.0/br/
Voc tem a liberdade de:
Compartilhar copiar, distribuir e transmitir a obra.
Remixar criar obras derivadas.
Sob as seguintes condies:
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante
(mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da
obra).
Compartilhamento pela mesma licena Se voc alterar, transformar ou criar em cima
desta obra, voc poder distribuir a obra resultante apenas sob a mesma licena, ou sob
uma licena similar presente.
Ficando claro que:
Renncia Qualquer das condies acima pode ser renunciada se voc obtiver permisso
do titular dos direitos autorais.
Domnio Pblico Onde a obra ou qualquer de seus elementos estiver em domnio
pblico sob o direito aplicvel, esta condio no , de maneira alguma, afetada pela licena.
Outros Direitos Os seguintes direitos no so, de maneira alguma, afetados pela licena:
Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis;
Os direitos morais do autor;
Direitos que outras pessoas podem ter sobre a obra ou sobre a utilizao da obra, tais
como direitos de imagem ou privacidade.
Aviso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os
termos da licena a que se encontra submetida esta obra.
ndice
Introduo
1- Estruturao bsica
2- CSS
3- Listas e tabelas
4- Acessibilidade
5- Usabilidade
6- Redao
7- Design
1 INTRODUO
O guia de boas praticas para o desenvolvimento front-end de websites contm
instrues a serem seguidos na hora do desenvolvimento. Essas instrues so
um conjunto de dicas e diretrizes que analisei ao longo da minha carreira.Os
documentos que analisei para a construo deste, encontram-se disponveis
nas ltimas pginas deste guia.
Este guia orienta o desenvolvedor para que, desde o incio do
desenvolvimento, j exista a preocupao com a Estruturao do site em
XHTML, CSS, listas e tabelas, acessibilidade, usabilidade e o design, assim
evitando retrabalho e facilitando o teste de usurios e especialistas.
Estruturao bsica
1- Declare o doctype correto da pgina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2- Declare o Idioma utilizado:

Em XHTML <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" >
Como meta etiqueta <meta http-equiv="Content-Language" content="pt-br"
/>
3- Identifique os 3 principais elementos de uma interface:

HTML 4
<body>
<div id=header>contedo topo</div>
<div id=content>contedo corpo</div>
<div id=footer>contedo rodap</div>
</body>
HTML5
<body>
<header>contedo topo</header>
<div id=content>contedo corpo</div>
<footer>contedo rodap<footer>
</body>
4- Use caixa baixa e aspas em todos os valores:

errado: <A HREF="index.html" CLASS=interno>
certo: <a href="index.html" class="interno">
5- Todos elementos devem ser fechados, incluindo os elementos que em

XHTML possuem tag de fechamento:
errado: <img src=ilustracao.gif alt= >
certo: <img src= ilustracao.gif alt= />
6- Nenhum atributo pode ser abreviado:

Em HTML alguns atributos podem ser minimizados, mas em XHTML isso no
permitido.
errado: <input type="checkbox" id="checkbox1" name="checkbox1"
checked>
certo: <input type="checkbox" id="checkbox1" name="checkbox1"
checked="checked" />
7- Declare a localizao e o pais da pgina:

<meta name="target_country" content="br" />
<meta name="country" content="Brazil" />
8- Descreva a codificao de caracteres da pgina:

o conjunto de caracteres mais adequados para documentos XML e HTML 4.0
Unicode (utf-8).
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
9- Palavras-chave Meta TAG:

<meta name="keywords" content="Palavras-chave">
Nmero mximo de caracteres: 1 000
Compatibilidade: Todos os motores
Separe cada palavra ou grupo de palavras com uma vrgula. Voc tambm
deve saber que apenas os primeiros 200 a 300 sero realmente teis.
10- Descrio Meta TAG:
Sintaxe: <meta name="Descrio" content="Descrio do site e/ou da
pgina...">
Nmero mximo de caracteres: 200
Compatibilidade: Todos os motores, porm evite os acentos (em certos
motores eles no so levados em conta).
11- Categoria Meta TAG:

Sintaxe: <meta name="category" content="nome">
Nmero mximo de caracteres: nenhum
Compatibilidade: Alguns motores
Exemplo <meta name="category" content="internet">
12- Autor Meta TAG:

Sintaxe: <meta name="author" lang="pt" content="Nome Sobrenome">
Voc pode, se quiser, colocar vrios autores (separados por uma vrgula)
13- Endereo da pgina Meta TAG:

Sintaxe: <meta name="identificar-url" content="URL da pgina">
14- Endereo de e-mail Meta TAG:

Sintaxe: <meta name="reply-to" content="seu@email">
Compatibilidade: Todos os motores - Cuidado com o spam!
15- A estrutura das pginas est uniforme?

A div contedo encontrase antes da div menu?
o contedo seja lido antes que o menu. Visualmente menu e contedo
continuam na mesma disposio, mas para usurios de leitores de tela, a
ordem de leitura passa a ser: contedo e depois menu.
16- Restries para os motores de busca:

Sintaxe: <meta name="robots" content="....."> As linhas pontilhadas so para
serem substitudas por "index" ou "noindex" (para permitir ou no a indexao

das pginas) e "follow" ou "nofollow" (para permitir ou no de seguir os links
das pginas). O par "index, follow" pode ser substitudo por "all" mas, de
qualquer maneira, intil, porque os robs usam isso por padro, e o par
"noindex, nofollow" pode ser substitudo por "none".
Exclua todos os diretrios protegidos ou "sensveis" por um arquivo .htacess.
17- Evite a utilizao de tabelas para layouts:

A implementao atual de folhas nos navegadores torna desnecessria a
utilizao de tabelas para diagramao. O uso de HTML para estruturar a
pgina e CSS para formatar a apresentao visual, beneficia a acessibilidade da
pgina, inclusive ao carregar em dispositivos mveis, alm de diminuir
consideravelmente o tamanho do cdigo.
18- Utilize preferencialmente unidades de tamanho relativas:

Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas
para mdias digitais, dando preferncia pelo uso de tamanhos relativos tipo em
e %. Para o tamanho padro de texto utilize 1em ou 100%, use tamanhos
menores apenas para informaes de copyright ou semelhante.
19- O contedo e o propsito de um cookie deve ser sempre informado ao

usurio:
O motivo da instalao de um cookie deve ser sempre avisado ao usurio. O
usurio deve ter a opo de recusar um cookie se achar conveniente.
20- O usurio pode recusar o uso de um cookie sem afetar a usabilidade
central do contedo:
A recusa da instalao de um cookie no deve afetar o objetivo central do
stio. O cookie no deve ser utilizado como prerrogativa para acesso a pgina
principal do stio ou tarefas banais, como uma escolha de seo.
21- Nenhuma instalao deve ser necessria para acessar a pgina inicial ou
executar tarefas banais:
A exemplo dos cookies, nenhuma instalao de plugin deve ser necessria
para acessar a pgina inicial ou executar qualquer tarefa rotineira ou banal (ex:
enviar um formulrio de contato) do site.
22- Na navegao por teclado o usurio remetido primeiramente ao

contedo da interface?
No XHTML a seo contedo deve vir antes do menu e depois posicionados
por CSS.
23- No utilize scripts que no ofeream um benefcio relevante ao

contedo:
O uso de scripts deve ser evitado se no tiver uma funo relevante ao
funcionamento da pgina: textos animados, janelas pop-ups, efeitos especiais,
etc, devem ser evitados.
Acessibilidade
1- O Ttulo <title></title> deve ser relevante e presente em todas as pginas:
importante que o ttulo esteja de acordo com o contedo.
O ttulo define o rtulo padro dos favoritos e a chamada na listagem dos
motores de busca, ela deve ser um super resumo do contedo, o usurio
devera entender o que ira encontrar na pgina pelo titulo, ela a frase
principal da pgina.
2- A TAG <title></title> nos ttulos:

Quando for usado o atributo title nos ttulos, usar no title o mesmo contedo
que no ttulo, seguido de informaes adicionais, caso desejar. Isso porque
quando h um title no elemento alguns leitores de tela do preferncia ao title
e no leem o contedo.
Ex:
<h1>
<a href="http://portal.mec.gov.br" title= Educao Ministrio da Educao
Clique para acessar o site>
Educao Ministrio da Educao
</a>
3- Evite expresses redundantes:

Ex: bem-vindo ao stio do clube xxx ou site do club xxx, pgina,
homepage, entre outros;
No utilize qualquer tipo de slogan no incio do ttulo, Utilize, de preferncia, o
assunto da pgina seguido pelo nome do rgo separado por hfen.
Ex: <title>Contato - Ministrio do Planejamento Oramento e Gesto, se for o
caso colocar ramo de atuao, cidade, estado e pais </title>
4- No polua o ttulo com palavras-chaves:

A insero de palavras-chaves antes ou aps o ttulo principal da pgina pode
confundir os usurios que utilizam leitores de tela.
Alguns buscadores apenas mostraro os primeiros 50 60 caracteres do ttulo,

enquanto outros mostraro o ttulo completo. Escreve um ttulo com no
mximo 60 caracteres;
5- A logomarca deve ser clicvel:

Ao clicar no logotipo para retornar pgina inicial o usurio ser
redirecionado para a pagina inicial do site. Independente do logo ser uma
imagem ou um background dentro de uma outra tag, deve-se colocar um link
para a pgina inicial do site.
6- Abreviar cabealho com a tag abbr:

Colocar o atributo abbr para abreviar um cabealho longo de modo que ele
no seja lido por inteiro toda vez que o leitor de tela passar por ele;
Em alguns casos os desenvolvedores utilizam colunas vazias em cabealhos ou
dados para obter um espaamento entre as colunas de uma tabela. O leitor de
telas Jaws, por exemplo, l "blank" toda vez que encontra uma clula vazia e
isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados. Nesse
caso CSS deve ser usado no lugar de clulas vazias para controlar a
apresentao de uma tabela de dados.
7- Utilize a tag accesskey:

Faa atalhos via teclado DOS LINKS PRINCIPAIS?
Ex: <a accesskey="6" href="contato.html">Eu chego aqui teclando tecla de
comando do navegador + 6</a>
o Alt+1 para menu
o Alt+2 para contedo
o Alt+3 pgina inicial
o Alt+4 Pesquisar
8- Utilizando ancoras sempre com ID (saltos):

<a href="#conteudo class="irconteudo" id=irconteudo > Ir para
contedo</a>
ma ncora para comando abaixo que est localizado no incio da rea de
contedo da pgina.
<a href="#irconteudo accesskey="1" name="irconteudo">

<img class="imagemsemborda" alt="incio da rea de contedo"
src="/lupadigital/templates/lupadigital/images/nulo.gif"/>
9- Fornea alternativa em texto para vdeo e udio:

Para garantir a acessibilidade deve haver descries (legendas) dos arquivos de
udio e vdeo.
Fornea uma verso descrita de um vdeo quando a descrio necessria
para usurios sem viso entenderem o contedo (o udio descrito pode ser
distribudo com o contedo do vdeo ou como um arquivo de udio apenas).
10- Play, udio e vdeo:

Certifique-se que todos os vdeos, caso no iniciem automaticamente, tenham
um controle de incio acessvel.
11-Descrio textual [d]:

Um recurso utilizado colocar, aps a imagem, um link com a letra "d",
conhecido como "d-link", o qual far referncia a uma pgina html com a
descrio textual da imagem. Como outros links, este receber o foco aps o
usurio pressionar a tecla TAB na imagem.
Ex:
<a href="/descricaodologotipo.htm">
<img class="imagemsemborda"
src="//lupadigital/images/stories/logoacess.gif"
alt="Logotipo de acessibilidade" name="logoacessibilidade" />
</a>
<a href="/descricaodologotipo.htm" title="Descrio textual do logotipo de
acessibilidade">
[d]
</a>
12- Descrio textual long desc para imagens:

Fornecer um texto equivalente para cada elemento no-texto .Isso abrange:
imagens, representaes grficas de texto (incluindo smbolos), regies de
mapa de imagem, animaes (por exemplo, GIFs animados), applets e objetos
programados, arte ASCII, frames, scripts, imagens utilizadas como pontos de

enumerao, espaadores, botes grficos, sons (reproduzidos com ou sem
interaco do utilizador), stand-alone arquivos de udio, faixas de udio de
vdeo, e vdeo.
Quando um equivalente de texto curto no suficiente para transmitir
adequadamente a funo ou o papel de uma imagem, fornecer informaes
adicionais em um arquivo designado pelo atributo "longdesc":
Ex:
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">
In sales97.html:
Um grfico que mostra como as vendas, em 1997, progrediu. O Grfico
um grfico de barras mostrando aumentos percentuais nas vendas
por ms. Vendas em janeiro subiram 10% desde Dezembro de 1996,
as vendas em fevereiro caiu 3%, ..
Para os agentes que no suportam "longdesc", fornecer um link descritivo,
bem ao lado do grfico:
Ex:
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html">
<A href="sales.html" title="Description of 1997 sales figures">[D]</A>
Ao usar OBJECT, especifique mais texto equivalente no contedo do elemento:
Ex:
<OBJECT data="97sales.gif" type="image/gif">
Sales in 1997 were down subsequent to our
<A href="anticipated.html">anticipated
purchase</A> ...
</ OBJECT>
Note que o contedo objeto, ao contrrio de "alt" de texto, pode incluir
marcao. Assim, desenvolvedores de contedo pode fornecer um link para
informaes adicionais a partir de dentro do elemento OBJECT:
Ex:
<OBJECT data="97sales.gif" type="image/gif">
Chart of our Sales in 1997.
A <A href="desc.html">textual description</A> is available.
</ OBJECT>
13- Identifique mudanas na linguagem:

Ex:
<P> E com uma certa <SPAN lang="fr"> je ne sais quoi </ SPAN>,
ela entrou tanto o quarto, e sua vida, para sempre. Meu nome <Q>
Natasha, </ Q>, disse. <Q Lang="it"> Piacere, </ Q>
ele respondeu em italiano impecvel, trancando a porta.
Ex:
<P>
<ABBR Title="World Wide Web"> WWW </ ABBR>
<ABBR lang = "fr"
title = "Socit Nationale des Chemins de Fer">
SNCF
</ ABBR>
<ABBR Lang="es" title="Doa"> Doa </ ABBR>
<ABBR Title="Abbreviation"> abbr. </ ABBR>
14- nfase as frases:

Use as tags para marcar nfase: EM e STRONG as mudanas de inflexo de voz,
etc)
15- Siglas e abreviaturas:

Marcar abreviaturas e siglas com ABBR e ACRONYM e use " ttulo "para indicar
a expanso:
<P> Bem-vindo ao title="World <acronym Ampla Web"> WWW </ acronym>!
<ABBR Title="Social Segurana Number"> SS # </ ABBR>
16- Citaes:
Ex:
<BLOCKQUOTE Cite="http://www.mycom.com/tolkien/twotowers.html">
<p> Eles foram em fila nica, correndo como ces em um perfume forte,
e uma luz ansiosa estava em seus olhos. Quase oeste da ampla
faixa de marcha Orcs tramped seu slot feio; a grama doce
de Rohan tinha sido ferido e enegrecida enquanto passavam. </ p>
</ Blockquote>
17- Texto pr-formatado: A PRE elemento:

Ex:
<PRE>
Ainda mais elevado e maior

Da terra tu springest
Como uma nuvem de fogo;
O wingest tu azul profundo,
E cantando ainda dost soar, e subindo cada vez singest.
</ PRE>
18- Desgin de URLs amigveis e funcionais:

As URLs devem funcionar sem o "www"
Ex:
Certo: http://www.portal.gov.br/contato
Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18
19- Hyperlinks e seu contexto:

Evita o uso de "Clique aqui" ao escrever texto para hiperlinks . Sempre que
possvel escreva cabealhos descritivos e textos de links que podem ser
compreendidos fora do contexto
Ex:
Errado: Para obter informaes bsicas sobre a abelha-de-mel, clique aqui
Certo: H informaes bsicas adicionais sobre a abelha-de-mel
20- Hiperlinks e suas cores:

Para as cores de hyperlinks use um conjunto consistente de cores para indicar
o estado no visitado e visitado.
21- TAG alt:

o atributo alt que indica a substituio da imagem pelo texto alternativo.
Ex:
<img src="/img/bandeira.png" alt="A bandeira do Brasil">.
Seja breve com o contedo do atributo mas fornea detalhes quando eles
derem significado dentro do contexto.
<img src=cavalinho.jpg alt=cavalo recm nascido deitado na terra, sendo
acariciado pela me />
22-Evite o uso de Captchas :

Captchas so campos que pedem para que voc escreva o que aparece na
imagem a todo custo. Fao o Maximo possvel para no usa-l. No entanto se
voc realmente no tem sada fornea um Captcha alternativo em udio. Uma
boa soluo o reCAPTCHA.
23- Operando os componentes do site:

Verifique se os componentes do site podem ser operados por meio de
diferentes dispositivos, em particular, teclado e mouse.
24-Todas as pginas devem ter recursos de impresso amigvel:

As pginas devem fornecer recursos de impresso amigvel, seja via javascript
ou via a utilizao de uma CSS voltada para impresso. Deve-se verificar a real
necessidade do usurio, retirando da impresso elementos no relevantes
como banners e menus.
25- Os arquivos para download devem apresentar a extenso a qual so

disponibilizados. Confira se esto compatvel com os leitores de telas?
De preferncia a arquivos em formato PDF ou RTF, os quais so lidos pela
maioria dos leitores de tela. Sugerimos tambm a extenso .DOC devido ao
fato de ser lido por quaisquer leitores.
26-No crie pginas que abram e funcionem em tela cheia:

O uso de tela cheia (fullscreen) como um expediente para maior controle do
desenho tira da pessoa o seu poder sobre as aes do navegador.
27- As aes do portal devem ser reversveis:

Erros cometidos devem ser passiveis de correo. O cidado deve ser capaz de
desfazer pelo menos a ltima ao realizada. Saber que pode corrigir possveis
erros encoraja a pessoa a explorar opes desconhecidas do portal.
28- Arquivos para download:

Os arquivos disponibilizados para download esto em formato acessvel para
os leitores: doc, txt (cuidado: pdf acessvel apenas para alguns leitores)?
29- Avalie a real necessidade do uso de um arquivo para baixar:

O nome do arquivo a ser baixado deve ser relacionado ao seu contedo.
Informe o tamanho e o formato do arquivo a ser baixado.
Isso permite que o usurio programe a baixa de arquivos e tenha uma idia de
quanto tempo a tarefa demorar a ser concluda.
30- Fornea uma alternativa ao contedo script utilizando o atributo

NOSCRIPT:
O contedo deste elemento renderizado quando os scripts no esto
habilitados.
Exemplo.
<SCRIPT Type="text/tcl">
... Algum script Tcl para mostrar um outdoor de resultados desportivos ...
</ SCRIPT>
<NOSCRIPT>
Resultados <P> de jogos de ontem: </ P>
<DL>
<DT> Bulls 91, Sonics 80.
<DD> <A Href="bullsonic.html"> Bulls vs destaques jogo Sonics </ A>
... Pontuaes mais ...
</ DL>
</ NOSCRIPT>
31- Eventos via teclado:

Como o mouse praticamente no utilizado, certifique-se de que todo evento
ativado atravs do mouse possua um tratamento redundante, permitindo
tambm sua ativao atravs do teclado.
Use "onmousedown" com "onkeydown".
Use "onmouseup" com "onkeyup"
Use "onclick" com "onkeypress"
Use "onmouseover" com "onfocus"
Use "onmouseout" com "onblur"
Verifique
1- O documento deve ser acessvel mesmo com o script desabilitado.
2- H alteraes temporais do contedo, atualizao automtica da tela ou animaes?
3- O usurio tem o controle sobre essas alteraes temporais?
4- A interface apresenta o atalho Voltar para a Pgina Principal?
5- A interface apresenta o atalho Voltar para a Pgina Anterior?
6- A interface apresenta o atalho Ir para o Menu?
7- A interface apresenta o atalho Ir para o Contedo?
8- A interface apresenta o link contraste?
9- A interface apresenta o link Aumentar tipografia?
10- fornecido um mapa do site que mostra como ele organizado.
CSS
1- MEDIA TYPES:
Crie folhas de estilos para cada dispositivo
screen computadores;
print impressoras;
handheld PDAs, mobiles Palmtops;
OBS:Uma forma de permitir a melhor acessibilidade dos contedos evitar o
atributo media all. O mais correto utilizar a media screen quando a folha de
estilos for desenvolvida para apresentao no computador.
2- Utilize para marcar ttulos e subttulo de acordo com sua hierarquia:

<h1>, <h2>, <h3>, <h4>, <h5> ou <h6> , sendo:
<h1> o ttulo mais alto.
<p> para demarcar os pargrafos.
OBS:No crie classes de CSS para apresentar um elemento em um formato
no condizente com seu objetivo.
EX: Um ttulo de nvel dois.
Errado:
<div id="main">
<p class="titulosec">
O subttulo
</p>
</div>
Certo:
<div id="main">
<h2>
O subttulo
</h2>
</div>
3- A pgina deve possuir apenas um elemento H1:
Toda pgina deve possuir um e apenas um elemento H1. O contedo do

cabealho deve guardar semelhana com o contedo do elemento TITLE do
cabealho.
4- Nomeie classes e IDs pela sua funo, no pela apresentao:

O nome de classes e IDs devem ser pensados de acordo com a sua finalidade e
no por sua localizao na diagramao ou suas caractersticas. Isso evita que
ao mudar o visual da pgina o sentido do nome da classe ou ID se perca.
EX: Uma classe que defina um texto de aviso ou advertncia.
Errado: .vermelho {/* regra */}
Certo: .aviso {/* regra */}
EX2: Uma div que contenha uma lista vertical de menu:
Errado: #colunaesquerdavertical {/* regra */}
Certo: #menu {/* regra */}
5- Utilize preferencialmente unidades de tamanho relativas:

Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas
para mdias digitais, dando preferncia pelo uso de tamanhos relativos tipo
em e %. Para o tamanho padro de texto utilize 1em ou 100%, use
tamanhos menores apenas para informaes de copyright ou semelhante.
6- Na navegao por teclado o usurio remetido primeiramente ao

contedo da interface?
Obs.: No HTML a seo contedo deve vir antes do menu e depois
posicionados por CSS.
7- Organize o cdigo por sees:

Divida sua folha de estilos em sees especficas, por exemplo: estilos global,
Topo, Estrutura da Pgina, Cabealhos, estilos para Textos, Navegao,
Formulrios, Comentrios, Extras.
Isto uma prtica fcil de implementar e facilitar a leitura e manuteno do
cdigo at mesmo depois de passados anos que tenha sido escrito. Ser mais
fcil encontrar classes e elementos que precisam ser alterados.
Exemplos: /* Estrutura */, /* Tipografia */ etc
/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
8- Criao de ndice:
A criao de um pequeno ndice no nicio de cada folha de estilo que cria, ir
ajudar voc, e outros, uma navegao mais fcil no documento.
Exemplo:
/*****************************************************
1. REA de CABEALHO
2. REA de NAVEGAO/MENU
3. REA de CONTEDO
4. REA de RODAP
*****************************************************/
9- Espaamento entre linhas:

Use 1.4em 1.6em para line-height. line-height:1.4 para linhas legveis,
linhas com comprimento razovel no mais longas do que 10 palavras e cores
com contraste suficiente mas sem exagero. Por exemplo, preto total em
branco total normalmente um contraste muito forte para monitores CRT,
ento adote um branco como #fafafa e um cinza escuro como #333333 para
um bom contraste.
10- Use uma folha de estilos mestre:

Ao codificar um web site voc deve antes de mais nada, limpar os estilos
padro do navegador. A estilizao padro leva a diferenas na aparncia do
design em diferentes navegadores e no h motivo para xingar este ou aquele
navegador
Organizar auxilia na manuteno do site. Comece com uma folha de estilos
mestre. Dentro desta folha importe as folhas para limpar estilos padro
reset.css, a folha global.css, flash.css (se necessria), a folha para estrutura do
site structure.css e ocasionalmente uma folha para tipografia. A seguir um
exemplo de folha de estilo "mestre" e de como incorpor-la a um
documento:
master.css
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");
<style type="text/css" media="Screen">
/*\*/@import url("css/master.css");/**/
</style>
11- Monte uma biblioteca de classes CSS:

Isto muito til para debugar, mas deve ser evitado na verso de
lanamento do site (separar apresentao de marcao). Uma vez que
permitido e vlido usar vrias classes (por exemplo: <p class="floatLeft
alignLeft width75"></p>), tire proveito disto para debugar sua marcao.
(updated)
CSS:
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
12- Use constantes CSS para agilizar o desenvolvimento:

Um uso bastante comum a criao de um glossrio de cores. Voc ter uma
referncia rpida das cores usadas no site que evitar erros na definio das
cores e auxiliar na eventual necessidade de alterar uma cor em toda a CSS
por um processo de busca e troca. Se voc acha que uma determinada
propriedade ser reutilizada vrias vezes, separe-a na folha de estilos pois com
isto ser possvel controlar de um lugar aquela propriedade.
# /*
# Cinza escuro (texto): #333333
# Azul escuro (cabealhos, links) #000066
# Azul (topo) #333399
# Azul claro (navegao superior) #CCCCFF
# Cinza: #666666
# */
13- Use as tags: <small>, <em> e <strong>:

Muitas vezes voc tem sees no site que apresentam variaes tipogrficas
em uma mesma linha ou mesmo prximas umas as outras. Nestes casos, em
lugar de criar divs e classes para estilizar, somente porque elas no carregam
semntica e tambm no poluem o seu belo cdigo XHTML no a melhor
soluo. Use tags semnticas
14- Ordene as propriedades alfabeticamente:

Ordenar as propriedades alfabeticamente facilita sua localizao.
body {
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}
15- Para usar EMs como se fossem pixels defina font-size 62.5% para body:
O valor default para font-size 16px; adotando para body um tamanho de font
igual a 62,5% voc faz com o valor default passe a ser 10px pois 16pixel x
62.5% = 10pixel. Defina um valor de font-size para body igual a 62.5%. Com
isto voc ira consiguir usar EMs para tamanhos raciocinando em termos de
pixel, por exemplo: 1.3em aproximadamente igual a 1.3px.
16- Minimize o uso das propriedades:

Se no existe razo para declarar uma determinada propriedade e se uma
mesma propriedade foi declarada em lugares diferentes na sua folha de
estilos, verifique a possibilidade de colocar a declarao em um lugar apenas.
17- Use o mnimo de hacks possvel:
No use hacks a menos que se trate de correo para um bug bem conhecido
e documentado. Esta uma dica valiosa, pois comum ver-se uso de hacks
para corrigir coisas que no causadas por bugs. Ao se deparar com uma
situao que voc considere ser necessrio usar hack para solucionar, faa
primeiro uma busca (o Google sua salvao nestas horas) para ver se
encontra alguma documentao relatando o problema que voc est tendo.
18- Nomeie IDs baseado no valor semntico:

Evite usar nomes baseados na apresentao. Nomear algo como coluna-direita
no uma escolha acertada, pois no futuro uma mudana de layout poder
impor que sua coluna-direita esteja posicionada esquerda. E isto trar
confuses no futuro, ento bom evitar nomes baseados na apresentao.
19- Saiba explorar o efeito cascata das CSS:

Suponha que voc tenha dois boxes bem parecidos no seu web site voc
pode escrever regras CSS separadas para cada um deles ou escrever regras
para ambos e a seguir regras para contemplar as pequenas diferenas entre
eles.
20- Defina as pseudo classes para links na ordem certa:

Link, Link visitado, Link hover, Link ativo. Para ter certeza de todos os estilos
para links funcionem apropriadamente voc deve declarar as regras CSS na
ordem correta link-visitado-hover-ativo. Se voc pretende usar um estilo
para focus ele dever ser colocado no final contudo leia esta explicao at o
final antes de decidir.
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
21- Defina margin, padding e border na ordem certa:

Top, Right, Bottom, Left. A ordem para declarar margin, padding e border a
ordem horria a partir de top: Top, Right, Bottom, Left.
22- Vlido para toda a tipografia defina famlias de fontes genricas:
p{
font-family: Arial, Verdana, Helvetica, sans-serif;
}
23- Distinguir links externos automaticamente:

Muitos usam o no standard atributo de relacionamento rel="external" para
distinguir links externos ao site. Contudo esta soluo implica em marcar o
atributo rel em cada link externo e isto consome muito tempo e
desnecessrio.A regra de estilo a seguir marca os links externos colocando
logo aps o link uma seta inclinada no sentido nordeste.
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
content: "\2197";
}
24- Para remover o pontilhado nos links use outline: none; :

a:focus {
outline: none;
}
25- Centralizar o Layout:

Use margin: 0 auto; para centrar seu layout na horizontal. para centrar em
elemento na horizontal necessrio declarar uma largura e margens
horizontais.
XHTML:
<div id="wrap">

</div>
CSS:
#wrap {
width:80%; /* Altere a largura do layout aqui */
margin:0 auto;
}
26- Fornea folha de estilo para impresso:

Voc pode criar uma folha de estilo para impresso de modo semelhante a
uma folha de estilo comum de apresentao da pgina:
<link rel="stylesheet" type="text/css" href="print.css" media="print">

ou
<style type="text/css" media="print"> @import url(print.css); </style>
Debugando
1- Adicione bordas para identificar containers:
Use CSS tal como bordas auxiliares ou cores de fundo como auxiliares no desenvolvimento
dos seus documentos ou com propsitos de identificao de bugs.
div { border:1px red dashed; } um auxiliar efeciente. Existe ainda a ferramenta
bookmarklets that apply borders que auxilia no processo de desenvolvimento e correo.
Voc pode usar a regra * { border: 1px solid #ff0000; }. Definir bordas para um elemento
ajuda na identificao de sobreposies ou de espaos extras em branco onde sua
identificao no seria to bvia sem auxlio da borda.
* { border: 1px solid #f00; }
2- Confira o fechamento de todas as tags quando estiver debugando:

Muitas vezes uma simples modificao quebra um layout de forma totalmente inesperada e
isto pode ter sido causado por falta de uma tag de fechamento de um elemento na pgina
3- Uma ID e muitas classes em cada pgina. Confira as IDs:

Somente um elemento no documento pode conter uma ID com determinado nome, ao
contrrio do nome escolhido para uma classe que pde ser atribuida a vrios elementos no
mesmo documento.
Nomes para classes e id devem conter caracteres de[A-Za-z0-9] e hfens (-), e no podem
comear com hfen ou dgito
4- A pgina deve ser compreendida e usvel com o css desabilitado:
5- Utilize preferencialmente letras para nomear classes e ids:
Listas e tabelas
Marque listas de itens e objetos de forma adequada.
Existem trs tipos bsicos de listas: ordenada, no-ordenada, e de definio. Deve-se
escolher o tipo de lista a partir da informao que se quer inserir.
Lista Ordenada (ordered list Tag OL): Sempre que a lista necessitar de
uma ordem, como a classificao em um concurso pblico, a lista ordenada a
escolha correta.
Lista Sem Ordem (unordered list Tag UL): Utilizar quando a necessidade
for listar itens sem uma ordem de colocao. a forma ideal para a codificao
de menus e barras de navegao.
Lista de Definies (definition list tags DL, DT e DD): Tem por objetivo
exibir uma lista de itens e suas respectivas definies. A lista de definies
possui duas partes distintas. O termo a ser definido ou descrito (tag DT), e a
descrio propriamente dita (tag DD). o formato ideal para glossrios.
Ex:
<dl>
<dt>Navegador</dt>
<dd>Programa que permite ao usurio consultar e interagir com o material
publicado na Internet. </dd>
<dt>Padres Web (Web standards)</dt>
<dd>Padres Web so regras de tecnologia definidos pelo W3C e outros
rgos da rea utilizados para criar e interpretar o contedo Web.</dd>
</dl>
Para a formatao de visual, na folha de estilos, alm dos elementos comuns as
demais tags, as listas possuem a propriedade list-style-type (tipo de estilos de lista).
Os atributos variam de acordo com o tipo de lista.
EX: A lista ordenada tem como padro a lista numrica em ordem crescente, mas
possvel mudar de acordo com o atributo dado:
list-style-type: lower-alpha; (a, b, c, d, e etc)
list-style-type: upper-roman ; (I, II, III, IV, V, etc.)
list-style-type: decimal-leading-zero ; (01, 02, 03, etc.)
list-style-type: none (nenhum estilo de lista aparece)
4. Tabelas devem ser utilizadas para dados tabulares.
Para tornar os dados das tabelas acessveis importante utilizar os diversos
componentes disponveis como o cabealho <th> e o atributo de sumrio.
Para maiores detalhes da marcao acessvel em tabelas consulte a cartilha tcnica
do e-MAG.
5. Formate os formulrios de forma correta e acessvel.
O formulrio deve ser construdo de forma lgica utilizando os elementos disponveis
corretamente. Os elementos <label>, <fieldset> e <legend> devem ser utilizados

Cuidados importantes:o Utilizao do atributo summary, pois ele um resumo da tabela.
Coloque apenas em tabelas que realmente necessitam de um resumo;
o Usar o elemento caption para ttulo da tabela; esse elemento o ttulo principal da mesma
Para tabelas simples, o uso apropriado do elemento th essencial para tornla acessvel.
Contudo com um pouco mais de esforo, podemos incrementar a acessibilidade aos dados
da tabela. thead e tfoot so usados para agrupar uma linha de cabealhos no topo e outra no
final da tabela. Se thead e tfoot forem usados, voc dever usar tambm tbody para definir o
corpo da tabela, que a parte que contm as clulas de dados. Na verdade uma tabela
poder conter mais de um tbody
Em tabelas de dados com dois ou mais nveis lgicos de cabealhos de linha ou de coluna,
utilizar marcaes para associar as clulas de dados s clulas de cabealho.
Para associar dados das clulas, deve ser seguida uma das formas abaixo:
Usar o atributo 'headers' para as clulas de tabelas <td> em conjunto com o atributo id na
clula de cabealho <th>
Colocar o atributo abbr para abreviar um cabealho longo de modo que ele no seja lido por
inteiro toda vez que o leitor de tela passar por ele
Em alguns casos os desenvolvedores utilizam colunas vazias em cabealhos ou dados para
obter um espaamento entre as colunas de uma tabela. O leitor de telas Jaws, por exemplo,
l "blank" toda vez que encontra uma clula vazia e isto pode reduzir a usabilidade e a
acessibilidade das tabelas de dados. Nesse caso CSS deve ser usado no lugar de clulas vazias
para controlar a apresentao de uma tabela de dados.
Quando o campo de texto editvel recebe o foco, um grande problema que, muitas vezes,
o Virtual Vision no l o ttulo do campo, deixando de informar o que deve ser preenchido.
Com isto, apesar de saber que algo tem que ser preenchido, no se sabe qual dever ser o
contedo. Para resolver este problema, basta utilizar o elemento <LABEL> envolto ao
campo, dando um ttulo ao mesmo.
Ex:
<form id="cadastro" action="cadastro.asp" method="GET" name="cadastro">
<label for="s_nome">Seu nome</label><br>
<input id="s_nome" type="text" name="s_nome" size="15" ><br>
<label for="s_email">Seu e-mail</label><br>
<input id="s_email" type="text" name="s_email" size="15" ><br>
<input type="submit" value="Enviar" name="submit2">
</form>
<form name="livro" action="http://www.hpg.com.br/scripts/cgi-bin/FormMail.pl"
method="post">
<label for="nome">Nome</label><br>
<input type="text" id="nome" name="s_nome" size="45" tabindex="1"><br>
<label for="email">E-mail</label><br>
<input id="email" type="text" name="s_email" size="45" tabindex="2"><br>
<label for="pais">Pas</label><br>
<input id="pais" type="text" name="s_pais" size="45" tabindex="3"><br>
<label for="estado">Estado</label><br>
<input id="estado" type="text" name="s_estado" size="45" tabindex="4"><br>
<label for="comentarios">Comentário</label><br>
<textarea id="comentarios" name="s_comentarios" cols="55" rows="7"
tabindex="5"></textarea><br>
<input type="submit" value="Enviar" name="submit" tabindex="6"> </form>
<form name="DV" method="get" class="corpo">
<fieldset class="moldura_botoes-selecao">
<legend>Selecione um dos itens abaixo</legend
<label for="mod11">
<input id="mod11" type="radio" name="modulo" value="mod11" checked tabindex="0"> 1.
MDULO 11 </label><br> <label for="cnpj">
<input id="cnpj" type="radio" name="modulo" value="cnpj" tabindex="1"> 2. CNPJ cadastro nacional de pessoa jurídica </label><br>
<label for="cpf"><input id="cpf" type="radio" name="modulo" value="cpf" tabindex="2"> 3.
CPF - cadastro de pessoa física </label><br>
</fiedlset>
</form>
Tags fieldsets, legend e label
A tag fieldset serve para agrupar elementos de controle similares dentro de um formulrio, por
exemplo: campos que vo receber dados referentes ao endereo do usurio.
<fieldset class="campos_endereco">
<input id="estado" name="estado" type="text" value="" tabindex="10">
<input id="cidade" name="cidade" type="text" value="" tabindex="20">
</fieldset>
A tag legend serve para especificar os agrupamentos feitos pelas tags fieldsets.
<legend>Endereamento:</legend>
</fieldset>
A tag label serve para especificar os rtulos de cada campo input.
<legend>Endereamento:</legend>
<label for="estado">Estado:</label>

<label for="cidade">Cidade:</label>
</fieldset>
Menu de opes Agrupamento

Desenvolvedores de contedo devem grupo de informao onde natural e apropriado. Para
longas listas de opes do menu (que pode ser difcil de controlar), desenvolvedores de
contedo devem grupo SELECIONAR itens (definida por OPO ) em uma hierarquia usando
o OPTGROUP elemento. Especifica um rtulo para o grupo de opes com o rtulo de
atributo em OPTGROUP.
Exemplo.
<FORM Action="http://example.com/prog/someprog" method="post">
<P>
<SELECT Name="ComOS">
<OPTGROUP Label="PortMaster 3">
<OPTION Label="3.7.1" value="pm3_3.7.1"> PortMaster 3 com Comos 3.7.1
<OPTION Label="3.7" value="pm3_3.7"> PortMaster 3 com 3,7 Comos
<OPTGROUP />
<OPTGROUP Label="PortMaster 2">
<OPTGROUP />
<OPTGROUP Label="IRX">
<OPTION Label="3.7R" value="IRX_3.7R"> IRX com Comos 3.7R
<OPTION Label="3.5R" value="IRX_3.5R"> IRX com Comos 3.5R
<OPTGROUP />
</ SELECT>
</ FORM>
Campos input e textrea

<TEXTAREA Name=yourname rows="20" cols="80">
Digite seu nome aqui.
</ TEXTAREA>
Use a tag de agrupamento de campos <fieldset> com tags de legenda <legend> para
associar com campos de seleo e caixas de checagem (checkbox). Exemplo:
Considerando um campo que pergunta o sexo do usurio e oferece as opes
Masculino e Feminino, o label Sexo: ficaria dentro de uma tag <legend>, que
por sua vez junto com os outros dois elementos ficaria dentro da tag <fieldset>.
Validao de formulrios
Mais comum do que se pensa, designers se esquecem de prever a validao de um
formulrio (sucesso e erro) e o comportamento das pseudo-classes nos inputs fields
(:focus). Estes atributos so essenciais para a boa experincia da interface.
Os menus esto em forma de lista? Quando h submenus ocultos, disponibilizado um aviso

para mostrar/ocultar esses submenus?
Os menus devem estar em forma de lista/itens.
Caso o menu apresente subitens ocultos, o site deve informar ao usurio a existncia dos
mesmos, com mensagens para mostrar/ocultar subitens.
VERIFIQUE
A entrada do CEP deve recuperar parte do endereo

Quando possvel, posicione o cursor no campo com problemas, facilitando sua correo
Fornecer mensagens de erro orientadas a tarefas, com sugestes ou instrues simples e
construtivas para a correo do erro
No limpe o contedo do formulrio inteiro por causa de um erro
Design
Convenes de desenho de interface
A padronizao das interfaces um conceito bsico e um dos mais importantes
para quem projeta sites. Passados alguns anos, certas convenes j so
utilizadas e respeitadas em uma srie de sites.
Elementos da Interface
Posicionamento
Marca da empresa
Canto superior Esquerdo
Barra superior de acessibilidade
Canto superior Direito
Busca
Parte Superior
Navegao Global
Parte Superior com links na horizontal
Navegao Local
Coluna da esquerda abaixo da navegao global
Breadcrumbs
Parte Superior, da navegao local
Contedo global e contextual
Ao lado da navegao local(rea central)
Contedo relacionado
Ao lado do contedo global e contextual
Barra de acessibilidade Inferior
A cima do rodap
Navegao de Rodap
rea central Inferior
Proposta de estrutura bsica de um website
1- Marca da Empresa:
A posio da marca da empresa foi um padro que provavelmente surgiu
como derivao da cultura ocidental de leitura da esquerda para a direita, de
cima para baixo. A marca seria teoricamente a primeira imagem a ser
percebida pelos visitantes. recomendado tambm que a marca da empresa
possua um link pra a homepage do site em todas as telas, menos na prpria
home.
2- Barra superior de acessibilidade:

Ela fornece meios para que usurios com necessidades especiais possam
navegar pelo site sem dificuldades, nela esta inseridas os seguintes links:
3- Saltar para o contedo:

Link com uma ancora pula os links que se repetem frequentemente no site,
como o menu global.
4- Contraste fonte:
Altera combinao de cores do texto e fundo da tela aumentando seu
contraste (fundo branco com a tipografia preta e fundo preto com tipografia
branca).
5- Aumentar tipografia:
Aumenta o tamanho dos textos do site.
6-Imprimir:
Possibilita controlar aparncia do que ir para o papel, deixando a pgina mais
amigvel e mais agradvel de ser ler, alm de contribuir com a
sustentabilidade do planeta pois a economia de folhas impressas ser
garantida.
7-Acessibilidade deste site:
Como o nome diz, a pgina que explica a acessibilidade que o site oferece.
8- Busca:
O recurso de busca , reconhecidamente um dos mais importantes elementos
de interface de um site. Caso sejam oferecidas funes de busca, verifique se
h diferentes tipos de pesquisa, bem como diferentes tipos de apresentao
de resultados (ex.: resumido, detalhado, ordenao, etc.), correspondendo a
diferentes nveis de habilidade e de preferncias dos usurios.
9- Navegao Global:
Existem dois padres de navegao global (vertical e horizontal)
A navegao horizontal tem a desvantagem de ter um espao fsico limitado
para a incluso de links, em sites que tem uma grande quantidade de links a
navegao disposta na vertical e mais eficiente.
Porm possui uma melhor navegao para o menu de navegao local e para o
contedo relacionado
A navegao na vertical resolve melhor quando existe a necessidade constante
de adicionar ou retirar links, muito comum em grandes portais.
10- Navegao Local:
A utilizao da navegao global na horizontal, torna natural a utilizao da
navegao local, na coluna da esquerda, j que as pessoas tambm esperam
encontrar elementos de navegao por ali.Lembrando que a navegao local
esta associado ao link da navegao global.
11- Breadcrumb:
Indicado apenas para sites de mdio e grande porte. 1.
Ex.: Voc est em: Incio > Notcias > Esportes
12- Contedo global e contextual:
rea destina a todo contedo de link do site e lembre-se as pessoas que
acessam pginas de contedo, como artigos ou detalhes de produtos,
normalmente querem ver itens relacionados ao assunto. A idia central
estimular as pessoas a consumir mais contedo.
No entanto no deve haver a preocupao de no interferir no que realmente
interessa na pgina: o contedo central.
Os links no podem competir com o contedo.
13- Contedo relacionado:
O contedo relacionado devera ser um contedo de expanso ao contedo ali
existente, dever fornecer caminhos ao usurio que pretende se aprofundar
em tal assunto
14- Barra de acessibilidade Inferior:

Ela fornece meios para que usurios com necessidades especiais possam
navegar pelo site sem dificuldades, nela esta inseridas os seguintes links: voltar
para o contedo, voltar para o menu global e voltar para o topo.
15- Navegao de Rodap:
A navegao de rodap, ou navegao redundante, outra conveno de
interface j consagrada na Internet. Espao muito utilizado para informaes

de copyright, data da ultima atualizao, poltica de privacidade, contato e
links de acessibilidade.
16- Zonas da tela com maior prioridade:

EyeTrack um aparelho que segue os olhos dos usurios pela tela enquanto
eles vm uma pgina web. Ao combinar os dados de vrios indivduos,
podemos descobrir padres representativos que se aplicam maioria da
populao.
Neste estudo foram observadas 46 pessoas durante 1 hora enquanto os seus
olhos navegavam na tela por alguns sites de notcias. O estudo caracterizou
trs zonas de maior prioridade.
17- Para onde eu olho primeiro ?

Todas as telas, principalmente a home, devem ter um ponto mais forte, um
ponto principal em que o usurio bata o olhe e fale ok, eu comeo por aqui e
minhas outras opes so aquelas ali.
Do contrario a pagina pode passar a idia de confuso e desorganizao,
principalmente quando estamos falando de portais com um grande volume de
informao.
18- Pgina inicial clara.

A pgina inicial do portal deve deixar claro o que o ste, seu objetivo e as
informaes e servios nele disponveis.
19- O contedo mais importante antes da dobra.

A dobra um termo que tem origem no jornalismo. o ato de dobrar o
jornal ao meio para facilitar a leitura. No caso de pginas web, a dobra a
primeira rolagem. Em todas as pginas a parte do contedo mais importante e
da navegao devem estar acima da dobra.
20- O contedo ocupa a maior parte da interface?
Ver livro nielsen
21- No use pginas de transio

No usar pginas sem contedo til, de transio, de abertura (splash-pages)
ou em construo, que apenas oneram a navegao. Apenas o que j est
pronto deve ser visvel e passvel de ser acessado.
22- Significado das cores:
A cor no deve ser usada sozinha para transmitir um significado. Assegurar
que todas as informaes veiculadas com cor estejam tambm disponveis
sem cor.
23- Cores do primeiro e segundo plano:
Assegurar que a combinao de cores entre o fundo e o primeiro plano seja
suficientemente contrastante para poder ser vista por pessoas com
cromodeficincias, bem como pelas que utilizam monitores de vdeo
monocromticos.
24- Tipografia:
Escolha com cuidado a tipografia, espaamento e teste a leitura dos textos,
preocupao que se deve ter com fontes a adequao dos contrastes para
daltnicos e para pessoas com algum outro tipo de deficincia visual.
25- Alinhamento tipografia:
Nada de texto justificado. O ideal para a web alinhar esquerda.
26- Prever ttulos grandes e elementos fluidos:
Para evitar esse problema, interessante que o designer exagere de propsito
no tamanho dos ttulos e dos textos com mais caracteres do que ele imagina
para conseguir antecipar e prever o comportamento dos outros elementos da
pgina. Isso importante para que, na hora da implementao do front-end
(html+css), o desenvolvedor saiba que aquele elemento fluido e pode aplicar
as propriedades corretas aos outros elementos para evitar erros futuros de
CSS.
27- Tamanho dos objetos de controle:
Verifique se os objetos de controle, como links, botes de comando, caixas de
atribuio, barras de rolagem, etc., apresentam uma rea sensvel s aes dos
usurios suficientemente grande para permitir um fcil e confortvel
acionamento por parte do usurio idoso e usurios com destreza manual
limitada.
28- No crie pginas que abram e funcionem em tela cheia:
O uso de tela cheia (fullscreen) como um expediente para maior controle do
desenho tira da pessoa o seu poder sobre as aes do navegador. Caso o
cidado prefira, ele pode optar por trabalhar em tela cheia, ou em qualquer
outro formato, desde que o seu interesse e comodidade no seja afetada.
29- O site utiliza a interface grfica com consistncia em todas as pginas?
Fontes, cores, formas e a localizao de objetos e textos.
30- Formulrios:
Quando necessrio fornea links de ajuda ou instrues sobre como preencher
os campos do formulrio.
31- Favicon:
O cone favicon usado pelos browsers para salvar algum site como favorito, e
tambm usado para a navegao entre as abas abertas.
32- A interface est dividida por blocos lgicos de informaes?
Ex.: Ttulos facilmente identificados.
33- Pgina 404 - Fazer pgina personalizada:
Mesmo tomando cuidado para checar links quebrados, em um sistema de
gerenciamento de contedo, poder acontecer de passar algum link sem
verificar ou o usurio poder digitar o endereo errado. Se essas pginas
estiverem com links externos de outros sites, como mecanismos de busca, a
pgina 404 a nica forma de orientar o usurio para que ele encontre o
contedo que est sendo buscado.
As pginas de erro do stio devem possuir links para a pgina inicial, de Fale
conosco (para relato da pgina no encontrada) e contar com um campo
busca.
34- Faa uma imagem de sem imagem :
Cadastros que possivelmente podem ter fotos e por algum motivo o
administrador no cadastr-la, esta imagem ira aparecer em seu lugar.
35- Um bom design tem que responder essas 3 perguntas:
Onde estou?
Onde estive?
Onde posso ir?
36- Utilizar linguagem mais clara e simples possvel, adequada ao contedo
do site:
USABILIDADE
Os critrios ergonmicos de usabilidade apresentam recomendaes para que
os sistemas computacionais apresentem atributos relacionados usabilidade
como a facilidade de aprendizado, a eficincia de uso, a facilidade de
memorizao, a baixa taxa de erros e a satisfao subjetiva.
1. Orientao - meios para advertir, orientar, informar, instruir e guiar o

usurio na interao.Facilita a navegao no aplicativo,facilita a compreenso
da interface, facilita a memorizao, facilita o aprendizado, reduo dos erros
melhoria do desempenho.
O sistema deve apresentar meios para orientar o usurio.
1.1- Feedback- Diz respeito s respostas do sistema com relao s aes do

usurio.
Oferece ao usurio satisfao pela realizao das aes e sensao de alvio
funciona como sinal para preparar o usurio para o prximo grupo de aes
permite ao usurio saber exatamente o mudou o estado que se encontra o
sistema, bem como o que fez para se encontrar nessa situao a qualidade e
rapidez do feedback so importantes para o estabelecimento de satisfao e
confiana do usurio permite ter um melhor entendimento do funcionamento
do sistema conhecer as aes permitidas, bem como suas conseqncias a
falta ou a demora de feedback podem ser desconcertantes para o usurio os
usurios podem suspeitar de uma falha no sistema, e podem tomar atitudes
prejudiciais para os processos em andamento.
1.2- Interface grfica- diz respeito organizao visual dos itens de

informao, relacionados uns com os outros.
Permite aos usurios saber a sua localizao no sistema numa seqncia de
interaes ou na execuo de uma tarefa permite detectar os diferentes itens
ou grupos de itens e aprender suas relaes mais facilmente, se eles forem
apresentados de uma maneira organizada por exemplo: ordem alfabtica,
freqncia de uso, caractersticas grficas.
1.3 - Ajuda ao usurio - guias, manuais ou sistemas online que auxiliam o

usurio na dificuldade de utilizao do sistema
Auxilia o usurio em situaes de dificuldade permite obter informaes
adicionais diminui a solicitao da equipe de TI.
2. Carga de memria- diz respeito a todos elementos da interface que

tm um papel importante na reduo da carga cognitiva e perceptiva do
usurio, e no aumento da eficincia do dilogo.
Nenhuma das habilidades do usurio deve ser sobrecarregada, o mtodo de
operao seja explcito, quanto maior for a carga de trabalho cognitivo, maior
ser a probabilidade de se cometer erros, diminui a ocorrncia de erros,
aumento da eficincia, aumento da produtividade. Deve-se diminuir a carga de
memria do usurio.
2.1 - Densidade informacional - carga de trabalho do usurio, do ponto de

vista perceptivo e cognitivo, com relao ao conjunto total de itens de
informao apresentados aos usurios.
Quanto menos o usurio se distrair com informaes desnecessrias, estar
mais capacitado a desempenhar suas tarefas com eficincia quanto mais
sucintos forem os itens, menor ser o tempo de leitura quando a densidade da
informao muito alta ou muito baixa, a ocorrncia de erros mais provvel.
2.2 - Aes mnimas - carga de trabalho com relao ao nmero de aes

necessrias para completar um objetivo ou tarefa.
Quanto menos aes forem solicitadas, mais rpidas so as interaes quanto
mais numerosas e complexas forem as aes necessrias para se chegar a uma
meta, maior ser a carga de trabalho e a probabilidade de ocorrncia de erros.
2.3 Legibilidade - caractersticas das informaes apresentadas na tela
que possam dificultar/facilitar a leitura da informao.
A performance melhora quando a apresentao da informao na tela leva em
conta as caractersticas cognitivas e perceptivas dos usurios uma boa

legibilidade facilita a leitura da informao apresentada.
2.4 Significado dos cdigos - adequao entre o objeto ou a informao

apresentada ou solicitada, e sua referncia.
Quando a codificao significativa, a recordao e o reconhecimento so
mais .Fceis cdigos e denominaes no significativos para os usurios
podem sugerir operaes inadequadas para o contexto, conduzindo-os ao
erro.
3. Controle do usurio -
Diz respeito tanto ao processamento de aes

explicitas do usurio, como do controle que os usurios tm sobre o
Tratamento de suas aes.
Os erros e as ambigidades so limitados,permite entender melhor o
funcionamento da aplicao, portanto melhora o aprendizado, quanto mais os
usurios tiverem controle sobre o dilogo, melhor ser a aceitao do sistema,
projetos com ajustes favorecem o controle das aes .O usurio deve ter
controle sobre o sistema
4- Adaptabilidade e compatibilidade - diz respeito capacidade de

um sistema de se comportar conforme o contexto, e conforme as
necessidades e preferncias do usurio.
Usurios diferentes possuem diferentes necessidades, atende mais tipos de
usurios, diminui os erros, aumenta a eficincia e produtividade, melhora a
Aprendizagem, o sistema deve ser compatvel e adaptvel ao usurio.
4.1- Flexibilidade - meios que permitem customizar a interface

considerando estratgias, hbitos e exigncias da tarefa.
Quanto mais formas de efetuar uma tarefa existirem, maiores sero as
chances de que o usurio possa escolher e dominar uma delas no curso
de sua aprendizagem.
4.2 Compatibilidade - considera a memria, percepo, hbitos,

competncias, idade, expectativas e experincia dos usurios.
Usurio os procedimentos e as tarefas so organizados respeitando as
expectativas e prticas dos usurios tradues, as interpretaes, ou
referncias so minimizadas.
4.3 - Experincia do usurio - meios implementados que permitem que o

sistema respeite o nvel de experincia do usurio.
Usurios experientes e inexperientes tm diferentes necessidades atalhos
podem permitir a eles acesso s funes do sistema mais rapidamente
os usurios podem se tornar especialistas, devido utilizao continuada, ou
menos especialistas, depois de um longo perodo de no utilizao.
5. Administrao do erro- se refere a todos os meios que permitem

evitar ou reduzir a ocorrncia de erros, e quando eles ocorrem, que favoream
sua correo.
As interrupes provocadas pelos erros tm conseqncias negativas,
prolongam as transaes e perturbam o planejamento, quanto menor a
possibilidade de erros,menos interrupes ocorrem e melhor o desempenho.
O sistema deve evitar os erros, e se ocorrerem, deve favorecer a sua correo.
5.1 - Proteo contra erros - meios para detectar e prevenir os erros, ou

possveis aes com conseqncias desastrosas e/ou no recuperveis.
prefervel detectar os erros no momento da entrada do que no momento da
validao isto pode evitar perturbaes no planejamento da tarefa.
5.2 - Qualidade das msgs erro - pertinncia, facilidade de leitura e exatido da

informao dada ao usurio sobre o erro cometido.
Favorece o aprendizado do sistema indicando ao usurio: a razo ou a
natureza do erro cometido, o que ele fez de errado, o que ele deveria ter feito,
o que ele deve fazer.
5.3 - Correo dos erros - meios colocados disposio do usurio com o

objetivo de permitir a correo de seus erros.
Erros so bem menos perturbadores quando eles so fceis de corrigir.
6. Padronizao - se refere forma na qual as escolhas na concepo da

interface (cdigos, denominaes, formatos, procedimentos, etc.)
So conservadas idnticas em contextos idnticos, e diferentes para contextos
diferentes. Os procedimentos, rtulos, comandos etc., so mais bem
reconhecidos, localizados e utilizados, quando seu formato, localizao, ou
sintaxe so estveis de uma tela para outra.
O sistema mais previsvel, a aprendizagem facilitada e o nmero de erros
reduzido.
Sua falta pode aumentar o tempo de procura consideravelmente.
Sua falta uma importante razo de recusa na utilizao por parte dos
usurios.
O sistema deve utilizar padronizaes.
Os critrios de usabilidade devem ser aplicados antes, durante e aps o
projeto da interface para que a usabilidade seja atingida.
Mtodos de avaliao de Usabilidade

1. Mtodos empricos- com usurios.
1.1 - Conversao com cmera - envolve participantes em uma
conversao com uma cmera, falando sobre tpicos pr-definidos
Vantagem: ausncia do entrevistador, facilidade de se expressar se forem 2
pessoas.
Desvantagem: falta de controle da seo, demanda tempo, difcil resolver
questes ambguas.
1.2 - Focus group - pessoas reunidas para discutir por exemplo, experincias
de uso, exigncias para um novo produto, informaes sobre tarefas
particulares ou problemas de usabilidade associadas ao uso de um produto.
Vantagem: qualquer estgio de design, suscitar idias no pensadas pelo lder
, estimular idias nos participantes.
Desvantagem: no capta dados quantitativos, Integrantes podem falar mais
que outros, opinio de parte do grupo pode ser tomada como verdade, exige
habilidade do lder para moderar a dinmica.
1.3 - Think aloud protocols - um participante falando sobre o que est fazendo
e pensando enquanto interage com um produto. Tarefas especficas ou
explorao livre.
Vantagem: possvel entender no somente quais os problemas eles tm com a
interface, mas tambm porque esses problemas surgem, o mtodo
excelente para apontar diretamente solues de design, poucos participantes.
Desvantagem: alguns usurios podem ter dificuldade de verbalizar suas
aes ou se sentir bloqueados.
1.4 - Incidentes dirios - mini questionrios distribudos aos usurios, os quais

podem anotar quaisquer problemas que tiverem durante o uso do produto
Vantagem: econmico em termos de tempo e esforo, fcil de aplicar, no

necessita laboratrios.
Desvantagem: no existe garantia de que os usurios iro complet-los
sempre que os problemas ocorrerem, podem completar de maneira incorreta,
podem ser imprecisos.
1.5 - Features checklists - lista de funcionalidades do produto. Os usurios so

solicitados a marcar quais caractersticas so usadas ou no
Vantagem: econmico em termos de tempo e esforo, fcil de aplicar, no
necessita laboratrios, bom para obter uma viso geral do produto.
Desvantagem: no fornece dados mais ricos sobre a experincia de uso do
Produto.
1.6 - Observao de campo - observao realizada no ambiente em que os

usurios normalmente usam o produto. Isto pode oferecer um grau de
informaes mais prximas da realidade do que uma avaliao realizada num
ambiente de laboratrio.
Vantagem: o mtodo provavelmente o nico que se aproxima da anlise do
produto em circunstncias naturais.
Desvantagem: anlise de dados mais difcil, problemas ticos, rudos,
somente com produto final.
1.7 - Questionrios - questionrios de respostas fixas (mltipla escolha ou

escalas) e questionrios de respostas abertas.
Vantagem: mtodo barato e fcil de ser aplicado por poder se fazer
cpias dos questionrios, pode ser aplicado a uma grande quantidade de
pessoas, qualquer estgio de design, ausncia do pesquisador.
Desvantagem: apenas cerca de 25% dos questionrios so respondidos,
deve-se ter muito cuidado com a formulao das questes.
1.8 - Entrevistas - 3 tipos: no estruturadas, semi estruturadas e estruturadas.

Vantagem: pode ser aplicada em todo o processo de design, erros na
interpretaes so menores.
Desvantagem: demanda esforo e tempo, presena do pesquisador,
dificuldade de conseguir participantes.
1.9 Eyetracking - com uso de aparelhos especiais usado para determinar o

que um indivduo est olhando.
Vantagem: entender quais elementos do produto so mais chamativos para o
usurio e quais no so observados por ele.
Desvantagem: aparelhos e softwares caros, demanda tempo.
2. mtodos no empricos - com especialistas

2.1 - Anlise de tarefas - analisa o desempenho do produto numa srie de
etapas. quanto mais passos necessrios, mais complexa a tarefa, quanto
menos passos necessrios, mais simples a tarefa.
Vantagem: no envolve participantes, dados confidenciais, durante a
avaliao o especialista pode encontrar outros problemas e sugerir solues.
Desvantagem: o esforo necessrio para cada passo no considerado,
poder existir uma tendncia em favorecer solues que minimizem o nmero
de passos necessrios, ao invs de minimizar as exigncias associadas com
cada passo.
2.2 - Property checklists - pesquisador verifica se o produto possui as

propriedades de design conforme as propriedades da lista.
Vantagem: sem usurios, dados confidenciais, pode apontar solues de
design, pode ser aplicado em todo o processo de design.
Desvantagem: dependente do julgamento de uma pessoa ou pessoas que

compilaram a lista de verificao.
2.3 - Avaliaes especialistas - um ou mais especialistas avaliam a usabilidade

do produto. Especialista tem de ser a pessoa que entenda de usabilidade mas
seja especialista naquele determinado produto. Ex.carro.
Vantagem: no precisa da presena de participantes, o mtodo bom para
fornecer diagnstico.
Desvantagem: existe evidncia de que os problemas apontados pelo
especialista sejam, de fato, problemas para o usurio. O mtodo muito
suscetvel ao conhecimento do investigador.
2.4 - Cognitive walkthroughs (orientaes cognitivas)- avaliao de um

especialista, porm com o ponto de vista do usurio. O investigador tenta
prever se o usurio ter qualquer dificuldade para completar uma tarefa.
Vantagem: no requer usurios e resulta em diagnsticos diretos, rpido,
pois no requer coleta nem anlises de dados, neste mtodo a avaliao
baseada no contexto de uma tarefa especfica.
Desvantagem: o investigador deve estar apto a fazer julgamentos com relao
s habilidades cognitivas, conhecimentos e habilidades dos usurios.
2.5 - Avaliao heurstica - especialistas avaliam a interface de acordo com

critrios de usabilidade heursticas.
Vantagem: ausncia de participantes, consegue encontrar grande parte dos
problemas de usabilidade das interfaces.
Desvantagem: quanto mais avaliadores, melhor, no entanto, demanda mais
tempo e dinheiro para pagamento dos especialistas.
PROCESSO DE TESTE
O processo de teste de usabilidade passa pelas seguintes etapas:
1. Planejamento do teste
2. Escolha do ambiente de teste
3. Escolha de participantes
4. Preparo do material de teste
5. Conduo da sesso
6. Questionamento final
7. Analise dos dados coletados
8. Relato e recomendaes
9. Implementao das alteraes e re-teste
1. Planejamento do teste:
Antes de aplicar o teste necessrio definir o seu objetivo, por exemplo, avaliar o
formulrio do Fale Conosco. As perguntas que sero feitas durante o teste so listadas e
definidas as caractersticas das pessoas a serem escolhidas comoparticipantes.
2. Escolha do ambiente de teste:

Nessa etapa define-se o ambiente do teste e como ele ser realizado. escolhido o lugar,
definindo o tipo de laboratrio e o equipamento necessrio.
3. Escolha de participantes:
Na escolha dos participantes prefira escolher pelo perfil de comportamento/
necessidades do que por estratos demogrficos. Exemplo: Se o teste para um servio de
teleconferncia o melhor recrutar pessoas que usam ou que gostariam de utilizar esse
recurso.
4. Preparo do material de teste:

O material de teste consiste em guias e listas com o objetivo de orientar o avaliador durante
o teste. No , literalmente, apenas listar as perguntas que sero feitas ao participante, mas
sim fornecer informaes sobre o objetivo do teste e cenrios para o desenvolvimento das
tarefas.
5. Conduo da sesso:
Durante a sesso, o avaliador tem por funo deixar o participante vontade e
orientar sobre as tarefas. O avaliador no deve induzir respostas mas pode auxiliar em caso
de becos sem sada se isso contribuir para o andamento da sesso. O avaliador tambm
faz anotaes e recebe orientaes dos observadores da outra sala.
A equipe de observadores, que inclui membros da equipe de desenvolvimento e outros
avaliadores, observa a sesso tomando notas. importante que cada membro da equipe de
desenvolvimento assista, pelo menos, a duas sesses.
6. Questionamento final:
No final da sesso, deve-se questionar ao participante como foi a experincia.
Dispensa-se o participante e uma reunio rpida feita entre o avaliador e os
observadores para troca de impresses.
7. Analise dos dados coletados:

Aps o final de todas as sesses devem-se reunir todas as observaes e analisar os dados
coletados. Isto inclui a reviso cuidadosa das gravaes realizadas (vdeo e udio) e a anlise
das respostas aos questionrios.
8. Relatrio e recomendaes:
gerado um relatrio unificado com os problemas encontrados e possveis solues. Se
possvel, este relatrio dever estar embasado com os trechos mais significativos das
gravaes, exemplificando os principais problemas encontrados.
9. Implementao das alteraes e re-teste:

A equipe de desenvolvimento implementa as solues e um novo teste de usabilidade
feito a partir da interface corrigida.
Checklist bsico de usabilidade

1. O sistema deve apresentar meios para orientar o usurio:
O sistema deve retornar respostas ao usurio para cada ao, seja ela grande, pequena, ou
um conjunto de aes.
As respostas devem ser significativas, apropriadas para cada situao e em tempo
razovel.O sistema deve informar ao usurio o que est ocorrendo com o sistema (status do
sistema).
Deve-se oferecer meios para o usurio se localizar no sistema.
Deve-se fornecer ajuda para utilizao do prprio sistema e suas ferramentas.
O sistema deve fornecer indicaes de como o usurio deve proceder.
O sistema deve apresentar as informaes de forma organizada (localizao, caractersticas
grficas, ordem alfabtica, freqncia de uso etc.).
2- Deve-se diminuir a sobrecarga mental do usurio:

A interface no deve sobrecarregar a viso com nmero elevado de informaes, assim com
informaes irrelevantes ou pouco necessrias.
Se o canal visual estiver ocupado, pode-se empregar o canal de udio, sem sobrecarreglos.
As tarefas devem ser simples, reduzindo o nmero de passos para realiz-las.
Todas as informaes presentes no sistema devem ser legveis, respeitando caractersticas
textuais como cor, brilho, contraste, tamanho de corpo e espaamentos.
Todas as informaes grficas ou textuais devem ser claras e objetivas.
A interface deve ser projetada de forma que a maneira de utilizao do sistema seja
explcita.
Deve-se priorizar as caractersticas mais relevantes ao projetar a interface.
3. O usurio deve ter controle sobre o sistema:

A velocidade de uso do sistema deve ser controlada pelo usurio.
Se possvel, o sistema deve fornecer aes de fazer e desfazer (CTRL+Z)
O sistema no deve executar aes que o usurio no tenha solicitado.

Se possvel, o sistema deve fornecer ajustes e personalizao das interfaces.
4. O sistema deve ser compatvel e adaptvel ao usurio:

O sistema deve estar de acordo com nvel de instruo, faixa etria, limitaes dos usurios
e formas de utilizao normalmente aceitas.
O sistema deve utilizar termos familiares aos usurios, inclusive idioma (exceto termos
estrangeiros j adotados pela lngua).
O sistema deve ser flexvel para atender diferentes nveis de experincia dos usurios
(principiantes ou experientes).
O sistema deve fornecer alternativas para que usurios experientes ocultem informaes
destinadas a usurios principiantes.
Se possvel, o sistema deve fornecer ajustes e personalizao das interfaces.
O sistema deve fornecer meios diferentes para se alcanar um mesmo objetivo.
5. O sistema deve evitar os erros e se ocorrerem, deve favorecer a sua correo:

A interface deve ser projetada de maneira a evitar a ocorrncia de erros, eliminando
circunstncias propcias aos erros.
Para prevenir erros, o sistema pode solicitar as informaes por etapa.
Se possvel, o sistema deve fornecer aes de fazer e desfazer (CTRL+Z).
O sistema deve solicitar a confirmao do usurio para aes irreversveis.
Quando ocorrerem, os erros devem ser apresentados ao usurio.
Os erros devem ser recuperados de maneira rpida e fcil.
O sistema deve fornecer meios para que o usurio corrija somente a parte incorreta.
As mensagens de erro devem ser claras e objetivas, utilizando vocabulrio neutro (no
devem reprovar, julgar o usurio ou utilizar tom de humor).
6. O sistema deve utilizar padronizaes:

A identidade visual (cores, formas, fontes) deve ser respeitada em todo o sistema.
Deve existir padronizao de localizao dos elementos do sistema.
Deve existir padronizao na forma como so realizadas as tarefas.

Deve existir padronizao de termos utilizados no sistema.
Redao
A comunicao em stios do governo sobretudo utilitria, visando prestar
servios e informaes aos cidados. A redao deve levar em conta a
audincia, o conhecimento das pessoas que acessam o stio. O texto deve ser
diagramado para facilitar o entendimento da informao.
Em resumo: O site deve "falar" a lngua das pessoas, com palavras, frases e
conceitos familiares; O texto deve ser objetivo.
1 - Utilizar uma linguagem clara e familiar:

A linguagem utilizada na divulgao das informaes e orientaes para
realizao de servios deve ser clara e objetiva. Apenas utilizar linguagem
tcnica e/ou corporativa quando estas forem familiares ao pblico do stio.
2 - O texto objetivo:
Em textos, comear sempre pelo mais importante, expondo uma idia por
pargrafo. O texto deve ser direto e simples; palavras desnecessrias devem
ser omitidas. As informaes mais importantes devem estar nos dois primeiros
pargrafos.
3 - Dividir o texto em tpicos:

Divida o texto em pequenas unidades, pequenos pargrafos, subttulos e listas
para facilitar a explorao da pgina e o entendimento do contedo da
informao.
4 - Ttulos informativos e com destaque visual:

O ttulo o principal marco visual e o ponto de entrada do olhar, onde a
pessoa identifica o contedo da pgina. Portanto, o cabealho ou seja, o
ttulo da informao, notcia ou servio - deve ser facilmente identificado e o
seu contedo deve ser descritivo.
5 - Ttulo da pgina explanatrio e nico:

O ttulo da pgina, elemento <title>, que aparece na barra do menu, o que
os servios de busca e as pessoas veem primeiro. O ttulo deve ser
explanatrio e de acordo com o contedo da pgina, guardando sempre

relao entre o ttulo das pginas e o ttulo da janela do navegador.
6 - Utilizar termos simples e claros como rtulos de menu.

Os rtulos de menu devem ser facilmente compreendidos pelo cidado:
No devem ser utilizados siglas, abreviaes ou termos tcnicos.
Devem manter consistncia textual com os ttulos das pginas a que se
eles referem; Os rtulos de itens de menus em todo o stio devem ser
consistentes quanto ao estilo gramatical e a terminologia.
7 - Gramtica correta:
O texto deve passar por uma leitura e correo antes de ser publicado. Erros
de ortografia diminuem a credibilidade do texto.
8 - Use nfase e negrito:

Para ressaltar partes importantes no texto use os elementos HTML de nfase
<em> e negrito <strong>, que atraem a ateno do leitor.
Grife, de preferncia em negrito, a palavra-chave que defina cada pargrafo.
Ao 'escanear' (passar os olhos rapidamente) a pgina, o cidado poder saber,
em questo de segundos, quais so os aspectos abordados sobre o assunto ao
longo do texto.

Guia Front End

Enviado por

Dados do documento

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

Guia Front End

Enviado por

Direitos autorais:

Formatos disponíveis

GUIA FRONT-END

Guia rpido de boas prticas para o

Por: Bruno Jos Dos Santos

2- Declare o Idioma utilizado:

3- Identifique os 3 principais elementos de uma interface:

4- Use caixa baixa e aspas em todos os valores:

5- Todos elementos devem ser fechados, incluindo os elementos que em

6- Nenhum atributo pode ser abreviado:

7- Declare a localizao e o pais da pgina:

8- Descreva a codificao de caracteres da pgina:

9- Palavras-chave Meta TAG:

11- Categoria Meta TAG:

12- Autor Meta TAG:

13- Endereo da pgina Meta TAG:

14- Endereo de e-mail Meta TAG:

15- A estrutura das pginas est uniforme?

16- Restries para os motores de busca:

serem substitudas por "index" ou "noindex" (para permitir ou no a indexao

17- Evite a utilizao de tabelas para layouts:

18- Utilize preferencialmente unidades de tamanho relativas:

19- O contedo e o propsito de um cookie deve ser sempre informado ao

22- Na navegao por teclado o usurio remetido primeiramente ao

23- No utilize scripts que no ofeream um benefcio relevante ao

2- A TAG <title></title> nos ttulos:

3- Evite expresses redundantes:

4- No polua o ttulo com palavras-chaves:

Alguns buscadores apenas mostraro os primeiros 50 60 caracteres do ttulo,

5- A logomarca deve ser clicvel:

6- Abreviar cabealho com a tag abbr:

7- Utilize a tag accesskey:

8- Utilizando ancoras sempre com ID (saltos):

<a href="#irconteudo accesskey="1" name="irconteudo">

9- Fornea alternativa em texto para vdeo e udio:

10- Play, udio e vdeo:

11-Descrio textual [d]:

12- Descrio textual long desc para imagens:

programados, arte ASCII, frames, scripts, imagens utilizadas como pontos de

13- Identifique mudanas na linguagem:

14- nfase as frases:

15- Siglas e abreviaturas:

17- Texto pr-formatado: A PRE elemento:

Ainda mais elevado e maior

18- Desgin de URLs amigveis e funcionais:

19- Hyperlinks e seu contexto:

20- Hiperlinks e suas cores:

21- TAG alt:

22-Evite o uso de Captchas :

23- Operando os componentes do site:

24-Todas as pginas devem ter recursos de impresso amigvel:

25- Os arquivos para download devem apresentar a extenso a qual so

26-No crie pginas que abram e funcionem em tela cheia:

27- As aes do portal devem ser reversveis:

28- Arquivos para download:

29- Avalie a real necessidade do uso de um arquivo para baixar:

30- Fornea uma alternativa ao contedo script utilizando o atributo

31- Eventos via teclado:

2- H alteraes temporais do contedo, atualizao automtica da tela ou animaes?

3- O usurio tem o controle sobre essas alteraes temporais?

4- A interface apresenta o atalho Voltar para a Pgina Principal?

5- A interface apresenta o atalho Voltar para a Pgina Anterior?

6- A interface apresenta o atalho Ir para o Menu?

7- A interface apresenta o atalho Ir para o Contedo?

8- A interface apresenta o link contraste?

9- A interface apresenta o link Aumentar tipografia?