Upload
manoel-dos-santos
View
736
Download
2
Embed Size (px)
DESCRIPTION
Palestra sobre Web Standards dada para o grupo de usuário Dot Net Floripa.
Citation preview
Web Standardscom .NET
Manoel dos Santos @manoeldossantos
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/
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
Diferentes dispositivos
Diferentes navegadores
Acid3
Vantagens
• SEO
• Arquivos menores
• Acessibilidade
• Compatibilidade
• Fácil manutenção
• Flexibilidade de layout
Conteúdo + Apresentação + Comportamento
Conteúdo
HTML
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”
Apresentação
HTMLCSS
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
Comportamento
HTMLCSS
Javascript/AJAX
Comportamento ou Manipulação do DOM• Não obstrusivo
– Uma página deve funcionar normalmente quando o javascript estiver desabilitado.
Receita de bolo
1. Monte a estrutura – HTML
2. Crie os estilos – CSS
3. Adicione os comportamentos – Javascript/AJAX
Showtime
Validação
• (X)HTML - http://validator.w3.org/
• CSS - http://jigsaw.w3.org/css-validator/
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
A Evolução
HTML5
CSS3
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/
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
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
Showtime
http://www.findmebyip.com/litmus/
Suporte atual dos navegadores
Galeria
http://html5gallery.com/
CSS3
• CSS agora está na 3 camada (comportamento)
• Menos imagens
• Maior controle
• Modular
Suporte atual dos navegadores
http://www.findmebyip.com/litmus