padroes web reference

8/14/2019 Padroes Web reference

1/16

AgnciaClick Pgina 1 de 16

Documentao de RefernciaEspecificao de Interface

Montagem de pginas da web seguindo os

Padres WebVerso 0.4


2/16

Interface


1 Histrico do Documento1.1 VersesData Verso Descrio Autor14/04/2005 0.1 Elaborao do

DocumentoMarco Gomes([email protected])

16/05/2005 0.4 Atualizao doDocumento

Marco Gomes([email protected])

1.2 AprovadoresNome Empresa Cargo


3/16

Interface


2 ndice1 Histrico do Documento..................................................................................2

1.1 Verses .................................................................................................21.2 Aprovadores ..........................................................................................2

2 ndice ............................................................................................................33 Introduo .....................................................................................................44 Montagem......................................................................................................5

4.1 A montagem tradicional..........................................................................54.2 A montagem seguindo os padres web ...................................................6

4.2.1 Vantagens do XHTML sobre o HTML ....................................................74.3 Diferenas na apresentao visual...........................................................8

5 Substituio e alterao de contedo.............................................................116 Uso eficiente do cache dos navegadores ........................................................ 127 Acessibilidade...............................................................................................13

7.1 Portadores de necessidades especiais....................................................137.1.1 Deficincia visual..............................................................................137.1.2 Deficincia motora............................................................................13

7.2 Dispositivos alternativos ....................................................................... 138 Compatibilidade............................................................................................14 9 Exemplos de sites que seguem os padres web..............................................15

9.1 Portugus............................................................................................15 9.2 Ingls..................................................................................................15

10 Links e Referncias....................................................................................1610.1 Portugus............................................................................................16 10.2 Ingls..................................................................................................16


4/16

Interface


3 IntroduoEste documento destina-se a explicar as caractersticas, vantagens das pginasmontadas seguindo os padres web, diferenas de montagem usando esta novatcnica e de pginas HTML tradicionais.

Pretende tambm dar embasamento tcnico para a manuteno e alterao daspginas que seguem os padres.


5/16

Interface


4 Montagem4.1 A montagem tradicionalA tcnica tradicional usa tabelas para dividir blocos de contedo de uma pgina.

Toda a configurao visual colocada na prpria pgina e repetida em todas asoutras pginas que forem semelhantes a essa.

Uma pgina com trs colunas e um rodap, por exemplo, poderia ser montada daseguinte maneira:

Menu de navegao

Contedo principal

Contedo secundrio

Contedo do rodap

Em um navegador comum este cdigo seria apresentado ao usurio como na figuraabaixo:

Figura 01 Apresentao e contedo no so separados em uma pgina com layout baseado emtabelas

bastante comum tambm a utilizao de tabelas aninhadas, ou seja, colocam-sevrias tabelas umas dentro das outras, normalmente, usa-se este recurso parafacilitar a montagem de caixas com cantos arredondados e cabas com mltiplas

bordas.


6/16

Interface


4.2 A montagem seguindo os padres webNa tcnica tableless, usa-se divises para dividir blocos de contedo. Tabelas sousadas apenas para apresentao de dados tabulares, como uma tabela de serviose seus respectivos custos e prazos de execuo, por exemplo.

No arquivo HTML coloca-se apenas o contedo e informao estrutural da pgina,toda a informao sobre apresentao visual deve ficar em um arquivo CSS externoque reaproveitado em todas as outras pginas semelhantes a essa. Comoapresentao visual, entende-se: cores, imagens de fundo, bordas, formatao detexto, posicionamento dos blocos de contedo e qualquer outra configuraomeramente visual.

Uma pgina com trs colunas e um rodap, por exemplo, poderia ser montada daseguinte maneira:

Menu de navegao

Contedo principalContedo secundrio

Contedo do rodap

Como podemos notar comparando os dois exemplos demonstrados at agora, ocdigo que segue os Padres Web muito mais fcil de ser lido, mantido eatualizado.

Em um navegador comum este cdigo seria apresentado ao usurio como na figuraabaixo:

Figura 02 Informao estruturada de uma pgina que segue os Padres

Toda a configurao sobre apresentao visual da pgina fica em uma folha deestilos externa (arquivo CSS). A manipulao de cada um dos blocos possvel

graas ao atributo id de cada div, que um identificador nico.


7/16

Interface


Com o documento estruturado como demonstrado acima podemos posicionar seusblocos de contedo como for necessrio. Abaixo temos um cdigo CSS que posicionaos elementos de maneira semelhante apresentao visual do layout baseado emtabelas (figura 1).

div { float:left; border:1px solid #CCC; }#menu, #principal, #secundario { height:100px; }

#menu { width:98px; }

#principal { width:300px; }

#secundario { width:98px; }

#rodape { clear:left; width:500px; }

Aplicando o cdigo CSS acima na pgina demonstrada na figura 2, teremos aseguinte apresentao visual:

Figura 03 Layout seguindo os Padres Web, apresentao separada do contedo.

Como demonstrado, as configuraes de apresentao visual da pgina estodefinidas em uma folha de estilos (arquivo CSS), este carregado uma nica vezpelo cliente ficando armazenado no cacheno navegador. Caso o visitante retorne pgina ou visite pginas que usam o mesmo arquivo CSS, as informaes de

apresentao no sero baixadas novamente, economizando o tempo do usurio ebanda do provedor de internet.

4.2.1Vantagens do XHTML sobre o HTMLA pgina Padro, tem o XHTML ao invs do HTML para estruturar seu contedo, oXHTML (Extensible HyperText Markup Language) foi criado dentro do conceito XML,linguagem de marcao aonde voc cria suas prprias tags e atributos para escreverseu documento web. As tags e atributos do XHTML foram criadas aproveitando-se astags e atributos do HTML 4.01 e suas regras. Ela foi escrita para substituir o HTML enada mais do que um HTML "mais claro e limpo".

Vantagens do XHTML


8/16

Interface


Compatibilidade da linguagem XHTML com as futuras aplicaes de usurios. Seu cdigo consistente. Tempo de carga de uma pgina XHTML mais rpido. Maior acessibilidade aos navegadores e aplicaes de usurio padro

incrementando a interopebilidade e a portabilidade dos documentos web. Totalmente compatvel com todas as aplicaes de usurios para HTML(navegadores), antigas e/ou ultrapassadas.

medida que mais e mais ferramentas XML so disponibilizadas, tais como o XSLTpara transformao de documentos, ser possvel perceber mais claramente asvantagens do XHTML. XForms, por exemplo, permitir a edio de documentosXHTML (ou mesmo de qualquer tipo de documento XML) permitindo seu totalcontrole de maneira bem simples. Aplicaes de Semantic Web podero integrar-seperfeitamente a documentos XHTML. Se o documento vai alm do XHTML 1.0,incluindo, por exemplo, MathML, SMIL, ou SVG, ento sim as vantagens crescero:estas vantagens no existem no HTML.

4.3 Diferenas na apresentao visualUma pgina Padro pode ser montada para que fique visualmente idntica a umapgina de montagem tradicional. Exemplos:

IBM Seguindo os Padres Web


9/16

Interface


IBM Original

Samsung Seguindo os Padres Web


10/16

Interface


Samsung Original

Mais exemplos na seo "Links e Referncias", no final deste documento.


11/16

Interface


5 Substituio e alterao de contedoA substituio de contedo em uma pgina que segue os Padres feita de maneirabastante semelhante a uma pgina montada da maneira tradicional.

Em um layout baseado em tabelas altera-se o contedo que est dentro das tags, em uma pgina Padro altera-se o contedo que est dentro das tags.

Como foi demonstrado no exemplo da figura 02, a pgina montada seguindo osPadres muito mais fcil de manter, consome menos banda do servidor e tem seucdigo mais legvel, portanto, mais fcil de alterar seu contedo.


12/16

Interface


6 Uso eficiente do cache dos navegadoresA cada pgina que o usurio solicita, baixado o HTML e todos os arquivos que omesmo estiver utilizando como imagens GIF, JPEG e PNG, sons, animaesmultimdia e folhas de estilo (arquivos CSS).

Caso estes arquivos j tenham sido baixados, o computador do usurio solicitaapenas o HTML, todos os outros arquivos que j estejam gravados localmente soreutilizados, reduzindo o tempo de espera do visitante at que este veja a pginacompletamente carregada, a este recurso, d-se o nome de cache.

Como em uma pgina que no segue os Padres toda a informao de apresentao colocada na prpria pgina, toda esta informao precisa ser baixada pelo usurioa cada troca de pgina, isso faz com que o tempo de espera aumente muito maisque o necessrio.

Em uma pgina que segue os Padres toda a informao sobre apresentao visualda pgina est em um arquivo CSS externo, este carregado uma nica vez,reduzindo drasticamente o tempo de espera entre troca de pginas.

Com o uso eficiente do cache dos navegadores, a experincia do usurio em navegarpelo website fica muito mais agradvel, aumentando as repostas positivas ereduzindo custos com transferncia de arquivos do servidor para o cliente.


13/16

Interface


7 AcessibilidadeA acessibilidade de uma pgina que segue os Padres Web normalmente muitomaior que a mesma pgina com layout em tabelas.

7.1 Portadores de necessidades especiais7.1.1Deficincia visualNa pgina que segue os Padres a informao estruturada segundo seu nvel derelevncia e importncia e o contedo recebe uma marcao semntica, facilitando ainterpretao por dispositivos sintetizadores de voz, navegadores de texto, Brailleentre outros.

As tabelas de dados devem ter um ttulo e um resumo acerca dos seus dados, estes

campos no precisam ser mostrados ao usurio comum, mas tratam-se informaesbastante teis a quem no enxerga.

Os campos dos formulrios devem ter uma 'etiqueta' que descreve qual informaodeve ser inserida naquele campo.

Todas as imagens devem ter um texto alternativo que descreva o contedo daquelaimagem em poucas palavras, ou ainda o atributo 'longdesc' que pode ter um textolongo acerca da imagem.

As abreviaes e acrnimos devem ter seu significado explicado dentro do cdigo(informao que o usurio comum no v), essa informao usada pelos meiosno visuais e por robs de indexao de contedo (ferramentas de busca).

Caso a deficincia no seja grave o usurio pode desabilitar a folha de estilo eaumentar o tamanho do texto, conseguindo assim ler o contedo da pgina commaior conforto.

7.1.2Deficincia motoraOs formulrios e botes recebem teclas de atalho que facilitam a acessibilidade dequem tem deficincias motoras e no consegue utilizar o mouse, por exemplo.

7.2

Dispositivos alternativosUma pgina Padro pode ser visualizada em um nmero muito maior de dispositivos,diferente da pgina tradicional que s pode ser visualizada com eficincia emcomputadores de mesa, e em muitos casos, por apenas um navegador.

Isso possvel porque em uma pgina que segue os Padres a informao apresentada de maneira estruturada. Mesmo em telas de baixa resoluo como asde celulares, PDA's e aparelhos de televiso, possvel ver o contedo de maneirainteligvel sem necessidade de rolagem horizontal e com o texto em qualquertamanho que o usurio ache necessrio.


14/16

Interface


8 CompatibilidadeAlguns recursos do CSS no so suportados por alguns navegadores, estaincompatibilidade pode gerar algumas falhas na apresentao visual da pgina.Porm, estes recursos podem ser substitudos e manipulados para que a pginapossa ser corretamente visualizada pelo usurio.

Abaixo uma tabela com os principais navegadores da atualidade, sistemas em quepodem operar e seu suporte a CSS.

Navegador / verso Sistema(s) em que pode operar Suporta CSSMicrosoft Internet Explorer 5.01 Windows e Mac. timo*Microsoft Internet Explorer 5.5 Windows e Mac. timo*Microsoft Internet Explorer 6.0 Windows e Mac. timo*Mozilla 1.7 Windows, Mac e plataforma Unix, como

GNU/Linux e BSD.Excelente

Mozilla Firefox 1.0 Windows, Mac e plataforma Unix, comoGNU/Linux e BSD. ExcelenteSafari Mac. ExcelenteKonqueror Plataforma Unix, como GNU/Linux e BSD. timoEpiphany Plataforma Unix, como GNU/Linux e BSD. ExcelenteOpera 7 Windows, Mac, Solaris, OS/2, QNX e

plataforma Unix, como GNU/Linux e BSD.Excelente

Opera 8 Windows, Mac, Solaris, OS/2, QNX eplataforma Unix, como GNU/Linux e BSD.

Excelente

Opera Mobile Telefone celular e PDA que use sistema Nokia,Samsung, Sony Ericsson, Windows Mobile,Siemens, Panasonic, Sendo e Psion.

Bom **

Palm Web Pro 3.0 Equipamento Tungsten T, T2, T3, C e E ouZire 71 da PalmOne.

Bom**

Palm Web Pro 3.5 Equipamento Zire 72 da palmOne. Bom**Pocket Internet Explorer Pocket PC. Bom**

* Algumas funcionalidades no so suportadas, porm, estas podem ser substitudas para quea pgina seja corretamente apresentada ao usurio.** O sistema altera o design da pgina para que o contedo caiba horizontalmente na tela,praticamente eliminando a necessidade de rolagem horizontal.

Caso o usurio perceba algum problema na apresentao visual de uma pgina quesegue os Padres Web, ele pode desabilitar a folha de estilos, navegando apenaspelo contedo.

Um bom exemplo de site que segue os Padres Web e aconselha aos os usuriosque desabilitem suas folhas de estilo, caso necessrio, o da Justia Federal(http://www.justicafederal.gov.br/), parte do seu texto de "Poltica de Acessibilidade"diz o seguinte:

"No stio da JUSTIA FEDERAL foram implementadas folhas de estilo paragarantir o reconhecimento das estruturas de contedo. As verses doInternet Explorer (5.0 ou inferior) no suportam totalmente estafuncionalidade, o que far com que alguns elementos, como links, sejameventualmente apresentados de forma incorreta. Caso isso ocorra, desabiliteas folhas de estilo do seu navegador."


15/16

Interface


9 Exemplos de sites que seguem os padres web9.1 PortugusTerraConhecido portal de notcias e servios para a web. Faz um timo uso de listasdesordenadas () e ttulos semanticamente ordenados.

9.2 InglsESPNConsagrado canal americano de esportes. No faz um bom uso de listasdesordenadas e listas de definio, provavelmente trata-se de uma conseqncia dopioneirismo do website em adotar aos Padres Web.

Wired News

Site de notcias da revista de tecnologia e informtica mais consagrada do mundo.Faz timo uso de listas desordenadas, listas de definio, blocos de citaes emarcaes de ttulos.

MSN Portal da Microsoft Network com notcias, ferramenta de busca, relacionamentosentre outros. Faz timo uso de listas desordenadas, ttulos marcadossemanticamente e tabelas apenas para dados.


16/16

Interface


10 Links e Referncias10.1 PortugusTableless.com.br O principal objetivo divulgar os web standards aos desenvolvedores web, para queeles possam primeiramente mudar seu jeito de construir sites, e depois, mudar ainternet.Esto disponveis alguns sites "convertidos" do mtodo convencional para o mtodotableless. Voc poder compar-los visitando a seo "convertidos".

Porque utilizar tabelas para layout estupidezProblemas definidos, solues oferecidas. A traduo para portugus de umexcelente documento de defesa dos Padres Web.

FAQ - Perguntas frequentes sobre HTML e XHTMLUma tima referncia para esclarecer perguntas sobre as caractersticas e diferenasentre as linguagens.

10.2 InglsCSS Zen GardenUma demonstrao do que pode ser feito com uma pgina com design baseado emCSS apenas se mudando a folha de estilo. Escolha um dos itens no menu para ver odesign do site ser completamente modificado atravs da mudana do CSS.

Cascading Style Sheets - home pagePgina oficial da linguagem CSS, informaes sobre suas verses, especificaes eguias de referncia.

padroes web reference

Documents