O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Standards

858 visualizações

Publicada em

Palestra sobre Web Standards dada para o grupo de usuário Dot Net Floripa.

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

Web Standards

  1. 1. Web Standards com .NET Manoel dos Santos @manoeldossantos
  2. 2. Web Standards • Conjunto de especificações técnicas e guidelines para interpretação e criação de web sites • Criados e mantidos pelo W3C • http://www.w3.org/standards/
  3. 3. W3C • Missão: – “Guiar a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.” • Princípios: – Web para todos – Web em tudo • Visão: – Web para Interação Rica – Web dos Dados e Serviços – Web de Confiança
  4. 4. Diferentes dispositivos
  5. 5. Diferentes navegadores
  6. 6. Acid3
  7. 7. Vantagens • SEO • Arquivos menores • Acessibilidade • Compatibilidade • Fácil manutenção • Flexibilidade de layout
  8. 8. Conteúdo + Apresentação + Comportamento
  9. 9. Conteúdo
  10. 10. Conteúdo ou “Markup” • Semântica – Entenda o significado das tags e use-as corretamente • Pragmatismo – Use de forma prática, compreensível, limpa e clara • Identifique os elementos quando necessário – Use classes e ids para descrever o conteúdo e não seu visual. Ex.: use “alerta” e não “vermelho”
  11. 11. Apresentação
  12. 12. Apresentação ou Estilos • Separação – Mantenha todos os estilos em um arquivo separado. <link rel=“stylesheet” media=“screen” href=“estilos.css” /> • Tudo que for estilo deve ser definido no CSS – Imagens relacionadas ao visual do site deve estar definidas como estilo
  13. 13. Comportamento
  14. 14. Comportamento ou Manipulação do DOM • Não obstrusivo – Uma página deve funcionar normalmente quando o javascript estiver desabilitado.
  15. 15. Receita de bolo 1. Monte a estrutura – HTML 2. Crie os estilos – CSS 3. Adicione os comportamentos – Javascript/AJAX
  16. 16. Showtime
  17. 17. Validação • (X)HTML - http://validator.w3.org/ • CSS - http://jigsaw.w3.org/css-validator/
  18. 18. ASP.NET vs Web Standards • <asp:Label> somente como rótulo de formulário e sempre com AssociatedControlID • Para campos de textos utilize <asp:Literal> (nunca <asp:Label>) • Nunca utilize propriedades de estilo, pra isso use somente CSS • Se for necessário utilizar componentes do tipo • CheckBoxList e RadioButtonList devem ser usados com a propriedade RepeatLayout como Flow • Prefira <asp:Repeater> para listagens • MVC oferece mais controle sobre o HTML
  19. 19. A Evolução HTML5 CSS3
  20. 20. HTML5 • Foco em Web Applications • Deve virar recomendação em 2012 • Já é suportado pelos navegadores mais modernos • Menor dependência de javascript • O “fim” dos plugins http://dev.w3.org/html5/spec-author-view/
  21. 21. Melhoria da Semântica Novos elementos para identificar o conteúdo • <header> • <footer> • <section> • <article> • <nav> • <figure> • http://www.w3schools.com/html5/html5_reference.asp
  22. 22. Maiores novidades • Elementos multimídia sem plugins – <audio> e <video> • Desenhos dinâmicos – <canvas> • Armazenamentos de dados no cliente (local storage) • Geolocalização • Drag and drop
  23. 23. Showtime
  24. 24. http://www.findmebyip.com/litmus/ Suporte atual dos navegadores
  25. 25. Galeria http://html5gallery.com/
  26. 26. CSS3 • CSS agora está na 3 camada (comportamento) • Menos imagens • Maior controle • Modular
  27. 27. Suporte atual dos navegadores http://www.findmebyip.com/litmus
  28. 28. O Fim Manoel dos Santos manoeldosantos@gmail.com @manoeldossantos

×