WebStandards – Aplicar é fundamental!

Se você não se preocupa e não dá a mínima importância para os padrões web, é bom começar a prestar atenção nas suas próximas aplicações web.

Para programadores WEB vindos do mundo WinForm, é muito bom clicar, arrastar e sair formatando em modo design. Já para nós programadores ASP.NET os recursos de layout sempre estão em 2º, 3º ou no n plano. Quem de vocês já parou para analisar o código gerado pelo GridView? E me diga quantos já se preocuparam com o código criptografado do ViewState que fica na tag INPUT HIDDEN?

São problemas pertinentes quanto às questões de padrão aplicadas pela W3C e agregadas no conceito WebStandard. Mas você vai me dizer: "Isso não vai mudar a funcionalidade do meu site! Não vou perder tempo com isso.". E eu te digo novamente: "é bom começar a prestar atenção…".

A internet mudou. Hoje ela não é apenas acessível em desktops, mas já acessível de outros dispositivos como PDAs, celulares, WebTVs, até geladeiras. Tudo isso com uma freqüência menor, mas a tendência é crescente. Para essa mesma visão falamos dos browsers que são vários e com suas particularidades específicas. É preciso prover a informação e acesso ao seu usuário da melhor forma.

Você conhece Design Pattern? Todas essas questões envolvendo os WebStandards é uma espécie de Design Pattern.

Para isso irei falar de WebStandards em outros posts focando bastante no ASP.NET e XHTML.

No post de hoje vou falar um pouco de WebSemântica, Microformatos, Usabilidade e qual é a posição da Microsoft sobre os padrões.

WebSemântica

Web Semântica é uma proposta para tornar o conteúdo da internet interpretável por máquinas, o que facilitaria a integração de sistemas e bancos de dados na Internet.

Um bom exemplo, apontado pelo Alexandre do Acorda pra Web, é o da âncora anoréxica seria essa:

<a href="http://www.acordapraweb.com">site interessante</a>

Vamos ver agora uma âncora saudável, corada e em boa forma:

<a href="http://www.acordapraweb.com" title=”Acorda pra Web! – Web Semântica” hreflang=”pt-br”>site interessante</a>

Uma das âncoras mais encorpadas são âncoras de arquivos para download. Por exemplo:

<a href="http://www.acordapraweb.com/compatibilidade.html" title=”Acorda pra Web! – Tabela de Compatibilidade CSS” hreftype=”text/html” hreflang=”pt-br” rel=”enclosure”>Compatibilidade CSS em navegadores</a>

O atributo hreftype define o tipo de arquivo do link. Nesse caso foi text/html, mas você pode especificar application/zip para arquivos compactados em zip por exemplo.

Outro atributo interessante é o rel com valor enclosure.

Esse é um dos microformatos essenciais, que define que o conteúdo daquele link deve ser tratado como um download.

Microformatos

São uma extensão do (X)HTML, que cria semânticas próprias aplicáveis a casos específicos. Existem hoje microformatos para a descrição de informações pessoais (hCard), aplicação de licenças a conteúdos publicados na web (rel-license), tags (rel-tag), reviews (hReview), calendários de eventos (hCalendar), etc.

Numa explicação bem simplista, os microformatos são marcações específicas, utilizando elementos (X)HTML com valores predeterminados para os atributos CLASS, REL e REV que podem ser interpretados por meios automatizados (aplicações, robôs, etc).

Recomendo a leitura de:

Algum dos MicroFormatos

hCalendar Creator – microformats.org/code/hcalendar/creator
hCards Creator – microformats.org/code/hcard/creator
hResume Creator – hresume.weblogswork.com/hresumecreator
hReview Creator – microformats.org/code/hreview/creator
XFM 1.1 Creator – gmpg.org/xfn/creator
iCal Generator – technorati.com/events
vCard Generator –technorati.com/contacts

Existem microformatos para os mais variados tipos de dados, como:
(Ref: http://marcogomes.com/blog – Marco Gomes)

1. Localização geográfica (latitude longitude)
2. Programa de e-mail que o usuário usa para enviar suas mensagens (!)
3. Definição da logomarca de uma empresa
4. Categorização de conteúdo (tag)
5. Autor do texto
6. Contato de redes de mensagens instantâneas (instant messengers)
7. Link para profile pessoal em sites como flickr, blogger.com, del.icio.us
8. Menus de sites
9. Listas retráteis (como os FAQ comuns nos nossos sites)
10. Currículos profissionais.

Clique aqui e veja o vídeo do Bill Gates dizendo que precisamos dos Microformatos

Recomendo a impressão desses dois "mapas" para sua orientação. =)


http://neosite.ilogic.com.br/dicas/wp-content/uploads/2007/04/microformats_cheat_sheet.png

 
http://neosite.ilogic.com.br/dicas/wp-content/uploads/2007/04/microformats.png

Microsoft assumindo de vez os padrões web

O WaSP (Web Standards Project) e a Microsoft se uniram
para alertar os desenvolvedores aos Web Standards.

O gerente de produtos para plataformas web da Microsoft – Brian Goldfarb, disse:

Standards are of increasing importance as Web developers strive to make their sites work across all browsers and accessible by the broadest set of customers.

Ferramentas como o VS2005 e o Microsoft Expression Web estão no caminho.
O IE 7.0 corrigiu uma série de inconsistências de padrões que o IE6.0 possuia. Agora basta o Pocket IE melhorar um pouco quanto aos padrões.

Leiam mais sobre isso no site do WaSP:

Usabilidade

O site http://www.feng-gui.com oferece uma ferramenta on-line gratuita de grande utilidade para desenvolvedores web. Utilizando um sistema de inteligência artificial e simula a visão humana, indicando que regiões do seu site chamam mais atenção. Formas, cores e posicionamento de cada elemento do site são analisados. O gráfico indica através de cores as regiões mais quentes (avermelhadas que chamam mais atenção) e mais frias (escuras ou azuladas que chamam menos atenção) do site.

Veja o teste que fiz do meu blog:

 
Parece que o meu cabelo e o TOP do blog chamam mais
atenção que o próprio conteúdo (como assim?!? hehehe).

É isso pessoal.
Em outro post eu falo mais sobre WebStandards, usabilidade, Microformatos entre outros.

Nós fazemos a web.
Grande abraço!

Rodrigo Kono
MCP.NET 2.0 – MCTS – MSP
DevGoiás.NET – www.devgoias.net