Programação
Visual
Aula 5
Padrões WebStandard
O que é?
Conjunto de preocupações que passam por
Usabilidade, Acessibilidade, Semântica e
Tableless.
3
websemântica
O que é?
É uma extensão da Web atual, que permitirá
aos computadores e humanos trabalharem
em cooperação e interligar significados de
palavras.
5
Objetivo
Conseguir atribuir um significado (sentido)
aos conteúdos publicados na Internet de
modo que seja perceptível tanto pelo
humano como pelo computador.
7
O que é?
Forma de desenvolvimento de websites que não
utiliza tabelas para disposição de conteúdo nas
páginas web. Baseado em XHTML e CSS.
Vantagens
Diminuição do peso da página.
Melhoria da acessibilidade.
9
Usabilidade
a Internet é considerada, cada vez mais, um
ambiente de relacionamento e comunicação para
as mais diversas audiências.
E isto aponta que:
A Usabilidade precisa ser considerada no
desenvolvimento de projetos com uma atenção
jamais vista!
11
Um site com uma boa usabilidade não exige
raciocínios complexos, é consistente e utiliza
pouco tempo para a execução das tarefas.
Mantendo sempre o foco no usuário,
conhecendo seu perfil, suas características e
desejos.
O que é?
Visão e processo para implementar projetos com foco nousuário.
International Organization for Standardization, definiu que usabilidade é a extensão na qual um produto pode ser usado
por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico (ISO 9241-11).
No conceito Web, define-se por um design que ajuda o internauta a encontrar informações, serviços e produtos de forma intuitiva.
13
Princípios básicos
Usar diálogos simples e naturais:
Informações supérfluas podem deixar o usuário confuso. Não force o usuário a ler na tela e navegar por páginas e mais páginas, para chegar ao conteúdo desejado.
Falar a linguagem do usuário:
usar palavras, termos e expressões do vocabulário do seu público-alvo. Você não poderia usar uma linguagem técnica no site da Mormai. Não faça o usuário pensar, faça-o agir. Para issfaça-o ele nãfaça-o deve ter duvida sobre o que significa aqueles texto ou expressão.
Dar mensagens de erros claras e oferecer
alternativas equivalentes ao usuário ou link direto com o webmaster.
Minimizar a carga de memória:
O usuário de internet é totalmente livre. Então não tente prende-lo em seu site ou fazer com ele navegue por páginas que não quer para conseguir as informações que precisa.
• Fornecer mensagens de retorno adequadas • Fornecer saídas claramente marcadas • Fornecer atalho de tarefas
15
Hierarquia dos conteúdos. Habitualmente, as
chamadas para o conteúdo mais importante estão colocadas no topo da página, e, por conseguinte, no rodapé estará o que é menos importante, porque não é imediatamente visível.
Dispersão dos elementos essenciais à
identificação e navegação no site. Os elementos indispensáveis à navegação no site devem estar dispostos de maneira a ajudar a navegação do usuário. Tudo deve ser "óbvio".
Novas janelas: cuidado para não fazer o
usuário abandonar seu site sem querer... Muitos links, ao invés de abrirem novas janelas, carregam na mesma página,
fazendo com que o usuário se perca e acabe esquecendo que estava no seu site.
Onde estão os links? Pelas regras
tradicionais utiliza-se a cor azul para os links, e roxa para os links já visitados. Por isso, opte por outras soluções já
conhecidas, como trocar a cor da palavra ou colocar em negrito. Mas esteja ciente de que você não estará sendo completamente óbvio.
17
Análise heurística
→ Formuladas em 1993 por Jakob Nielsen, este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade.
→ Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância.
↓ Construir diálogos simples e naturais ↓ Falar a linguagem do usuário
↓ Minimizar a necessidade de memorização do usuário ↓ Manter a consistência
↓ Oferecer feedback
↓ Identificar claramente as “saídas” ↓ Oferecer atalhos
↓ Elaborar boas mensagens de erro ↓ Evitar a ocorrência de erros
↓ Prover ajuda e documentação de apoio
19
Acessibilidade é um exercício de cidadania,tanto
para que a proporciona, como para que se beneficia com ela.
Com ela podemos ter o uso pleno, seguro e
independente dos espaços ou equipamentos, dando condições de acesso a toda a população,
independente de suas características físicas, idade, sexo, etc.
Acessibilidade para todos
Todo cidadão tem o direito de acesso à informação! O uso da internet está, cada vez mais, em todas as áreas da sociedade, tornando-a um importante recurso para educação, governo, entretenimento, comunicação e comércio.
Em média, 10% da população mundial são de pessoas com deficiências e segundo os dados estatísticos do censo 2000 do IBGE, o Brasil possui 24,6 milhões de pessoas com deficiência ou seja, 14,5% da população brasileira. Além disso, a idade média da população está crescendo. O benefício do
21
O poder da web na sua
universalidade é ser acessada por
todos, independente das suas
deficiências e limitações”
(Tim Berners Lee – Inventor da world wide web)
Acessibilidade e
Padrões Web
Fazer um site utilizando os padrões web, é fazer um site melhor acessível a qualquer plataforma ou dispositivo, sem qualquer esforço, ou ainda, sem fazer uma versão específica para um dispositivo específico.Acessibilidade é para todos! Desde o usuário que tenta acessar o site do banco pelo desktop usando um browser como Opera e Firefox não conseguindo acessar corretamente o site, até aquele usuário que está preso no trânsito e aproveita para tentar mandar um e-mail pelo seu PDA.
23
Vantagens
Melhora da performance dos serviços web. Redução no esforço da manutenção.
Benefícios
Demonstração de compromisso e responsabilidade social.
25
Requisitos de design
Consistência no layout.
Interação explícita com as páginas.
Identificadores explícitos.
Áreas do site bem determinadas.
Manter um padrão de navegação e identidade
visual.
Requisitos de conteúdo
Linguagem clara e objetiva.
Organização e hierarquia do conteúdo.
Agrupar elementos e dar informação
contextual.
Dividir a informação extensa em pequenos
blocos.
27
Assegurar a acessibilidade direta de interfaces do usuário integradas;
Projetar páginas considerando a independência de dispositivos;
Utilizar soluções de transição;
Utilizar tecnologias que se adaptem recomendações do W3C;
Fornecer informações de contexto e orientações; Fornecer mecanismos de navegação claros;
Assegurar o controle do usuário sobre as alterações temporais do conteúdo;
Assegurar a clareza e a simplicidade dos documentos.
Tipos de testes
Automáticos e semi-automáticos; Checklist do WCAG 1.0;
Simulação com usuários com limitações e deficiências;
Compatibilidade com os padrões Web; Impressão;
Dispositivos móveis;
Outros ambientes e navegadores; Contrastes de cores;
29
1...2...3...Testando
Testar as páginas com um navegador textual:Lynx,Lynx Viewer (Simulador)
Testar em vários navegadores gráficos, com:
som e gráficos ativos;sem gráficos;sem som;sem mouse;sem carregar frames, programas
interpretáveis,folhas de estilo ou applets.
Testar em vários navegadores: antigos e
recentes.
Testar em outras ferramentas: navegador de
emissão automática de fala;leitores de tela:
Jaws,Virtual Vision (em português),DosVox
(gratuito e em português); tela de pequenas
dimensões, etc
31
Validadores de código
Acessibilidade
WebXACT (antigo Bobby) Cynthia Says
Wave A-Prompt
Da Silva (em português)
Sintaxe
W3C Markup Validation Service
CSS
W3C CSS Validation Service
Dicas Rápidas
IMAGENS E ANIMAÇÕES:Use o atributo alt paradescrever a função de cada elemento visual.
IMAGEMAPS:Use mapas client-side (o tag map) e texto para as regiões clicáveis.
MULTIMÍDIA: Inclua legendas e transcrições para o áudio, e descrições para o vídeo.
HIPERLINKS: Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui".
ORGANIZAÇÃO DA PÁGINA: Use cabeçalhos, listas e uma estrutura consistente. Use CSS para layout e estilo
33
GRÁFICOS E DIAGRAMAS: Sumarize o conteúdo ou use o atributo longdesc.
SCRIPTS, APPLETS E PLUG-INS: Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo.
FRAMES: Use o tag noframes e empregue títulos significativos.
TABELAS: Torne compreensível a leitura linha a linha. Resuma.
VALIDE SEU TRABALHO: Use as ferramentas, checklist e os guias disponíveis em
http://www.w3.org/TR/WCAG.
