Your SlideShare is downloading. ×
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,828

Published on

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

No Downloads
Views
Total Views
1,828
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
    • 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.
    • Diversos padrões e boas práticas definidas em diversas áreas (HTML Semântico, XHTML, CSS, usabilidade, acessibilidade, portabilidade).
  • 3. HTML
    • HTML deve ser utilizado para definir o conteúdo e a estrutura.
    • Deve ser semântico (dar significado) aos elementos da página.
      • <h1>Título do curso</h1>
      • <h2>Título do módulo</h2>
      • <p>Parágrafo</p>
      • <h3>Título da seção</h3>
  • 4. HTML x XHTML
    • 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.
    • 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.
  • 5. HTML x XHTML
    • 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.
    • A versão 1.1 do XHTML aparentemente não terá essas 3 versões, e será apenas de definição de documento.
  • 6. Tags a serem evitadas
    • Deliberadas
      • Depreciadas:
        • basefont
        • center
        • font
        • hr
        • s
        • strike
        • tt
        • u
      • Frames:
        • frame
        • frameset
        • iframe
      • Strict:
        • b
        • br (quando usado de forma errada no lugar de um <div> ou <p>)
        • big
        • i
        • small
        • sub
        • sup
    • Abusadas
      • blockquote (quando usado para identar)
      • table (quando usado para layout)
      • Presentational Attributes
        • align
        • alink
        • bgcolor
        • color
        • face
        • height
        • link (no <body>)
        • size (nos elementos <font>)
        • valign
        • vlink
        • width
  • 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
    • Não definir o tipo DocType apropriado
      • XHTML 1.0 Strict
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
      • XHTML 1.0 Transitional
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • XHTML 1.0 Frameset
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
  • 9. Erros comuns
    • Não fechar elementos vazios
      • Errado : <br><hr>
      • Certo: <br /><hr />
  • 10. Erros comuns
    • Não fechar elementos de conteúdo
      • Errado : <p>Paragrafo 1<p>Paragrafo 2
      • Certo: <p>Paragrafo 1</p><p>Paragrafo 2</p>
  • 11. Erros comuns
    • Agrupamento incorreto de elementos
      • Errado : <em><strong>This is some text.</em></strong>
      • Certo: <em><strong>This is some text.</strong></em>
  • 12. Erros comuns
    • Não colocar aspas em volta dos elementos
      • Errado : <td rowspan=3>
      • Certo: <td rowspan=&quot;3&quot;> ou <td rowspan='3'>
  • 13. Erros comuns
    • Colocar caracteres especiais no documento
      • Errado : <title>Cars & Trucks</title>
      • Certo: <title>Cars &amp; Trucks</title>
  • 14. Erros comuns
    • Usar o & dentro de URLs
      • Errado : <a href=&quot;index.php?page=news&style=5&quot;>News</a>
      • Certo: <a href=&quot;index.php?page=news&amp;style=5&quot;>News</a>
  • 15. Erros comuns
    • Não reconhecer que XHTML é case sensitive
      • Errado : <BODY><P ID=&quot;ONE&quot;>The Best Page Ever</P></BODY>
      • Certo: <body><p id=&quot;ONE&quot;>The Best Page Ever</p></body>
  • 16. Erros comuns
    • Usar redução de atributos
      • Errado : <textarea readonly>READ-ONLY</textarea>
      • Certo: <textarea readonly=&quot;readonly&quot;>READ-ONLY</textarea>
  • 17. Recomendações para acessibilidade
    • Prover um texto equivalente para todos elementos não textuais
        • (imagens sem alt ou com alt vazios)
    • Validar o documento para garantir máxima compatibilidade
        • Validação do XHTML e CSS
    • Usar Folha de estilo para apresentação
        • Garantir que elementos de apresentação não atrapalhe usuários que não necessitam dele
  • 18. Recomendações para acessibilidade
    • Usar elementos de título para convencionar a estrutura do documento
      • <h1>Título do curso</h1>
      • <h2>Título do módulo</h2>
      • <h3>Título da seção</h3>
    • Fazer uso correto de listas e citações
    • Organize o documento para que possa ser lido sem a folha de estilo
    • Garantir que o documento possa ser lido quando java, javascript ou applet estiverem desabilitados
    • Tornar possível a navegação com o mouse ou o teclado
    • Prover uma ordem lógica de navegação com o uso do TAB
  • 19. Recomendações para acessibilidade
    • Evite o uso de elementos depreciados pelo W3C
      • Elementos como <font> somente funcionam ainda para garantir a compatibilidade com navegadores antigos
    • Usar as tags labels (etiquetas) com seus respectivos elementos dentro de formulários
  • 20. Folha de Estilo
    • As folhas de estilo visam separar a apresentação e o conteúdo das páginas.
    • 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.
    • O CSS é a folha de estilo mais utilizada na internet
  • 21. Vantagens
    • 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.
  • 22. Velocidade
    • 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.
  • 23. Manutenção
    • 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.
  • 24. Acessibilidade
    • 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.
    • 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.
  • 25. Customização
    • 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.
    • 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.
  • 26. Consistência
    • 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.
  • 27. Portabilidade
    • Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo.
  • 28. Limitações
    • 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.
  • 29. Suporte inconsistente dos navegadores
    • 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.
  • 30. Controle do formato do elemento
    • 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.
  • 31. Falta de definição de colunas
    • 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.
  • 32. Exemplos
    • http://www.webstandards.org/
    • http://www.csszengarden.com/
  • 33. Web Standards Project
  • 34. Sem folha de estilo
  • 35. Modo tela pequena
    • Celulares
    • Palms
    • PDAs
  • 36. Zen Garden – Código fonte
  • 37. Site sem folha de estilo
  • 38. Site normal
  • 39.  
  • 40.  
  • 41.  
  • 42. Muito obrigado
    • Dúvidas ?
    Diego Potapczuk [email_address] diegoliveira.com.br

×