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
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
Fred van Amstel ([email protected] ), 23.10.2006
Veja os coment?rios neste endere?o:
