Your SlideShare is downloading. ×
Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
Padrões da WEB <ul><li>Os padrões foram criados para facilitar a vida de quem trabalha com internet e para tornar a navega...
HTML <ul><li>HTML deve ser utilizado para definir o conteúdo e a estrutura. </li></ul><ul><li>Deve ser semântico (dar sign...
HTML x XHTML <ul><li>XHTML é a nova versão do HTML, foco atual de todos os navegadores e considerada o futuro da internet,...
HTML x XHTML <ul><li>Assim como o HTML, existem 3 versões (Strict, Transitional e Frameset), Strict define que o documento...
Tags a serem evitadas <ul><li>Deliberadas  </li></ul><ul><ul><li>Depreciadas:  </li></ul></ul><ul><ul><ul><li>basefont  </...
Tags depreciadas S=Strict, T=Transitional e F=Frameset  TF Deprecated. Defines underlined text <u> TF Deprecated. Defines ...
Erros comuns <ul><li>Não definir o tipo DocType apropriado </li></ul><ul><ul><li>XHTML 1.0 Strict </li></ul></ul><ul><ul><...
Erros comuns <ul><li>Não fechar elementos vazios  </li></ul><ul><ul><li>Errado :  <br><hr> </li></ul></ul><ul><ul><li>Cert...
Erros comuns <ul><li>Não fechar elementos de conteúdo </li></ul><ul><ul><li>Errado :  <p>Paragrafo 1<p>Paragrafo 2 </li></...
Erros comuns <ul><li>Agrupamento incorreto de elementos </li></ul><ul><ul><li>Errado :  <em><strong>This is some text.</em...
Erros comuns <ul><li>Não colocar aspas em volta dos elementos </li></ul><ul><ul><li>Errado :  <td rowspan=3>  </li></ul></...
Erros comuns <ul><li>Colocar caracteres especiais no documento </li></ul><ul><ul><li>Errado :  <title>Cars & Trucks</title...
Erros comuns <ul><li>Usar o & dentro de URLs </li></ul><ul><ul><li>Errado :  <a href=&quot;index.php?page=news&style=5&quo...
Erros comuns <ul><li>Não reconhecer que XHTML é case sensitive </li></ul><ul><ul><li>Errado :  <BODY><P ID=&quot;ONE&quot;...
Erros comuns <ul><li>Usar redução de atributos </li></ul><ul><ul><li>Errado :  <textarea readonly>READ-ONLY</textarea>  </...
Recomendações para acessibilidade <ul><li>Prover um texto equivalente para todos elementos não textuais </li></ul><ul><ul>...
Recomendações para acessibilidade <ul><li>Usar elementos de título para convencionar a estrutura do documento </li></ul><u...
Recomendações para acessibilidade <ul><li>Evite o uso de elementos depreciados pelo W3C </li></ul><ul><ul><li>Elementos co...
Folha de Estilo <ul><li>As folhas de estilo visam separar a apresentação e o conteúdo das páginas.  </li></ul><ul><li>As m...
Vantagens <ul><li>A separação da apresentação do conteúdo tem várias vantagens, e cada vez mais vantagens com uma melhor a...
Velocidade <ul><li>Sites que utilizam CSS tendem a carregar mais rápido. A primeira pagina do site normalmente demora um p...
Manutenção <ul><li>Guardar todas as informações de estilo em um único arquivo reduz o tempo gasto com manutenção, alem de ...
Acessibilidade <ul><li>Em navegadores que não aceitam conteúdo gráfico, como o Lynx, irão ignorar esses CSS, mas o conteúd...
Customização <ul><li>Se a informação de layout estiver toda de forma externa, um usuário pode escolher por desabilitar o l...
Consistência <ul><li>Como o arquivo de conteúdo contém apenas o conteúdo de forma semântica que o autor tem a intenção de ...
Portabilidade <ul><li>Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo. ...
Limitações <ul><li>Apesar do CSS ser um padrão adotado e difundido no mercado ele ainda possui diversas limitações, mas qu...
Suporte inconsistente dos navegadores <ul><li>Diferentes navegadores irão mostrar layouts CSS diferente como resultado de ...
Controle do formato do elemento <ul><li>O CSS somente oferece formatos retangulares, cantos arredondados ou outras formas ...
Falta de definição de colunas <ul><li>Atualmente layouts com múltiplas colunas é complexo de ser implementado, além de ger...
Exemplos <ul><li>http://www.webstandards.org/ </li></ul><ul><li>http://www.csszengarden.com/ </li></ul>
Web Standards Project
Sem folha de estilo
Modo tela pequena <ul><li>Celulares </li></ul><ul><li>Palms </li></ul><ul><li>PDAs </li></ul>
Zen Garden – Código fonte
Site sem folha de estilo
Site normal
 
 
 
Muito obrigado <ul><li>Dúvidas  ? </li></ul>Diego Potapczuk [email_address] diegoliveira.com.br
Upcoming SlideShare
Loading in...5
×

Padroes Web

1,852

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,852
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Padroes Web"

  1. 1. Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
  2. 2. Padrões da WEB <ul><li>Os padrões foram criados para facilitar a vida de quem trabalha com internet e para tornar a navegação dos usuário mais agradável. </li></ul><ul><li>Diversos padrões e boas práticas definidas em diversas áreas (HTML Semântico, XHTML, CSS, usabilidade, acessibilidade, portabilidade). </li></ul>
  3. 3. HTML <ul><li>HTML deve ser utilizado para definir o conteúdo e a estrutura. </li></ul><ul><li>Deve ser semântico (dar significado) aos elementos da página. </li></ul><ul><ul><li><h1>Título do curso</h1> </li></ul></ul><ul><ul><li><h2>Título do módulo</h2> </li></ul></ul><ul><ul><li><p>Parágrafo</p> </li></ul></ul><ul><ul><li><h3>Título da seção</h3> </li></ul></ul>
  4. 4. HTML x XHTML <ul><li>XHTML é a nova versão do HTML, foco atual de todos os navegadores e considerada o futuro da internet, sua versão atual é 1.0, mas o 1.1 já foi aprovado. </li></ul><ul><li>Baseada no XML, segue as mesmas regras, é mais restrito que o HTML, mas é mais fácil de se trabalhar o documento posteriormente pois possibilita o uso de ferramentas XML. </li></ul>
  5. 5. HTML x XHTML <ul><li>Assim como o HTML, existem 3 versões (Strict, Transitional e Frameset), Strict define que o documento é estritamente de definição de conteúdo, não possuindo algumas tags de apresentação e fora do padrão, modelo que segundo a W3 será o padrão final do XHTML, o Transitional é a transição do modelo antigo para o padrão, sendo mais tolerável, já o frameset é o modelo a ser usado quando se faz uso de Frames. </li></ul><ul><li>A versão 1.1 do XHTML aparentemente não terá essas 3 versões, e será apenas de definição de documento. </li></ul>
  6. 6. Tags a serem evitadas <ul><li>Deliberadas </li></ul><ul><ul><li>Depreciadas: </li></ul></ul><ul><ul><ul><li>basefont </li></ul></ul></ul><ul><ul><ul><li>center </li></ul></ul></ul><ul><ul><ul><li>font </li></ul></ul></ul><ul><ul><ul><li>hr </li></ul></ul></ul><ul><ul><ul><li>s </li></ul></ul></ul><ul><ul><ul><li>strike </li></ul></ul></ul><ul><ul><ul><li>tt </li></ul></ul></ul><ul><ul><ul><li>u </li></ul></ul></ul><ul><ul><li>Frames: </li></ul></ul><ul><ul><ul><li>frame </li></ul></ul></ul><ul><ul><ul><li>frameset </li></ul></ul></ul><ul><ul><ul><li>iframe </li></ul></ul></ul><ul><ul><li>Strict: </li></ul></ul><ul><ul><ul><li>b </li></ul></ul></ul><ul><ul><ul><li>br (quando usado de forma errada no lugar de um <div> ou <p>) </li></ul></ul></ul><ul><ul><ul><li>big </li></ul></ul></ul><ul><ul><ul><li>i </li></ul></ul></ul><ul><ul><ul><li>small </li></ul></ul></ul><ul><ul><ul><li>sub </li></ul></ul></ul><ul><ul><ul><li>sup </li></ul></ul></ul><ul><li>Abusadas </li></ul><ul><ul><li>blockquote (quando usado para identar) </li></ul></ul><ul><ul><li>table (quando usado para layout) </li></ul></ul><ul><ul><li>Presentational Attributes </li></ul></ul><ul><ul><ul><li>align </li></ul></ul></ul><ul><ul><ul><li>alink </li></ul></ul></ul><ul><ul><ul><li>bgcolor </li></ul></ul></ul><ul><ul><ul><li>color </li></ul></ul></ul><ul><ul><ul><li>face </li></ul></ul></ul><ul><ul><ul><li>height </li></ul></ul></ul><ul><ul><ul><li>link (no <body>) </li></ul></ul></ul><ul><ul><ul><li>size (nos elementos <font>) </li></ul></ul></ul><ul><ul><ul><li>valign </li></ul></ul></ul><ul><ul><ul><li>vlink </li></ul></ul></ul><ul><ul><ul><li>width </li></ul></ul></ul>
  7. 7. Tags depreciadas S=Strict, T=Transitional e F=Frameset TF Deprecated. Defines underlined text <u> TF Deprecated. Defines strikethrough text < strike > TF Deprecated. Defines strikethrough text <s> TF Defines a noframe section < noframes > TF Deprecated. Defines a menu list <menu> TF Deprecated. Defines a single-line input field <isindex> TF Defines an inline sub window (frame) < iframe > F Defines a set of frames < frameset > F Defines a sub window (a frame) <frame> TF Deprecated. Defines text font, size, and color < font > TF Deprecated. Defines a directory list < dir > TF Deprecated. Defines centered text < center > TF Deprecated. Defines a base font < basefont > TF Deprecated. Defines an applet < applet > DTD Description Tag
  8. 8. Erros comuns <ul><li>Não definir o tipo DocType apropriado </li></ul><ul><ul><li>XHTML 1.0 Strict </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul></ul></ul><ul><ul><li>XHTML 1.0 Transitional </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul></ul><ul><ul><li>XHTML 1.0 Frameset </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul></ul></ul>
  9. 9. Erros comuns <ul><li>Não fechar elementos vazios </li></ul><ul><ul><li>Errado : <br><hr> </li></ul></ul><ul><ul><li>Certo: <br /><hr /> </li></ul></ul>
  10. 10. Erros comuns <ul><li>Não fechar elementos de conteúdo </li></ul><ul><ul><li>Errado : <p>Paragrafo 1<p>Paragrafo 2 </li></ul></ul><ul><ul><li>Certo: <p>Paragrafo 1</p><p>Paragrafo 2</p> </li></ul></ul>
  11. 11. Erros comuns <ul><li>Agrupamento incorreto de elementos </li></ul><ul><ul><li>Errado : <em><strong>This is some text.</em></strong> </li></ul></ul><ul><ul><li>Certo: <em><strong>This is some text.</strong></em> </li></ul></ul>
  12. 12. Erros comuns <ul><li>Não colocar aspas em volta dos elementos </li></ul><ul><ul><li>Errado : <td rowspan=3> </li></ul></ul><ul><ul><li>Certo: <td rowspan=&quot;3&quot;> ou <td rowspan='3'> </li></ul></ul>
  13. 13. Erros comuns <ul><li>Colocar caracteres especiais no documento </li></ul><ul><ul><li>Errado : <title>Cars & Trucks</title> </li></ul></ul><ul><ul><li>Certo: <title>Cars &amp; Trucks</title> </li></ul></ul>
  14. 14. Erros comuns <ul><li>Usar o & dentro de URLs </li></ul><ul><ul><li>Errado : <a href=&quot;index.php?page=news&style=5&quot;>News</a> </li></ul></ul><ul><ul><li>Certo: <a href=&quot;index.php?page=news&amp;style=5&quot;>News</a> </li></ul></ul>
  15. 15. Erros comuns <ul><li>Não reconhecer que XHTML é case sensitive </li></ul><ul><ul><li>Errado : <BODY><P ID=&quot;ONE&quot;>The Best Page Ever</P></BODY> </li></ul></ul><ul><ul><li>Certo: <body><p id=&quot;ONE&quot;>The Best Page Ever</p></body> </li></ul></ul>
  16. 16. Erros comuns <ul><li>Usar redução de atributos </li></ul><ul><ul><li>Errado : <textarea readonly>READ-ONLY</textarea> </li></ul></ul><ul><ul><li>Certo: <textarea readonly=&quot;readonly&quot;>READ-ONLY</textarea> </li></ul></ul>
  17. 17. Recomendações para acessibilidade <ul><li>Prover um texto equivalente para todos elementos não textuais </li></ul><ul><ul><ul><li>(imagens sem alt ou com alt vazios) </li></ul></ul></ul><ul><li>Validar o documento para garantir máxima compatibilidade </li></ul><ul><ul><ul><li>Validação do XHTML e CSS </li></ul></ul></ul><ul><li>Usar Folha de estilo para apresentação </li></ul><ul><ul><ul><li>Garantir que elementos de apresentação não atrapalhe usuários que não necessitam dele </li></ul></ul></ul>
  18. 18. Recomendações para acessibilidade <ul><li>Usar elementos de título para convencionar a estrutura do documento </li></ul><ul><ul><li><h1>Título do curso</h1> </li></ul></ul><ul><ul><li><h2>Título do módulo</h2> </li></ul></ul><ul><ul><li><h3>Título da seção</h3> </li></ul></ul><ul><li>Fazer uso correto de listas e citações </li></ul><ul><li>Organize o documento para que possa ser lido sem a folha de estilo </li></ul><ul><li>Garantir que o documento possa ser lido quando java, javascript ou applet estiverem desabilitados </li></ul><ul><li>Tornar possível a navegação com o mouse ou o teclado </li></ul><ul><li>Prover uma ordem lógica de navegação com o uso do TAB </li></ul>
  19. 19. Recomendações para acessibilidade <ul><li>Evite o uso de elementos depreciados pelo W3C </li></ul><ul><ul><li>Elementos como <font> somente funcionam ainda para garantir a compatibilidade com navegadores antigos </li></ul></ul><ul><li>Usar as tags labels (etiquetas) com seus respectivos elementos dentro de formulários </li></ul>
  20. 20. Folha de Estilo <ul><li>As folhas de estilo visam separar a apresentação e o conteúdo das páginas. </li></ul><ul><li>As marcações (ex. HTML ou XHTML) definem como será a semântica do conteúdo e sua estrutura, mas não o layout visual (estilo) dele. O estilo deve ser definido em uma folha de estilo separada, usando uma linguagem como o CSS ou XSL. </li></ul><ul><li>O CSS é a folha de estilo mais utilizada na internet </li></ul>
  21. 21. Vantagens <ul><li>A separação da apresentação do conteúdo tem várias vantagens, e cada vez mais vantagens com uma melhor adoção e evolução do CSS pelos navegadores. </li></ul>
  22. 22. Velocidade <ul><li>Sites que utilizam CSS tendem a carregar mais rápido. A primeira pagina do site normalmente demora um pouco, pois ele ira carregar o conteúdo e o estilo, mas nas paginas seguintes, o estilo já estará no cachê do navegador. </li></ul>
  23. 23. Manutenção <ul><li>Guardar todas as informações de estilo em um único arquivo reduz o tempo gasto com manutenção, alem de evitar erros humanos reduzindo as tarefas de manutenção. </li></ul>
  24. 24. Acessibilidade <ul><li>Em navegadores que não aceitam conteúdo gráfico, como o Lynx, irão ignorar esses CSS, mas o conteúdo continuará a ser mostrado corretamente. </li></ul><ul><li>Outro exemplo são os terminais em braile e leitores de tela, que irão funcionar melhor, pois poderão ignorar por completo as informações de layout. </li></ul>
  25. 25. Customização <ul><li>Se a informação de layout estiver toda de forma externa, um usuário pode escolher por desabilitar o layout e visualizar somente o conteúdo, alem de que hoje sites já disponibilizam diversas folhas de estilo, possibilitando que o usuário escolha a que mais gostar. </li></ul><ul><li>Os navegadores mais modernos também possibilitam seus usuários definir suas próprias regras de CSS, possibilitando, por exemplo, que eles definam suas próprias cores e fontes para um site. </li></ul>
  26. 26. Consistência <ul><li>Como o arquivo de conteúdo contém apenas o conteúdo de forma semântica que o autor tem a intenção de mostrar, ele não precisa se preocupar com a apresentação no momento da composição. </li></ul>
  27. 27. Portabilidade <ul><li>Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo. </li></ul>
  28. 28. Limitações <ul><li>Apesar do CSS ser um padrão adotado e difundido no mercado ele ainda possui diversas limitações, mas que estão sendo corrigidas com as novas especificações. </li></ul>
  29. 29. Suporte inconsistente dos navegadores <ul><li>Diferentes navegadores irão mostrar layouts CSS diferente como resultado de bugs do navegador ou falta de alguns recursos CSS. Por exemplo o internet explorer 6 que implementa muitas das propriedades do CSS 2.0 de sua forma, gerando incompatibilidade e interpretando incorretamente diversas propriedades. Dessa forma tendo que ser utilizados diversos CSS “hacks” para conseguir um layout consistente. </li></ul>
  30. 30. Controle do formato do elemento <ul><li>O CSS somente oferece formatos retangulares, cantos arredondados ou outras formas requerem formas não semânticas. Porem isso esta sendo analisado para o CSS3. </li></ul>
  31. 31. Falta de definição de colunas <ul><li>Atualmente layouts com múltiplas colunas é complexo de ser implementado, além de gerar diferentes visualizações a depender do navegador, resolução e formato de tela. </li></ul>
  32. 32. Exemplos <ul><li>http://www.webstandards.org/ </li></ul><ul><li>http://www.csszengarden.com/ </li></ul>
  33. 33. Web Standards Project
  34. 34. Sem folha de estilo
  35. 35. Modo tela pequena <ul><li>Celulares </li></ul><ul><li>Palms </li></ul><ul><li>PDAs </li></ul>
  36. 36. Zen Garden – Código fonte
  37. 37. Site sem folha de estilo
  38. 38. Site normal
  39. 42. Muito obrigado <ul><li>Dúvidas ? </li></ul>Diego Potapczuk [email_address] diegoliveira.com.br

×