Usabilidoido: Menu Principal

Webstandards para melhorar a experiência do usuário

Muitos desenvolvedores já adotaram os Webstandards, mas seguem apenas os padrões que beneficiam a produção das páginas. Existem técnicas de codificação que podem aumentar a acessibilidade, a usabilidade e a beleza das páginas, mas elas não estão muito difundidas.

Slides

[ Tamanho maior ]

Tópicos e referências

O que é webstadards
Como são elaborados os Webstandards?
- W3C
Os Webstandards, em última análise, devem beneficiar o usuário
Separação entre conteúdo, apresentação e comportamento [ infográfico ]
- Código mais organizado, mais fácil de manter
- Diferentes arquivos de CSS para diferentes mídias: monitor, PDA, impressora, áudio [ tutorial ]
- Melhor indexabilidade em buscadores como o Google
Recomendações baseadas nos padrões e na experiência de diversos autores
Metadados
- Defina o seu DOCTYPE [ importância ]
  - Renderiza mais rápido
  - Padroniza renderização
- Declarando o idioma do texto [ aprofundamento ]
  - Essencial para a sintetização
  - Facilita indexação
- Ligue o documento a documentos relacionados. [ referência ] [ elocubração ]
  - Link rel (next, prev, index, start, author, copyright )
- Escreva títulos descritivos e sucintos para cada página
  - descritivo
  - não usar palavras-chave genéricas [ discussão ]
  - começar com o conteúdo
- Utilizar as tag certas [ importância ]
- Comente seus códigos [ aprofundamento ]
  - O código CSS tb é uma interface com usuários
  - Superespecificar
Layout
- Evite usar tabelas para marcar layout [ introdução ]
  - Renderiza somente depois de carregadas as tabelas
  - Não se adapta facilmente
- Faça seu layout funcionar em diferentes resoluções [ lista de email ]
- Defina uma largura máxima para a coluna principal de texto [ argumentos científicos ]
- Ofereça layouts alternativos para o usuário [ tutorial ]
- Evite usar iframes
  - Use DIVs com overflow
- Evite colorir as barras de rolagem [ discussão ]
Tipografia
- Prefira tamanhos de fonte relativos
- Use fontes incomuns, desde que com alternativas padrão [ pesquisa ]
- Substituir texto somente quando for impreencindível [ discussão ]
  - SFIR
- Aproveite o espaçamento entrelinhas e entreletras para aumentar a legibilidade [ chacota ]
Navegação
- Mantenha o mesmo código de invólucro para conteúdo através das páginas do site [ exemplo ]
  - Ilusão de que não carregou nova página
- Evite submenus voadores horizontais só com CSS [ bom exemplo / mau exemplo ]
- Não quebre o botão voltar do navegador quando a gente mais precisa dele [ solução1 | solução2 ]
- Forneça um link para pular direto para o conteúdo [ aprofundamento ]
- Controle a ordem da navegação com a tecla tab.
Formulários
- Associe o rótulo com o elemento de formulário. [ discussão ]
- Posicione os rótulos acima das caixas de entrada de texto. [ pesquisa científica ]
- Formulário Acessível ou Usável?
Dimensões da Linguagem [ elocubração ]
- Sintática - regras da linguagem
- Semântica - significados da linguagem
- Pragmática - efeitos da linguagem
Ferramentas essenciais

Próximas datas

28/10 - Intercon 2006

Autor

Frederick van Amstel - Quem? / Contato - 23/10/2006

Redes

Siga-me no Twitter, Facebook, LinkedIn ou Instagram.

Citação

VAN AMSTEL, Frederick M.C. Webstandards para melhorar a experiência do usuário. Blog Usabilidoido, 2006. Acessado em . Disponível em: http://www.usabilidoido.com.br/webstandards_para_melhorar_a_experiencia_do_usuario.html

Relacionados

Comentários

thiago machado
26/10/06 às 19:04

Parabens pelo post, gostei da informação.
Cada dia mais conheço e aprendo mais sobre webstandards, acessbilidade e os microformatos (microformats) que são essas tecnicas que ajudam na acessibilidade, acredito muito nisso.

bom, mais uma vez digo, excelente post!

e nosso almoço de sabado deu errado pois nao vou na intercon por motivos pessoais, pensei que no domingo pudesse rolar, mas o Lucas disse que você já vai pegar o voo cedo então, fica pra uma outra vez brother.

Kayan
26/10/06 às 19:19

Muito bom este post. Valeu a pena ler.

Camilo Vitorino da Costa
26/10/06 às 21:56

Cara, fantástico esse post. Estava ah tempos esperando um post seu e quando vem, vem um guia fantastico há usabilidade. Trouxe a tona algumas questões importantes que eu nem havia pensado!

Obrigado!

Rochester
27/10/06 às 20:56

haha..

nao perco essa palestra ^^

[]'s

Tiago Celestino
28/10/06 às 20:34

Muito massa! Mais um artigo do Usabilidoido show de bola

Rochester
29/10/06 às 13:59

Cara nem deu tempo deu te perguntar o q eu queria :S

sobre o CSS aural, onde eu acho mais informações sobre, se tem algum site especializado q vc indicaria e tal...

[]'s

Frederick van Amstel
29/10/06 às 20:58

CSS Aural ainda é uma possibilidade pouco explorada pelos ledores de tela. O máximo que cheguei foi uma explicação da especificação do W3C: http://www.w3.org/TR/REC-CSS2/aural.html

Davidson
29/10/06 às 22:38

Parabens pela sua palestra, Ontem eu estava lá, gostaria de saber o que devo melhorar para entrar nos padrões da Web com meu Portal

http://www.onmasters.com.br

Mariana
30/10/06 às 08:00

Olá!!!

Adorei a palestra!!!! Foi muitooooo boa!!!!

Bjus!

Leandro Vieira Pinho
30/10/06 às 14:45

Olá Fred,

Vim lhe parabenizar pelo excelente conteúdo da sua palestra no iMasters interConn 2006.

Um forte abraço e sucessos.

Tadjha
20/12/06 às 22:54

"imprescindível"

Adoro seu blog.

Kleberson Leite
07/12/08 às 11:33

Muito show a palestra, irei revisar alguns conceitos e passar a utilizar sua metodologia ^^.
UP!!

Pegue um fruto.

Você merece.

Assine nosso conteúdo e receba as novidades!

Atualizado com o Movable Type.

Apresentação do autor | Website internacional | Política de Privacidade | Contato