DevMedia
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
.net Magazine 65 - Índice

Artigo .net Magazine 65 - WebStandards

Aplicando boas práticas para conseguir uma usabilidade e uma acessibilidade melhor.

[fechar]

Você não gostou da qualidade deste conteúdo?

(opcional) Você poderia comentar o que não lhe agradou?

Confirmo meu voto negativo

Web – Expert – Boas práticas

WebStandards

Aplicando boas práticas para conseguir uma usabilidade e uma acessibilidade melhor

 

 

Do que trata o artigo

Conceitos de Web Standard;

Como criar Web Sites usáveis e acessíveis;

Como aplicar estilos facilmente as páginas e aos controles do ASP.NET;

Como criar uma Master Page customizável.


Para que serve

Apresentar os padrões Web que todo site deve seguir, além de demonstrar como utilizar recursos do Visual Studio e ASP.NET para promover acessibilidade, padronização e estilização de páginas, como MasterPages, Skins e CSS.


Em que situação o tema é útil

No desenvolvimento de Web Sites padronizados. Este artigo se aplica a todos que desejarem criar Web Sites acessíveis. No final deste artigo, você estará conhecendo alguns conceitos sobre Web Standards, customização de controles e sites acessíveis e usáveis.

 

 

Resumo do DevMan

É fundamental que todo Web Site siga os padrões sugeridos pela W3C, os WebStandards. Basicamente é um conjunto de regras e boas práticas para serem utilizadas no desenvolvimento do seu WebSite. O Visual Studio e ASP.NET oferecem todos os recursos para tornar seu Web Site acessível e padronizado, como mostra este artigo.

 

Atualmente nos deparamos com um imenso emaranhado de Web Sites, entretanto, precisamos tomar um grande cuidado ao desenvolvê-los. Muitos dos sites desenvolvidos não seguem padrão algum, ou pior, muitos desenvolvedores ainda não sabem que existe uma série de normas a serem aplicadas na criação de um Web Site, principalmente em termos de usabilidade e acessibilidade.

O que trataremos neste artigo são os padrões sugeridos pela W3C (World Wide Web Consortium) para a criação de um Web Site padronizado, acessível e usável.

Alguns conceitos:

Web Standards – Conjunto de normas impostas pela W3C para padronização de Web Sites;

Tableless – Como o próprio nome já diz (Table-less = Sem tabela), é um padrão adotado que prega a NÃO utilização de tabelas (HTML) para alinhamentos e outros afins, a não ser dados tabulares. Ou seja, cada notação deve ser utilizada somente para o fim da qual foi designada, como no caso de tabelas para dados tabulares. Para alinhamentos existem as DIVs, que substituem muito bem as tabelas;

CSSCascade Style Sheeting é o mecanismo utilizado para se adicionar estilos aos objetos criados no HTML;

Skin – Skin é um método de definição para estilos que permite a definição de um controle customizado como base para outros controles.

WYSIWYG – (What You See Is What You Get – O que você vê é o que você tem) - São editores de HTML como Visual Studio, Visual Web Developer, Microsoft Expression, Dreamweaver, Front Page entre outros;

A partir da versão 2005 do Visual Studio (incluindo as versões Express), contamos não só com um editor WYSIWYG, como também com um validador de HTML (Figura 1). A medida que o código HTML é digitado, o validador entra em execução e valida as TAG’s (Figura 2).



Figura 1. Validador do Visual Studio 2005


Figura 2. Validador do Visual Studio 2005 em execução

O objetivo inicial é que seja criada uma Master Page utilizando Web Standards e Tableless, tudo isso vinculado a um CSS, que será adicionado dentro da pasta App_Theme do nosso Web Site. Após a criação do CSS e da Master Page padronizada, serão criados outros estilos, onde o usuário poderá selecionar o estilo que mais lhe agrada. Por fim, serão estilizados alguns controles como GridView, TextBox e etc.

Padronizando seu Website

O passo inicial é a padronização do seu Web Site. Existe um checklist que pode ser verificado para confirmar se a página segue os padrões impostos pela W3C. Esta lista está disponível no formato PDF no seguinte endereço: http://www.maxdesign.com.au/presentation/checklist/checklist.pdf. Seguiremos descrevendo alguns dos itens contidos nesta lista.

 

Qualidade do Código

O site usa Doctype correto? – Doctype ou Document Type Declaration (Declaração do Tipo de Documento) informa ao validador, qual versão de HTML/XHTML está sendo utilizada. Mais informações em http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

O site usa um - Character set de codificação de caracteres correto?  - Charset é o conjunto de caracteres que estão sendo utilizados na página, ou seja, no Brasil, temos alguns caracteres diferentes dos EUA, portanto utilizamos o charset UTF-8. Mais informações em http://www.w3.org/International/O-charset.en.php

O site usa (X)HTML válido?  - Um código válido carrega mais rapidamente e não corre erros de haver má renderização ao inicializar. É válido lembrar que estamos falando de HTML, portanto, os controles e tags do ASP.NET não serão validados. Existem vários validadores online, dentre estes, um da própria W3C, que pode ser encontrado neste endereço: http://www.w3.org/International/O-charset.en.php

A CSS usada pelo site é válida?  - Do mesmo modo que se pode validar uma página HTML/XHTML, pode-se também validar um CSS, e este, do mesmo modo passa a se tornar mais rápido e com menos erros se validado corretamente. Mais informações em: http://jigsaw.w3.org/css-validator/

 

A CSS usa algum tipo de "hack"? – Hacks são utilizados para adaptar o CSS a um certo Browser. Nota-se que certos estilos funcionam de maneiras diferentes em Browser distintos. Mais informações em: http://meyerweb.com/eric/articles/webrev/200006a.html e http://css-discuss.incutio.com/?page=CssHack

 

Há declaração de classes ou ID's desnecessárias?  - Muitas vezes os desenvolvedores quase não olham para o Source em HTML, vão clicando e arrastando, e formatando os textos como se estivessem no Microsoft Word. Isso gera várias tags desnecessárias, tornando assim o código mais lento para ser renderizado. Mais informações em: http://css-discuss.incutio.com/?page=CssHack

O código é bem estruturado? – Deve-se prestar muita atenção a estruturação e semântica dos códigos HTML, do mesmo jeito que fica difícil interpretar um código mal escrito, o Browser também sofrerá este impacto ao ler um código HTML mal estruturado. Mais informações em: http://www.maxdesign.com.au/presentation/benefits/index04.htm

 

Há links quebrados?  - Além de causarem uma má impressão, os links quebrados também prejudicam seu site em mecanismos de busca e até mesmo na própria estruturação do site. Deve-se tomar cuidado também com a criação de Hyper Links dinâmicos. Mais informações em: http://validator.w3.org/checklink

 

Qual é a performance velocidade de carregamento/tamanho da página - speed/page size?  - Talvez até exista alguém que goste de esperar no mundo, mas ainda não conheci esta pessoa. Os usuários ODEIAM esperar, otimize sempre a performance (não só do HTML) de suas aplicações Web. Mais informações em: http://www.websiteoptimization.com/speed/

 

Há erros de JavaScript? – O Internet Explorer possui um debbuger de Java Script, sendo assim, perderá tempo em scripts com erros.

 

Grau de separação entre conteúdo e apresentação

 

O site usa CSS para todos os aspectos da apresentação (fontes, cores, espaçamentos, bordas etc)?  - Utilizar sempre folhas de estilos para controlar a apresentação. O .NET também facilita bastante, por ter o código separado da interface. Mais informações em: http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

"

A exibição deste artigo foi interrompida

Clique aqui e acesse o Leitor Digital para ler este artigo completo.



Trabalha com desenvolvimento de aplicações web há mais de 6 anos, e com ASP.NET desde 2003.É MSDN Profissional 5 Estrelas 2003/2005 e MSDN ASP.NET Specialist e líder da Célula Microsoft “Faculdade Salesiana Dom Bosco”, da comunida [...]

O que você achou deste post?
Conhece a assinatura MVP?
Publicidade
Serviços

Mais posts