Usabilidoido: Menu Principal

English Website


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?
  • 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 ]
    • 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

Dicas

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

Autor

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

Palavras-chave

webstandards    padrões    css    tableless    

Opções



Comentários

Discussão
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.


Discussão
Kayan
26/10/06 às 19:19

Muito bom este post. Valeu a pena ler.


Discussão
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!


Discussão
Rochester
27/10/06 às 20:56

haha..

nao perco essa palestra ^^

=D

[]'s


Discussão
Tiago Celestino
28/10/06 às 20:34

Muito massa! Mais um artigo do Usabilidoido show de bola


Discussão
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


Discussão
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


Discussão
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


Discussão
Mariana
30/10/06 às 08:00

Olá!!!

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

Bjus!


Discussão
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.


Discussão
Tadjha
20/12/06 às 22:54

"imprescindível"

:)

Adoro seu blog.


Discussão
Kleberson Leite
07/12/08 às 11:33

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




Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato