Padrões Brasil e-GOV - Cartilha de Codificação

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Governo Eletrnico www.governoeletronico.gov.
br
Padres Brasil e-Gov
Cartilha de Codificao
Verso 2.1 Julho de 2010
Brasil. Ministrio do Planejamento, Oramento e Gesto. ecretaria de Logstica e Tecnologia da Informao Padres Web em Governo Eletrnico e-PWG : Cartilha de Codificao / Ministrio do Planejamento, Oramento e Gesto, Secretaria de Logstica e Tecnologia da Informao 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 Braslia : MP, SLTI, 2010.
Esta obra foi licenciada com uma Licena Creative Commons - Atribuio Partilha nos Mesmos Termos 3.0 No Adaptada http://creativecommons.org/licenses/by-sa/3.0/br/ Voc tem a liberdade de: Compartilhar copiar, distribuir e transmitir a obra. Remixar criar obras derivadas. Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante (mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da obra). Compartilhamento pela mesma licena Se voc alterar, transformar ou criar em cima desta obra, voc poder distribuir a obra resultante apenas sob a mesma licena, ou sob uma licena similar presente. Ficando claro que: Renncia Qualquer das condies acima pode ser renunciada se voc obtiver permisso do titular dos direitos autorais. Domnio Pblico Onde a obra ou qualquer de seus elementos estiver em domnio pblico sob o direito aplicvel, esta condio no , de maneira alguma, afetada pela licena. Outros Direitos Os seguintes direitos no so, de maneira alguma, afetados pela licena: Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis; Os direitos morais do autor; Direitos que outras pessoas podem ter sobre a obra ou sobre a utilizao da obra, tais como direitos de imagem ou privacidade. Aviso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os termos da licena a que se encontra submetida esta obra.
Sob as seguintes condies:
Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao
Agradecimentos
O Departamento de Governo Eletrnico agradece a:
Fabio Augusto Barbosa Gameleira Luis Flavio Loreto da Rocha Luiz Agner Maysa Alves Miriam Hitomi Simofusa Nohab Santos Carvalho Rocha Thiago Prado de Campos
Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e correes para o presente documento. A participao de todos foi inestimvel.
DGE Departamento de Governo Eletrnico
ndice
Padres Web em Governo Eletrnico e-PWG.......................................................5 Objetivos desse Guia.......................................................................................5 Responsabilidade e manuteno.......................................................................6 1. Introduo.....................................................................................................7 1.1 Diretrizes..................................................................................................8 2. Padres Web..................................................................................................9 2.1 Cdigo em camadas..................................................................................11 2.2 HTML e XHTML.........................................................................................12 2.3 CSS (cascating style sheets)......................................................................13 3. Recomendaes ...........................................................................................17 3.1 Recomendaes gerais..............................................................................17 3.2 Elementos do cabealho............................................................................21 3.3 Corpo..................................................................................................... 24 3.4 Folhas de estilo........................................................................................27 3.5 Uso de scripts e cookies............................................................................ 30 3.6 Arquivos em outros formatos e uso de plugins............................................. 31 4. Orientaes gerais sobre testes ..................................................................... 33 4.1 Validao................................................................................................ 33 4.2 Resolues de vdeo................................................................................. 33 4.3 Navegadores e sistema............................................................................. 33 4.4 Outros dispositivos................................................................................... 34 4.5 Teste em camadas....................................................................................35 4.6 Teste de acessibilidade..............................................................................35 5. Problemas mais comuns................................................................................ 37 6. Lista de verificao....................................................................................... 40 7. Lista de formatos de arquivos e plugins........................................................... 41 8. Recursos.....................................................................................................45 9. Leitura Complementar...................................................................................48 10. Glossrio...................................................................................................49
Padres Web em Governo Eletrnico e-PWG

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

O objetivo desse guia detalhar recomendaes de boas prticas em codificao, que orientem as equipes no desenvolvimento de stios, portais e servios de governo eletrnico com o propsito de torn-los identificveis, portveis, relevantes, acessveis e efetivos populao. Esse guia foi concebido para ser prtico e de fcil consulta. No o objetivo desse guia o detalhamento do cdigo. No citamos, por exemplo, a lista de atributos considerados obsoletos pela W3C (World Wide Web Consortium). O documento ficaria por demais extenso e perderia rapidamente sua atualidade. A documentao produzida e mantida pela W3C diversas vezes referenciada no guia e deve ser consultada sempre que se considerar necessrio. A codificao constituiu-se de um conjunto de arquivos com funo de contedo, apresentao e comportamento. o esqueleto, a estrutura que d suporte aos aspectos da pgina relacionados a apresentao, organizao, navegao e usabilidade.
Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao 5
Esse guia, alm de apresentar recomendaes que sigam os padres web preconizados pela W3C e de boas prticas recomendadas por outros grupos, apresenta orientaes para testes e escolha de gerenciadores de contedo.
Responsabilidade e manuteno
A manuteno desse documento responsabilidade do Departamento de Governo Eletrnico - DGE. Questes sobre aspectos desse documento devem ser enviados para padroesegov@governoeletronico.gov.br
1. Introduo
As Tecnologias de Informao e Comunicao (TICs) so instrumentos cada vez mais importantes no desenvolvimento de ferramentas que melhorem a prestao de servios e a disponibilizao de informaes primordiais para os cidados. A adoo dessas tecnologias permite o aumento da eficcia, da eficincia e da transparncia governamental. A adoo de meios eletrnicos para a prestao dos servios governamentais exige que os stios e portais desenvolvidos e mantidos pela administrao pblica sejam fceis de usar, relevantes e efetivos. Somente por meio da eficincia possvel aumentar a satisfao dos usurios de servios eletrnicos e conquistar, gradativamente, uma parcela cada vez maior da populao. , portanto, responsabilidade da administrao pblica oferecer ao cidado, a melhor experincia possvel de acesso ao governo eletrnico, respeitando inclusive, as particularidades da populao atingida. Entre os vrios aspectos relacionados ao uso da Internet para a prestao de servios por meios eletrnicos, destaca-se a questo da codificao de pginas dos stios e portais que deve seguir os padres Web e de boas prticas de implementao, para garantir seu desenvolvimento estruturado e evolutivo. Stios e portais que seguem as melhores recomendaes de codificao so mais geis e versteis, alm de oferecer facilidades para o transporte das mesmas solues para outros meios eletrnicos como aparelhos celulares, computadores de mo e outros. A soluo dos problemas mais comuns de formatao gera ganhos imediatos e, em geral, custa muito pouco para resolver. para orientar e facilitar o desenvolvimento de stios e portais governamentais seguindo as melhores prticas da Web que o Departamento de Governo Eletrnico (DGE) lana esse guia.Trata-se de uma primeira verso que reflete um acmulo de conhecimento e experincias difundidas internacionalmente at o momento. Assim, esse documento se oferece, sobretudo como uma referncia para o debate e contribuies que devero ser incorporadas s prximas verses.
1.1 Diretrizes
As orientaes desse guia seguem quatro diretrizes: Pginas leves As pginas devem ter preferencialmente at 50 kb, somados cdigo, contedo e imagens. Recomenda-se que as pginas no ultrapassem 70kb de tamanho. Separao da forma do contedo Separe a estrutura e o contedo da pgina de sua codificao e visual. O posicionamento, a forma e a cor devem ser criados a partir de folhas de estilo (CSS). Pginas em conformidade com os padres Web Padres Web so especificaes abertas que prevem a acessibilidade desses documentos ao maior grupo de indivduos possvel. Pginas independentes de navegador e plataforma A utilizao de tags ou comandos proprietrios podem comprometer, prejudicar e at impedir a visualizao e o perfeito funcionamento da pgina em outros navegadores ou sistemas operacionais.
2. Padres Web
Padres Web so especificaes abertas estabelecidas pelo W3C que so utilizadas para criar e interpretar o contedo web. Essas tecnologias so desenvolvidas prevendo a acessibilidade desses documentos ao maior grupo de indivduos possvel. Quando um documento segue os padres web, significa que: escrito numa linguagem de marcao vlida, mais comumente em HTML ou XHTML; Utiliza folhas de estilo para a apresentao; Est estruturado de forma semntica; Funciona em qualquer navegador ou dispositivo que acesse a rede.
Estruturar um documento de forma semntica significa utilizar os elementos da linguagem de acordo com a funo para as quais foram criados. Utilizando uma marcao semntica o documento se torna compreensvel para qualquer navegador ou parser, incluindo aqueles baseados em texto. Alguns desenvolvedores, principalmente os preocupados com a parte visual da pgina, pensam que funcionar em qualquer navegador quer dizer que tem o mesmo visual em qualquer navegador o que uma forma errnea de se pensar o desenvolvimento de pginas e aplicativos para Web. Documentos web so visualizados a partir de uma vasta gama de navegadores, verses, resolues de tela e cor. Usurios podem modificar as caractersticas dos navegadores de acordo com suas necessidades e preferncias. Esta uma caracterstica inerente do contedo web. No h necessidade que o contedo tenha o mesmo visual em todas as plataformas, o que absolutamente necessrio que o contedo, a aplicao seja acessvel, fcil de ler e que funcione no maior nmero de plataformas e dispositivos. Desenvolver e evoluir pginas, stios e portais aplicando os padres web requer um esforo inicial para o abandono de velhas prticas, mas tambm oferece uma srie de benefcios tais como:
Simplifica o desenvolvimento e a manuteno: Os ciclos de desenvolvimento e manuteno so mais curtos, pois o cdigo menor - sem tabelas de estrutura e aninhadas - e no possui elementos redundantes e desnecessrios.
Independncia de legado: Utilizar e conhecer os padres permite que os membros da equipe compreendam o cdigo independente de quem o tenha escrito.
Estabelece mtricas consistentes: O desenvolvimento seguindo os padres tem parmetros consistentes de qualidade de cdigo.
Compatibilidade com navegadores futuros e outros dispositivos: Utilizar os padres reduz o risco das pginas no serem funcionais em outros dispositivos ou navegadores futuros.
Carregamento e apresentao de pgina mais gil: A utilizao de padres incorre em menos cdigo escrito. Os navegadores mais modernos conseguem montar de forma mais gil, uma pgina que siga os padres.
Melhora na acessibilidade: Separar a estrutura da apresentao auxilia a interpretao do contedo por leitores de tela e dispositivos alternativos de navegao.
Melhor posicionamento nos resultados de busca: Assim como a separao do contedo da apresentao facilita a acessibilidade tambm o torna mais representativo aos motores de busca.
Facilidade de evoluir e adaptar: A adoo de padres facilita a transposio para outras mdias, como a impresso das pginas e outros dispositivos como PDAs e celulares apenas utilizando outra folha de estilo.
Diminuio nos custos de hospedagem, manuteno e banda: O redesenho de pginas seguindo os padres web tem um impacto no tamanho/peso dos arquivos. Tambm h uma diminuio no tempo de carregamento e no nmero de arquivos requisitados, reduzindo os custos com hospedagem e banda.
10
2.1 Cdigo em camadas

Desenvolver seguindo os padres web significa utilizar as linguagens seguindo os objetivos para a quais elas foram desenvolvidas. Dessa forma o cdigo organizado em camadas, a saber: contedo, apresentao e comportamento. Nesse guia trataremos da camada de contedo e da camada de apresentao. CAMADA
DE
CONTEDO
O desenvolvimento deve sempre comear por esta camada, todo o restante do processo de desenvolvimento vai depender de como o contedo est estruturado. Caso o contedo no esteja bem estruturado provvel que as camadas posteriores apresentem problemas e dificuldades no desenvolvimento que seriam facilmente resolvidas se a camada de contedo tivesse sido formatada corretamente. Para desenvolver essa camada utilizado as linguagens de estruturao, HTML, XHTML, WML ou XML. O contedo dividido em suas partes lgicas com seus blocos de informaes utilizando os elementos corretos na sua marcao. Uma forma de se testar se essa camada foi estruturada corretamente abrir o documento, sem estilos, no navegador e verificar se este compreensvel com uma estrutura seqencial, que permita a leitura de forma natural. Para uma melhor compreenso, a partir deste ponto denominaremos os arquivos de contedo simplesmente como documento HTML, mesmo que este tenha contedo XHTML, WML ou XML. CAMADA
DE APRESENTAO
A camada de apresentao a parte visual do contedo. Ela deve ser construda aps a camada de contedo. A camada de apresentao utiliza as linguagens CSS e XSLT. O desenvolvimento da camada de apresentao deve primar pela simplicidade. Devese evitar propriedades que causem problemas em dispositivos ou alterar a camada de contedo apenas para satisfazer uma necessidade especfica da apresentao. O resultado da apresentao deve ser testado em diversos navegadores, principalmente os mais usados. Para maiores detalhes veja o captulo Orientaes gerais sobre testes.
11
importante lembrar que a apresentao pode oferecer diferenas em cada navegador ou dispositivo utilizado. Considere que isso algo inerente ao meio. O importante que a pgina ou aplicao funcione. CAMADA
DE
COMPORTAMENTO
utilizada para modificar o comportamento dos elementos presentes na camada de contedo, visando melhorar a experincia do usurio. Essa camada opcional, geralmente no suportada por dispositivos mais antigos. A pgina ou aplicao deve funcionar na ausncia desse suporte. Essa camada construda utilizando linguagens de script (javascript) e modelos de objeto (DOM Document Object Model).
2.2 HTML e XHTML

O HTML (HyperText Markup Language), Linguagem de Marcao de Hipertexto, uma linguagem usada para a codificao de documentos hipertexto. O HTML composto por elementos semnticos, que por sua vez so compostos por tags (etiquetas) que so os comandos de codificao da linguagem. Cada elemento HTML tem sua funo estrutural, cabealhos, pargrafos, quebras de linha, etc. Um elemento geralmente composto de tag de abertura, contedo e tag de fechamento. A tag de fechamento opcional. Ex: <p>Isto um pargrafo.</p>
No exemplo acima <p> uma tag de abertura de pargrafo e </p> uma tag de fechamento. H elementos que no utilizam tags de fechamento, como o IMG <img>, por exemplo. Todos os elementos podem ter atributos. Os atributos definem uma propriedade do elemento, so colocados sempre na tag de abertura logo aps o nome do elemento. Ex: o atributo alt que indica a substituio da imagem pelo texto alternativo. <img src="/img/bandeira.png" alt="A bandeira do Brasil">.
12
O XHTML (Extensible HyperText Markup Language), a reformulao do HTML 4 para XML 1.0. Alguns pontos devem ser observados relativos a diferenas entre o XHTML e o HTML: Deve-se usar caixa baixa e aspas em todos os valores errado: <A HREF="index.html" CLASS=interno> certo: <a href="index.html" class="interno"> Todos elementos devem ser fechados: incluindo os elementos que em HTML no possuem tag de fechamento: errado: <img src=ilustracao.gif alt= > certo: <img src= ilustracao.gif alt= />
errado: <p>Todos os elementos devem ser fechados. certo: <p> Todos os elementos devem ser fechados.</p>
Nenhum atributo pode ser abreviado: Em HTML alguns atributos podem ser minimizados, mas em XHTML isso no permitido. errado: <input type="checkbox" id="checkbox1" name="checkbox1" checked> certo: <input type="checkbox" id="checkbox1" name="checkbox1" checked="checked" /> No utilizar elementos e atributos em desuso: Essa regra vale tanto para a adoo do XHTML 1.0 Strict quanto o HTML 4.01 Strict. Alguns elementos em desuso: FONT, CENTER - e atributos: alink, width, height (para alguns elementos) e background. Para uma lista completa consulte o stio da W3C.
2.3 CSS (cascating style sheets)

O CSS, folhas de estilo em cascata, deve ser utilizado para controlar todo o leiaute de um documento. O suporte ao CSS varia de navegador para navegador, mas de forma geral, todos suportam o CSS1, apesar de algumas diferenas.
13
SINTAXE CSS Uma regra CSS consiste em um seletor com uma ou mais declaraes. O seletor determina qual elemento HTML afetado pela regra. Cada declarao consiste em uma propriedade e seu valor. O bloco de declarao encapsulado por chaves { } e cada declarao encerrada por um ponto-e-vrgula ; EX: h1 { font-weight:bold; color: #fc0; }
Onde: h1 o seletor que significa que a regra afeta o elemento <h1>, a regra contm duas declaraes que indicam que o elemento est em negrito e tem a cor laranja. MEDIA TYPES possvel, atravs dos media type, criar uma folha de estilos para cada dispositivo que o usurio for acessar, otimizando a apresentao para cada dispositivo. A especificao prev diversos dispositivos, nem todos com implementao plena: all todos os tipos de dispositivos; screen computadores; print impressoras; handheld PDAs, mobiles Palmtops; projection apresentaes, slides; aural - Sintetizadores de voz; braille - dispositivos tteis em braille; embossed - impressoras de braille. tv televises; tty - terminais, dispositivos portteis.
Atualmente, apenas as media types, screen e print funcionam perfeitamente. As demais se encontram em estudo e implementao. Uma forma de permitir a melhor acessibilidade dos contedos evitar o atributo media all. O mais correto utilizar a media screen quando a folha de estilos for desenvolvida para apresentao no computador.
14
CHAMADAS
DE
CSS
H trs formas de chamar, ou anexar, uma folha de estilo em um documento HTML. A indicada pelos padres e boas prticas a folha externa. As folhas internas e estilos inline devem ser evitados, pois misturam no documento HTML a apresentao e a estrutura. Externa: A folha de estilo se encontra em um ou mais arquivos separados. o mais recomendado, pois possui diversas vantagens: A folha de estilos carregada apenas uma vez, o tamanho do documento HTML menor, e preciso editar apenas um arquivo para mudar a apresentao de todo o site. Os arquivos contendo o CSS so chamados no cabealho do documento na seguinte forma: <link rel="stylesheet" type="text/css" media=screen href="style.css" /> ou utilizando a regra @import rule dentro do elemento <style>: <style type="text/css">@import url("style.css") screen;</style> Interna: A folha de estilos descrita no elemento <style> dentro do cabealho <head>. EX: <style type="text/css">h1 {font-weight:bold;}</style> Inline: A regra css encontra-se no corpo do documento HTML. EX: <h1 style="font-weight:bold;">Nosso ttulo</h1> A chamada de vrias folhas de estilo para diferentes dispositivos pode ser feita das seguintes formas: Externa 1 importando um arquivo CSS usando o @import, aonde primeiro vem o nome do arquivo e depois o dispositivo a que ele se destina. @import url("impressao.css") print
Externa 2 Por meio da tag LINK <link rel=stylesheet type=text/css media=print href=impressao.css />
15
Interna Utilizando o @media. Nessa caso pode ser construdo tanto dentro do documento HTML (no recomendado) quanto dentro do documento CSS.
No HTML <style> @media screen { p {font-family:verdana,sans-serif; font-size:1em;}} @media print { p {font-family:times,serif; font-size:10pt;}} </style> No CSS @media screen {p {font-family:verdana,sans-serif; font-size:1em;}} @media print { p { font-family:times,serif; font-size:10pt;}}
16
3. Recomendaes
As recomendaes oferecem um grupo abrangente de boas prticas para o desenvolvimento da codificao, levando em conta as necessidades de acessibilidade e usabilidade. As recomendaes esto separadas em: gerais; para o cabealho; para o corpo do documento; para a apresentao do documento e para utilizao de outros formatos.
3.1 Recomendaes gerais

1. Utilize arquivos externos para as Folhas de estilo e Javascript. O CSS e o javascript devem estar sempre em arquivos externos a serem chamados pelas pginas do stio/portal. Os arquivos CSS podem ser chamados das seguintes formas: <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> ou <style type="text/css"> @import url("style.css") screen;</style>
J os arquivos javascript devem ser chamados da seguinte forma: <script type="text/javascript" src="/js/script.js"></script>
2. Limite as requisies HTTP Muitas requisies HTTP (a quantidade de arquivos chamados: imagens, folhas de estilo, scripts, vdeos, etc) reduzem o desempenho do navegador. Limite o nmero de requisies. Folhas de estilo e script externos so carregadas apenas uma vez, ficando armazenadas no cache do navegador. Com o cache carregado transfere-se apenas o contedo e eventuais novas imagens.
3. Todas as pginas devem ter recursos de impresso amigvel. As pginas devem fornecer recursos de impresso amigvel, seja via javascript ou via a utilizao de uma CSS voltada para impresso. Deve-se verificar a real necessidade do usurio, retirando da impresso elementos no relevantes como banners e menus.
O texto, o contedo principal, nunca deve ser cortado ou de alguma forma prejudicado na impresso. O CSS tem uma folha prpria para impresso, atravs da media type print, prevendo margens, mudana do valor de pixel para pontos, mudana de fonte e quebras de pgina. Para a criao de folhas de estilo para impresso consulte a especificao CSS no stio do W3C.
4. Evite a utilizao do recurso quadros (frame). Pginas utilizando quadros (frame) eram comuns no incio da web e tinham como funo economizar o uso de arquivos como cabealhos e menus. Com o avano das novas linguagens e novos aplicativos esse recurso tornou-se obsoleto. Alguns motivos para o no-uso de quadros: A impresso dificultada, pois muitos usurios no sabem selecionar o quadro certo que querem imprimir; Os servios de busca tm mais dificuldade em indexar pginas com quadros. A pgina acaba perdendo pontos em sua localizao. Dificulta a acessibilidade do stio. Pessoas que no usam navegadores grficos tm mais dificuldade em navegar em pginas com quadros.
5. Evite o uso de pop-ups. Pop-ups so janelas de diversos tamanhos que abrem com avisos e publicidade. Esse recurso deve ser evitado a todo o custo em stios governamentais. Alguns motivos para o no uso de pop-ups: Os navegadores mais modernos bloqueiam pop-ups. Sendo assim, se algum informe importante dado pelo pop-up ele no visto. Pop-ups no so acessveis. Usurios que usam programas leitores de tela podem se perder, sem saber onde esto ou se realmente entraram no sitio pretendido. Alguns pop-ups mais modernos costumam burlar o sistema anti-pop-up dos navegadores carregando na prpria pgina, atrapalhando a leitura do contedo.
18
Informaes importantes devem sempre estar em destaque dentro da pgina. Na diagramao reserve um espao para os destaques, que pode ser desativado caso no esteja sendo usado. Nunca use pop-ups para avisos importantes, como recadastro de usurios ou para carregar aplicaes ou novas instncias da pgina.
6. Documente o cdigo. O cdigo deve ser documentado de forma que qualquer membro da equipe consiga entend-lo. Blocos de informao devem ser separados com comentrios. Comentrio (X)HTML  Comentrio CSS /* isso um comentario css */
7. URLs devem ser amigveis. Cada pgina de um stio deve ser identificada com sua URL nica e compreensvel. Certo: http://www.portal.gov.br/contato Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18
Alm de facilitar a memorizao do endereo para o usurio a primeira opo permite que mecanismos de busca indexem a pgina. Muitos mecanismos de busca no indexam pginas que contenham pontos de interrogao (?) ou outro caractere (como um & ou =) na sua URL.
8. As URLs devem funcionar sem o "www". Aconselha-se que a URL funcione sem o www. Muitos navegadores j desconsideram o trigrama e deixam o usurio digitar apenas o nome do domnio.
9. Evite elementos ou atributos proprietrios, em desuso ou obsoletos. Atributos em desuso (deprecated) ou obsoletos (obsolete) segundo a W3C tendem a no ser suportados nos dispositivos futuros. Consulte o stio do W3C para a lista de
atributos em desuso ou obsoletos. Atributos proprietrios costumam funcionar apenas nos dispositivos para os quais foram desenvolvidos. Devem ser usados como subterfgios para resolver problemas pontuais do prprio navegador e no devem ser utilizados como a soluo padro para o cdigo.
10. Evite a utilizao desnecessria de elementos HTML e classes. Mantenha o cdigo o mais limpo e sinttico possvel. Utilize os atributos class e id com parcimnia assim como os elementos SPAN e DIV. EX: Criao de um pargrafo diferenciado. Errado: <div id="main"> <div class="maincontent"> <p class="maincontenttext">O texto.</p> </div> </div> Nesses casos, deve-se utilizar os seletores contextuais no cdigo CSS: Certo: No HTML: <div id="main"> <div> <p> O texto. </p> </div> </div> Na folha de estilos: div#main p { /* regras */ }
11. Evite a utilizao de tabelas para leiautes. A implementao atual de folhas nos navegadores torna desnecessria a utilizao de tabelas para diagramao. O uso de HTML para estruturar a pgina e CSS para formatar a apresentao visual, beneficia a acessibilidade da pgina, inclusive ao carregar em dispositivos mveis, alm de diminuir consideravelmente o tamanho do cdigo.
3.2 Elementos do cabealho

Entende-se por elementos do cabealho a parte inicial do cdigo, no aparente nos navegadores, que inclui o DOCTYPE, a declarao de linguagem e demais elementos encontrados dentro do elemento head - tags <head></head>.
1. Declare o doctype correto da pgina. Todo documento HTML e XHTML deve declarar o doctype correto para ser considerado vlido. O doctype informa ao navegador o tipo de documento que deve ser usado ao carregar a pgina. tambm por meio da declarao de doctype que as ferramentas de validao analisam o cdigo da pgina e indicam correes. Os tipos de doctype existentes so: Strict: Exclui totalmente atributos em desuso e apresentao, tais como cor de fundo de pgina e tamanho de fontes. Toda a estrutura visual da pgina deve ser feita a partir de folhas de estilo. A recomendao da W3C que se d, sempre, preferncia ao Doctype Strict. Ex: HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional: Recomendado para projetos onde h uma transio e dificuldades em curto prazo com sistemas legados. mais tolerante em relao utilizao de elementos e atributos de apresentao.
Ex: HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
21
Frameset: usado quando se utiliza quadro (frames) nos stios. O uso de quadros no recomendado e deve ser desestimulado no desenvolvimento de novos stios.
Ex: HTML 4.01 Strict Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Para a lista completa de DOCTYPES consulte o stio da W3C.
2. Declare o Idioma utilizado. O idioma principal da pgina deve ser declarado. Alm de auxiliar na acessibilidade do contedo, a indicao correta da linguagem auxilia a indexao correta nos buscadores. A declarao de idioma pode ser realizada de vrias formas: Em HMTL 4.01 <html lang="pt-br"> Em XHTML <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" > Como meta etiqueta <meta http-equiv="Content-Language" content="pt-br" />
Note que a declarao de idioma tambm atende as recomendaes da Cartilha tcnica do e-Mag Modelo de acessibilidade em Governo Eletrnico. Alm da linguagem, pode-se indicar a localizao da pgina e o pasalvo, por meio das seguintes meta-etiquetas: <meta name="target_country" content="br" /> <meta name="country" content="Brazil" />
22
3. O Ttulo deve ser relevante e presente em todas as pginas. O ttulo de uma pgina o enunciado entre as tags <title></title> e deve ser um dos elementos obrigatrios do cabealho. importante que o ttulo esteja de acordo com o contedo. O ttulo define o rtulo padro dos favoritos e a chamada na listagem dos motores de busca. Recomenda-se: Evitar expresses redundantes como bem-vindo ao stio do ministrio x ou stio do ministrio x, pgina, homepage, entre outros; No utilize qualquer tipo de slogan no incio do ttulo, caso necessrio, utilize aps o nome do rgo ou projeto separado por hfen. Ex: <title>Projeto XYZ Mais desenvolvimento e cidadania</title>; Evite o emprego de siglas de instituies ou de seus departamentos, projetos ou programas. Utilizar, de preferncia, o assunto da pgina seguido pelo nome do rgo separado por hfen. Ex: <title>Contato - Ministrio do Planejamento Oramento e Gesto </title>; O ttulo deve ter no mximo 60 caracteres; No polua o ttulo com palavras-chaves. A insero de palavras-chaves antes ou aps o ttulo principal da pgina pode confundir os usurios que utilizam leitores de tela. Utilize as tags meta para palavras-chave. Importante: Alguns buscadores apenas mostraro os primeiros 50 60 caracteres do ttulo, enquanto outros mostraro o ttulo completo.
4. Descreva a codificao de caracteres da pgina. De acordo com a W3C, o conjunto de caracteres mais adequados para documentos XML e HTML 4.0 Unicode (utf-8). importante que a codificao de caracteres para qualquer documento seja claramente indicada, de modo a que os dispositivos do cliente possam facilmente mapear a codificao. A indicao Unicode (utf-8) poder ser feita das seguintes formas: Usar o parmetro 'charset' no Content-Type do cabealho HTTP. Content-Type: text/html; charset=utf-8
23
Em XHTML pode-se usar o pseudo-atributo para codificao na declarao xml no incio do documento ou a declarao textual no incio da entidade. <?xml version="1.0" encoding="utf-8" ?>
Para HTML ou XHTML pode-se usar a tag <meta> dentro do cabealho <head> do documento. Sendo que em XHTML, deve-se colocar uma barra "/" no final. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
3.3 Corpo
1. Utilize os elementos corretos para a marcao do cdigo. Utilize os elementos de marcao de acordo com a sua finalidade. Para marcar ttulos utilize <h1>, <h2>, <h3>, <h4>, <h5> ou <h6> dependendo do nvel do ttulo ou subttulo, sendo <h1> o ttulo mais alto. Use o elemento <p> para demarcar os pargrafos. No crie classes de CSS para apresentar um elemento em um formato no condizente com seu objetivo. EX: Um ttulo de nvel dois. Errado: <div id="main"> <p class="titulosec"> O subttulo </p> </div> Certo: <div id="main"> <h2> O subttulo </h2> </div>
24
2. A pgina deve possuir apenas um elemento H1. Toda pgina deve possuir um e apenas um elemento H1. O contedo do cabealho deve guardar semelhana com o contedo do elemento TITLE do cabealho.
3. Marque listas de itens e objetos de forma adequada. Existem trs tipos bsicos de listas: ordenada, no-ordenada, e de definio. Deve-se escolher o tipo de lista a partir da informao que se quer inserir. Lista Ordenada (ordered list Tag OL): Sempre que a lista necessitar de uma ordem, como a classificao em um concurso pblico, a lista ordenada a escolha correta. Ex: <ol> <li>Primeiro colocado</li> <li>Segundo colocado</li> <li>Terceiro colocado</li> </ol>
Lista Sem Ordem (unordered list Tag UL): Utilizar quando a necessidade for listar itens sem uma ordem de colocao. a forma ideal para a codificao de menus e barras de navegao.
Ex: <ul> <li>Quem somos</li> <li>Projetos</li> <li>Servios</li> </ul>
Lista de Definies (definition list tags DL, DT e DD): Tem por objetivo exibir uma lista de itens e suas respectivas definies. A lista de definies possui duas partes distintas. O termo a ser definido ou descrito (tag DT), e a descrio propriamente dita (tag DD). o formato ideal para glossrios.
25
Ex: <dl> <dt>Navegador</dt> <dd>Programa que permite ao usurio consultar e interagir com o material publicado na Internet. </dd> <dt>Padres Web (Web standards)</dt> <dd>Padres Web so regras de tecnologia definidos pelo W3C e outros rgos da rea utilizados para criar e interpretar o contedo Web.</dd> </dl>
Para a formatao de visual, na folha de estilos, alm dos elementos comuns as demais tags, as listas possuem a propriedade list-style-type (tipo de estilos de lista). Os atributos variam de acordo com o tipo de lista. EX: A lista ordenada tem como padro a lista numrica em ordem crescente, mas possvel mudar de acordo com o atributo dado: list-style-type: lower-alpha; (a, b, c, d, e etc) list-style-type: upper-roman ; (I, II, III, IV, V, etc.) list-style-type: decimal-leading-zero ; (01, 02, 03, etc.) list-style-type: none (nenhum estilo de lista aparece) Para mais informaes consulte a especificao CSS no stio da W3C.
4. Tabelas devem ser utilizadas para dados tabulares. Para tornar os dados das tabelas acessveis importante utilizar os diversos componentes disponveis como o cabealho <th> e o atributo de sumrio. Para maiores detalhes da marcao acessvel em tabelas consulte a cartilha tcnica do e-MAG.
5. Formate os formulrios de forma correta e acessvel. O formulrio deve ser construdo de forma lgica utilizando os elementos disponveis corretamente. Os elementos <label>, <fieldset> e <legend> devem ser utilizados.
Um formulrio bem estruturado recebe, sem problemas, sua formatao via CSS. Para maiores detalhes da marcao acessvel em formulrios consulte a cartilha tcnica do e-MAG.
3.4 Folhas de estilo

1. A folha de estilos deve ser externa. Apesar de permitido pelo W3C, o uso de estilos inline (estilos dentro do cdigo) para o HTML 4.01 e para o XHTML 1.0, desaconselhado, pois mistura as camadas de estrutura e apresentao dificultando a manuteno do cdigo. A folha de estilos (CSS) deve estar sempre em um ou mais arquivos parte do cdigo, mantendo a separao entre estrutura e apresentao. 2. A pgina deve ser compreendida e usvel com o css desabilitado. Alguns recursos como o uso de imagens no lugar de texto, ou de menus dinmicos, podem incorrer na perda de acessibilidade e compreenso quando o CSS desabilitado. Assegure-se que a pgina compreensvel e usvel com o CSS desabilitado.
3. Nomeie classes e IDs pela sua funo, no pela apresentao. O nome de classes e IDs devem ser pensados de acordo com a sua finalidade e no por sua localizao na diagramao ou suas caractersticas. Isso evita que ao mudar o visual da pgina o sentido do nome da classe ou ID se perca.
EX: Uma div que contenha uma lista vertical de menu: Errado: #colunaesquerdavertical {/* regra Certo: #menu {/* regra */} */}
EX2: Uma classe que defina um texto de aviso ou advertncia. Errado: .vermelho {/* regra Certo: .aviso {/* regra */} */}
27
4. Ordem e organizao. Organize a folha de estilos de forma que ela faa sentido aos diversos desenvolvedores do projeto. Crie blocos de regras lgicos, separados por comentrios no incio e no final de cada um. Uma lista lgica de regras pode ser separada da seguinte forma: 1. Regras para estrutura geral do cdigo (*, html, body, cabecalho, rodap, etc); 2. Regras para navegao; 3. Regras para as divs na ordem que aparecem no cdigo; 4. Regras gerais para seletores (H1, H2, etc...); 5. Regras para links; 6. Regras CSS para listas; 7. Regras CSS para elementos dentro das divs; 8. Regras CSS para classes gerais; 9. Outras regras; Dentro de cada regra defina uma ordem de propriedades (ex: alfabtica) e mantenha essa ordem para todos os seletores. Abrevie as regras CSS para as propriedades que assim as admitem. Algumas propriedades como margin e padding permitem que se abrevie seus valores, seguindo sempre a ordem de topo, direita, fundo e esquerda: EX: Dada a declarao: #contedo { margin-top: 10px; margin-right: 8px; margin-bottom: 0; margin-left: 20px; } Ela pode ser abreviada da seguinte forma: #contedo {margin: 10px 8px 0 20px; }
Especifique sempre unidades para valores no iguais a zero. O CSS requer que se especifique as unidades (pixels, ems, percentagem, etc...) em propriedades como padding, width, height e font-size. A exceo quando esse valor igual a zero (ex:
28
padding=0;). Nesse caso zero zero e no importa que unidade esteja sendo utilizada. Links e suas pseudo-classes devem ter regras CSS declaradas em ordem correta para funcionarem corretamente: 1. 2. 3. 4. a:link { /* regra */} a:visited { /* regra */} a:hover { /* regra */} a:active { /* regra */}
Seletores semelhantes devem ser agrupados sempre que for possvel: EX: Todos os cabealhos em negrito com uma linha de borda: h1, h2, h3, h4, h4, h5, h6 {border: 1px solid #000;}
Utilize a herana CSS e o elemento cascata para simplificar a Folha de Estilos. EX1: Declare a famlia de fontes no incio do documento, dessa forma no necessrio declar-la em nenhum outro seletor: body {font-family: Verdana, Helvetica, Sans-serif; } PS: Outros seletores que podem ser utilizados: html e * (seletor universal) EX2: Utilizando o efeito cascata. h1, h2, h3, h4, h4, h5, h6 { border: 1px solid #000; color: #000; text-align:right; } h1 { color: #0000cd; } Dessa forma os ttulos H1 passam a ter a cor azul, mas mantendo todas as caractersticas das declaraes anteriores. Para que o efeito de cascata funcione importante que a regra que altere a declarao ocorra depois da regra geral.
5. Declare famlias de fonte alternativas. Nem sempre o sistema/navegador que o usurio utiliza possui a fonte escolhida. Deve-se selecionar uma famlia de fontes possveis, sem exagero no nmero de
alternativas. Uma famlia de trs fontes, terminando com uma genrica o ideal. Deve-se testar o desenho com as fontes alternativas para verificar se h problemas de leitura. EX: p {font-family: Verdana, Helvetica, Sans-Serif;}
6. Utilize preferencialmente unidades de tamanho relativas. Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas para mdias digitais, dando preferncia pelo uso de tamanhos relativos tipo em e %. Para o tamanho padro de texto utilize 1em ou 100%, use tamanhos menores apenas para informaes de copyright ou semelhante.
7. Utilize preferencialmente letras para nomear classes e ids. Nomeie classes utilizando apenas letras. O uso de nmeros, underscore e caracteres especiais, quando no proibidos, so permitidos com restries. O hfen pode ser utilizado com parcimnia e no pode ser utilizado no incio do nome da classe ou id.
3.5 Uso de scripts e cookies

1. No utilize scripts que no ofeream um benefcio relevante ao contedo. O uso de scripts deve ser evitado se no tiver uma funo relevante ao funcionamento da pgina: textos animados, janelas pop-ups, efeitos especiais, etc, devem ser evitados.
2. O documento deve ser acessvel mesmo com o script desabilitado. A camada de comportamento deve ser opcional, pois pode no funcionar em todos os dispositivos.
3. Evite solues proprietrias e teste o script em diversos navegadores. O script deve ser testado em diversos navegadores para atestar sua funcionalidade. Evite solues proprietrias que funcionem apenas em um navegador.
30
4. Fornea uma alternativa ao contedo script utilizando o atributo NOSCRIPT. Esse atributo pode conter um link para uma alternativa acessvel do contedo. Para maiores detalhes sobre alternativa acessveis consulte a Cartilha Tcnica do e-MAG.
5. O contedo e o propsito de um cookie deve ser sempre informado ao usurio. O motivo da instalao de um cookie deve ser sempre avisado ao usurio. O usurio deve ter a opo de recusar um cookie se achar conveniente.
6. O usurio pode recusar o uso de um cookie sem afetar a usabilidade central do contedo. A recusa da instalao de um cookie no deve afetar o objetivo central do stio. O cookie no deve ser utilizado como prerrogativa para acesso a pgina principal do stio ou tarefas banais, como uma escolha de seo.
3.6 Arquivos em outros formatos e uso de plugins

1. Avalie a real necessidade do uso de um arquivo para baixar. A opo por um arquivo que deve ser baixado pelo usurio deve ser cuidadosamente avaliada. Publicaes complexas e extensas, com muitos grficos e dados tabulares, costumam ser dispostas em formatos prontos para impresso como o PDF. No entanto importante lembrar, que muitos desses formatos no so acessveis. Muitas vezes o arquivo tem um tamanho grande demais e demora a ser baixado pelo usurio. Avalie com cuidado essa soluo e sempre prefira disponibiliz-la em HTML.
2. O nome do arquivo deve ser relacionado ao seu contedo. O nome do arquivo a ser baixado deve estar de acordo com o contedo do documento. Nomes genricos como planilha01 ou apresentao.ppt devem ser evitados. Nomes compostos devem ser separados por hfens -, nunca espaos em branco ou underscore.
31
3. Evite o uso de formatos proprietrios ou no acessveis. Toda informao contida em um formato proprietrio ou no acessvel deve estar tambm disponvel em outra opo acessvel e no-proprietria.
4. Fornea alternativa em texto para vdeo e udio. Para garantir a acessibilidade deve haver descries dos arquivos de udio e vdeo. Para maiores detalhes consulte a Cartilha Tcnica do e-MAG.
5. Informe o tamanho e o formato do arquivo a ser baixado. Isso permite que o usurio programe a baixa de arquivos e tenha uma idia de quanto tempo a tarefa demorar a ser concluda.
6. Avalie a real necessidade do uso de um plugin. Plugins necessitam de instalao e manuteno por parte do usurio. Nem sempre essa manuteno fcil de ser realizada mesmo por pessoas experientes. Grande parte dos plugins no acessvel, necessitando que sejam criadas verses alternativas acessveis.
7. Avise e fornea um endereo de onde o plugin deve ser baixado. Avise claramente o usurio do uso do plugin. Na mesma pgina onde se encontram os arquivos para serem baixados, ou a aplicao que necessita de um plugin, deve-se fornecer o endereo web para obteno do plugin ou leitor. O endereo deve ser da empresa que mantm o programa. Plugins e leitores no devem ser hospedados em pginas do governo. Disponibilizar plugins ou leitores no mesmo endereo das pginas do governo cria trfego desnecessrio e onera os custos com hospedagem.
8. Nenhuma instalao deve ser necessria para acessar a pgina inicial ou executar tarefas banais. A exemplo dos cookies, nenhuma instalao de plugin deve ser necessria para acessar a pgina inicial ou executar qualquer tarefa rotineira ou banal (ex: enviar um formulrio de contato) do stio.
32
4. Orientaes gerais sobre testes

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

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

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

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

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

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

Abaixo listamos alguns dos problemas mais comuns encontrados durante o desenvolvimento. O conhecimento das origens desses problemas auxilia na preveno e diagnstico. DIFERENAS
DO
MODELO
DE CAIXA ENTRE NAVEGADORES
O modelo de caixa (box model) como se comportam as propriedades de espao (padding), borda (border), largura (width) e altura (height) dos elementos. O modelo de caixa se aplica a qualquer seletor que utilize essas propriedades, independente delas terem sido declaradas ou no. Alguns dos problemas mais freqentes na apresentao dos documentos referem-se a diferenas do clculo da largura e altura dos elementos. No modelo de caixa institudo pela W3C, as propriedades espao e borda so somados largura e altura, sendo esse modelo entendido dessa forma por diversos navegadores. No entanto, em navegadores como o Internet Explorer 5.*/Win, as medidas de espao e borda no so includas na altura e/ou na largura. EX: No CSS que segue: div.caixa { width:300px; padding:20px; border:10px solid; } De acordo com a W3C a largura total do elemento 360px: 10px + 20px + 300px + 20px + 10px = 360px No entanto, o Internet Explorer 5.*/Win, interpreta a medida total como 300px, e a largura final do contedo como 240px. 300px - 10px - 20px - 20px - 10px = 240px
H diversas formas de se contornar o problema como, por exemplo, utilizando comentrios condicionais, hacks ou evitando declarar a largura, espao ou borda em um elemento.
CUIDADOS
COM A ACESSIBILIDADE AO UTILIZAR IMAGENS NO LUGAR DE TEXTO.
Substituir textos escritos em ttulos e cabealhos por imagens utilizando-se para tanto das propriedades text-indent e background-image do CSS, visando uma melhoria esttica da pgina um recurso bastante utilizado no desenho de pginas. No entanto esse recurso costuma apresentar problemas nos casos em que no navegador, as imagens esto desabilitadas, mas a folha de estilo est ativa. A forma encontrada at o momento a adio da tag SPAN vazia e o uso do atributo title. Para evitar que o mesmo problema ocorra nos leitores de tela, deve-se utilizar a media screen na chamada da folha de estilos. Cdigo HTML <h1 id="cabecalho" title=Governo Federal> <span></span>Governo Federal</h1> CSS #cabecalho { width: 329px; height: 25px; position: relative; } #cabecalho span { background: url(tituloemimagem.gif) no-repeat; position: absolute; width: 100%; height: 100%; }
LAPSO
NA RENDERIZAO DO
IE
Por vezes, quando se utiliza a regra @import para CSS externo, o Internet Explorer por um lapso de tempo pisca o contedo sem a renderizao do CSS. Esse problema facilmente contornado utilizando o elemento LINK ou SCRIPT dentro do cabealho <HEAD></HEAD>. Outras duas formas de solucionar o lapso da renderizao so:
1) Adicionando o elemento LINK A soluo a seguir consiste em adicionar outra folha de estilo por meio do elemento LINK. Pode ser uma folha de estilo para outra mdia, como impresso ou, simplesmente, uma folha de estilos em branco: <head> <title>My Page</title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css" media="screen">@import "style.css";</style> </head>
2 ) Adicionando o elemento SCRIPT Outra soluo existente inserir o elemento SCRIPT. Essa soluo recomendada apenas se a pgina j possui um script funcionando. <head> <title>My Page</title> <script type="text/javascript"> </script> <style type="text/css" media="screen">@import "style.css";</style> </head>
39
6. Lista de verificao
A lista de verificao um recurso para avaliar se as recomendaes esto sendo seguidas no desenvolvimento, evoluo ou manuteno do stio ou portal: 1. 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 pela pgina (so) vlida(s)? H declaraes de classes ou ID's desnecessrias? O cdigo bem estruturado? H links quebrados? Qual a performance velocidade de carregamento/tamanho da pgina? A pgina utiliza URL's amigveis?
10. As URLs funcionam sem o "www"? 11. H erros de javascript? 12. A pgina funciona com o javascript desabilitado? 13. O contedo acessvel com as folhas de estilo desabilitadas? 14. O stio usa CSS para todos os aspectos da apresentao? 15. As imagens de apresentao esto includas nas CSS? 16. H quebra do desenho quando o usurio aumenta o tamanho da fonte? 17. O contraste das cores da pgina suficiente? 18. A pgina consistente em navegadores texto? 19. O contedo legvel quando impresso? No h desperdcio de papel ou tinta? 20. A pgina bem visualizada em dispositivos portteis? 21. A pgina bem visualizada em diferentes resolues de navegador e tela?
40
7. Lista de formatos de arquivos e plugins

O objetivo desse captulo de apresentar uma lista resumida dos formatos de arquivos e plugins mais utilizados. No nosso objetivo incluir todos os itens existentes. ARQUIVOS
DE TEXTO
Portable Document File (.pdf) Arquivos PDF so criados utilizando um aplicativo proprietrio da Adobe. Para leitura utilizado o programa Adobe Acrobat Reader de uso gratuito. Documentos salvos em PDF costumam guardar quase a integridade de sua formatao original. O PDF possui diversos nveis de proteo contra cpias e alteraes indevidas, sendo o formato mais seguro para documentos oficiais. No entanto, o formato no considerado acessvel, o que gera a necessidade de dispor de verso alternativa. Texto (.txt) o formato mais simples de texto. Documentos salvos em formato texto sero legveis, porm no tero qualquer formatao alm da quebra de linhas e pargrafos. Microsoft Word (.doc) Formato nativo do Microsoft Word, processador de texto proprietrio da Microsoft. Existem alguns leitores gratuitos da Microsoft, mas no h garantias de compatibilidade de verses e integridade da formatao. o formato menos indicado para disponibilizar um arquivo texto para Web. Rich Text Format (.rtf) um formato de arquivo que permite a troca de textos entre diferentes processadores de texto, em diferentes sistemas. Esse formato prefervel aos formatos .DOC. Open Document Format (ODF) O Open Document Format (ODF) possui formato aberto e utilizado por vrios processadores como BROffice, Open Office e sistema web como o Google Docs and Spreadsheets. O padro OpenDocument de acesso pblico. Isso significa que pode ser implementado em qualquer sistema, seja ele de cdigo aberto ou proprietrio. As Extenses de arquivos usadas pelos documentos do OpenDocument so:
.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)
DE DADOS
TABULAO
Sempre que possvel, prefira disponibilizar dados em formato HTML ou PDF. Comma-Separated Values (.csv) o formato simples de salvar informao tabular e pode ser importada em qualquer aplicao de tabulao de dados como Microsoft Excel ou aplicaes de banco de dados. Um CVS um formato simples de tabulao onde vrgulas (comma em ingls) separam cada coluna de informao e as linhas so separadas por quebras. Open Document Spreadsheet (.ods) Formato aberto de planilha do Open Document Format (ODF), presente em sutes como BROffice, Open Office e sistema web como o Google Docs and Spreadsheets. Microsof excel (.xls) Formato proprietrio do Microsoft Excel.
FORMATOS
DE APRESENTAO
Sempre que possvel, prefira disponibilizar apresentaes em formato HTML ou PDF. Open Document Presentation (.odp) Formato aberto de apresentao, presente em sutes como BROffice, Open Office e sistema web como o Google Docs and Spreadsheets. Ainda pouco utilizado. Microsoft power point (.ppt .pps) Formatos proprietrios de apresentaes da Microsoft. FORMATOS
DE IMAGEM
Graphics Interchange Format (.gif)

O formato GIF utiliza uma palheta de 256 cores, permitindo o uso de fundos transparentes e de animao. O formato mais indicado para ilustraes de cores chapadas e a trao , como logotipos e ilustraes, com um nmero limitado de cores.
Portable Network Graphics (.png) um formato livre, utilizado em alternativa ao GIF, recomendado pela W3C. O formato PNG no tem limitao de 256 cores e permite retirar o fundo de imagens com o uso do canal alfa, definindo o nvel de opacidade, porm no comporta animao. Sua indicao a mesma do formato GIF, exceto no caso de animaes, com mais flexibilidade no uso de cores e transparncias.
Joint Photographic Experts Group (.jpg ou .jpeg) O formato JPEG is o mais indicado em caso de fotografias, podendo salvar a informao em mais de 16 milhes de cores. Por outro lado, o JPEG no indicado para imagens com cores chapadas e a trao devido a criao de diversos artefatos em torno das linhas e reas chapadas.
FORMATOS
DE COMPRESSO
ZIP (.zip) O ZIP um dos formatos de compresso mais popular. Um arquivo ZIP contm um ou mais arquivos que podem estar organizados em pastas e subpastas. Ao descompactar o arquivo ZIP o usurio tem acesso aos arquivos na sua formatao e organizao original. Existem diversos programas que criam e extraem contedos de arquivos ZIP. Alguns so gratuitos outros pagos. Roshal ARchive (.rar) O RAR um formato proprietrio de compactao de arquivos. Tem como principais caractersticas a alta taxa de compresso e o suporte a arquivos grandes (mais de 4 Gb).
MULTIMDIA Independentemente da escolha do formato multimdia, devem ser fornecidas verses acessveis para o contedo: trilhas de udio e legenda para vdeos, verses alternativas em HTML, etc.
43
Flash/ Shockwave (.swf) Formato de aplicaes multimdia proprietrio da Adobe. O formato permite a criao de pginas interativas e animadas. O plug-in para visualizao gratuito. No entanto, o formato ainda possui pouco suporte acessibilidade, no devendo ser utilizado em banners ou pginas com informaes essenciais como um acesso ao um servio. Quicktime (.mov) Formato proprietrio da Apple Computer, utilizado para armazenar seqncias de vdeo pelos programas/plug-ins QuickTime e iTunes. Moving Picture Experts Group (MPG/MPEG) Formato de compresso de udio e vdeo mantido pela International Organization for Standardization. Sua especificao mais conhecida e utilizada o mp3. Real Player (RM/RA) Formato proprietrio da Real Networks Inc para seu tocador Real Player. Windows Media Player (.wmv/.wma) Formato proprietrio da Microsoft para udio e vdeo no PC. baseado em uma coleo de codecs que podem ser usados pelo Windows Media Player. Active Streaming Format (.asf) Formato de arquivo da Microsoft para executar vdeo digital via Internet (streaming). Musical Instrument Digital Interface (.mid ou .midi) Formato padro de troca de informaes musicais entre instrumentos musicais, sintetizadores, e computadores. Audio Video Interleave (.avi) Formato encapsulador de udio e vdeo proprietrio da Microsoft.
44
8. Recursos
ORGANIZAES
E ESPECIFICAES
World Wide Web Consortium (W3C) - http://www.w3.org Especificao HTML 4.01 - http://www.w3.org/TR/html401 Especificao XHTML 1.0 http://www.w3.org/TR/xhtml1 Especificao XHTML 1.1 - http://www.w3.org/TR/xhtml11 Especificao CSS 1.0 - http://www.w3.org/TR/CSS1 Especificao CSS 2.1 http://www.w3.org/TR/CSS21 Especificao CSS 3.0 (em construo) - http://www.w3.org/Style/CSS/current-work Codificao de caracteres - http://www.w3.org/International/O-charset.pt-br.php Tutoriais W3C - http://www.w3.org/2002/03/tutorials CSS Paged media - http://www.w3.org/TR/REC-CSS2/page.html The Web Standards Project - http://www.webstandards.org/ VALIDADORES
DE CDIGO
Validador (X)HTML - http://validator.w3.org Validador CSS - http://jigsaw.w3.org/css-validator Validador de Links - http://validator.w3.org/checklink VALIDADORES
DE ACESSIBILIDADE
ASES (WAI e e-MAG) -
http://www.governoeletronico.gov.br http://www.acessobrasil.org.br
Da Silva (WAI e e-MAG) -
Cynthia Says (WAI) - http://www.cynthiasays.com Lift (WAI) - http://www.usablenet.com TAW (WAI) - http://www.tawdis.net Hera (WAI) - http://www.sidar.org/hera/ Web@Examinator (WAI) - http://www.acesso.umic.pt/examinator.php LEITORES
DE TELA
Dosvox/Webvox (desenvolvido no Brasil) - http://intervox.nce.ufrj.br Virtual Vision (desenvolvido no Brasil) - http://www.micropower.com.br Jaws for Windows - http://www.freedomscientific.com Emacspeak - http://emacspeak.sourceforge.net/ Gnopernicus - http://www.baum.ro/gnopernicus.html Ora - http://live.gnome.org/Orca
45
DISPOSITIVOS
MVEIS
Opera Mini - http://www.operamini.com Opera Mini Simulator - http://www.operamini.com/features/simulator NAVEGADOR

TIPO
TEXTO
pera (simulador) - http://www.opera.com "Exibir > Estilo > Modo usurio > Emular navegador de texto". Lynx (navegador tipo texto) - http://lynx.browser.org Lynx Viewer (simulador) - http://www.delorie.com/web/lynxview.html SERVIOS
DE IMPRESSES DE NAVEGADOR
BrowserCam (pago / trial de 24h) - http://www.browsercam.com Browsershots (gratuito / screenshots expostas ao pblico) - http://browsershots.org/ DESKTOPS VIRTUAIS PearPC (Windows) - http://pearpc.sourceforge.net/ VMWare (Linux) - http://www.vmware.com/ IEs4Linux (Linux necessita Wine) - http://www.tatanka.com.br/ies4linux/ Parallels (Mac) - http://www.parallels.com/en/products/workstation/mac MS Virtual PC - programa para virtualizao da Microsoft http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx VISUALIZADORES
DE ARQUIVOS E PLUGINS
Microsoft Word reader software - http://www.microsoft.com/Office/000/viewers.htm Adobe online accessibility resource - http:// access.adobe.com Microsoft Excel reader software - http://www.microsoft.com/Office/000/viewers.htm Adobe Acrobat Reader - http://www.adobe.com/br Flash player - http://www.macromedia.com/software/flash/ Shockwave player - http://www.macromedia.com/shockwave/ Quicktime player - http://www.apple.com/quicktime/download/ RealPlayer Basic player - http://www.real.com/
ANLISE
DE PERFORMANCE
YSlow - http://developer.yahoo.com/yslow/ Anlise de performance de carregamento da pgina e dicas para melhor-la.
46
EDITORES (X)HTML
CSS
Bluefish (Linux) - http://bluefish.openoffice.nl/index.html NVU (Windows/Linux /Mac) - http://www.nvu.com Possui editor visual. PSPad (Windows) - http://www.pspad.com/en/ Possui dicionrio em portugus-br e integrao com Topstyle (editor CSS). TopStyle Lite (Windows) - http://www.newsgator.com/NGOLProduct.aspx? ProdId=TopStyle&ProdView=lite
EXTENSES FIREFOX Extenses (extensions) so pequenos programas que adicionam funcionalidades ao Firefox. Para ter acesso as extenses, basta ir a Ferramentas >Complementos> Extenses > Mais extenses. Navegador Firefox http://br.mozdev.org/firefox Web Developer - https://addons.mozilla.org/firefox/60 Vrias ferramentas de desenvolvimento e teste. HTML validator - https://addons.mozilla.org/firefox/249 Validador HTML baseado no TIDY, permite correes no cdigo. ColorZilla - https://addons.mozilla.org/firefox/271 Exibe a informao da cor selecionada. HTML Tidy Library Project - http://tidy.sourceforge.net Converte HTML para XHTML Firefox Accessibility Extension https://addons.mozilla.org/en-US/firefox/addon/1891? Firebug - http://www.getfirebug.com/ ferramentas para anlise cdigo, folhas de estilo, testes e debug de javascript. DOM Inspector - http://www.mozilla.org/projects/inspector/ Ferrramenta para visualizar e editar o DOM de um documento.
9. Leitura Complementar
e-MAG Modelo de acessibilidade de Governo Eletrnico http://www.governoeletronico.gov.br/acoese-projetos/e-MAG/ CSS para Webdesign http://www.maujor.com O bsico da Web http://www.obasicodaweb.com/ Revoluo etc http://www.revolucao.etc.br Tableless http://www.tableless.com.br A List Apart http://www.alistapart.com CSS Play http://www.cssplay.co.uk/ CSS Discuss
http://www.css-discuss.org/
W3 schools
http://www.w3schools.com/
CSS Zen Garden http://www.csszengarden.com/
48
10. Glossrio
Acessibilidade Significa permitir o acesso por todos, independente do tipo de usurio, situao ou ferramenta. Significa ainda, criar ou tornar as ferramentas e pginas web acessveis a um maior nmero de usurios, inclusive pessoas portadoras de deficincias. CSS (Cascading Style Sheets Folhas de estilo em cascata) Linguagem que descreve a apresentao, visual ou sonora, de um documento. Hack Hacks so subterfgios utilizados pelos desenvolvedores como forma de contornar problemas apresentados na apresentao de uma pgina devido deficincia de um dado navegador entender os padres Web. Navegador Programa que permite ao usurio consultar e interagir com o material publicado na Internet. Padres Web (Web standards) Padres Web so regras de tecnologia definidos pelo W3C e outros rgos da rea utilizados para criar e interpretar o contedo Web. URI (Uniform Resource Identifier - Identificador Unificado de Recurso) , basicamente, uma string (conjunto de caracteres) que seguem uma certa sintaxe e usado para definir identificar um recurso na web. O tipo mais comum de URI a URL. URL (Uniform Resource Locator - Localizador Unificado de Recurso) Um tipo especfico de URI, usado para definir a localizao de um recurso na web. Geralmente dizemos que a URL o endereo de uma pgina web. Um exemplo de URL: http://www.exemplo.com/pagina/ W3C (World Wide Web Consortium) Consrcio de mbito internacional com a finalidade de desenvolver especificaes, guias e ferramentas para web.
49
WAI: (Accessibility Initiative - Iniciativa de Acessibilidade na Web) Tem como objetivo desenvolver protocolos que melhorem a interoperabilidade e promovam a evoluo da www. XHTML (Extensible HyperText Markup Language) a linguagem HTML reformulada para seguir as regras do XML. XML (Extensible Markup Language) Uma linguagem de marcao semelhante a HTML, mas que permite a descrio de dados definidos por elementos de programao.
50

Padrões Brasil e-GOV - Cartilha de Codificação

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

Padrões Brasil e-GOV - Cartilha de Codificação

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

Sob as seguintes condies:

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

O Departamento de Governo Eletrnico agradece a:

DGE Departamento de Governo Eletrnico

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG

Objetivos desse Guia

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

2.1 Cdigo em camadas

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

2.2 HTML e XHTML

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

2.3 CSS (cascating style sheets)

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

3.1 Recomendaes gerais

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

3.2 Elementos do cabealho

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

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

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Ex: <ul> <li>Quem somos</li> <li>Projetos</li> <li>Servios</li> </ul>

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

3.4 Folhas de estilo

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

3.5 Uso de scripts e cookies

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

3.6 Arquivos em outros formatos e uso de plugins

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

4. Orientaes gerais sobre testes

4.2 Resolues de vdeo.

4.3 Navegadores e sistema

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

4.4 Outros dispositivos

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

4.5 Teste em camadas

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

4.6 Teste de acessibilidade

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

5. Problemas mais comuns

DE CAIXA ENTRE NAVEGADORES

COM A ACESSIBILIDADE AO UTILIZAR IMAGENS NO LUGAR DE TEXTO.

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

7. Lista de formatos de arquivos e plugins

Graphics Interchange Format (.gif)

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao

ASES (WAI e e-MAG) -

Da Silva (WAI e e-MAG) -

Padres Web em Governo Eletrnico e-PWG Cartilha de Codificao