Web Standards

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

O Fim

Manoel dos Santos

manoeldosantos@gmail.com

@manoeldossantos