Relatório - Projeto Estação Bauru by Matheus Bonetti

Trabalho de conclusão de curso

Projeto Estação Bauru Objeto de aprendizagem hipermídia sobre a história ferroviária da cidade de Bauru

Matheus Henrique Bonetti

Orientação: Profª. Drª. Mônica Moura

Grupo de pesquisa Design Contemporâneo: sistemas, objetos e cultura

Design FAAC - Faculdade de Arquitetura, Artes e Comunicação

Agradecimentos Agradeço e dedico esse projeto aos meus pais, Donizete e Marta, e à minha irmã, Juliana, meus primeiros e melhores mestres, inclusive de design. Ao João Brizzi, pelo apoio e companheirismo, pelas broncas e dicas, pelo incentivo e pela procrastinação, e por todos os momentos. Aos meus grandes amigos, os que já me acompanham há anos e os que fiz em Bauru. Aos companheiros de moradia e de faculdade. Em especial: Anderson Saito e Mariana Ozaki, que me inspiraram e deram tanta força para este trabalho. À professora Mônica Moura, orientadora deste e de outros projetos, amiga deste e de outros momentos, pela partilha de seu conhecimento e sabedoria durante esses anos. Às equipes MStech e G&T, pelo aprendizado enorme e incomparável. À todos os docentes do curso de Design da UNESP de Bauru.

À Deus, que dá vida a todos os seres viventes, pois minhas obras não sou eu quem as realiza, mas a Sua força que permeia os céus e a Terra.

Muito obrigado, muito obrigado.

Sumário

Proposta de abordagens interdisciplinares

07 Introdução

30 24

Educação & Design

Design de interação & interfaces digitais

Parte I

Base Teórica

didáticos 17 Materiais & hipermídia Elaboração da interface do usuário

Escolha do assunto: históra ferroviária

39 36

Plano instrucional

Visão do aplicativo

Parte II

Desenvolvimento

Desenvolvimento e programação web

64 Considerações finais Parte III

Resultados e considerações

Referências e bibliografia

Introdução O surgimento e a popularização da internet e dos computadores pessoais nas últimas duas décadas trouxeram à civilização um novo contexto baseado na instantaneidade da transmissão de informações. As chamadas “novas mídias” já deixaram de ser novas e passaram a ser parte intrínseca da vida humana. À isso soma-se o desenvolvimento dos dispositivos móveis: as fronteiras arquitetônicas do acesso à internet que se tinha com os computadores pessoais até poucos anos atrás foram derrubadas, e os celulares, por exemplo, hoje permitem conexão ilimitada em qualquer lugar coberto pelo sinal das antenas de transmissão de dados. Esse panorama afeta de maneira profunda a maneira como se vive e como ocorrem as relações humanas, já que a comunicação é capaz de assumir um papel praticamente telepático. Em um contexto como esse, a informação e a maneira como ela se comporta são as primeiras afetadas. O conhecimento se torna mais acessível, mais facilmente publicável e mais democrático, ao ponto de nos sentirmos o tempo todo em meio à uma avalanche informativa na qual é difícil se guiar. O Projeto Estação Bauru pretende enxergar os pontos positivos desse contexto e propor reflexões em relação ao ensino e à educação em meio à esse turbilhão comunicativo, através da construção de um objeto de aprendizagem online, de conteúdo flexível, aberto e atualizável, e que se adapta ao dispositivo que o exibe, sendo acessível à computadores, tablets e celulares. O Estação Bauru trata sobre a história ferroviária na cidade, disponibilizando e disseminando informações sobre o assunto organizadas em um plano instrucional baseado nos conceitos de hipermídia, ou seja, um plano interativo, de linguagens híbridas e estrutura não-linear, que mescla imagens, animações, textos e interações que buscam melhorar o processo de aprendizagem através do uso de plataformas digitais. Ao tratar sobre a história da ferrovia o projeto intenciona, ainda, aproximar as pessoas da história da cidade e de como a questão ferroviária foi importante para o seu desenvolvi-

mento, incentivando a valorização e a preservação do patrimônio histórico bauruense. O presente documento descreve o processo geral do desenvolvimento deste projeto em três partes, sendo a primeira um apanhado de todos os conceitos e teorias nas quais o trabalho se apoia, a segunda um relatório mais específico da produção do objeto e a terceira uma visão geral dos resultados e considerações finais. No decorrer do texto, as questões relacionadas à minha esfera pessoal serão tratadas em primeira pessoa enquanto as que tratam do meu trabalho serão postas em terceira pessoa, a fim de se referir à orientação e colaboração da professora Mônica Moura e aos autores em cujas pesquisas me baseio.

Proposta de abordagens interdisciplinares

30 Educação & Design

24 Parte I

Base Teórica

Design de interação & interfaces digitais

didáticos 17 Materiais & hipermídia

Parte I

Base Te贸rica

Educação & Design Sempre enxerguei a educação como algo primordial para a sociedade e para cada ser humano, individual e coletivamente. Penso que a capacidade de raciocinar, de criar, transmitir e receber conhecimento é o que diferencia o homem dos outros seres vivos do planeta, e essa capacidade deve ser explorada e usada para o benefício do mundo todo por cada um de nós. E a educação, como processo de aquisição de conhecimento, transmissão e formação de saber, se mostra como um importante aspecto da vida humana. A forma como eu via a educação e o ensino, porém, foi se alterando muito com o passar do tempo. Se antes entendia a escola formal e suas ementas didáticas como pivô da educação de qualidade, hoje penso isso de forma muito diferente. Inicialmente, penso que a formação de uma pessoa vai muito além de sua experiência com o repertório preestabelecido que é adotado nas instituições de ensino formais. A importância da escola é crucial, com certeza, e certas áreas de conhecimento devem ser estabelecidas como básicas, mas acima disso, considero que a educação deve ser abordada de forma mais ampla. Para começar, é importante visualizá-la como uma soma muito dinâmica de aspectos pessoais e sociais no qual cada indivíduo está incluído: a família, os círculos sociais, o trabalho, o local onde se vive, e também a escola. Portanto, apoio o pensamento de que qualquer ambiente onde uma pessoa - criança ou adulto - se encontra pode ser propício ao aprendizado - não apenas de matemática, língua portuguesa, ou qualquer outra área “tradicional” do conhecimento (no sentido de fazer parte dos currículos do ensino formal), mas saberes que se relacionam de todas as formas possíveis com a vida em sociedade e a cultura na qual nos inserimos. A culinária é um bom exemplo: a grande maioria das escolas brasileiras não ensina nem os conhecimentos mais básicos da culinária - apesar de esta representar um saber necessário visto que se relaciona com a alimentação, a nutrição e a cultura - mas todos acabam por aprender a elaborar alguns pratos em casa, com a família, consultando livros,

sites ou através de programas televisivos. Logo, os processos de ensino e aprendizagem da culinária não se restringem à nenhum tipo de ambiente, e não deixam de ser processos educacionais, já que englobam produção e transmissão de conhecimento. Assim, tendo sempre considerado educação e ensino como fatores tão significativos na vida das pessoas, busquei desde o meu ingresso no curso de design formas de aplicar meu conhecimento, meu trabalho e minha formação universitária em melhorias para tudo o que permeia esses processos. A visão inicial que se tem do design é a que predomina no juízo que se construiu culturalmente pela falta de conhecimento existente em relação à área: uma área do saber que se foca em “tornar as coisas mais bonitas”. Essa ideia se afirma ainda mais na banalização da palavra “design”, que se observa no surgimento de práticas como o “hair design” ou o “nail design” - “design de unhas”, entre outras várias atribuições geralmente equivocadas. Porém, ao me aprofundar melhor nas verdadeiras teorias em relação ao design, pude entender melhor o verdadeiro campo de ação dessa área do saber. Tive certeza de que era possível aplicar meu trabalho no ensino e na educação quando soube que a disciplina do design não era considerada pelas instituições científicas de pesquisa como uma ciência humana e, é claro, muito menos uma ciência exata, mas uma ciência social aplicada. O nome dessa categoria, além de já falar por si próprio, aproxima a definição de design para algo que contraria a visão de “melhorador estético” e se aproxima da ideia de ciência projetual, metodológica, embasada em pesquisa e com objetivos que abrangem uma imensidão de aspectos socioculturais. Bonsiepe (1997) reforça essa perspectiva do design ao dizer que o campo de atuação do designer é a interface, e define do que esta se trata através de seu diagrama ontológico do design, reproduzido a seguir, na figura 1. A interface é a área onde uma ferramenta, a ação que ela é capaz de realizar e o seu usuário se tangem, interagem. É muito simples entender esse diagrama ao analisarmos

Figura 1: Diagrama ontol贸gico do design, adaptado de Bonsiepe pelo autor deste trabalho. Fonte: BONSIEPE, Gui. Design - do material ao digital. Florian贸polis: FIESC/IEL. 1997.

objetos simples do nosso cotidiano, como um conector de tomada, por exemplo. O usuário precisa ligar a fiação elétrica da parede ao cabo de um aparelho qualquer, mas não deve levar um choque elétrico ao fazê-lo. O ato de conectar os fios é a ação, o conector do aparelho é a ferramenta, e o envoltório do conector, que permite que o usuário segure-o sem danos, é a interface. O design atua no projeto dessa interface, selecionando um material isolante, criando um formato ergonômico e que facilite a ação. A prática projetual assume a possibilidade de ir ainda mais longe e dizer que a produção desse artefato e suas particularidades devem ser também consideradas pelo processo do design: a economia de material e/ou tempo na produção, a adequação do produto aos processos e tecnologias envolvidos, relação com aspectos socioambientais, etc. Rafael Arrivabene (2009) compara, neste sentido, o design à conhecimentos e teorias mais transcendentes, como a matemática dos números complexos e a Teoria do Caos1, e busca pensar a prática projetual se aplicando à reações em cadeia, “dízimas periódicas” e estruturas fractais, propondo uma preocupação que vai desde o início do processo, passando pelas consequências que ele pode gerar de forma mais abrangente possível e, inclusive, colocando a figura do designer como uma parte do projeto e um alvo subsequente de seu próprio trabalho, ao invés de criar equações projetuais com apenas algumas poucas variáveis. Somando esses conceitos, vimos que as preocupações do designer ultrapassam e transbordam abundantemente os limites da estética, e permeiam um processo desde a ideia primordial que o gera, passando pela sua produção, pela forma como ele atinge toda a sociedade e os meios em que transita, pelo seu impacto ambiental, terminando em sua finalização, reciclagem ou descarte.

1. Teoria que busca explicar o funcionamento de sistemas complexos e imprevisíveis, nos quais um pequeno evento gera consequências de grandes proporções (Marques, 2007).

Proposta de projeto em design e educação Tendo essas questões como base, busquei refletir sobre um projeto de design capaz de cumprir uma função sociocultural na educação e desencadear um processo vasto, capaz de colaborar na formação de ambientes propícios ao aprendizado como os que cito acima. O resultado é um conjunto de ideias propostas para o design de materiais didáticos digitais, pautado no que conheci, aprendi e experienciei durante os últimos quatro anos de formação universitária. Esse conjunto de aspectos foi aplicado no desenvolvimento do Projeto Estação Bauru, um aplicativo online de aprendizagem sobre a história ferroviária da cidade de Bauru, um tema escolhido como forma de gratidão à cidade que se tornou meu lar nesse período de vida universitária. Para apresentação desse projeto de conclusão de curso, tratamos especificamente da história da Estrada de Ferro Noroeste do Brasil, que teve seu marco zero nesta cidade e foi de grande importância para o crescimento e desenvolvimento do país.

Materiais Didáticos & Hipermídia Ao pensar em como o design poderia trazer resultados positivos no processo de aprendizagem que se dá entre um usuário e um material didático, percebemos que tal processo poderia se desenrolar de maneiras tão distintas que o formato desse objeto era um conceito bastante aberto, com muitas possibilidades, e que deveria ser definido e focado antes de tudo. A soma de minha formação e o desenvolvimento de meus interesses de atuação ampliou-se durante os últimos 14 meses, quando tive a oportunidade de estagiar como designer na MStech, uma empresa de Bauru que é considerada uma das maiores do ramo de Educação e Tecnologia no país. Tive contato durante esse tempo com o conceito de objeto de aprendizagem. Um objeto de aprendizagem consiste em um material didático, digital ou não, que pode ser utilizado, reutilizado e aplicado em contextos de ensino presenciais, à distância ou mistos - quando os dois primeiros se complementam -, para auxiliar na aplicação, obtenção e/ou fixação de determinado conteúdo por parte dos estudantes. A construção de um objeto de aprendizagem também não se limita à uma tecnologia específica, o que permite liberdade no uso de diferentes conhecimentos em seu desenvolvimento. Através disso, alguns objetos de aprendizagem possuem um grande potencial interativo, misturando, de maneira bastante dinâmica, imagens, sons e animações ao conteúdo que se pretende passar, incluindo efeitos, games e atividades lúdicas ao processo de ensino-aprendizagem. Representamos na figura 2 um exemplo de como pode se estruturar um objeto de aprendizagem. As informações contidas na lição são apresentadas de forma aberta e não-linear, permitindo que elas sejam acessadas na ordem preferida do usuário. Diversos recursos digitais costumam ser utilizados na apresentação dessa informação: ilustrações e animações, som e narração, além de interações simples com o usuário. Por fim, a atividade o ajuda a aplicar o que acabou de ver

através de jogos interativamente ricos, questionários animados entre outras possibilidades de experiências. Porém, os projetos nos quais mais atuei durante essa experiência de estágio envolviam os cursos de ensino a distância. As estruturas dos cursos a distância separam o conteúdo em módulos de informação menores, que são liberados pouco a pouco aos cursistas, acompanhados por atividades avaliativas e, normalmente, um fórum de discussão sobre o assunto do módulo. O esquema representado na figura 3 mostra uma estrutura básica de um curso online a distância, com os módulos divididos em semanas e contendo várias páginas. Os formatos descritos, objeto de aprendizagem e curso a distância, se diferenciam em vários aspectos. Enquanto os objetos de aprendizagem costumam tratar normalmente de assuntos mais pontuais, com roteiros didáticos que possuem recortes bem definidos, os cursos a distância são capazes de estender-se e atualizar-se mais facilmente através da inclusão (ou retirada) de informações de uma página ou módulo do curso. Por sua vez, os objetos de aprendizagem costumam ser mais interativos e lúdicos, enquanto os cursos a distância se assemelham à algo como uma apostila multimídia. Apesar disso tudo, observa-se que os dois formatos também possuem uma semelhança primordial: ambos se baseiam em suportes hipermídia para o seu desenvolvimento.

Hipermídia Para se entender o que é a hipermídia é necessário, antes, compreender o conceito de hipertexto. Ao contrário dos textos comuns - que são hierarquizados de maneira linear e, em certos casos, até cronológica - o hipertexto segue uma lógica não-linear e conecta as informações através de estruturas em forma de rede, interligando módulos informacionais e possibilitando a navegação entre eles. Na hipermídia, essa ideia se expande para outras linguagens, hibridizando texto, imagens estáticas e dinâmicas, sons, vídeos, entre outros possíveis

Figura 2: Exemplo de estrutura de objeto de aprendizagem. Do autor deste trabalho.

Figura 3: Exemplo de estrutura de um curso online a dist창ncia. Do autor deste trabalho.

2. O termo interator se refere ao usuário e ao papel que este representa nas mídias digitais, baseado na maneira ativa, participativa e interativa através da qual ele atua no processo de comunicação, diferenciando-o de um simples receptor (Moura, 2003).

tipos de estímulos sensoriais, todos conectados em rede e passíveis de navegação e interação. Essas linguagens, então, se associam “(...) em uma fronteira fluída de sua linguagem referencial e assumem características que determinam uma nova e outra linguagem” (Moura, 2003, p. 143). As vantagens de se utilizar técnicas hipermidiáticas em aplicações educacionais são numerosas. Seu caráter cartográfico, onde as informações se conectam através de relações, formando um mapa tridimensional e repleto de ligações, se assemelha à maneira como o cérebro humano processa a informação, facilitando a assimilação. Seu potencial híbrido permite o uso de muitas linguagens distintas ao mesmo tempo, transmitindo uma informação através de diversos viéses e estimulando mais de apenas um sentido. Porém, o principal ponto é que a hipermídia possibilita que o usuário navegue livremente entre os nós de sua rede, transformando-o em interator2, o que dá à ele a chance de traçar seus próprios caminhos através das informações transmitidas, adequando o conteúdo às suas necessidades e vontades e, em alguns casos, até alterando-o, complementando-o. Conhecendo melhor a definição real de hipermídia, concluimos que alguns recursos proporcionados pelas plataformas hipermidiáticas poderiam ser melhor aproveitados na construção de um material didático, com base nos projetos que pude observar. Os cursos a distância online, apesar de se utilizarem de tecnologias multimidiáticas para exibição mais dinâmica das informações, como imagens e vídeos, ainda possuem estrutura um tanto quanto linear. Trata-se de um fenômeno comum no design de produtos baseados em novas tecnologias: como explica Moura (2003), características de objetos anteriores são herdadas e transpostas para a nova plataforma, portanto essa linearidade possivelmente vem da forma como se organiza um livro didático, dividido em capítulos que são passados aula a aula. Já os objetos de aprendizagem observados são ricos em experiências interativas e estruturas de navegação não lineares, mas são mais fechados e breves em relação aos assuntos dos quais tratam.

A proposta para o Projeto Estação Bauru buscou incluir as características positivas de cada um desses formatos citados. O roteiro instrucional do material a ser criado foi pensado de maneira menos linear e mais interativa, permitindo maior liberdade por parte do usuário, e a estrutura que se originou desse planejamento manteve-se aberta para inclusão e atualização de informações e módulos. A interface do objeto se aproveitou das possibilidades que a hipermídia oferece, focada na interação e na hibridização de linguagens, ao contrário de funcionar apenas como um livro com alguns aspectos hipertextuais.

Mapeando o conteúdo instrucional É importante observar que a criação de um objeto hipermídia eficaz para ensino e aprendizagem não deve tratar apenas de dispor as informações ligadas umas às outras através de infinitos links e deixar que o usuário se locomova por eles a esmo ou se perca diante de tantos estímulos e informações. Como dissemos, principalmente para a educação, os dados devem ser organizados de maneira minuciosamente calculada e projetada, e os caminhos devem orientar e, ao mesmo tempo, possibilitar liberdade para o usuário-interator. As ligações (links) e conexões devem enfatizar e facilitar o processo cognitivo, e não confundi-lo. Aqui entra um trabalho de arquitetura e design de informação, que é de crucial importância para o desenvolvimento de qualquer tipo de objeto hipermídia. O papel da arquitetura e do design de informação é dispor a informação - seja no ciberespaço, seja em uma plataforma analógica - da melhor maneira possível para que ela seja mais facilmente acessada, assimilada e transformada em conhecimento. Trata-se de uma tarefa complexa, que agrega práticas de psicologia, design, antropologia, engenharia de software, entre outros. Luiz Agner (2006) descreve o arquiteto de informação como aquele que, para organizar a informação, faz um mapeamento dela e disponibiliza esses mapas de forma facilitada

para o usuário. Gui Bonsiepe (2000) também se utiliza do termo “mapear” para descrever o processo de transpor informação para plataformas de apresentação de conhecimento, e defende essa prática afirmando que os mapas são a melhor maneira de “(...) dar estrutura à uma massa de dados e então traduzi-la em formatos audiovisuais com padrões de rede para navegação” (Bonsiepe, 2000, p. 7, tradução livre). Vê-se então que a criação de mapas corresponde a um método bastante adequado de estruturação da informação para um objeto de aprendizagem hipermídia. Os usuários desses objetos devem ser capazes de acessar, navegar e interagir com as informações dispostas nestes mapas através das ligações estabelecidas pelas técnicas de arquitetura e design de informação que, apesar de serem pré-definidas para uma navegação mais orientada, podem ser recombinadas de diversas formas.

O sistema mediador A não-linearidade e a interatividade dos sistemas hipermídia fazem surgir ainda uma outra questão, referente às respostas narrativas que são oferecidas ao usuário. Machado (2007) discorre que nas mídias digitais exclui-se a figura de um narrador - presente nos romances e filmes - já que a narrativa desses meios cria-se em tempo real, pelo próprio ato interator. A estrutura de um objeto para o ciberespaço “(...) deve existir como um repertório de situações manejado por uma espécie de máquina de simulação, capaz de tomar decisões em termos narrativos, com base em uma avaliação das ações exercidas por esse receptor ativo e imerso” (Machado, 2007, p. 143-144). À essa máquina de simulação associa-se o trabalho de processar os dados recebidos pela interação do usuário, combiná-los à informação do mapa do objeto e, através dessa soma, transportar o interator para o local mais adequado ao seu input no ambiente informacional. A criação do mapa informacional acima citado funciona, portanto, como um “roteiro”, uma estratégia eficaz para guiar o funcionamento e as ações desse sistema mediador, base-

ando-se nas ações do usuário. Em lógica de programação, é comum criar-se, no projeto de um sistema, um fluxograma também não-linear que estrutura todas as ações do programa, demonstrando quais vão ser suas possibilidades de processamento de dados. O mapa criado, com as informações dispostas em um formato não linear mas de forma organizada e dotada de critérios, trabalhando a proximidade das informações para ligá-las, se integrará à lógica do sistema por trás da interface e possibilitará que o interator se locomova pelo espaço informacional de maneira aberta e multi-direcional, porém orientada.

Design de interação & interfaces digitais Voltando à definição de interface de Gui Bonsiepe e ao seu diagrama ontológico do design, trocamos, na figura 4, os elementos do modelo em questão a fim de demonstrar do que se trata a elaboração de uma interface para o ciberespaço.

Figura 4: Diagrama ontológico do design, adaptado de Bonsiepe pelo autor deste trabalho, com adição das variáveis relacionadas ao presente projeto. Fonte: BONSIEPE, Gui. Design - do material ao digital. Florianópolis: FIESC/IEL. 1997.

A ação, em primeiro lugar, se torna o acesso à informação contida no objeto. O aplicativo deve ser capaz de permitir que o usuário receba a informação nele presente, entenda-a da melhor maneira possível e, no caso de uma aplicação para ensino, transforme-a em conhecimento. A ferramenta, nesse caso, é o sistema que sustenta a aplicação, as ligações e estruturas por trás do visual do objeto. Trata-se do sistema mediador sobre o qual falo também na primeira parte do texto. Todo sistema computacional possui dois lados, devendo ser um deles inteligível ao computador e o outro inteligível ao ser humano. A ferramenta é o lado inteligível ao computador que, sem a interface (o lado do humano), se torna ininteligível e inutilizável para o usuário. O usuário aqui é o interator, aquele que interage com a ferramenta (o sistema mediador) para executar uma ação (acessar a informação). No caso dos aplicativos didáticos, é o estudante. No centro dessas três figuras, representando o campo onde elas interagem, está a interface, que deverá preocuparse com inúmeros fatores específicos para objetos hipermídia que se encontram no ciberespaço. Uma primeira particularidade diz respeito à matéria-prima utilizada. Voltando àquele conector de tomada citado no início do texto, vemos que a função do designer é a de, seguindo o que diz Flusser (2007), “informar a matéria”, dando à ela a forma que criará a interface adequada para a ação de conectar a tomada com segurança, ergonomia e eficácia. Segundo Royo (2008), para o caso do design de interfaces digitais, não é mais a matéria que devemos informar, e sim a linguagem.

“

O nosso material de trabalho (...) é a linguagem (sinais, textos, hipertexto, imagens, pictogramas, esquemas etc.). A ela damos forma para fazer com que os aparelhos (objetos, sites, menus de celulares ou de televisões digitais etc.) possam ser usados, sejam claros, orientem o usuário, comunicando uma identidade visual e uma série de possibilidades de ação.” (Royo, 2008)

Vemos aqui que o design de interfaces vai bem além de apenas tratar do software através da sua dimensão visual, estética. Um conceito crucial é a usabilidade, que afirma perfeitamente o papel do design no diagrama ontológico representado acima, pois conclui que o papel da interface é o de tornar a aplicação “usável”, funcional e facilitar ao máximo a execução da ação pelo usuário. Bonsiepe se refere à isso dizendo que “(...) a função do design da interface consiste em ajudar o usuário a construir um modelo mental na sua cabeça que reproduziria o conhecimento do programador, que tem uma visão íntima dos detalhes de funcionamento do programa” (Bonsiepe, 1997, p.41). Porém, a preocupação gráfica não deve ser deixada de lado. Uma boa interface gráfica de usuário deve equilibrar os fatores usabilidade e estética, e até mesmo combiná-los, tornando a eficácia da interface ainda maior. A criação de metáforas visuais são um grande exemplo de como essa combinação pode acontecer: o usuário tem experiência no uso de determinados objetos em seu cotidiano e é possível aproveitar essa experiência para criar elementos e ações num programa que se assemelhem à ações comuns, facilitando-as.

Potencial de acesso e novas tecnologias

3. Termo que designa a internet com capacidade de transmissão de dados em alta velocidade.

As plataformas de hipermídia e a maneira como têm se desenvolvido nos últimos anos permite, ainda, um maior potencial de acesso de um objeto construído seguindo essas ideias. Especialmente devido ao fato de a internet ser a rede, o espaço onde a hipermídia mais se apresenta. Devemos destacar que, em primeiro lugar, o advento da banda larga3 permite que aplicações mais complexas sejam transferidas através da web. Nota-se, ainda, um aumento rápido e constante da porção populacional do planeta com acesso à rede mundial de computadores, tanto que ela deixa de ser apenas uma ferramenta de comunicação para se tornar um ambiente de convergência midiática extremamente poderoso e onipresente,

ao passo de alguns países a considerarem como um direito social de todo o cidadão – inclusive o Brasil, pela Proposta de Emenda à Constituição nº 6 de 2011, que aguarda aprovação no Senado Federal. O acesso à web também não se restringe mais aos computadores pessoais, mas se torna possível através de dispositivos móveis e portáteis. Logo, ao se disponibilizar uma aplicação de ensino na internet, torna-se possível que ela seja acessada por um número incontável de pessoas ao redor do mundo.

Dispositivos Móveis O telefone, que surgiu como um aparelho para comunicação sonora instantânea, evoluiu e passou a agregar incontáveis funcionalidades, que vão da câmera acoplada ao acesso à internet sem fio, e alterou sua abrangência espacial, se livrando dos limites do fio e passando a depender apenas do alcance das antenas de telefonia móvel - que pode cobrir cidades inteiras. Os pontos de internet sem fio se tornam cada vez mais comuns, assim como os serviços de internet móvel e rápida. A soma desses fatores coloca o telefone celular como um suporte em potencial para o desenvolvimento de aplicações online com diversos objetivos - inclusive o ensino, é claro. Destaca-se ainda o surgimento de uma nova categoria de aparelhos: os tablets. Esses dispositivos assemelham-se aos telefones celulares modernos em vários aspectos, apesar de, dependendo do modelo, não serem capazes de realizar ligações ou enviar mensagens SMS4. Os tablets acessam a internet, abrem e editam documentos variados, aceitam a instalação de aplicativos para fins diversos e são pensados para serem móveis, permitindo quase a mesma liberdade espacial de acesso à internet que se vê nos celulares. A principal diferença, porém, diz respeito às possibilidades que o tamanho da tela dos tablets - que varia entre 5 a 12 polegadas, enquanto os celulares não costumam passar de 3 ou 4 - trazem ao de-

4. Sigla para Short Message Service, ou serviço de mensagens curtas, uma funcionalidade comunicativa importante nos telefones celulares.

senvolvimento de interfaces. O espaço maior permite melhor aproveitamento dos layouts, uso de mais imagens, textos mais bem diagramados e maior conforto na navegação. O que se observa a partir de todos esses fatores acima descritos é que a variedade de dispositivos com alto potencial de conexão é grande, mas todas essas conexões acabam por convergir na internet. Computadores, celulares e tablets possuem sistemas operacionais diversos, características próprias e distintas, mas são todos capazes de acessar o mesmo contexto informacional. Esse panorama multiplataforma pode ser enxergado como um complicador para a criação de aplicações online, mas a abrangência de aplicações pensadas considerando esses fatores é muito maior, e surgem também técnicas que driblam as dificuldades e resolvem-nas de maneira eficaz e criativa. Nesse caso, a principal prática que se discute atualmente é o design responsivo de interfaces.

Design Responsivo O design responsivo surge dessa multiplicidade de plataformas, e consiste na definição de diagramações, dimensões e disposições dos elementos de um layout que respondam à resolução e à orientação do dispositivo que o exibe, além de sua capacidade de interpretação de certas linguagens de programação web e de preferências do usuário, já que é totalmente inviável desenvolver versões específicas para cada tipo de aparelho existente. Marcotte (2010) diz que o termo “design responsivo” deriva de “arquitetura responsiva”, uma recente área que estuda e constrói estruturas arquitetônicas capazes de receber estímulos dos usuários ou do ambiente e, de alguma forma, se adaptar ou responder à esses estímulos. Inicialmente, suas aplicações têm se restringido à instalações artísticas, mas muito se pode pensar em relação a como esse tipo de conhecimento pode ser explorado em situações reais, possibilitando a construção de ambientes que alteram sua iluminação de acordo com ações do usuário, por exemplo.

Knight (2012) afirma que o design responsivo não se resume apenas à criação de layout fluidos que se redimensionam de acordo com o tamanho da tela do dispositivo. Ao mudar de plataforma, devem-se considerar todas as suas características físicas e de desempenho e projetar alterações automáticas para cada uma dessas particularidades. Apenas para citar um exemplo: computadores pessoais costumam possuir um cursor na tela, que depende de periféricos como o mouse ou o touchpad dos notebooks para ser controlado pelo usuário. Enquanto isso, tablets e smartphones modernos utilizam a interação direta entre o usuário e a interface através da tela sensível ao toque. O design responsivo deve se atentar à esse tipo de diferença e gerar respostas visuais diferentes para os usuários de cada tipo de dispositivo: a dimensão do cursor dos computadores é pequena e insignificante perante as dimensões da tela, enquanto os dedos do usuário de dispositivos touchscreen são grandes e muito menos precisos. Portanto, o tamanho dos botões e links devem ser repensados para se adequar à essas características. O tamanho diminuto das telas de telefones também limita as possibilidades de diagramação e navegação, tornando necessária a sobreposição, ocultação ou até mesmo supressão de conteúdos quando exibidos em tamanhos menores de tela. Além disso, a forma como o usuário navega pela interface deve se adaptar, reposicionando e reestruturando menus e elementos de forma a facilitar o seu acesso dentro de cada contexto.

Proposta de abordagens interdisciplinares Um ponto muito importante que deve ser enfatizado e que se refere a todas as questões desenvolvidas até aqui diz respeito às diferentes áreas do conhecimento que agem em conjunto no decorrer de todo esse processo. O design, por ser uma ação projetual que age de forma global, demonstra possuir um forte caráter interdisciplinar – e até com possibilidades transdisciplinares -, o que significa que ele age em conjunto com áreas do conhecimento muito e/ou pouco distintas no decorrer desses processos. Ao aplicar isso a um projeto de material didático hipermídia, conclui-se que o design não é, de maneira alguma, autossuficiente no desenvolvimento, mas sim que necessita de conhecimentos e profissionais de outras áreas na elaboração do projeto. A figura do especialista em ensino e aprendizagem é a primeira que se mostra necessária. O designer pode auxiliar na estruturação das informações, como descrevo ao falar sobre mapeamento informacional e arquitetura da informação, mas o pedagogo terá o conhecimento profundo sobre como estruturar esses mapas de maneira ainda mais eficaz. É importante para o designer adquirir algum conhecimento sobre o assunto que será tratado no material em questão a fim de desenvolver interações, ilustrações, animações e conteúdos híbridos - os característicos da linguagem da hipermídia - que condizem com a informação a ser passada, mas é importante que esteja presente um especialista no assunto em questão, para avaliar melhor esses artifícios cognitivos e auxiliar na construção do plano instrucional. Tratando-se ainda de um aplicativo hipermídia, é importante a presença de um especialista em programação e computação, a fim de desenvolver a estrutura do sistema da forma mais correta, projetando e possibilitando navegação, interações e respostas do sistema da maneira mais adequada ao que se prevê pelos planejamentos didáticos desenvolvidos previamente e às plataformas que atuarão como suporte do objeto construído. Esses especialistas ainda possuem importância crucial na concretização de um bom projeto de arquitetura

e design de informação, no desenvolvimento das interfaces responsivas, na aplicação de testes de usabilidade, entre muitas outras funções. Podemos citar ainda os profissionais do audiovisual - já que a hipermídia permite a hibridização de linguagens diversas, como o som e o vídeo, permitindo que se produzam músicas, efeitos sonoros e narrações para esses materiais didáticos -, ilustradores e animadores, sejam eles também designers ou não, entre outras muitas profissões capazes de colaborar de alguma forma com o desenvolvimento desses objetos. Conforme cresce a complexidade do projeto educacional hipermídia, aumenta a necessidade de profissionais variados e da formação de uma equipe interdisciplinar maior e mais heterogênea. A estrutura dessas equipes deve ser horizontal e sem hierarquias de importância, pois cada área do saber possui seu papel no desenvolvimento do projeto. A interdiscipinaridade se define pela atuação conjunta dos saberes, e não pela sobreposição de uns sobre os outros, criando ordens de importância. O design age globalmente e vai ser tratado como foco principal nesse projeto, mas não significa que seja o mais importante no seu desenvolvimento em detrimento de outras áreas do conhecimento.

Elaboração da interface do usuário

Escolha do assunto: históra ferroviária

39 36

Plano instrucional

Parte II

Desenvolvimento

Desenvolvimento e programação web

Parte II

Desenvolvimento

Escolha do assunto: história ferroviária O primeiro passo no desenvolvimento desse objeto didático hipermídia centra-se na elaboração do roteiro instrucional que servirá de base para o material e, para criá-lo, foi prioritária a decisão do assunto que eu trataria na sua construção. Minha intenção inicial, considerando a importância que dou à educação em contextos não formais, era a de escapar de assuntos que já são trabalhados no currículo das escolas e buscar por algo que fosse de interesse público, que desempenhasse uma função social e que me oferecesse elementos e referências interessantes para trabalhar. Nasci Amparo, cidade interiorana na região de Campinas – SP, e logo quando me mudei para Bauru, após meu ingresso na Universidade, soube que o desenvolvimento e a importância histórica dessa cidade se devem em grande parte ao seu status de maior entroncamento ferroviário do estado de São Paulo, já que era o ponto onde três estradas de ferro importantes se encontravam: a Estrada de Ferro Sorocabana, a Companhia Paulista de Estradas de Ferro e a Estrada de Ferro Noroeste do Brasil. A história ferroviária de Bauru se mostrou, então, um assunto muito interessante e, ao meu ver, completo, que cumpriria todas as funções que eu esperava para meu projeto. Primeiramente, trata-se de um conteúdo que pode ser interessante para muitas pessoas e não se restringe à idades, classes ou profissões: a história da ferrovia, da cidade e do país estão intimamente ligadas, e isso dá motivos a qualquer pessoa para se aprofundar mais no assunto. Em segundo lugar, divulgar um aspecto histórico e a forma como isso se reflete na realidade em que vivemos hoje, conscientiza sobre a importância do patrimônio histórico e cultural desta cidade e incentiva sua organização e preservação. Um estudo histórico ainda permite uma exploração muito interessante em objetos hipermídia devido às várias vertentes pelas quais ele pode ser abordado: um fato histórico pode ser explicado através de, por exemplo, aspectos geográficos, culturais, tecnológicos ou mesmo históricos, a partir do uso dos

vários recursos que a hipermídia proporciona: mapas, imagens, vídeos, animações, sons, infográficos, linhas do tempo, links, entre muitos outros. Falar sobre a história da cidade de Bauru é, ainda, uma maneira de demonstrar minha gratidão a essa cidade por ter se tornado meu lar desde o ano de 2009. Penso que estudar em uma universidade pública é, infelizmente, uma oportunidade ainda limitada em nosso país, e nada mais justo do que retribuir, através do meu trabalho e conhecimento, à comunidade da cidade que sedia a universidade e o campus que me formaram como verdadeiro designer.

Plano instrucional

início do processo projetual Tendo definido esse tema, fez-se necessário um levantamento bibliográfico específico do assunto, que é muito amplo. Como discorro na Parte I desse relatório, ao propor abordagens interdisciplinares para esse tipo de projeto, a tarefa de recolher, organizar e formatar o conteúdo didático para o objeto hipermídia de ensino-aprendizagem deve ser atribuída à uma equipe que contenha profissionais da pedagogia, da educação e especialistas no assunto em questão. Na circunstância em que este trabalho se desenvolveu, porém, não foi possível receber o apoio destes profissionais, e nesse caso o processo “interdisciplinar” foi todo desempenhado por mim mesmo, relacionando os conceitos e assuntos advindos de outras áreas por meio do estudo e da pesquisa desenvolvida através da revisão de literatura e de levantamento de dados. Nesse sentido, a bibliografia coletada foi de grande importância, pois serviu de base principal para o plano pedagógico do objeto de ensino que foi desenvolvido. A revista História Viva, uma importante publicação mensal sobre história no país, circulando desde 2003 pela Duetto Editorial, costuma lançar edições especiais sobre assuntos específicos. Em 2008, publicou a coleção Caminhos do Trem, em seis volumes que tratavam da história ferroviária do Brasil de forma extremamente detalhada e completa, indo do surgimento das primeiras estradas de ferro na época cafeeira até a decadência do transporte ferroviário no país, abordando ainda as perspectivas de retomada e repopularização do trem no futuro. Cada volume trata de um assunto diferente, dividido em reportagens detalhadas sobre aspectos ainda mais específicos, escritos por diferentes especialistas em cada um desses assuntos, e que se mostraram como uma base muito eficiente para o plano instrucional elaborado. Por fazer parte da ideia do projeto a possibilidade de que a adição de conteúdos se mantivesse aberta para novas inclusões, para a entrega desse trabalho de conclusão de curso chegamos à decisão de nos limitar apenas à alguns recortes do assunto, entre eles a história da Estrada de Ferro Noroeste

do Brasil, visto que esta tem Bauru como seu marco inicial e foi de grande importância para a expansão do Brasil em direção aos territórios mais interioranos do continente. O volume dois da coleção citada possuía, em especial, uma reportagem bastante completa sobre a história dessa ferrovia, e foi nosso principal pilar na organização do conteúdo didático. Após termos definido o assunto e feito um recorte para iniciar o desenvolvimento do projeto, passamos a seguir as ideias já colocadas em relação à formulação de mapas instrucionais para organizar a informação. Para estruturar esses mapas era, de início, necessário fatiar o conteúdo em pedaços menores que corresponderiam aos módulos que se interligariam no mapa instrucional. Para tal, dividimos o texto sobre a Noroeste do Brasil da coleção Caminhos do Trem em partes e tópicos e, a seguir, tentamos traçar relações entre esses tópicos, fazendo a estrutura linear se tornar mais hipertextual. Além disso, foram adicionadas informações complementares aos conceitos apresentados na reportagem, estendendo o conteúdo com detalhes mais específicos como, por exemplo, dados sobre o presidente Rodrigues Alves ou a influência da Noroeste na separação do Estado de Mato Grosso. Organizamos a estrutura resultante em um mapa de informações, que pode ser visto na figura 5, com auxílio do MindMeister, uma ferramenta online de mapeamento mental disponibilizada pela MeisterLabs GmhB. Obtivemos assim uma demonstração gráfica e mais clara de como cada módulo informacional se conectava e quais seriam os traçados possíveis pelo usuário dentro daquele conteúdo. Sobre cada uma dessas informações, buscamos formas de como a hipermídia poderia auxiliar na transmissão da informação: mapas, imagens, infográficos, ilustrações, vídeos, e os associamos aos seus respectivos módulos. Tendo em vista que o aplicativo desenvolvido tem fins puramente educativos, procuramos utilizar imagens e fotografias de uso livre, de repositórios como o Wikimedia Commons da Wikimedia Foundation, uma fundação sem fins lucrativos que incentiva o compartilhamento de conteúdos livres e gratuitos de material educativo.

Figura 5: Mapa mental criado pelo autor deste trabalho para definir o plano instrucional do Projeto EstaĂ§ĂŁo Bauru. Criado no MindMeister.

Elaboração da interface de usuário Após concluirmos o mapa instrucional que serviria de base para o projeto, passamos para a elaboração da interface de usuário e a maneira como ela iria se comportar e interagir com este. Tendo em mente os conceitos de design de interfaces, usabilidade e design responsivo descritos na primeira parte desse relatório, o passo inicial foi imaginar maneiras de dispor as informações do plano instrucional em diferentes tipos de tela. Logo de início, já buscamos incluir elementos de interação e navegação aos rascunhos e, após desenhar algumas imagens primitivas das telas da interface, reproduzidas nas figuras 5 e 6, foram criados arquivos de hipertexto que as incluíam e simulavam uma navegação para formular os primeiros protótipos da aplicação.

Figura 6: Rascunhos de protótipo simples da interface em telas de celular. Do autor da presente pesquisa.

Figura 7: Rascunhos de protótipo simples da interface em telas de computador e tablet. Do autor da presente pesquisa.

A prototipagem é, segundo Klemmer, “(...) uma estratégia para lidar de maneira eficiente com coisas difíceis de se prever” (Klemmer, 2012, tradução livre) na elaboração de uma interface (seja ela digital ou não). Serve para, ainda, clarear a comunicação entre os membros da equipe que desenvolve os projetos, sendo uma ótima forma de demonstrar um aspecto interativo criado pelo designer para o programador de software, por exemplo. Protótipos devem ser simples, de rápida construção e atualização fácil, o que normalmente faz com que a aparência não seja levada em consideração de forma fundamental. O importante, nesse passo, foi testar a usabilidade e a navegação da interface, encontrar erros de estrutura e de links e corrigi-los antes da elaboração real do objeto. Uma recomendação constante em relação ao design de interfaces responsivas, que deve ser considerada ainda na etapa de prototipagem, é a questão do mobile first (Nyman, 2012). Visto que a interface se adaptará ao tamanho da tela que estiver exibindo-a, o planejamento da interface deve primeiro ser pensado como se ela fosse se aplicar apenas à dispositivos mais limitados, no caso os celulares e dispositivos mobile. O esforço inicial será, portanto, o de organizar todos os elementos da interface em um contexto visual o mais limitado possível. Após terminada essa etapa, deve-se projetar

a exibição da interface nas telas maiores, como as de tablets e computadores, ganhando agora a possibilidade de colocar os elementos de maneira mais livre. Essa abordagem se deve ao fato de que é mais fácil partir de um contexto que tange os limites projetuais, indo em direação a outro contexto que ofereça mais liberdade, do que fazer o caminho inverso. Seguindo esse conceito, tanto os protótipos quanto as telas finais foram primeiro planejadas para atender às características dos celulares com tela mais limitada. Nessa fase de prototipagem já foi possível alterar várias questões e refinar os padrões de interação e navegação de forma muito rápida e eficiente, criando uma base consistente para a construção do aplicativo. A partir disso, alguns elementos visuais já passaram a ser planejados através de um programa de editoração gráfica – neste caso, o Adobe Photoshop. Esse processo é comum no webdesign pois permite que o designer desenvolva interfaces gráficas de maneira mais rápida e irrestrita do que se fosse fazê-lo diretamente através de linguagens de marcação e programação web, evitando um bloqueio de criatividade e possibilitando visualização mais rápida dos resultados, mesmo na ausência da interação real e do retro-sistema do aplicativo. Nessa etapa, com base nos protótipos criados, foram definidas cores, texturas, formas, ícones, tipografia e diagramação, criando a imagem de algumas possíveis telas na interface. Aqui, antes de começar a definir esses aspectos, foi feito um levantamento visual de objetos que fazem parte do contexto histórico ferroviário através do registro fotográfico de artefatos expostos no Museu Ferroviário Regional de Bauru - SP, no Museu Ferroviário da Companhia Paulista, em Jundiaí - SP, e numa antiga locomotiva da E.F. Noroeste (que posteriormente passou a ser parte da Rede Ferroviária Federal) que se encontra atualmente no Bosque da Comunidade, também em Bauru. Essa pesquisa de fontes visuais e imagéticas serviu como um guia de referências muito completo, e possibilitou que se passasse uma impressão “ferroviária” através da interface gráfica.

Figura 8: Locomotiva exposta no Bosque da Comunidade, em Bauru - SP. Foto: do autor do presente trabalho.

Figura 9: BrasĂŁo da Estrada de Ferro Noroeste do Brasil, na lateral da locomotiva exposta no Bosque da Comunidade, em Bauru - SP. Foto: do autor do presente trabalho.

Figura 10: Locomotiva exposta no Museu FerroviĂĄrio de Bauru - SP. Foto: do autor do presente trabalho.

Figura 11: Locomotiva exposta no Museu Ferroviário de Bauru - SP. Foto: do autor do presente trabalho.

Figura 12: Locomotiva exposta no Museu Ferroviário da Companhia Paulista, em Jundiaí - SP. Foto: do autor do presente trabalho.

Figura 13: Placa com informações sobre locomotiva exposta no Museu da Companhia Paulista, em Jundiaí - SP. Foto: do autor do presente trabalho.

Figura 14: Malas de bagagem antigas, expostas no Museu Ferroviário de Bauru - SP. Foto: do autor do presente trabalho.

A paleta de cores foi baseada na locomotiva acima citada, verde com detalhes em amarelo e vermelho, que também são as cores presentes na bandeira de Bauru. Fizemos uma adaptação dos tons e chegamos na seguinte combinação, indicada na figura 15.

Figura 15: Paleta de cores da identidade visual. Do autor da presente pesquisa.

Com as cores definidas, passamos à criação de elementos visuais reutilizáveis, como, por exemplo, padrões para caixas de texto, botões e ícones, alguns reproduzidos nas figuras 16 e 17.

Figura 16: Estilos de caixa de conteúdo. Do autor da presente pesquisa.

Figura 17: Exemplos de botões, ícones e legendas. Do autor da presente pesquisa.

Tipografia A escolha da tipografia para aplicações que rodam na web possui características bastante particulares. Até pouco tempo atrás, era comum para documentos e aplicações web o uso de apenas um grupo bastante limitado do que se chama de fontes seguras para internet, uma seleção de famílias tipográficas mais comuns nos computadores pessoais, já que a renderização do texto nesses objetos era feita através das fontes presentes no sistema do cliente. Ou seja, se o designer de um site definisse que a tipografia utilizada seria, por exemplo, a Officina, de Erik Speakermann, e o computador do usuário daquele site não possuísse o arquivo fonte dessa família, o texto seria exibido em uma fonte diferente, presente no sistema do usuário, como uma Times New Roman. Visto que as duas famílias são totalmente diferentes, a intenção do designer seria prejudicada e a situação final do site poderia ser desastrosamente diferente da que se projetou. Entretanto, novas tecnologias de estilização web surgiram nos últimos tempos e trouxeram algumas melhorias em

relação ao uso de fontes tipográficas em sites e aplicações para a internet, desfazendo as amarras das fontes seguras. Algumas dessas tecnologias são mais complexas e exigem um certo conhecimento de linguagens de estilização web, mas algumas ferramentas também foram criadas com o intuito de permitir um melhor planejamento tipográfico para a web. Uma delas é o Google Web Fonts, um diretório de fontes livres para uso gratuito hospedado e controlado pelo Google, que permite a adição de fontes diferenciadas de maneira muito simples e rápida. O diretório ainda categoriza as famílias através de características como serifas, peso, largura e inclinação, para facilitar que o designer encontre as mais adequadas para seu projeto. Para minha aplicação, utilizei a Lora, uma família que contrasta curvas suaves com serifas retangulares e é planejada para blocos de texto com foco na exibição em tela, mas sendo também muito funcional para documentos impressos. Para criar hierarquias consistentes, utilizei suas quatro variações: Normal, Bold, Normal Italic e Bold Italic. A Lora foi desenvolvida em 2011 por Olga Karpushina, e é uma tipografia livre, gratuita e de código aberto, ou seja, pode ser utilizada, compartilhada e inclusive alterada pelo usuário para se adequar aos seus projetos. Como é característico do design responsivo que a diagramação se altere de acordo com o tamanho de tela, se tornou impossível definir alguns aspectos em relação à diagramação dos textos, já que o tamanho das linhas dependem da diagramação da interface, que se altera de acordo com o tamanho da tela do dispositivo. Se tornou impossível, portanto, uma grande liberdade em relação à diagramação das linhas e blocos de texto: restou apenas a possibilidade de fazê-los de forma a serem completamente legíveis e usáveis em qualquer tipo de dispositivo.

Figura 18: Tipografia Lora e suas variações. Desenvolvida por Olga Karpushina (2011). Aplicação da tipografia pelo autor da presente pesquisa.

Telas da interface Como resultado da soma de todos esses elementos em simulações de telas da aplicação, seguem algumas imagens, que não correspondem exatamente ao resultado final da aplicação, visto que a próxima etapa da construção do objeto ofereceu limitações e possibilidades diferentes. Nessas telas já se torna possível visualizar algumas diferenças que o design responsivo proporciona na diagramação dos elementos. Enquanto no espaço diminuto do celular algumas informações precisavam ficar ocultas e aparecer somente quando chamadas por um link ou botão, se sobrepondo a outros conteúdos presentes, na tela dos tablets e computadores torna-se possível a presença de todos os elementos na tela ao mesmo tempo, sem prejudicar a visualização de nenhum deles. Definidos alguns desses aspectos visuais e a maneira como eles se comportariam na tela, faltava desenvolver a forma como a navegação se daria entre cada um dos conteúdos. Para tal, baseei-me em algo atual e que ao mesmo tempo se relacionava ao assunto: os mapas dos trens metropolitanos. A ideia partiu do pressuposto de que a navegação deveria se adequar ao mapa instrucional criado, permitir a adição de novos conteúdos e ser navegável e inteligível para o usuário. Com o esquema do mapa de metrô, seria possível oferecer ao usuário uma ferramenta para se situar no conteúdo, escolher a direção a ser tomada e auxiliar na criação de associações de acordo com as já existentes no mapa instrucional, sem apresentá-lo à um mapa mental que teria menor conexão com a identidade do projeto. Além disso, por atingir um estado bastante minimalista, já que os mapas de metrô são praticamente gráficos e esquemáticos, eles não se confundiriam com os mapas utilizados nos conteúdos para representar locais reais, estradas de ferro ou cidades. Visto que essa ideia surgiu um pouco posteriormente à criação das imagens de exemplo de conteúdo que reproduzidas ao lado, existe uma diferença entre o esquema de navegação presente nessas imagens e no aplicativo real. Algumas

Figura 19: Exemplos da interface sendo exibida em telas de celular. Do autor desta pesquisa.

Figura 20: Exemplos da interface sendo exibida em telas de tablet e PC. Do autor desta pesquisa.

outras caracterĂsticas visuais da interface se alteraram posteriormente, como a diminuiĂ§ĂŁo do mapa em telas de tablet e computadores para uma camada separada, mantendo-o como fundo apenas nos telefones.

Desenvolvimento e programação web Uma das tarefas mais fantásticas do webdesign é a transposição de interfaces criadas como imagem para o código. É nesse momento que se possibilita a manipulação mais livre dos elementos a fim de fazê-los passíveis de interação. É quando traduz-se a interface que está na mente do designer ao mesmo tempo para o computador e para o usuário, dando vida à aplicação. O primeiro passo foi a marcação e estilização dos elementos. A linguagem de marcação mais comum da web é o HTML, sigla que significa Linguagem de Marcação Hipertexto, e que recentemente foi atualizada para sua quinta versão, popularmente conhecida como HTML5, e trouxe grandes reviravoltas no panorama tecnológico da web devido às possibilidades que essa nova versão passou a oferecer, entre elas maior integração com o Javascript, uma linguagem de programação para web, entre outras melhorias pensadas para atender o contexto tecnológico sobre o qual discorro na primeira parte do relatório, em que se considera o surgimento de dispositivos móveis, entre outros aspectos. A marcação HTML funcionou da seguinte forma: dividi primeiro os elementos que fazem parte da interface - sejam eles visíveis ou invisíveis -, hierarquizando-os e depois criando-os na página do código. Para criar um elemento HTML, basta entender qual vai ser a sua natureza na interface e, baseado numa lista de tags5 pré-definidas pela linguagem, criá -lo no código. Por exemplo, para criar um texto em parágrafo, basta que se escreva o texto dentro de uma tag de parágrafo, definida pela letra “p”, como demonstro a seguir: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

5. Pequenos blocos textuais que definem os elementos HTML, marcando seu início e seu fim.

Cada um dos elementos da interface foi marcado seguindo essa lógica. Com o documento HTML pronto, já é possível dizer que uma parte da esfera da ferramenta no diagrama ontológico reproduzido anteriormente já está executada: o navegador web e o computador já são capazes de interpretar os elementos dessa interface e torná-los existentes, mas eles ainda não são capazes de reagir à estímulos e tampouco estão programados para serem exibidos da maneira estética planejada pelo designer. Sua essência está lá, falta somar à ela as camadas que possibilitarão sua existência perante o usuário e a ação. O segundo passo da execução foi a estilização. Agora, os elementos HTML precisariam ganhar o visual planejado pelo designer através de código. Nesta etapa, o uso de algumas imagens criadas graficamente se faz necessário para aprimorar a estética da interface, como texturas, ícones, ilustrações e fotografias. Para estilização dos elementos HTML, usei o CSS - que significa Folha de Estilos em Cascata -, também a linguagem web mais popular para estilizar elementos. Assim como o HTML, o CSS foi recentemente atualizado para sua terceira versão, o CSS3, que permite que mais detalhes gráficos sejam executados sem o uso de imagens. Por exemplo, até o CSS2, era impossível criar-se uma caixa de texto preenchida com um gradiente de cores e com uma sombra externa. O CSS3 já permite esse tipo de adição gráfica, além de possibilitar o uso de transições e animações nos elementos da interface. E o mais importante: o CSS3 traz as funções necessárias para o design responsivo, permitindo que sejam definidos os momentos e as diretrizes de adaptação dos elementos HTML ao tamanho da tela e às características do dispositivo. A estilização dos elementos HTML foi descrita através da linguagem CSS em um arquivo separado do arquivo da marcação dos elementos, e que depois foi incorporado à ele. Aqui, definiram-se as cores, tamanhos, posições, tipografia e alguns comportamentos básicos de cada um dos elementos existentes na tela. Para exemplificar a adição de cor e mudança de família tipográfica ao parágrafo de texto que demonstrei acima, segue uma regra bastante simples que poderia ser descrita

num documento CSS: p { color: #ff0000; font-family: Lora Italic; } Para definição dos aspectos responsivos, usam-se as chamadas media queries, regras especiais do CSS que interpretam as características do dispositivo e redefinem essas regras. Então, se por exemplo, crio uma caixa de texto que, na tela de computador, ocupará horizontalmente 50% da tela, posso definir uma media querie que define que, em celulares, sua largura será de 90% da tela. Todos os outros aspectos de interface responsiva que foram considerados nos passos anteriores são transcritos aqui para fazer com que a visualização dos elementos se dê da maneira correta em todos os dispositivos possíveis. Após finalizar a etapa de estilização e definição dos aspectos responsivos, a aplicação está não apenas existente, mas visível e agradável aos olhos do usuário, em qualquer tipo de dispositivo e tamanho de tela. Falta apenas torná-la funcional e interativa. Para isso, foi necessário o uso de uma linguagem de programação, que no caso foi o Javascript, a mais utilizada para definir comportamentos de interação com o usuário nos aplicativos web atualmente. Estão disponíveis na internet gratuitmante várias bibliotecas e plugins que tornam a escrita do Javascript facilitada, como o jQuery6 por exemplo. Os dispositivos móveis, porém, possuem limitações em relação à essas bibliotecas, pois sua capacidade de processamento é mais baixa se comparada ao processamento de computadores, e o uso dessas ferramentas poderia comprometer a usabilidade da aplicação. Por isso, preferi utilizar a linguagem pura, permitindo que o desempenho fosse melhorado. Nos arquivos Javascript, defini padrões de interação para os elementos da interface e apliquei-os aos documentos HTML. Assim, o sistema passou a funcionar e interagir com o

6. Uma das mais conhecidas biliotecas de Javascript, serve para agilizar e facilitar a escrita de documentos nesta linguagem.

usuário através de seus inputs, entradas de informação. Um exemplo de função simples: nos aparelhos móveis, é possível fazer com que algumas caixas de texto do aplicativo se recolham para o espaço fora da tela, permitindo a visualização de elementos que estão sendo sobrepostos por elas. Um pequeno botão em forma de seta dispara essa ação, e funciona a partir de uma função Javascript que descreve que, quando o usuário pressiona o botão, a caixa de texto é animada (através de uma transição CSS) para a direita até que apenas uma parte dela apareça, permitindo que o botão possa ser pressionado novamente, fazendo a caixa de texto retornar à sua posição inicial.

Google Maps API Uma das ferramentas externas que utilizei no meu projeto para auxiliar na exibição das informações foi a API - Interface de Programação de Aplicativos - do Google Maps, popular sistema de mapas do Google. Essa API permite que todo o banco de dados do Google Maps seja utilizado em aplicações próprias, personalizando várias características e explorando praticamente todas as suas funções para se adequar às intenções de cada aplicação. Através de Javascript, é possível definir-se alterações no Maps a partir da interação do usuário com a aplicação. No caso do meu projeto, o Google Maps foi utilizado de maneiras variadas. Inicialmente, utilizei-o como mapa propriamente dito, podendo mostrar os territórios, cidades, estradas de ferro e localizações sobre as quais me referia nos conteúdos textuais, permitindo melhor assimilação dos conteúdos, indicando a distância entre o Mato Grosso e o litoral brasileiro para indicar a necessidade de uma linha de transporte mais eficaz, por exemplo. A vantagem disso é que a API do Maps permite sua estilização, podendo adaptá-lo à identidade visual da sua aplicação e tornando desnecessária a elaboração de mapas específicos para cada lição. O Maps conta ainda com fotos de

satélite, o que permite que se mostrem alguns aspectos de forma ainda mais detalhada.

Figura 21: Exemplos de exibição de mapa personalizado e imagem de satélite do Google Maps.

Depois, em algumas lições que se referiam à locais de algumas cidades, como a Estação da Estrada de Ferro Noroeste do Brasil em Bauru, por exemplo, utilizei a função Street View do Maps, que permite que o local seja acessado e visualizado como uma fotografia tridimensional do local, praticamente transportando o usuário para aquela posição.

Visão do aplicativo

64 Considerações finais Parte III

Resultados e considerações

Referências e bibliografia

Parte III

Resultados e Considerações

Visão do aplicativo Por fim, seguem alguns resultados da visão final da interface do Projeto Estação Bauru, da forma como aparecem em telas de computador, celular e tablet.

Figura 22: Tela do aplicativo Projeto Estação Bauru, exibida em celular, tablet e monitor de computador. É possível perceber que os elementos são exatamente os mesmos, mas a diagramação varia de acordo com o dispositivo, característica do design responsivo de interfaces.

Figura 23: Tela do aplicativo Projeto Estação Bauru, exibida em celulare tablet, demonstrando a diferença na forma de exibição de imagens.

Figura 24: Tela do aplicativo Projeto Estação Bauru, exibida em celular e computador. Uso de mapa do Google Maps para complementar informação textual.

Figura 25: Tela do aplicativo Projeto Estação Bauru, exibida em tablet. Uso de mapa do Google Maps para complementar informação textual.

Considerações finais Em primeiro lugar, uma das coisas que pude sentir no decorrer do desenvolvimento desse projeto se refere especialmente ao caráter ontológico do design, sobre o qual trato várias vezes nesse relatório. O design realmente é capaz de se aplicar ao cerne das coisas, ao seu estado de existência mais puro: é pela ação do design que se faz a interface, e é pela interface que os objetos existem e desempenham suas ações. E isso não faz do design um saber autossuficiente mas, pelo contrário, explicita ainda mais o seu caráter inter/transdisciplinar, sendo capaz de interferir positivamente em qualquer projeto através do auxílio e da ação colaborativa de outras áreas do conhecimento, por mais distintas que elas sejam. Além disso, gostaria de frisar que acima do objeto que está sendo apresentado como trabalho de conclusão de curso, a minha principal intenção não é a de provar algo ou muito menos de estabelecer qualquer conclusão definitiva sobre qualquer assunto aqui tratado. Pelo contrário, a ideia desse projeto é, desde o início, propor e buscar aplicar, entre outras coisas, o que se segue: • o design na sua real função, a de ciência social aplicada, trabalhando para a melhoria de aspectos sociais que possam atingir de maneira positiva o maior número de pessoas possíveis; • a exploração do seu caráter inter/transdisciplinar para realizar essa melhoria através do trabalho em equipe, de maneira horizontal e colaborativa; • um pensamento projetual mais profundo para a educação, deixando de enxergá-la apenas nas instituições de ensino formais e pensando-a na família, na sociedade, na cidade, estado, país e humanidade; • uma maior experimentação de aspectos como a mobilidade e a popularização do acesso à informação para a educação, encarando o novo contexto tecnológico e sociocultural no qual estamos inseridos, aproveitando-nos

dos pontos positivos que ele nos oferece e sabendo lidar com os negativos; • a exploração de ferramentas muito completas disponíveis na internet, como o Google Maps, para fins educacionais; • a preservação do patrimônio histórico e cultural de nossas cidades; • o surgimento de outros muitos projetos com intenções semelhantes à essas. Gostaria ainda de deixar claro que não pretendo enxergar este trabalho como um objeto finalizado, nem para a sua apresentação como projeto de conclusão de curso nem para o futuro. Seus mapas instrucionais são abertos justamente porque pretendo que essas linhas possam continuar se conectando, através de colaboração de pessoas interessadas. O aprimoramento da interface também é uma intenção futura, fazendo com que esse processo seja contínuo e melhore cada vez mais.

Referências e bibliografia AGNER, Luiz. Ergodesign e Arquitetura de Informação – Trabalhando com o usuário. Rio de Janeiro: Quartet. 2006. APPLE, Inc. Mac OS X Human Interface Guidelines. Disponível em: <http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/ OSXHIGuidelines.pdf> Acesso em 23 out. 2012. APPLE, Inc. iOS Human Interface Guidelines. Disponível em: <http://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/MobileHIG.pdf> Acesso em 23 out. 2012. ARRIVABENE, Rafael M. C. DesIgn - Projeto Mutante. Bauru: 2009. AUDINO, Daniel F., NASCIMENTO, Rosemy S. Objetos de Aprendizagem – diálogos entre conceitos e uma nova proposição aplicada à educação. In: Revista Contemporânea de Educação, v.5, n. 10. 2010. BONSIEPE, Gui. Design – do material ao digital. Florianópolis: FIESC/IEL. 1997. _________. Design as Tool for Cognitive Metabolism: From Knowledge Production to Knowledge Presentation. 2000. Disponível em: <http://guibonsiepe.com.ar/guiblog/wpcontent/uploads/2009/12/descogn.zip> Acesso em 23 ago. 2012. BRASIL. Constituição (1988). Emenda constitucional nº 6, de 2 de março de 2011. Altera o art. 6.º da Constituição Federal para introduzir, no rol dos direitos sociais, o direito ao acesso à Rede Mundial de Computadores (Internet). Disponível em: <http://www.senado.gov.br/atividade/Materia/detalhes.asp?p_cod_mate=99334> Acesso em 29 jun. 2012.

CAMINHOS DO TREM: as grandes ferrovias. Org. Pedro Vasquez. São Paulo: Duetto Editorial. 2008. CAMINHOS DO TREM: locomotivas e vagões. Org. Pedro Vasquez. São Paulo: Duetto Editorial. 2008. CAMINHOS DO TREM: origens. Org. Pedro Vasquez. São Paulo: Duetto Editorial. 2008. DIAS, Maria H. P. Hipertexto - O Labirinto Eletrônico - Uma experiência hipertextual. Tese de Doutorado. UNICAMP. Faculdade de Educação. 2000. Disponível em: <http://www. unicamp.br/~hans/mh/> Acesso em 17 mai. 2012. FLUSSER, Vilém. O mundo codificado: por uma filosofia do design e da comunicação. Org. Rafael Cardoso, trad. Raquel AbiSâmara. São Paulo: Cosac Naify. 2007. GARRET, Jesse James. The Elements of User Experience. Disponível em: <http://www.jjg.net/elements/pdf/elements.pdf> Acesso em 19 mai. 2012. GOOGLE, Inc. Google Maps API. Disponível em: <https://developers.google.com/maps/?hl=pt-BR> Acesso em 18 mai. 2012. GOOGLE, Inc. Google Web Fonts. Disponível em: <http:// www.google.com/webfonts> Acesso em 13 ago. 2012. JENKINS, Henry. Cultura da Convergência. Trad. Susana Alexandria. São Paulo: Aleph. 2008. JOHNSON, Steven. Cultura da Interface – Como o computador transforma nossa maneira de criar e comunicar. Trad. Maria Luiza X. De A. Borges; revisão técnica, Paulo Vaz. Rio de Janeiro: Jorge Zahar Edições. 2001. KLEMMER, Scott. Aula de curso à distância: Lecture 1.2 -

The Power of Prototyping. In: Human-Computer Interaction. Stanford, Estados Unidos: Stanford University. 2012. Acesso em 20 set. 2012. KNIGHT, Kayla. Responsive Web Design: What it is and how to use it. In: Responsive Design [ebook]. Friburgo, Alemanha: Smashing Media GmbH, 2012. MACHADO, Arlindo. O Sujeito na Tela – Modos de enunciação no cinema e no ciberespaço. São Paulo: Paulus. 2007. MARCOTTE, Ethan. Responsive Web Design. In: A List Apart, n. 306, 2010. Disponível em: <http://www.alistapart.com/articles/responsive-web-design/> Acesso em 25 jun. 2012. MARQUES, Domiciano. Teoria do Caos. In: Brasil Escola. 2007. Disponível em: <http://www.brasilescola.com/fisica/teoriacaos.htm> Acesso em 02 out. 2012. MEISTER LABS GmBH. Mindmeister [ferramenta online de criação de mapas mentais]. Disponível em: <http://www. mindmeister.com/> Acesso em 13 ago. 2012. MOURA, Mônica C. O Design de Hipermídia. São Paulo: PUC/ SP, 2003. Tese (Doutorado). ________. Design de Hipermídia: novo campo de ação no ensino, na aprendizagem e na formação profissional. Disponível em: <http://www.designdehipermidia.com.br/ dh_mm/2/2.htm> Acesso em 12 out. 2012. NYMAN, Lewis. Techniques For Gracefully Degrading Media Queries. In: Responsive Design [ebook]. Friburgo, Alemanha: Smashing Media GmbH, 2012. ROYO, Javier. Design Digital. São Paulo: Edições Rosari. 2008.

SAFFER, Dan. Designing for interaction. Berkeley, Estados Unidos: New Riders. 2010. SILVA, Maurício Samy. Construindo sites com CSS e XHTML. São Paulo: Novatec Editora, 2007. WIKIMEDIA FOUNDATION, Inc. Wikimedia Commons [repositório livre de arquivos multimídia]. Disponível em: <http:// commons.wikimedia.org/> Acesso em 18 set. 2012.

Este relat贸rio foi composto em Lora, de Olga Karpushina. O miolo foi impresso em papel P贸len 80g/m虏, da Suzano Papel e Celulose, e a capa em papel ColorPlus Pequim 180g/m虏, da Arjowiggins.