Web Standards com .NET: Conteúdo, Apresentação e Comportamento
•Transferir como PPTX, PDF•
1 gostou•291 visualizações
Palestra sobre Web Standards dada para o grupo de usuário Dot Net Floripa.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Web Standards com .NET: Conteúdo, Apresentação e Comportamento
Semelhante a Web Standards com .NET: Conteúdo, Apresentação e Comportamento (20)
Mais de Manoel dos Santos
Web Standards com .NET: Conteúdo, Apresentação e Comportamento
- 1. Web Standards com .NET Manoel dos Santos @manoeldossantos
- 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. 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
- 6. Acid3
- 8. Vantagens • SEO • Arquivos menores • Acessibilidade • Compatibilidade • Fácil manutenção • Flexibilidade de layout
- 9. Conteúdo + Apresentação + Comportamento
- 10. Conteúdo
- 11. 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”
- 12. Apresentação
- 13. 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
- 14. Comportamento
- 15. Comportamento ou Manipulação do DOM • Não obstrusivo – Uma página deve funcionar normalmente quando o javascript estiver desabilitado.
- 16. Receita de bolo 1. Monte a estrutura – HTML 2. Crie os estilos – CSS 3. Adicione os comportamentos – Javascript/AJAX
- 17. Showtime
- 18. Validação • (X)HTML - http://validator.w3.org/ • CSS - http://jigsaw.w3.org/css-validator/
- 19. 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
- 21. 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/
- 22. 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
- 23. 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
- 24. Showtime
- 25. http://www.findmebyip.com/litmus/ Suporte atual dos navegadores
- 30. CSS3 • CSS agora está na 3 camada (comportamento) • Menos imagens • Maior controle • Modular
- 31. Suporte atual dos navegadores http://www.findmebyip.com/litmus
- 33. O Fim Manoel dos Santos manoeldosantos@gmail.com @manoeldossantos
Notas do Editor
- Boa noite! Meu nome é manoel e eu sou user experience designer. Eu trabalho há mais ou menos 5 anos com design de interfaces de software e hoje eu estou trabalhando na Dígitro. Não é fácil a vida de um designer entusiasta da Microsoft, mas eu garanto pra vocês que um dia eu ainda vou ouvir o Steve Ballmer gritando “Designers, Designers, Designers” e, algum evento. Bom, eu vim aqui hoje pra falar sobe web standards. Vou apresentar um pouco as bases dos padrões, algumas dicas para trabalhar com .NET e, no fim, vou falar um pouco sobre HTML5 e CSS3.
- Pra quem não sabe, Web Standards ou Padrões Web no bom e velho português, são especificações e guidelines escritos pelo W3C para normatizar a criação de web sites e a interpretação deles pelos navegadores. Essas especificações falam sobre o que são e pra quem servem cada tag, por exemplo, e como devem ser usadas. Fala também como seletores e atributos CSS devem ser renderizados pelo navegador. Coisas desse tipo. E o mais importante, os padrões guiam como um site deve ser escrito de maneira que fique acessível a todos os dispositivos e pessoas. Nesse link vocês podem conferir todos os documentos escritos pela W3C. Vale a pena dar uma olhada.
- A missão da W3C é tornar a web um mundo perfeito. O paraíso da informação. A W3C quer garantir que a Web seja acessível por todo tipo de pessoa e em qualquer lugar. E a visão da W3C é que a web seja um canal de duas vias, onde a interação entre os usuários e os autores seja tão forte que não haja mais diferenciação entre eles. Eles visualizam a web também como troca intensa de informações e serviços. E, por fim, que a web seja confiável, segura e amigável.
- E agora começam os obstáculos. Vocês viram ali que os princípios da W3C falavam de web para todos e em qqer lugar. Mas cada pessoa possui um gadget diferente e quer usar a internet com ele. Hoje nós temos milhares de tipos de computadores: Macs, Windows, Linux, desktops, notebooks, netbooks. Os tablets agora. E também os celulares. Sem contar que temos agora televisões que acessam a internet, mesas, espelhos e geladeiras. Tudo isso com telas que podem ir de 3” até 40, 50”. Dispositivos que podem ser usados com mouse, teclado, toque ou até voz. Capacidades de processamento diferentes. Wow… é muito problema. E isso só falando do hardware.
- Em cada um desses dispositivos totalmente diferentes, ainda podemos ter diferentes navegadores. E a guerra hoje entre os navegadores está cada vez pior. Tudo isso nos leva a um lugar. Exatamente onde começamos. Nos padrões. Com toda essa gama de dispositivos e navegadores, se torna cada vez mais importante seguirmos os padrões para garantir que um usuário que acessa um site do celular tenha a mesma experiência de quem acessa no desktop. Notem que não significa que eles vão ver a mesma coisa igualzinho. Mas que vão conseguir aproveitar a informação do mesmo jeito. Pra garantir tudo isso existe um pequeno teste pra verificar como um navegador trabalha com os padrões.
- Esse teste é o Acid, que hoje está na versão 3. Esse que vocês tão vendo é o resultado do último beta do IE9. Ainda não é o melhor mas pro que era os seus sucessores tá muito bom. Isso falando só de padrões web, certo? O IE tem um ótimo desempenho quando se fala de performance e segurança
- Aqui o resultado dos outros navegadores principais do mercado. Os principais concorrentes do IE já alcançam nota máxima no Acid3, mas se vocês notarem a evolução do IE9 em relação ao IE8 chega a cair uma lágrima. Quem aqui usar IE? E desses quem tá testando o IE9? Quem usa Chrome aqui? Firefox? Safari? Opera? Alguem usa Opera? Uma coisa dá pra tirar de conclusão disso. Agora mais do que nunca podemos confiar que, se seguirmos os web standards, nosso site vai ser renderizado igual em todos os mais novos navegadores do mercado. O problema é que usuário não atualiza software, mas isso é outro problema. Os fabricantes estão se esforçando pelo menos.
- Além disso tudo, outras vantagens de se seguir os padrões é SEO, q significa o rankeamento de uma página em mecanismos de busca como bing e google. Os arquivos ficam bem menores, resultando em uma redução de banda enorme. Acessibilidade e compatibilidade como falei antes. Facilidade na manutenção, pq por serem padrões fica mais fácil de qualquer entender e achar oq for necessário. E flexibilidade no layout pela seperação entre conteúdo e apresentação, que é oq vou falar agora.
- Mas como eu começo a desenvolver com web standards? Simples. A primeira lição, a mais básica e também a mais importante é a separação entre as camadas da interface. Os desenvolvedores são acostumados a falar em camadas de software né? Back-end… bla bla bla Acontece que o front-end tbm deve ser dividido em camadas. E essas são: conteúdo, apresentação e comportamento. Os tres devem ser distintos e independentes.
- Começamos pelo conteúdo. Nos padrões isso siginifica códigos HTML ou XTHML.
- O conteúdo também pode ser chamado de markup, é diz respeito a estrutura de um site. O mais importante dessa camada é a semântica. Isso quer dizer que cada Tag tem um propósito de vida e deve ser usada para tal. H1 é o título principal de uma página, ul é uma lista não ordenada, e table é para apresentação de dados tabulares. Ouviram, dados tabulares, e não para diagramar um site inteiro. Anotem isso pq essa é a lição mais importante de toda essa palestra. Semântica, semântica, semântica. O resto é básico. Seja claro e conciso e use IDs e classes pra identificar oq for necessário.
- Agora a camada de apresentação. Essa é toda sobre CSS.
- Todos os estilos do site. Tudo que for relacionado a apresentação ou tema deve ser escrito no CSS. E todo o CSS deve ficar em um arquivo separado. Longe do HTML.
- O comportamento é o javascript e AJAX. Tudo que for adicionado para criar interatividade.
- O principal aqui é que uma página deve funcionar sem os scripts.
- A receitinha de bolo então é primeiro montar toda a estrutura HTML da página, com o conteúdo e tudo mais. Depois você cria os estilos no CSS pra deixar com o Design final. Só depois disso que deve ser acrescentado o javascript.
- Mostrar primeiro o código HTML e como fica na página. Depois linkar o CSS e mostrar como fica. Por fim mostrar o Super preview.
- Depois de tudo pronto, podemos testar o código pra ver se realmente está de acordo com os padrões.
- Agora pra quem desenvolve em .NET, não é tão fácil ter tanto cuidado, já que não temos controle total sobre o HTML final. Mas felizmente a Microsoft fez um trabalho direito. A maioria dos componentes do asp.net hoje renderiza código de acordo com os padrões já, necessitando somente alguns cuidados.
- Mostrar o expression web com suporte a desenvolvimento HTML5.