Your SlideShare is downloading. ×
0
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Padroes Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Padroes Web

1,845

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Portabilidade <ul><li>Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo. </li></ul>
  • 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. 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. 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. 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. Exemplos <ul><li>http://www.webstandards.org/ </li></ul><ul><li>http://www.csszengarden.com/ </li></ul>
  • 33. Web Standards Project
  • 34. Sem folha de estilo
  • 35. Modo tela pequena <ul><li>Celulares </li></ul><ul><li>Palms </li></ul><ul><li>PDAs </li></ul>
  • 36. Zen Garden – Código fonte
  • 37. Site sem folha de estilo
  • 38. Site normal
  • 39.  
  • 40.  
  • 41.  
  • 42. Muito obrigado <ul><li>Dúvidas ? </li></ul>Diego Potapczuk [email_address] diegoliveira.com.br

×