Módulo Projeto web Tutora Dorvany de Oliveira Silva Prof. orientadores Ana Bandeira Daniel Borges
Autores Carlos Antônio Fernandes Carolina Floriano Fernando Carreiro Gesse Moreira Jéssica Chiareli Layara Alves Leandro Miranda, Luíz Sérgio Carneiro Wallita Soares
Universidade Federal de Góias- UFG Módulo IV- Projeto Web Problemática: Acessibilidade na Web Grupo 1 - Polo de Uruana-GO
MEMORIAL DESCRITIVO FÓTON+
SUMÁRIO
INTRODUÇÃO
INTRODUÇÃO
CONCEITUAÇÃO o que é o fóton +
ESPECIFICAÇÕES FUNCIONAIS
REQUISITOS DE CONTEÚDO
ARQUITETURA DA INFORMAÇÃO
01 02
03
04
05
FLUXOGRAMA DAS AÇÕES
06 07
08
DESIGN DE INTERFACE REFERêNCIAS
INTRODUÇÃO
Quando se pensa em cegueira, algumas indagações são comuns: o que o cego é capaz de fazer? Como é a vida cotidiana sem a visão? Como ele é capaz de aprender? Que tipo de vida pode levar? Neste trabalho apresentaremos a criação de um browser (navegador web) que irá permitir acesso e inclusão ao mundo digital, diminuindo assim as dificuldades encontradas no cotidiano de pessoas cegas, e em especial a Laura. Estudante de pós-graduação do curso de Inovação em Mídias Interativas, Laura que tem uma cegueira congênita, que ocorre pela má formação ocular ou cerebral, necessita ter acesso aos conteúdos digitais. O curso de pós-graduação é semipresencial, tendo como objetivo em cada módulo, a diversificação no uso de mídias interativas, diversificando o uso de aplicativos, plataformas e outros para a resolução de trabalhos, encontros e debates. Por sua deficiência visual, Laura encontra dificuldades para permanecer no curso de pós-graduação, sendo que ela se sente limitada para desenvolver as atividades propostas no módulo devido à dificuldade de inclusão na mesma e pela falta de padronização dos sites, deixando de seguir os padrões internacionais de acesso. Para solucionar o problema de Laura, será criado um navegador web para pessoas com deficiência visual, onde as apresentações das páginas da web serão feitas em modo texto, com possibilidade de modo de visualização padrão da página web. Facilitando o acesso a páginas da web que ainda não estão dentro dos padrões de acessibilidade.
01
PROJETO WEB - FÓTON+
1
CONCEITUAÇÃO
02
A acessibilidade digital na web significa que qualquer pessoa, no caso Laura, utilizando qualquer tipo de tecnologia, deve ser capaz de visitar e interagir de forma autônoma com qualquer site, compreendendo as informações nele apresentadas, sem qualquer dificuldade ou dúvida. As inovações tecnológicas correspondem à implementação de produtos e processos tecnologicamente novos e aperfeiçoamentos tecnológicos significativos em produtos e processos. Atividades de inovação são todos os passos necessários para desenvolver e implementar produtos ou processos tecnologicamente novos ou aperfeiçoados. A interface acessível é o modo através do qual o usuário consegue interagir com um programa ou sistema operacional, através do uso do computador. No uso das mídias interativas, o usuário possui flexibilidade de selecionar assuntos de seu interesse, tendo todo o controle da programação.
2
‘‘
A visão que o cego tem do mundo é de uma riqueza única, incomparável e deve passar a ser vista como uma apreensão integral da realidade, não uma carência de visão, não uma castração de um órgão, mas a existência suficiente de um ser humano completo. (Monte Alegre, 2003, p.12)
PROJETO WEB - FÓTON+
3
o que é o fóton+
É um navegador web voltado para o público com deficiência visual, o qual foi idealizado mediante a necessidade em que uma universitária teve de acessar conteúdos on-line, pesquisas e interagir com seus colegas de especialização.
Fóton, consiste no elemento básico necessário para a composição da LUZ, eles são pequenos pacotes de energia (quanta) que junto com os elétrons formam as luzes e ondas eletromagnéticas. O símbolo “+” apresentado no nome do navegador, simboliza a acessibilidade e inclusão, esses que são os pilares no fundamento deste software, o qual desempenhará funções inovadoras ainda não encontradas em navegadores do mesmo gênero e proporcionará uma experiência mais ampla e objetiva ao usuário que possui as suas devidas limitações.
4
Quanto ao símbolo central da logotipo, o desenho circular com alguns traçados e raios luminosos possui o seu significado expressivo na composição deste projeto. Começamos pelo seu formato circular, o qual dentro do contexto remete ao globo ocular, sendo que há uma separação entre os dois círculos, demonstrando a parte externo do globo sendo a esclerótica (parte branca) e a interna com a íris.
Observando os detalhes, podemos visualizar na lateral esquerda do símbolo um corte, o qual além de ter o propósito ilustrativo, foi inserido com a intenção de transmitir a ideia de que ali seria a abertura para que o feixe luz chegasse até o olho dos deficientes. E quanto ao feixe no ponto central do símbolo, possui o significado de que a “luz chegou aos olhos de quem não podia ver”, onde que através do navegador agora será possível atingir o c o n h e c i m e n t o, l e i t u r a s e d e m a i s conteúdos disponíveis no mundo digital.
PROJETO WEB - FÓTON+
5
ESPECIFICAÇÕES FUNCIONAIS
03
Barra de endereço - A barra de endereço do Fóton+ é uma opção para a interação dos usuários com certo grau de deficiência visual por se tratar de uma opção da interface gráfica que permite visualizar a URL atual, ou permite informar novas URL. Esta opção também tem desenho acessível para possibilitar a comunicação com o Screen Reader. Opções voltar e avançar - O Fóton navegador web disponibiliza as opções de Avança e Voltar como qualquer outro navegador existente no mercado, seu diferencial está no uso padronizado da apresentação das opções, com descrições de cada um dos ícones.Assim é possível o uso através do assistentes com Screen Reader ou mesmo através da opção da interface visual. A navegação também é possível através das teclas de seta do teclado bastando para isso acionar a combinação de teclas. Opções para adicionar favoritos - Na opção Favoritos, guarda-se o link aberto na página atual, para ser consultado, aberto ou enviado, mais tarde. Sem limite de quantidade de links salvos na lista de favoritos. Opção atualizar - Atualiza a página atual. Opção Início que o leva à página inicial - Botão que carrega o endereço da página para o qual está configurado previamente nas opções do navegador como página inicial. Ler E-mail - Um poderoso cliente de E-mail capaz de se conectar a vários provedores com o uso dos principais protocolos de e-mail: POP3, IMAP e SMTP Imprimir - Abre janela de configuração para impressão da página atual, podendo ser configurado destino e opções de configuração como margens e cabeçalho/rodapé da página. Personalizar Exibição - Uma opção poderosa, totalmente integrada ao assistente de comandos por voz, através desta opção é possível uma personalização total de seu navegador através de comandos por voz. Histórico de navegação - O histórico de navegação do Fóton+ é a funcionalidade responsável por armazena em seu dispositivo (PC, Smartphone, etc) as informações de navegação na web. Seu objetivo é melhorar a experiência de uso, assim é possível ter acesso a dados informados anteriormente em formulários, senhas e sites visitados. Tudo isso para garantir uma maior agilidade no uso.
6
Gerenciar complementos - Função para gerenciamento dos complementos instalados no navegador, com opções de adicionar, desabilitar e excluir. Feeds - Fóton RSS é uma função que serve para agregar conteúdo. Seu uso principal é obter informações de sites de notícias e blogs. Configurações - Configurações do navegador, como inicialização, aparência, privacidade, downloads, entre outros. Ajuda - Central de Ajuda com manual detalhado de cada função e usabilidade do navegador. Leitor de Tela (Screen reader) - O Fóton Screen Reader é uma das maiores funcionalidades deste software, através deste é possível toda a interação do usuário com as várias funcionalidades deste navegador. Através desta funcionalidades é possível interagir com o computador por meio sonoro. O Fóton Screen Reader faz a leitura de páginas e das funcionalidades e repassa estas informações para o usuário. Agenda para registro de compromissos e alertas – O Fóton Agenda é um serviço de agenda e calendário on-line nativo deste navegador. Trata-se de uma interface web com possibilidades de adicionar, controlar eventos, compromissos, entre outras funcionalidades.Todas estas funcionalidades com a possibilidade de comando por voz ou facilmente navegável por um teclado, seja ele físico ou o incrível teclado virtual simplificado. Rádio – A rádio Fóton é uma funcionalidade de rádio online que disponibiliza uma aplicação cliente capaz que integrar as várias rádios existentes, seu objetivo é disponibilizar controles de forma acessível, assim através de uma interface extremamente intuitiva será possível realizar o acesso a várias rádios online e desfruta de várias playlists. Este cliente de rádio é capaz de consumir inúmeros streaming existentes na internet.
PROJETO WEB - FÓTON+
7
REQUISITOS DE CONTEÚDO
04
Não existem normas a fim de regular a acessibilidade na web e sim recomendações, as quais pautam para as Web Standards e estão voltadas para o desempenho das atividades do W3C. Nesse sentido, tais critérios servem exclusivamente para validar o código do site. A validação de um projeto web está diretamente ligada com a escolha minuciosa do doctype a ser utilizado no código, visto que ele é que determina o comportamento e interpretação dos mais variados navegadores, bem como dos leitores de tela para deficientes visuais, como é o caso a ser explorardo pelo Fóton+. Ainda em tempo, a validação possui tamanha importância pois através dela podemos detectar erros na composição/renderização de um layout, falhas de performance, uso do código e, principalmente, facilitar a manutenibilidade do produto sempre que for necessário. Para o bom funcionamento de um projeto web ACESSÍVEL AOS DEFICIENTES VISUAIS, se faz necessário elencar que o site deve funcionar com textos alternativos, funcionalidades com comando de voz, linkamento entre as informações, enfim, itens estes que são fundamentais para a boa compreensão por parte do usuário. O navegador Fóton+, independente do conteúdo que estiver nos sites comuns encontrados pela web, fará a leitura desse material e converterá em textos simples, a fim de proporcionar o entendimento do que está sendo acessado ao usuário, de maneira que os padrões web citados precisam ser seguidos para que o navegador faça a leitura de tudo o que está exposto na tela, sejam textos, links, imagens, cabeçalhos, inclusive vídeos, desde que sejam compostos com legenda especial para que possam transmitir o áudio e emoções de maneira íntegra e, com isso, o usuário atingirá perfeitamente o sucesso pleiteado. Um projeto web para ser acessível, ele precisa antes mesmo ser inteligível. A proposta de algo acessível supera a ideia de incorporação de javascripts e animações, enfim, se faz necessário que o site siga os padrões W3C para que o mesmo possa ser compreendido por todos e, uma vez desmembrada as interações/animações, o projeto deve se comportar de igual forma, sendo que a finalidade do javascript deve ser secundária e com o propósito de incrementar o projeto, não dependendo dele para a execução de atividades básicas ali relacionadas.
9
ABC
PROJETO WEB - FÓTON+
10
ARQUITETURA DA INFORMAÇÃO
05
11
Design de interação Esta seção do documento tem como objetivo esclarecer as informações suplementares, que correspondem aos requisitos não funcionais, a respeito do funcionamento e das características do Fóton+. Esta especificação contém os requisitos que se aplicam ao sistema como um todo, conforme os seguintes itens: 1. Usabilidade O sistema será implementado de forma a oferecer ao usuário mecanismos de navegação e interfaces suficientemente amigáveis, capazes de: · Reproduzir a inteligência do negócio através de interfaces intuitivas e auto-explicativas. · Sempre que possível, evitar que o usuário digite as informações no sistema, permitindo que ele selecione as informações desejadas; · Facilitar o aprendizado dos conceitos e operações do sistema, através de interfaces amigáveis e intuitivas; · Otimizar o tempo de execução das tarefas; · Conduzir o usuário por uma sequencia lógica de etapas; 1.1. Interface O aplicativo deve prover uma interface WEB, com menus dinâmicos, segundo os padrões de interface do W3C. Utilizar comandos textuais sempre que possível para o acionamento de funções no lugar de elementos gráficos; O aplicativo deverá dispor de recurso que possibilite desabilitar os demais “botões” enquanto o sistema não concluir a transação solicitada pelo usuário. 1.2. Idioma Português. 1.3. Ajuda em tempo real O Sistema disponibilizará para o usuário final mensagem de ajuda para os campos apresentados nas interfaces (Hints). Essas mensagens serão apresentadas quando o usuário posicionar o mouse sobre o campo. 4.2. Confiabilidade Falhas nesse sistema são também aspectos críticos que devem ser minimizados através de consistência de segurança como forma de se evitar a perda de informações ou os processamentos realizados no sistema. 2.1. Disponibilidade O sistema deve funcionar sem interrupções. 2.2. Integridade O sistema deve garantir que as operações do usuário só devem ser incorporadas após a conclusão da operação. O sistema deve garantir que os dados inseridos nos formulários
estejam consistentes.
7.3. Design O sistema estará em conformidade com os padrões atuais de design da W3C. Funcionamento Como vimos o Fóton+ é um navegador web, ou seja, trata-se de um programa que permite o acesso e interpretação de arquivos HTML, CSS, Javascript, entre outros. O Fóton+ tem a finalidade de trabalhar com request e response. Quando o usuário solicita uma pesquisa um endereço de um site ou aciona um link, ele faz uma requisição daquela página. Este pedido é enviado para o servidor onde o site está hospedado e cabe a este responder com os arquivos que compõe a página. De posse desses arquivos, o Fóton+ irá montar a página de acordo com as instruções do arquivo HTML que ele recebeu e por fim disponibilizar para o usuário a página solicitada. A ilustração a seguir apresenta um modelo em alto nível do funcionamento dos navegadores:
O usuário clica
O browser formata
e faz o 03 link do 02 a solicitação 01 em umbrowser envio ao servidor
05
O browser resgata o HTML e compila em formato visual para o usuário.
04
O servidor encontra a página solicitada
O servidor formata a resposta e envia para o browser
Fonte: http://videos.web-03.net/artigos/Thiago_Varallo/FuncionamentoWeb/FuncionamentoWeb2.jpg (com intervenção do grupo)
PROJETO WEB - FÓTON+
12
Fluxograma de interação BARRA DE ENDEREÇOS OPÇÕES PARA ADICIONAR FAVORITOS OPÇÕES VOLTAR E AVANÇAR
LER EMAIL IMPRIMIR AGENDA PARA COMPROMISSOS E ALERTAS
AJUDA
FEEDS CONFIGURAÇÕES GERENCIAR COMPLEMENTOS
RÁDIO
LEITOR DE TELA (SCREEN READER) OPÇÃO INICIO QUE LEVA A TELA INICIAL HISTÓRICO DE NAVEGAÇÃO PERSONALIZAR EXIBIÇÃO OPÇÕES ATUALIZAR ; PARAR PARA ATUALIZAR; PARAR O CARREGAMENTO DOS DOCUMENTOS ATUAIS
Internamente o Fóton+ manipula o código fonte original da página e reorganiza de forma a tornar o conteúdo acessível às pessoas cegas ou com alguma deficiência visual. Ele consegue reorganizar o código da página transformando em W3C HTML DOM que é uma forma de organizar como é feita as marcações para serem lidas pelo navegador.
FLUXOGRAMA DE AÇÕES
WINDOWS
06 Iniciar aplicação em segundo plano juntamente com o windows
INÍCIO
Iniciar browser
Requisitar acesso ao endereço web
Digitar endereço através do teclado
Resolveu comando de voz?
NÃO Solicitar acesso no endereço web
x
SIM
Receber endereço web
x
Resolveu endereço web? SIM
Resolver endereço web
é por comando de voz?
x
SIM
Retornar o endereço para o usuário
NÃO NÃO
FÓTON +
Informar via audio que a página não foi carregada
Deseja retornar conteúdo x em audio?
SIM
Receber comando de voz para leitura de tela
NÃO
Resolver comando de voz
Resolveu comando de voz?
x
SIM
Retornar em audio todo o conteúdo da página
NÃO FIM
Possibilitar aumentar o tamanho da fonte
Aumentar tamanho da fonte
Redimensionar o conteúdo da página
Retornar o conteúdo da página
PROJETO WEB - FÓTON+
14
DESIGN DE INTERFACE
O navegador web Fotón+ possui interface simples e intuitiva, usando cores vivas e em alto contraste, de forma a facilitar o seu uso. Nele, as páginas da web estarão dispostas em texto simples, porém, também possuirá opção de visualização padrão das páginas web. O passo a passo demonstrado abaixo é um exemplo utilizando via o teclado para a navegação, trabalhando em conjunto com leitores de tela, mas também, poderá ser feita através de outros dispositivos, como mouse e tela touchscreen.
07 WebSite:Visualização Padrão xVisualização para DeficientesVisuais Comparativo de procedimento de acesso ao website do Laboratório de Pesquisa, Desenvolvimento e Inovação em Mídias Interativas (Media Lab) <https://www.medialab.ufg.br/> na visualização padrão e na visualização formatada em texto simples para deficientes visuais. No primeiro passo é realizado o acesso ao website de pesquisa Google:
01 PADRÃO
15
01 01
FORMATADA FORMATADA
Acesso ao site <www.google.com> (Visualização Formatada para DeficientesVisuais)
Em seguida, digita-se o termo a ser pesquisado:
02 PADRÃO
Pesquisa do termo “inmidias ufg” (Visualização Padrão) PROJETO WEB - FÓTON+
16
02 FORMATADA
Pesquisa do termo “inmidias ufg” (Visualização Formatada para DeficientesVisuais) Veja agora a disposição de informações após a pesquisa ser realizada:
03 PADRÃO
Página com resultados da pesquisa do termo “inmidias ufg” (Visualização Padrão)
03 FORMATADA
Página com resultados da pesquisa do termo “inmidias ufg” (Visualização Formatada para DeficientesVisuais)
17
04 PADRÃO
Visualização final do website do Laboratório de Pesquisa, Desenvolvimento e Inovação em Mídias Interativas (Media Lab) : Website MediaLab <https://www.medialab.ufg.br/> (Visualização Padrão)
04 FORMATADA
Website MediaLab <https://www.medialab.ufg.br/> (Visualização Formatada para DeficientesVisuais)
PROJETO WEB - FÓTON+
18
REFERêNCIAS OBASSANI, Patrícia et al. Usabilidade e acessibilidade no desenvolvimento de interfaces para ambientes de educação à distância. Novas Tecnologias na Educação,V. 8 Nº 1, EAD. UFRGS: Porto Alegre, 2010. DARCIN, Eduardo. Desenvolvimento de interface gráfica acessível para deficientes no A v e a M o o d l e . D i s p o n í v e l e m : <http://www.periodicos.letras.ufmg.br/index.php/anais_linguagem_tecnologia/ar ticle/ view/5829/5099> FAÇANHA, A.R; VIANA, W; PEQUENO, M.C. Estudo de interfaces acessíveis para usuários com deficiência visual em dispositivos móveis touch screen. Nuevas Ideas en Informática Educativa,TISE 2011. FERREIRA, S.B.L. Acessibilidade e Usabilidade. Universidade Federal do Estado do Rio d e J a n e i r o ( U N I R I O ) . D i s p o n í v e l e m : <http://nau.uniriotec.br/index.php/sobre/acessibilidade-e-usabilidade> Acesso em 20/05/2017. IBGE. Censo Demográfico 2010: Pessoas com Deficiência. Disponível em: <http://www.ibge.gov.br/estadosat/temas.php?sigla=rj&tema=censodemog2010_defic > Acesso em 31/05/2017. MONTE ALEGRE, P.A.C.A Cegueira e aVisão do Pensamento. Dissertação de mestrado. Universidade de São Paulo: São Paulo, 2003. PALMEIRA, T.V. Como funcionam as aplicações web. Disponível em: <http://www.devmedia.com.br/como-funcionam-as-aplicacoes-web/25888> Acesso em 31/05/2017. W3C.WAI (Web Accessibility Initiative): Developing a Web Accessibility Business Case f o r Yo u r O r g a n i z a t i o n : O v e r v i e w . D i s p o n í v e l e m : < http://www.w3.org/WAI/bcase/#intro> Acesso em 31/05/2017. Ilustrações : http://br.freepik.com ( com intervenção do grupo)