TCC - Projeto de Design de Interface para Website do Jornal Essência Vital by Essência Vital

Ficha Catalogrรกfica

Em processamento

INSTITUTO INFNET ESDD - Escola Superior de Design Digital Curso Superior de Tecnologia em Design Gráfico Turma Leonardo Da Vinci - 1a. Turma de Design da ESDD (Noite)

Marcos Antonio Andrade de Melo

Rio de Janeiro 2010

Marcos Antonio Andrade de Melo

CRIAÇÃO E IMPLEMENTAÇÃO DE PROJETO DE DESIGN DE INTERFACE PARA WEBSITE BIOGRÁFICO DO JORNAL ESSÊNCIA VITAL Do impresso analógico à interface digital web, um projeto de transposição de mídia. Trabalho de Conclusão de Curso na Graduação de Tecnologia em Design Gráfico, com foco em Design Digital, da ESDD - Escola Superior de Design Digital do Instituto Infnet, habilitação em Design Gráfico, apresentado como exigência final do curso. Disciplina: Planejamento e Projeto em Design Digital II - TCC. (3º trimestre/2010). Profa. Orientadora: Flávia Nízia Profa. Co-Orientadora: Bianca Martins

Rio de Janeiro 2010

Marcos Antonio Andrade de Melo

CRIAÇÃO E IMPLEMENTAÇÃO DE PROJETO DE DESIGN DE INTERFACE PARA WEBSITE BIOGRÁFICO DO JORNAL ESSÊNCIA VITAL Do impresso analógico à interface digital web, um projeto de transposição de mídia. Monografia apresentada e aprovada em ____ de ______________de 2010 como pré-requisito para obtenção do grau de Designer Gráfico (Curso Superior de Tecnologia em Design Gráfico) da ESDD - Escola Superior de Design Digital, do Instituto Infnet, submetida à aprovação da banca examinadora composta pelos seguintes membros: Banca Examinadora

Profa. Dra. Orientadora Flávia Nízia Profa. Co-Orientadora Bianca Martins Prof. Examinador Bruno Sérgio Prof. Examinador Gabriel Gabiru Coordenadora do Curso Profa. Bianca Martins

Rio de Janeiro 2010

Dedicado à Energia Suprema, aos incansáveis amparadores espirituais que me auxiliam nessa jornada de evolução na Terra, aos meus pais Maria e Francisco, meu filho Lucas, minha mulher Denise, meus professores e orientadores de graduação e aos muitos amigos essenciais in memoriam (Décio e Eduardo) e presentes (Francisco e Vera) - que acreditaram e dedicaram tempo de suas vidas ao(à) Essência Vital.

Agradecimentos Acredito que toda construção ou vitória é sempre, de alguma maneira, fruto de um conjunto de forças colaborativas. A partir de uma concepção sistêmica compreendo que a Vida é uma gigantesca e perene rede de interações e trocas. Este projeto de pesquisa e implementação de website para o jornal Essência Vital não seria possível sem o apoio de pessoas queridas que ao meu lado caminham há longo tempo. Gostaria então de agradecê-las, em singela homenagem, na certeza de que este trabalho irá honrá-las e, de certo modo, retribuí-las um pouco do muito que já recebi de cada uma. Começo por agradecer aos meus pais, Francisco e Maria, pela rara oportunidade da vida orgânica e pelo recebimento de uma educação de base ética, sem a qual eu já teria sido engolido pelas fantasias de um mundo repleto de inversões e ainda carente de muita luz. Agradeço a eles pela tenacidade e esforços contínuos para que eu pudesse me tornar o homem amigo e fraterno que hoje sou. Gostaria de agradecer a minha mulher e companheira Denise, que há quase uma década se mantém dedicada ao meu lado - suportando fortes vendavais que já nos açoitaram a alma - contribuindo de todas as maneiras possíveis para o meu engrandecimento e cumprimento de nossa missão na organização social que junto fundamos. Agradeço ao amigo Francisco, sem o qual muitas das edições do Essência Vital talvez não fossem impressas. Humilde e ao mesmo tempo possuidor de grande sagacidade técnica, sempre esteve disponível, de maneira fraterna, para auxiliar no campo das dificuldades tecnológicas que fazem parte da história do/da Essência Vital. Agradeço a minha amiga Vera, com a qual sempre aprendo ao observá-la em sua fé, resistência e entrega à causa que junto abraçamos e que é consagrada ao exercício e partilha de conhecimentos voltados para a melhoria da qualidade de vida de pessoas enfermas. Agradeço ao meu filho Lucas por sempre me lembrar, mesmo quando em silêncio ou distante, sobre a importância de fazermos o nosso melhor pensando no legado que devemos deixar para as futuras gerações. Agradeço aos milhares de ex-leitores e colaboradores do jornal Essência Vital, que durante anos nos motivaram em sua edição e puderam compartilhar conosco momentos únicos de alegria e superação. Agradeço ainda aos atuais sócios da Ong Essência Vital, que dão suporte para nossas ações ligadas à saúde, ao meio ambiente, entre outras, e que compreenderam nosso distanciamento momentâneo nesses meses finais de conclusão de curso. Sem eles também não haveria sentido para a execução desse atual projeto. Agradeço aos meus dedicados professores de faculdade: Alexandre, Bianca, Bruno, Caetano, Cat, Cleber, Flávia, Francis, Francisco, Graciana, Gustavo, Jorge, Petruska, Ricardo e Silvia pela oportunidade do aprendizado. Por fim, agradeço à Energia Suprema, com profunda gratidão e leveza no coração, pela chance de realização deste projeto e conclusão de minha graduação e oro para que abençoe e envolva de amor todas essas pessoas.

RESUMO Este projeto tem por objetivo, em termos de profundidade e extensão, a pesquisa, a criação e a implementação de design de interface digital para website biográfico do jornal Essência Vital, bem como envolve sua publicação e o registro de domínio. Para além do campo do design este projeto é também um trabalho de transposição de mídia, que permite o registro histórico, em meio digital, de todo o conteúdo já impresso pelo jornal.

Palavras-chave: interface, transposição, website, design, jornal, essência vital.

ABSTRACT This project aims, in terms of depth and extension, to research, creat and implement the digital interface design for the background website of the Essência Vital newspaper. It involves the website publication and domain registration. The project transcends the field of design, and also focuses on transposition of media, allowing for the historical record, in digital media, of all the content of the printed publication.

SUMÁRIO

LISTA DE FIGURAS

.........................................................................11

1 – INTRODUÇÃO ..........................................................................14

1.1 - DELIMITAÇÃO DO PROJETO 1.2 - QUESTÃO DO PROJETO 1.3 - OBJETIVOS

..........................................................14

..............................................................16

.........................................................................17

1.4 - JUSTIFICATIVA

......................................................................17

2 – PESQUISA E CONCEITUAÇÃO

.........................................................19

2.1 - O PROJETO GRÁFICO E ANALÓGICO DO JORNAL ESSÊNCIA VITAL

.......................19

2.1.1 - Histórico, conceitos e ambientação sociocultural do jornal 2.1.2 - Estrutura e projeto gráfico impresso

...........................................22

2.1.3 - Alcance e impacto sobre público-alvo

2.2 - TRANSPOSIÇÃO DE MÍDIA

......................19

..........................................26

...........................................................26

2.2.1 - O que é transposição de mídia impressa para mídia digital? ..................... 26 2.2.2 - Importância da transposição para esse projeto ................................. 29 2.2.3 - Do analógico ao digital (tecnologias flip, hipertexto, análise de similares)........ 33

2.3 - PESQUISA PARA INTERFACE DIGITAL DO WEBSITE BIOGRÁFICO ......................... 66 2.3.1 - Conceitos fundamentais sobre design de interface .............................. 66 2.3.2 - Usabilidade (fundamento, estudo de similares, eyetraking, objetivos) 2.3.3 - Acessibilidade

........... 70

................................................................80

2.3.4 - Semiótica.....................................................................85

3 – DESENVOLVIMENTO ................................................................... 87

3.1 - ESCOPO E FUNÇÕES ESPECÍFICAS (objetivos e requisitos) 3.2 - ARQUITETURA DA INFORMAÇÃO (mapa estrutural) 3.3 - WIREFRAME E DESIGN DE INTERFACE

..............................87

................................... 96

.............................................. 103

3.4 - LAYOUT E PROTOTIPAÇÃO DE ALTA FIDELIDADE ..................................... 111 3.4.1 - Tipografia .................................................................. 111 3.4.2 - Cores ....................................................................... 113 3.4.3 - Retângulo áureo e regra dos terços (estudos) ................................. 114

3.5 - SOFTWARE, LINGUAGENS TECNOLÓGICAS E LICENÇAS

............................... 130

4 – CONCLUSÃO .......................................................................... 133

REFERÊNCIAS - BIBLIOGRAFICAS E SITOGRÁFICAS

.................................... 134

LISTA DE FIGURAS

Figura 01 - Página 20 Figura 02 - Página 22 Figuras 03, 04, 05 e 06 - Página 23 Figura 07 - Página 24 Figuras 08 e 09 - Página 35 Figuras 10 e 11- Página 36 Figuras 12 e 13 - Página 37 Figura 14 - Página 38 Figura 15 - Página 39 Figuras 16, 17, 18, 19, 20 e 21 - Página 40 Figuras 22, 23 e 24 - Página 41 Figura 25 - Página 42 Figura 26 - Página 44 Figuras 27 e 28 - Página 45 Figuras 29 e 30 - Página 46 Figuras 31, 32 - Página 47 Figuras 33, 34 e 35 - Página 49 Figuras 36, 37 e 38 - Página 50 Figuras 39 e 40 - Página 51 Figura 41 - Página 52 Figura 42 - Página 53 Figura 43 - Página 54 Figuras 44 e 45 - Página 55 Figuras 46 e 47 - Página 56 Figuras 48, 49 e 50 - Página 57

Figura 51 - Página 58 Figuras 52 e 53 - Página 59 Figura 54 - Página 60 Figuras 55 e 56 - Página 61 Figura 57 - Página 62 Figura 58 - Página 63 Figura 59 - Página 64 Figura 60 - Página 65 Figura 61 - Página 68 Figura 62 - Página 70 Figuras 63, 64, 65 e 66 - Página 71 Figura 67 - Página 72 Figura 68 - Página 73 Figura 69 - Página 74 Figura 70 - Página 83 Figuras 71 e 72 - Página 84 Figura 73 - Página 88 Figura 74 - Página 97 Figura 75 - Página 103 Figura 76 - Página 104 Figura 77 - Página 105 Figuras 78 e 79 - Página 106 Figuras 80 e 81 - Página 107 Figuras 82 e 83 - Página 108 Figuras 84 e 85 - Página 109

Figuras 86 e 87 - Página 110 Figura 88 - Página 111 Figuras 89 e 90 - Página 112 Figura 91 - Página 113 Figuras 92 e 93 - Página 115 Figura 94 - Página 116 Figuras 95 e 96 - Página 117 Figuras 97 e 98 - Página 118 Figuras 99 e 100 - Página 119 Figuras 101 e 102 - Página 120 Figuras 103 e 104 - Página 121 Figuras 105 e 106 - Página 122 Figuras 107 e 108 - Página 123 Figuras 109 e 110 - Página 124 Figuras 111 e 112 - Página 125 Figuras 113 e 114 - Página 126 Figuras 115 e 116 - Página 127 Figuras 117 e 118 - Página 128 Figuras 119 e 120 - Página 129 Figuras 121 e 122 - Página 132 - Págin

1 - INTRODUÇÃO

1.1 - DELIMITAÇÃO DO PROJETO

Este projeto tem por objetivo, em termos de profundidade e extensão, em tempo e espaço, a pesquisa, a criação e a implementação de design de interface digital para website biográfico do jornal Essência Vital, bem como abranger sua publicação na internet e o registro de domínio. Para além do campo do design este projeto é também um trabalho de transposição de mídia que permite o registro histórico, em meio digital, de todo o conteúdo já impresso pelo jornal. Um projeto desafiador que integra aspectos funcionais complexos e lida com um conteúdo de volume expressivo.

Desenvolver a narrativa deste projeto com o máximo de impessoalidade e imparcialidade, buscando distanciamento afetivo de seus conteúdos e significados, foi impossível. Embora isso não fique evidente nos muitos momentos de abordagens técnicas, em outros, os adjetivos transparecem nosso grau de cumplicidade e realização pessoal.

Não posso negar que uma década de minha vida esteve profundamente relacionada com a existência do jornal Essência Vital, de seu surgimento até sua última edição impressa e os ecos deixados nos anos seguintes. O fato é que, se não fui seu mentor na esfera espiritual da vida, que alimenta o campo de nossas intuições íntimas, de certo fui o canal escolhido para sua materialização e condução durante o tempo de sua publicação no mundo tangível.

Na função de editor e designer do Essência Vital pude sofrer e alegrar-me, um sem número de vezes, com histórias que envolvem superação e ideal. Trabalhar pela construção de uma sociedade melhor e justa não é tarefa fácil, e muitos são os obstáculos que se configuram diante daqueles que se propõem compartilhar conhecimentos libertadores. O Essência foi um arauto de luz e coragem transformadora, com a missão de integrar e entregar conteúdos valiosos, críticos e motivadores à sociedade. Minha parcela de contribuição neste processo

foi mais do que intensa, foi visceral, exigindo-me noites e mais noites de dedicação para a execução de suas várias etapas de elaboração. Mas não trabalhei só, e se não fosse pelo amor e boa vontade de outros companheiros dedicados, o Essência não teria suportado todos os anos de sua publicação. Contudo, também não posso negar que de seu nascimento até o fim de seu ciclo de vida impressa, fui eu o único presente em todos os momentos do Essência. Não me é fácil lembrar e descrever as muitas vivências proporcionadas por essa experiência, pois a saudade é forte. Disto resultam marcas indeléveis em meu coração e mente, sentimentos pregnantes que pesaram e pesam, anos depois, para a fundação da Ong Essência Vital - organização de mesmo nome e da qual sou voluntário e diretor - e ainda para a própria escolha deste atual projeto de conclusão de graduação.

Portanto, em decorrência desta trajetória de proximidade, torna-se difícil o completo afastamento emocional durante a narrativa que segue, justificando-se o tom um pouco mais pessoal nessa etapa introdutória do projeto.

Sempre houve a intenção de que o Essência Vital pudesse ter seu acervo transposto para a web e assim alcançar um número maior de leitores. Mas isto não foi possível ao longo dos anos de sua publicação (1995 a 2003) em função de muitas variáveis, que foram desde a falta de pessoas voluntárias com tempo e conhecimentos técnicos adequados, até a falta de recursos que pudessem financiar uma equipe de profissionais qualificados ao desenvolvimento do volumoso projeto web. As tecnologias disponíveis e a própria internet com suas limitações de acesso também dificultaram esse aporte em meio digital, ou, pelo menos, ainda não estimulavam tanto a empreitada. No período de sua edição impressa o jornal "testemunhou" os intrincados conflitos e limitações tecnológicas do progressivo surgimento e popularização da informática, sendo produzido com softwares ainda instáveis e mídias de gravação muito suscetíveis. Mídias e softwares mais seguros, bem como o avanço da internet só ganharam larga escala nos últimos anos de edição do jornal. Mas agora, em conseqüência da evolução tecnológica e do crescimento expressivo do acesso à internet esse trabalho não só é possível, como também oportuno.

O projeto de website para o Essência Vital engloba a observação de metodologias sistematizadas ao longo dos anos de pesquisas e estudos relacionados à interação humanocomputacional (IHC) e às melhores práticas para construção de interfaces gráficas para web. Neste momento - 2010 - já há um reconhecido legado, construído sobre importantes experiências, e também um consenso, em muitos aspectos, ligado ao desenvolvimento, à presença e ação na internet. Apoiado nessas diretrizes este trabalho foi implementado.

Este é um projeto com aplicação de tecnologias híbridas (html, css, javascript, ajax, php e actionscript) onde cada qual será aproveitada em sua melhor especificidade. Muito embora já existam ferramentas integradoras de linguagens e funções, chamadas de "Gerenciadores de Conteúdos" (CMS - Content Management Systems), defini que para este projeto o adequado seria não utilizar este tipo - quase automatizado - de recurso. Optei pela complexa tarefa de começar do zero a construção das estruturas do website para permitir sua melhor customização e adequação aos objetivos de usabilidade, design e linguagem.

Concluindo, a execução deste projeto de transposição das 77 edições do jornal Essência Vital e construção de seu website permitirá, em ambiente digital e de rede mundial, o resgate biográfico e o registro histórico de valor atemporal desta rara publicação e sua missão.

1.2 - QUESTÃO DO PROJETO

Existe um projeto web dedicado ao registro histórico e documentação integral dos conteúdos publicados pelo jornal Essência Vital? Seria válido o desenvolvimento de uma interface web que contemplasse, através de boa usabilidade e novas tecnologias, o acesso e pesquisa de ex-leitores e futuros estudiosos de comunicação ao vasto conteúdo deste pioneiro trabalho? Tendo sido o Essência Vital o primeiro veículo de mídia impressa no Brasil a propor, com independência, humor e ousado projeto gráfico, uma visão de comunicação sistêmica integrando as áreas de ecologia, ciência, política, saúde e espiritualidade, há relevância de seu aporte digital na web?

1.3 - OBJETIVOS

Pesquisar e implementar projeto de design de interface web que comporte a inclusão de todo o conteúdo gráfico e textual dos oito anos de publicação do jornal Essência Vital. O projeto deverá contemplar critérios de permitam sintonia entre a identidade visual do pioneiro projeto impresso e o atual projeto digital de acervo documental. Compondo ainda o objetivo central deste trabalho haverá ênfase no desenvolvimento de mecanismos de direcionamento que facilitem a usabilidade para acesso aos conteúdos do site. Recursos pontuais de animação serão utilizados para essa dinâmica de usabilidade.

1.4 - JUSTIFICATIVA

Registro biográfico e resgate histórico - O projeto para desenvolvimento do website biográfico do jornal Essência Vital possui relevância por tratar-se de registro digital de uma valiosa obra impressa, de vanguarda e que, durante oito anos (1995 - 2003), serviu de referência e incentivo à abertura de visão do mercado editorial para a chegada de outras publicações como, por exemplo, a Revista Vida Simples (2002), Revista Saúde É Vital (2005) e a Revista Bons Fluídos (2006). Embora não existam registros explícitos de reconhecimento dessa influência exercida pelo Essência, tal fato se deduz em função dos muitos anos em que o jornal foi sistematicamente enviado, por mala-direta, aos editores e jornalistas responsáveis pelas principais editoras do pais, muitas delas com as quais o Essência chegou, inclusive, a estabelecer parcerias formais para o recebimento periódico de livros e publicações. Essas sutis conexões de influência também podem ser depreendidas pelo nível de troca que as editoras buscavam manter com o Essência ao ponto, por exemplo, da construção de um acervo - biblioteca - com mais de 3000 obras ofertadas ao jornal no decorrer de sua trajetória. Através de uma página inteira dedicada à seção de livros, cada nova edição do Essência ajudava a divulgar, por resenhas, um

número expressivo de títulos lançados pelas editoras parceiras. Todos os meses o Essência sorteava para seus leitores e assinantes as obras que eram enviadas pelas editoras em maior número de exemplares. O projeto de interface web aqui descrito, em seu processo de pesquisa e execução, possibilita o resgate histórico dessa quixotesca trajetória de um veículo de comunicação solidária e de perfil único por seu projeto gráfico, linguagem integradora e visão sistêmica rara à época de sua edição. Criado por idealistas, o Essência Vital contribuiu durante oito anos para o despertar do senso crítico em milhares de leitores. Referência para estudo e pesquisa: abrangência temática e atemporal A disponibilização na web de todo o conteúdo gráfico e textual produzido pelo Essência Vital pode servir de estudo e incentivo para estudantes e futuros profissionais das áreas de comunicação e design gráfico. Pode auxiliar, através de muitos de seus conteúdos atemporais, um número não mensurável de novos leitores que pesquisem temáticas por ele abordadas com profundidade. Muitos textos, embora escritos há mais de 10 anos tomando como referência o ano 2010 - são perfeitamente adequados ao tempo atual. Muitos conteúdos foram produzidos com essa exata intenção de superar épocas e manterem-se contemporâneos. Alcance e benefício público contínuo - Migrar todo o conteúdo analógico do jornal para o meio digital é uma importante ação no sentido de ampliar, democratizar e revalidar seu propósito de comunicação solidária. Significa ultrapassar os limites territoriais restritos à região de sua publicação e distribuição física à época. Ou seja, tornar seus conteúdos acessíveis para o público de outros estados que não apenas o Rio de Janeiro. Este era um sonho que nunca pôde ser realizado por seus editores em função dos altos custos de impressão e distribuição. Hoje, com melhores ferramentas e padrões mais uniformes para o desenvolvimento web, além do avanço na transmissão de dados, esse vôo sem fronteiras físicas se torna possível e cabível, mesmo tendo o jornal finalizado seu ciclo de edições impressas. Centenas de textos e ilustrações do jornal, produzidos com carinho e exclusividade, por profissionais e voluntários, poderão ser compartilhados em caráter inédito para muitos

novos leitores que ainda irão descobri-los via internet. Deste modo, embora o Essência Vital tenha concluído sua missão impressa, seu website biográfico poderá cumprir com esse outro e relevante objetivo, para além da função de apenas registro e documentação digital de seu acervo, que é beneficiar mais e mais pessoas, a qualquer tempo e lugar em que possa chegar. Ao se ter acesso aos conteúdos publicados pelo Essência Vital se obtém a certeza, se compreende a motivação e se reconhece a relevância deste projeto para sua versão web. Homenagem aos idealizadores e mantenedores do Essência Vital - Não foram poucos aqueles que passaram pela bela e marcante história do Essência Vital, contribuindo para sua elaboração e manutenção. Tampouco, nada fácil torná-lo um projeto real, com milhares de exemplares impressos em papel offset e distribuídos gratuitamente, mês a mês, durante quase uma década. Uma tenaz jornada, que exigiu muitos sacrifícios por parte de seus responsáveis e isso justifica um reconhecimento e homenagem na forma de um belo, moderno e funcional projeto de design para seu website biográfico.

2 - PESQUISA E CONCEITUAÇÃO

2.1 - O PROJETO GRÁFICO E ANALÓGICO DO JORNAL ESSÊNCIA VITAL

2.1.1 - Histórico, conceitos e ambientação sociocultural do jornal A primeira edição do Essência Vital foi publicada em janeiro de 1995, fruto de uma convergência de idéias inspiradas em referências humanistas e de minha parceria com meu jovem colega e jornalista Marcelo Pinto. O Essência Vital nasceu com propósitos claros: promover o despertar de potenciais leitores para questões sociais, ambientais e espirituais. Motivado pela paixão de designer e gestor social, minhas intenções com o Essência eram no sentido de "mudar o mundo", torná-lo melhor transformando pessoas, instruíndo-as com

alimento intelectual de qualidade e poder reflexivo. Havia à época uma espécie de pasmaceira no ambiente sociocultural, quase não existiam novidades no campo das mídias impressas e que pouca ou nenhuma diferença faziam nesse sentido crítico e propositivo. Com exceção das revistas Bundas e Caros Amigos, eminentemente de oposição política ao governo, uma utilizando o viés do humor e a outra o intelectual, não havia nada que integrasse esse aspecto político com outros de igual importância como, por exemplo, meio ambiente, saúde e busca espiritual. Era um período de apatia e falta de efervescência coletiva em busca de novos paradigmas. A sociedade brasileira vivia um tipo de pasteurização política, acostumando-se, aos poucos, à construção e adaptação de um ambiente democrático recém conquistado no país. Eleito ao cargo de presidente da república, Fernando Henrique Cardoso teria pela frente a tarefa de consolidar uma transição ainda muito delicada para o estabelecimento do equilíbrio econômico no Brasil e a vivência plena de um estado de direito democrático para todos. Sua posição no poder seguiu paralela aos exatos oito anos de vida do Essência Vital. Não foi um período fácil, pois a era do Plano Real, implementado por FHC, demandaria muitos sacrifícios à nação.

Figura 01 - Edição n 59 do jornal Essência Vital.

Nesse contexto surge o Essência Vital que não pôde eximir-se de um posicionamento crítico e combativo daquilo que entendia como sendo também importante ser trazido ao questionamento público. Em princípio, o Essência não havia sido planejado com intenções de comunicação e debate político, mas conforme o tempo passava e as situações sociais ao redor demandavam, precisou assumir uma postura ativa neste sentido. O norte editorial do periódico, sua linha guia, sinalizava que o bem-estar coletivo estava/está associado com a compreensão da interdependência existente entre os muitos campos da manifestação

humana. Deste modo, o progresso nas áreas ambiental e espiritual também passam pelo equilíbrio nas questões sociais e políticas. Por esta visão integradora o Essência foi único em sua época, pois propunha à sociedade a busca por este ponto de tensão/equilíbrio entre as questões introspectivas e àquelas que requerem ação enérgica. Eram anos de uma democracia ainda não bem exercida, de muitos escândalos envolvendo corrupção política, desestruturação com sucateamento de estruturas públicas e ganhos econômicos que beneficiavam poderosas empresas do setor privado, etc. Embora democrático, o ambiente ainda sofria compressões que geravam impedimentos no campo das idéias renovadoras. O Essência representava uma espécie de rega na secura dos dias sem brilho, era vital para alimentar o lúdico e o crítico de seus leitores, resgatando-lhes a altivez.

Paralelamente aos embates de ordem política, o Essência pôde enveredar por abordagens relacionadas a temas ainda pouquíssimo debatidos na sociedade da época, como, por exemplo, desenvolvimento sustentável, responsabilidade social, espiritualidade, terceiro setor (ongs), entre outros. Não havia nenhuma outra publicação com essa visão sistêmica e integradora. O Essência, com sua modesta abrangência territorial restrita ao estado do Rio de Janeiro, e com suas limitações de natureza financeira que nunca lhe permitiram uma tiragem acima de 20 mil exemplares mês, ainda assim, deu seu recado e fez seu convite inovador.

2.1.2 - Estrutura e projeto gráfico impresso Durante a década de sua impressão, o Essência Vital pôde atravessar diversas etapas de evolução tecnológica tanto no campo da informática como na área de produção gráfica. Em seu processo de elaboração experienciou a substituição sucessiva de equipamentos. Computadores, softwares, suportes de impressão, mídias, foram febrilmente renovados em decorrência do salto tecnológico proporcionado pela época. As adaptações não eram tão simples, tampouco acessíveis do ponto de vista econômico. Não raro foram às vezes em que houve a necessidade de se adquirir empréstimos que pudessem prover as mudanças. De fotocomposição e impressão laser em folha A3 como matriz para fotolitagem analógica, até

o surgimento do fotolito digital e a moderna gravação direta em chapa, o Essência pôde testemunhar.

O essência foi pensado para durar e seu conteúdo não deveria ser tratado de maneira descartável. Isso foi determinante para uma premissa gráfica: o Essência seria impresso em papel offset. Embora o investimento neste suporte alcalino representasse um investimento bem mais elevado se comparado ao papel jornal à base de pasta bruta, o Essência Vital priorizou a questão da durabilidade/conservação. O papel jornal é muito perecível, gera rapidamente fungos e odores e na maioria das vezes é descartado, ou destinado à reciclagem em seguida a leitura, e os conteúdos do Essência não poderiam estar sujeitos a essa destinação. Essa definição pela melhor qualidade de suporte e impressão permitiu o prolongamento da vida útil do jornal, valorando o caráter atemporal de seu conteúdo e novas oportunidades de compartilhamento e coleção.

Figura 02 - Edição n 65 do jornal Essência Vital. Essa edição esgotou com apenas 5 dias de distribuição e 20 mil exemplares impressos. Precisou ser reeditada no mês seguinte.

O cuidado em se produzir um jornal de conteúdo valioso e transformador, associado a um design gráfico apurado exigia empenho, atualização e estudos periódicos. O projeto gráfico do Essência Vital sempre foi um diferencial, pois não havia similar à época.

É interessante citar que em seu processo de elaboração digital foram utilizadas versões iniciais e muito instáveis de softwares como CorelDRAW e PageMaker, mas isto não foi impedimento à diversidade de composições criativas.

Sempre eram efetuadas pesquisas de observação junto a outras publicações, e disto resultava um refinamento estético progressivo, embora limitado a plataforma de impressão em máquina rotativa. Em função das necessidades constantes de inovação na composição de layouts de novas matérias e dessas dificuldades de impressão em escala, muitos erros gráficos foram cometidos como, por exemplo, o uso de texturas e retículas em fundo de textos, que não eram suportadas pela falta de sensibilidade de impressão das máquinas rotativas aos tons suaves de cinza. Mas o Essência também era um laboratório, portanto havia liberdade para ousar.

No aspecto gráfico o Essência Vital procurava fugir da mesmice, e essa ousadia tinha o preço de algumas perdas. Foram muitas as ocasiões em que imagens bem cuidadas ficavam destruídas após a impressão gráfica. O processo analógico de impressão em rotativa tem dessas "sutilezas". Outros aspectos de aprimoramento do projeto como, por Figuras 03, 04, 05 e 06 - Preto no branco. Um projeto gráfico de expressivo potencial criativo e matérias integradas com linguagem única fizeram do Essência Vital uma iniciativa pioneira, independente e rara de publicação impressa no Brasil.

exemplo, logo, tipografia, entrelinha..., só foram percebidos ao longo das muitas tentativas de melhoria.

Um relevante ponto dentro dessa análise gráfica está relacionado com a escolha pela impressão do Essência em preto e branco. Com exceção de suas duas últimas edições (77 e 76) comemorativas em função da fundação da Ong Essência Vital e da eleição do presidente Luiz Inácio Lula da Silva, todas as demais foram impressas em preto e branco. Essa decisão não estava relacionada apenas com a questão financeira, mas sim com o forte contraste provocado pela composição do preto, do branco e das variações de cinza. Embora menos complexa do ponto de vista gráfico, a impressão em "PB" era mais expressiva e direta ao olhar, estabelecendo uma linguagem de maior confiança para o leitor.

Figura 07 - Todas as edições do jornal Essência Vital, da edição n 00 até a n 77.

Procurei considerar para este projeto de design de interface do website do jornal Essência Vital esse aspecto cromático e de comunicação visual das edições impressas. Busquei uma espécie de fidelidade em sua composição estética com o uso das cores preta, branca e da escala de cinzas. Apenas pontualmente a cor vermelha foi utilizada, por questões de usabilidade, na sinalização do site.

O Essência Vital transitou por quase todas as gráficas do Rio de Janeiro que possuíam um parque gráfico de máquinas rotativas e que realizavam a impressão de jornais em um formato tablóide europeu (29cm x 35cm). Foi na gráfica Folha Dirigida onde o Essência se manteve por mais tempo, e era interessante ver a reação dos próprios impressores. Ninguém fazia uma tiragem de 20.000 exemplares em papel de offset de um jornal gratuito com quase 30 páginas. Isso estava fora da realidade. Contudo, são essas características gráficas que tornaram o Essência Vital um projeto especial e agora digno de sua transposição biográfica para a web.

2.1.3 - Alcance e impacto sobre público-alvo É fato que ao se desenvolver um produto, seja ele qual for, e antes de seu lançamento no mercado, são realizados estudos para definição de seu público-alvo, mas isto não ocorreu com o Essência Vital. Muito embora quase todas as publicações busquem definir seus leitores em função de um determinado segmento de abordagem, o Essência Vital não seguiu esse padrão. A linguagem do Essência era muito eclética para ser enquadrada em moldes e seu objetivo era mesmo o de ação junto a um público heterogêneo. Era comum o feedback de donas de casa, jovens estudantes, altos executivos... Os conteúdos mais leves e humorados alcançavam em cheio jovens, e as matérias mais profundas e espirituais tocavam pessoas adultas, mais críticas e em busca reflexiva. A preocupação do Essência era com a integração, com a síntese e era pensado para todos.

Embora não houvesse a segmentação de público-alvo, foi realizado um plano estratégico para distribuição do Essência Vital à sociedade. A gratuidade do jornal permitia maior flexibilidade de acesso ao público, diferentemente do que ocorria com outras publicações pagas. Foram então definidos locais de grande circulação que permitissem o Essência chegar em mãos heterogêneas. Deste modo, muitos restaurantes, centros culturais, lojas, entre outros, foram prospectados para que distribuíssem o Essência. Uma estratégia perfeita e que permitiu a capilaridade por um circuito até então não explorado por outros veículos. Dentre esses locais, os restaurantes se destacavam pois permitiam que o Essência chegasse a um público muito diversificado. Essa estratégia de distribuição gratuita e em pontos não

convencionais tinha um outro aspecto ainda mais interessante e positivo: acabava com o medo do encalhe. O encalhe de tiragem sempre foi um problema crônico no mercado gráfico, mas isso nunca fez parte da história do Essência Vital. Separados os exemplares de arquivamento, todos os demais eram distribuídos e não havia desperdício.

Em sua trajetória o Essência Vital se desenvolveu de maneira constante, com o progressivo aumento do número de páginas e tiragem. Começou a ser publicado com apenas quatro páginas e chegou em sua última edição com 36. A tiragem sempre esteve relacionada com o número de anunciantes de mês de publicação e por isso, vez por outra eram necessários ajustes naturais para seu aumento ou diminuição. Em média, o Essência Vital publicava entre 10 e 20 mil exemplares mês.

Considerando a vanguarda de sua linguagem integradora, seu projeto gráfico em papel offset, sua tiragem e distribuição mensal gratuita podemos concluir que o jornal Essência Vital, por todas essas particularidades de difícil equação foi, de fato, um raro projeto no campo da comunicação impressa.

A história do Essência Vital é a maior das justificativas para a implementação deste atual projeto de design de interface web e transposição.

2.2 - TRANSPOSIÇÃO DE MÍDIA

2.2.1 - O que é transposição de mídia impressa para mídia digital? A transposição de mídia impressa para mídia digital consiste na captura e transferência de conteúdos de uma realidade tangível para uma de ambiente digital. Consiste na alteração de suporte para um determinado conteúdo. Um veículo impresso se utiliza de papel como suporte, mas se houver a necessidade de inclusão deste mesmo conteúdo impresso em um ambiente web, ele terá de passar por um processo denominado "transposição de mídia".

Isso pode ocorrer com ou sem alterações de formatação, e isso dependerá de cada caso. A transposição do texto impresso para o meio digital coloca em pauta algumas questões relevantes a serem pensadas. Façamos então um aprofundamento no conceito de transposição através das palavras de Ana Elisa Ribeiro (2009), em parte de seu trabalho "Notas sobre o conceito de 'transposição' e suas implicações para os estudos da leitura de jornais on-line".

[..] A transposição tem me seduzido nos estudos do jornalismo na web pelo menos desde 2003, quando li os primeiros debates sobre novos modos de fazer jornalismo. Mielniczuk (2001; 2003; 2004), Silva Jr. (2001a, 2001b); Palácios (2002), Barbosa (2001a), Suzana Barbosa (2001b), Canavilhas (2003; 2006), Arnt (2002), Daltoé (2003), Pereira (2003), Ribas (2004), Franciscato (2004), Schwingel (2005), Moherdaui (2005) e Dalmonte (2007) têm se dedicado à apresentação de “fases”, “etapas” ou “gerações” do jornalismo na web. Pode-se contar, desde as primeiras publicações sobre o tema, uma década de trabalhos e um grupo hegemônico, cuja origem fica bem-expressa na repetição que os pesquisadores fazem de suas leituras. As proposições desses autores tiveram um momento de categorizações e esforços descritivos. Do início dos anos 2000 para cá, não houve muito avanço em nomenclaturas e descrições. As transposições, lembra o Houaiss que elas se relacionam às artes gráficas. Estamos fortemente afiliados ao jornalismo, ao livro, do papel ao ambiente digital. No entanto, o termo, nas artes gráficas, denota um erro, não uma operação de religamento. A transposição de jornais de um suporte para outro, dada a genética da metáfora, tende para que acepção? Para aqueles que consideram os jornais transpositivos uma aberração, problema. Para quem vê nos periódicos transpositivos uma etapa adaptativa, solução. O tema tem rendido muitos trabalhos sobre os “estágios” do jornalismo na web. Ao que parece, a nomeação de “fases” do jornalismo na web é importada, mas ganha adaptações e complementações no Brasil. Palácios (2002), Silva J unior (2001) e Suzana Barbosa (2001b) mencionam Melinda McAdams, no texto “Inventing an online newspaper”, de 1995, como a fonte da expressão “modelo da metáfora” (jornalismo feito com base em “modelos claramente transpositivos, importados de suportes mediáticos anteriores”). Ribas (2004) e Dalmonte (2007) citam John Pavlik (2001), que elenca as fases pelas quais vem passando a produção do jornalismo para web. Mielniczuk (2004) traz Pryor (2002), que propõe a periodização do jornalismo on-line em “ondas” que começam em 1982 (em outros países). Segundo o pesquisador, a terceira onda teria chegado em 2001 e se caracterizaria por produtores mais qualificados, usuários ainda dependentes das organizações tradicionais de notícias em escala global, “proliferação de plataformas móveis”, além da existência de aplicativos

que aumentam as possibilidades de publicação, conexão sem fio e imersão. (PRYOR, 2002 apud MIELNICKZUK, 2004) Canavilhas (2006) apresenta os quatro modelos da periodização de Cabrera Gonzalez (2000): fac-símile, sendo a “[...] reprodução simples de páginas da versão impressa de um jornal, quer através da sua digitalização, quer através de um PDF”; modelo adaptado, em que “[...] os conteúdos ainda são os mesmos das versões escritas [...]”, mas “[...] a informação é apresentada em layout próprio” (e começa a integração dos links); modelo digital, no qual se tem “layout pensado e criado para o meio online” e é obrigatório que exista hipertexto, espaço para comentários e notícias de última hora; modelo multimídia, em que se aproveita o máximo que o ambiente digital oferece (interatividade e hipermídia). (grifo nosso) (RIBEIRO, Ana Elisa. Notas sobre o conceito de 'transposição' e suas implicações para os estudos da leitura de jornais on-line. Em Questão, Porto Alegre, jul./dez. 2009, v. 15, n. 2, p. 15-30)

Com o desenvolvimento computacional e a criação da World Wilde Web, a leitura ultrapassou as dimensões da materialidade impressa alcançando os suportes digitais. Uma nova maneira de acesso a conteúdos textuais e um novo modo de lê-los se fez necessário. Um nova e sedutora relação entre leitor e texto se configuram através dos meios digitais. A linguagem de hipertexto das páginas virtuais da web exigem dinamismo da leitura e a integralidade dos textos impressos perde espaço. As publicações impressas, presas a linearidade textual e a lógica seqüencial, na web, passam para a não-linearidade. É fato, o mundo mudou e novas são as demandas em nossa relação com a comunicação. Muitos impressos não bastam mais em si mesmos para o alcance de seus propósitos, precisam ser transpostos para o meio digital para que tenham vida útil prolongada.

A transposição de obras do meio impresso para o meio digital permite uma maior facilidade de acesso a conteúdos que podem estar distantes fisicamente. No espaço virtual, podemos ler obras completas e com isso observamos que o conhecimento e o acesso à informação não se restringem mais aos embolorados impressos materiais. Em poucos segundo podemos entrar em contato com diversas publicações, de diferentes características e em diferentes partes do mundo. Um acervo digital ocupa um espaço de armazenamento insignificante, comparado ao de um acervo de materiais impressos. Sendo assim, a transposição de mídia impressa para mídia digital é um processo que a cada dia se torna mais necessário e usual para a perpetuação de conteúdos, composição de acervos e acessibilidade.

2.2.2 - Importância da transposição para esse projeto Durante oito anos o Jornal Essência Vital foi referência impressa de leitura com a transferência de informações e conhecimentos transformadores para milhares de pessoas no Rio de Janeiro. Contudo, por mais tenazes os esforços, as naturais limitações de tiragem e distribuição nunca lhe permitiram ultrapassar as fronteira territoriais de seu estado de origem. Após terem cessado suas edições impressas, com a internet o seu espírito pode ser resgatado e seu acervo disponibilizado, agora sem fronteiras, para um número maior de leitores. A transposição do Essência Vital configura-se em um valioso resgate de seus conteúdos de caráter atemporal, que poderão servir de incentivo e estudo para outros públicos e, quem sabe, motivação para o surgimento de outros projetos semelhantes baseados na independência e no sentido de comunicação solidária.

Do ponto de vista técnico é importante buscarmos maior entendimento sobre a história do aporte de conteúdos que originariamente pertenciam ao campo da mídia impressa e que, aos poucos, migraram para a web em função de seu potencial. Entender esse processo que a cada dia se aperfeiçoa ao ponto da simultaneidade de publicação impressa e transposição para o universo digital web nos ajuda na compreensão e justificativa deste projeto do website do Jornal Essência Vital.

A jornalista Andreza Lima (2010), em seu Blog "CoNeCtAdA", resume de maneira interessante e assertiva as fases históricas que demarcam a evolução e entendimento dos processos de aporte e transposição de mídia de impressos para o meio web.

O mundo evoluiu e com ele os meios de comunicação. A falta de tempo na sociedade moderna exige um veículo de comunicação cada vez mais ágil, completo, barato e nem por isso com menos qualidade e credibilidade. Mas como fazer uma leitura rápida, tendo em mãos jornais com textos extensos, cansativos, além da perda de tempo até uma banca? Daí surge a importância da internet. Noticias instantâneas, do mundo todo independente do local onde o leitor esteja . Essa fase de mudança do meio impresso para a web se deu em três fases. A Primeira fase se baseava no conhecido "Ctrl C, Ctrl V", ou seja, copia pura e simples das páginas do impresso para as páginas da web.

O pioneiro desta fase foi o Jornal do Brasil em 1995. Hoje o JB já se modernizou, mas ainda é possível encontrar exemplos de Jornais que estão presos ao passado. A Segunda fase se deu a partir do momento em que os Jornalista perceberam a necessidade de novas notícias, da atualização dos fatos, da instantaneidade. A utilização de hiperlinks, de novas ferramentas marcaram esse período de transposição,que ainda é utilizado nos dias atuais por vários jornais. O uso do Jornalismo colaborativo, de uma maior interação é um dos fatores que mais marca a Terceira fase. Com uma Linguagem voltada para o Mundo On Line, com textos mais curtos e com maior participação dos internautas os jornais estão conseguindo prender cada vez mais seus leitores. Os Próximos passos ainda estão por vim, mas tudo indica que a caminhada será longa. (grifo nosso) (LIMA, ANDREZA. 04/03/2009. Fases de Transposição da Mídia Impressa para On Line. http://andrezalimajornalista.blogspot.com/2009/03/fases-de-transposicao-damidia-impressa.html - Acesso em 05/05/2010.)

Outra valiosa abordagem que detalha quatro importantes características diferenciadoras no ambiente web e ressalta os desdobramentos positivos do aproveitamento de conteúdos jornalísticos nele inseridos pode ser lida no artigo "Do impresso ao digital: a influência da variação de suporte na compreensão de textos jornalísticos sobre responsabilidade social empresarial", de Maria Amélia Cunha de Souto Maior (2005), mestra em Lingüística e Especialista em Administração de Marketing pela Universidade Federal de Pernambuco.

[...] Podemos dizer, que alguns aspectos diferenciadores da mídia digital estão associados a sua não-linearidade, a sua instantaneidade, a sua interatividade e a sua acessibilidade. No tocante a não-lineraridade da informação on-line se faz necessário lembrar que a mesma é constituída hipertextualmente, ou seja, o leitor não segue a uma orientação “rígida” da esquerda para direita, de cima para baixo e sim, pulando entre páginas intermediárias a partir de seu interesse. Na realidade, o hipertexto é constituído exatamente de forma natural ao processar a informação, lembrando um pouco do funcionamento da mente do homem, que processa as informações recebidas através de associações de idéias de forma não-linear. Por sua vez, a instantaneidade é percebida quando nos deparamos com a rapidez da informação diante de fato ocorrido no momento [...].

No que diz respeito à interatividade, podemos perceber que no jornalismo existente na mídia tradicional há em sua grande maioria, uma interação unilateral, ou seja, leitor tem a opção de selecionar o que irá ler, ouvir ou assistir sem poder participar da construção da informação. Já na mídia digital, o leitor já se insere com outro tipo de expectativa de interação, seja na participação de grupos de discussão, emails eletrônicos, entrevista on-line através de chat. Dentro dessa premissa, Pinho (2003,p.54) destaca que “o conteúdo on-line que não ofereça um padrão mínimo de interação tem pouco valor para o usuário e inibe a compreensão da mensagem”. E finalmente a acessibilidade, podemos assim dizer, que é o grande instrumento diferencial das outras mídias pautadas pela informação jornalística. Já que está disposta em tempo real a qualquer hora e dia. Como também, seu caráter acessível permite ao navegador a busca de dados complementares do assunto que lhe interessa através da notícia hipertextualmente construída. (grifo nosso) (MAIOR, M. A. C. S. (Discente-Autor /Mestre Acadêmico), 2005. DO IMPRESSO AO DIGITAL: A INFLUÊNCIA DA VARIAÇÃO DE SUPORTE NA COMPREENSÃO DE TEXTOS JORNALÍSTICOS SOBRE RESPONSABILIDADE SOCIAL EMPRESARIAL. I Encontro Nacional Sobre Hipertexto: Desafios Lingüísticos, Literários e Pedagógicos. I Encontro Nacional Sobre Hipertexto: Desafios Lingüísticos, Literários e Pedagógicos, 1, ISBN: Português, Hipertexto.)

Ainda que em um primeiro momento não se ambicione no projeto do website do Jornal Essência Vital o alcance pleno e sinérgico de todas essas quatro poderosas características facultadas pelo ambiente digital que são: não-linearilidade, instantaneidade, interatividade e acessibilidade, ainda assim é coerente citá-las como justificativas fortalecedoras do processo de transposição. Em maior ou menor grau, em um momento ou outro, essas características servirão como instrumentos de articulação para apresentação dos conteúdos do jornal e alcance de público. Neste posto de minha pesquisa e narrativa, uma particular análise sobre o poder do hipertexto se faz de extrema relevância para o correto entendimento do valor de adesão a um modelo digital de conteúdos hipertextuais. A seguir, destacamos do texto "Hipertexto na Educação", de Carvalho (2010), uma didática explicação sobre hipertexto e suas principais características.

[...] Concebido em 1945 por Vannevar Bush e batizado com o nome de hipertexto em 1965 por Ted Nelson, a lógica não linear de apresentação e composição das informações deram ao mundo uma nova forma de interface com a comunicação. O Hipertexto é uma forma de organização não-linear de informação que "permite situar assuntos distintos inter-relacionados em diferentes níveis de aprofundamento, proporcionando a personalização do processo de ensino-aprendizagem e permitindo ao usuário trabalhar em seu próprio ritmo, nível e estilo, adequando às suas características e interesses" (Bugay & Ulbricht apud Martin, 1992). A idéia de hipertexto nasce da investigação sobre o funcionamento da mente humana onde as interpretações são construídas por associações formando uma rede intrincada. Bush pensou num mecanismo que utiliza o mesmo processo de acesso aleatório à memória para permitir a consulta de dados de uma forma rápida e flexível. Para alguns estudiosos, o hipertexto é uma estrutura interativa de apresentação que possui três componentes principais: uma base de dados textual; uma rede semântica entre diferentes unidades temáticas e ferramentas informáticas. Sua navegação é baseada em elementos gráficos conhecidos por ícones, que interligam-se à base de dados, à rede semântica e às unidades temáticas através de um mecanismo conhecido por link. Segundo Lévy (1993), o hipertexto possui seis princípios abstratos que permitem preservar as múltiplas interpretações do modelo de hipertexto: 1) O princípio da metamorfose - a rede está em constante construção e renegociação com todos os elementos que a compões, sejam eles humanos ou objetos midiáticos; 2) O principio da heterogeneidade - os elementos de conexão são heterogêneos. Permiti colocar "em jogo pessoas, grupos, artefatos, forças naturais de todos os tamanhos, com todos os tipos de associações que pudermos imaginar" entre eles; 3) O princípio da multiplicidade e de encaixe de escalas - coloca a capacidade de organização de forma fractal. Qualquer nó ou conexão pode se analisado como parte de toda uma rede; 4) O princípio de exterioridade - seu universo depende de um exterior indeterminado. Seu crescimento e diminuição dependem de novos elementos externos à ele; 5) O princípio de topologia - "A rede não está no espaço, ela é o espaço". Tudo funciona por proximidade; 6) O princípio de mobilidade dos centros - A rede possui diversos centros saltando de um nó a outro. Não existe um centro único. A navegabilidade de um ambiente hipertextual corresponde a facilidade do usuário em encontrar a informação. Esta deve estar disponível em forma de páginas ligadas por links e deve ser intuitiva, permitindo o usuário fácil localização da informação. (CARVALHO, K. B. Hipertexto na Educação. Kassandra Brito de Carvalho. www.pedagobrasil.com.br - Acessado em 27/05/2010)

A seguir efetuo uma detalhada pesquisa e análise comparativas das principais ferramentas utilizadas na web - por empresas do setor gráfico - para transposição de mídia. Constato, por exemplo, que se por um lado existem ferramentas poderosas que possibilitam a quase "instantaneidade" de transposição, por outro, de modo algum anulam as necessidades de inserção no ambiente web de conteúdos, em linguagem de hipertexto, que permitam acessibilidade e indexação adequada aos mecanismos de busca na internet. Essa análise engloba, em sua parte final, um estudo comparativo de websites similares para o reconhecimento e compreensão de padrões de interface, usabilidade e políticas de acessibilidade. Da comparação entre esses padrões pude definir aqueles a serem adotados neste projeto de website Essência Vital.

2.2.3 - Do analógico ao digital Durante meu processo de pesquisa sobre transposição de mídia impressa para web, ou seja, do analógico ao digital, o foco foi direcionado à observação dos jornais e revistas que já transitam conteúdos entre os dois universos, constroem e disponibilizam seus acervos e executam com êxito esse processo. Verificar quais caminhos foram escolhidos por essas publicações para a execução da transposição do conteúdo analógico para o digital, como isso é acessado e apresentado ao usuário web e quais as tecnologias utilizadas nesse trabalho também foram questões relevantes à nossa pesquisa e, portanto, descritas e ilustradas aqui.

Entretanto, em função da necessidade de uma análise um pouco mais aprofundada e que permitisse uma visão panorâmica sobre os fluxos gerais de transposição de mídia para a internet, acrescentei ao estudo exemplos de algumas publicações mais simples no que se refere a público-alvo, porte e recursos econômicos. Desta pesquisa comparativa extraí boa parte da síntese conceitual para a construção da interface web do Jornal Essência Vital, bem como defini qual das tecnologias adotar para a transposição do conteúdo analógico para o meio digital. As escolhas daqueles que já percorreram essa trajetória relacionada com o trabalho de transposição foi de grande valia, servindo de reflexão e guia para minha busca por assertividade neste projeto.

A incursão pela web relevou que existem cinco principais empresas (quatro no Brasil e uma nos EUA) que oferecem uma plataforma com tecnologia flash - poderosa ferramenta para construções e animações web - que permite a transposição de conteúdo para a Internet mantendo similaridade com as versões impressas. Essas plataformas ofertam uma solução muito interessante, em forma de animação e com o uso de vários recursos interativos. As cinco soluções ofertadas pelas empresas são muito parecidas, mas apresentam variações em função das necessidades dos clientes e tipo de transposição. Essas plataformas tornaram-se uma solução unânime na web, diferenciando-se apenas pela implementação e customização de alguns recursos.

Mais uma vez é importante ressaltar que essas plataformas, baseadas em tecnologia flash, não invalidam a necessidade de disponibilização de conteúdo em formato de linguagem html na web. As soluções via animação simplificam a navegação tornando-a, sem dúvida, mais atraente e prática. Contudo, dependendo da plataforma utilizada, os conteúdos não são passíveis de indexação pelos sistemas de varredura e busca na web. Neste sentido é evidente a importância dos conteúdos transpostos também para uma versão html.

As plataformas com tecnologia flash usam um sistema de flipagem (simulação de folheamento) das páginas dos periódicos digitalizados. Ou seja, o usuário web tem uma experiência similar ao de estar folheando as páginas da versão impressa, um recurso bem interessante que acentua a experiência de usabilidade e interação humano-computacional (IHC). Este processo ocorre ao se clicar no canto superior, médio ou inferior da página visualizada. A animação gerada simula o mesmo processo de dobra de uma página impressa.

Dentre as plataformas pesquisadas mencionarei neste trabalho cinco que foram definidas como principais utilizadas por publicações brasileiras, são elas: Plipo, VirtualPaper Web, IdeaValley, DigitalPaper e ISSUU. Com isso, estarei simultaneamente avaliando algumas publicações do ponto de vista da usabilidade, compreendendo suas diferenças de trato com o usuário e refletindo com a opinião de alguns profissionais que vivenciaram ou vivenciam essa questão da transposição de mídia. Deste conjunto de avaliações extraio e justifico minha preferência por um determinado sistema de flipagem.

Outro importante ponto nesta análise comparativa é o modo como esses conteúdos transpostos são ofertados ao público web. Algumas publicações limitam o acesso aos seus conteúdos em função de cobranças de ordem financeira, outros disponibilizam de maneira gratuita e democrática todos os seus acervos. Essa é uma questão que pede reflexão e expõe dois lados no uso da World Wide Web: um, de grande compreensão sobre o significado de compartilhamento na grande rede, outro, de ignorância mercantilista. Nesse campo da transposição dos conteúdos analógicos para os meios digitais muitas publicações tentam fazer ganhos comerciais agressivos, enquanto outras pensam em democratizar os conhecimentos e torná-los livres ao acesso público. Disto extraio outra conclusão para a execução deste projeto web para o jornal Essência Vital, a de que seu conteúdo transposto será totalmente aberto, isento de quaisquer tipos de cobrança ao usuário.

FLIPO - Comecemos nossa análise pela tecnologia Flipo, uma plataforma comercializada pela Brasil Multimídia, uma empresa do setor de tecnologia internet, design e multimídia. O Flipo é uma plataforma de apresentação de publicações impressas em meio digital e Figura 08 - Site da Brasil Multimídia que comercializa o FLIPO. (http://www.brasilmultimidia.com.br/ - Acesso em 02/03/2010)

com ele é possível ler no computador, de forma amigável e natural, revistas, folhetos, relatórios, manuais, livros, álbum de fotos, jornais entre outros. Por meio da solução Flipo, as informações são apresentadas da mesma maneira que quando impressas, simulando o folhear natural das páginas. São características funcionais do Flipo: dispensa a instalação

Figura 09 - Site do FLIPO com orientações sobre a plataforma. (http://www.flipo.com.br/ - Acesso em 02/03/2010)

de software específico para possibilitar a

leitura; não necessita de download na máquina do leitor; traz recursos de controle de acesso e busca por palavrachave; facilita a leitura através de textos de ajuda e atalho direto à página desejada e possibilita a ampliação ou impressão das informações apresentadas na tela. Figura 10 - Case BASF, onde o FLIPO é usado para manuais. (http://www.flipo.com.br/casos/basf/index.htm - Acesso em 02/03/2010)

A plataforma Flipo ainda não possui um grande portfolio de clientes que realizaram transposição de mídia impressa para web, o que se deve ao fato de já existirem outras empresas que oferecem tecnologia semelhante há mais tempo no mercado. Contudo, o Flipo é uma solução customizada e ideal para pequenas e médias demandas de publicações que não

Figura 11 - Case Plásticos em Revista. FLIPO para versão digital. (http://www.definicao.com.br/revistas/flipo/index_.htm?r=plasticos Acesso em 02/03/2010)

requeiram níveis mais apurados de interação.

VirtualPaper - O sistema Virtual Paper Reader Web 2.0, da empresa VirtualPaper Tecnologia para Documentos Eletrônicos Ltda, é uma plataforma automatizada que permite publicar e distribuir documentos eletrônicos on-line, uma tecnologia inovadora. O sistema representa uma interessante e prática solução no que se refere a transposição de mídia impressa para o ambiente virtual, e oferece diversos recursos para navegação e acesso do usuário ao conteúdo digital. As ferramentas de navegação são bem dispostas na interface, claras, acessíveis e funcionais. O recurso de sumário (ver figura 12), que pode ser acionado a qualquer momento no canto esquerdo oferece dinâmica ainda maior de navegação pelo conteúdo da publicação. No topo da interface temos um menu de acesso às

edições, pesquisa de conteúdo, zoom, impressão, leitura apenas de texto sem imagem, botão para indicação do site a amigos, tela cheia, on/off de som e navegação entre páginas.

Figura 12 - Plataforma VirtualPaper aplicada ao Jornal Correio do Sul. (http://www.bancadigital.com.br/correiodosul/reader2/ - Acesso em 02/03/2010)

Na figura 07 podemos observar a tecnologia VirtualPaper aplicada ao jornal Correio do Sul, um bom exemplo de busca por solução integrada. O jornal apresenta uma interessante solução de transposição de conteúdo integral, atualizado e disponível através do moderno sistema de animação por flipagem da plataforma VirtualPaper.

O conteúdo do site do jornal Correio do Sul não está restrito a assinantes e apresenta duas possibilidades de acesso. A primeira forma de acesso é através das matérias inseridas no próprio site que usa Figura 13 - Site do Jornal Correio do Sul. (http://www.correiodosul.net/ - Acesso em 02/03/2010)

a linguagem html, e a segunda é através da plataforma VirtualPaper.

Embora esse duplo acesso sugira uma boa prática de acessibilidade, neste caso ela não está sendo bem aproveitada em função de problemas na interface deste site. A navegação convencional, via html, não é clara e os conteúdos das sessões do jornal são defasados. Os conteúdos disponíveis na home também não são atualizados em tempo real e a estruturação do layout é composta por um excessivo número de colunas (seis).

Neste exemplo do jornal Correio do Sul a plataforma VirtualPaper se mostra muito eficiente, atenuando deficiências de manutenção e atualização dos conteúdos dinâmicos do site. Ela também permite a inclusão do conjunto de edições anteriores do Jornal e a pesquisa ao acervo dessas versões digitalizadas.

O site Paper4 Web, ligado a empresa VirtualPaper Tecnologia para Documentos Eletrônicos Ltda, oferece gratuitamente o uso do sistema VirtualPaper e o número de atuais usuários é expressivo. Contudo, o uso gratuito implica na hospedagem dos conteúdos nos servidores da Paper4Web e a vinculação dos mesmos com Figura 14 - Site da VirtualPaper. (http://www.virtualpaper.com.br/ - Acesso em 02/03/2010)

propagandas diversas. O uso gratuito também está vetado, por contrato, a

instituições que possuam CNPJ. O sistema VirtualPaper pago permite o uso da tecnologia sem vinculação de propagandas gratuitas. A plataforma gratuita da VirtualPaper pode se mostrar bastante útil à publicação de materiais como: catálogos, folders, currículos, ilustrações, quadrinhos,manuais, guias, tutoriais, ensaios, teses e pequenos jornais. Todavia, é preciso estar atento a necessidade de preenchimento de um cadastro e a concordância com um contrato de uso do serviço.

Transcrevemos a seguir um pequena parte do contrato proposto pelo site Paper4Web e que ilustra o serviço gratuito e finalidade da tecnologia VirtualPaper para transposição.

[...] Termos de uso em razão da LEI Nº 9.610, DE 19 DE FEVEREIRO DE 1998, que regula os direitos autorais, leia cuidadosamente este contrato antes de se cadastrar. Paper4web é um serviço on-line que permite publicar, compartilhar e distribuir documentos na Internet a partir de um endereço eletrônico, reproduzindo a cópia eletrônica dos documentos compartilhados. Este contrato assinado ou confirmado eletronicamente concede ao USUÁRIO o direito de postar seus documentos, que ficarão armazenados nos servidores do PAPER4WEB, para tanto se faz necessária a assinatura do presente contrato, onde são esclarecidas as condições do serviço. Celebram o presente contrato, o site PAPER4WEB e a pessoa física ou jurídica identificada no cadastramento, doravante denominado simplesmente USUÁRIO, conforme as condições e cláusulas abaixo identificadas: 1. A prestação de serviços do site PAPER4WEB consiste em disponibilizar em meio digital a transmissão de documentos, postados pelos USUÁRIOS cadastrados, armazenados nos servidores da PAPER4WEB. 2. Após a publicação dos documentos, pelo autor, os principais site de pesquisa da Internet farão a indexação de cada documento publicado. Tornando-o acessível em toda a rede. 3. Os documentos publicados estarão sujeitos a comentários e avaliações pelos outros autores do sitio. 4. Os comentários e avaliações poderão ser moderados e alterados por moderadores do serviço sem aviso prévio. 5. PAPER4WEB poderá usar e divulgar o conteúdo postado pelo autor no site www.paper4web.com em outros sites, blogs, e portfólio online, bem como material publicitário impresso, anúncios em Jornais, rádio, televisão, internet e todos os sites da empresa [...]. 6. PAPER4WEB poderá inserir, nos documentos, links publicitários de sites da Internet. [...] 15. É terminantemente vedado ao USUÁRIO: c) Usar o site para fins comerciais; d) vincular instituição com cnpj. [...] (grifo nosso) (PAPER4WEB. Termo de Uso. http://www.paper4web.com/beta/Join.aspx Acesso em 02/03/2010)

Figura 15 - Interface de inscrição no site Paper4Web para uso gratuito do VirtualPaper. (http://www.paper4web.com/beta/Join.aspx - Acesso em 02/03/2010)

Fazendo uso pago da plataforma VirtualPaper estão algumas publicações de perfil profissional, sinalizando o bom desempenho desse sistema para a transposição. Abaixo, algumas interfaces VirtualPaper utilizadas por essas publicações.

Figuras 16, 17, 18, 19, 20 e 21 - Interfaces da plataforma VirtualPaper aplicada à revista Joyce Pascowitch. (http://www.bancadigital.com.br/glamurama/jp/reader2/ - Acesso em 02/03/2010)

Na interface web da revista Joyce Pascowitch apresentada acima, o sistema de visualização e flipagem (passagem) de páginas ocorre "do mesmo modo" que a leitura da versão impressa e é bastante confortável. Além disso a opção de navegação através de sumário se mostra muito prática.

A interface a seguir é da tecnologia aplicada a publicações e cartilhas do Programa Nacional de Enfrentamento da Violência Sexual contra Crianças e Adolescentes, da Secretaria Especial de Direitos Humanos, e ligada à Presidência da República, Governo Federal. (http://www.presidencia.gov.br/estrutura_presidencia/sedh/spdca/exploracao__sexual/pub licacoes/ - Acesso em 03/03/2010)

Figuras 22 e 23 - Cartilhas e publicações do Governo Federal. (http://www.bancadigital.com.br/sedh/reader2/?pID=1 e http://www.bancadigital.com.br/sedh/reader2/?pID=4 - Acesso em 03/03/2010)

Abaixo, a interface em destaque do jornal Onda Carioca.

Figura 24 - Interface da plataforma VirtualPaper aplicada na transposição do jornal Onda Carioca. (http://www.bancadigital.com.br/ondacarioca/reader2/ - Acesso em 03/03/2010)

A plataforma VirtualPaper apresenta-se como boa alternativa a ser adotada para aplicação em nosso projeto de website do jornal Essência Vital. Entretanto, a pesquisa pode ser aprofundada, pois não chegamos naquelas que seriam as ferramentas utilizadas pelos grande veículos de publicação impressa, e ainda se faz necessário entender como lidam com o processo de transposição e de que modo o apresentam ao público web. Desse expertise podemos extrair uma visão ainda mais refilada sobre o assunto.

No Rio de Janeiro, o número de publicações impressas convertidas para meio digital ainda é tímido, se comparado a São Paulo, como observado através do site "Banca Digital" que oferece uma proposta de veiculação e convergência de publicações que usam a tecnologia VirtualPaper. O site disponibiliza uma sistema de busca por tipo de publicação e estado. (http://www.bancadigital.com.br - Acesso em 03/03/2010)

Figura 25 - Website da Banca Digital (http://www.bancadigital.com.br - Acesso em 03/03/2010)

Com foco na busca de publicações no estado do Rio de Janeiro, constatei o cadastro de apenas 7 jornais, mas ao escolher, por exemplo, o estado de São Paulo, esse número salta para 42 publicações. Essa estatística refere-se apenas as publicações no formato jornal. Além

da discrepância entre os números que assinalam a grande diferença entre os mercados editoriais do Rio de Janeiro e São Paulo, o fato também sugere um provável déficit no processo de transposição das mídias impressas para os meios digitais. Isso se torna evidente quando a busca é direcionada para "revistas". Neste site Banca Digital o Rio de Janeiro marca 0 publicações, enquanto São Paulo revela 30. Outro fator de análise é que são raras as publicações de grande projeção e distribuição nacional que se permitem agrupar. No site Banca Digital a maioria das publicações são regionais e de conhecimento público restrito aos seus meios de circulação impressa.

Todas as grandes empresas do setor de publicações gráficas, ligadas à comunicação, estão na web e são as pioneiras no processo de transposição de mídia impressa para mídia digital. Entretanto, muitas ainda não disponibilizam seus acervos integrais, e o que é pior, cobram pelo acesso aos conteúdos disponíveis na internet. Os jornais e revistas de grande porte apresentam maior dinamismo na atualização de conteúdos on-line e fazem uso de tecnologias digitais de transposição customizadas para suas demandas, mas a maioria cobra pelo acesso aos seus conteúdos digitais e os limitam aos seus assinantes. Essa questão da cobrança não é bem vista na web e também é alvo de nossa análise com vistas ao desenvolvimento do projeto de interface e transposição do Jornal Essência Vital.

Embora datada do ano 2007, mas de sentido bem atual, a matéria "Jornais gratuitos na rede", de Renato Cruz, e publicada no site do Jornal Estadão, apresenta a seguinte análise:

O Wall Street Journal é apontado com um dos poucos casos de sucesso na venda de conteúdo na internet. A assinatura da versão eletrônica custa US$ 99 ao ano. Seu novo dono, Rupert Murdoch, da News Corp., estuda acabar com a cobrança, segundo a Reuters (em inglês). Ontem (17/9), o New York Times anunciou que deixará de cobrar por sua seção especial de colunistas, chamada TimesSelect. Há 10 anos, era comum as empresas tradicionais de comunicação se preocuparem com a canibalização do impresso pela internet. Por isso, muitas partiram para a cobrança de assinatura, mais como uma forma de proteger os produtos existentes do que uma maneira de ganhar dinheiro. O que acontece hoje é que, ao manter o esquema antigo, as empresas acabam sacrificando sua presença num mercado em ascensão para proteger o produto que está em declínio. Jornal

é hábito e, se há 10 anos os adolescentes não liam o impresso, o que existe atualmente são pessoas a caminho dos 30 anos que nunca se acostumaram ao papel, e que acabam sem acesso à versão eletrônica do impresso porque ela é fechada. A assinatura do jornal em papel cobre os custos de impressão e distribuição. Como na internet não existem custos de impressão e distribuição, não existe justificativa financeira para cobrar assinatura. Assim como acontece no impresso, o negócio na internet é vender anúncios, que são cobrados de acordo com o tamanho da audiência. A venda de assinaturas restringe o tamanho da audiência na internet e, dessa forma, restringe o faturamento com a publicidade.[...] (grifo nosso) (CRUZ, Renato. Jornais Gratuitos na Rede. Disponível em: <http://blogs.estadao.com.br/renato-cruz/jornais-gratuitos-narede/> Acesso em: 14 mar. 2010.)

Até hoje (2010), o Wall Street Journal continua cobrando por sua assinatura digital, e agora custa US$ 1.99 por semana, o equivalente a US$ 107.00 por ano. Deste modo, embora haja a transposição do conteúdo impresso para web, o acesso continua restrito a assinantes. Ao acessarmos o site podemos observar um pequeno ícone em forma de chave ao lado dos títulos de cada matéria, significando que o conteúdo integral só é acessível aos assinantes.

Figura 26 - Interface do The Wall Street Journal que surge ao tentarmos ler alguma matéria sem sermos assinantes. (https://order.wsj.com/sub/f3 - Acesso em 07/03/2010)

O jornal O Globo (Rio de Janeiro) é exemplo de publicação impressa de grande circulação que já disponibiliza integralmente seu conteúdo on-line. O trabalho de transposição do conteúdo impresso é diário mas, infelizmente, seu acesso só está disponível para assinantes e por um valor muito elevado se comparado, por exemplo, ao próprio The Wall Street Journal, citado no parágrafo anterior. A assinatura do jornal Globo Digital custa por mês R$ 35,90, o equivalente a R$ 430,80 por ano, duas vezes mais que o Wall Street Journal. Isso reflete uma política bastante restritiva e comercialmente equivocada diante de um veículo de inclusão e proposta democrática como é a Internet. Figura 27 - Interface de O Globo que surge ao tentarmos ler alguma matéria sem sermos assinantes. (https://seguro2.oglobo.com.br/cadastro/digital /default.asp - Acesso em 07/03/2010)

Figura 28 - Interface de O Globo com animação que exemplifica a navegação e acesso para quem se tornar assinante. (https://seguro2.oglobo.com.br/cadastro/digital/ default.asp - Acesso em 07/03/2010)

O Jornal do Brasil, do Rio de Janeiro, pioneiro na Internet no que se refere a transposição de mídia, também adota uma tecnologia (empresa IdeaValley) de acesso aos conteúdos de sua versão digital que se utiliza de flipagem para navegação. Contudo, diferentemente do modo como procede o jornal O Globo, a versão digital do Jornal do Brasil é colocada gratuitamente

disponível ao público não assinante, requerendo apenas um cadastro virtual. Sem o cadastro é possível visualizar o sistema de flipagem e navegar entre as páginas transpostas, mas as ferramentas que permitem a leitura do conteúdo só se tornam habilitadas após cadastro no site. O mesmo ocorre com os conteúdos das revistas e cadernos associados ao jornal.

Figura 29 - Interface da plataforma Flip da empresa IdeaValley utilizada pelo Jornal do Brasil. (http://jb.ideavalley.com.br/flip/ - Acesso em 14/03/2010)

O site JB Online também disponibiliza todo o conteúdo diário de sua versão impressa em um formato de visualização em linguagem HTML (hipertextual), com possibilidade de procura por título de matéria. Além disso o Jornal do Brasil oferece um grande acervo de conteúdos das

Figura 30 - Todas as matérias do Jornal do Brasil também são disponibilizadas em html. (http://jbonline.terra.com.br/leiajb/indice.asp - Acesso em 14/03/2010)

edições anteriores, mas só podem ser acessados por assinantes do jornal impresso.

Figuras 31 e 32 - Interface da plataforma flip, da IdeaValley, para a revista JB Ecol贸gico. (http://jb.ideavalley.com.br/flip/index.php?idEdicao=bf35ada20fe94656b8d92b6f3b025d69&idCaderno=5e3d77eb4178d1eeff2ba98b1b1aedbd - Acesso em 14/03/2010)

Além de pioneiro, esse trabalho de transposição de mídia efetuado pelo Jornal do Brasil representa um avanço e acumula uma espécie de maturidade e maior compreensão do universo digital na web, pois adota uma política mais flexível de acesso a conteúdos. Com a intenção de ilustrar esse pioneirismo do JB na web brasileira, cabe inserir neste trabalho um raro depoimento daquele que iniciou esse processo, o jornalista Sérgio Charlab. Em 1993, a internet ainda era promessa, mas Sérgio já se dedicava a explorar o potencial da rede e se permitia explicar aos usuários como usar ferramentas básicas como, por exemplo, o e-mail. Como editor de projetos especiais do Jornal do Brasil ele então foi responsável pela criação do primeiro jornal da web, o JB Online. Embora rudimentares, as inserções e transferências de conteúdos do JB impresso para a web inauguraram uma nova etapa de possibilidades para a comunicação. Vejamos o que narra o próprio Sérgio Charlab (2001):

Em maio de 1995 o site do JB Online foi criado oficialmente, mas eu acesso a internet desde 1993. Não foi só cedo como um todo, mas cedo demais para um jornalista. Eu me apaixonei pelas potencialidades da internet naquela época. No final de 1994, eu já estava obcecado com a idéia de colocar conteúdo jornalístico na internet. Em novembro, comecei a preparar versões informais do Jornal do Brasil na internet. Nesta época eu já sabia fazer as páginas. Em fevereiro de 1995, anunciei numa lista de discussão [...] Mas tudo era informal porque ninguém entendia o que eu estava fazendo. Logo, eles não podiam me autorizar a fazer uma coisa que não entendiam o que era e nem conseguiam ver. Finalmente depois de muita luta, em maio de 1995 eu coloquei na minha sala o presidente do jornal, o vice presidente de marketing e o editor. Os três olharam para aquele monitor ruim, preto e branco, que estava lá, entenderam o que era e o site virou oficialmente o JB Online. [...] No Jornal do Brasil, eu era editor de projetos especiais. Como qualquer jornalista você tenta juntar o que está vivendo com uma idéia de pauta. Uma coisa que funcionou bem na época, e depois virou um livro, foi uma série que a gente chamou de "Revolução da Informação", que eu escrevi junto com um americano que eu não conheço até hoje, o Willian Osner, e que eu encontrei na internet. Foi uma série que a gente publicou por 10 semanas e que fez sucesso junto aos leitores porque na época não tinha literatura sobre isso e a gente estava literalmente dizendo o que estava acontecendo: olha, tá mudando tudo, tem um negócio chamado internet. [...] (ROCHA, Geiza. Entrevista com Sérgio Charlab. Disponível em: <http://www.jornalistasdaweb.com.br/> Acesso em: 15 mar. 2010.)

Os jornais Folha de S. Paulo e O Estado de S. Paulo, assim como O Globo, também comercializam o acesso ao seus respectivos conteúdos digitais. Eles fazem uso de uma poderosa plataforma chamada Digital Pages, para a convergência entre publicação impressa e meio digital. A plataforma é uma versão sofisticada de outras ferramentas que seguem a tendência/modelo de navegação por flipagem de páginas. Esta é a plataforma escolhida das grandes corporações de mídia impressa como, por exemplo, a Editora Abril e a Editora Globo. O sistema vem sendo aprimorado desde 2001 e a cada ano incorporando novas funcionalidades para melhor adequação dos processos de transposição.

Figura 33 - Interface do site da empresa Digital Pages, que fornece a plataforma customizada para o jornal Folha de S. Paulo. (http://digitalpages.com.br - Acesso 15/03/2010)

Figuras 34 e 35 - Interface Digital Pages para o jornal O Estado de S. Paulo, em seguida a tela para tornar-se assinante dos conteúdos. (http://digital.estadao.com.br/home.asp?modo=degustacao - Acesso em 15/03/2010)

Figura 36 - Site da Digital Pages com seu portfolio de clientes.

Figura 37 - Gráfico de evolução tecnológica da DP, de 2001 a 2008.

(http://www.digitalpages.com.br - Acesso em 15/03/2010)

Um exemplo de trabalho excelente de transposição de mídia, que segue no caminho contrário ao dos grandes jornais que cobram pelo acesso aos seus acervos, é o da revista Veja. De grande circulação nacional, a Veja oferece todas as edições anteriores (mais de 2000) para consultas on-line sem efetuar cobrança alguma.

Figura 38 - Uma das interfaces de Veja para acesso de suas edições anteriores. (http://veja.abril.com.br/arquivo.html - Acesso em 15/03/2010)

Não é preciso ser assinante da Veja para pesquisar e acessar qualquer matéria em suas publicações passadas, sendo que e a única edição que não fica disponível gratuitamente é a da semana de sua publicação.

A empresa responsável pelo processo de transposição das versões impressas de Veja é a Digital Pages, que já concluiu a disponibilização on-line de todas as edições entre os anos de 2010 e 1968. Em função do gigantesco acervo, a Digital Pages desenvolveu um sistema de navegação que inclui dois menus deslizantes que permitem o usuário web, através de uma única interface movimentar, para esquerda ou direita da tela, uma linha cronológica para escolha do ano das edições que ele deseja ver, e uma outra linha com as miniaturas das capas para acesso às edições do ano escolhido.

Figura 39 - Interface de Veja com outra possibilidade de acesso aos conteúdos de suas edições anteriores. (http://veja.abril.com.br/arquivo-1997-2001.shtml - Acesso em 15/03/2010)

Figura 40 - Interface única, com menus deslizantes, desenvolvida pela Digital Pages para acesso as mais de 2000 edições de Veja. (http://veja.abril.com.br/acervodigital/home.aspx - Acesso em 15/03/2010)

Figura 41 - A mesma interface da figura anterior, mas com alterações nos menus deslizantes do ano e das edições. (http://veja.abril.com.br/acervodigital/home.aspx - Acesso em 15/03/2010)

Na mesma interface é apresentada uma solução perfeita de usabilidade integrada que leva o usuário ao acesso rápido de qualquer uma das mais de 2000 edições de Veja.

Curiosa "coincidência", três anos antes da realização deste meu projeto pessoal para conclusão de minha graduação em design, eu já imagina a construção, em tecnologia flash, de um menu horizontal deslizante para as capas de todas as edições do jornal Essência Vital. Cheguei a iniciá-lo à época, mas só agora pude ter um real motivo para sua adequada finalização. Motivado pela constatação da mesma idéia/solução implementada por Veja, aperfeiçoei o conceito de usabilidade para os menus de acesso às edições do jornal Essência Vital em nosso projeto de design para seu website.

Em decorrência dessa minuciosa análise sobre transposição de mídia e das tecnologias flip utilizadas pela maioria das publicações migradas para web, torna-se evidente a necessidade de adoção de recursos semelhantes para o website do jornal Essência Vital. O uso de tecnologia de animação para edições digitais, se apresenta extremamente funcional e deverá integrar, de modo complementar, o projeto.

A seguir irei analisar a plataforma ISSUU, a última de meu estudo, e que julguei a mais interessante para utilizar no processo de transposição e construção das edições digitais do Essência Vital.

ISSUU - É uma plataforma de publicação digital da empresa americana Issuu, e que oferece experiência de leitura adaptativa e muito agradável de jornais, revistas, livros, catálogos, manuais entre outros tipos de projetos gráficos. Em poucos minutos o usuário da plataforma pode criar belas edições digitais simplesmente fazendo o upload de suas publicações. A missão da empresa Issuu é capacitar indivíduos, empresas e instituições para publicar os seus documentos em todas as plataformas digitais e para isso ela oferece duas possibilidades bem justas para utilização de seu sistema de transposição. A primeira possibilidade é a de uso gratuito da plataforma e a segunda é de uso pago focado em perfis corporativos.

Figura 42 - Interface bem agradável da home do website Issuu, onde alguns clientes/publicações interessantes já podem ser vistos. (http://issuu.com/ - Acesso em 16/03/2010)

Segundo avaliação no site da Revista Info (acessado em 05/03/2010), a plataforma Issuu tem como principal vantagem sua interface, que se aproxima do estilo de folhear uma revista.

As páginas são abertas em par, mantendo também, em muitos casos, os objetivos (formatos) de design do criador do conteúdo. Além disso, ao passar o mouse na parte inferior das páginas, é possível visualizar pequenas amostras das folhas anteriores e das próximas, o que agiliza a localização visual do conteúdo. Outro ponto forte está na organização dos conteúdos após o upload, que são mostrados em estantes, com um visual prático e moderno. Issuu foi avaliado pela revista com a nota 7,6, a maior dentre seus concorrentes, e com a nota 10 por usuários.

Figura 43 - Interface que apresenta um modelo de estante para publicações separadas por categorias. (http://issuu.com/ Acesso em 16/03/2010)

A plataforma suporta uploads de DOC, PDF, ODT (formato do OpenOffice), além de apresentações em PowerPoint. Os arquivos enviados são limitados pelo número de páginas, que não pode passar de quinhentos (número expressivo), e pelo tamanho em bytes (até 100 MB). No entanto, um usuário pode mandar quantos arquivos quiser para o Issuu. Issuu também é um site visitado por milhões de pessoas a cada mês, o que potencializa as chances de visualização das publicações que lá se encontram hospedadas. É uma biblioteca dinâmica, onde as pessoas são atraídas e envolvidas por publicações grandes e onde os editores encontram e constroem público alvo.

No início de 2000 uma receita de sucesso para a publicação/transposição de impressos em meio digital ainda não havia sido encontrada. Os fundadores da empresa Issuu então se dedicaram a criar um lugar e sistema onde qualquer pessoa pudesse expressar-se livremente em uma linha de formato familiar. Eles então encontraram inspiração nas próprias publicações impressas o meio mais forte e mais user-friendly (amigável) para essa engenharia voltada à web.

A Issuu, mesmo com sua política democrática de permissão para uso gratuito de um contingente enorme de usuários, é uma das empresas de crescimento mais rápido entre editoras digitais no mundo e seus escritórios estão localizados em Nova York, Figura 44 - Interface do site Issuu com publicações listadas por categoria.

Londres, Copenhague e Mumbai.

(http://issuu.com/publications - Acesso em 16/03/2010)

Figura 45 - Interface de navegação por sistema de flipagem da plataforma Issuu. Transposição e edição digital da revista Natural. (http://issuu.com/pisilva2k/docs/bf100 - Acesso em 16/03/2010)

Figura 46 - Interface de navegação por sistema da plataforma Issuu. Páginas abertas da edição digital da revista Natural. (http://issuu.com/pisilva2k/docs/bf100 - Acesso em 16/03/2010)

A cada mês Issuu é usada por mais de 6 milhões de visitantes e na rede servidora são cerca de 500 milhões de visualizações de página única. Além disso Issuu possui grandes clientes como Penguin Group, Google, Banco Mundial, Random House, Siemens, Routledge, Cambridge University Press, Edelman, Metro International, The Guardian, The Telegraph, Nações

Figura 47 - Interface Issuu com navegação de revista por páginas abertas. (http://issuu.com/jornal_regiao_de_leiria/docs/edicao_3805_para_disponibilizar_na_ net1 - Acesso em 16/03/2010)

Unidas, o que assinala confiança na plataforma.

Em função das necessidades de indexação do website do jornal Essência Vital junto aos mecanismos de busca na web - o que lhe permite visibilidade e possibilidade de maior fluxo de acessos, além das questões relacionadas à própria usabilidade -, a interface deste projeto não será composta apenas da tecnologia flash/flip para transposição de conteúdos, mas de

um conjunto de páginas hipertextuais. A análise das publicações que já passaram por este processo de transposição demonstra a necessidade de agregar tecnologias que facilitem o acesso aos conteúdos e a inclusão do maior número possível de usuários.

Figuras 48 e 49 - Experimentação com arquivos pessoais. (http://issuu.com/marcos_melo/docs/p1_game_design_-_aluno_-_marcos_melo - Acesso em 17/03/2010)

Figura 50 - Experimentação com arquivo pessoal desta própria monografia de TCC. (http://issuu.com/marcos_melo/docs/teste_tcc_infnet_-_p2_-_2 - Acesso em 17/03/2010)

Do ponto de vista técnico, as plataformas flip representam uma prática e inovadora forma de visualização de conteúdos digitalizados, mas não eliminam o necessário uso de recursos complementares voltados à usabilidade e à acessibilidade. Essas ferramentas quando projetadas sob restrições comerciais e programadas com funções impeditivas do acesso

público irrestrito, caracterizam políticas empresariais antipáticas e desalinhadas com os propósitos maiores da internet.

Finalizo esse estudo comparativo apresentando uma análise sobre as interfaces web de algumas publicações conceituadas. O objetivo desta avaliação foi mensurar-lhes a usabilidade e o modo com que permitem ou não aos usuários o acesso aos acervos de conteúdos transpostos. Pontuo sobre a qualidade deste acesso, bem como sobre a expressividade destes conteúdos disponibilizados ou não.

ANÁLISE FOLHA.COM A Folha.com disponibiliza o acesso ao acervo digital do jornal Folha de S. Paulo através de modo de flipagem digital e em dois pontos dentro de seu website, mas somente para assinantes.

Mais um site em que o acervo do jornal não está em versão para hipertexto. Embora o conteúdo diário da edição impressa seja colocado no site, o acesso aos conteúdos de edições anteriores só está acessível através de tecnologia de flipagem. Figura 51 - Interface do site da FOLHA.COM (http://www.folha.uol.com.br/ - Acesso em 26/05/2010)

ANÁLISE FOLHA DE S. PAULO Ao contrário do site Folha.com, o próprio site do jornal Folha de S. Paulo não possui acesso ao módulo de navegação por flipagem das edições digitais. O site apresenta conteúdo diário, mas para acessá-lo é preciso ser assinante. Embora tenha um acervo (a partir de 1994), também só tem acesso para pesquisa quem é assinante. Figura 52 - Interface do site da FOLHA DE S. PAULO (http://www1.folha.uol.com.br/fsp/ - Acesso em 26/05/2010)

ANÁLISE JORNAL DO COMÉRCIO O Jornal do Comércio disponibiliza o acervo de até 5 anos de suas publicações em seu website. Contudo, o acesso só é possível se for pago e através de modo de flipagem digital. Se por um lado essa tecnologia flip auxilia na transposição de conteúdos, por outro não deveria inviabilizar a inserção de acervo também em versão para hipertexto, bem mais inclusiva. Figura 53 - Interface do site do JORNAL DO COMÉRCIO (http://jcrs.uol.com.br/site/ - Acesso em 26/05/2010)

ANÁLISE O GLOBO Com três áreas de acesso na home para sua edição digital, O Globo trabalha com grande acervo de hipertextos e edições com navegação por flipagem, mas o acesso integral aos conteúdos é apenas para assinantes. Essa é uma prática comercial restritiva e equivocada, além de muito antipatizada pelo usuário web.

Se por um lado a maioria dos internautas não se incomoda com a apresentação de anúncios durante a navegação em sites de conteúdo, por outro eles se mostram irritáveis ao menor sinal de bloqueio às informações que buscam. Que uma pequena parte dos conteúdos seja comercializado e restrito seria até compreensível, mas não tudo.

Na era do Copyleft e do Creative Commons - políticas saudáveis de compartilhamento de conteúdos -, o acesso restrito não é algo adequado aos usuário web, cada vez mais conscientes da importância das idéias e princípios colaborativos. Figura 54 - Interface do site do jornal O GLOBO (http://oglobo.globo.com/ - Acesso em 26/05/2010)

ANÁLISE EXTRA O jornal Extra não oferece acesso às edições anteriores e não oferece versão digital que permita visualização por flipagem das edições impressas. Embora algumas das pequenas matérias diárias possam ser lidas, só é permitida interação para assinantes. Ou seja, existem limitações e restrições que penalizam o usuário web. Figura 55 - Interface do site do Jornal EXTRA (http://jcrs.uol.com.br/site/ - Acesso em 26/05/2010)

ANÁLISE JB ONLINE O website do Jornal do Brasil, em sua página inicial, só oferece um acesso para suas edições digitais e hipertextos de conteúdos em acervo. Este acesso também está restrito apenas a assinantes da edição impressa do jornal. Contudo, o JB disponibiliza gratuitamente no site os textos diários publicados em sua versão impressa. Postura mais flexível aos usuários web. Figura 56 - Interface do site do JORNAL DO BRASIL (http://jbonline.terra.com.br/ - Acesso em 26/05/2010)

Figura 57 - Interface do site da revista Caros Amigos (http://carosamigos.terra.com.br/ - Acesso em 26/05/2010)

ANÁLISE CAROS AMIGOS A revista Caros Amigos é publicada em formato tablóide, predominância de preto e branco em seu projeto gráfico e usa papel offset semelhante às edições impressas do Essência Vital, por isso eu a inclui aqui. Caros Amigos ainda não utiliza sistema digital de visualização de suas edições e também oferece um número limitado de edições anteriores em formato hipertexto, embora disponha de bons conteúdos aos usuários web.

Figura 58 - Interface do site do jornal LE MONDE DIPLOMATIQUE BRASIL (http://www.diplomatique.org.br/ - Acesso em 26/05/2010)

ANÁLISE LE MONDE DIPLOMATIQUE BRASIL O Jornal Le Monde Diplomatique Brasil é um caso de estudo interessante. Dentre os websites de jornais pesquisados, o do Le Monde é o que mais apresenta conteúdos disponível ao usuário web, ele sendo ou não assinante. Embora Le Monde ainda não faça

uso de tecnologia digital de visualização por flipagem, ele dispõe de duas áreas de acesso a um vasto acervo de matérias e edições anteriores. Além disso, Le Monde é signatário do novo e colaborativo conceito das licenças Creative Commons. Um belo e inclusivo exemplo de uso adequado da Internet. Le Monde disponibiliza, em sua seção Biblioteca Virtual, um acervo de matérias que vão do ano 1999 até 2010. São mais de 1700 textos que podem ser acessados pelos leitores sem que seja preciso ser assinante Le Monde. Essa política de democratizar e compartilhar a informação e o conhecimento caracteriza Le Monde como uma publicação em sintonia com os propósitos da rede mundial. Mas não pára por aí, Le Monde dá um passo além e abre seu acervo ao público em geral permitindo, através de licença Creative Commons, que seus textos sejam copiados e reutilizados em outros locais, desde que citada a fonte. Figura 59 - Interface / LE MONDE DIPLOMATIQUE BRASIL (http://www.diplomatique.org.br/ - Acesso em 26/05/2010)

Em sua seção Edições Anteriores o jornal Le Monde disponibiliza uma agradável navegação. Através de um simples clique sobre as imagens de suas capas é permitido um fácil acesso aos respectivos conteúdos de cada edição. Eficiente solução a ser aplicada ao website do Essência Vital.

Concluo que para um completo trabalho de transposição de mídia impressa para o meio digital é importante essa busca por integração tecnológica e o não descarte de possibilidades que Figura 60 - Interface / LE MONDE DIPLOMATIQUE BRASIL (http://www.diplomatique.org.br/ - Acesso em 26/05/2010)

promovam o acesso do leitor web ao

conteúdos. Desta forma, o projeto do website biográfico do jornal Essência Vital foi pensado para agregar as melhores tecnologias e facultar o acesso irrestrito - por vários caminhos em sua interface - a todo o seu acervo de matérias.

2.3 - PESQUISA PARA INTERFACE DIGITAL DO WEBSITE BIOGRÁFICO

2.3.1 - Conceitos fundamentais sobre design de interface Antes do aprofundamento em questões como usabilidade, acessibilidade e semiótica para o desenvolvimento do website biográfico do jornal Essência Vital, se faz necessário uma boa conceituação sobre design de interfaces web.

O termo interface é aplicado normalmente àquilo que interliga dois sistemas. Uma interface homem-máquina é a parte de um artefato que permite a um usuário controlar e avaliar o funcionamento do mesmo através de dispositivos sensíveis às suas ações e capazes de estimular sua percepção. No processo de interação usuário-sistema a interface é o combinado de software e hardware necessário para viabilizar e facilitar os processos de comunicação entre o usuário e a aplicação. A interface entre usuários e sistemas computacionais diferencia-se das interfaces de máquinas convencionais por exigir dos usuários um maior esforço cognitivo em atividades de interpretação e expressão das informações que o sistema processa (Norman, 1986).

Segundo Moran (1995), a interface de usuário deve ser entendida como sendo a parte de um sistema computacional com a qual uma pessoa entra em contato física, perceptiva e conceitualmente. Esta definição caracteriza uma perspectiva para a interface de usuário como tendo um componente físico, que o usuário percebe e manipula, e outro conceitual, que o usuário interpreta, processa e raciocina. Moran e outros denominam este componente de modelo conceitual do usuário. A interface é tanto um meio para a interação usuário-sistema, quanto uma ferramenta que oferece os instrumentos para este processo comunicativo. Desta forma a interface é um sistema de comunicação. Quando se considera a aplicação como máquina(s) virtual(is), a interface pode ser considerada ainda como um ambiente virtual para ações. Para que o usuário possa utilizar o sistema com sucesso ele deve saber quais as funções da aplicação são oferecidas por ele e como pode interagir com cada uma delas, isto é, qual o modelo conceitual da aplicação o designer concebeu para ele.

A interface para usuário deve espelhar dois objetivos fundamentais:

O primeiro objetivo é determinar como o usuário pode efetivamente interagir com o sistema, desenvolvendo uma interface que permita essa interação de acordo com seu modelo conceitual. O segundo objetivo é mostrar para o usuário o que ele pode fazer, isto é, quais as funções de uso a interface oferece, e quais os comandos de funções e mensagens auxiliares que compõem o modelo de interação. O design de interfaces para usuário é um dos pontos da área de pesquisa Interação Humano-Computador (Human-Computer Interaction).

Menus

Nas interfaces orientadas por menus o conjunto de comandos de funções oferecidas pela aplicação é mostrada ao usuário através da tela e cabe a ele selecionar uma delas através do mouse, de teclas alfanuméricas ou de teclas especiais. Como as funções e a maneira de acioná-las estão visíveis na forma de opções para o usuário selecionar, existe uma demanda maior pelo processo de reconhecimento ao invés de recordação como no caso das interfaces baseadas em comandos.

Normalmente o número de opções de comandos é grande o suficiente para ser mostrado de uma única vez na tela da interface. Existem diversas técnicas para se agrupar e apresentar as opções de menus. A mais comum é a categorização hierárquica na qual as opções são agrupadas em categorias de maneira hierárquica. A escolha dos nomes dos grupos e de cada opção do menu é fundamental para que o usuário possa escolher aquelas que o permitirá atingir suas metas. As interfaces orientadas por menus podem ser textuais ou gráficas. Nas interfaces textuais (ou baseadas em caracteres) as opções são descritas através de palavras na linguagem do usuário que representem as funções do sistema correspondentes aos comandos. O comando é acionado através de uma tecla ou número associado à opção do menu. Nas interfaces gráficas os menus podem ser compostos por palavras ou por signos gráficos específicos. Existem alguns tipos específicos de menus nas interfaces gráficas como menus de barra, pull-down, e pop-up.

Na medida que aumenta a funcionalidade de um sistema aumenta o número de opções que devem ser colocadas num menu. A estratégia do designer para evitar que os menus fiquem muito saturados de opções é subdividi-los e organizá-los em grupos. Os menus podem ser organizados de maneira hierárquica, linear ou em rede.

Neste projeto busquei a simplicidade funcional pensando a melhor e mais natural maneira de hierarquização dos menus. Projetá-los e categorizá-los foi uma atitude estratégica, baseada na arquitetura da informação do website, para permitir o rápido acesso a qualquer conteúdo desejado pelo usuário.

A Engenharia Semiótica de Interfaces

A abordagem do design de interfaces com a perspectiva de que o designer deve comunicar qual foi a solução que ele projetou para o usuário para que ele possa atingir as suas metas recebe o nome de Engenharia Semiótica. Esta engenharia é responsável pelo processo de construção de uma mensagem utilizando diversos tipos de signos: textos, ícones, símbolos gráficos, sons, gestos, etc. A interface Figura 61 - Protótipo de teste do menu esquerdo na interface do website do jornal Essência Vital.

deve ser vista como a mensagem que o designer construiu para comunicar ao usuário o modelo conceitual da aplicação.

A Engenharia Semiótica é, portanto, uma abordagem para o design de interfaces de usuários na qual o sistema computacional é visto como um meio de comunicação através do qual o designer envia para o(s) usuário(s) uma mensagem cuja expressão é a interface e o conteúdo é o que o usuário pode fazer com o sistema e como ele pode interagir com o sistema. Esta não é uma mensagem simples como uma palavra ou frase, mas uma mensagem bastante complexa, pois ela é dinâmica, interativa, multimídia, multicódigo e metacomunicativa. Ela é também unidirecional, pois vai sempre do designer para o usuário.

Por exemplo, quando o designer quer que o usuário pressione com o mouse uma determinada área da tela para acionar a execução da função imprimir ele pode utilizar o widget botão de acionamento (também conhecido como command button) com um rótulo escrito Imprimir. Este widget tem uma função comunicativa que diz algo equivalente a "pressione aqui para ativar a função Imprimir". Os widgets são componentes de interface gráfica com o usuário (GUI). Qualquer item de uma interface gráfica é chamada de widget, como: janelas, botões, menus e itens de menus, ícones, barras de rolagem, etc. Além disso, o widget pode representar textos ou imagens que podem ser capturados e publicados automaticamente em qualquer tipo de website, incluindo blogs.

A perspectiva da Engenharia Semiótica é que cada elemento presente na interface, ícones, botões, sons, palavras ou qualquer outro signo tem o potencial de comunicar algo. Cada decisão de design que o designer toma tem um impacto na maneira como o usuário interpreta aquilo que ele quis dizer. Semiótica é a disciplina que estuda os signos e os sistemas de significação e de comunicação.

O design de interfaces na abordagem da Engenharia Semiótica consiste em:

a) Projetar os comandos de função para cada uma das funções; b) Comunicar para o usuário quais as ações ele deve fazer em cada comando; c) Elaborar representações para os conceitos do domínio; d) Comunicar ao usuário quais as funções o sistema oferece e como acessar cada comando.

O princípio geral que fundamenta toda esta abordagem é que o designer tem que escolher qual o melhor signo para comunicar aquilo que ele quer dizer ao usuário. Isto significa ainda que o designer precisa conhecer o usuário para saber quais tipos de signos serão melhor interpretados por ele.

Com base nesse estudo de Engenharia Semiótica elaborei os elementos de interação com o usuário buscando a pregnância de maior sentido possível para uma adequada comunicação da interface. Palavras, botões, cores, números foram integrados para potencializar funções e representações.

2.3.2 - Usabilidade Com relação a web, o termo "usabilidade" refere-se à facilidade e eficiência com que os usuários conseguem realizar tarefas desejadas durante a navegação em um site. A usabilidade está diretamente relacionada com o modo prático de navegação. Independentemente de preferências pessoais, baseadas em pesquisas e grupos de foco, a usabilidade reflete o comportamento efetivo do usuário, aquilo que, de fato, ocorre durante a navegação. Testes de observação sinalizam quais são as tendências comportamentais dos usuários enquanto navegam por interfaces web, e disto resulta o estudo e adoção de modelos que permitem maior assertividade, otimização e funcionalidade de novos projetos com maior poder de usabilidade. Um desses importantes testes é chamado Eyetracking, um sistema de pesquisa que rastreia onde os olhos de uma pessoa observa durante sua navegação e leitura da

Figura 62 - Eyetracking: sistema de pesquisa e monitoramento ocular de interfaces web. (http://www.ergoneers.com/en/products/dlab-dikablis/overview.html - Acesso em 03/06/2010)

interface. Após testes realizados com muitos usuários, o eyetracking possibilita combinar, analisar e revelar padrões representativos que se aplicam à maioria da população. Um estudo realizado por Outing e Ruel (2003), denominado Eyetrack III concluiu, após examinar padrões de visualização em protótipos de sites de notícias, que títulos e manchetes capturam melhor a atenção do olhar quando, por exemplo, estão localizados na

parte superior esquerda da tela. A seguir, algumas imagens produzidas pelas experiências com eyetracking efetuadas por Outing e Ruel, entre outros, e que confirmam alguns padrões e quadrantes de maior fixação ocular de usuários web. Sobre essas conclusões, certificadas também por Nielsen e Pernice (2009), na obra "Eyetracking Web Usability", desenvolvi a interface do website Essência Vital.

Figuras 63 e 64 - Estudo Eyetrack III, de Outing e Ruel (2009): confirmação no padrão de navegação ocular por quadrantes na interface. (http://www.poynterextra.org/eyetrack2004/photos.htm e http://www.websiteoptimization.com/speed/tweak/clickstream/ - Acesso em 03/06/2010)

Figuras 65 e 66 - Estudo Eyetrack e padrão de prioridade por navegação ocular nos quadrantes da interface. (http://blog.clicktale.com/2009/11/23/eye-tracking-for-everyone/ e http://www.poynterextra.org/eyetrack2004/viewing.htm - Acesso em 03/06/2010)

Podem existir diferenças entre as declarações de experiência dos usuários e suas experiências em si. Algo pode ser dito, e este algo pode ser diferente daquilo que ocorre na prática. Disto resulta a importância dos testes de usabilidade monitorados, ao invés de tomar-se por base apenas coleta de opiniões. A escolha e desenvolvimento de uma boa interface gráfica deve considerar esses estudos metodológicos baseados em observação prática dos usuários web. Da redundância de padrões observados extraísse conclusões que podem viabilizar a construção de websites com potencial de usabilidade mais efetivo. Assim procurei proceder neste projeto. Nenhuma outra empresa no mundo desenvolveu tantas pesquisas empíricas no campo da usabilidade web quanto a Nielsen Norman Group, que desde 1994 realiza testes com usuários. A empresa, ao longo deste período identificou em diferentes países milhares de problemas de usabilidade, bem como desenvolveu outras tantas diretrizes para evitá-los. "Hoje as pessoas esperam muito dos websites e cada vez menos aceitam um projeto ruim. A usabilidade na web é muito mais crítica agora do que no início das pesquisas, pois agora há maior competitividade", afirmam Nielsen e Loranger (2007, xvi). Muito embora pesquisas de usabilidade assinalem padrões gerais de comportamento de usuários, ainda é preciso considerar as especificidades de cada projeto web. Dependendo da proposta a que se destine cada projeto, cada qual poderá apresentar necessidades específicas de adequação que possibilitem melhorar a usabilidade. Ou seja, é importante atentar para padrões e diretrizes confirmadas por amostragem genérica, mas efetuar testes com público alvo de cada projeto é fundamental. Ao lado apresento um gráfico baseado no livro "Usabilidade na Web - Projetando Websites com Qualidade", que contém exemplos de itens e estatísticas

Figura 67 - Gráfico de elementos prejudiciais à usabilidade. (NIELSEN, Jakob. Usabilidade na Web - Projetando Websites com qualidade. 2007. p. 75.)

do negativo impacto de alguns elementos de design inadequados à boa experiência de usabilidade. Essas estatísticas, baseadas em milhares de pesquisas da Nielsen Norman Group, geram diretrizes de consenso sobre boas e más práticas de usabilidade que devem ser consideradas por desenvolvedores e designers quando da elaboração de interfaces web. Ao lado, um outro gráfico extraído do livro "Usabilidade na Web Projetando Websites com Qualidade", de Jakob Nielsen e Hoa Loranger, que detalha problemas de usabilidade de acordo com suas classificações

Figura 68 - Gráfico de problemas de usabilidade. (NIELSEN, Jakob. Usabilidade na Web - Projetando Websites com qualidade. 2007. p. 131.)

de gravidade e agrupados por categoria de maiores erros de design. Tomando como base as pragmáticas pesquisas descritas no livro de Jakob Nielsen e Hoa Loranger adotei para o projeto do website biográfico do jornal Essência Vital diretrizes que proporcionem uma eficaz experiência de usabilidade. Embora minha intenção inicial fosse priorizar o alcance de ex-leitores do jornal, facultando-lhes o uso de uma interface que os aproximasse da experiência "similar" a que se processava durante a leitura do projeto impresso, ainda assim não deixei de considerar o imenso potencial de novos usuários/leitores web. Deste modo, a interface web do Essência Vital foi desenvolvida para facilitar o acesso aos conteúdos do jornal e contará com pesquisa por edição, por seções de nome idêntico as originais da publicação, por data, por capa e por temáticas abordadas. A seguir, apresento um gráfico com breve estudo comparativo entre alguns websites similares, no qual avalio, com notas de 0 a 10, alguns quesitos de composição das respectivas interfaces e que são relacionados com boas práticas de usabilidade. Inicialmente, o estudo foi efetuado somente entre publicações similares para eu pudesse detectar quais

pontos deveriam obter prioridade. Desta observação comparativa pude certificar-me da inconstância de padrões na web e ao mesmo tempo compreender a relevância da adoção de alguns requisitos e conceitos de usabilidade para uma experiência web adequada. No gráfico abaixo, surge então a interface do website do jornal Essência Vital como sendo projetada para a máxima aproximação daquilo que, teoricamente, seria um padrão de excelência no que se refere à usabilidade.

Figura 69 - Análise gráfica comparativa de fatores de usabilidade entre websites similares. (MELO, 2010)

Além dos estudos comparativos procurei respaldar este projeto nas pesquisas e heurísticas de Nielsen (2002) e Tahir (2002). Selecionei e defini 43 boas práticas e diretrizes de usabilidade para a estruturação da interface web do jornal Essência Vital. São elas:

Quanto aos objetivos do site

1. Exibição do nome do jornal, em um tamanho razoável e em um local de destaque no topo do site e em seu lado esquerdo;

2. Inclusão de slogan resumindo explicitamente o que representa/faz o site do jornal Essência Vital;

3. Ênfase no que o site faz de importante sob a perspectiva dos usuários;

4. O conteúdo central da homepage será estruturado de modo diferente de todas as outras páginas existentes no site;

Quanto as informações sobre o projeto

5. Informações do projeto agrupadas em uma única área reservada denominada "Sobre o Jornal";

6. Inclusão de link "Fale Conosco" na homepage, para acesso a uma página com todas as informações de contato do Jornal;

7. Inclusão do link "Política de Privacidade", em função da captura de dados dos usuários com formulários e cadastramento;

Criação do conteúdo

8. Seções e categorias de rótulo, usando a linguagem do leitor, de acordo com a importância dessas seções e categorias para seu entendimento e acesso aos conteúdos do site;

9. Serão evitados conteúdos redundantes;

10. Utilização de espaços não-separáveis entre as palavras nas frases, que precisam permanecer juntas para serem vistas e entendidas;

11. Emprego raro de todas as letras maiúsculas e nunca como um estilo de formatação;

12. Serão usados exemplos (imagens e links) na home para revelar o conteúdo do site;

Links

13. Diferenciação de links para torná-los fáceis de serem visualizados;

14. Não serão usadas instruções genéricas, como "clique aqui", como um nome de link;

15. Não serão usados links genéricos como "Mais...", no final de uma lista de itens;

16. Permitir links coloridos para indicar os estados visitados e não visitados;

Navegação

17. Não haverá página de abertura;

18. Não será utilizado scroll horizontal;

19. Será adotado o sistema de rolagem em vez do de paginação, e com colocação de botões de retorno ao topo e índice;

20. Alocação da área de navegação principal em um local bastante destacado;

21. Agrupamento de itens na área de navegação, de modo que os itens semelhantes fiquem próximos entre si;

Pesquisa

22. Disponibilizar para os usuários uma caixa de entrada na homepage para inserir consultas de pesquisa, em vez de oferecer apenas um link para uma página de pesquisa. Esse itens em função de limitações técnicas não será desenvolvido nesse primeiro momento, mas está prevista sua implementação posterior;

23. Não rotular a área de pesquisa com um título, em vez disso usar um botão "Buscar" ou "Pesquisar", a direita da caixa;

24. Como alternativa de pesquisa haverá implementado um sistema de pesquisa temático, descritivo e animado, com itens selecionáveis e clicáveis através de deslocamento do mouse;

Gráficos e animação

25. Os gráficos possuirão conteúdo real, não somente para decorar a homepage;

26. Rotulação de gráficos e fotos no contexto da história que complementam;

27. Edição adequada de fotos e diagramas, segundo o tamanho de exibição;

28. Não haverá gráficos de marca d'água (imagens de plano de fundo com texto sobreposto);

29. O logotipo, slogan e títulos principais não serão animados e deverão estar, preferencialmente, no canto superior esquerdo da interface;

30. Redução máxima de cliques para acesso a conteúdos, com a intenção de otimização do tempo do usuário, melhora de sua curva de aprendizado da navegação e eliminação do desgaste mecânico no uso do mouse;

Música

31. Não haverá reprodução automática de som;

Projeto gráfico

32. Texto de conteúdo em preto sobre fundo branco para possibilitar o melhor contraste;

33. Tipografia de textos com 10pt, mas haverá recurso interativo para aumento das letras caso o usuário necessite;

34. Entrelinha acima de 150% para permitir arejamento, descompactação dos textos e facilidade de leitura;

35. Aplicação de fonte Verdana para todos os textos, por configurar-se inquestionavelmente a melhor letra para leitura em tela, além de segura no que se refere a presença no equipamento do usuário;

36. Não haverá hifenização dos textos e eles serão alinhados à esquerda, permitindo maior dinâmica na leitura;

37. Serão limitados os estilos de fonte e outros atributos de formatação de texto, como tamanhos, cores etc, na página, porque o texto com design muito pesado pode se desviar do significado das palavras;

38. Os elementos mais críticos da página estarão visíveis "acima da dobra" (na primeira tela de conteúdo, sem rola), no tamanho de janela 1024 x 768;

39. Não serão utilizado FRAMES ou IFRAMES;

40. Recursos de impressão, bem como de compartilhamento em redes sociais serão disponibilizados;

41. Layout fixo, centralizado e composto por três colunas, isso com o intuito de maior controle e estabilidade dos conteúdos e leitura em diferentes telas e browsers;

42. Aplicação das principais leis da teoria Gestalt (similaridade, proximidade, clausura, boa continuidade, pregnância, experiência passada) para a harmonia e funcionalidade da interface;

Janelas pop-up

43. Não serão usadas de modo algum janelas pop-up.

Concluindo essa etapa de pesquisa e conceituação sobre usabilidade, relacionando-a com o desenvolvimento do projeto web do jornal Essência Vital, ainda é relevante citarmos a obra de Fleming (1998), "Web Navigation", que pontua as dez principais qualidades para sites de sucesso: 1) O website deve ser facilmente aprendido; 2) O website deve ter consistência; 3) A navegação deve dar retorno; 4) Precisa estar contextualizado;

5) Deve oferecer alternativas; 6) Garantir economia de tempo e ações; 7) Prover mensagens visuais claras; 8) Criar nomenclaturas claras; 9) Seguir o propósito do site; 10) Apoiar e ajudar os objetivos do usuário.

2.3.3 - Acessibilidade A web, de seu surgimento até o presente momento faculta a seus desenvolvedores constantes reflexões e progressos no sentido da inclusão. O termo acessibilidade reflete essa necessidade e preocupação de que haja na rede a adoção de práticas que possibilitem o máximo acesso aos seus conteúdos. Todo projeto web deve ser pensado de modo que permita seu pleno acesso por diferentes públicos, portadores ou não de necessidades especiais. Acessibilidade é sinônimo de inclusão, de democratização de oportunidades. Nem sempre observada, a acessibilidade de alguns projetos de interface web é praticamente inexistente, tornando conteúdos herméticos e inacessíveis a determinados públicos. Isso deve ser evitado. É fato que nem sempre - em função dos tipos de tecnologias adotadas e foco específico de determinados projetos - é viável a implementação de interfaces onde a acessibilidade possa ser perfeita. Contudo, também é fato comum encontrar-se projetos web onde a acessibilidade simplesmente não foi pensada em momento algum, ou por desconhecimento de sua importância ou por real negligência. Se a máxima acessibilidade não puder ser alcançada em função de restrições e peculiaridades de cada projeto, ao menos alguns mínimos cuidados devem ser tomados. Neste sentido de equilíbrio entre o factível e o ideal, do "pouco é muito" e das restrições e

premissas de nosso projeto é que a interface do website do jornal Essência Vital será implementada. Aprofundemos a visão sobre o significado e importância da "acessibilidade" no contexto web. Júnior e Ferreira (2010), no "Guia de Referência em Acessibilidade Web", da UNIRIO, em seu capítulo introdutório apresentam o que é "acessibilidade" e sinalizam a evolução do pensamento e legislação que validam as práticas para sua implementação:

Acessibilidade é a possibilidade de qualquer pessoa, independentemente de suas capacidades físico-motoras e perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, ou seja, é a possibilidade de participar de todas as atividades, até as que incluem o uso de produtos, serviços e informação, com o mínimo de restrições possível (Nicholl, 2001) e (NBR 9050, 1994). A acessibilidade digital refere-se ao acesso a qualquer recurso da Tecnologia da Informação, enquanto o termo acessibilidade na Internet é usado, de forma ampla, para definir o acesso universal a todos os componentes da rede mundial de computadores, como chats, e-mail entre outros. Já o termo acessibilidade na Web, ou e-acessibilidade, refere-se especificamente ao componente Web, que é um conjunto de páginas escritas na linguagem HTML e interligadas por links de hipertexto; a acessibilidade na Web representa para o usuário o direito de acessar a rede de informações e o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos. (Sales, 2003), (Modelo, 2005), (Nevile, 2005) e (http_1). Com o objetivo de tornar a Web acessível a todos, o W3C (World Wide Web Consortium) criou, em 1999, o WAI (Web Accessibility Initiative), formado por grupos de trabalho voltados para a elaboração de diretrizes ligadas à garantia da acessibilidade do conteúdo na Web às pessoas com deficiência (Nevile, 2005), (http_3) e (Enap, 2007). [...] Os membros do W3C/WAI elaboraram o "Estatuto de Recomendação do W3C" (WCAG 1.0); esse documento constitui a primeira versão das Diretrizes para a Acessibilidade ao Conteúdo da Web, lançada em maio de 1999, e até hoje continua sendo a principal referência de acessibilidade na Web (http_3 e http_4). (JÚNIOR, J. F. Oliveira; FERREIRA, S. B. Leal. Guia de Referência em Acessibilidade e Usabilidade Web (versão 2.0). Rio de Janeiro: UNIRIO – Universidade Federal do Estado do Rio de Janeiro - Centro de Ciências Exatas e Tecnologia, Escola de Informática Aplicada, 2010.)

De acordo com o site "Acessibilidade Brasil", constituído por uma sociedade de especialistas da área de educação especial, professores, engenheiros, administradores de empresas, arquitetos, desenhistas industriais, analistas de sistemas e jornalistas, que têm como interesse comum o apoio, ações e projetos que privilegiem a inclusão social e econômica de pessoas com deficiência, idosos e pessoas com baixa escolaridade, são apresentados quatro princípios para acessibilidade web, conforme descritos abaixo:

1) Quanto à apresentação da informação: associação de um texto a cada elemento não textual, como imagens, representações gráficas de texto, regiões de mapa de imagem, animações, botões gráficos etc. 2) Quanto à navegação: garantia de que as ligações textuais ou com um equivalente textual sejam palavras ou expressões compreensíveis e que os elementos da página possam ser ativados pelo teclado. 3) Quanto à implantação: utilização dos requisitos de acessibilidade de conteúdo da WEB do W3C/WAI, disponíveis em português (www.acessobrasil.org.br) ou inglês (www.cast.org/bobby). 4) Quanto à página principal: exposição do símbolo de acessibilidade na web. Entre as várias versões existentes, recomendamos a versão brasileira em logotipos.html, sendo necessário que se associe a essa imagem a ligação a uma página com o seguinte texto: Esse símbolo de acessibilidade não garante que o sítio tenha 100% de acessibilidade, mas que os responsáveis por ele tenham desenvolvido esforços no sentido de torná-lo acessível a todos. Nela também deverão constar informações gerais sobre a acessibilidade do sítio e o endereço eletrônico do responsável por sua criação. (ACESSIBILIDADE BRASIL. Princípios para Acessibilidade na Web. Disponível em: <http://www.acessobrasil.org.br/index.php?itemid=44> Acesso em: 08 abr. 2010)

Contudo, em função das necessidades específicas previstas no escopo deste projeto optei também, além do uso das tecnologias de HTML e CSS - que permitem maior controle para acessibilidade de usuários -, pelo uso da tecnologia flash. Até pouco tempo a tecnologia flash não era bem vista pelos especialistas em acessibilidade em função de sua arquitetura funcional fechada. Mas isso mudou - relativamente - e um dos maiores especialistas no mundo em acessibilidade e usabilidade web, Jakob Nielsen, foi contratado pela empresa Adobe, desenvolvedora da tecnologia flash, para auxiliar na criação de mecanismos que tornassem a plataforma mais adequada às necessidades de acessibilidade.

Apresento a seguir, de modo muito sintético, algumas das implementações funcionais relevantes no software Adobe Flash, realizadas após a consultoria de Jakob Nielsen, e que permitem ao desenvolvedor e designer web gerar arquivos com informações mais acessíveis. Em função dos diversos arquivos swf (Shockwave Flash - formato de arquivo para aplicação web) utilizados neste projeto do jornal procurei aplicar, na medida do possível, o uso desses novos recursos de acessibilidade.

Acessibilidade em Flash Acessibilizando o documento | Janela Document Properties Para abrir esta janela: menu Modify > Document. Para cada arquivo em Flash que for desenvolver, é importante definir duas informações: Title - Este campo serve para definir um título para o arquivo, uma informação breve sobre o

Figura 70 - Interface do software flash. (http://www.portaleducacao.com.br/tecnologia/artigos/4574/acessibilidadeem-flash - Acesso em 21/05/2010)

documento. Description - Neste campo pode-se inserir uma breve descrição sobre o conteúdo do arquivo e seu propósito. Com isso o documento/projeto informará ao usuário que documento está acessando e qual o seu propósito. Painel Acessibility Este painel se encontra em Window > Other Panels > Acessibility. Com este painel, pode-se gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Acessibilizando Textos Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado. Acessibilizando um MovieClip Figura 71 - Interface do software flash.

Neste caso, como o MovieClip pode, desde ter a simples

(http://www.portaleducacao.com.br/tecnologia/artig os/4574/acessibilidade-em-flash - Acesso em 21/05/2010)

funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção "Make child objects accessible" permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade

Figura 72 - Interface do software flash. (http://www.portaleducacao.com.br/tecnologia/artigos/4574/a cessibilidade-em-flash - Acesso em 21/05/2010)

definidas.

Muito embora a tecnologia flash não seja a ideal para objetivos de total acessibilidade, meu foco de trabalho, como já disse, é o equilíbrio entre necessidades de adequação do projeto. Sendo assim, justifica-se a integração de tecnologias, entre elas a flash, que permitirá dinâmica visual relevante para alguns conteúdos. Extrapola o escopo deste projeto sua adequação de 100% às necessidades de acessibilidade para portadores de necessidades especiais, e por isso suas limitações ou eventuais impedimentos nesse quesito devem ser

relevados. A completa adequação exigiria um tempo maior de desenvolvimento e implementação. Contudo, existe a certeza de que o projeto foi pensado de modo inclusivo e dentro do factível com seu propósito, e o grande conteúdo em formato de hipertextual apresentado no website confirma essa intenção.

2.3.4 - Semiótica A semiótica é uma importante área de estudos e que vem obtendo, por sua relevância, reconhecimento para a elaboração de projetos na web. Derivada do grego semeiotiké, a palavra "semiótica" significa "arte dos sinais". De acordo com Santaella (1983) "A Semiótica é a ciência que tem por objeto de investigação todas as linguagens possíveis, ou seja, que tem por objetivo o exame dos modos de constituição de todo e qualquer fenômeno de produção de significação e de sentido."

A semiótica é uma ciência de contextualização segundo Greimas e Courtés (2008), um estudo de sistemas de significação, de como um objeto é entendido pelo “receptor” considerando seu contexto social e natural. Como um signo é composto de dois planos complementares - a saber, a "forma" (ou "significante") e o "conteúdo" (ou "significado") logo a semiótica é uma ciência dupla que busca relacionar a sintaxe (relativa à "forma") à semântica (relativa ao "conteúdo"). Ela estuda o que fica entre o objeto e sua representação, encara a interface como um meio de comunicação e permite ênfase não apenas ao comportamento e apresentação dos objetos, mas também ao seu significado.

Quase todos os estudos da área de usabilidade têm como objetivo a redução da carga de trabalho cognitivo através do uso de recursos computacionais que compensem as limitações dos processos cognitivos (memória de trabalho, distribuição da atenção, processos perceptivos, etc.). A área de visualização da informação, por outro lado, tem o objetivo de aumentar a cognição através de recursos visuais. Nesse sentido, a preocupação com o mapeamento de um perfil semiótico do usuário ajuda a descobrir o que o próprio usuário espera de uma apresentação visual da interface gráfica com a qual irá interagir na web.

Segundo Hernandes (2005), a teoria semiótica atual desenvolveu-se a partir do estruturalismo dos anos 60 e seu texto fundador é Semântica Estrutural, de A. J. Greimas. A semiótica de origem francesa é uma das teorias que mais têm se preocupado, por exemplo, com a produção de sentido em objetos que unem várias “linguagens” de manifestação, com questões ligadas às estratégias que apelam à emoção e aos aspectos sensíveis dos textos.

Dentro do contexto de análise semiótica para desenvolvimento do website biográfico do jornal Essência Vital, refletiremos sobre cinco grupos de significância:

1. Verbais, expressos tipograficamente - A escolha será por no máximo duas famílias tipográficas que integrem o sentido visual de vanguarda do projeto impresso e a moderna adequação ao novo meio digital.

2. Fotográficos - Muito utilizados, haverá variações de tamanho em função de níveis de importância.

3. Pictóricos - Utilizados pontualmente.

4. Mistos - Serão utilizados com moderação.

5. Diagramáticos - Serão definidos na etapa de desenvolvimento se deverão ou não ser usados para demarcação de áreas distintas da home.

6. Hipermidiáticos - Segundo Bugay (2000), a Hipermídia pode ser considerada uma extensão do Hipertexto, entretanto, inclui além de textos comuns, desde sons, até animações e vídeos, que de uma forma interativa, com apenas um clicar de botão, o computador pode responder ao caminho desejado. Este projeto web é hipermidiático, onde a interface gráfica se tornará a combinação dos elementos gráficos e seus sistemas de movimentação, determinando assim os efeitos que se almeja provocar no leitor em contato com os conteúdos do jornal.

Foi feita a opção semiótica consciente pela pouca variação gráfico-plástica do website do jornal, objetivando uma estratégia de fidelização e simplicidade através de uma relação na qual o internauta tenha segurança de achar o que deseja. A organização textual de pouca variação priorizará o acesso imediato do usuário para aquilo que busca, em vez de distraí-lo durante a operação. Portanto, o efeito buscado pela principal página do site será o de simplicidade, de organização, de rapidez, tanto para encontrar o que se pretende quanto para o descarregamento de informações na tela.

3 - DESENVOLVIMENTO

3.1 - ESCOPO E FUNÇÕES ESPECÍFICAS (objetivos e requisitos)

Para o desenvolvimento do projeto web do jornal Essência Vital procurei seguir um conceito/modelo de gestão profissional proposto por Avellar & Duarte (2010), uma consultoria especializada em projetos para internet. Este modelo reforça a idéia de que um bom e bem sucedido projeto web deve possuir seu briefing e seu escopo claramente definidos e detalhados em seu início. Tal definição e detalhamento permitem a melhor gerência do projeto, tornando compreensíveis e dimensionáveis seus objetivos e necessidades de execução. Essa importante etapa de apreensão sobre as características e demandas específicas de um projeto de interface web é corroborada pelo pesquisador, desenvolvedor e consultor para tecnologias web, James Garrett, da University of Florida. Garrett é o autor de The Elements of User Experience, um modelo conceitual de design centrado no usuário, publicado pela primeira vez como um diagrama no ano 2000. O modelo de Garrett divide o processo de construção de interfaces web em cinco etapas - que procurei seguir -, onde as duas primeiras, consideradas "abstratas", são dedicadas à mensuração dos objetivos do projeto, necessidades dos usuários, funções específicas e conteúdos requeridos.

Figura 73 - Modelo conceitual de design para desenvolvimento de interface web, de James Garrett, autor de The Elements of User Experience - User-Centered Design for the Web. (Tradução: http://www.jjg.net/elements/translations/ - Acesso em 25/04/2010)

A seguir apresento a declaração de escopo, documento de alta relevância, que norteia o desenvolvimento e execução do projeto web do jornal Essência Vital.

Declaração de Escopo para Website do Jornal Essência Vital Produto final

Tipo de produto: website do jornal Essência Vital.

Este projeto tem por objetivo a pesquisa, a criação e a implementação de design de interface digital para website biográfico do jornal Essência Vital, bem como abranger sua publicação na internet e o registro de Objetivos, problemas a resolver

domínio. Para além do campo do design este projeto é também um trabalho de transposição de mídia que deve permite o registro histórico, em meio digital, de todo o conteúdo das 77 edições já impressas pelo jornal. Compartilhar e divulgar conhecimentos de maneira atemporal e sem fronteiras territoriais. Fortalecimento da marca "Essência Vital". Homenagem aos colaboradores do jornal.

Este projeto é de alta relevância para a Ong Essência Vital, do qual faz parte. Além do expressivo acervo de informações disponibilizado a Posicionamento estratégico

público, ele irá gerar redundância e indexação do nome/marca "Essência Vital" nos mecanismos de busca. Será mais um trabalho apresentado à sociedade como integrante do portfolio de projetos da Ong Essência Vital. É até o momento o único e maior projeto de comunicação solidária já realizado por uma ong no Brasil.

Este é um projeto com aplicação de tecnologias híbridas (html, css, javascript, ajax, php e actionscript) onde cada qual será aproveitada em sua melhor especificidade. Não será utilizado "Gerenciador de Descrição do produto (briefing)

Conteúdo" (CMS - Content Management Systems). Será aplicada tecnologia flash para animações essenciais ao projeto visual e necessidades funcionais de acesso a conteúdos. Posteriormente a implementação das estruturas principais do website e a inclusão de conteúdos textuais, será adotado um sistema de acesso a banco de dados para pesquisa de conteúdos.

Haverá grande ênfase no projeto de usabilidade e acesso de conteúdos. Serão desenvolvidos menus bem categorizados e Principal diferencial

hierarquizados para que, em no máximo dois cliques, os usuários sejam

a ser explorado

direcionados aos conteúdos desejados. O volume de conteúdos disponibilizados e a gratuidade do acesso a eles também serão fatores diferenciadores. O website contará com uma barra de compartilhamento de conteúdos

Subprodutos e

em redes sociais (Facebook, Orkut, Delicious, Myspace...), terá uma

serviços adicionais

área de cadastramento para recebimento de newsletter e permitirá o envio de mensagens e comentários.

Características

Design ricamente customizado para atender e expressar o conceito de

especiais do produto

identidade visual do Jornal Essência Vital e permitir uma experiência

para o cliente final

diferenciada.

Características do produto para comunicação com outras pessoas

O produto (website) permitirá sim auto-divulgação e comunicação dos usuários através das "barras de compartilhamento" e indicação através de cadastramento de e-mails na área de "fale conosco". Público-alvo: O perfil de público-alvo do website do Jornal Essência Vital é heterogêneo, assim como era o do projeto impresso. Contudo,

Público-alvo e

imagina-se que desperte maior interesse em jovens e adultos que

Personas - resumo

pesquisam informações nas áreas que o jornal aborda (ecologia,

(quem visitará,

espiritualidade, etc.). Também é provável que possa ser utilizado para

consultará o website)

estudo de pessoas ligadas às áreas da comunicação e design. Personas: Estudantes, jornalistas, ambientalistas, empresários, designers, professores, religiosos, donas de casa, funcionários públicos...

Enfoque da edição e

O conteúdo do site possui em geral uma linguagem coloquial, sem

da comunicação

gírias e com ênfase reflexiva/informativa.

Melhor visualização em resolução 1024 X 768; monitores de 17” ou Características

maiores, sem rolagem horizontal. Browsers: Internet Explorer 6.01 ou

técnicas

mais recente, Firefox Mozilla 2.0 ou mais recente. Não usa frames, não usa mapas de imagens. CSS em arquivo externo.

Funcionalidades e serviços especiais

Ferramenta de inserção de comentários, newsletter, animações em flash (cabeçalho e menus de navegação), edições digitais em plataforma ISSUU (flip/flash), banners, mídias sociais e lightbox. O website deverá ser implementado nas cores preta, branca e da escala de cinza para buscar sintonia com o projeto gráfico impresso. Poderá ser utilizada pontualmente a cor vermelha para sinalizar

Outros requisitos

alguma funcionalidade. Integração para monitoramento estatístico com o Google Analytics. Todo o conteúdo do website estará sob licença Creative Commons, que permitirá cópia, distribuição e republicação, desde que citada a fonte e que não seja comercializado.

O que o projeto não inclui

Não possui área de comércio eletrônico, fórum de debates, ferramentas de construção colaborativa e - momentaneamente banco de dados para pesquisa de conteúdos.

Concorrência

Não há concorrência a este projeto, mas valerá a análise de trabalhos

direta e indireta

similares (jornais e revistas na web). Cores: o website deverá ser implementado nas cores preta, branca e da escala de cinza para buscar sintonia com o projeto gráfico impresso do jornal Essência Vital. Poderá ser utilizada cor vermelha para sinalizar alguma funcionalidade. Tipografia: será utilizada a família "Verdana"

Recomendações para

para compor 100% dos textos do website e as famílias "USA Black" e

o layout

"USA Light" para uso pontual em alguns títulos de menus. Identidade Visual: voltada para o alinhamento estilístico do projeto gráfico impresso, e para a busca do resgate da memória afetiva de antigos leitores. Grid: predominância de três colunas. Layout: fixo, com largura de 1000px, altura relativa e sem rolagem horizontal.

Plano de Projeto Principais interações (pacotes de tarefa)

Produto (entregas)

Duração estimada

Definição de conteúdo e Pesquisa e Historiografia

parâmetros da estratégia e

Dois meses

escopo do projeto

Arquitetura da informação

Mapa estrutural

Dez dias

Esqueleto e estudos de usabilidade

Wireframes

Dois meses

Transposição de conteúdos para

Edições cruas em hipertexto,

meio digital

sem formatação

Conteúdo e forma

HTML e CSS

Quatro meses

Conteúdo visual

Imagens e animações

Quatro meses

Design de interface

Interface

Quatro meses

Programação e desenvolvimento de interação entre linguagens (ajax, javascript, actionscript...) Visual design (layout e prototipação)

Produtos (relatórios) do projeto

Funcionalidades do site (navegação) Protótipo navegável

Seis meses

Quatro meses

Um mês

Durante os seis meses de duração do projeto: três relatórios de execução e um relatório final.

Designer e gestor responsável pela iniciação, Comunicação para o projeto

planejamento, execução e conclusão do projeto: Marcos Antonio Andrade de Melo Contato: marcos.melo@essenciavital.org.br

Requisitos de qualidade AI, Layout e Usabilidade

Métrica ou Modo de Aferição

Estrutura de conteúdo reflete os principais objetivos do site, de forma que o usuário entenda

Análise e lista de checagem

que estes atendem as suas necessidades. Usuários podem chegar às páginas de conteúdo

Teste da interface em ambiente

mais importante com, no máximo, 2 cliques

controlado

Áreas de conteúdo mais importantes (contato) facilmente acessáveis a partir da página principal

Sinalização da localização de cada página, especialmente em relação à principal

Análise e lista de checagem

Layout da principal diferenciado das páginas

Teste da interface em ambiente

internas

controlado

Identidade cultural e afetiva do público-alvo com o modelo editorial e de layout. Site causa boa impressão à primeira vista

Teste com usuário, observação da reação ao layout

Layout se mantém estruturado nos principais

Teste da interface em ambiente

browsers e dispositivos

controlado

Layout consistente (tipologias, cores, lugar dos

Teste da interface em ambiente

elementos) em todas as páginas

controlado

Uso consistente da ordem dos títulos H1, H2, etc, de acordo com sua importância

Lista de checagem

Balanço visual entre áreas em branco e com conteúdo, sem saturação. Layout leve, com composição visual equilibrada, de modo a

Análise e lista de checagem

destacar os elementos mais importantes

Destaque visual das informações mais importantes (no alto) e das relações de

Análise e lista de checagem

subordinação (itens, subitens) Textos em tamanho legível, com estilos e cores bem definidos e apropriados ao conceito editorial Ausência de links interrompidos, botões que não respondem

Análise com usuário e lista de checagem

Lista de checagem

Layout facilita comparação de diferentes itens, valoriza similaridades, diferenças e

Análise e lista de checagem

relacionamentos entre as informações

Todas as funcionalidades claramente rotuladas

Teste com observação da ação sequenciada

Site adere a padrões web, usa CSS para formatação

Lista de checagem

Visibilidade do site em preto e branco

Lista de checagem

Alto contraste entre figuras e fundo

Lista de checagem

Acesso e tempo de permanência no site

Google Analytics (posterior)

Flip (visualização de edições digitais)

ISSUU Statistics (posterior)

Ações necessárias para atender aos requisitos de qualidade

Checagem semanal ao longo dos seis meses de projeto, para cumprimento dos requisitos

Riscos e Ameaças

Pouquíssimo tempo para execução do projeto

Quantidade expressiva de conteúdos a serem alocados no projeto

Mudanças estruturais necessárias (na organização, no ambiente de publicação)

Resposta ou modo de prevenir

Priorização de implementações funcionais.

Prioridade para inserção de conteúdo mínimo para prototipação de alta fidelidade e/ou navegação básica.

Revisão de processos, busca de opinião especializada, estudos complementares, preparo para marketing digital (incluindo SEO como atividade permanente) realização de aperfeiçoamento progressivo.

Disponibilidade de conteúdos: textos, imagens e arquivos Premissas, ressalvas,

digitais em determinado prazo; hospedagem e registro de

observações

domínio; formalizar cada etapa finalizada do projeto com o orientador.

Monitoramento de acessos/estatísticas via Google Analytics; Indicadores para mensuração

contatos estabelecidos com os usuários via "fale conosco"

dos resultados

e "comentários"; enquetes online e sucesso de outras atividades relacionadas diretamente ao site.

3.2 - ARQUITETURA DA INFORMAÇÃO (mapa estrutural)

Não há definição mais simples e precisa para "Arquitetura da Informação" do que a proferida por Rosenfeld e Morville (2007), onde afirmam que ela é “a arte e a ciência de organizar a informação para ajudar pessoas a satisfazerem suas necessidades de informação de forma efetiva (…) o que implica organizar, navegar, marcar e buscar mecanismos nos sistemas de informação.” E ainda, segundo Avellar e Duarte (2010), "para projetos web, a arquitetura da informação estabelece padrões de orientação, num site ou plataforma, para facilitar decisões, ações e deslocamentos do usuário por meio de relacionamento hipertextual. A organização do conteúdo e dos dados online de acordo com Garret (2003):

1) Prover as condições para o usuário chegar de um ponto ao outro, levando em conta diferentes modos de chegar às informações. 2) Comunicar as relações entre os elementos, considerando desde o contexto geral de informações quanto às suas unidades. 3) Comunicar as relações entre o conteúdo geral e a página que o usuário está vendo. (GARRETT, Jesse James. The Elements of User Experience. USA: New Riders Publishing in conjunction with the American Institute of Graphic Arts, 2003.)

Diante do estudo dessas definições, a arquitetura deste projeto web foi concebida para que:

1) Não haja navegação improdutiva;

2) Não haja dispersão em relação aos objetivos iniciais da navegação;

3) Seja fácil a compreensão da estrutura;

4) Exista aderência das informações e do conteúdo aos objetivos do site;

5) Exista aderência ao enfoque conceitual e editorial.

Figura 74 - Mapa estrutural do website do Jornal EssĂŞncia Vital.

Mapa Textual de Navegação Menu Superior Botão: Página inicial Botão: Newsletter Botão: Pesquisa

Menu Scrool em Flash (Cabeçalho) Capas botões: Scrool de capas Carrega páginas com: Jornais: Qualquer uma das 77 edições, todas completas

Menu Horizontal Botão: Sobre o Jornal Carrega página com: Link: Histórico, conceitos e ambientação sociocultural do jornal Link: Estrutura e projeto gráfico impresso Link: Alcance e impacto sobre público-alvo Link: Pessoas essenciais (equipe e colaboradores) Link: Trabalhos acadêmicos dedicados ao Essência Vital Botão: Edições Digitais Carrega página com: Animações Flash: 77 animações navegáveis em sistema de flipagem Botão: Índice da Edições Carrega página com: Links: Todos os conteúdos das 77 edições Botão: Comentários Carrega página com: Formulário: Para comentar Botão: Fale conosco Carrega página com: Formulário: Para se comunicar

Menus de Navegação da Lateral Esquerda Menu pesquisa por edição 77 a 00 Botões: 77 botões numéricos Carrega página com: Jornais: Qualquer uma das 77 edições, todas completas Menu pesquisa por Seções Botão: Capas Carrega página com: Imagens: Todas as 77 capas. Botão: Editoriais Carrega página com: Links: Listagem de "Editoriais" e seus respectivos links. Botão: Toques Essenciais Carrega página com: Links: Listagem de "Toques Essenciais" e seus respectivos links. Botão: Charges Ilustrações Carrega página com: Imagens: Listagem de "Charges Ilustrações" e seus respectivos links. Botão: Páginas Livres Carrega página com: Links: Listagem de "Páginas Livres" e seus respectivos links. Botão: Psicografias Carrega página com: Links: Listagem de "Psicografias" e seus respectivos links. Botão: Páginas Centrais Carrega página com: Links: Listagem de "Páginas Centrais" e seus respectivos links. Botão: Crônicas Carrega página com: Links: Listagem de "Crônicas" e seus respectivos links.

100

Botão: Com a Palavra Carrega página com: Links: Listagem de "Com a Palavra" e seus respectivos links. Botão: Alquimia Alimentar Carrega página com: Links: Listagem de "Alquimia Alimentar" e seus respectivos links. Botão: O que está acontecendo no mundo? Carrega página com: Links: Listagem de "O Que Está Acontecendo no Mundo" e seus links. Botão: Página Livros Carrega página com: Links: Listagem de "Página Livros" e seus respectivos links. Botão: Fala Leitor Carrega página com: Links: Listagem de "Fala Leitor" e seus respectivos links. Botão: Matérias de Capa do Classi Carrega página com: Links: Listagem de "Matérias de Capa do Classi" e seus links. Pesquisa por data Botões: 77 botões com a relação de datas e edições de 1995 a 2003 Carrega página com: Jornais: Qualquer uma das 77 edições, todas completas. Menu de Navegação da Lateral Direita Pesquisa por tema "ALIMENTAÇÃO" Botões: 40 botões com subtemas relacionados à "ALIMENTAÇÃO". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

101

Pesquisa por tema "ECOLOGIA E CIÊNCIA" Botões: 33 botões com subtemas relacionados à "ECOLOGIA E CIÊNCIA". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

Pesquisa por tema "ESPIRITUALIDADE" Botões: 38 botões com subtemas relacionados à "ESPIRITUALIDADE". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

Pesquisa por tema "COMPORTAMENTO" Botões: 25 botões com subtemas relacionados a "COMPORTAMENTO". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

Pesquisa por tema "QUALIDADE DE VIDA" Botões: 43 botões com subtemas relacionados à "QUALIDADE DE VIDA". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

Pesquisa por tema "QUESTÕES SOCIAIS" Botões: 24 botões com subtemas relacionados com "QUESTÕES SOCIAIS". Carrega página com: Links: Índice/listagem de matérias relacionadas aos subtemas.

Pesquisa por tema "PERSONALIDADES" Botões: 64 botões com nomes de "PERSONALIDADES". Carrega página com: Links: Índice/listagem de matérias relacionadas às personalidades.

102

Rodapé

Botão: Sobre o Jornal Carrega página com: Link: Histórico, conceitos e ambientação sociocultural do jornal Link: Estrutura e projeto gráfico impresso Link: Alcance e impacto sobre público-alvo Link: Pessoas essenciais (equipe e colaboradores) Link: Trabalhos acadêmicos dedicados ao Essência Vital Botão: Edições Digitais Carrega página com: Animações Flash: 77 animações navegáveis em sistema de flipagem Botão: Índice da Edições Carrega página com: Links: Todos os conteúdos das 77 edições Botão: Comentários Carrega página com: Formulário: Para comentar Botão: Fale conosco Carrega página com: Formulário: Para se comunicar Botão: Política de Privacidade Carrega página com: Informações obre dados inseridos no site Botão: Licença Creative Commons Carrega página externa com: Informações das licenças Creative Commons

103

3.3 - WIREFRAME E DESIGN DE INTERFACE O wireframe ao lado é a versão, em fase de finalização, para a página inicial do website do jornal Essência Vital. Ele apresenta estrutura de grande afinidade com a arquitetura da informação do site. Vale esclarecer que o termo “wireframe" vem da junção de duas palavras: “wire” (linhas) e “frame” (moldura) e serve para designar um esboço gráfico, de aspecto muito simplificado, mas extremamente valioso, onde se indica a localização dos elementos da interface e a funcionalidade de aplicações. Figura 75 - Wireframe da página inicial do website do jornal Essência Vital

104

Busquei definir através dos wireframes todas as áreas para alocação dos elementos da interface, projetando suas dimensões e funções. Nesta imagem ao lado consta o wireframe da página que carrega todas as miniaturas/botões das capas do jornal Essência Vital. O wireframe é um documento importante do projeto e permite estruturar o conteúdo do layout indicando o peso e relevância de cada elemento. Figura 76 - Wireframe da página "Capas" do website do jornal Essência Vital

105

Neste wireframe ao lado apresento a interface da página padrão que carregará cada edição hipertextual completa do jornal Essência Vital. Para simular o comprimento da página, a imagem está em escala menor que as outras duas mostradas anteriormente.

A arquitetura da informação e os wireframes revelam que ao longo da navegação o usuário terá ao seu dispor, permanentemente, todos os menus de acesso aos conteúdos do site. Apenas a parte central da interface sofrerá alterações, alternando os conteúdos determinados pelo usuário através de suas escolhas. Este processo não ocorre com o uso de frame ou iframe, como alguns poderão pensar, mas sim através de uma inteligente interação de algumas linguagens (html, css, actionscript e ajax).

Esta escolha dos menus fixos que se constata nos wireframes tem por objetivo a aderência das informações e a usabilidade do site para que o visitante possa compreendê-lo com rapidez e se desloque facilmente, entre páginas e seções, construindo seu modelo mental.

Figura 77 - Wireframe da página web padrão para carregamento de edições do jornal Essência Vital

106

Figura 78 - Design de interface - Desenvolvimento com tecnologia flash das miniaturas das capas do jornal Essência Vital. Cada capa funciona como um botão animado que aciona por programação a função lightbox para ampliação das imagens na tela.

Figura 79 - Design de interface - Desenvolvimento com tecnologia flash do menu numérico para navegação por edição. Este menu foi o mais trabalhoso a ser implementado e foi projetado para integrar diversos aspectos gestálticos (similaridade, proximidade, clausura, boa continuidade, pregnância e experiência passada - lembra uma cartela de bingo) . Cada botão numérico aciona, ao ser "tocado" pelo cursor, uma pequena animação cromática na escala de cinza dentro de si mesmo, permitindo ao usuário uma experiência lúdica. Por tudo isso, este menu foi previsto no wireframe para ocupar posição estratégica na interface.

107

Figura 80 - Design de interface - Em destaque e teste o menu numérico para acesso direto a cada edição do jornal Essência Vital. São 77 botões flash que através de programação script acionam uma rotina em linguagem ajax dentro do html da página inicial.

Figura 81 - Design de interface - Em destaque e teste o menu de navegação por temas abordados pelo jornal Essência Vital. São 270 botões flash que também proporcionam uma suave experiência lúdica ao usuário. Através de um sistema sensível ao toque do cursor pode-se, sem cliques, rolar a listagem temática e então escolher e chamar, por clique, a página índice de matérias relacionadas ao tema específico. Este menu foi projetado para suporte de pesquisa e para já fornecer ao usuário sugestões de leitura.

108

Figura 82 - Design de interface - Em destaque e teste o menu de navegação por seção do jornal Essência Vital. São 14 botões flash que através de programação script acionam uma rotina ajax dentro do html da página inicial e permitem carregar, no centro da interface, as páginas com os índices dos conteúdos relacionados às seções. Todos os menus do website foram projetados para permitir ao usuário o acesso aos conteúdos em, no máximo, dois cliques, algo extremamente importante em termos de usabilidade.

Figura 83 - Design de interface - Em destaque e teste o menu scroll (deslizante) para navegação entre as capas do jornal Essência Vital. Este menu está posicionado estrategicamente no cabeçalho da página, modelado e alinhado sob proporções áureas. Cada miniatura de capa é um botão flash e que ao ser clicado aciona no centro da interface o carregamento da respectiva edição completa do jornal.

109

Figura 84 - Design de interface - Em destaque o desenvolvimento da programação das funcionalidades do website em xhtml. Na imagem o rodapé do site com a implementação de alguns links de navegação e a inserção da licença Creative Commons

Figura 85 - Design de interface - Em destaque o desenvolvimento da programação das folhas de estilo (CSS), em arquivo externo, para formatação das páginas html que compõem o website do jornal Essência Vital. Através de CSS (Cascading Style Sheets) é possível definir a apresentação correta de documentos que se utilizam de linguagem de marcação (html e xhtml) e proporcionar maior controle sobre eles, além de torná-los mais leves e fáceis de serem alterados em caso de necessidade.

110

Figura 86 - Design de interface - Em destaque a inclusão dos arquivos swf (flash) dos menus e cabeçalho dentro da estrutura xhtml do website do jornal Essência Vital. Esse arquivos são contidos entre "divs" (tags do html) parametrizadas pelo CSS externo. Na imagem os conteúdos apresentados na página inicial também estão sendo adequados em suas respectivas áreas da interface.

Figura 87 - Design de interface - Em destaque a inclusão dos arquivos swf (flash) dos menus e cabeçalho dentro da estrutura xhtml do website do jornal Essência Vital. Esse arquivos são contidos entre "divs" (tags do html) parametrizadas pelo CSS externo. Na imagem os conteúdos apresentados na página inicial também estão sendo adequados em suas respectivas áreas da interface.

111

3.4 - LAYOUT E PROTOTIPAÇÃO DE ALTA FIDELIDADE

3.4.1 - Tipografia Embora existisse de minha parte uma intenção inovadora com relação a tipografia a ser utilizada no website do jornal Essência Vital, algumas reflexões me levaram a ponderar e optar por uma escolha conservadora. Do ponto de vista da usabilidade e legibilidade, segundo os especialistas Nielsen e Loranger (2006) é consenso que a família tipográfica "Verdana" é a mais indicada para projetos web com expressiva linguagem textual.

Desenvolvida em 1996 pelo type designer Matthew Carter, da empresa Microsoft, a tipografia Verdana foi especialmente criada para leitura em monitores. Verdana é um tipo bastonado de letra, ou seja, sem serifa, o que permite melhor adequação e visualização com pixels. Verdana também possui uma excelente leitura em textos corridos e em tamanhos pequenos. Deste modo, tendo em vista o volume de conteúdos textuais deste projeto, o tipo Verdana foi definido como mais apropriado em sua aplicação.

Figura 88 - Família tipográfica Verdana - Utilizada em 100% dos textos das edições hipertextuais do jornal Essência Vital.

112

Contudo, foram também escolhidas as famílias tipográficas "USA Black" e "USA Light" para aplicação pontual nos títulos de alguns menus, pois apresentam melhor estrutura em tamanhos maiores. Deste modo, a composição visual da interface ganha suave diferença.

Figuras 89 e 90 - Famílias tipográficas USA Black e USA Light - Utilizadas pontualmente nos títulos dos menus laterais do website.

113

3.4.2 - Cores Seguindo o conceito de que o website do jornal Essência Vital deveria estabelecer laços de similaridade com a identidade visual do projeto gráfico impresso, uma das diretrizes adotadas foi a do uso predominante das cores hexadecimais: preta, branca e da escala de cinza. Cores que acentuam o contraste, agradáveis ao olhar e com relativa neutralidade. Entretanto, com o objetivo de contribuir com a melhor apreensão e condução do usuário em sua navegação decidi aplicar a cor vermelha (quente, de alerta), pontualmente, para sinalizar alguns links e signos. Segue a paleta cromática utilizada neste projeto.

Figura 91 - Paleta de cores utilizada para o layout de interface do website do jornal Essência Vital.

114

3.4.3 - Retângulo áureo e regra dos terços (estudos) Este é um dos pontos altos na busca por qualidade para este projeto, um estudo que gera diferencial para o design e a harmonia de sua interface. Para além dos conceitos, pesquisas e implementações nas áreas de arquitetura da informação, usabilidade, desenvolvimento web e comunicação, procurei aplicar conhecimentos sobre a regra áurea e regra dos terços. Tais regras, derivadas da matemática e dos estudos da observação humana sobre composições visuais, facultam a possibilidade da estruturação de um grid de modelagem com altíssima qualidade e equilíbrio.

Para a modelação da interface do website do jornal Essência Vital utilizei um grid composto por retângulos áureos. O retângulo áureo é uma forma geométrica cuja razão de seus lados é o número (Phi) 1,618, considerado o número de ouro, ou da razão divina, por ser encontrado em muitas estruturas da natureza. Vale ressaltar que esse número Phi = 1,618 não é a constante matemática Pi = 3,14. O nome Phi ao qual nos referimos foi dado ao número 1,618 em homenagem ao matemático italiano Leonardo de Pisa, também chamado Leonardo Fibonacci, que chamou a atenção do mundo ocidental para as impressionantes descobertas matemáticas dos árabes e da álgebra e geometria gregas. Contudo, a revelação da Razão Áurea é atribuída a Pitágoras, mas babilônios e egípcios já a utilizavam como relata o Dr. Mario Livio (2002) - Ph.D em astrofísica pela Universidade de Tel Aviv e astrofísico do Space Telescope Science Institute (STScI) - em seu livro "The Golden Ratio: The Story of Phi, the World's Most Astonishing Number", do qual extraímos a pequena citação abaixo.

Algumas das maiores mentes matemáticas de todas os tempos, Pitágoras e Euclides na Grécia antiga, o matemático italiano Leonardo de Pisa na Idade Média e o astrônomo renascentista Johannes Kepler, o físico Roger Penrose de Oxford, passaram horas sem fim sobre esta relação simples e suas propriedades. Mas a fascinação pela Razão Áurea não se restringe apenas aos matemáticos. Biólogos, místicos, artistas, músicos, historiadores, arquitetos, psicólogos já examinaram e debateram as bases de sua ubiqüidade e recurso. Na verdade, provavelmente é justo dizer que a Razão Áurea tem inspirado pensadores de todas as disciplinas, como nenhum outro número na história da matemática. (LIVIO, M. The Golden Ratio: The Story of Phi, the World's Most Astonishing Number. Broadway. USA, 2002.)

115

Para construção do grid deste projeto compus, baseado na razão áurea, uma malha gráfica formada pela sequencia horizontal de três retângulos áureos, interligados por seus pontos de maior convergência energética e visual. Ou seja, cada retângulo construído a partir da razão áurea foi esquadrinhado com duas (2) linhas verticais e duas (2) linhas horizontais que ao se cruzarem formaram nove (9) áreas e quatro (4) pontos de foco energético. As linhas foram obtidas e posicionadas a partir do cálculo de quatro (4) outros retângulos áureos "contidos" no retângulo maior e formados por suas laterais e ângulos superior e inferior. Nas figuras 75 e 76 pode-se ter uma idéia melhor sobre o retângulo áureo e a malha formada através do cruzamento de linhas sobre os pontos áureos.

Figura 92 - Retângulo áureo e o número da razão áurea 1,618.

Figura 93 - Malha áurea combinada com regra dos terços.

Desenvolvida a malha áurea interna a partir de um único e grande retângulo áureo, sobrepus em sequência três grandes retângulos de modo a formar um grid inteiriço e harmônico para a interface. Deste modo, pude ter a exata noção de como refinar o alinhamento e posicionamento de cada elemento da interface.

De fato, eu poderia ter implementado esse estudo desde o início da construção dos wireframes, mas o insight para desenvolver essa aplicação só ocorreu após a execução de algumas etapas. Refletindo fiz uma escolha difícil e que me gerou um exaustivo retrabalho, mas considerei de grande relevância para o projeto e resolvi implementá-la. O uso da razão áurea na interface resultou em um acabamento sofisticado e de alta pregnância ao olhar. Sob os pontos considerados áureos foram devidamente posicionados e alinhados diversos elementos de composição do layout, dentre eles o logo do site, os logos dos jornais no menu scroll, os botões do menu horizontal, o início de cada botão do menu tema, etc.

116

Além dos pontos áureos obtidos com as linhas que se cruzam dentro do retângulo áureo, procurei aplicar mais um grid utilizando a regra dos terços, um recurso muito utilizado por fotógrafos para melhor aproveitamento de imagens. A regra dos terços derivada do retângulo áureo, mas sem a preocupação com a razão áurea, simplesmente divide o campo visual em terços proporcionais. Para isso, se imaginam duas (2) linhas verticais e duas (2) linhas horizontais, que ao se cruzarem formarão nove (9) segmentos com quatro (4) pontos de interseção. Esses quatro (4) pontos são considerados como as regiões mais dinâmicas da imagem, portanto, na maioria das vezes, mais eficientes do que o centro do quadro.

Sobrepus a malha derivada da regra dos terços à malha baseada na regra áurea e assim pude definir todas as regiões de maior pregnância ótica na interface. Os pontos de interseção da malha áurea, somados aos da malha dos terços possibilitam "circunscrever" pequenas áreas delimitadoras para ajuste/aproximação daqueles elementos com maior importância ao site.

Na sequência das imagens abaixo é possível, observando-se com atenção, perceber o empenho para o refinamento gradual dos ajustes até que o layout esteja o mais próximo possível do ideal áureo.

Figura 94 - Malha áurea e malha dos terços combinadas e sobrepostas ao layout do website do jornal Essência Vital.

117

Figura 95 - Malha áurea e malha dos terços combinadas e sobrepostas ao layout do website do jornal Essência Vital. A unidade da malha foi gerada com o alinhamento e interação de três retângulos áureos, que podem ser percebidos por três cores diferenciadoras.

Figura 96 - Retângulos áureos para estudo de alinhamento e posicionamento dos conteúdos da interface.

118

Figura 97 - Através da malha áurea detecta-se que existem problemas de alinhamento no menu vertical direito, no menu horizontal, no posicionamento das capas do menu scroll, no logo, entre outros.

Figura 98 - Continuidade do estudo com os retângulos áureos e o conjunto de malhas com seus pontos de convergência ótica.

119

Figura 99 - Ajuste do logo do site sobre quatro importantes pontos de convergência gerados pela malha áurea e dos terços.

Figura 100 - Ajuste do menu scroll das capas no cabeçalho. O objetivo é o alinhamento dos logos de cada capa com os pontos áureos.

120

Figura 101 - Refinamento do ajuste definitivo do menu scroll das capas no cabeรงalho.

Figura 102 - Ajuste definitivo do menu scroll das capas.

121

Figura 103 - Correção do alinhamento do menu horizontal superior para sobreposição dos pontos áureos.

Figura 104 - Melhoria do posicionamento do logo da edição carregada no centro da página. Este ajuste visa possibilitar que todas as demais edições carregadas possam ter suas capas com o logo Essência Vital o mais próximo possível dos pontos áureos.

122

Figura 105 - Finalização do ajuste do menu horizontal superior com seu posicionamento perfeito sobre uma linha de pontos áureos.

Figura 106 - Ajustes finos e inserção de outros elementos da interface: botões de retorno à página inicial, newsletter, etc.

123

Figura 107 - Melhorias do menu de pesquisa por tema e correção de tipografia nos menus laterais da direita do layout.

Figura 108 - Estudo do layout dividido em scrolls de tela e com um retângulo áureo para cada um.

124

Figura 109 - Novo estudo do layout agora com retângulos áureos menores para observação da colunagem.

Figura 110 - Conclusão da adequação do layout aos pontos áureos. Procurei o máximo aproveitamento da malha áurea e da malha dos terços. Considero ter alcançado, para os elementos mais importantes da interface, o melhor posicionamento possível nos pontos de maior pregnância visual do layout.

125

Figura 111 - Estudo para definição de tamanho e posicionamento da imagem das capas carregadas através do recurso lightbox.

Figura 112 - Visualização limpa do layout em fase final de acabamento e inclusão de conteúdos.

126

Figura 113 - Visualização do layout com uma das edições carregadas na área central da interface.

Figura 114 - Visualização do layout com uma das edições digitais carregadas através de plataforma flash da empresa Issuu. Abaixo da edição 77, que aparece na imagem, estarão alocadas as demais 76 edições digitais do jornal Essência Vital. Para acessar esse conteúdo digitalizado, basta clicar sobre a imagem para que ela carregue em tela cheia e permita a navegação por flipagem de páginas.

127

Figura 115 - Visualização de uma edição digital do jornal Essência Vital, que foi carregada em tela cheia via plataforma Issuu, contida no website na área "edições digitais". A navegação permite ao usuário ter uma experiência diferenciada, onde pode visualizar o jornal do modo como era impresso, conhecendo seu projeto gráfico original. O recurso ainda permite controle de zoom, entre outros.

Figura 116 - Visualização de uma página interna onde estão colocadas informações do jornal Essência Vital. Alguns links encabeçam a página e permitem ao usuário o deslocamento instantâneo para o assunto desejado sem que uma nova página seja carregada. Ao término de cada conteúdo existe um botão de voltar ao índice.

128

Figura 117 - Visualização da interface carregando a página de capas do jornal.

Figura 118 - Detalhe da página de capas, onde cada uma é um botão. Ao clicar sobre qualquer uma das miniaturas das capas o recurso lightbox é acionado e a referida capa carrega ampliada na tela do usuário web.

129

Figura 119 - Detalhe do layout final da página inicial do website do jornal Essência Vital.

Figura 120 - Final do desenvolvimento do layout e prototipação. Conclusão da criação e implementação do projeto de design de interface para o website biográfico do jornal Essência Vital.

130

3.5 - SOFTWARES, LINGUAGENS TECNOLÓGICAS E LICENÇAS

Softwares: - Adobe Dreamweaver CS4: Para a programação e montagem da interface com a aplicação das tecnologias HTML (XHTML), CSS, Javascript, FLASH, AJAX e PHP. - Adobe Photoshop CS4: Para criação de wireframes, layout de páginas, estudo das malhas e tratamento de imagens. - Abobe Flash CS5: Para criação de estruturas de animação para menus e cabeçalho. - Adobe Fireworks CS4: Para tratamentos pontuais de imagens, produção e compactação de arquivos png com canal alpha. - SmartDraw 2010: Para desenhar o mapa estrutural do website. - CorelDRAW X3: Para a recuperação de imagens originais do acervo do jornal. - Microsoft Office Word 2007: Para redação e revisão de textos.

Linguagens tecnológicas: - HTML(HyperText Mark-up Language) e XHTML (eXtensible Hypertext Markup Language): Linguagens de marcação de hipertexto utilizadas para o desenvolvimento e criação dos documentos do website e abrigar, entre seus códigos, a integração com outras linguagens. - CSS (Cascading Style Sheets): Linguagem de estilo utilizada para definir a apresentação de documentos web desenvolvidos com as linguagens de marcação HTML e XHTML. Com seu uso pude separar o formato dos conteúdos de cada página do website do jornal. Procurei construir e aplicar CSS de modo avançado,

131

via arquivo externo, para facilitar futuras alterações e permitir maior otimização de tempo no controle dos estilos aplicados. - Javascript: Linguagem de programação que se utiliza de scripts para ser lida em multiplataforma, e que ao ser combinada ao HTML permite maior dinamismo e interatividade às páginas do site. Utilizei javascript para implementar, por exemplo, os recursos de aumentar e diminuir letras, carregar imagens ampliadas via lightbox, funções de impressão, conexão com o Google Analytics, entre outros. - AJAX (Asynchronous Javascript And XML): AJAX não é uma tecnologia propriamente dita, mas sim uma fusão de tecnologias que tem a linguagem javascript como principal recurso e mais um conjunto de normas e padrões da linguagem XML (eXtensible Markup Language). Essa fusão permite alto poder de interação e diálogo funcional. Através de AJAX muitas informações podem ser carregadas de maneira precisa, fácil e ágil. Utilizei um script AJAX como grande diferencial para o carregamento de conteúdos no website do jornal Essência Vital. Com AJAX pude estabelecer uma estrutura dinâmica no centro da interface e evitar que o usuário seja direcionado para uma nova página cada vez que deseje acessar um novo conteúdo. Deste modo, mantive uma estrutura de navegação fixa na interface, que se mantém estável ao longo de toda a navegação, e apenas uma área central que sofre alternância de conteúdos conforme as escolhas do usuário. Isso foi pensado para otimizar tempo de carregamento, promover aderência visual, apreensão de informações e potencializar aspectos de usabilidade. Vale ressaltar que precisei vencer algumas barreiras com o uso dessa "tecnologia" para fazê-la interagir e ser acionada via actionscript no Flash. Enfim, o uso de AJAX possibilitou uma resposta moderna e sofisticada para uma aplicação dinâmica no website. - Actionscript (Flash): Linguagem de programação baseada em ECMAScript (linguagem script padronizada pela European Computer Manufacturers Association) usada para controlar filmes e aplicações do software Adobe Flash, e que permite programação orientada a objetos. Em função do hibridismo estrutural do website do jornal com ênfase em aspectos dinâmicos optei pela construção de alguns elementos da interface com a tecnologia Flash. Trabalhar com animações pontuais

132

na interface era uma premissa para valoração de conteúdos textuais e visuais. A linguagem actionscript também está implícita da estrutura flash da plataforma Issuu que é utilizada para a navegação nas edições digitais. - PHP (Hypertext Preprocessor): Linguagem para programar scripts que interajam com o servidor, e que pode ser embutida no código HTML. Neste projeto está sendo utilizada para comunicação com o banco de dados MySQL. - MySQL - Sistema de gerenciamento de banco de dados que utiliza a linguagem SQL (Linguagem de Consulta Estruturada, do inglês Structured Query Language) como interface. É o banco de dados que está sendo usado no servidor do website do jornal Essência Vital para recebimento e armazenamento de mensagens e cadastros estabelecidos via formulário de contato e comentários.

Licenças: Na era do compartilhamento e das grandes trocas de conhecimento na internet, não seria condizente com o espírito visionário e norteador do jornal Essência Vital que seu website adotasse uma postura protecionista, restritiva e excludente. Nesse sentido, todo o conteúdo produzido ao longo dos oito anos de sua publicação, e que agora estará disponível na World Wide Web, não será resguardado sob Copyright. Ou seja, o website do jornal Essência Vital tornou-se signatário das inovadoras licenças Creative Commons, que permitem cópia, distribuição e republicação de conteúdos, desde que citada a fonte e não comercializados. Esta iniciativa ratifica o compromisso do website com a inclusão, a partilha e a coletividade. Para leitura integral da licença (versão 3.0) com atribuição não-comercial adotada por este projeto acesse: http://creativecommons.org/licenses/by-nc/3.0/br/legalcode

Figuras 121 e 122 - Logos das licenças Creative Commons adotadas pelo website do jornal Essência Vital.

133

4 - CONCLUSÃO

No decorrer de minha jornada pessoal presenciei a transição de etapas importantes no campo das mídias gráficas com o advento das modernas tecnologias. Do retoque artesanal de fotolitos analógicos, durante muitas madrugadas e há pouco mais de 15 anos, até a presente década das poderosas ferramentas e recursos digitais, estive sempre atento aos processos de evolução tecnológica relacionados com a comunicação e o design. Observei e ainda observo um contingente de apartados dessa irreversível transição para uma nova etapa da vida humana influenciada cada vez mais pelo progresso tecnológico. Não duvido que penetramos em um tempo onde o acesso ao conhecimento e a informação se tornaram condições imperativas à nossa emancipação profissional, intelectual, financeira, social e até espiritual. Neste sentido, concluo este projeto após seis meses de intensos estudos, pesquisas e implementações, com a certeza de sua imensa valia e contribuição à sociedade. Transpor um acervo analógico de conhecimentos atemporais e compartilhá-los de maneira virtual, solidária e sem fronteiras é uma maneira de fornecer humilde legado para aqueles que buscam o despertar de suas potencialidades. A integração consciente de processos e recursos de áreas do design e da computação resultaram num trabalho voltado para o canal mais democrático e libertário já criado pela humanidade: a internet. Se há alguns anos estávamos privados de um poder maior de comunicação e interação, hoje a World Wide Web significa a ruptura dessas limitações, concedendo voz ativa a milhões de pessoas e organizações através do compartilhamento e ações colaborativas em rede. Dentro desse contexto, o jornal Essência Vital poderá agora, através de seu website, continuar contribuindo para o engrandecimento coletivo de um novo e ilimitado número de leitores.

134

REFERÊNCIAS - BIBLIOGRÁFICAS E SITOGRÁFICAS

•

AVELLAR & DUARTE, Consultoria em Design. Arquitetura da Informação. Disponível em: <http://www.avellareduarte.com.br/projeto/desenvolvimento/index.htm> Acesso em 10 jun. 2010.

•

BUDD, Andy. Criando páginas Web com CSS - Soluções avançadas para padrões Web / Andy Budd com Cameron Moll e Simon Collison: tradução Edson Furmankiewicz, Carlos Schafranski, Docware Traduções Técnicas; revisão técnica Nivaldo Foresti. São Paulo: Person Prentice Hall, 2006.

•

BUGAY, E. L., ULBRICHT, V. R. Hipermídia. São Paulo: Visual Books, 2000.

•

CARVALHO, K. B. Hipertexto na Educação. Kassandra Brito de Carvalho. Disponível em: <http://www.pedagobrasil.com.br> Acesso em: 27 maio 2010.

•

CREATIVE, Commons. Licença Creative Commons - Atribuição-uso não-comercial 3.0. Disponível em: <http://creativecommons.org/licenses/by-nc/3.0/br/legalcode> Acesso em: 25 maio 2010.

•

CRUZ, Renato. Jornais Gratuitos na Rede. Renato Cruz. Disponível em: <http://blogs.estadao.com.br/renato-cruz/jornais-gratuitos-na-rede/> Acesso em: 14 mar. 2010.

•

ENAP - Material do curso de "e- MAG - Modelo de Acessibilidade de Governo Eletrônico" - ministrado pela Escola Nacional de Administração Pública - janeiro 2007. Disponível em: <http://www.acessibilidadelegal.com/13-guia.php> Acesso em: 05 abr. 2010.

135

•

GARRETT, Jesse James. The Elements of User Experience. USA: New Riders Publishing in conjunction with the American Institute of Graphic Arts, 2003.

•

GREIMAS, A. J., COURTÉS, J. Dicionário de Semiótica / Algirdas Julien Greimas & Joseph Courtés. São Paulo: Contexto, 2008.

•

HARRISON, S. M. Opening the eyes of those who can see to the world of those who can't: a case study - Technical Symposium on Computer Science Education Proceedings of the 36th SIGCSE technical symposium on Computer science education, 2005.

•

HERNANDES, N., LOPES, I. C. Semiótica: objetos e práticas. São Paulo: Contexto, 2005.

•

ISSUU - ANÁLISE INFO. Revista Info. Disponível em: <http://info.abril.com.br/downloads/webware/issuu> Acesso em: 05 abr. 2010.

•

JÚNIOR, J. F. Oliveira; FERREIRA, S. B. Leal. Guia de Referência em Acessibilidade e Usabilidade Web (versão 2.0). Rio de Janeiro: UNIRIO - Universidade Federal do Estado do Rio de Janeiro - Centro de Ciências Exatas e Tecnologia, 2010.

•

KRUNG, Steve. Não Me Faça Pensar - Uma Abordagem de Bom Senso à Usabilidade Web. Rio de Janeiro: Alta Books, 2008.

•

LIMA, Andreza. Fases de Transposição da Mídia Impressa para On Line. Disponível em: <http://andrezalimajornalista.blogspot.com/2009/03/fases-de-transposicao-damidia-impressa.html> Acesso em: 05 maio 2010.

•

LIVIO, M. The Golden Ratio: The Story of Phi, the World's Most Astonishing Number. Broadway. USA, 2002.

136

•

MACHADO, E.; BORGES, C.; MIRANDA, M. Modelos de produção de conteúdos no jornalismo digital baiano. Trabalho apresentado no Colóquio Brasil-Itália, XXVI Intercom, Belo Horizonte, Minas Gerais, 2003.

•

MEMÓRIA, Felipe. Design para a Internet: projetando a experiência perfeita / Felipe Memória. Rio de Janeiro: Elsevier, 2005.

•

McKINLEY, Tony. Do Papel até a Web - Como tornar as informações acessíveis instantaneamente / Tony Mckinley. São Paulo: Quark Books, 1998.

•

Modelo de Acessibilidade - Recomendações de Acessibilidade para a Construção e Adaptação de Conteúdos do Governo Brasileiro na Internet - Departamento de Governo Eletrônico - Secretaria de Logística e Tecnologia da Informação - Ministério do Planejamento e Gestão - Documento Referência - Versão 2.0 14/12/2005. Disponível em: <http://www.acessobrasil.org.br/> Acesso em: 05 abr. 2010.

•

NEVILE, Liddy. Adaptability and accessibility: a new framework - Proceedings of the 19th conference of the computer-human interaction special interest group (CHISIG) of Australia on Computer-human interaction: citizens online: considerations for today and the future - Canberra, Australia - Vol. 122 - pg. 1 - 10 - Novembro de 2005.

•

NICHOLL, A. R. J. O Ambiente que Promove a Inclusão: Conceitos de Acessibilidade e Usabilidade - Revista Assentamentos Humanos, Marília, v3, n. 2, pg. 49 - 60, 2001.

•

NIELSEN, Jakob; TAHIR, Marie. Homepage Usabilidade - 50 sites desconstruídos / Jakob Nielsen, Marie Tahir. Rio de Janeiro: Campus, 2002.

•

NIELSEN, Jakob. Usabilidade na Web / Jakob Nielsen, Hoa Loranger; tradução Edson Furmankiewicz & Carlos Schafranski, Docware Traduções Técnicas. Rio de Janeiro: Elsevier, 2007.

137

•

NIELSEN, Jakob; PERNICE, Kara. Eyetraking Web Usability / Jakob Nielsen, Kara Pernice. USA: New Riders Press, 2009.

•

OLSON, Judith S.; MORAN, Thomas P. Mapping the Method Muddle: Guidance in Using Methods for User Interface Design. Morgan Kaufmann Publishers Inc. San Francisco, CA, USA, 1995.

•

OUTING, Steve; RUEL, Laura. Eyetrack III. Disponível em: <http://www.poynterextra.org/EYETRACK2004/about.htm> Acesso em: 03 Jun. 2010.

•

PETRIE, H., HAMILTON, F., KING, N. & PAVANP. Remote usability evaluations With disabled people - Proceedings of the SIGCHI conference on Human Factors in computing systems. Canadá, 2006.

•

PINHO, J. B. Jornalismo na internet: planejamento e produção da informação online. São Paulo: Summus, 2003.

•

QUADROS, Cláudia Irene de. Uma breve visão histórica do jornalismo on-line. In: Congresso Brasileiro de Ciências da Comunicação, 25., 2002. Bahia. Anais... São Paulo: Intercom, 2002.

•

QUEIROZ, M. A. A Importância dos Padrões Web para a Acessibilidade de Sites. Disponível em: <http://www.acessibilidadelegal.com/23-padroes-web.php> Acesso em: 05 abr. 2010.

•

ROCHA, Geiza. Entrevista com Sérgio Charlab. Disponível em: <http://www.jornalistasdaweb.com.br/index.php?pag=displayConteudo&idConteud o=508> Acesso em: 15 mar. 2010.

•

ROSENFELD, L., MORVILLE, P. Information Architecture - For the World Wide Web / Petter Morville & Louis Rosenfeld. EUA: O'Reilly, 2007.

138

•

SALES, M. B. de & CYBIS, W. de A. Desenvolvimento de um checklist para a avaliação de acessibilidade da Web para usuários idosos - ACM: International Conference Proceeding Series in Proceedings of the Latin American conference on Humancomputer interaction, 2003.

•

SANTAELLA, Lúcia. O que é Semiótica / Lúcia Santaella. São Paulo: Brasiliense, 1983.

•

SILVA, M. S. Construindo sites com CSS e XHTML: sites controlados por folha de estilo em cascata / Maurício Samy Silva. São Paulo: Novatec Editora, 2008.

•

SILVA, M. S. Dicas sobre links. Blog do Maujor. Disponível em: <http://www.maujor.com/blog/2006/04/24/dicas-links/> Acesso em: 06 abr. 2010.

•

SPELTA, L. L. O Papel dos Leitores de Tela na Construção de Sites Acessíveis - Anais do ATIID 2003, São Paulo-SP, 23-24/09/2003.

•

TAKAGI, H., ASAKAWA, C., FUKUDA K. & MAEDA, J. Accessibility designer: visualizing usability for the blind - ACM SIGACCESS Conference on Assistive Technologies Proceedings of the ACM SIGACCESS conference on Computers and accessibility, 2004.

•

TANGARIFE, T. & MONT'ALVÃO, C. Estudo comparativo utilizando uma ferramenta de avaliação de acessibilidade para Web - Proceedings of the 2005 Latin American conference on Human-computer interaction - pg. 313 - 318 - México, 2005.

•

TORQUATO, R. C. Jornalismo digital: a forma e a produção da notícia. Ricardo Cassiolato Torquato. Dissertação de Mestrado. São Paulo: Universidade de Marília, 2005. Disponível em: <http://www.unimar.br/pos/trabalhos/arquivos/> - Acesso em: 05 maio 2010.

•

WEINMAN, Lynda. <projetando gráficos na web.3> - Como preparar imagens e mídias para a web / Lynda Weinman. Rio de Janeiro: Editora Ciência Moderna, 2001.

139

Autor: Marcos Antonio Andrade de Melo Título: Criação e Implementação de Projeto de Design de Interface para Website Biográfico do Jornal Essência Vital Subtítulo: Do impresso analógico à interface digital web, um projeto de transposição de mídia Tipografia: Família Calibri Size: legendas, 8; citações, 9; agradecimento, 10; texto, 12; subtítulos, 14; títulos, 16 Entrelinha: 1,5 Na web: www.jornalessenciavital.org.br Impressor: Bureau Power Image - Rua da Ajuda, 35 - Rio de Janeiro - (0xx)21 2532-5138 Local e Data: Rio de Janeiro, 29 de junho de 2010

140