E PWG Codificacao

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

Departamento de Goerno !letr"nico
###$goernoeletronico$go$%r
Padr&es 'e% em Goerno !letr"nico
(artil)a de (odificao
*erso +$,
-.l)o de +/,/

!sta o%ra foi licenciada com .ma Licena (reatie (ommons 0 1tri%.io 0
Partil)a nos Mesmos Termos 2$/ 3o 1daptada
http://creativecommons.org/licenses/by-sa/3.0/br/
*oc4 tem a li%erdade de5
Compartilhar copiar, distribuir e transmitir a obra.
Remixar criar obras derivadas.
So% as seg.intes condi&es5
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.
6icando claro 7.e5
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao

Brasil. Ministrio do Planejamento, Oramento e Gesto. ecretaria
de Logstica e Tecnologia da Informao

Padres Web em Governo Eletrnico : 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
+
1gradecimentos
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.
DG! 8 Departamento de Goerno !letr"nico
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2
9ndice
Padres Web em Governo Eletrnico ................................................................. 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
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :
Padr&es 'e% em Goerno !letr"nico
A presente Cartilha o resultado do Projeto Padres Web em Governo Eletrnico, 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 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 no
endereo: www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov .
O%jetios desse G.ia
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ;
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.
<esponsa%ilidade e man.teno
A manuteno desse documento responsabilidade do Departamento de Governo
Eletrnico - DGE. Questes sobre aspectos desse documento devem ser enviados para
govbr@planejamento.gov.br.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao =
,$ Introd.o
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, responsa%ilidade da administrao p?%lica oferecer ao cidado, a
mel)or e@peri4ncia possel de acesso ao goerno eletr"nico, respeitando
incl.sie, as partic.laridades da pop.lao 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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao A
,$, DiretriBes
As orientaes desse guia seguem quatro diretrizes:
PCginas lees
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 conte?do
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).
PCginas em conformidade com os padr&es 'e%
Padres Web so especificaes abertas que prevem a acessibilidade desses
documentos ao maior grupo de indivduos possvel.
PCginas independentes de naegador 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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao D
+$ Padr&es 'e%
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 a%sol.tamente necessCrio que o
conte?do, a aplicao seja acessel, fCcil de ler e 7.e f.ncione no maior
n?mero de plataformas e dispositios$
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:
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao E
Simplifica o desenolimento e a man.teno5 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.
Independ4ncia de FlegadoG5 Utilizar e conhecer os padres permite que os
membros da equipe compreendam o cdigo independente de quem o tenha
escrito.
!sta%elece mtricas consistentes5 O desenvolvimento seguindo os padres
tem parmetros consistentes de qualidade de cdigo.
(ompati%ilidade com naegadores f.t.ros e o.tros dispositios5 Utilizar
os padres reduz o risco das pginas no serem funcionais em outros
dispositivos ou navegadores futuros.
(arregamento e apresentao de pCgina mais Cgil5 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.
Mel)ora na acessi%ilidade5 Separar a estrutura da apresentao auxilia a
interpretao do contedo por leitores de tela e dispositivos alternativos de
navegao.
Mel)or posicionamento nos res.ltados de %.sca5 Assim como a separao
do contedo da apresentao facilita a acessibilidade tambm o torna mais
representativo aos motores de busca.
6acilidade de eol.ir e adaptar5 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.
Dimin.io nos c.stos de )ospedagem, man.teno e %anda5 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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ,/
+$, (Hdigo 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.
(1M1D1 D! (O3T!IDO
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.
(1M1D1 D! 1P<!S!3T1JKO
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. Deve-
se 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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ,,
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.
(1M1D1 D! (OMPO<T1M!3TO
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).
+$+ LTML e MLTML
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.
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: <p>Isto um pargrafo.</p>
Ex: o atributo alt que indica a substituio da imagem pelo texto alternativo.
<img src="/img/bandeira.png" alt="A bandeira do Brasil">.
,+
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:
Dee0se .sar cai@a %ai@a e aspas em todos os alores
errado5 <A HREF="index.html" CLASS=interno>
certo5 <a href="index.html" class="interno">
Todos elementos deem ser fec)ados5 incluindo os elementos que em
HTML no possuem tag de fechamento:
errado5 <img src=ilustracao.gif alt= >
certo5 <img src= ilustracao.gif alt= />
errado5 <p>Todos os elementos devem ser fechados.
certo5 <p> Todos os elementos devem ser fechados.</p>
3en).m atri%.to pode ser a%reiado5 Em HTML alguns atributos podem ser
minimizados, mas em XHTML isso no permitido.
errado5 <input type="checkbox" id="checkbox1" name="checkbox1"
checked>
certo5 <input type="checkbox" id="checkbox1" name="checkbox1"
checked="checked" />
3o .tiliBar elementos e atri%.tos em des.so5 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 (SS Ncascating stOle s)eetsP
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ,2
SI3T1M! (SS
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 ";
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.
M!DI1 TQP!S
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.
EX: h1 { font-weight:bold; color: #fc0; }
,:
(L1M1D1S D! (SS
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.
!@terna5 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>
Interna5 A folha de estilos descrita no elemento <style> dentro do
cabealho <head>.
EX: <style type="text/css">h1 {font-weight:bold;}</style>
Inline5 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:
!@terna , 8 importando um arquivo CSS usando o @import, aonde primeiro
vem o nome do arquivo e depois o dispositivo a que ele se destina.
!@terna + -Por meio da tag LINK
<link rel=stylesheet type=text/css media=print href=impressao.css />
@import url("impressao.css") print
,;
Interna - Utilizando o @media. Nessa caso pode ser construdo tanto dentro
do documento HTML (no recomendado) quanto dentro do documento CSS.
3o LTML
<style>
@media screen { p {font-family:verdana,sans-serif; font-size:1em;}}
@media print { p {font-family:times,serif; font-size:10pt;}}
</style>
3o (SS
@media screen {p {font-family:verdana,sans-serif; font-size:1em;}}
@media print p font!famil"#times$serif% font!si&e#'(pt%))
,=
2$ <ecomenda&es
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.
2$, <ecomenda&es gerais
,$ RtiliBe ar7.ios e@ternos para as 6ol)as de estilo e -aascript$
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:
J os arquivos javascript devem ser chamados da seguinte forma:
+$ Limite as re7.isi&es LTTP
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.
2$ Todas as pCginas deem ter rec.rsos de impresso amigCel$
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.
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
ou
<style type="text/css"> @import url("style.css") screen;</style>
<script t"pe="text*+a,ascript" src="*+s*script.+s"><*script>
,A
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.
:$ !ite a .tiliBao do rec.rso 7.adros NframeP$
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.
;$ !ite o .so de pop0.ps$
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ,D
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.
=$ Doc.mente o cHdigo$
O cdigo deve ser documentado de forma que qualquer membro da equipe consiga
entend-lo. Blocos de informao devem ser separados com comentrios.
A$ R<Ls deem ser amigCeis$
Cada pgina de um stio deve ser identificada com sua URL nica e compreensvel.
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.
D$ 1s R<Ls deem f.ncionar sem o S###S$
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.
E$ !ite elementos o. atri%.tos proprietCrios, em des.so o. o%soletos$
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
Comentrio (X)HTML

Comentrio CSS
/* isso um comentario css */
(erto5 http://www.portal.gov.br/contato
!rrado5 http://www.portal.gov.br/default.php?reg=2&p_secao=18
,E
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.
,/$ !ite a .tiliBao desnecessCria de elementos LTML 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.
,,$ !ite a .tiliBao de ta%elas para leia.tes$
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.
EX: Criao de um pargrafo diferenciado.
!rrado5 <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:
(erto5
No HTML:
<div id="main">
<div>
<p> O texto. </p>
</div>
</div>
Na folha de estilos:
div#main p { /* regras */ }
+/
2$+ !lementos do ca%eal)o
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>.
,$ Declare o doctOpe correto da pCgina$
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:
Strict5 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.
Transitional5 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#
LTML :$/, Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ex#
LTML :$/, Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
+,
6rameset5 usado quando se utiliza quadro (frames) nos stios. O uso de
quadros no recomendado e deve ser desestimulado no desenvolvimento
de novos stios.
Para a lista completa de DOCTYPES consulte o stio da W3C.
+$ Declare o Idioma .tiliBado$
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:
Note que a declarao de idioma tambm atende as recomendaes da (artil)a
tcnica do e0Mag 8 Modelo de acessi%ilidade em Goerno !letr"nico$
Alm da linguagem, pode-se indicar a localizao da pgina e o pas-alvo, por meio
das seguintes meta-etiquetas:
<meta name="tar-et.co/ntr"" content="0r" *>
<meta name="co/ntr"" content="1ra&il" *>
Em HMTL 4.01
<html lang=Spt0%rS>
Em 2H34L
<html xmlns="http#**555.56.or-*'777*xhtml" @ml5langTSpt0%rS >
Como meta eti8/eta
<meta http!e8/i,="Content!Lan-/a-e" contentTSpt0%rS *>
Ex#
LTML :$/, Strict 6rameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
++
2$ O Tt.lo dee ser releante e presente em todas as pCginas$
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.
Importante5 Alguns buscadores apenas mostraro os primeiros 50 - 60 caracteres
do ttulo, enquanto outros mostraro o ttulo completo.
:$ Descrea a codificao de caracteres da pCgina$
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!3"pe# text*html% charset=/tf!9
+2
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.
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.
2$2 (orpo
,$ RtiliBe os elementos corretos para a marcao do cHdigo$
Utilize os elementos de marcao de acordo com a sua finalidade. Para marcar ttulos
utilize <h'>, <h:>, <h6>, <h;>, <h<> ou <h=> 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.
<?xml version="1.0" encoding="utf-8" ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
EX: Um ttulo de nvel dois.
!rrado5 <div id="main">
<p class="titulosec">
O subttulo
</p>
</div>
(erto5 <div id="main">
<h2>
O subttulo
</h2>
</div>
+:
+$ 1 pCgina dee poss.ir apenas .m elemento L,$
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.
2$ Mar7.e listas de itens e o%jetos de forma ade7.ada$
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 Nordered list 8 Tag OLP5 Sempre que a lista necessitar de
uma ordem, como a classificao em um concurso pblico, a lista ordenada a
escolha correta.
Lista Sem Ordem N.nordered list 8 Tag RLP5 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 Defini&es Ndefinition list 8 tags DL, DT e DDP5 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:
<ol>
<li>Primeiro colocado</li>
<li>Segundo colocado</li>
<li>Terceiro colocado</li>
</ol>
Ex:
<ul>
<li>Quem somos</li>
<li>Projetos</li>
<li>Servios</li>
</ul>
+;
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.
Para mais informaes consulte a especificao CSS no stio da W3C.
:$ Ta%elas deem ser .tiliBadas para dados ta%.lares$
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 cartil)a tcnica
do e0M1G$
;$ 6ormate os form.lCrios de forma correta e acessel$
O formulrio deve ser construdo de forma lgica utilizando os elementos disponveis
corretamente. Os elementos <label>, <fieldset> e <legend> devem ser utilizados.
Ex:
<dl>
<dt>3aegador</dt>
<dd>Programa que permite ao usurio consultar e interagir com o material
publicado na Internet. </dd>
<dt>Padr&es 'e% NWeb standardsP</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>
EX: A lista ordenada tem como padro a lista numrica em ordem crescente, mas
possvel mudar de acordo com o atributo dado:
list0stOle0tOpe5 lower-alpha; (a, b, c, d, e etc)
list0stOle0tOpe: upper-roman ; (I, II, III, IV, V, etc.)
list0stOle0tOpe: decimal-leading-zero ; (01, 02, 03, etc.)
list0stOle0tOpe5 none (nenhum estilo de lista aparece)
+=
Um formulrio bem estruturado recebe, sem problemas, sua formatao via CSS.
Para maiores detalhes da marcao acessvel em formulrios consulte a cartil)a
tcnica do e0M1G$
2$: 6ol)as de estilo
,$ 1 fol)a de estilos dee ser e@terna$
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.
+$ 1 pCgina dee ser compreendida e .sCel com o css desa%ilitado$
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.
2$ 3omeie classes e IDs pela s.a f.no, 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:
!rrado5 #colunaesquerdavertical {/* regra */}
(erto5 #menu {/* regra */}
EX2: Uma classe que defina um texto de aviso ou advertncia.
!rrado5 .vermelho {/* regra */}
(erto5 .aviso {/* regra */}
+A
:$ Ordem e organiBao$
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:

Especifique sempre unidades para valores no iguais a zero. O CSS requer que se
especifique as unidades (pi!els, ems, percentagem, etc...) em propriedades como
padding "idth height e font-si#e. A exceo quando esse valor igual a zero (ex:
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; }
+D
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:
Utilize a herana CSS e o elemento cascata para simplificar a Folha de Estilos.
;$ Declare famlias de fonte alternatias$
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
!M5 Todos os cabealhos em negrito com uma linha de borda:
h1, h2, h3, h4, h4, h5, h6 {border: 1px solid #000;}
!M,5 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)
!M+5 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.
+E
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.
=$ RtiliBe preferencialmente .nidades de taman)o relatias$
Evite o uso de tamanhos de fontes em unidades absolutas p! 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.
A$ RtiliBe 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.
2$; Rso de scripts e cooUies
,$ 3o .tiliBe scripts 7.e no ofeream .m %enefcio releante ao conte?do$
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.
+$ O doc.mento dee ser acessel mesmo com o script desa%ilitado$
A camada de comportamento deve ser opcional, pois pode no funcionar em todos os
dispositivos.
2$ !ite sol.&es proprietCrias e teste o script em diersos naegadores$
O script deve ser testado em diversos navegadores para atestar sua funcionalidade.
Evite solues proprietrias que funcionem apenas em um navegador.
!M5 p {font-family: Verdana, Helvetica, Sans-Serif;}
2/
:$ 6ornea .ma alternatia ao conte?do script .tiliBando o atri%.to
3OS(<IPT$
Esse atributo pode conter um link para uma alternativa acessvel do contedo. Para
maiores detalhes sobre alternativa acessveis consulte a (artil)a Tcnica do e0M1G$
;$ O conte?do e o propHsito de .m cooUie dee ser sempre informado ao
.s.Crio$
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.
=$ O .s.Crio pode rec.sar o .so de .m cooUie sem afetar a .sa%ilidade
central do conte?do$
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.
2$= 1r7.ios em o.tros formatos e .so de pl.gins
,$ 1alie a real necessidade do .so de .m ar7.io para %ai@ar$
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.
+$ O nome do ar7.io dee ser relacionado ao se. conte?do$
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2,
2$ !ite o .so de formatos proprietCrios o. no acesseis$
Toda informao contida em um formato proprietrio ou no acessvel deve estar
tambm disponvel em outra opo acessvel e no-proprietria.
:$ 6ornea alternatia em te@to para deo e C.dio$
Para garantir a acessibilidade deve haver descries dos arquivos de udio e vdeo.
Para maiores detalhes consulte a (artil)a Tcnica do e0M1G$
;$ Informe o taman)o e o formato do ar7.io a ser %ai@ado$
Isso permite que o usurio programe a baixa de arquivos e tenha uma idia de quanto
tempo a tarefa demorar a ser concluda.
=$ 1alie a real necessidade do .so de .m plugin$
%lugins 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.
A$ 1ise e fornea .m endereo de onde o plugin dee ser %ai@ado$
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. %lugins 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.
D$ 3en).ma instalao dee ser necessCria para acessar a pCgina inicial o.
e@ec.tar tarefas %anais$
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2+
:$ Orienta&es gerais so%re 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.
:$, *alidao
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 <ec.rsos.
:$+ <esol.&es de deo$
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.
:$2 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:
6irefo@ e Vpera em 'indo#s
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 22
Internet !@plorer A$/ e = em 'indo#s MP
So os navegadores mais utilizados do mercado e possuem muitas no-
conformidades 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).
6irefo@ em Lin.@WR%.nt.
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.
SafCri 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 <ec.rsos.
:$: O.tros dispositios
Dispositios mHeis
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.
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 (apt.lo
2 Padr&es 'e% 8 2$: (SS. Para ferramentas de teste veja o captulo <ec.rsos.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2:
*is.aliBao 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.
:$; 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.
PCginas com imagens desa%ilitadasAlguns 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.
3aegador sem s.porte 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.
PCgina sem s.porte a Javascript
Por questes de segurana muitos usurios mantm o &avascript desabilitado.
Navegadores por texto e por voz muitas vezes no compreendem &avascript. Deve-se
desabilitar o javascript e verificar se o entendimento e navegao do contedo esto
intactos.
:$= Teste de acessi%ilidade
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 <ec.rsos$
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2;
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 hnais de acessibilidade. Sempre que possvel recomenda-se a utilizao de
usurios com necessidades especiais para efetuar testes nas pginas do stio.
3aegadores de te@to
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.
1nClise 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 bom-
senso, alguns testes podem ser realizados. Para uma listagem de algumas dessas
ferramentas veja o captulo <ec.rsos$
*is.aliBao 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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao 2=
;$ Pro%lemas mais com.ns
Abaixo listamos alguns dos problemas mais comuns encontrados durante o
desenvolvimento. O conhecimento das origens desses problemas auxilia na preveno
e diagnstico.
DI6!<!3J1S DO FMOD!LO D! (1IM1G !3T<! 31*!G1DO<!S
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.
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.
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
2A
(RID1DOS (OM 1 1(!SSIXILID1D! 1O RTILIY1< IM1G!3S 3O LRG1< D! T!MTO$
Substituir textos escritos em ttulos e cabealhos por imagens utilizando-se para tanto
das propriedades te!t-indent e bac'ground-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.
L1PSO 31 <!3D!<IY1JKO DO I!
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:
(Hdigo LTML
<h1 id="cabecalho" title=Governo Federal>
<span></span>Governo Federal</h1>
(SS
#cabecalho {
width: 329px;
height: 25px;
position: relative;
}
#cabecalho span {
background: url(tituloemimagem.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
2D
,P 1dicionando o elemento LI3Z
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:
+ P 1dicionando o elemento S(<IPT
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>
<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>
2E
=$ Lista de erificao
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?
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :/
A$ Lista de formatos de ar7.ios e pl.gins
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.
1<[RI*OS D! T!MTO
Porta%le Doc.ment 6ile N$pdfP
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.
Te@to N$t@tP
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 'ord N$docP
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.
<ic) Te@t 6ormat N$rtfP
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 Doc.ment 6ormat NOD6P
O Open Document Format (ODF) possui formato aberto e utilizado por vrios
processadores como BROffice, Open Office e sistema web como o (oogle )ocs and
*preadsheets.
> padr?o >pen@oc/ment A de acesso pB0lico. Csso si-nifica 8/e pode ser
implementado em 8/al8/er sistema$ se+a ele de cDdi-o a0erto o/ proprietErio. As
ExtensFes de ar8/i,os /sadas pelos doc/mentos do >pen@oc/ment s?o#
$odt para Processadores De Texto (text)
$ods para Planilhas Eletrnicas (spreadsheets)
$odp para Apresentaes em Slides (presentations)
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :,
$odg para Editor de imagens (graphics)
$odf para Equaes Matemticas (formulae)
T1XRL1JKO D! D1DOS
Sempre que possvel, prefira disponibilizar dados em formato HTML ou PDF.
(omma0Separated *al.es N$csP
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 Doc.ment Spreads)eet N$odsP
Formato aberto de planilha do Open Document Format (ODF), presente em sutes
como BROffice, Open Office e sistema web como o (oogle )ocs and *preadsheets.
Microsof e@cel N$@lsP
Formato proprietrio do Microsoft Excel.
6O<M1TOS D! 1P<!S!3T1JKO
Sempre que possvel, prefira disponibilizar apresentaes em formato HTML ou PDF.
Open Doc.ment Presentation N$odpP
Formato aberto de apresentao, presente em sutes como BROffice, Open Office e
sistema web como o (oogle )ocs and *preadsheets. Ainda pouco utilizado.
Microsoft po#er point N$ppt $ppsP
Formatos proprietrios de apresentaes da Microsoft.
6O<M1TOS D! IM1G!M
Graphics Interchange Format N$gifP
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.
Porta%le 3et#orU Grap)ics N$pngP
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :+
-oint P)otograp)ic !@perts Gro.p N$jpg o. $jpegP
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.
6O<M1TOS D! (OMP<!SSKO
YIP N$BipP
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.
<os)al 1<c)ie N$rarP
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).
MRLTIM9DI1
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.
6las)W S)ocU#ae N$s#fP
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.
[.icUtime N$moP
Formato proprietrio da Apple Computer, utilizado para armazenar seqncias de
vdeo pelos programas/plug-ins QuickTime e iTunes.
Moing Pict.re !@perts Gro.p NMPGWMP!GP
Formato de compresso de udio e vdeo mantido pela International Organization for
Standardization. Sua especificao mais conhecida e utilizada o mp3.
<eal PlaOer N<MW<1P
Formato proprietrio da Real Networks Inc para seu tocador Real Player.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :2
'indo#s Media PlaOer N$#mW$#maP
Formato proprietrio da Microsoft para udio e vdeo no PC. baseado em uma
coleo de codecs que podem ser usados pelo Windows Media Player.
1ctie Streaming 6ormat N$asfP
Formato de arquivo da Microsoft para executar vdeo digital via Internet (streaming).
M.sical Instr.ment Digital Interface N$mid o. $midiP
Formato padro de troca de informaes musicais entre instrumentos musicais,
sintetizadores, e computadores.
1.dio *ideo Interleae N$aiP
Formato encapsulador de udio e vdeo proprietrio da Microsoft.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ::
D$ <ec.rsos
O<G13IY1J\!S ! !SP!(I6I(1J\!S
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/
*1LID1DO<!S D! (VDIGO
Validador (X)HTML - http://validator.w3.org
Validador CSS - http://jigsaw.w3.org/css-validator
Validador de Links - http://validator.w3.org/checklink
*1LID1DO<!S D! 1(!SSIXILID1D!
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
L!ITO<!S D! T!L1
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
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :;
DISPOSITI*OS MV*!IS
Opera Mini - http://www.operamini.com
Opera Mini Simulator - http://www.operamini.com/features/simulator
31*!G1DO< TIPO T!MTO
pera (simulador) - http://www.opera.com
+,!ibir - ,stilo - .odo usu/rio - ,mular navegador de te!to+.
Lynx (navegador tipo texto) - http://lynx.browser.org
Lynx Viewer (simulador) - http://www.delorie.com/web/lynxview.html
S!<*IJOS D! IMP<!SS\!S D! 31*!G1DO<
BrowserCam (pago / trial de 24h) - http://www.browsercam.com
Browsershots (gratuito / screenshots expostas ao pblico) - http://browsershots.org/
D!SZTOPS *I<TR1IS
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
*ISR1LIY1DO<!S D! 1<[RI*OS ! PLRGI3S
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/
13]LIS! D! P!<6O<M13(!
YSlow - http://developer.yahoo.com/yslow/
Anlise de performance de carregamento da pgina e dicas para melhor-la.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :=
!DITO<!S NMPLTML ! (SS
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
!MT!3S\!S 6I<!6OM
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.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :A
E$ Leit.ra (omplementar
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
!ableless
http://www.tableless.com.br
A "ist Apart
http://www.alistapart.com
CSS #la$
http://www.cssplay.co.uk/
CSS %iscuss
http://www.css-discuss.org/
W& sc'ools
http://www.w3schools.com/
CSS (en Garden
http://www.csszengarden.com/
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :D
,/$ GlossCrio
1cessi%ilidade
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.
(SS NCascading St$le S'eets ) 6ol)as de estilo em cascataP
Linguagem que descreve a apresentao, visual ou sonora, de um documento.
*ac+
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.
3aegador
Programa que permite ao usurio consultar e interagir com o material publicado na
Internet.
Padr&es 'e% NWeb standardsP
Padres Web so regras de tecnologia definidos pelo W3C e outros rgos da rea
utilizados para criar e interpretar o contedo Web.
R<I N,ni-or. Resource /denti-ier 0 Identificador Rnificado de <ec.rsoP
, 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.
R<L (Rniform <eso.rce Locator 0 LocaliBador Rnificado de <ec.rso)
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#**555.exemplo.com*pa-ina*
'2( N'orld 'ide 'e% (onsorti.mP
Consrcio de mbito internacional com a finalidade de desenvolver especificaes,
guias e ferramentas para web.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao :E
'1I5 NAccessibilit$ /nitiative 0 Iniciatia de 1cessi%ilidade na 'e%P
Tem como objetivo desenvolver protocolos que melhorem a interoperabilidade e
promovam a evoluo da www.
MLTML NE0tensible *$per!e0t Mar+up "anguageP
a linguagem HTML reformulada para seguir as regras do XML.
MML NE0tensible Mar+up "anguageP
Uma linguagem de marcao semelhante a HTML, mas que permite a descrio de
dados definidos por elementos de programao.
Padr&es 'e% em Goerno !letr"nico 8 (artil)a de (odificao ;/

E PWG 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 Codificacao

Enviado por

Direitos autorais:

Formatos disponíveis

Ministrio do Planejamento, Oramento e Gesto

Secretaria de Logstica e Tecnologia da Informao

Você também pode gostar