oficina avaliação de sítios - 10ª oficina de inclusão digital
DESCRIPTION
Apresentação de suporte a Oficina avaliação de Sítios, que ocorreu dia 6 de dezembro de 2011, sala Paneleiras, na 10º Oficina de Inclusão Digital.TRANSCRIPT
governoeletronico.gov.br
Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo Eletrônico
Avaliação de Sítios
governoeletronico.gov.br 2 de 40
Olá, nós somos o DGE
Departamento de Governo Eletrônico
Implantar de forma unificada serviços por meios eletrônicos no governo federal;
Integrar outros níveis de governo na prestação de serviços;
Desenvolver e-serviços orientado por eventos da vida de cidadãos e demais setores sociais;
Definir e Implantar padrões de usabilidade e acessibilidade para e-Serviços;
governoeletronico.gov.br
Legislação (algumas...) relativa a presença do Governo na internet.
Diretrizes do Programa de Governo Eletrônico Resolução nº 07 de 29 de julho de 2002, que estabelece regras e
diretrizes para os sítios da APF; IN SLTI nº 04/2010, que trata da contratação de serviços de Tecnologia da
Informação; Resolução do CGI.br/RES/2008/008/P, que regulamenta os procedimentos
de registro de domínio; Manual de Aplicação da Barra de Identidade Visual do Governo Federal na
Internet, que estabelece padrões de identidade visual para sítios e portais; Portaria nº 03 de 07 de Maio de 2007 que institucionaliza o Modelo de
Acessibilidade em Governo Eletrônico – e-MAG. Portaria normativa nº 05 de 14 de Julho de 2005 que institucionaliza os
Padrões de Interoperabilidade de Governo Eletrônico – e-PING.
governoeletronico.gov.br
Padrões do Governo Federale-PING
Arquitetura de Interoperabilidade em Governo Eletrônico - entre aplicações/órgãos
e-MAG
Modelo de Acessibilidade em Governo EletrônicoAcessibilidade
e-PWG Padrões Web em Governo EletrônicoCamada de apresentação
governoeletronico.gov.br
e-PWG
- Guia de administração de sítios
Cartilhas:
- Codificação- Usabilidade- Redação Web- Desenho de Interação
governoeletronico.gov.br
governoeletronico.gov.br
Análise SínteseCodificação, , Desenho e Acessibilidade
governoeletronico.gov.br 8 de 40
Encontrar pontos de melhoria nas páginas e e-serviços do governo federal.Busca levantar os problemas mais evidentes que vão impactar na experiência de uso do cidadão.
Características:
● Preliminar● Não exaustiva● Generalista
Periodicidade:Realizada sob demanda.
Objetivo
governoeletronico.gov.br 9 de 40
Elementos da avaliaçãoDois documentos:
• Procedimentos de avaliação-base• Analise-documento-modelo
Escopo• A página inicial• Formulário de Fale Conosco • Uma página secundária (citar – url)• Uma página de consulta/serviço (citar – url)• Resultados da caixa de busca (citar - url)
Seções: • Análise de código • Análise de desenho • Análise de acessibilidade
governoeletronico.gov.br 10 de 40
Ferramentas utilizadasASES
Websiteoptimization - http://www.websiteoptimization.com/services/analyze/
Firefox - br.mozdev.org/firefox/download.html
Internet Explorer
Extensões Firefox
HTML Validator, Awesome screenshot, Web developer, Yslow, Fangs, Firebug, Contrast Checker, Wappalizer
governoeletronico.gov.br 11 de 40
Observações:
• Cuidar o português;
• Analisar globalmente;
• Fechar escopo quando necessário;
• Fornecer exemplos, detalhes;
• Ilustrar;
• Consultar as cartilhas durante a análise;
• ...e citar as cartilhas no documento de análise;
• É um instrumento de avaliação humana, não mecânico;
• Buscar melhoria do instrumento.
governoeletronico.gov.br 12 de 40
Análise do Código
• Semântica• Maturidade• Conformidade com os Padrões Web• Estrutura:
– Avaliação– Diagnóstico– Recomendações
governoeletronico.gov.br 13 de 40
URL
“.gov.br”Urls existentesFuncionamento sem o prefixo “www”
• Deve funcionar sem o www• S/ www abrindo em interface administrativa –
muito ruim
Página inicial e secundárias: url amigáveis – sem $8?-132321/
governoeletronico.gov.br 14 de 40
Doctype
Presença de doctype no cabeçalho, conformidade. Em caso de frames, testar doctypes de todos documentos
Descrição do TitleEm caso de frames, testar doctypes de todos documentosVerificar páginas secundárias.
Title
governoeletronico.gov.br 15 de 40
Declaração de idiomaEm caso de frames, testar em todos os arquivos que compõe o quadro
Testar secundárias
Mapa de caracteres
Em caso de frames, testar em todos os arquivos que compõe o quadro
Testar secundárias
Em caso de frames, testar em todos os arquivos que compõe o quadro
Testar secundárias
Verificar discrepâncias (banco-declaração)
governoeletronico.gov.br 16 de 40
governoeletronico.gov.br 17 de 40
Navegadores
SGC
Ie7.
Firefox
Próprio
Não detectado
Indícios de uso
governoeletronico.gov.br 18 de 40
Semântica e conformidade Padrões W3C
Estilos (CSS)
Erros no código (a partir do doctype)
H1, listas, tabela, p, blockquote
inline
Abuso de classes
Folhas repetidas
governoeletronico.gov.br 19 de 40
governoeletronico.gov.br 20 de 40
errado<div id="main">
<div class="maincontent">
<p class="maincontenttext">O texto.</p>
</div>
</div>
certo
<div id="main">
<div>
<p>O texto.</p>
</div>
</div>
CSS: div#main p { /* regras */ }
governoeletronico.gov.br 21 de 40
Funcionamento sem javascript
Atributos positivos:
Preservação das funções vitais do sítio: navegação, busca.
Atributos negativos:
funções triviais (menus) param de funcionar;
Informações somem.
Não é possível acessar informações básicas (sub itens de menu).
governoeletronico.gov.br 22 de 40
Atributos proprietários ou em desuso
Peso dos elementos
Citar quais. Exemplificar
Itens pesados
Desproporção
Excesso de itens
Peso
Presença de técnicas de otimização
governoeletronico.gov.br 23 de 40
Página Inicial Fale Conosco
22kB
1%22kB
2%
2350kB
72%
253kB
22%
789kB
24% 786kB
68%
1kB
0%1kB
0%
102kB
3%102kB
9%
Peso dos Elementos das Páginas
Documento Imagens Scripts Objetos Folhas de Estilo
governoeletronico.gov.br 24 de 40
Análise do Desenho
• Identidade• Padronização• Leitura• Navegação• A forma segue a função
governoeletronico.gov.br 25 de 40
Atributos positivos: • Existência da barra e logotipos.
Atributos negativos:• Inexistência da barra;• barra antiga;• Logotipos errados.
Identidade Visual
governoeletronico.gov.br 26 de 40
Padronização Visual
Atributos positivos: • Identidade visual consistente entre a página inicial e secundárias.
Atributos negativos:seções ou serviços sem e/ou com outra identidade visual;identidade visual fraca, sítio com identidade desvinculada da família (portal).
governoeletronico.gov.br 27 de 40
CabeçalhoAtributos positivos: cabeçalho ocupando menos que ¼ da área visível.utilização de elementos pertinentes: Identificação do sítio, atalhos para Fale
Conosco, busca e login, etc. Uso consistente de imagens.
Atributos negativos:cabeçalho ocupando mais de ¼ da área visível;falta de identificação clara do que se trata o sítio;cabeçalho “pirotécnico” - apenas visual, sem atalhos ou ferramentas.
governoeletronico.gov.br 28 de 40
Atributos positivos: uso da cor respeitando a identidade;cor utilizada como informação complementar em funcionalidades e informações;palheta de cores que facilita o entendimento das informações;bom contraste entre figura-fundo.
Atributos negativos:cor como única em funcionalidades e informações;palheta “pirotécnica”;Problemas de contraste e ruído colorido (uso de cores muito próximas na palheta);
Cor
governoeletronico.gov.br 29 de 40
Animação e multimídiaAtributos positivos: uso da multimídia quando pertinente;multimídia inobstrusiva; presença de alternativas ao conteúdo multimídia e/ou de desligá-lo;uso da animação em apenas um ponto.
Atributos negativos:uso indiscriminado da multimídia; multimídia obstrusiva; impossibilidade de acesso ao conteúdo de outras formas ou desligar a animação;uso da animação em mais de um ponto.
governoeletronico.gov.br 30 de 40
Pregnância e Relevância das imagensAtributos positivos:
fotos com foco no assunto;
imagens decorativas utilizadas de forma comedida e visando enriquecer a informação; ícones pregnantes;
banners com fins de divulgação de novidades;
selos obrigatórios utilizados de forma a não comprometer o fluxo da informação.
Atributos negativos:
fotos sem objetivo específico;
imagens decorativas utilizadas para preeenchimento de espaço, rococós, sem objetivo;
ícones não associados a função a qual estão vinculados;
banners utilizados como substituto a itens de menu, banners antigos com informação ultrapassada.
governoeletronico.gov.br 31 de 40
Formato da imagemAtributos positivos: utilização correta da extensão (jpg, png, gif);imagens bem definidas de fácil interpretação;
Atributos negativos:utilização incorreta da extensão; fotos com excesso de artefatos, tornando impossível a identificação de
rostos, por exemplo;imagens sem definição, de difícil interpretação.
governoeletronico.gov.br 32 de 40
Diagramação e uso de área brancaAtributos positivos:
diagramação consistente na página inicial e secundárias;
uso de grelha (grid);
páginas com áreas e hierarquia claramente demarcadas;
existência de “áreas de respiro” entre os blocos de informação;
uso de áreas brancas.
Atributos negativos:
ausência de diagramação;
diagramação desinteressante;
Falta de hierarquia ou áreas demarcadas.
ausência de áreas brancas;
poluição visual.
governoeletronico.gov.br 33 de 40
LeiturabiidadeAtributos positivos:
textos alinhados a esquerda;
o menor tamanho da fonte ser igual ou superior a 10pt;
links bem caracterizados;
entrelinhas consistentes nos blocos de conteúdo;
bom contraste entre o texto e o fundo.
Atributos negativos:
textos blocados (justificados) criando “rios brancos”;
tamanhos muito pequenos de fonte;
links de difícil identificação;
entrelinhas apertadas;
texto com pouco contraste.
governoeletronico.gov.br 34 de 40
Acessibilidade
• Conteúdo alternativo• Fluxo da informação• Atalhos• Navegação• A forma segue a função
governoeletronico.gov.br 35 de 40
Simulação de leitor de tela
Atributos positivos:
presença de todas informações da página em ordem.
Atributos negativos:
perda de informações;
texto alternativos mal-formatados;
leitura incoerente.
governoeletronico.gov.br 36 de 40
Avaliação ASES
Atributos positivos:
sítio acessível;
sítio com poucos erros de fácil solução.
Atributos negativos:
sítio inacessível.
governoeletronico.gov.br 37 de 40
Navegação por teclado
Atributos positivos:
Possibilidade de navegar pela página via teclado;
Presença de atalhos de teclado com acesso as principais funções: Busca, Fale Conosco;
Atributos negativos:
Impossibilidade de navegar pelas informações por teclado.
governoeletronico.gov.br 38 de 40
Uso da atributo alt em imagens
Atributos positivos:
Imagens com descrições pertinentes;
Imagens decorativas com alt vazio.
Atributos negativos:
Imagens sem atributo alt;
Imagens com atributo alt não descritivo: Ex: imagem01.gif, foto.gif, ico.png, Novotelefone.png (sem citar o numero), logo.gif, etc...
Imagens decorativas com descrição: Ex: barraesquerda.gif, espaçador.gif, etc...
governoeletronico.gov.br 39 de 40
Quebras de navegação
Atributos positivos:
todos os links abrem na mesma instancia do navegador.
Atributos negativos:
links abrindo em nova janela.
pop-ups
governoeletronico.gov.br 40 de 40
Fernanda Hoffmann Lobatogovernoeletronico.gov.br
Twitter: @[email protected]
+55 (61) 2020 1738