Aula 5 Desenvolvimento e Design de Sites web



Baixar 67,57 Kb.
Encontro22.05.2017
Tamanho67,57 Kb.

AULA 8 – Acessibilidade e Páginas de Apoio ao usuário
Segundo a ABNT, acessibilidade é a possibilidade e condição de alcance, para utilização com segurança e autonomia, de edificações, espaço, mobiliário e elementos (ABNT/CB 40/NBR 9050). No projeto de web sites, acessibilidade consiste no preparo de páginas de forma que pessoas portadoras de deficiências físicas possam acessá-las, percebê-las, compreendê-las, navegar por elas, usar os serviços, comunicar-se com outras pessoas e realizar tarefas. A atenção especial a este aspecto permite que as informações e serviços online fiquem disponíveis para as pessoas que acessam a web de diferentes dispositivos, browsers e programas especiais (de 750 milhões a 1 bilhão dos seis bilhões de habitantes no mundo são portadores de alguma deficiência física, segundo a Organização Mundial de Saúde
Uma lista parcial de deficiências físicas de usuários que devem ser consideradas no desenvolvimento de web sites inclui: cegueira, visão debilitada, discromatopsia (dificuldade de distinção de gamas de cor), dificuldades físicas e motoras, problemas de cognição, problemas neurológicos e de aprendizagem.
Pessoas cegas escutam a leitura de textos através de programas sintetizadores de voz e de teclado em Braille, usando o teclado para a entrada de informações (não usam o mouse). Podem também usar um visor que traduz a interface para Braille ao invés de fazer a leitura dos textos. Estes usuários não têm acesso pleno aos recursos multimídia, como animações e filmes, especialmente porque os programas de fluxo contínuo (stream) de áudio e vídeo exigem que o usuário os acione com o mouse, nem sempre muito fácil. Segundo o Censo IBGE 2000, 16 milhões de deficientes visuais no Brasil (do total de 24,6 milhões) usam ou podem vir a usar usam programas especiais de computador, como os leitores de tela. Pessoas com visão debilitada podem aumentar o tamanho dos textos, ler textos em letras amarelas sobre fundo preto, usar programas de aumento da imagem da tela ou programas leitores de tela (que lêem em voz alta o conteúdo das páginas e provêem recursos especiais para navegação e realização de tarefas - como o preeenchimento de formulários).
Pessoas portadoras de deficiência motora usam hardware especial, como mouse movido pelo movimento da cabeça, teclados especiais e programas para reconhecimento de voz. Portadores do Mal de Parkinson ou pessoas com tremores ou problemas de mobilidade das mãos costumam preferir o uso do teclado ao invés do mouse, pois este exige a capacidade de realizar movimentos precisos. Pessoas portadoras de deficiência auditiva usam o teclado e o mouse, vêm a interface mas não têm acesso às informações sonoras. Pessoas portadoras de problemas neurológicos e de aprendizado se beneficiam muito de resumos explicativos e ilustrações ou gráficos que os ajudem a compreender os textos
Para tanro, os projetos de web sites comprometidos com o atendimento de públicos amplos e diversificados precisam levar em consideração as condições de acesso destes usuários e atender a questões relacionadas à adaptação das interfaces web para pessoas portadoras de deficiências físicas, como: apresentar soluções abrangentes, que incluam usuários com problemas motores, visuais, cognitivos; separar forma e conteúdo, permitindo a visualização de páginas em qualquer programa navegador e dispositivo, facilitando a indexação do conteúdo; e, principalmente, manter estes requisitos no dia-a dia de atualização do site.
Além dos usuários com deficiências físicas, é importante considerar, dependendo a abrangência do canal, a acessibilidade da interface web para usuários sem deficiência física mas com limitações no uso, como: equipamento antigo e/ou conexão lenta – no Brasil, 49,06% dos usuários residenciais acessam a internet via modem dial-up, para os quais o tempo de carregação das páginas é um fator crítico (B2B, Comitê Gestor do Brasil, 9.11.2006); dificuldades visuais e motoras devido à idade – estes usuários usam programas para atenuar problemas causados por tremores nas mãos e precisam adaptar o tamanho das letras e o layout das páginas web para configurações nas quais se sintam mais confortáveis; acesso com telas pequenas (como as de dispositivos móveis); visualização de imagens dos browsers desabilitada; acesso à internet em lugares muito barulhentos e movimentados (um shopping ou um local de trabalho) e nem sempre podem escutar uma música ou uma voz – 30% dos brasileiros acessam a internet de lan houses, a grande maioria das classes C, D e E.
O desenho de soluções de acessibilidade abrangentes inclui: a formatação flexível da interface para diferentes larguras e resoluções de monitor, de modo a facilitar o acesso de diversos tipos de dispositivos, com diversas configurações; a titulação de páginas com resumo do conteúdo - o título - da página é a primeira informação que leitores com problemas visuais, que usam programas leitores de tela, escutam; a publicação dos assuntos principais na parte de cima das páginas, para facilitar a leitura de usuários portadores de problemas motores ou de leitores mais lentos - os programas leitores de tela descrevem as páginas do alto para baixo, da esquerda para a direita, e o provimento de suporte ao uso do teclado no lugar do mouse; a compatibilidade da interface com programas leitores de tela e com a maioria dos principais browsers disponíveis, em diversos dispositivos; a produção de áreas de conteúdo especiais dedicadas aos usuários com deficiências físicas; o uso de tamanhos de fontes flexíveis, através de CSS (muito útil para pessoas portadoras de deficiências visuais e pessoas idosas); a formatação de HTML para melhor visualização dos critérios editoriais; <br />Em áreas da página com elementos é informações críticas, não se deve utilizar arquivos dependentes de áudio, plug-ins ou JavaScript. A funcionalidade da estrutura não deve depender destes elementos, para não excluir os usuários que se deslocam na internet com programas leitores de tela ou que não usam o mouse. Também não devem ser utilizados textos ou imagens animados (com JavaScript ou marcações "blink" e "marquee" em textos) e janelas pop-ups, cujos movimentos podem ser dispersivos para usuários com dificuldades de concentração, de forma que o processo de leitura pode ficar prejudicado. <p>Do <a href="/campus-confresa.html">ponto de vista visual</a>, é recomendado o uso de cores contrastadas, de forma que os elementos possam ser facilmente identificáveis pelos usuários. O preparo da palheta de cores do layout para usuários com daltonismo ou discromatopsia deve considerar o uso de textos explicativos em lugares onde se utilize layout baseado em vermelho ou verde (para usuários com dificuldades de distinguir estas cores). A disponibilização de um mapa do site em modo texto permite que o mesmo seja acessado por pessoas com problemas visuais. </p> <br />As páginas que separam forma e conteúdo devem ser com base na estruturação dos textos e imagens via CSS e não na estrutura do layout. Isto não significa sacrifício da forma em detrimento do conteúdo: a separação entre conteúdo e aparência permite o uso da interface por usuários com deficiências físicas, sem que outros usuários percebam. A separação entre forma e conteúdo via CSS permite também a visualização em dispositivos digitais diferentes do computador; além disso, facilita a indexação pelas ferramentas de busca - as indicações de acessibilidade tornam o conteúdo do site mais fácil de achar. O preparo do conteúdo para a indexação pelas ferramentas de busca melhora a sua "indexabilidade", ou facilidade de indexação pelas principais ferramentas de busca (o Google indexa imagens tanto pelo texto quanto pelas marcações "alt" contidas no código das imagens). <br />Tão importantes quanto criar os requisitos de acessibilidade é manter estes requisitos no dia-a-dia de atualização do site. As iniciativas para tornar um site compatível com requisitos de acessibilidade são sempre bem vistas pelo corpo gerencial na hora da aprovação do projeto. Como refletem as boas intenções do projeto e valorizam a sua imagem tanto para o público interno quanto externo, não há motivo para refutá-las. O problema aparece na hora da atualização cotidiana do site, que não é realizada (na maioria dos casos) pela equipe de projeto ou gerencial. Os profissionais encarregados da edição dos conteúdos renovados periodicamente, embora treinados para estruturar os textos de acordo com estes princípios, nem sempre dão a elas a devida importância. Na verdade, assinalar marcações de acessibilidade representa uma tarefa a mais na edição e na publicação de textos e imagens, que muitas vezes é aos poucos "esquecida" em meio às tarefas diárias. E como as marcações são invisíveis para grande maioria do público, bem como para os gerentes que acompanham os conteúdos publicados, o seu esquecimento passa despercebido - a não ser por quem realmente precisa delas <br />Segundo a Lei 5.296-04, publicada em dezembro de 2004, a construção de sites que atendam a requisitos de acessibilidade é obrigatória nos portais e canais eletrônicos da administração pública brasileira. Em 2005, o Departamento de Governo Eletrônico brasileiro elaborou o Modelo de Acessibilidade do Governo Eletrônico (e-Mag) para o desenvolvimento e a adaptação de sítios e portais governamentais, com um conjunto de recomendações para o desenvolvimento de web sites do Governo. Estas recomendações permitirão a padronização do processo de acessibilização dos sites de acordo com as necessidades brasileiras e em conformidade com padrões internacionais. Esta iniciativa visa à promoção da inclusão digital e ao acesso às informações via internet para toda a população. O congresso norte-americano passou a exigir, a partir de 2001, que os sites do governo sejam adaptados para usuários com deficiências. Estes sites seguem a WAI (web Accessibility Initiative), projeto coordenado pelo W3C, que homologa as normatizações da web nas seguintes áreas de trabalho: tecnologia, normatização, ferramentas, educação, abrangência, pesquisa e desenvolvimento. <br />Mudando <a href="/assunto-festa-de-encerramento-da-piscina-municipal-de-vagos-v2.html">de assunto</a>, falaremos agora das páginas de apoio ao usuário. Tais páginas são destinadas principalmente a fornecer informações sobre a própria estrutura do site que as contém. Dentre estas páginas, podemos destacar as páginas de abertura (“splash pages”), o mapa do site, página de contato, política de privacidade, a página de perguntas mais freqüentes (FAQs) e páginas de erro. <p>Conhecidas pela expressão em inglês "splash pages", as páginas de abertura aparecem em alguns sites antes da página Principal. Espera-se que produzam um efeito semelhante à abertura de um filme, atraindo a atenção dos visitantes e oferecendo uma experiência diferenciada. <a href="/conceito-de-perpendicularidade.html">No entanto</a>, por não conterem suficientes informações relevantes no endereço de entrada do site, estas páginas podem diminuir a motivação do cliente para visitar as páginas internas, eventualmente reduzindo a credibilidade do conteúdo. Além disso, estas páginas dificultam a indexação pelas ferramentas de busca, que não usam a página inicial como referência principal de navegação para o site. Empresas com muitos sites para diferentes países ou locais, a página de abertura pode fornecer opções de diferentes endereços e/ou idiomas.</p> <br />Mapa do site é o nome como são conhecidas as páginas que listam as páginas de um site, geralmente dispostas de maneira hierárquica. Representa visualmente a estrutura de informações com as sua subordinações internas, ao modo como foi organizada na arquitetura da informação. Utilizado junto com outros elementos de apoio à navegação, como ferramentas de busca ou listas de "links relacionados" em cada página, ajuda o usuário a localizar as informações que procura, bem como a criar um sentido de localização de cada área de informação em relação à estrutura geral. Tal recurso também facilita também os mecanismos das ferramentas de busca a encontrar as páginas de um site, o que é especialmente importante em sites que utilizam Macromedia Flash ou menus com JavaScript. Como a arquitetura da informação <a href="/entrevista-antnio-monteiro-de-abreu-sampaio.html">de modo geral</a>, o mapa do site não reflete obrigatoriamente o valor das informações para cada usuário, mas um consenso sobre o modo como estão organizadas, baseado em modelos mentais genéricos. <br />A política de privacidade de um site consiste nas regras sobre o destino das informações fornecidas pelos usuários a um site, seja durante um processo de compra, seja em processo de inscrição para o recebimento de serviços. A explicitação dos procedimentos da organização que publica o site sobre as informações, na maioria dos casos confidenciais, fornecidas pelos usuários ajuda a estabelecer uma relação de confiança com o público e aumentar o grau de satisfação com o processo de compra ou o acordo de serviços. A política de privacidade do Google, por exemplo, atualizada em 14.10.2005, especifica, além do destino das informações fornecidas, que os funcionários da empresa, contratados e outros colaboradores com acesso a informações pessoais dos clientes podem ser demitidos ou processados se violarem os compromissos de privacidade estabelecidos pela empresa. O site oferece também uma página de principais destaques da política de privacidade, uma página de perguntas mais freqüentes e links para outras páginas com informações adicionais sobre outros produtos oferecidos pelo Google, como Desktop, Gmail, Orkut, página Principal e busca personalizadas. <br />A página de perguntas mais freqüentes (FAQs) deve conter perguntas que os usuários gostariam de fazer, evitando que a equipe de suporte tenha que respondê-las sucessivas vezes. No entanto, nem sempre as perguntas (e/ou as respostas a estas perguntas) publicadas nestas seções são realmente úteis. A publicação de perguntas não-freqüentes diminui a confiança dos usuários, que perdem tempo e esforço procurando (e não encontrando) respostas para as suas dúvidas. Se a lista de perguntas e respostas for muito longa, um índice de assuntos principais ajuda os usuários a encontrar mais rapidamente a informação que estão procurando. Uma lista (não muito longa) de links com as perguntas no alto da página, que apontem para textos localizados na parte de baixo, também ajuda os usuários a encontrar mais rapidamente a respostas para as suas dúvidas <br />Páginas de erro ocorrem devido a mudanças nas propriedades das páginas, que podem ter sido apagadas, ter sofrido alteração de endereço ou do nome, ou ter ficado guardadas como favoritos depois de mudanças. Ocorrem também quando o usuário digita uma URL inexistente dentro de um site; outra causa comum de erro é um link desatualizado indicado por uma ferramenta de busca. Alguns aspectos a considerar em relação às páginas de erro: fazer com que o usuário não se sinta sentir responsável pelo erro – mensagens como "A página que você procura não pode ser encontrada. Pedimos desculpas pelo inconveniente" diminuem a impressão negativa; diferenciar a página de erro das outras, para o usuário não ficar confuso por não ter encontrado a página que esperava; e Localizar o Mapa do site ou uma Ferramenta de busca interna bem visíveis, para o usuário reencontrar o caminho interrompido. <br /> <br /><u><b><span id='AULA_9_–_Componentes_da_Interface_WEB'>AULA 9 – Componentes da Interface WEB</span></b></u> <br />As páginas de um web site devem seguir uma estrutura lógica. A seguir, detalharemos alguns tópicos comuns a todo site, tais como título da página, “tag lines”, ferramentas de busca, sinalização de itens, barras de navegação, menus, “breadcrumbs”, ícones e formulários. <br />Localizado <a href="/a-janela-do-hospital.html">no alto da janela do browser</a>, o título da página identifica o assunto da página. É o texto registrado por default nos favoritos dos browsers, e é um lembrete muito útil sobre o conteúdo da página para os usuários dos programas. É uma informação que merece atenção especial, porque algumas ferramentas de busca mostram o título da página na lista de resultados, associada à sua URL. Para ajudar a indexação dos sites de busca e o rastreamento da navegação pelo usuário, cada página deve ter um título que explique o conteúdo da página e faça sentido fora do contexto do site. Se o usuário lê o título no resultado de uma ferramenta de busca, deve poder entendê-lo para que possa selecioná-lo. <br />Muitos sistemas de gerenciamento de conteúdo dificultam a diferenciação dos títulos e, consequentemente, a identificação do assunto das páginas, na medida em que uniformizam os títulos do site todo, às vezes inserindo apenas o nome da organização que o publica. É importante deixar claro, para as pessoas/ empresas que adaptam o sistema de gerenciamento de conteúdo para as condições específicas da organização, a necessidade dos títulos das páginas correspoderem ao título do conteúdo. Isto não é normalmente um problema técnico muito difícil de resolver, e depende mais das orientações editoriais do que dos recursos do programa. A incidência de títulos uniformes acontece também com freqüência porque os próprios projetistas não prestam muita atenção neles. Mas a diferenciação dos títulos, identificando com objetividade o conteúdo de cada página, traz grandes vantagens não só para a organização que publica o site como para os seus leitores. <br />Aplicada na página Principal, a "Etiqueta-síntese do site" ("tag line") resume o assunto e os objetivos gerais do site em uma frase. Permite que os usuários que o visitam pela primeira vez (chegando pela página Principal), verifiquem se o assunto é do seu interesse antes de visitar as páginas internas <br />Uma ferramenta de busca ou buscador é um mecanismo de recuperação de informações que aceita uma pesquisa, compara a pesquisa com os arquivos indexados em bancos de dados e gera uma lista com os resultados encontrados. A busca pode ser dirigida a uma página, a um site, a um documento específico de um site ou banco de dados ou pode ser dirigida a um tipo de informação mais genérico, como uma lista de produtos num site de vendas. A ferramenta é necessária em sites grandes, com mais de 200 páginas, complexos e atualizados freqüentemente. É utilizada por 88% dos usuários que precisam achar informações específicas, especialmente usuários que não conhecem um determinado site. Além de ser usada para a recuperação de informações, é utilizada também como ferramenta de deslocamento - do total de usuários, cerca de 50% navega pela ferramenta de busca e o restante pelos links. <br />Sua utilização pelo público <a href="/-teste-de-matemtica--1-perodo--valor-20-pontos.html">representa</a>, para os projetistas de um site, importante fonte de avaliação da arquitetura de informação e dos assuntos/ produtos que os usuários procuram mais, pois fornecem informações sobre os canais mais procurados pelo público e como são encontrados. No entanto, seu uso excessivo pelos visitantes pode sinalizar que não estão encontrando facilmente as informações que procuram, e que a arquitetura da informação precisa ser aperfeiçoada <br />Alguns aspectos importantes a serem considerados ao se projetar uma ferramenta de busca interna (de um web site ou intranet): a ferramente deve ficar situada em local bem visível e acessível em cada página do site (é comum no alto, à direita ou à esquerda); não exigir conhecimentos especiais para uso (a não ser para a busca avançada) – se possível, deve repetir o modo de uso das principais ferramentas de busca, como Google e Yahoo, que fornecem campos de texto para buscas por palavras-chave, mostrar os resultados por ordem de relevância, sem repetição, de forma que os endereços indiquem os assuntos principais das áreas; permitir a realização de outras pesquisas a partir da página de resultados (e a volta à página Principal); apontar os links para arquivos em PDF para a página com as informações contextuais sobre o arquivo (assunto, tamanho, formato), e não diretamente para o arquivo; não mostrar, no resultado, links aos quais o usuário não tem acesso, que precisem de senha ou fiquem em áreas de acesso restrito. <br />Do ponto de vista de programação em HTML, a ferramenta de busca deve ordenar as informações de acordo com as marcações (tags) HTML ou meta tags ao modo como estão configuradas nas áreas de informações. Se, por exemplo, o site tiver marcações de títulos hierarquizadas com h1, h2, h3, o resultado deve priorizar os títulos com uma destas marcações. Se o título do texto de uma página for "Usabilidade", assinalado com h2, e um usuário fizer uma busca por esta palavra, o resultado deve priorizar esta página em detrimento de outras páginas onde haja a palavra "Usabilidade" mas em que esta não esteja no título assinalado com h2. Outro critério de priorização da ordem dos resultados pode ser o título da página, <title>, no caso de cada página do site ter um título adequado ao seu conteúdo (e não títulos repetitivos e padronizados). Se a palavra procurada se encontra no título de uma página, esta pode ser considerada de alta prioridade para o usuário <a href="/ferramentas-de-busca-na-internet-para-qu-por-qu-e-como-utiliz.html">que a utiliza na busca </a><br />Pode-se também combinar ao título da página palavras-chave e textos contidos nas meta tags "Description" e "Keywords", de forma a estabelecer prioridades para palavras e expressões mais usadas. Quando aplicável, deve-se facilitar a busca pelo uso de um menu lateral com opções que restrinjam a amplitude dos assuntos procurados (por classificações ou parâmetros de procura específicos de deteminadas áreas do site). A ferramenta deve também aperfeiçoar permanentemente os resultados com a observação das estatísticas de acesso e a verificação das palavras e expressões mais utilizadas pelos usuários. Este aperfeiçoamento muitas vezes implica na inclusão de palavras-chave nos textos e nas meta tags das páginas, e precisa ser feito com a equipe editorial <br />A sinalização de itens (bullets ou marcadores) funcionam para indicar listas de links (dentro ou fora da barra de navegação) ou de itens dentro do texto e podem sinalizar sinalizar diversos elementos de listas: itens com links no meio do texto, nas barras de navegação, itens isolados, etc. A manutenção de critérios de uso destes sinais ajuda o usuário a entender a relação de subordinação do item com o assunto principal. <br />Barras de navegação são agrupamentos temáticos ou funcionais de botões, localizados de acordo com as necessidades dos usuários. Podem estar em formato de imagem ou texto, normalmente no alto, à esquerda ou na base das páginas. Também podem variar nas páginas internas de acordo com a organização do conteúdo em cada camada. Em páginas internas, outras barras de navegação costumam ser acrescentadas, sendo que cada nível não deve apontar para mais que três ou quatro níveis de informações, de modo a que o usuário não perca o sentido de localização dentro da estrutura geral. Alguns elementos de navegação pelo site, como Ferramenta de busca, Mapa do site, Contato, Glossário, Suporte ao usuário, campo de Login e Logout, carrinho de compras, devem estar presentes em todas as páginas, no alto ou na base da página. <br />Menus são ferramentas de navegação em que um rótulo de barra de navegação revela uma série de rótulos agrupados quando o mouse passa sobre ele. O usuário pode mover o mouse sobre os rótulos de links e selecionar cada uma das opções. Menus permitem também procuras mais rápidas por todas as áreas, independente da localização na estrutura; <a href="/conceito-de-perpendicularidade.html">no entanto</a>, são mais lentos para a navegação que as barras de navegação para a procura de assuntos definidos em camadas mais profundas (muitas vezes o usuário precisa procurar em uma longa lista de itens). Para a navegação menos direcionada, a combinação de barras de navegação (localizadas) e menus (generalizados) aumenta a velocidade de localização de assuntos. Muitas vezes ocorrem que problemas de usabilidade em muitos menus fazem com que o movimento do mouse faça com que o menu "fuja" do usuário, o que prejudica as vantagens da sua funcionalidade. <br />Trilha de orientação ("breadcrumbs") consiste em uma linha de texto que mostra a localização de uma página em relação à estrutura de informações do site. O nome em inglês, "breadcrumb", é uma referência à história de João e Maria, que, para não se perdem na floresta jogam pedaços de pão para formar uma trilha que lhes sinalize o caminho de volta. É difícil traduzi-la, portanto sugerimos aqui expressões como "trilha de orientação" ou "barra de localização“. Não é um recurso muito utilizado pela maioria dos usuários, mas permite o deslocamento entre páginas utilizando os atalhos percorridos, sem necessidade de usar o botão "Voltar" ou a ferramenta de busca. Tal recurso reforça o sentido de localização do usuários entre camadas, e é mais utilizado pelos usuários experientes (menos da metade dos usuários), e muitas vezes ignorada mesmo pelos que notam a sua existência como o público da internet brasileira inclui cada vez mais usuários novos (especialmente das classes C e D), deve-se considerar o uso destas trilhas junto com outros recursos de orientação e navegação. Não deve ser a base da navegação de um site. <br />Em sites com usuários regulares, ícones podem ajudar a simplificar a navegação, através da rápida visualização de links e informações a eles associadas. As cores, as formas dos ícones, e a quantidade de detalhes dos ícones de uma interface devem ser baseadas em critérios visuais e conceituais homogêneos. As diferenças entre eles devem ficar facilmente identificáveis mesmo de relance, em passadas rápidas do olho sobre o conjunto. Usuários regulares de uma interface costumam usar mais os ícones como referência do que usuários que visitam um site pela primeira vez. Estes usuários já estão familiarizados com os assuntos principais e já não se detêm muito tempo na leitura dos rótulos, mas na imagem que identificam rapidamente. Para não aumentar o tempo de carregação das páginas, os ícones devem ser pequenos, bem como ser facilmente visualizáveis em monitores com resoluções mais baixas e mesmo sem distinção de cores (em preto e branco). <br />Os formulários permitem que o usuário inclua, a partir de um web site, diversos tipos de informações e as envie para destinatários definidos, como no caso de pagamento de impostos, compra de mercadorias, contrato de serviços, registro de acesso a um site. As informações encaminhadas podem ser incluídas em bancos de dados e gerar respostas automáticas - como a compra de uma mercadoria, por exemplo. Podem também ser enviadas <a href="/informativo-de-vagas-de-emprego-29-07-05082016-atualizado-03-0.html">por e-mail para uma pessoa</a>, responsável pela resposta ou pelo seu encaminhamento a terceiros. Algumas recomendações são feitas ao se criar formulários: a redação clara das informações e a programação visual dos formulários, que leve ao preenchimento fácil e intuitivo; durante do projeto do site deve ser feita uma análise do preenchimento dos campos, para antecipar o comportamento dos usuários – depois do lançamento, o acompanhamento das ações de preenchimento permite a verificação da efetividade das soluções e o seus aperfeiçoamento; o uso de elementos que obedeça a convenções amplamente utilizadas, como no caso dos botões de rádio e caixas de seleção; e a colocação na página da informação prévia do que vai acontecer a partir do preenchimento do formulário, para fortalecer a relação de confiança com o cliente. <br /> <br /><u><b><span id='AULA_10_–_Características_de_Conteúdo'>AULA 10 – Características de Conteúdo</span></b></u> <br />A web estimula o deslocamento e a ação do usuário, que não costuma ficar na mesma página ou site por muito tempo. É como se o usuário precisasse se manter em estado de permanente deslocamento, fazendo sempre alguma coisa. Na verdade, há tantas páginas e escolhas de fontes de informações e recursos que nunca se sabe se não há outro material melhor sobre o mesmo assunto - os usuários só se atêm realmente a um texto se for de interesse bastante específico. Para estimular a necessidade de deslocamento, como a leitura no monitor é 25% mais lenta do que sobre papel, o usuário médio não costuma ler todas as palavras dos textos, e limita-se a "varrê-los" com os olhos. Pode assim, passar rápido para outra página ou texto <br />Devido ao modo de leitura fragmentada, os editores não devem esperar que cada leitor se desloque entre diversas páginas do seu site para encontrar mais informações sobre um assunto. A leitura se faz na maioria das vezes entre páginas de diferentes sites, intermediada por páginas de resultados dos sites de busca, que traçam o roteiro do seu encadeamento. A edição "mental" destes diversos trechos faz com que cada usuário <a href="/disciplina-artes-professora-tereza-bezerra.html">crie um texto novo</a>, que, mesmo que não se explicite, é formado a partir da seleção de diversos trechos, selecionados em diversas fontes. Para atender a circuntâncias de uso tão específicas, a redação de textos para leitura online precisa se adaptar às circuntâncias de uso do público específico a que se destinam. <br />Devido a esta leitura fragmentada, os textos para leitura online devem prover mais informações imediatas do que a média dos usuários precisa: informações sobre produtos à venda, em especial, devem ser minuciosas, na medida em que alguns usuários procuram detalhes e especificações que influenciam as suas escolhas. O texto em tela deve permitir uma leitura rápida e concisa. Muita informação na mesma página afasta os leitores, sendo às vezes melhor subdividir o texto em várias páginas, cada uma com um sub-tema diferente. Textos mais extensos devem ficar localizados em camadas mais profundas e ter a opção de ser formatados em PDF (embora a localização de assuntos específicos dentro de arquivos PDFs muito grandes não seja fácil). O mesmo se aplica a listas de links: muitos links agrupados no mesmo lugar acabam criando muito ruído, e desestimulando a seleção. Estas listas devem ser relativamente curtas e organizadas por temas, de forma que seja fácil selecioná-los. <br />Algumas sugestões relacionadas à redação de textos para a web: valorizar a área localizada no alto da página, já que a maioria dos visitantes só procura esta área da página, não usando a barra de rolagem para ver a parte inferior da tela – por isto, colocar a parte mais importante do texto logo no início (pirâmide invertida): o título, a manchete e os subtítulos devem estimular o leitor a ler os textos, ou pelo menos sinalizar se o assunto o interessa; valorizar a informação mais útil para o cliente, em detrimento da informação mais útil para a organização que o publica – o leitor quer que os textos atendam às suas necessidades de informação e não "comprar" idéias alheias aos seus interesses; redigir títulos que sintetizem o conteúdo da página e ajudem o leitor a se localizar dentro do site – títulos compreensíveis mesmo fora do contexto do site ajudam a sua compreensão <a href="/acordo-coletivo-de-trabalho-de-mbito-nacional-celebrado-entre.html">nos resultados nas buscas</a>; redigir parágrafos curtos, com uma idéia principal em cada um; evitar palavras e frases supérfluas em textos e títulos; subdividir o texto em itens e sub-itens sempre que possível; dividir textos longos com subtítulos, de forma a orientar a leitura de acordo com os assuntos principais; e publicar "teasers" (chamadas nas páginas principais para textos internos) diferentes do lead da matéria, que inclui o trecho mais importante do texto nos dois primeiros parágrafos. <br />Se os textos são atualizados freqüentemente, incluir a data de atualização de cada um, de forma que visitantes que retornam ao site regularmente saibam quando foi feita a última mudança. É importante comunicar aos leitores se uma informação está atualizada ou não, para que eles mesmos possam verificar que inconsistências verificadas em relação a informações de outros sites podem ser causadas pela desatualização. <br />Deve-se também prestar atenção às especificidades de leitura da tela e evitar o uso de textos animados, que são difíceis de acompanhar e ler, bem como verificar a qualidade do texto na versão da página para impressão e, se necessário, criar layouts diferentes com CSS. A versão impressa da página web não precisa de elementos necessários para a interface eletrônica, como botões e barras de navegação. Também é útil favorecer o cruzamento de informações, com links dentro dos textos e nas áreas em volta do texto, sem no entanto saturar as páginas com excesso de informações dispersivas. <br />Animações podem orientar a navegação pelo site e tornar o deslocamento mais agradável, enriquecendo a experiência do usuário, mas aumentam muito o tempo de carregação da tela e devem estar relacionadas à conceituação do site. Alguns cuidados relacionados à inserção de animações devem ser tomados: evitar, no conteúdo do site, inserir animações semelhantes a anúncios - o público não costuma prestar atenção em anúncios; sinalizar ao leitor quando a animação exigir longos tempos de download; uma barra que indique quanto tempo falta para o arquivo carregar ou um texto introdutório que distraia o usuário enquanto o arquivo está carregando são opções para atenuar o efeito da espera pelo download de arquivos muito grandes; localizar animações de maior tamanho em níveis mais profundos do site; publicar arquivos de programas como o Flash em versões atrasadas em relação à última, para garantir o acesso de usuários com plug-ins desatualizadas; e evitar repetir as animações infinitamente, ainda mais em páginas com texto para leitura, para não distrair os leitores. <br />Em abril de 2007 a Abril lançou o Fiz, site que permite o upload de vídeos pelos usuários e a transmissão dos mais votados num canal de TV fechado; em setembro de 2006, o site do iPod começou a oferecer filmes da Disney (nos primeiros 15 dias, 125.000 <a href="/salvando-arquivos-da-web.html">arquivos foram baixados</a>, gerando faturamento de $ 1 milhão); em fevereiro de 2007, a Wal Mart passa a oferecer o mesmo serviço; os acessos diários aos vídeos do YouTube beiram os 40 milhões (o que justificou a sua compra pela Google). Em parte devido ao aumento do acesso via banda larga, a distribuição de vídeo na web está em momento de grande demanda. No Brasil, embora sejam apenas 4,2 milhões de usuários, podendo chegar a 10 milhões em 2010 (ComputerWorld, 22.6.2006), produtores, anunciantes e editores de sites também estão distribuindo vídeo nos canais online. Estes provedores de conteúdo a cada dia aperfeiçoam diferentes modelos econômicos de distribuição destes arquivos, para um público que procura alternativas para as TVs aberta e por assinatura. Os fornecedores de programação de vídeo online tendem a adotar atualmente um modelo semelhante ao das TVs, disponibilizando programas patrocinados ou transmitidos mediante pequeno pagamento (pay-per-view ou assinatura). A tecnologia para a distribuição de vídeo online está madura, embora aspectos como a linguagem desenvolvida para veículos interativos, a usabilidade das interfaces, a proteção de direitos autorais e a segurança das redes ainda estejam sendo aperfeiçoados. Novas soluções tecnológicas procuram incluir o espectador no processo de criação das peças de vídeo, o que gera novas possibilidades de interlocução com o conteúdo. <br />Em sites comerciais, formatos que combinam som, áudio e animação são direcionados a público diferenciados para criar experiências relacionadas a marcas comerciais em banners, jogos, cadastros, informações sobre produtos. Modelos de aplicações de peças em vídeo para complementar conteúdo em formato de texto e imagem incluem: a promoção de filmes, músicas (video clips) e programas de TV; o desenvolvimento do sentido de branding - identidade em relação a uma marca - com o aproveitamento de recursos interativos dinâmicos; ensino de procedimentos ou a demonstração do funcionamento de um produto - um tutorial <a href="/a-verdadeira-histria-do-rdio.html">de um programa por exemplo</a>; e exibição de imagens que valem pelo movimento (uma corrida, uma jogada importante numa partida de futebol, um passo de balé). <br />A publicação de vídeo na web deve levar em conta que o usuário normalmente associa a interface às diversas informações e ações que precisa consultar ou realizar. O conteúdo e a produção do vídeo se adapta a este ambiente em que o usuário é estimulado a se manter sempre ativo. A publicação de vídeo na web diretamente relacionado ao conteúdo editorial do site e ao seu modelo de negócios, em que as peças são veiculadas em contexto que atenda às expectativas dos expectadores, representa um efetivo enriquecimento das formas de comunicação e expressão online <br />Em relação ao uso de imagens, existem diferentes tipos de imagens usadas na web. As imagens digitais são compostas por pixels, picture elements, sendo que cada pixel é composto por um mapa de bits - os bits são unidades de informação compostas por pontos com sinal elétrico ou sem sinal elétrico. Os sinais elétricos dos bits formam malhas de sinais com ou sem sinal elétrico que são representados por 0 ou 1. Um ponto com sinal elétrico é representado por um algarismo 1 e um ponto sem o sinal elétrico é representado por um 0. De acordo com disposição dos bits nos pixels, as imagens podem ser: imagens Bitmap – são as imagens digitalizadas por scanners, fotos digitais, imagens manipuladas em programas de edição de imagens. São compostas por mapas com as coordenadas de cada ponto do pixel e o seus valores de cor, brilho e intensidade; e imagens Vetoriais, que são produzidas a partir de linhas e curvas definidas por objetos matemáticos. <br />Os formatos abaixo são utilizados para a publicação de imagens na web. Cada um tem características e aplicações muito específicas: GIF (Graphic Interchance Format) - formato adequado para publicar letras, gráficos e imagens com grandes áreas de cor uniforme; JPEG (Joint Photographic Experts Group) - <a href="/1968-um-ano-sem-fotos-da-sala-toda-que-teria-mudado-no-arqui-v.html">adequado para comprimir fotos</a>; PNG (Portable Network Graphics) - criado mais recentemente (em 1995), é um formato alternativo ao GIF, que permite o controle da transfarência por percentuais. <br />Um fator que influencia muito o tempo de carregamento das páginas é o número de imagens publicadas e o seu tamanho. As páginas devem conter, em situação ideal, um tamanho total em Kb que evite que os usuários fiquem longo tempo esperando ou procurem outros sites. Embora seja difícil apontar um tamanho preciso de página, podemos arriscar que fica em até 80Kb. É importante observar que um número alto de usuários brasileiros acessa a internet com linha discada. Nossos desenvolvedores web, portanto, precisam se preocupar com a velocidade de carregação da páginas nos browsers: apenas 28,64% das residências no Brasil acessam a internet com banda larga, devido ao alto custo das conexões e dos computadores. O principal modo de acesso à internet nos domicílios brasileiros em 2006 foi o modem dial-up, com 49,06% dos acessos (TIC Domicílios). Embora as metodologias de análise sejam diferentes, e apontem diferenças significativas entre os dados, estes são importantes para os desenvolvedores web, pois apontam para a necessidade de desenhar páginas que carreguem rapidamente nos browsers da maioria dos brasileiros. <br />É comum, especialmente em sites de demonstração de produtos, a publicação de páginas com pequenas imagens (thumbnails) agrupadas que, ao serem selecionadas pelos usuários, mostram a sua imagem em tamanho ampliado. O problema é que às vezes estas imagens pequenas ficam tão reduzidas que é impossível o público entender se realmente vale a pena vê-las ampliadas. Para diminuir os efeitos desta perda de qualidade, as imagens menores podem ser cortadas de forma que mostrem os seus detalhes, mesmo que fiquem diferentes das versões ampliadas. Ou então pode-se mantê-las num tamanho não <a href="/ladislau-dowbor.html">muito pequeno</a>, para que o usuário faça uma idéia do seu conteúdo e queira vê-las ampliadas. As imagens ampliadas podem ser vistas quando se clica sobre a imagem pequena, na mesma página ou em uma página avulsa. É importante ter cuidado no primeiro caso, porque, as imagens maiores também são carregadas com a página, embora escondidas, e podem torná-la pesada e de carregação demorada. Neste caso, é necessário reduzir o número de imagens por página. Já a publicação da imagem maior numa página separada tem a desvantagem de fazer com que o usuário inexperiente deixe muitas janelas abertas e sobrecarregue o seu browser. A conveniência de cada solução depende do número de imagens publicadas e da funcionalidade do desenho de cada interface. <br />A resolução de uma imagem está diretamente relacionada ao tamanho das suas dimensões (altura e largura, em pixels) e à densidade de pixels na sua área, e é definida pelo número de pixels por polegada quadrada (ppi - pixels per inch). A resolução média para a visualização de imagens no monitor vai de 72 dpi (mínimo) a 100 dpi (máximo). Quase todos os computadores utilizam resoluções de tela de 72-96 ppi (pixels per inch). O uso de imagens com resoluções acima destes valores não acarreta aumento de qualidade para o usuário e deve ser evitado porque aumenta o tempo de carregação da página; resoluções menores que 72 dpi afetam a qualidade de visualização da imagem. Por isto, é importante arquivar as imagens originais (de maior tamanho e resolução) para o caso de haver necessidade fazer alterações nos arquivos <br />As cores de monitores apresentam grande variação, especialmente se consideramos os dispositivos móveis. Monitores apresentam também variações de profundidade de bits (atualmente a maioria varia entre 24 e 32 bits - sendo que apenas 24 bits renderizam realmente as cores, os bits adicionais ajudam a processar as cores na tela). Sistemas operacionais diferentes mostram cores diferentes , assim como Navegadores também podem alteram as cores das páginas de um site. Para tanto, faz-se necessário uso de palhetas de cores adequadas para a web. Quando a web se disseminou, a partir de 1994, os monitores dos computadores tinham recursos limitados e mostravam poucas cores. Os desenvolvedores, para garantir a homogeneidade das cores utilizadas em seus projetos, precisavam recorrer a palhetas comuns a diversas plataformas para assegurar a consistência dos layouts e de seus elementos: os navegadores trabalhavam com as palhetas dos sistemas operacionais <a href="/parte-1-introduco.html">dos computadores PCs</a>, Macs, Unix. Hoje os computadores dispõem de mais memória, processadores mais rápidos e potentes e os monitores não apresentam as mesmas restrições de cores. A necessidade de uso das palhetas comuns a todas as plataformas diminuiu. No entanto, com o aumento do acesso à web pelos dispositivos móveis, com monitores menos potentes, muitos desenvolvedores utilizam a palheta de cores "web-safe" como referência para a escolha de cores básicas. Embora diferentes entre si, as palhetas compatíveis com a web usam 216 cores comuns, sendo 40 para uso do sistema operacional. A palheta de 216 cores tem 6 vermelhos, 6 verdes e 6 azuis. <br />Fatias (slices), são imagens divididas em pequenos fragmentos para facilitar a carregação da janela do browser. São usadas quando é indispensável publicar uma imagem muito grande, que possa exigir um longo tempo de download, como é o caso de fundos grandes ou de barras de navegação que funcionem a partir de uma única imagem, por exemplo. Cada fragmento, ou fatia, constitui um arquivo independente, com configuração e endereço próprios, e pode também apresentar efeitos de rollover e animação diferenciados da imagem que ajuda a compor. As fatias permitem que as páginas que as contêm dêem a impressão que aparecem mais rapidamente, na medida em que se pode ver cada fragmento à medida que é carregado, ou seja, pode-se ver "alguma coisa" mesmo antes de ver o conjunto completo.



©livred.info 2017
enviar mensagem

    Página principal