web que respeitem critérios de usabilidade e acessibilidade · acessibilidade na web – algumas...
TRANSCRIPT
![Page 1: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/1.jpg)
EditWeb: Auxiliando professores na autoria depáginas Web que respeitem critérios de Usabilidade e
Acessibilidade
UFRGS - PPGCLeila Laís GonçalvesOrientador: Prof. Dr. Marcelo Pimenta
![Page 2: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/2.jpg)
Mecanismos de autoria para:
λ estruturar e organizar conteúdo de paginas Web,
focando na interface (layout e navegação);
λ suportar a diferentes mídias (texto, áudio, vídeo e
gráficos);
λ contemplar acessibilidade e usabilidade;
λ prover familiaridade com autoria dos ambientes
existentes;
λ possibilitar a elaboração de páginas Web com
qualidade para usuários leigos.
![Page 3: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/3.jpg)
De que forma?
λ investigação de ambientes de autoria para EAD;
λ seleção de critérios de qualidade de IHC
(acessibilidade e usabilidade);
λ implementação de um protótipo com base nos
critérios;
λ avaliação do protótipo sobre o enfoque de usabilidade
e acessibilidade.
![Page 4: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/4.jpg)
Por quê?
λ difusão de EAD na Web;
λ poucos trabalhos relativos à autoria assistida respeitando
critérios de usabilidade e acessibilidade;
λ desorientação e/ou dificuldade dos usuários-autores no
uso dos recursos gráficos;
λ necessidade de ferramentas de autoria para o ambiente
virtual da Unesc.
![Page 5: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/5.jpg)
EAD na Web - características
λ independência geográfica e temporal;
λ promoção da colaboração;
λ disseminação de material instrucional;
λ pluralidade de formatos;
λ uso de diferentes mídias;
λ sistema dinâmico e incremental;
λ suporte à produção, disponibilização e adaptação de
conteúdos.
![Page 6: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/6.jpg)
Usabilidade
λ Usabilidade é o termo técnico usado para descrever aqualidade de uso de uma interface (BEVAN, 1995).
λ Nielsen (1993):
• facilidade de aprendizado;
• eficiência;
• memorização;
• baixa taxa de erros;
• satisfação subjetiva do usuário.
![Page 7: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/7.jpg)
Usabilidade na Web - problemas
λ Navegação: dificuldade para encontrar a informação
desejada, links não disponíveis.
λ Recursos multimídia: uso de maneira inadequada
(abuso nas cores, frames e textos em destaque).
λ Fatores culturais: diferenças nas diversas culturas.
λ Tecnologia: incompatibilidade entre browsers e
plataformas de hardware.
(WINCKLER & PIMENTA, 2002)
![Page 8: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/8.jpg)
Usabilidade na Web – Métricas:
λ desempenho do usuário durante a realização de tarefas:
direta ou indireta;
λ satisfação subjetiva do usuário: compreende a opinião
do usuário da interface;
λ correspondência com os objetivos do usuário: verifica-se
se os objetivos do usuários foram alcançados;
λ adequação à padrões (normas, recomendações
ergonômicas, etc.).
(WINCKLER & PIMENTA, 2002)
![Page 9: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/9.jpg)
Acessibilidade
λ Acessibilidade (accessibility) é o termo usado para
descrever problemas de usabilidade encontrados por
usuários com necessidades especiais.
λ Acessibilidade implica em tornar utilizável a interface
por qualquer pessoa, independente de alguma
deficiência física, sensorial, cognitiva, condição de
trabalho ou barreiras tecnológicas.
![Page 10: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/10.jpg)
Acessibilidade na Web – Algumas recomendações:
λ assegurar uma transformação harmoniosa:
o separar a estrutura da apresentação;
o fornecer descrição para elementos não textuais;
o identificar os cabeçalhos de linha e de coluna emtabelas;
o criar documentos independentes de plataforma.
λ tornar o conteúdo compreensível e navegável:
o incluir ferramentas de navegação e orientação;
o inserir informações de contexto.
Diretivas para a acessibilidade do conteúdo da Web http://www.w3.org/TR/WAI-WEBCONTENT/
![Page 11: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/11.jpg)
Ferramentas e Ambientes de autoria
λ Autoria: processo de integração dos elementos demídia (texto, áudio, vídeo e gráfico) para gerar umhiperdocumento.
λ Ferramentas de autoria “são recursos amigáveis paraque leigos (...)ou não programadores, possamdesenvolver com rapidez, amigabilidade e onde querque estejam, independente de tempo, lugar ousituação física, um determinado conteúdo ouprograma”. (MAIA, 2002)
λ Ambientes:TelEduc - AutorWeb, AulaNet, AdaptWeb -Módulo de autoria, LearnLoop.
![Page 12: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/12.jpg)
Mecanismos de autoria assistida
λ Mecanismos de autoria assistida: conjunto deferramentas que guiam o usuário-autor na elaboração depáginas Web usáveis e acessíveis no que diz respeito àdiagramação, seleção de cores, tipos de mídia (gráfico,vídeo e áudio) e elementos de navegação.
λ Requisitos funcionais:o Administração do ambienteo Controle de acessoo Mecanismos de autoriao Validação de elementoso Geração da página
![Page 13: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/13.jpg)
Arquitetura do Ambiente EditWeb
usuário-autorControle de acessoControle de acesso
Mecanismos deautoria
Mecanismos deautoria
Validação deelementos
Validação deelementos Base de
dados
Base dedados
Administrador
Geração da páginaGeração da página
Administração doAmbiente
Administração doAmbiente
Página Html
![Page 14: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/14.jpg)
Mecanismos de autoria EditWeb
λ Configuração da página: identificação, dimensões e layoutda página;
λ Estruturação da página em quatro áreas: cabeçalho, menu,corpo de texto e cabeçalho;
λ Edição de cada área em separado;
λ Seleção de cores seguras para plano de fundo e fonte com apossibilidade de fundo as 216 cores;
λ Ferramentas de edição de texto: formatação, estilos, recuo,tabelas, tipologia, marcadores e numeração, copiar e colar;
λ Suporte a inserção das mídias gráficas (imagem, vídeo eanimação) e áudio;
λ Permite a manutenção das páginas já editadas;
λ Visualização do código Html gerado.
![Page 15: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/15.jpg)
Características do Ambiente
λ Facilidade de uso;λ Liberdade de criação gerenciada;λ Programação automatizada;λ Interoperabilidade: o EditWeb roda em plataforma
Linux, Unix e Windows;λ Contextualização: por ser um ambiente de código
aberto é possível customizar o EditWeb para atendertarefas específicas;
λ Suporte de mídias: gráfica (jpeg, gif, avi e swf), áudio(wav) e texto;
λ Navegação orientada e livre;λ Conformidade com padrões: W3C de acessibilidade,
folha de estilo (CSS) e Html;λ Custo: ambiente gratuito.
![Page 16: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/16.jpg)
Identificação
![Page 17: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/17.jpg)
Página inicial
![Page 18: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/18.jpg)
Escolha da página
![Page 19: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/19.jpg)
Configuração da página
![Page 20: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/20.jpg)
Status da página
![Page 21: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/21.jpg)
Escolha de cor
![Page 22: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/22.jpg)
Ferramenta de edição
![Page 23: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/23.jpg)
Tecnologias
λ Implementação: PHP, HTML, JavaScriptλ Banco de dados: MySQLλ Servidor: Apacheλ Sistema Operacional: Linuxλ CSS - Cascading Style Sheets
![Page 24: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/24.jpg)
Validação e Implementação dos critérios:
λ Legibilidade:
o Cor: contraste, harmonia, visibilidade, padrões;
o Fonte: serifa, tamanho mínimo, estilos controlados,
alinhamento.
o Dimensões: largura máxima.
λ Compatibilidade:
o Alternativas ao conteúdo sonoro e visual;
o Descrição textual para elementos não textuais
(gráficos, áudios e vídeos);
o Formatos e tamanho (bytes) das mídias;
![Page 25: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/25.jpg)
Validação e Implementação dos critérios:
λ Consistência:
o Agrupamento de links relacionados (menu);
o Áreas distintas no layout (cabeçalho, menu, corpo detexto, rodapé).
λ Presteza:
o Informações de identificação no início de página(título) e no rodapé (autor e data);
o opções de ajuda.
(Borges; Winckler; Basso, 2000), (Cybis, 2000), (W3C-WAI), (Bastien& Scapin, 1993), (Pimenta et al, 2002).
![Page 26: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/26.jpg)
Limitações e Trabalhos futuros
λ Elaboração de páginas para conteúdos do tipoexplanatório;
λ Integração dos mecanismos em ambientes deEAD via Web;
λ Expansão de tipos de conteúdos, p.ex.exercícios.
![Page 27: Web que respeitem critérios de Usabilidade e Acessibilidade · Acessibilidade na Web – Algumas recomendações: l assegurar uma transformação harmoniosa: o separar a estrutura](https://reader034.vdocuments.net/reader034/viewer/2022052609/5be56ed709d3f2c44d8c114a/html5/thumbnails/27.jpg)
www.unesc.rct-sc.br/editor/editweb.php
Usuário: visitaSenha: visita
EditWeb: