E-PWG - Padroes Brasil E-Gov - Cartilha de Codificacao

Ministrio do Planejamento, Oramento e Gesto
Secretaria de Logstica e Tecnologia da Informao

Departamento de Governo Eletrnico
www.governoeletronico.gov.br
Padres Brasil e-Gov
Cartilha de Codificao
Verso 2.1
Julho de 2010
Brasil. Ministrio do Planejamento, Oramento e Gesto. ecretaria

de Logstica e Tecnologia da Informao
Padres Web em Governo Eletrnico e-PWG : Cartilha de Codificao
/ Ministrio do Planejamento, Oramento e Gesto, Secretaria de
Logstica e Tecnologia da Informao -
Braslia : MP, SLTI, 2010.
48 p.: color.
1. Informtica - codificao de paginas 2. Sites da Web Projetos. 3. Sites na Web - Desenvolvimento 4. Programao
para Internet 5. Informtica - Servio Pblico I. Ttulo.
CDU 004.5:35
CDD 004.678
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.
Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao
Agradecimentos
O Departamento de Governo Eletrnico agradece a:
Fabio Augusto Barbosa Gameleira

Luis Flavio Loreto da Rocha
Luiz Agner
Maysa Alves
Miriam Hitomi Simofusa
Nohab Santos Carvalho Rocha
Thiago Prado de Campos
Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e

correes para o presente documento.
A participao de todos foi inestimvel.
DGE Departamento de Governo Eletrnico
ndice
Padres Web em Governo Eletrnico e-PWG.......................................................5
Objetivos desse Guia.......................................................................................5
Responsabilidade e manuteno.......................................................................6
1. Introduo.....................................................................................................7
1.1 Diretrizes..................................................................................................8
2. Padres Web..................................................................................................9
2.1 Cdigo em camadas..................................................................................11
2.2 HTML e XHTML.........................................................................................12
2.3 CSS (cascating style sheets)......................................................................13
3. Recomendaes ...........................................................................................17
3.1 Recomendaes gerais..............................................................................17
3.2 Elementos do cabealho............................................................................21
3.3 Corpo..................................................................................................... 24
3.4 Folhas de estilo........................................................................................27
3.5 Uso de scripts e cookies............................................................................ 30
3.6 Arquivos em outros formatos e uso de plugins............................................. 31
4. Orientaes gerais sobre testes ..................................................................... 33
4.1 Validao................................................................................................ 33
4.2 Resolues de vdeo................................................................................. 33
4.3 Navegadores e sistema............................................................................. 33
4.4 Outros dispositivos................................................................................... 34
4.5 Teste em camadas....................................................................................35
4.6 Teste de acessibilidade..............................................................................35
5. Problemas mais comuns................................................................................ 37
6. Lista de verificao....................................................................................... 40
7. Lista de formatos de arquivos e plugins........................................................... 41
8. Recursos.....................................................................................................45
9. Leitura Complementar...................................................................................48
10. Glossrio...................................................................................................49
Padres Web em Governo Eletrnico e-PWG

A presente Cartilha o resultado do Projeto Padres Web em Governo Eletrnico ePWG, do Programa de Governo Eletrnico do Governo Federal
(www.governoeletronico.gov.br) - que fornece recomendaes de boas prticas na
rea digital, com o objetivo de aprimorar a comunicao, o fornecimento de
informaes e servios prestados por meios eletrnicos pelos rgos do Governo
Federal.
A adoo dos Padres Web em Governo Eletrnico e-PWG traz vantagens na gesto de
stios, como a garantia do nvel de qualidade, pois possibilita a mensurao de
resultados. Fornece tambm requisitos para a correta contratao da equipe
responsvel por desenvolver o stio, diminui o tempo, o custo de desenvolvimento e
manuteno das pginas. Alm disso, a padronizao desses ambientes acelera o
processo de adaptao e migrao para tecnologias mais modernas, e ainda aumenta
a qualidade da comunicao com a sociedade.
Conhea mais sobre as recomendaes dos Padres Web em Governo Eletrnico ePWG no endereo: www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-egov .
Objetivos desse Guia

O objetivo desse guia detalhar recomendaes de boas prticas em codificao, que
orientem as equipes no desenvolvimento de stios, portais e servios de governo
eletrnico com o propsito de torn-los identificveis, portveis, relevantes, acessveis
e efetivos populao. Esse guia foi concebido para ser prtico e de fcil consulta.
No o objetivo desse guia o detalhamento do cdigo. No citamos, por exemplo, a
lista de atributos considerados obsoletos pela W3C (World Wide Web Consortium). O
documento ficaria por demais extenso e perderia rapidamente sua atualidade. A
documentao produzida e mantida pela W3C diversas vezes referenciada no guia e
deve ser consultada sempre que se considerar necessrio.
A codificao constituiu-se de um conjunto de arquivos com funo de contedo,
apresentao e comportamento. o esqueleto, a estrutura que d suporte aos
aspectos da pgina relacionados a apresentao, organizao, navegao e
usabilidade.
Esse guia, alm de apresentar recomendaes que sigam os padres web

preconizados pela W3C e de boas prticas recomendadas por outros grupos, apresenta
orientaes para testes e escolha de gerenciadores de contedo.
Responsabilidade e manuteno
A manuteno desse documento responsabilidade do Departamento de Governo
Eletrnico - DGE. Questes sobre aspectos desse documento devem ser enviados para
padroesegov@governoeletronico.gov.br
1. Introduo
As Tecnologias de Informao e Comunicao (TICs) so instrumentos cada vez mais
importantes no desenvolvimento de ferramentas que melhorem a prestao de
servios e a disponibilizao de informaes primordiais para os cidados. A adoo
dessas tecnologias permite o aumento da eficcia, da eficincia e da transparncia
governamental.
A adoo de meios eletrnicos para a prestao dos servios governamentais exige
que os stios e portais desenvolvidos e mantidos pela administrao pblica sejam
fceis de usar, relevantes e efetivos. Somente por meio da eficincia possvel
aumentar a satisfao dos usurios de servios eletrnicos e conquistar,
gradativamente, uma parcela cada vez maior da populao.
, portanto, responsabilidade da administrao pblica oferecer ao cidado, a
melhor experincia possvel de acesso ao governo eletrnico, respeitando
inclusive, as particularidades da populao atingida.
Entre os vrios aspectos relacionados ao uso da Internet para a prestao de servios
por meios eletrnicos, destaca-se a questo da codificao de pginas dos stios e
portais que deve seguir os padres Web e de boas prticas de implementao, para
garantir seu desenvolvimento estruturado e evolutivo.
Stios e portais que seguem as melhores recomendaes de codificao so mais geis
e versteis, alm de oferecer facilidades para o transporte das mesmas solues para
outros meios eletrnicos como aparelhos celulares, computadores de mo e outros. A
soluo dos problemas mais comuns de formatao gera ganhos imediatos e, em
geral, custa muito pouco para resolver.
para orientar e facilitar o desenvolvimento de stios e portais governamentais
seguindo as melhores prticas da Web que o Departamento de Governo Eletrnico
(DGE) lana esse guia.Trata-se de uma primeira verso que reflete um acmulo de
conhecimento e experincias difundidas internacionalmente at o momento. Assim,
esse documento se oferece, sobretudo como uma referncia para o debate e
contribuies que devero ser incorporadas s prximas verses.
1.1 Diretrizes
As orientaes desse guia seguem quatro diretrizes:
Pginas leves
As pginas devem ter preferencialmente at 50 kb, somados cdigo, contedo
e imagens. Recomenda-se que as pginas no ultrapassem 70kb de tamanho.
Separao da forma do contedo

Separe a estrutura e o contedo da pgina de sua codificao e visual. O
posicionamento, a forma e a cor devem ser criados a partir de folhas de estilo
(CSS).
Pginas em conformidade com os padres Web

Padres Web so especificaes abertas que prevem a acessibilidade desses
documentos ao maior grupo de indivduos possvel.
Pginas independentes de navegador e plataforma

A utilizao de tags ou comandos proprietrios podem comprometer, prejudicar
e at impedir a visualizao e o perfeito funcionamento da pgina em outros
navegadores ou sistemas operacionais.
2. Padres Web
Padres Web so especificaes abertas estabelecidas pelo W3C que so utilizadas
para criar e interpretar o contedo web. Essas tecnologias so desenvolvidas prevendo
a acessibilidade desses documentos ao maior grupo de indivduos possvel.
Quando um documento segue os padres web, significa que:
escrito numa linguagem de marcao vlida, mais comumente em HTML ou

XHTML;
Utiliza folhas de estilo para a apresentao;
Est estruturado de forma semntica;
Funciona em qualquer navegador ou dispositivo que acesse a rede.
Estruturar um documento de forma semntica significa utilizar os elementos da

linguagem de acordo com a funo para as quais foram criados. Utilizando uma
marcao semntica o documento se torna compreensvel para qualquer navegador ou
parser, incluindo aqueles baseados em texto.
Alguns desenvolvedores, principalmente os preocupados com a parte visual da pgina,
pensam que funcionar em qualquer navegador quer dizer que tem o mesmo visual
em qualquer navegador o que uma forma errnea de se pensar o desenvolvimento
de pginas e aplicativos para Web.
Documentos web so visualizados a partir de uma vasta gama de navegadores,
verses, resolues de tela e cor. Usurios podem modificar as caractersticas dos
navegadores de acordo com suas necessidades e preferncias. Esta uma
caracterstica inerente do contedo web. No h necessidade que o contedo tenha o
mesmo visual em todas as plataformas, o que absolutamente necessrio que o
contedo, a aplicao seja acessvel, fcil de ler e que funcione no maior
nmero de plataformas e dispositivos.
Desenvolver e evoluir pginas, stios e portais aplicando os padres web requer um
esforo inicial para o abandono de velhas prticas, mas tambm oferece uma srie de
benefcios tais como:
Simplifica o desenvolvimento e a manuteno: Os ciclos de

desenvolvimento e manuteno so mais curtos, pois o cdigo menor - sem
tabelas de estrutura e aninhadas - e no possui elementos redundantes e
desnecessrios.
Independncia de legado: Utilizar e conhecer os padres permite que os

membros da equipe compreendam o cdigo independente de quem o tenha
escrito.
Estabelece mtricas consistentes: O desenvolvimento seguindo os padres

tem parmetros consistentes de qualidade de cdigo.
Compatibilidade com navegadores futuros e outros dispositivos: Utilizar

os padres reduz o risco das pginas no serem funcionais em outros
dispositivos ou navegadores futuros.
Carregamento e apresentao de pgina mais gil: A utilizao de

padres incorre em menos cdigo escrito. Os navegadores mais modernos
conseguem montar de forma mais gil, uma pgina que siga os padres.
Melhora na acessibilidade: Separar a estrutura da apresentao auxilia a

interpretao do contedo por leitores de tela e dispositivos alternativos de
navegao.
Melhor posicionamento nos resultados de busca: Assim como a separao

do contedo da apresentao facilita a acessibilidade tambm o torna mais
representativo aos motores de busca.
Facilidade de evoluir e adaptar: A adoo de padres facilita a transposio

para outras mdias, como a impresso das pginas e outros dispositivos como
PDAs e celulares apenas utilizando outra folha de estilo.
Diminuio nos custos de hospedagem, manuteno e banda: O

redesenho de pginas seguindo os padres web tem um impacto no
tamanho/peso dos arquivos. Tambm h uma diminuio no tempo de
carregamento e no nmero de arquivos requisitados, reduzindo os custos com
hospedagem e banda.
10
2.1 Cdigo em camadas

Desenvolver seguindo os padres web significa utilizar as linguagens seguindo os
objetivos para a quais elas foram desenvolvidas. Dessa forma o cdigo organizado
em camadas, a saber: contedo, apresentao e comportamento. Nesse guia
trataremos da camada de contedo e da camada de apresentao.
CAMADA
DE
CONTEDO
O desenvolvimento deve sempre comear por esta camada, todo o restante do

processo de desenvolvimento vai depender de como o contedo est estruturado.
Caso o contedo no esteja bem estruturado provvel que as camadas posteriores
apresentem problemas e dificuldades no desenvolvimento que seriam facilmente
resolvidas se a camada de contedo tivesse sido formatada corretamente.
Para desenvolver essa camada utilizado as linguagens de estruturao, HTML,
XHTML, WML ou XML. O contedo dividido em suas partes lgicas com seus blocos
de informaes utilizando os elementos corretos na sua marcao.
Uma forma de se testar se essa camada foi estruturada corretamente abrir o
documento, sem estilos, no navegador e verificar se este compreensvel com uma
estrutura seqencial, que permita a leitura de forma natural.
Para uma melhor compreenso, a partir deste ponto denominaremos os arquivos de
contedo simplesmente como documento HTML, mesmo que este tenha contedo
XHTML, WML ou XML.
CAMADA
DE APRESENTAO
A camada de apresentao a parte visual do contedo. Ela deve ser construda aps
a camada de contedo. A camada de apresentao utiliza as linguagens CSS e XSLT.
O desenvolvimento da camada de apresentao deve primar pela simplicidade. Devese evitar propriedades que causem problemas em dispositivos ou alterar a camada de
contedo apenas para satisfazer uma necessidade especfica da apresentao.
O resultado da apresentao deve ser testado em diversos navegadores,
principalmente os mais usados. Para maiores detalhes veja o captulo Orientaes
gerais sobre testes.
11
importante lembrar que a apresentao pode oferecer diferenas em cada

navegador ou dispositivo utilizado. Considere que isso algo inerente ao meio. O
importante que a pgina ou aplicao funcione.
CAMADA
DE
COMPORTAMENTO
utilizada para modificar o comportamento dos elementos presentes na camada de

contedo, visando melhorar a experincia do usurio. Essa camada opcional,
geralmente no suportada por dispositivos mais antigos. A pgina ou aplicao deve
funcionar na ausncia desse suporte.
Essa camada construda utilizando linguagens de script (javascript) e modelos de
objeto (DOM Document Object Model).
2.2 HTML e XHTML

O HTML (HyperText Markup Language), Linguagem de Marcao de Hipertexto, uma
linguagem usada para a codificao de documentos hipertexto.
O HTML composto por elementos semnticos, que por sua vez so compostos por
tags (etiquetas) que so os comandos de codificao da linguagem. Cada elemento
HTML tem sua funo estrutural, cabealhos, pargrafos, quebras de linha, etc.
Um elemento geralmente composto de tag de abertura, contedo e tag de
fechamento. A tag de fechamento opcional.
Ex: <p>Isto um pargrafo.</p>
No exemplo acima <p> uma tag de abertura de pargrafo e </p> uma tag de
fechamento. H elementos que no utilizam tags de fechamento, como o IMG <img>,
por exemplo. Todos os elementos podem ter atributos. Os atributos definem uma
propriedade do elemento, so colocados sempre na tag de abertura logo aps o nome
do elemento.
Ex: o atributo alt que indica a substituio da imagem pelo texto alternativo.
<img src="/img/bandeira.png" alt="A bandeira do Brasil">.
12
O XHTML (Extensible HyperText Markup Language), a reformulao do HTML 4 para

XML 1.0. Alguns pontos devem ser observados relativos a diferenas entre o XHTML e
o HTML:
Deve-se usar caixa baixa e aspas em todos os valores

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

HTML no possuem tag de fechamento:
errado: <img src=ilustracao.gif alt= >
certo:
<img src= ilustracao.gif alt= />
errado: <p>Todos os elementos devem ser fechados.

certo:
<p> Todos os elementos devem ser fechados.</p>
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" />
No utilizar elementos e atributos em desuso: Essa regra vale tanto para

a adoo do XHTML 1.0 Strict quanto o HTML 4.01 Strict.
Alguns elementos
em desuso: FONT, CENTER - e atributos: alink, width, height (para alguns

elementos) e background. Para uma lista completa consulte o stio da W3C.
2.3 CSS (cascating style sheets)

O CSS, folhas de estilo em cascata, deve ser utilizado para controlar todo o leiaute de
um documento. O suporte ao CSS varia de navegador para navegador, mas de forma
geral, todos suportam o CSS1, apesar de algumas diferenas.
13
SINTAXE CSS
Uma regra CSS consiste em um seletor com uma ou mais declaraes. O seletor
determina qual elemento HTML afetado pela regra. Cada declarao consiste em
uma propriedade e seu valor. O bloco de declarao encapsulado por chaves { } e
cada declarao encerrada por um ponto-e-vrgula ;
EX: h1 { font-weight:bold; color: #fc0; }
Onde: h1 o seletor que significa que a regra afeta o elemento <h1>, a regra contm
duas declaraes que indicam que o elemento est em negrito e tem a cor laranja.
MEDIA TYPES
possvel, atravs dos media type, criar uma folha de estilos para cada dispositivo
que o usurio for acessar, otimizando a apresentao para cada dispositivo.
A especificao prev diversos dispositivos, nem todos com implementao plena:
all todos os tipos de dispositivos;
screen computadores;
print impressoras;
handheld PDAs, mobiles Palmtops;
projection apresentaes, slides;
aural - Sintetizadores de voz;
braille - dispositivos tteis em braille;
embossed - impressoras de braille.
tv televises;
tty - terminais, dispositivos portteis.
Atualmente, apenas as media types, screen e print funcionam perfeitamente. As

demais se encontram em estudo e implementao.
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.
14
CHAMADAS
DE
CSS
H trs formas de chamar, ou anexar, uma folha de estilo em um documento HTML. A

indicada pelos padres e boas prticas a folha externa. As folhas internas e estilos
inline devem ser evitados, pois misturam no documento HTML a apresentao e a
estrutura.
Externa: A folha de estilo se encontra em um ou mais arquivos separados. o

mais recomendado, pois possui diversas vantagens: A folha de estilos
carregada apenas uma vez, o tamanho do documento HTML menor, e
preciso editar apenas um arquivo para mudar a apresentao de todo o site.
Os arquivos contendo o CSS so chamados no cabealho do documento na
seguinte forma:
<link rel="stylesheet" type="text/css" media=screen href="style.css" />
ou utilizando a regra @import rule dentro do elemento <style>:
<style type="text/css">@import url("style.css") screen;</style>
Interna: A folha de estilos descrita no elemento <style> dentro do

cabealho <head>.
EX: <style type="text/css">h1 {font-weight:bold;}</style>
Inline: A regra css encontra-se no corpo do documento HTML.

EX: <h1 style="font-weight:bold;">Nosso ttulo</h1>
A chamada de vrias folhas de estilo para diferentes dispositivos pode ser feita das
seguintes formas:
Externa 1 importando um arquivo CSS usando o @import, aonde primeiro

vem o nome do arquivo e depois o dispositivo a que ele se destina.
@import url("impressao.css") print
Externa 2 Por meio da tag LINK

<link rel=stylesheet type=text/css media=print href=impressao.css />
15
Interna Utilizando o @media. Nessa caso pode ser construdo tanto dentro
do documento HTML (no recomendado) quanto dentro do documento CSS.
No HTML
<style>
@media screen { p {font-family:verdana,sans-serif; font-size:1em;}}
@media print { p {font-family:times,serif; font-size:10pt;}}
</style>
No CSS
@media screen {p {font-family:verdana,sans-serif; font-size:1em;}}
@media print { p { font-family:times,serif; font-size:10pt;}}
16
3. Recomendaes
As recomendaes oferecem um grupo abrangente de boas prticas para o
desenvolvimento da codificao, levando em conta as necessidades de acessibilidade e
usabilidade. As recomendaes esto separadas em: gerais; para o cabealho; para o
corpo do documento; para a apresentao do documento e para utilizao de outros
formatos.
3.1 Recomendaes gerais

1. Utilize arquivos externos para as Folhas de estilo e Javascript.
O CSS e o javascript devem estar sempre em arquivos externos a serem chamados
pelas pginas do stio/portal.
Os arquivos CSS podem ser chamados das seguintes formas:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
ou
<style type="text/css"> @import url("style.css") screen;</style>
J os arquivos javascript devem ser chamados da seguinte forma:

<script type="text/javascript" src="/js/script.js"></script>
2. Limite as requisies HTTP

Muitas requisies HTTP (a quantidade de arquivos chamados: imagens, folhas de
estilo, scripts, vdeos, etc) reduzem o desempenho do navegador.
Limite o nmero de requisies. Folhas de estilo e script externos so carregadas
apenas uma vez, ficando armazenadas no cache do navegador. Com o cache
carregado transfere-se apenas o contedo e eventuais novas imagens.
3. 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.
17
O texto, o contedo principal, nunca deve ser cortado ou de alguma forma prejudicado
na impresso.
O CSS tem uma folha prpria para impresso, atravs da media type print, prevendo
margens, mudana do valor de pixel para pontos, mudana de fonte e quebras de
pgina. Para a criao de folhas de estilo para impresso consulte a especificao
CSS no stio do W3C.
4. Evite a utilizao do recurso quadros (frame).

Pginas utilizando quadros (frame) eram comuns no incio da web e tinham como
funo economizar o uso de arquivos como cabealhos e menus. Com o avano das
novas linguagens e novos aplicativos esse recurso tornou-se obsoleto.
Alguns motivos para o no-uso de quadros:
A impresso dificultada, pois muitos usurios no sabem selecionar o quadro

certo que querem imprimir;
Os servios de busca tm mais dificuldade em indexar pginas com quadros. A

pgina acaba perdendo pontos em sua localizao.
Dificulta a acessibilidade do stio. Pessoas que no usam navegadores grficos

tm mais dificuldade em navegar em pginas com quadros.
5. Evite o uso de pop-ups.

Pop-ups so janelas de diversos tamanhos que abrem com avisos e publicidade. Esse
recurso deve ser evitado a todo o custo em stios governamentais.
Alguns motivos para o no uso de pop-ups:
Os navegadores mais modernos bloqueiam pop-ups. Sendo assim, se algum

informe importante dado pelo pop-up ele no visto.
Pop-ups no so acessveis. Usurios que usam programas leitores de tela

podem se perder, sem saber onde esto ou se realmente entraram no sitio
pretendido.
Alguns pop-ups mais modernos costumam burlar o sistema anti-pop-up dos

navegadores carregando na prpria pgina, atrapalhando a leitura do
contedo.
18
Informaes importantes devem sempre estar em destaque dentro da pgina. Na

diagramao reserve um espao para os destaques, que pode ser desativado caso no
esteja sendo usado. Nunca use pop-ups para avisos importantes, como recadastro de
usurios ou para carregar aplicaes ou novas instncias da pgina.
6. Documente o cdigo.
O cdigo deve ser documentado de forma que qualquer membro da equipe consiga
entend-lo. Blocos de informao devem ser separados com comentrios.
Comentrio (X)HTML

Comentrio CSS
/* isso um comentario css */
7. URLs devem ser amigveis.

Cada pgina de um stio deve ser identificada com sua URL nica e compreensvel.
Certo: http://www.portal.gov.br/contato
Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18
Alm de facilitar a memorizao do endereo para o usurio a primeira opo permite

que mecanismos de busca indexem a pgina. Muitos mecanismos de busca no
indexam pginas que contenham pontos de interrogao (?) ou outro caractere (como
um & ou =) na sua URL.
8. As URLs devem funcionar sem o "www".

Aconselha-se que a URL funcione sem o www. Muitos navegadores j desconsideram o
trigrama e deixam o usurio digitar apenas o nome do domnio.
9. Evite elementos ou atributos proprietrios, em desuso ou obsoletos.

Atributos em desuso (deprecated) ou obsoletos (obsolete) segundo a W3C tendem a
no ser suportados nos dispositivos futuros. Consulte o stio do W3C para a lista de
19
atributos em desuso ou obsoletos.

Atributos proprietrios costumam funcionar apenas nos dispositivos para os quais
foram desenvolvidos. Devem ser usados como subterfgios para resolver problemas
pontuais do prprio navegador e no devem ser utilizados como a soluo padro para
o cdigo.
10. Evite a utilizao desnecessria de elementos HTML e classes.

Mantenha o cdigo o mais limpo e sinttico possvel. Utilize os atributos class e id
com parcimnia assim como os elementos SPAN e DIV.
EX: Criao de um pargrafo diferenciado.
Errado:
<div id="main">
<div class="maincontent">
<p class="maincontenttext">O texto.</p>
</div>
</div>
Nesses casos, deve-se utilizar os seletores contextuais no cdigo CSS:

Certo:
No HTML:
<div id="main">
<div>
<p> O texto. </p>
</div>
</div>
Na folha de estilos:
div#main p { /* regras */ }
11. Evite a utilizao de tabelas para leiautes.

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.
20
3.2 Elementos do cabealho

Entende-se por elementos do cabealho a parte inicial do cdigo, no aparente nos
navegadores, que inclui o DOCTYPE, a declarao de linguagem e demais elementos
encontrados dentro do elemento head - tags <head></head>.
1. Declare o doctype correto da pgina.

Todo documento HTML e XHTML deve declarar o doctype correto para ser considerado
vlido. O doctype informa ao navegador o tipo de documento que deve ser usado ao
carregar a pgina. tambm por meio da declarao de doctype que as ferramentas
de validao analisam o cdigo da pgina e indicam correes.
Os tipos de doctype existentes so:
Strict: Exclui totalmente atributos em desuso e apresentao, tais como

cor de fundo de pgina e tamanho de fontes. Toda a estrutura visual da
pgina deve ser feita a partir de folhas de estilo. A recomendao da W3C
que se d, sempre, preferncia ao Doctype Strict.
Ex:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional: Recomendado para projetos onde h uma transio e

dificuldades em curto prazo com sistemas legados. mais tolerante em
relao utilizao de elementos e atributos de apresentao.
Ex:
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
21
Frameset: usado quando se utiliza quadro (frames) nos stios. O uso de

quadros no recomendado e deve ser desestimulado no desenvolvimento
de novos stios.
Ex:
HTML 4.01 Strict Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Para a lista completa de DOCTYPES consulte o stio da W3C.
2. Declare o Idioma utilizado.

O idioma principal da pgina deve ser declarado. Alm de auxiliar na acessibilidade do
contedo, a indicao correta da linguagem auxilia a indexao correta nos
buscadores.
A declarao de idioma pode ser realizada de vrias formas:
Em HMTL 4.01
<html lang="pt-br">
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" />
Note que a declarao de idioma tambm atende as recomendaes da Cartilha

tcnica do e-Mag Modelo de acessibilidade em Governo Eletrnico.
Alm da linguagem, pode-se indicar a localizao da pgina e o pasalvo, por meio
das seguintes meta-etiquetas:
<meta name="target_country" content="br" />
<meta name="country" content="Brazil" />
22
3. O Ttulo deve ser relevante e presente em todas as pginas.

O ttulo de uma pgina o enunciado entre as tags <title></title> e deve ser um dos
elementos obrigatrios do cabealho. 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. Recomenda-se:
Evitar expresses redundantes como bem-vindo ao stio do ministrio x

ou stio do ministrio x, pgina, homepage, entre outros;
No utilize qualquer tipo de slogan no incio do ttulo, caso necessrio,

utilize aps o nome do rgo ou projeto separado por hfen. Ex:
<title>Projeto XYZ Mais desenvolvimento e cidadania</title>;
Evite o emprego de siglas de instituies ou de seus departamentos,

projetos ou programas.
Utilizar, de preferncia, o assunto da pgina seguido pelo nome do rgo

separado por hfen. Ex: <title>Contato - Ministrio do Planejamento
Oramento e Gesto </title>;
O ttulo deve ter no mximo 60 caracteres;
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. Utilize as tags meta para palavras-chave.
Importante: Alguns buscadores apenas mostraro os primeiros 50 60 caracteres

do ttulo, enquanto outros mostraro o ttulo completo.
4. Descreva a codificao de caracteres da pgina.

De acordo com a W3C, o conjunto de caracteres mais adequados para documentos
XML e HTML 4.0 Unicode (utf-8). importante que a codificao de caracteres para
qualquer documento seja claramente indicada, de modo a que os dispositivos do
cliente possam facilmente mapear a codificao.
A indicao Unicode (utf-8) poder ser feita das seguintes formas:
Usar o parmetro 'charset' no Content-Type do cabealho HTTP.

Content-Type: text/html; charset=utf-8
23
Em XHTML pode-se usar o pseudo-atributo para codificao na declarao xml no

incio do documento ou a declarao textual no incio da entidade.
<?xml version="1.0" encoding="utf-8" ?>
Para HTML ou XHTML pode-se usar a tag <meta> dentro do cabealho <head> do
documento. Sendo que em XHTML, deve-se colocar uma barra "/" no final.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
3.3 Corpo
1. Utilize os elementos corretos para a marcao do cdigo.
Utilize os elementos de marcao de acordo com a sua finalidade. Para marcar ttulos
utilize <h1>, <h2>, <h3>, <h4>, <h5> ou <h6> dependendo do nvel do ttulo ou
subttulo, sendo <h1> o ttulo mais alto. Use o elemento <p> para demarcar os
pargrafos. 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>
24
2. 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.
3. 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.
Ex:
<ol>
<li>Primeiro colocado</li>
<li>Segundo colocado</li>
<li>Terceiro colocado</li>
</ol>
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.
Ex:
<ul>
<li>Quem somos</li>
<li>Projetos</li>
<li>Servios</li>
</ul>
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.
25
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)
Para mais informaes consulte a especificao CSS no stio da W3C.
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.
26
Um formulrio bem estruturado recebe, sem problemas, sua formatao via CSS.
Para maiores detalhes da marcao acessvel em formulrios consulte a cartilha
tcnica do e-MAG.
3.4 Folhas de estilo

1. A folha de estilos deve ser externa.
Apesar de permitido pelo W3C, o uso de estilos inline (estilos dentro do cdigo) para o
HTML 4.01 e para o XHTML 1.0, desaconselhado, pois mistura as camadas de
estrutura e apresentao dificultando a manuteno do cdigo.
A folha de estilos (CSS) deve estar sempre em um ou mais arquivos parte do
cdigo, mantendo a separao entre estrutura e apresentao.
2. A pgina deve ser compreendida e usvel com o css desabilitado.
Alguns recursos como o uso de imagens no lugar de texto, ou de menus dinmicos,
podem incorrer na perda de acessibilidade e compreenso quando o CSS
desabilitado. Assegure-se que a pgina compreensvel e usvel com o CSS
desabilitado.
3. 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 div que contenha uma lista vertical de menu:

Errado: #colunaesquerdavertical {/* regra
Certo: #menu {/* regra
*/}
*/}
EX2: Uma classe que defina um texto de aviso ou advertncia.

Errado: .vermelho {/* regra
Certo: .aviso {/* regra
*/}
*/}
27
4. Ordem e organizao.
Organize a folha de estilos de forma que ela faa sentido aos diversos
desenvolvedores do projeto. Crie blocos de regras lgicos, separados por comentrios
no incio e no final de cada um. Uma lista lgica de regras pode ser separada da
seguinte forma:
1. Regras para estrutura geral do cdigo (*, html, body, cabecalho, rodap, etc);
2. Regras para navegao;
3. Regras para as divs na ordem que aparecem no cdigo;
4. Regras gerais para seletores (H1, H2, etc...);
5. Regras para links;
6. Regras CSS para listas;
7. Regras CSS para elementos dentro das divs;
8. Regras CSS para classes gerais;
9. Outras regras;
Dentro de cada regra defina uma ordem de propriedades (ex: alfabtica) e mantenha
essa ordem para todos os seletores.
Abrevie as regras CSS para as propriedades que assim as admitem. Algumas
propriedades como margin e padding permitem que se abrevie seus valores, seguindo
sempre a ordem de topo, direita, fundo e esquerda:
EX: Dada a declarao:
#contedo {
margin-top: 10px;
margin-right: 8px;
margin-bottom: 0;
margin-left: 20px;
}
Ela pode ser abreviada da seguinte forma:
#contedo {margin: 10px 8px 0 20px; }
Especifique sempre unidades para valores no iguais a zero. O CSS requer que se
especifique as unidades (pixels, ems, percentagem, etc...) em propriedades como
padding, width, height e font-size. A exceo quando esse valor igual a zero (ex:
28
padding=0;). Nesse caso zero zero e no importa que unidade esteja sendo
utilizada.
Links e suas pseudo-classes devem ter regras CSS declaradas em ordem correta para
funcionarem corretamente:
1.
a:link { /* regra */}
2.
a:visited { /* regra */}
3.
a:hover { /* regra */}
4.
a:active { /* regra */}
Seletores semelhantes devem ser agrupados sempre que for possvel:

EX: Todos os cabealhos em negrito com uma linha de borda:
h1, h2, h3, h4, h4, h5, h6 {border: 1px solid #000;}
Utilize a herana CSS e o elemento cascata para simplificar a Folha de Estilos.

EX1: Declare a famlia de fontes no incio do documento, dessa forma no
necessrio declar-la em nenhum outro seletor:
body {font-family: Verdana, Helvetica, Sans-serif; }
PS: Outros seletores que podem ser utilizados: html e * (seletor universal)
EX2: Utilizando o efeito cascata.
h1, h2, h3, h4, h4, h5, h6 {
border: 1px solid #000;
color: #000;
text-align:right;
}
h1 { color: #0000cd; }
Dessa forma os ttulos H1 passam a ter a cor azul, mas mantendo todas as
caractersticas das declaraes anteriores. Para que o efeito de cascata funcione
importante que a regra que altere a declarao ocorra depois da regra geral.
5. Declare famlias de fonte alternativas.

Nem sempre o sistema/navegador que o usurio utiliza possui a fonte escolhida.
Deve-se selecionar uma famlia de fontes possveis, sem exagero no nmero de
29
alternativas. Uma famlia de trs fontes, terminando com uma genrica o ideal.
Deve-se testar o desenho com as fontes alternativas para verificar se h problemas de
leitura.
EX:
p {font-family: Verdana, Helvetica, Sans-Serif;}
6. 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.
7. Utilize preferencialmente letras para nomear classes e ids.

Nomeie classes utilizando apenas letras. O uso de nmeros, underscore e caracteres
especiais, quando no proibidos, so permitidos com restries. O hfen pode ser
utilizado com parcimnia e no pode ser utilizado no incio do nome da classe ou id.
3.5 Uso de scripts e cookies

1. 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.
2. O documento deve ser acessvel mesmo com o script desabilitado.

A camada de comportamento deve ser opcional, pois pode no funcionar em todos os
dispositivos.
3. Evite solues proprietrias e teste o script em diversos navegadores.

O script deve ser testado em diversos navegadores para atestar sua funcionalidade.
Evite solues proprietrias que funcionem apenas em um navegador.
30
4. Fornea uma alternativa ao contedo script utilizando o atributo

NOSCRIPT.
Esse atributo pode conter um link para uma alternativa acessvel do contedo. Para
maiores detalhes sobre alternativa acessveis consulte a Cartilha Tcnica do e-MAG.
5. 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.
6. 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.
3.6 Arquivos em outros formatos e uso de plugins

1. Avalie a real necessidade do uso de um arquivo para baixar.
A opo por um arquivo que deve ser baixado pelo usurio deve ser cuidadosamente
avaliada. Publicaes complexas e extensas, com muitos grficos e dados tabulares,
costumam ser dispostas em formatos prontos para impresso como o PDF. No entanto
importante lembrar, que muitos desses formatos no so acessveis. Muitas vezes o
arquivo tem um tamanho grande demais e demora a ser baixado pelo usurio. Avalie
com cuidado essa soluo e sempre prefira disponibiliz-la em HTML.
2. O nome do arquivo deve ser relacionado ao seu contedo.

O nome do arquivo a ser baixado deve estar de acordo com o contedo do
documento. Nomes genricos como planilha01 ou apresentao.ppt devem ser
evitados. Nomes compostos devem ser separados por hfens -, nunca espaos em
branco ou underscore.
31
3. Evite o uso de formatos proprietrios ou no acessveis.

Toda informao contida em um formato proprietrio ou no acessvel deve estar
tambm disponvel em outra opo acessvel e no-proprietria.
4. Fornea alternativa em texto para vdeo e udio.

Para garantir a acessibilidade deve haver descries dos arquivos de udio e vdeo.
Para maiores detalhes consulte a Cartilha Tcnica do e-MAG.
5. 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.
6. Avalie a real necessidade do uso de um plugin.

Plugins necessitam de instalao e manuteno por parte do usurio. Nem sempre
essa manuteno fcil de ser realizada mesmo por pessoas experientes. Grande
parte dos plugins no acessvel, necessitando que sejam criadas verses alternativas
acessveis.
7. Avise e fornea um endereo de onde o plugin deve ser baixado.

Avise claramente o usurio do uso do plugin. Na mesma pgina onde se encontram os
arquivos para serem baixados, ou a aplicao que necessita de um plugin, deve-se
fornecer o endereo web para obteno do plugin ou leitor. O endereo deve ser da
empresa que mantm o programa. Plugins e leitores no devem ser hospedados em
pginas do governo. Disponibilizar plugins ou leitores no mesmo endereo das pginas
do governo cria trfego desnecessrio e onera os custos com hospedagem.
8. 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 stio.
32
4. Orientaes gerais sobre testes

Testar a apresentao, a estrutura e o funcionamento no stio ou portal em diversos
ambientes uma condio necessria para garantir a melhor experincia de uso
possvel para o usurio.
4.1 Validao
Validao a verificao que se faz para saber se um documento obedece s regras
de linguagem em que foi escrito. Pode-se comparar a validao com a busca por
erros gramaticais e de concordncia em um texto escrito.
As ferramentas de validao permitem verificar no-conformidades no cdigo ou CSS
e til para o diagnstico de erros no cdigo que podem estar interferindo em seu
funcionamento. No entanto, a validao no garante a qualidade da marcao, nem
previne o uso inadequado e o abuso de tags.
Alm das ferramentas de validao para verificao do cdigo, existem outras que
aferem a acessibilidade do contedo.
Para uma lista de alguns validadores disponveis consulte o captulo Recursos.
4.2 Resolues de vdeo.

Recomenda-se que seja testado o comportamento da pgina, no mnimo, em trs
resolues: a padro atual do mercado, uma mais abaixo e uma mais acima.
4.3 Navegadores e sistema

Deve-se testar o CSS e o HTML nos navegadores mais modernos para depois testar
em outros mais antigos. Outra regra a ser seguida testar a pgina em navegadores
que sigam os padres Web, como o Firefox e pera, para depois testar em
navegadores com suporte deficiente aos padres. A seguir uma sugesto de ordem de
teste em navegadores:
33
Firefox e pera em Windows

So os dois navegadores mais prximos dos padres web. Se o desenho e
estrutura da pgina funcionam nesses dois navegadores, poucos ajustes
precisaram ser realizados nas configuraes a seguir.
Internet Explorer 7.0 e 6 em Windows XP
So os navegadores mais utilizados do mercado e possuem muitas noconformidades com os padres web. A Microsoft recomenda que os ajustes de
CSS que precisem ser realizados devem ser feitos por meio de comentrios
condicionais (conditional comments).
Firefox em Linux/Ubuntu
A possibilidade de erros nesse teste pequena, j que o Firefox foi testado
anteriormente no Windows. Os erros mais comuns costumam acontecer na
camada de comportamento.
Safri em Mac
Apesar do nmero menor de usurios em Mac o teste nessa plataforma deve
ser realizado quando possvel.
H casos em que no possvel ter toda a gama de opes de sistemas e
navegadores disponveis para teste. No entanto, possvel contar com ferramentas
que simulam sistemas e navegadores, disponveis na internet. Dentre estas
ferramentas de apoio esto os desktops virtuais, programas que emulam um outro
sistema operacional, e stios que prestam servio de impresso de telas (screenshots)
dos mais diversos navegadores e sistemas.
Para uma lista com algumas ferramentas veja o captulo Recursos.
4.4 Outros dispositivos

Dispositivos mveis
A tendncia um aumento da oferta do nmero de servios governamentais via
celular. Depois da TV, o celular o dispositivo eletrnico de maior uso. A adoo de
um desenho para servios eletrnicos prevendo a sua utilizao algo que deve ser
levado em conta.
34
Uma forma de ofertar o servio de forma diferenciada para esse novo meio o uso de
folhas de estilo (CSS).
Para uma consulta sobre folhas de estilo prprias para cada meio consulte o Captulo
3 Padres Web 3.4 CSS. Para ferramentas de teste veja o captulo Recursos.
Visualizao de impresso
Esse um teste relativamente simples, mas que no deve ser negligenciado. Deve-se
verificar se o contedo central do documento foi impresso satisfatoriamente, se no
h desperdcio de tinta ou papel para o usurio.
4.5 Teste em camadas

O teste em camadas utilizado para verificar a acessibilidade e usabilidade do
contedo em algumas configuraes que podem ser definidas pelo usurio.
Pginas com imagens desabilitadasAlguns usurios mantm o CSS, mas
desabilitam as imagens para um carregamento mais rpido. Devem-se desabilitar as
imagens do navegar e verificar se o entendimento e navegao do contedo esto
intactos.
Navegador sem suporte ao css
Alguns navegadores mais antigos no possuem suporte ao css. Para testar essa
situao, desabilite o css do navegador e verifique se o entendimento e navegao do
contedo esto intactos.
Pgina sem suporte a Javascript
Por questes de segurana muitos usurios mantm o javascript desabilitado.
Navegadores por texto e por voz muitas vezes no compreendem javascript. Deve-se
desabilitar o javascript e verificar se o entendimento e navegao do contedo esto
intactos.
35
4.6 Teste de acessibilidade

Tais como as ferramentas de validao de cdigo, as ferramentas de validao de
acessibilidade no garantem a qualidade do que descrito. Por exemplo, a ferramenta
atesta a existncia de texto alternativo o atributo alt nas imagens, mas no
garante se o que est escrito no texto alternativo condiz com a imagem ou sua
melhor descrio. No entanto, a validao da acessibilidade til na verificao de
no-conformidades e para o diagnstico de erros. Para uma listagem desse
validadores veja o captulo Recursos.
Programas Leitores de Tela
Os usurios com necessidades especiais utilizam-se de programas capazes de ler e
interpretar diretamente a tela do computador. De acordo com o modelo de
acessibilidade em Governo Eletrnico - e-MAG deve-se utilizar esses programas para
testes nais de acessibilidade. Sempre que possvel recomenda-se a utilizao de
usurios com necessidades especiais para efetuar testes nas pginas do stio.
Navegadores de texto
O navegador de texto exibe todo o contedo das pginas na Internet em formato
texto, sem imagem, sons ou animaes, e pode ser usado tanto pelas pessoas
portadoras de deficincia visual como pelas que acessam a Internet com conexo
discada. Pode ainda, ser utilizado em conjunto com o leitor de tela.
Anlise de contraste
importante verificar se o jogo de cores da pgina proporciona contraste suficiente
para leitura do contedo. Alm do conhecimento das escalas de contraste e do bomsenso, alguns testes podem ser realizados. Para uma listagem de algumas dessas
ferramentas veja o captulo Recursos.
Visualizao em letras grandes
A exemplo do contraste deve-se prestar ateno ao funcionamento da pgina no caso
de alterao do tamanho das letras. Muitos usurios usam uma configurao de texto
maior para facilitar a leitura. Para verificar problemas nesses casos pode-se utilizar o
menu de exibio do tamanho de texto no navegador que est sendo utilizado.
36
5. Problemas mais comuns

Abaixo listamos alguns dos problemas mais comuns encontrados durante o
desenvolvimento. O conhecimento das origens desses problemas auxilia na preveno
e diagnstico.
DIFERENAS
DO
MODELO
DE CAIXA ENTRE NAVEGADORES
O modelo de caixa (box model) como se comportam as propriedades de espao

(padding), borda (border), largura (width) e altura (height) dos elementos. O modelo
de caixa se aplica a qualquer seletor que utilize essas propriedades, independente
delas terem sido declaradas ou no.
Alguns dos problemas mais freqentes na apresentao dos documentos referem-se a
diferenas do clculo da largura e altura dos elementos. No modelo de caixa institudo
pela W3C, as propriedades espao e borda so somados largura e altura, sendo
esse modelo entendido dessa forma por diversos navegadores. No entanto, em
navegadores como o Internet Explorer 5.*/Win, as medidas de espao e borda no
so includas na altura e/ou na largura.
EX: No CSS que segue:
div.caixa {
width:300px;
padding:20px;
border:10px solid;
}
De acordo com a W3C a largura total do elemento 360px:
10px + 20px + 300px + 20px + 10px = 360px
No entanto, o Internet Explorer 5.*/Win, interpreta a medida total como 300px, e
a largura final do contedo como 240px.
300px - 10px - 20px - 20px - 10px = 240px
H diversas formas de se contornar o problema como, por exemplo, utilizando

comentrios condicionais, hacks ou evitando declarar a largura, espao ou borda em
um elemento.
37
CUIDADOS
COM A ACESSIBILIDADE AO UTILIZAR IMAGENS NO LUGAR DE TEXTO.
Substituir textos escritos em ttulos e cabealhos por imagens utilizando-se para tanto
das propriedades text-indent e background-image do CSS, visando uma melhoria
esttica da pgina um recurso bastante utilizado no desenho de pginas.
No entanto esse recurso costuma apresentar problemas nos casos em que no
navegador, as imagens esto desabilitadas, mas a folha de estilo est ativa. A forma
encontrada at o momento a adio da tag SPAN vazia e o uso do atributo title.
Para evitar que o mesmo problema ocorra nos leitores de tela, deve-se utilizar a
media screen na chamada da folha de estilos.
Cdigo HTML
<h1 id="cabecalho" title=Governo Federal>
<span></span>Governo Federal</h1>
CSS
#cabecalho {
width: 329px;
height: 25px;
position: relative;
}
#cabecalho span {
background: url(tituloemimagem.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
LAPSO
NA RENDERIZAO DO
IE
Por vezes, quando se utiliza a regra @import para CSS externo, o Internet Explorer
por um lapso de tempo pisca o contedo sem a renderizao do CSS.
Esse problema facilmente contornado utilizando o elemento LINK ou SCRIPT dentro
do cabealho <HEAD></HEAD>. Outras duas formas de solucionar o lapso da
renderizao so:
38
1) Adicionando o elemento LINK

A soluo a seguir consiste em adicionar outra folha de estilo por meio do elemento
LINK. Pode ser uma folha de estilo para outra mdia, como impresso ou,
simplesmente, uma folha de estilos em branco:
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>
2 ) Adicionando o elemento SCRIPT

Outra soluo existente inserir o elemento SCRIPT. Essa soluo recomendada
apenas se a pgina j possui um script funcionando.
<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
39
6. Lista de verificao
A lista de verificao um recurso para avaliar se as recomendaes esto sendo
seguidas no desenvolvimento, evoluo ou manuteno do stio ou portal:
1.
A pgina usa Doctype correto?
2.
A pgina usa o character set de codificao de caracteres correto?
3.
A pgina usa codificao vlida?
4.
A(s) folha(s) de estilo CSS usada pela pgina (so) vlida(s)?
5.
H declaraes de classes ou ID's desnecessrias?
6.
O cdigo bem estruturado?
7.
H links quebrados?
8.
Qual a performance velocidade de carregamento/tamanho da pgina?
9.
A pgina utiliza URL's amigveis?
10. As URLs funcionam sem o "www"?

11. H erros de javascript?
12. A pgina funciona com o javascript desabilitado?
13. O contedo acessvel com as folhas de estilo desabilitadas?
14. O stio usa CSS para todos os aspectos da apresentao?
15. As imagens de apresentao esto includas nas CSS?
16. H quebra do desenho quando o usurio aumenta o tamanho da fonte?
17. O contraste das cores da pgina suficiente?
18. A pgina consistente em navegadores texto?
19. O contedo legvel quando impresso? No h desperdcio de papel ou tinta?
20. A pgina bem visualizada em dispositivos portteis?
21. A pgina bem visualizada em diferentes resolues de navegador e tela?
40
7. Lista de formatos de arquivos e plugins

O objetivo desse captulo de apresentar uma lista resumida dos formatos de
arquivos e plugins mais utilizados. No nosso objetivo incluir todos os itens
existentes.
ARQUIVOS
DE TEXTO
Portable Document File (.pdf)

Arquivos PDF so criados utilizando um aplicativo proprietrio da Adobe. Para leitura
utilizado o programa Adobe Acrobat Reader de uso gratuito. Documentos salvos em
PDF costumam guardar quase a integridade de sua formatao original. O PDF possui
diversos nveis de proteo contra cpias e alteraes indevidas, sendo o formato
mais seguro para documentos oficiais. No entanto, o formato no considerado
acessvel, o que gera a necessidade de dispor de verso alternativa.
Texto (.txt)
o formato mais simples de texto. Documentos salvos em formato texto sero
legveis, porm no tero qualquer formatao alm da quebra de linhas e pargrafos.
Microsoft Word (.doc)
Formato nativo do Microsoft Word, processador de texto proprietrio da Microsoft.
Existem alguns leitores gratuitos da Microsoft, mas no h garantias de
compatibilidade de verses e integridade da formatao. o formato menos indicado
para disponibilizar um arquivo texto para Web.
Rich Text Format (.rtf)
um formato de arquivo que permite a troca de textos entre diferentes processadores
de texto, em diferentes sistemas. Esse formato prefervel aos formatos .DOC.
Open Document Format (ODF)
O Open Document Format (ODF) possui formato aberto e utilizado por vrios
processadores como BROffice, Open Office e sistema web como o Google Docs and
Spreadsheets.
O padro OpenDocument de acesso pblico. Isso significa que pode ser
implementado em qualquer sistema, seja ele de cdigo aberto ou proprietrio. As
Extenses de arquivos usadas pelos documentos do OpenDocument so:
41
.odt para Processadores De Texto (text)
.ods para Planilhas Eletrnicas (spreadsheets)
.odp para Apresentaes em Slides (presentations)
.odg para Editor de imagens (graphics)
.odf para Equaes Matemticas (formulae)
TABULAO
DE DADOS
Sempre que possvel, prefira disponibilizar dados em formato HTML ou PDF.

Comma-Separated Values (.csv)
o formato simples de salvar informao tabular e pode ser importada em qualquer
aplicao de tabulao de dados como Microsoft Excel ou aplicaes de banco de
dados. Um CVS um formato simples de tabulao onde vrgulas (comma em ingls)
separam cada coluna de informao e as linhas so separadas por quebras.
Open Document Spreadsheet (.ods)
Formato aberto de planilha do Open Document Format (ODF), presente em sutes
como BROffice, Open Office e sistema web como o Google Docs and Spreadsheets.
Microsof excel (.xls)
Formato proprietrio do Microsoft Excel.
FORMATOS
DE APRESENTAO
Sempre que possvel, prefira disponibilizar apresentaes em formato HTML ou PDF.

Open Document Presentation (.odp)
Formato aberto de apresentao, presente em sutes como BROffice, Open Office e
sistema web como o Google Docs and Spreadsheets. Ainda pouco utilizado.
Microsoft power point (.ppt .pps)
Formatos proprietrios de apresentaes da Microsoft.
FORMATOS
DE IMAGEM
Graphics Interchange Format (.gif)

O formato GIF utiliza uma palheta de 256 cores, permitindo o uso de fundos
transparentes e de animao. O formato mais indicado para ilustraes de cores
chapadas e a trao , como logotipos e ilustraes, com um nmero limitado de cores.
42
Portable Network Graphics (.png)

um formato livre, utilizado em alternativa ao GIF, recomendado pela W3C. O
formato PNG no tem limitao de 256 cores e permite retirar o fundo de imagens
com o uso do canal alfa, definindo o nvel de opacidade, porm no comporta
animao. Sua indicao a mesma do formato GIF, exceto no caso de animaes,
com mais flexibilidade no uso de cores e transparncias.
Joint Photographic Experts Group (.jpg ou .jpeg)

O formato JPEG is o mais indicado em caso de fotografias, podendo salvar a
informao em mais de 16 milhes de cores. Por outro lado, o JPEG no indicado
para imagens com cores chapadas e a trao devido a criao de diversos artefatos
em torno das linhas e reas chapadas.
FORMATOS
DE COMPRESSO
ZIP (.zip)
O ZIP um dos formatos de compresso mais popular. Um arquivo ZIP contm um ou
mais arquivos que podem estar organizados em pastas e subpastas. Ao descompactar
o arquivo ZIP o usurio tem acesso aos arquivos na sua formatao e organizao
original. Existem diversos programas que criam e extraem contedos de arquivos ZIP.
Alguns so gratuitos outros pagos.
Roshal ARchive (.rar)
O RAR um formato proprietrio de compactao de arquivos. Tem como principais
caractersticas a alta taxa de compresso e o suporte a arquivos grandes (mais de 4
Gb).
MULTIMDIA
Independentemente da escolha do formato multimdia, devem ser fornecidas verses
acessveis para o contedo: trilhas de udio e legenda para vdeos, verses
alternativas em HTML, etc.
43
Flash/ Shockwave (.swf)

Formato de aplicaes multimdia proprietrio da Adobe. O formato permite a criao
de pginas interativas e animadas. O plug-in para visualizao gratuito. No entanto,
o formato ainda possui pouco suporte acessibilidade, no devendo ser utilizado em
banners ou pginas com informaes essenciais como um acesso ao um servio.
Quicktime (.mov)
Formato proprietrio da Apple Computer, utilizado para armazenar seqncias de
vdeo pelos programas/plug-ins QuickTime e iTunes.
Moving Picture Experts Group (MPG/MPEG)
Formato de compresso de udio e vdeo mantido pela International Organization for
Standardization. Sua especificao mais conhecida e utilizada o mp3.
Real Player (RM/RA)
Formato proprietrio da Real Networks Inc para seu tocador Real Player.
Windows Media Player (.wmv/.wma)
Formato proprietrio da Microsoft para udio e vdeo no PC. baseado em uma
coleo de codecs que podem ser usados pelo Windows Media Player.
Active Streaming Format (.asf)
Formato de arquivo da Microsoft para executar vdeo digital via Internet (streaming).
Musical Instrument Digital Interface (.mid ou .midi)
Formato padro de troca de informaes musicais entre instrumentos musicais,
sintetizadores, e computadores.
Audio Video Interleave (.avi)
Formato encapsulador de udio e vdeo proprietrio da Microsoft.
44
8. Recursos
ORGANIZAES
E ESPECIFICAES
World Wide Web Consortium (W3C) - http://www.w3.org

Especificao HTML 4.01 - http://www.w3.org/TR/html401
Especificao XHTML 1.0 http://www.w3.org/TR/xhtml1
Especificao XHTML 1.1 - http://www.w3.org/TR/xhtml11
Especificao CSS 1.0 - http://www.w3.org/TR/CSS1
Especificao CSS 2.1 http://www.w3.org/TR/CSS21
Especificao CSS 3.0 (em construo) - http://www.w3.org/Style/CSS/current-work
Codificao de caracteres - http://www.w3.org/International/O-charset.pt-br.php
Tutoriais W3C - http://www.w3.org/2002/03/tutorials
CSS Paged media - http://www.w3.org/TR/REC-CSS2/page.html
The Web Standards Project - http://www.webstandards.org/
VALIDADORES
DE CDIGO
Validador (X)HTML - http://validator.w3.org

Validador CSS - http://jigsaw.w3.org/css-validator
Validador de Links - http://validator.w3.org/checklink
VALIDADORES
DE ACESSIBILIDADE
ASES (WAI e e-MAG) -
http://www.governoeletronico.gov.br
Da Silva (WAI e e-MAG) -
http://www.acessobrasil.org.br
Cynthia Says (WAI) - http://www.cynthiasays.com

Lift (WAI) - http://www.usablenet.com
TAW (WAI) - http://www.tawdis.net
Hera (WAI) - http://www.sidar.org/hera/
Web@Examinator (WAI) - http://www.acesso.umic.pt/examinator.php
LEITORES
DE TELA
Dosvox/Webvox (desenvolvido no Brasil) - http://intervox.nce.ufrj.br

Virtual Vision (desenvolvido no Brasil) - http://www.micropower.com.br
Jaws for Windows - http://www.freedomscientific.com
Emacspeak - http://emacspeak.sourceforge.net/
Gnopernicus - http://www.baum.ro/gnopernicus.html
Ora - http://live.gnome.org/Orca
45
DISPOSITIVOS
MVEIS
Opera Mini - http://www.operamini.com

Opera Mini Simulator - http://www.operamini.com/features/simulator
NAVEGADOR
TIPO
TEXTO
pera (simulador) - http://www.opera.com

"Exibir > Estilo > Modo usurio > Emular navegador de texto".
Lynx (navegador tipo texto) - http://lynx.browser.org
Lynx Viewer (simulador) - http://www.delorie.com/web/lynxview.html
SERVIOS
DE IMPRESSES DE NAVEGADOR
BrowserCam (pago / trial de 24h) - http://www.browsercam.com

Browsershots (gratuito / screenshots expostas ao pblico) - http://browsershots.org/
DESKTOPS VIRTUAIS
PearPC (Windows) - http://pearpc.sourceforge.net/
VMWare (Linux) - http://www.vmware.com/
IEs4Linux (Linux necessita Wine) - http://www.tatanka.com.br/ies4linux/
Parallels (Mac) - http://www.parallels.com/en/products/workstation/mac
MS Virtual PC - programa para virtualizao da Microsoft
http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx
VISUALIZADORES
DE ARQUIVOS E PLUGINS
Microsoft Word reader software - http://www.microsoft.com/Office/000/viewers.htm

Adobe online accessibility resource - http:// access.adobe.com
Microsoft Excel reader software - http://www.microsoft.com/Office/000/viewers.htm
Adobe Acrobat Reader - http://www.adobe.com/br
Flash player - http://www.macromedia.com/software/flash/
Shockwave player - http://www.macromedia.com/shockwave/
Quicktime player - http://www.apple.com/quicktime/download/
RealPlayer Basic player - http://www.real.com/
ANLISE
DE PERFORMANCE
YSlow - http://developer.yahoo.com/yslow/
Anlise de performance de carregamento da pgina e dicas para melhor-la.
46
EDITORES (X)HTML
CSS
Bluefish (Linux) - http://bluefish.openoffice.nl/index.html

NVU (Windows/Linux /Mac) - http://www.nvu.com
Possui editor visual.
PSPad (Windows) - http://www.pspad.com/en/
Possui dicionrio em portugus-br e integrao com Topstyle (editor CSS).
TopStyle Lite (Windows) - http://www.newsgator.com/NGOLProduct.aspx?
ProdId=TopStyle&ProdView=lite
EXTENSES FIREFOX
Extenses (extensions) so pequenos programas que adicionam funcionalidades ao
Firefox. Para ter acesso as extenses, basta ir a Ferramentas >Complementos>
Extenses > Mais extenses.
Navegador Firefox http://br.mozdev.org/firefox
Web Developer - https://addons.mozilla.org/firefox/60
Vrias ferramentas de desenvolvimento e teste.
HTML validator - https://addons.mozilla.org/firefox/249
Validador HTML baseado no TIDY, permite correes no cdigo.
ColorZilla - https://addons.mozilla.org/firefox/271
Exibe a informao da cor selecionada.
HTML Tidy Library Project - http://tidy.sourceforge.net
Converte HTML para XHTML
Firefox Accessibility Extension
https://addons.mozilla.org/en-US/firefox/addon/1891?
Firebug - http://www.getfirebug.com/
ferramentas para anlise cdigo, folhas de estilo, testes e debug de javascript.
DOM Inspector - http://www.mozilla.org/projects/inspector/
Ferrramenta para visualizar e editar o DOM de um documento.
47
9. Leitura Complementar
e-MAG Modelo de acessibilidade de Governo Eletrnico
http://www.governoeletronico.gov.br/acoese-projetos/e-MAG/
CSS para Webdesign
http://www.maujor.com
O bsico da Web
http://www.obasicodaweb.com/
Revoluo etc
http://www.revolucao.etc.br
Tableless
http://www.tableless.com.br
A List Apart
http://www.alistapart.com
CSS Play
http://www.cssplay.co.uk/
CSS Discuss
http://www.css-discuss.org/
W3 schools
http://www.w3schools.com/
CSS Zen Garden
http://www.csszengarden.com/
48
10. Glossrio
Acessibilidade
Significa permitir o acesso por todos, independente do tipo de usurio, situao ou
ferramenta. Significa ainda, criar ou tornar as ferramentas e pginas web acessveis a
um maior nmero de usurios, inclusive pessoas portadoras de deficincias.
CSS (Cascading Style Sheets Folhas de estilo em cascata)
Linguagem que descreve a apresentao, visual ou sonora, de um documento.
Hack
Hacks so subterfgios utilizados pelos desenvolvedores como forma de contornar
problemas apresentados na apresentao de uma pgina devido deficincia de um
dado navegador entender os padres Web.
Navegador
Programa que permite ao usurio consultar e interagir com o material publicado na
Internet.
Padres Web (Web standards)
Padres Web so regras de tecnologia definidos pelo W3C e outros rgos da rea
utilizados para criar e interpretar o contedo Web.
URI (Uniform Resource Identifier - Identificador Unificado de Recurso)
, basicamente, uma string (conjunto de caracteres) que seguem uma certa sintaxe e
usado para definir identificar um recurso na web. O tipo mais comum de URI a
URL.
URL (Uniform Resource Locator - Localizador Unificado de Recurso)
Um tipo especfico de URI, usado para definir a localizao de um recurso na web.
Geralmente dizemos que a URL o endereo de uma pgina web. Um exemplo de
URL: http://www.exemplo.com/pagina/
W3C (World Wide Web Consortium)
Consrcio de mbito internacional com a finalidade de desenvolver especificaes,
guias e ferramentas para web.
49
WAI: (Accessibility Initiative - Iniciativa de Acessibilidade na Web)

Tem como objetivo desenvolver protocolos que melhorem a interoperabilidade e
promovam a evoluo da www.
XHTML (Extensible HyperText Markup Language)
a linguagem HTML reformulada para seguir as regras do XML.
XML (Extensible Markup Language)
Uma linguagem de marcao semelhante a HTML, mas que permite a descrio de
dados definidos por elementos de programao.
50

E-PWG - Padroes Brasil E-Gov - Cartilha de Codificacao

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

E-PWG - Padroes Brasil E-Gov - Cartilha de Codificacao

Enviado por

Direitos autorais:

Formatos disponíveis

Ministrio do Planejamento, Oramento e Gesto

Secretaria de Logstica e Tecnologia da Informao

Padres Brasil e-Gov

Brasil. Ministrio do Planejamento, Oramento e Gesto. ecretaria

Braslia : MP, SLTI, 2010.

Compartilhar copiar, distribuir e transmitir a obra.

Remixar criar obras derivadas.

Sob as seguintes condies:

Ficando claro que:

Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis;

Os direitos morais do autor;

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

O Departamento de Governo Eletrnico agradece a:

Fabio Augusto Barbosa Gameleira

Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e

DGE Departamento de Governo Eletrnico

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG

Objetivos desse Guia

Esse guia, alm de apresentar recomendaes que sigam os padres web

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Separao da forma do contedo

Pginas em conformidade com os padres Web

Pginas independentes de navegador e plataforma

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

escrito numa linguagem de marcao vlida, mais comumente em HTML ou

Utiliza folhas de estilo para a apresentao;

Est estruturado de forma semntica;

Funciona em qualquer navegador ou dispositivo que acesse a rede.

Estruturar um documento de forma semntica significa utilizar os elementos da

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Simplifica o desenvolvimento e a manuteno: Os ciclos de

Independncia de legado: Utilizar e conhecer os padres permite que os

Estabelece mtricas consistentes: O desenvolvimento seguindo os padres

Compatibilidade com navegadores futuros e outros dispositivos: Utilizar

Carregamento e apresentao de pgina mais gil: A utilizao de

Melhora na acessibilidade: Separar a estrutura da apresentao auxilia a

Melhor posicionamento nos resultados de busca: Assim como a separao

Facilidade de evoluir e adaptar: A adoo de padres facilita a transposio

Diminuio nos custos de hospedagem, manuteno e banda: O

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

2.1 Cdigo em camadas

O desenvolvimento deve sempre comear por esta camada, todo o restante do

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

importante lembrar que a apresentao pode oferecer diferenas em cada

utilizada para modificar o comportamento dos elementos presentes na camada de

2.2 HTML e XHTML

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

O XHTML (Extensible HyperText Markup Language), a reformulao do HTML 4 para

Deve-se usar caixa baixa e aspas em todos os valores

Todos elementos devem ser fechados: incluindo os elementos que em

<img src= ilustracao.gif alt= />

errado: <p>Todos os elementos devem ser fechados.

<p> Todos os elementos devem ser fechados.</p>

<input type="checkbox" id="checkbox1" name="checkbox1"

No utilizar elementos e atributos em desuso: Essa regra vale tanto para

em desuso: FONT, CENTER - e atributos: alink, width, height (para alguns

2.3 CSS (cascating style sheets)

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

all todos os tipos de dispositivos;

handheld PDAs, mobiles Palmtops;