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

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.

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.

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.

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.

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.

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)

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)

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.

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/

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.

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

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

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.

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.

Identificação

Página inicial

Escolha da página

Configuração da página

Status da página

Escolha de cor

Ferramenta de edição

Tecnologias

λ Implementação: PHP, HTML, JavaScriptλ Banco de dados: MySQLλ Servidor: Apacheλ Sistema Operacional: Linuxλ CSS - Cascading Style Sheets

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;

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).

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.

www.unesc.rct-sc.br/editor/editweb.php

Usuário: visitaSenha: visita

EditWeb: