21274972 Webstandards Melhores Praticas Para Construcao de Paginas Web

8/11/2019 21274972 Webstandards Melhores Praticas Para Construcao de Paginas Web

1/15


2/15

2

ndicendice ................................................................................................................................................ 2

Introduo: O que so Web Standards? ........................................................................................... 3

Vantagens: ..................................................................................................................................................... 3

Trabalhando com Web Standards: Estrutura .................................................................................... 3

HTML + XML = (X)HTML ............................................................................................................................... 3

Regras de sintaxe....................................................................................................................................... 3

Usando as tags semanticamente ............................................................................................................... 4

Separando o Contedo da Apresentao Visual (estilos) ............................................................................. 4

CSS: herana e cascata ............................................................................................................................. 4

Scripts e manipulao de elementos ......................................................................................................... 5

Trabalho com Trs Camadas: Contedo, Design e Comportamento ............................................... 6

Primeira Camada: Contedo (X)HTML .......................................................................................................... 6

Segunda Camada: Design (estilos CSS) ....................................................................................................... 6

Terceira Camada: Comportamento ............................................................................................................... 7

Por Que Pensar em Web Standards? .............................................................................................. 7

Sempre h uma pedra no caminho... ................................................................................................ 8

Outros problemas que podem interferir nos padres web: ........................................................................ 8

Boas Prticas .................................................................................................................................... 8

Microformats ............................................................................................................................................... 8

CSS 3.0 ...................................................................................................................................................... 9

Otimizao do CSS .................................................................................................................................... 9

CMSs, Frameworks e APIs ...................................................................................................................... 10

Planejamento ............................................................................................................................................ 10

Diferenciar os links do resto do texto ....................................................................................................... 10

Usabiliadade ............................................................................................................................................. 11

Pensando na Acessibilidade ........................................................................................................... 11

Mas como fazer o site acessvel? ............................................................................................................ 11

Web Stabdards e SEO .................................................................................................................... 14

Ferramentas (Extenses Firefox) ................................................................................................... 15

Alguns Links .................................................................................................................................... 15

Blogs ......................................................................................................................................................... 15

Onde me encontrar................................................................................................................................... 15


3/15

3

Introduo: O que so Web Standards?Web standards um conjunto de normars definidos pela W3C (World Wide WebConsortium) com objetivo de auxiliar fabricantes, desenvolvedores e projetistas adesenvolverem projetos compatveis a todo tipo de dispositivo e acessvel a todos. Asdiversas especificaes no so apenas padres de codificao de websites, mastambm incluem prticas.

Os padres web, em sua maioria, so regras simples de serem aplicadas no cdigo, masque fazem diferena no resultado final, podendo resultar em diminuio de custo e emganho de tempo.

Vantagens:

Algumas das vantagens de se aplicar os padres web:

Multi-plataforma: se adapta a qualquer plataforma (Windows, Mac, PDA, Linux,Mobile etc);

Portabilidade: com a criao de um CSS (Cascading Style Sheets) especfico, possvel deixar o site acessvel qualquer dispositivo, seja descktop ou mvel, semque haja a necessidade de reprogramar a pgina inteira;

Reduo de tamanho: as pginas tm seus arquivos menores com a reduo delinhas de cdigo e conseqentemente carregam mais rpido;

Melhoria na indexao em pginas de buscas (SEO):com o cdigo semntico, osrobs de busca tem mais facilidade de ler o contedo para indexar nos seusresultados;

Acessibilidade: da mesma forma que os robs de buscas, os leitores de telasconseguem ler o contedo do cdigo com mais facilidade.

Trabalhando com Web Standards: Estrutura

HTML + XML = (X)HTML

(X)HTML (eXtensible Hypertext Markup Language) uma linguagem bem similar aoHTML (Hypertext Markup Language), porm, com caractersticas herdadas do XML(Extensible Markup Language). O objetivo dessa marcao melhorar a acessibilidade aqualquer tipo de dispositivo: TV, descktop, mobile.

Regras de sintaxe

obrigatrio fechar a tag depois de aberta;

As tags devem seguir a mesma ordem com que foram abertas;

Todas as tags e parmetros devem estar em minsculo;

Os parmetros devem apresentar seus valores entre aspas "".


4/15

4

Usando as tags semanticamente

Cada tag/elemento do (X)HTML possui um significado semntico para apresentar averdadeira informao daquele contedo. Para isso, basta usar as tags para a sua realfuncionalidade. Um exemplo a tag para endereo e telefone.

Separando o Contedo da Apresentao Visual (estilos)

muito importante para os web standards que o contedo esteja separado da suaapresentao visual, os estilos. Estilos so elementos que no agregam informaescomo cores, fontes estilizadas, espaamentos, fundos etc. Como regra geral, podemosdizer que toda informao do contedo deve ficar dentro do (X)HTML, enquanto scriptse estilos, devem ficar fora dele.

CSS: herana e cascata

Na folha de estilo, so definidas regras que so herdadas de "pais para filhos", ou seja,atributos que os elementos pai recebem, so herdados pelos elementos filhos.

Cdigos

Renderizao no navegador.

Alm disso, o CSS tem a possibilidade de criar vrias folhas de estilos no formatocascata, assim, mais de um elemento pode herdar as mesmas caractersticas, mesmoque no seja filho um do outro.


5/15

5

Cdigos


Os estilos tem uma ordem de prioridade em funo de onde e como foram declarados:

Inline:so os estilos aplicados dentro das tags (X)HTML;

Incorporadas: so as folhas escritas dentro da tag no cabealho do(X)HTML;

Externas:so as folhas de estilos escritas em um arquivo externo e linkada dentro docabealho do (X)HTML.

Dessas trs formas, a melhor recomendada a ltima opo, para que a manutenofique mais fcil e o cdigo (X)HTML fique limpo.

Scripts e manipulao de elementos

So blocos de cdigo para deixar a estrutura da pgina dinmica e assim, ficar maisinterativa com o usurio. Da mesma forma que o CSS, esses scripts devem serchamados e no escritos dentro do (X)HTML, para que no se tenha problemas com ocarregamento da pgina. Ao contrrio do arquivo .css os arquivos .js, podem serchamados em qualquer lugar do cdigo, mas recomendvel que sejam chamados nofinal dele, antes do fechamento da tag , para que outros elementos nodependam do carregamento desses scripts para que apaream.

Obs:Nem sempre possvel fazer os chamados dos scripts no final do cdigo, massempre que possvel, faa.


6/15

6

Trabalho com Trs Camadas: Contedo, Design e ComportamentoUma boa prtica para o desenvolvimento de web pages separ-las por etapas. Focarem cada uma delas, deixa a margem de erros menor, pois se tem uma viso melhor doque est sendo feito naquele momento.

Primeira Camada: Contedo (X)HTML

Montar a estrutura antes de tudo d a mesma visualizao que um leitor de tela ou umrob de busca. Dessa forma, possvel visualizar exatamente o que se deseja passarpara o seu usurio final.

Segunda Camada: Design (estilos CSS)

Aps a estrutura montada, define-se os elementos visuais no CSS. Comece pelosprincipais, que so as tags do (X)HTML: body, p, a, small, address, h1, h2etc.

Depois, construa blocos de estilos para os elementos como topo, rodap, destaque,menu. Considere esses como os pais, so os que vo envolver os elementos filhos. Porltimo deixe os mais especficos, como um pargrafo de cor diferente.


7/15


8/15

8

SEO: os mecanismos de buscas conseguem acessar uma pgina com muito maisfacilidade quando ela tem o cdigo semntico e um tempo de carregamento reduzido.Dessa forma, a indexao da pgina fica mais fcil.

Sempre h uma pedra no caminho...

Nem sempre o desenvolvimento seguindo os padres web vo garantir o acesso apgina. Infelizmente nem todos os navegadores so amigveis com alguns elementos,principalmente no CSS e no JS. Saber usar os web standards vai sim diminuir o tempo dedesenvolvimento para fazer os crossbrowsers(compatibilidade entre os navegadores e osite), mas mesmo assim necessrio lidar com alguns "hacks" para que a pginafuncione em 100% deles.

Os navegadores que mais precisam disso so os navegadores da Microsoft, InternetExplorer 6 e Internet Explorer 7. Para no fazer hacksinadequados aos padres W3C, recomendado que se use um condicional no cabealho do (X)HTML. Esse condicional lido apenas por esses navegadores.

Com esses condicionais, o desenvolvedor pode fazer um arquivo CSS para cada um dosnavegadores, IE6 e IE7, sem que interfira em toda a estrutura do site. Mas ateno!Fazer CSS em arquivos separados, no significa que so todos os estilos da pgina, massomente os elementos que precisam de ajustes.

Outros problemas que podem interferir nos padres web:

Desenvolvimento corrido: o "mtodo gambiarra" para que a pgina fique prontarapidamente, pode atrapalhar em futuras manutenes de cdigo e deix-lo sujo com

excesso de linhas e isso pode atrapalhar no tempo de carregamento da pgina emanuteno.

Muitos desenvolvedores no mesmo projeto: cada um usa uma tcnica diferente,ou o que uma pessoa fez, acaba sendo repetido por outra por falta de dilogo naequipe ou simplesmente por falta de ateno.

Editores WYSIWYG:os editores no so 100% fiis ao que a apresentao do sitedeveria ser.

Boas PrticasOutros fatores que valem a pena serem considerados na hora de se desenvolver umapgina:

Microformats

"Microformatos um conjunto de formatos abertos projetados para adicionar semnticaem qualquer documento XML, especialmente HTML/XHTML." Wikipedia, 2009.

Isso feito atravs dos parmetros rel, class e rev, que mostram informaesespecficas de determinados blocos do cdigo.


9/15

9

CSS 3.0

A verso 3.0 do CSS ainda est em desenvolvimento, mas mesmo assim vale a penaler sobre os novos comandos da linguagem, pois podem diminuir no tempo dedesenvolvimento. O CSS3 possui alguns estilos que diminuem no excesso de divs eimagens nas pginas. Um exemplo disso so as bordas arredondadas que antes eramfeitas usando-se imagens, agora podem ser substitudas pelo comando border-radius.

Ateno:o CSS3 s funciona em navegadores novos e que seguem os padres W3C(esquea o IE 7 ou anterior). Mas, a maior parte desses elementos vo interferirsomente na parte visual da pgina, se no fizer diferena no resultado, vale a pena us-los. Caso contrrio, existem hacks e o jQuery que ajudam a fazer os mesmos efeitosnesses navegadores ultrapassados.

Otimizao do CSS

No s o cdigo (X)HTML que deve ser limpo, o seu cdigo de estilos tambm deve.Ento elimine o excesso de linhas:

Agrupe elementos com propriedades iguais.

Aninhe as propriedades que podem ser escritas em uma nica linha.

Dicas:

Essas dicas no so essenciais para web standards, mas ajudam na organizao doCSS.

Use hierarquias.

Use comentrios, mas no abuse.


10/15

10

Quando o bloco possuir somente uma linha de estilo, economize espaos embranco colocando tudo em uma nica linha. Elimine tambm a vrgula.

CMSs, Frameworks e APIs

Pra que comear do zero sendo que existe pronto?! O uso de frameworks, APIs eCMSs vo ajudar a cortar o tempo de desenvolvimento significativamente. Aprenda a

usar esses recursos para se preocupar mais em outros pontos do projeto.

Planejamento

Pense antes de comear. O planejamento de uma pgina essencial para que elafuncione bem e para que no haja perda de tempo e retrabalho. Gastar tempo noplanejamento da pgina vai ajudar a economizar tempo no desenvolvimento.

Diferenciar os links do resto do texto

Evite apenas mudar a cor do link ou usar um negrito. Pessoas com daltonismo podemno conseguir identificar aquele link se estiver apenas com a cor diferente. Use opadro sublinhado, ou se quiser fazer diferente, usar bordas na parte de baixo com umestilo diferente do sublinhado ou colocar um fundo no link, podem ajudar a indentific-los.


11/15

11

Cdigo CSS.


Usabiliadade

De nada adianta o site possuir padres web e ser acessvel se os usurios noconseguirem encontrar o que procuram. Seja organizado com as informaes da pginae objetivo. Interatividade e inovao diferente de baguna.

Pensando na AcessibilidadeA acessibilidade vai muito alm dos deficientes visuais e leitores de telas. Sua pginadeve funcionar para qualquer um, independente da plataforma onde o site estiverrodando.

Os padres web funcionam para a acessibilidade de uma navegao que se usa s oteclado, pois possvel identificar os elementos clicveis das pginas com o uso da

tecla tab. O site fica melhor acessvel para conexes lentas.

possvel ter acesso de navegadores mveis como os de celulares, pagers,smarphones etc.

Mas como fazer o site acessvel?

A acessibilidade do site no depende somente dos padres web e de um cdigosemntico. Alguns pontos devem ser considerados para que uma pgina seja acessvel:

Elimine frames

Os frames confundem os leitores de telas e os robs de mecanismos de buscas;

Deixam a pgina mais pesada, pois so feitas mais de uma requisio por vez, eisso pode dificultar no carregamento dela;

Impresses de pginas ficam complicadas, pois o navegador no consegueidentificar o contedo que est dentro do frame;

A manuteno da pgina se torna mais complexa e chata.

Formulrios

Use os formulrios semanticamente usando os elementos label, fieldset elegend.


12/15

12

Exemplo de formulrio semntico.

Onde:

permite controlar um grupo de campos;

a legenda para o grupo;

referencia um campo;

o O atributo fordeve ser referenciado a um idreferente ao seu campo;

permite criar grupos da tag ;

tabindexpermite controlar a navegao atravs da tecla tab;

accesskeypermite associar teclas de atalhos aos campos.

Elimine layout com tabelas

As tabelas no foram feitas para montar layout, e sim para apresentar dados;

Pginas feitas com tabelas ficam mais pesadas;

Os dados no so apresentados adequadamente caso o usurio no use umnavegador grfico (leitores de telas);

A manuteno da pgina fica difcil.

Tabelas tambm devem ser semnticas

Assim como os formulrios, as tabelas tambm possuem elementos especiais:sumary, , , , e .


13/15

13

Cdigo de tabela semntica.

Renderizao da tabela no navegador.

Onde:

captionuma prvia do contedo da tabela. Pequena descrio; o ttulo da tabela;

o cabealho;

o rodap da tabela;

delimita o corpo da tabela

so clulas do cabealho e do rodap.

Evite o excesso de javascript

Alguns usurios desabilitam os scripts dos navegadores por segurana e a maioriados navegadores de dispositivos mveis ainda no suportam os scripts, e assim apgina acaba perdendo acessibilidade.


14/15

14

Evite navegao da pgina com flash e javascript

Os dispositivos mveis, leitores de telas e robs de buscas no conseguem identificaros links de navegaes feitas por animaes flash ou por cliques de scripts. Eviteesse tipo de navegao.

Web Stabdards e SEOSEO, do ingls Search Engine Optimization (otimizao de mecanismos de buscas), soestratgias aplicadas dentro e fora da pgina para que o posicionamento dela fiquemelhor nos resultados das pginas de buscas.

Como citado vrias vezes, os padres web ajudam os robs desses mecanismos aidentificarem o que tem na sua pgina e qual a relevncia que cada bloco de texto dapgina tem para os visitantes.

Alguns dos elementos que devem ser trabalhados nos padres web que ajudam nasestratgias de SEO:

Title: um dos elementos de mais relevncia para o rob de busca. Deveser descritivo e objetivo.

URL:a URL da pgina deve ser entendida pelos mecanismos e pelos usurios. Eviteparmetros e caracteres, use uma URL descritiva e amigvel.

H1:deve ser nico na pgina, objetivo e descritivo.

Cabealhos (h2, h3, h4...): use para dar relevncia aos sub-tpicos e tente manter ahierarquia.

Textos ancoras: so o textos de links, os que ficam dentro das tags . Evite"clique aqui", seja descritivo e objetivo. H muito mais chances de o usurio entendero que tem naquele link e para onde ele leva se usado assim, e isso os robs debuscas tambm conseguem interpretar.

Alt:so os parmetros das tags de imagens. Use esse parmetro para mostrar o que o contedo daquela imagem. Isso ajuda na acessibilidade de leitores de telastambm.

Atributo title: funcionam como os textos ancoras ou os alt das imagens.

Recomendado para adicionar informaes aos links ou em outros elementos como o.

Enfases ( e ): no use exageradamente, mas para enfatizarinformaes. A melhor forma de fazer isso pensando no usurio, no deixe ocontedo do texto cansativo, e com destaques em tudo. Destaque apenas o que deveser relevante.

Nomes de arquivos:assim como as URLs, os arquivos como fotos, pdfs, ppts etc,devem ter seu nome descritivo para que o rob de busca saiba identificar o que aquele contedo. Deve ser curto e objetivo, evite cdigos como DC445.jpg.


15/15

15

Ferramentas (Extenses Firefox) Firebug: permite debugar, editar e monitorar a pgina em tempo real.

http://bit.ly/fFL7A

HTML Validator:valida o HTML sem a necessidade de visitar o validador da W3C.http://bit.ly/YvVLH

Web Developer: barra com vrias ferramentas que ajudam no desenvolvimento depginas.http://bit.ly/FiiR0

IE Tab:simula o Internet Explorer no Firefox.http://bit.ly/16C4iH

YSlow: funciona junto com o Firebug. Mostra o desempenho da pgina de acordocom a seu carregamento.http://bit.ly/pGc7l

Alguns LinksPerfis no Twitter para seguir de desenvolvimento web:

Estilizando tabelas no XHTML : http://bit.ly/2eeC9I

Plugins Firefox para Web Designers:http://bit.ly/lXOu6

Dica de otimizao de CSS I:http://bit.ly/2M2BDl

Formulrios semnticos:http://bit.ly/1FfVlC

Monografia de Web Standards por Renata Tibiri:http://bit.ly/4xsOdA

Afinal de contas, qual o problema do Internet Explorer 6?: http://bit.ly/1Wgbat

Object-Oriented CSS: What, How, and Why:http://bit.ly/F4NFt

Axure Libraries & Widgets Compilationhttp://bit.ly/4dIQW0

jQuery Visual Cheat Sheet: http://bit.ly/CRQmb

W3C:http://bit.ly/2HZ6RU

Blogs

Blog do Maujor:http://bit.ly/3sszVi

Tableless:http://bit.ly/1ex1CV

Nettuts:http://bit.ly/4uoE0j

Smashing Magazine:http://bit.ly/36wRpU

CSSclip:http://bit.ly/3sdG95

CSS Globe:http://bit.ly/171ziU

MestreSEO:http://bit.ly/3JSpIuBrasil SEO:http://bit.ly/3nlRxG

Ajax Rain:http://bit.ly/2PkJR0

CSS3 Info:http://bit.ly/7YzQP

Onde me encontrar

Meu Blog WDCSS:http://bit.ly/1wtYME

Twitter @cleomorgause:http://bit.ly/18munF

Reader (RSS):http://bit.ly/33d8XR

Delicious:http://bit.ly/3FiHXPSlideShare:http://bit.ly/1FnQ9Z
http://bit.ly/fFL7Ahttp://bit.ly/fFL7Ahttp://bit.ly/YvVLHhttp://bit.ly/YvVLHhttp://bit.ly/FiiR0http://bit.ly/FiiR0http://bit.ly/FiiR0http://bit.ly/16C4iHhttp://bit.ly/16C4iHhttp://bit.ly/16C4iHhttp://bit.ly/pGc7lhttp://bit.ly/pGc7lhttp://bit.ly/pGc7lhttp://bit.ly/2eeC9Ihttp://bit.ly/2eeC9Ihttp://bit.ly/lXOu6http://bit.ly/lXOu6http://bit.ly/lXOu6http://bit.ly/2M2BDlhttp://bit.ly/2M2BDlhttp://bit.ly/2M2BDlhttp://bit.ly/1FfVlChttp://bit.ly/1FfVlChttp://bit.ly/1FfVlChttp://bit.ly/4xsOdAhttp://bit.ly/4xsOdAhttp://bit.ly/4xsOdAhttp://bit.ly/F4NFthttp://bit.ly/F4NFthttp://bit.ly/F4NFthttp://bit.ly/4dIQW0http://bit.ly/4dIQW0http://bit.ly/4dIQW0http://bit.ly/CRQmbhttp://bit.ly/CRQmbhttp://bit.ly/2HZ6RUhttp://bit.ly/2HZ6RUhttp://bit.ly/2HZ6RUhttp://bit.ly/3sszVihttp://bit.ly/3sszVihttp://bit.ly/3sszVihttp://bit.ly/1ex1CVhttp://bit.ly/1ex1CVhttp://bit.ly/1ex1CVhttp://bit.ly/4uoE0jhttp://bit.ly/4uoE0jhttp://bit.ly/4uoE0jhttp://bit.ly/36wRpUhttp://bit.ly/36wRpUhttp://bit.ly/36wRpUhttp://bit.ly/3sdG95http://bit.ly/3sdG95http://bit.ly/3sdG95http://bit.ly/171ziUhttp://bit.ly/171ziUhttp://bit.ly/171ziUhttp://bit.ly/3JSpIuhttp://bit.ly/3JSpIuhttp://bit.ly/3JSpIuhttp://bit.ly/3nlRxGhttp://bit.ly/3nlRxGhttp://bit.ly/3nlRxGhttp://bit.ly/2PkJR0http://bit.ly/2PkJR0http://bit.ly/2PkJR0http://bit.ly/7YzQPhttp://bit.ly/7YzQPhttp://bit.ly/7YzQPhttp://bit.ly/1wtYMEhttp://bit.ly/1wtYMEhttp://bit.ly/1wtYMEhttp://bit.ly/18munFhttp://bit.ly/18munFhttp://bit.ly/18munFhttp://bit.ly/33d8XRhttp://bit.ly/33d8XRhttp://bit.ly/33d8XRhttp://bit.ly/3FiHXPhttp://bit.ly/3FiHXPhttp://bit.ly/3FiHXPhttp://bit.ly/1FnQ9Zhttp://bit.ly/1FnQ9Zhttp://bit.ly/1FnQ9Zhttp://bit.ly/1FnQ9Zhttp://bit.ly/3FiHXPhttp://bit.ly/33d8XRhttp://bit.ly/18munFhttp://bit.ly/1wtYMEhttp://bit.ly/7YzQPhttp://bit.ly/2PkJR0http://bit.ly/3nlRxGhttp://bit.ly/3JSpIuhttp://bit.ly/171ziUhttp://bit.ly/3sdG95http://bit.ly/36wRpUhttp://bit.ly/4uoE0jhttp://bit.ly/1ex1CVhttp://bit.ly/3sszVihttp://bit.ly/2HZ6RUhttp://bit.ly/CRQmbhttp://bit.ly/4dIQW0http://bit.ly/F4NFthttp://bit.ly/4xsOdAhttp://bit.ly/1FfVlChttp://bit.ly/2M2BDlhttp://bit.ly/lXOu6http://bit.ly/2eeC9Ihttp://bit.ly/pGc7lhttp://bit.ly/16C4iHhttp://bit.ly/FiiR0http://bit.ly/YvVLHhttp://bit.ly/fFL7A

21274972 Webstandards Melhores Praticas Para Construcao de Paginas Web

Documents

Transcript of 21274972 Webstandards Melhores Praticas Para Construcao de Paginas Web