HTML Padroes Brasil e Gov

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

Recomendaes para Codificao de pginas, stios e portais
Verso 2.0 Maio de 2008
Copyright 2008, Departamento de Governo Eletrnico (DGE) Secretaria de Logstica e Tecnologia da Informao (SLTI) Ministrio do Planejamento, Oramento e Gesto (MPOG). Todos os direitos reservados. Reproduo permitida, mesmo parcial, por qualquer processo, desde que citada a fonte. www.governoeletronico.gov.br
Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica e Tecnologia da Informao. Departamento de Governo Eletrnico. Padres Brasil e-Gov : Recomendaes para codificao de pginas, stios e portais / Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica e Tecnologia da Informao. Departamento de Governo Eletrnico Braslia : MP, 2008. 51p.
1. Tecnologia da informao Administrao pblica I. Ttulo.
2.
Sistema
de
informao
3.
CDU 658.011.56
Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais
ndice
1. 1.1 1.2 1.3 2. 2.1 2.2 2.3 3. 3.1 3.2 3.3 3.4 3.5 3.6 4. 4.1 5. 5.1 5.2 5.3 5.4 5.5 5.6 6. 7. 8. 9. 10. 11. Introduo ............................................................................................... 4 Objetivos desse Guia .............................................................................. 5 Responsabilidade e manuteno ............................................................... 5 Diretrizes .............................................................................................. 6 Padres web ............................................................................................. 7 Cdigo em camadas................................................................................ 9 HTML e XHTML ......................................................................................10 CSS (cascating style sheets) ...................................................................12 Recomendaes .......................................................................................15 Recomendaes gerais ...........................................................................15 Elementos do cabealho .........................................................................19 Corpo...................................................................................................22 Folhas de estilo .....................................................................................25 Uso de scripts e cookies .........................................................................28 Arquivos em outros formatos e uso de plugins ..........................................29 Gerenciadores de contedo .......................................................................31 Escolha do sistema de gerenciamento ......................................................31 Orientaes gerais sobre testes..................................................................33 Validao .............................................................................................33 Resolues de vdeo ..............................................................................33 Navegadores e sistema ..........................................................................33 Outros dispositivos ................................................................................34 Teste em camadas.................................................................................35 Teste de acessibilidade...........................................................................36 Problemas mais comuns............................................................................37 Lista de verificao ...................................................................................40 Lista de formatos de arquivos e plugins ......................................................41 Recursos .................................................................................................45 Leitura complementar ...............................................................................48 Glossrio.................................................................................................49
Agradecimentos
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 contribuio, atravs da Consulta Pblica, com sugestes, esclarecimentos e correes para o presente documento.
A participao de todos foi inestimvel.
DGE Departamento de Governo Eletrnico
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 informaes 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 devem seguir os padres web e de boas prticas de implementao para garantir seu desenvolvimento estruturado e evolutivo.
Stios e portais que seguem recomendaes de codificao so mais geis e versteis, alm de oferecer facilidades para a portabilidade das mesmas solues para outros meios eletrnicos como aparelhos celulares, computadores de mo entre outros. A soluo dos problemas mais comuns de formatao gera ganhos imediatos e, em geral, custa muito pouco para resolver.
O Departamento de Governo Eletrnico (DGE) publica esse Guia para orientar e facilitar o desenvolvimento de stios e portais governamentais seguindo as melhores prticas da web.Trata-se de uma primeira verso que reflete um acmulo de conhecimento e experincias difundidas internacionalmente at o momento. Assim, esse documento se oferece como uma referncia para o debate e contribuies que devero ser incorporadas s prximas verses.
1.1 Objetivos desse Guia

O objetivo desse Guia detalhar as 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 no tem o objetivo do detalhamento do cdigo. No citamos, por exemplo, a lista de atributos considerados obsoletos pela W3C (World Wide Web Consortium) porque o documento ficaria muito extenso e perderia rapidamente sua atualidade. A documentao produzida e mantida pela W3C diversas vezes referenciada nesse Guia e deve ser consultada sempre que necessrio. Esse guia foi concebido para ser prtico e de fcil consulta.
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 apresentao, organizao, navegao e usabilidade.
Alm de apresentar recomendaes que sigam os padres web preconizados pela W3C e de boas prticas recomendadas por outros grupos, esse guia apresenta orientaes para testes e escolha de gerenciadores de contedo.
1.2 Responsabilidade e manuteno

A manuteno desse documento responsabilidade do Departamento de Governo Eletrnico - DGE. Questes sobre dvidas ou informaes devem ser enviadas para padroesegov@governoeletronico.gov.br
1.3 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; e,
Pginas independentes de navegador e plataforma A utilizao de elementos, atributos 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, 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 em uma linguagem de marcao vlida, mais comumente em HTML ou XHTML; Utiliza folhas de estilo (CSS) 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. Ao utilizar uma marcao semntica, o documento se torna compreensvel para qualquer navegador ou dispositivo incluindo aqueles baseados em texto.
Alguns desenvolvedores, principalmente os preocupados com a parte visual da pgina, pensam que funcionar em qualquer navegador quer dizer tem o mesmo visual em qualquer navegador que uma forma errnea de 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 que est unida estruturalmente ao 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 ou elementos desnecessrios;
Independncia de legado Utilizar e conhecer os padres web permite que os membros da equipe compreendam o cdigo independente de quem o tenha escrito;
Estabelece mtricas consistentes O desenvolvimento seguindo os padres web tem parmetros consistentes de qualidade de cdigo;
Compatibilidade com navegadores futuros e outros dispositivos Utilizar os padres web 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 web incorre em menos cdigo escrito e os navegadores conseguem montar a pgina de forma mais gil;
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 web 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 e uma diminuio no tempo de carregamento e nmero de arquivos requisitados, reduzindo os custos com hospedagem e banda.
2.1 Cdigo em camadas

Desenvolver cdigos seguindo os padres web significa utilizar as linguagens seguindo os objetivos para as quais elas foram desenvolvidas. Dessa forma, o cdigo organizado em camadas de contedo, de apresentao e de comportamento. Nesse Guia trataremos da camada de contedo e da camada de apresentao. Camada de contedo O desenvolvimento deve sempre comear por esta camada, assim, 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 so utilizadas linguagens de estruturao como 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 testar se a camada de contedo foi estruturada corretamente abrir o documento, sem estilos, no navegador e verificar se 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 utilizar 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.
Camada de Comportamento utilizada para modificar o comportamento dos elementos presentes na camada de contedo, visando melhorar a experincia do usurio. Essa camada opcional e 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, a 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 como cabealhos, pargrafos, quebras de linha, entre outros.
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 e so colocados sempre na tag de abertura.
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:
10
Deve-se usar caixa baixa e aspas em todos os valores Ex: correto: <a href="index.html" class="interno"> errado: <A HREF="index.html" CLASS=interno> Todos elementos devem ser fechados Incluindo os elementos que em HTML no possuem tag de fechamento: Ex: correto: <img src= ilustracao.gif alt= /> errado: <img src=ilustracao.gif alt= >
correto:
<p> Todos os elementos devem ser fechados.</p>
errado: <p>Todos os elementos devem ser fechados.
Nenhum atributo pode ser abreviado Em HTML, alguns atributos podem ser minimizados, mas em XHTML isso no permitido.
Ex: correto: <input type="checkbox" id="checkbox1" name="checkbox1"
checked="checked" /> errado: <input type="checkbox" id="checkbox1" name="checkbox1" 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.
11
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.
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 Atravs dos media type, possvel criar uma folha de estilos para cada dispositivo que o usurio for acessar, otimizando sua apresentao. 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.
12
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.
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 (estilos dentro do cdigo) 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, por possuir 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 sitio.
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>. <style type="text/css">h1 {font-weight:bold;}</style>
Inline: a regra CSS encontra-se no corpo do documento HTML. <h1 style="font-weight:bold;">Nosso ttulo</h1>
A chamada de vrias folhas de estilo para diferentes dispositivos pode ser feita das seguintes formas:
13
Externa 1 importando um arquivo CSS usando o @import, onde 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 />
Interna Utilizando o @media. Nesse 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;}}
14
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 e 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, entre outros) 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 na utilizao de uma CSS voltada para impresso. Deve-se verificar a real necessidade do
15
usurio, retirando da impresso elementos no relevantes como banners e menus. O texto, 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, porque 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 ou 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 for atravs de pop-ups, 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-ups dos navegadores, carregando na prpria pgina, atrapalhando a leitura do contedo. Esse procedimento considerado invasivo por muitos usurios.
16
Informaes importantes devem sempre estar em destaque dentro da pgina. Na diagramao, reserve um espao para os destaques que podem ser desativados, caso no estejam sendo usados. Nunca use pop-ups para avisos importantes, como recadastramento de usurios, 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.
Correto: 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
17
completa de 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. Nesses casos, deve-se utilizar os seletores contextuais no cdigo CSS:
Correto: No HTML: <div id="main"> <div> <p> O texto. </p> </div> </div> Na folha de estilos: div#main p { /* regras */ }
Errado: <div id="main"> <div class="maincontent"> <p class="maincontenttext">O texto.</p> </div> </div>
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
18
formatar a apresentao visual beneficia a acessibilidade da pgina, inclusive em dispositivos mveis, alm de diminuir consideravelmente o tamanho do cdigo.
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>.
12. 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 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 sempre se d 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">
19
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.
13. 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 certa 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 pas-alvo por meio das seguintes meta-etiquetas:
<meta name="target_country" content="br" /> <meta name="country" content="Brazil" />
20
14. 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. Se for necessrio, utilize aps o nome do rgo ou projeto separado por hfen: Ex: <title>Projeto Verdeamarelo 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-chave. A insero de palavras-chave 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.
15. 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:
21
Usar o parmetro 'charset' no Content-Type do cabealho HTTP:
Content-Type: text/html; charset=utf-8
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
16. 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. Correto: <div id="main"> <h2> O subttulo</h2> </div>
Errado:
<div id="main"> <p class="titulosec"> O subttulo </p> </div>
22
17. A pgina deve possuir apenas um elemento H1 Toda pgina deve possuir necessariamente um e somente um elemento H1. O contedo do cabealho deve guardar semelhana com o contedo do elemento TITLE do cabealho.
18. 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.
23
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 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, ) list-style-type: upper-roman ; (I, II, III, IV, V,...) list-style-type: decimal-leading-zero ; (01, 02, 03, ) list-style-type: none (nenhum estilo de lista aparece)
Para mais informaes, consulte a especificao CSS no stio da W3C.
19. 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.
20. 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. Um formulrio bem estruturado recebe, sem problemas, sua formatao via CSS.
24
Para maiores detalhes da marcao acessvel em formulrios, consulte a Cartilha Tcnica do e-MAG.
3.4 Folhas de estilo

21. 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, porque 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.
22. 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.
23. 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: Correto: #menu {/* regra */} */}
Errado: #colunaesquerdavertical {/* regra
24. Ordem e organizao Organize a folha de estilos de forma que 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:
25
Regras para estrutura geral do cdigo (*, html, body, cabecalho, rodap, entre outros); Regras para navegao; Regras para as divs na ordem que aparecem no cdigo; Regras gerais para seletores (H1, H2, ...); Regras para links; Regras CSS para listas; Regras CSS para elementos dentro das divs; Regras CSS para classes gerais; 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, entre outros) em propriedades como padding, width, height e font-size. A exceo quando esse valor igual a zero (ex: 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:
26
1 a:link { /* regra */}; 2 a:visited { /* regra */}; 2 a:hover { /* regra */}; 4a: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. Ex: 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 altera a declarao ocorra depois da regra geral.
25. Declare famlias de fonte alternativas Nem sempre o sistema/navegador que o usurio utiliza possui a fonte escolhida, devendo-se fornecer alternativas. Um conjunto 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: 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)
27
26. 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.
27. 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

28. 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, entre outros, devem ser evitados.
29. 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. 30. 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.
31. 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 eMAG.
28
32. 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.
33. 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 da pgina principal do stio ou tarefas banais, como uma escolha de seo.
3.6 Arquivos em outros formatos e uso de plugins

34. Avalie a real necessidade do uso de um arquivo para baixar 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.
35. 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 deixe espaos em branco ou underscore.
36. 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.
37. 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.
29
38. Informe o tamanho e o formato do arquivo a ser baixado Permite que o usurio programe a baixa de arquivos e tenha uma idia de quanto tempo a tarefa demorar a ser concluda.
39. 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.
40. Avise e fornea um endereo de onde o plugin deve ser baixado Avise claramente ao usurio a necessidade do plugin. Na mesma pgina deve-se fornecer o endereo web para sua obteno. A URL fornecida deve ser da empresa que mantm o programa. Plugins e leitores no devem ser hospedados em pginas do governo, pois criam trfego desnecessrio.
41. 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.
30
4. Gerenciadores de contedo
O uso de gerenciadores de contedo, tambm conhecidos por CMS (Content Management System) oferece muitas vantagens no desenvolvimento, gerenciamento e manuteno de um stio em comparao com a criao manual de pginas.
Facilidade no gerenciamento de permisses: um bom gerenciador de contedo permite a criao de perfis diferenciados de usurio de acordo com suas necessidades e responsabilidades. Alguns usurios podem ser responsveis apenas pela publicao de notcias, outros podem administrar sees completas de um stio, entre outros;
Manuteno da rvore de navegao: a maior parte dos gerenciadores de contedo capaz de criar estruturas lgicas que podem ser utilizadas como menus e so atualizadas automaticamente pelo gerenciador;
Ferramentas e extenses: muitos gerenciadores de contedo j vm com ferramentas como sistemas de busca e de criao de URLs amigveis. Tambm comum existirem extenses que podem ser adicionadas para atender necessidades especficas como a criao de fruns;
Consistncia visual: por ser baseada em modelos, a manuteno da consistncia visual facilitada.
Conformidade com os padres web e acessibilidade: os gerenciadores costumam vir com modelos de fbrica de acordo com os padres da W3C e, em alguns casos, de acordo com as regras de acessibilidade internacionais.
4.1 Escolha do sistema de gerenciamento

Antes da escolha do sistema a equipe deve fazer um levantamento de suas necessidades. Existem diversos gerenciadores de contedo com diferentes nveis de complexidade, tamanhos e suporte. Um gerenciador de contedo x que serve para o desenvolvimento de um portal, pode ser complexo demais para a manuteno de um stio promocional. Alm dessa anlise, outros fatores a serem levados em conta so:
31
O gerenciador cria pginas de acordo com os padres web? As perguntas O gerenciador est de acordo com os padres web? e Seus modelos nativos esto validados? so fundamentais para verificar se o gerenciador de contedo est de acordo com os padres web;
O gerenciador cria pginas HTML acessveis? importante lembrar que, apesar do gerenciador vir com estas caractersticas nativas, as mesmas podem ser perdidas na confeco dos modelos ou customizaes no sistema;
O gerenciador possui todos os elementos necessrios criao do stio e/ou possui extenses que supram a necessidade do administrador? importante saber que recursos sero necessrios no stio: chats, ferramentas de fruns e, se o gerenciador dispem delas;
O gerenciador de contedo possui uma boa rede de suporte? Fruns e pginas especializadas onde se possam esclarecer as dvidas? Antes de adotar qualquer ferramenta interessante fazer um estudo do material de apoio. As FAQS so fceis de serem compreendidas? O frum ativo e as respostas s dvidas so condizentes? Qual o apoio em portugus?
O gerenciador permite a criao de mltiplos perfis? O gerenciador permite a criao de perfis de publicao de acordo com as reas, sees e nveis de responsabilidade (ex: usurio, editor, administrador)?
Qual a complexidade do sistema? Qual a curva de aprendizado do sistema? Qual a opinio de usurios sobre o uso do sistema?
O gerenciador capaz de criar URLs estveis e amigveis? As URLs so estveis, permanecendo a mesma com a alterao do contedo ou insero de novos? O sistema possui um dispositivo para criao de URLs amigveis?
O gerenciador responde de forma rpida? Qual a sua capacidade de requisies? Qual a carga de requisies que o sistema agenta? Qual a resposta do sistema em cada intervalo de nmero de requisies?
32
5. 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.
5.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, so teis 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.
5.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 outra mais acima.
5.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 precisaro 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 por imitao um outro sistema operacional alm de 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.
5.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 deve ser levada 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.
5.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 desabilitadas: alguns 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
5.6 Teste de acessibilidade

Assim 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 desses 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 Esse tipo de navegador exibe todo o contedo das pginas na Internet em formato texto, sem imagem, sons ou animaes, e pode ser usado tanto por usurios portadores de deficincia visual como por usurios 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
6. Problemas mais comuns

Destacamos abaixo 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 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.
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%; }
Para evitar que o mesmo problema ocorra nos leitores de tela, deve-se utilizar a media screen na chamada da folha de estilos.
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
7. 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. 2. 3. 4. 5. 6. 7. 8. 9.
A pgina usa Doctype correto? A pgina usa o character set de codificao de caracteres correto? A pgina usa codificao vlida? A(s) folha(s) de estilo CSS usada(s) pela pgina (so) vlida(s)? H declaraes de classes ou IDs desnecessrias? O cdigo bem estruturado? H links quebrados? Qual a performance velocidade de carregamento/tamanho da pgina? A pgina utiliza URLs 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
8. 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.
42
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. 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).
43
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, entre outras. Flash/ Shockwave (.swf) Formato de aplicaes multimdia proprietrio da Adobe. O formato permite a criao de pginas interativas e animadas. O plugin 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 - Computador pessoal (do ingls personal computer). baseado em uma coleo de Codecs - dispositivo que codifica/decodifica sinais e 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
9. Recursos
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 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/
45
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 Adobe online accessibility resource - http:// access.adobe.com/ 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. EDITORES (X)HTML E 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
46
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
10. Leitura complementar

Organizaes e especificaes Codificao de caracteres - http://www.w3.org/International/O-charset.pt-br.php CSS Paged media - http://www.w3.org/TR/REC-CSS2/page.html 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 The Web Standards Project - http://www.webstandards.org/ Tutoriais W3C - http://www.w3.org/2002/03/tutorials World Wide Web Consortium (W3C) - http://www.w3.org
Governo Eletrnico Brasileiro e-MAG - http://www.governoeletronico.gov.br/acoese-projetos/e-MAG/ Resoluo n7 http://www.governoeletronico.gov.br/o-gov.br/legislacao
Stios em portugusCSS para Webdesign - http://www.maujor.com/ O bsico da Web - http://www.obasicodaweb.com/ Revoluo etc - http://www.revolucao.etc.br/
Stios em ingls A List Apart - http://www.alistapart.com CSS Discuss - http://www.css-discuss.org/ CSS Play - http://www.cssplay.co.uk/ CSS Zen Garden - http://www.csszengarden.com/ W3 schools - http://www.w3schools.com/ Goggle Doctype - http://code.google.com/doctype/
Stios em espanhol Anieto2K - http://www.anieto2k.com/ Estndares y accesibilidad - http://www.estandaresyaccesibilidad.com/ Ser accesible - http://www.seraccesible.net/ Usable y accesible http://olgacarreras.blogspot.com/
48
11.
Acessibilidade
Glossrio
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.
CoDec Acrnimo de Codificador/Decodificador. Dispositivo de hardware ou software que codifica/decodifica sinais. Existem dois tipos de CoDecs: Sem perdas (lossless) e Com perdas (lossy). Os CoDecs sem perdas codificam o som ou imagem sem alterar a qualidade original. Esse tipo de CoDec normalmente utilizado em rdios e emissoras de televiso. Os CoDecs geram arquivos com perda de qualidade mas com maiores taxas de compresso. Esse tipo de CoDec o mais utilizado para arquivos a serem utilizados na internet.
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.
Parser Um Parser um programa de computador (ou apenas um componente de um programa) que analisa a estrutura de uma entrada segundo uma determinada gramtica formal.
49
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.
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

HTML Padroes Brasil e Gov

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Padroes Brasil e Gov

Enviado por

Direitos autorais:

Formatos disponíveis

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Governo Eletrnico www.governoeletronico.gov.

Padres Brasil e-Gov

Verso 2.0 Maio de 2008

1. Tecnologia da informao Administrao pblica I. Ttulo.

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

A participao de todos foi inestimvel.

DGE Departamento de Governo Eletrnico

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

1.1 Objetivos desse Guia

1.2 Responsabilidade e manuteno

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

2.1 Cdigo em camadas

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

2.2 HTML e XHTML

Ex: <p>Isto um pargrafo.</p>

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

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

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

Ex: correto: <input type="checkbox" id="checkbox1" name="checkbox1"

checked="checked" /> errado: <input type="checkbox" id="checkbox1" name="checkbox1" checked>

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

2.3 CSS (cascating style sheets)

Ex: h1 { font-weight:bold; color: #fc0; }

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

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>

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

No CSS @media screen {p {font-family:verdana,sans-serif; font-size:1em;}} @media print { p { font-family:times,serif; font-size:10pt;}}

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

3.1 Recomendaes gerais

J os arquivos javascript devem ser chamados da seguinte forma:

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

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Correto: http://www.portal.gov.br/contato Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

completa de atributos em desuso ou obsoletos.

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

3.2 Elementos do cabealho

Os tipos de doctype existentes so:

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Para a lista completa de DOCTYPES, consulte o stio da W3C.

<meta name="target_country" content="br" /> <meta name="country" content="Brazil" />

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Evite o emprego de siglas de instituies ou de seus departamentos, projetos ou programas;

O ttulo deve ter no mximo 60 caracteres;

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Usar o parmetro 'charset' no Content-Type do cabealho HTTP:

Content-Type: text/html; charset=utf-8

<?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" / >

<div id="main"> <p class="titulosec"> O subttulo </p> </div>

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

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>

Padres Brasil e-Gov - Recomendaes para Codificao de pginas, stios e portais

Para mais informaes, consulte a especificao CSS no stio da W3C.