UMA NOVA TECNOLOGIA PARA A CONSTRUÇÃO DOS MATERIAIS DIDÁTICOS UTILIZADOS EM EAD
Vinícius Ponte Machado
MIA - Mestrado em Informática Aplicada
Universidade de Fortaleza - UNIFOR
Fortaleza - Ceará
vinicius@gruposecrel.com.br
Elizabeth Sucupira Furtado
MIA - Mestrado em Informática Aplicada
Universidade de Fortaleza - UNIFOR
Fortaleza - Ceará
elizabet@unifor.br
Francisco José de Azevedo Alves
MIA - Mestrado em Informática Aplicada
Universidade de Fortaleza - UNIFOR
Fortaleza - Ceará
alves@secrel.com.br
(Texto original com imagens: clique aqui)
RESUMO
Apesar da Web ter se tornado um grande veículo para a educação a distância, existem dificuldades no que diz respeito à interatividade dos conteúdos, principalmente quando esses são considerados materiais didáticos. Neste artigo descreveremos uma alternativa para criar esses materiais, através do uso da tecnologia SVG (Scalable Vector Graphics), permitindo uma interatividade e melhor usabilidade desses materiais em ambientes de educação à distância.
PALAVRAS-CHAVE
Educação a Distância, Materiais Didáticos, HTML, XML, SVG
1. Introdução
Com o advento da Web e a necessidade do dinamismo do conhecimento, a internet tem demonstrado ser uma importante alternativa para a modalidade de Educação a Distância - EAD. Isto se deve ao fato que a internet possibilita grande quantidade e acesso mais rápido e atualizado das informações, interatividade, recursos multimídia, etc.
Porém, nem tudo são flores como diz [Azevedo, 2002]. Os espinhos podem ser diversos, mas nós destacamos aqueles relacionados à dificuldade que um ambiente de EAD tem para promover aula interativa. Por aula interativa, entendemos aquela que o aluno tem a possibilidade de associar conceitos com a prática, manipulando objetos de interação disponíveis na tela.
Outro tipo de espinho é a dificuldade de se construir materiais didáticos que dêem suporte as aulas interativas. Geralmente os materiais são fixos, contendo imagens pré-definidas sem movimento ou documentos em formato de texto. Tal fato impede o tratamento das informações visualizadas pelo aluno e conseqüentemente dificulta a aprendizagem prática.
Acreditamos, assim, que na construção de tais materiais, o pressuposto fundamental, além dos aspectos pedagógicos envolvidos, é a facilidade de sua manipulação por parte do aluno. Por isso são raros os materiais didáticos empregados nos cursos de EAD, via Web, que utilizam objetos gráficos interativos.
Os objetivos desse trabalho são discutir o processo de elaboração dos materiais didáticos atualmente empregados nos cursos a distância e propor novas idéias com o objetivo de produzir materiais mais interativos e com boa usabilidade. Focaremos, também, a construção de tais materiais e exemplificando com um material didático para a disciplina de geometria descritiva.
2. Materiais didáticos para ambientes de EAD, para Web
O desenvolvimento de um ambiente para suportar o processo de ensino/ aprendizagem pressupõe um cuidadoso planejamento. A topologia deste ambiente é dada por uma série de ferramentas de comunicação e de informações que suportam a aplicação de estratégias e táticas pedagógicas [Franciosi, 2001]. Um exemplo deste trabalho pedagógico é a modelagem dos conteúdos nesses ambientes. Eles devem estar baseados no plano de ensino da disciplina e no projeto pedagógico para o curso. O projeto pedagógico é uma ferramenta basilar para a compreensão da filosofia de criação e de oferecimento de qualquer curso ou disciplina. Ele se presta, principalmente, para estabelecer as diretrizes de como devem ser elaborados as aulas, os trabalhos e as avaliações, bem como identificar os resultados a serem obtidos [Loyolla, 2001].
Os materiais didáticos utilizados no ambiente de aprendizagem de EAD devem ter boa qualidade, atender aos aspectos pedagógicos, serem flexíveis e fáceis de serem manipulados pelos alunos. Para a produção de materiais com essas características o ideal seria haver uma equipe multidisciplinar constituída por professores (responsáveis pelo conteúdo), projetista instrucional (responsáveis em converter o conteúdo para Web) e webdesigner (responsáveis em implementar o conteúdo projetado). Geralmente encontramos uma única pessoa realizando todas estas funções.
Os materiais didáticos produzidos atualmente para aos ambientes de EAD, para Web, são, em sua maioria, constituídos por textos, som, vídeos, gráficos, etc. Existem atualmente duas formas bastante utilizadas na preparação de tais materiais, que são:
1. Os materiais são produzidos através de aplicativos - a pessoa, responsável em preparar o material didático, produz um arquivo (no formato de documento, imagem, vídeo, etc.) utilizando um aplicativo. O arquivo produzido é disponível, em forma de link , no site do EAD. O aluno para visualizar a aula, na maioria das vezes, faz o download do arquivo (material didático). O tempo do download dependerá da quantidade de arquivos e de seus tamanhos. O arquivo será visualizado através do aplicativo em que ele foi construído.
2. Os materiais são produzidos no formato HTML - o responsável, neste caso, prepara as páginas que servem de material didático, e depois as inclui no site do ambiente. A visualização da aula (página Web), por parte do aluno, é feita através do Browser .
Comparando estas duas possibilidades acima, verificamos que, a 2ª opção seria ideal. Pois, as páginas poderiam ser mais rapidamente carregadas e visualizadas pelo Browser do aluno, evitando ter aplicativos externos instalados em sua máquina. No entanto, se o material didático contiver muitas imagens, a página se torna pesada para que o Browser possa carregá-la. É importante frisar que, as imagens utilizadas dentro HTML devem ter baixa resolução (quanto maior a resolução maior é a imagem) e o tamanho deve ser pequeno, para minimizar o tempo de download da página. O problema na produção desse tipo de material é que as imagens ficam estáticas e não são interativas.
O propósito desse trabalho é sugerir uma tecnologia para produzir materiais didáticos na Web, que utilizam gráficos, e que permitam interação, por parte do aluno, com os elementos gráficos. Antes de descrever esta tecnologia, vejamos o que está sendo atualmente utilizado, principalmente para dar suporte a elaboração de materiais didáticos para disciplinas que associam a teoria à prática visual, como: disciplinas de desenho, geometria, etc.
3. Tecnologias adotadas atualmente
Realizar bons materiais didáticos para disciplinas de desenho é um desafio, tendo em vista que o HTML não é uma linguagem para desenhos. O ideal seria que os gráficos pudessem ser visualizados junto com o HTML no Browser, que eles não se deformassem, representassem as dimensões corretas, fossem de alta resolução e fossem iterativos. Ou seja, fossem manipulados através de eventos pelo próprio Browser. Para conseguir isso, os responsáveis em preparar tais materiais, deveriam saber programar em uma linguagem de programação para Web, o que nem sempre é o caso.
Os recursos (componentes gráficos, instruções, eventos, métodos, etc.) das linguagens de programação, para Web, poderiam ser usados na produção de materiais didáticos interativos. No entanto, as pessoas envolvidas na produção desses materiais não sabem programar, limitando a utilização de tais recursos. Entres as tecnologias, existentes no mercado, e que poderiam auxiliar os responsáveis a produzirem materiais didáticos através de gráficos interativos e de boa qualidade, destacamos:
Linguagem Java - é a linguagem orientada a objeto da Sun Microsystem. Permite a programação de applets , que são embutidos dentro de páginas HTML. O código do applet é transferido para o navegador juntamente com a página HTML que o contém e é interpretado localmente no computador do usuário. No Browser do usuário, a visualização do applet ocupa uma área bidimensional da página. As desvantagens na utilização dos applets são as seguintes:
- A transferência dos applets, do Servidor Web para o computador do usuário, vai depender do tamanho dos arquivos.
- A execução dos applets é lenta - o código (chamado de "byte-code") precisa ser interpretado localmente por uma "máquina virtual" (interpretador de código Java).
- O applet somente será visualizado pelo Browser quando todos os arquivos forem transferidos.
- Não permite execução de eventos DHTML no applet - todos os eventos executados pelo applet estão restritos ao espaço ocupado por ele.
Virtual Reality Modeling Language (VRML) - é uma linguagem textual para descrição de cenas e ambientes interativos em 3D. Permite a modelagem de mundos virtuais através da interação e animação com os objetos. O arquivo que armazena o código é um arquivo ASCII de extensão WRL e contém as definições dos objetos tridimensionais formados por primitivas geométricas, já definidas pela própria linguagem. Entre as vantagens e desvantagens na utilização do VRML, citamos as seguintes:
- Os objetos podem receber atributos como textura, cor, transparência, brilho, deformação, translações e rotações.
- É possível a navegação, através de hiperlinks, de um arquivo VRML para outro.
- Através da internet e de um plug-in especial, o Browser comum, é capaz de interpretar o arquivo de extensão WRL.
- A interpretação dos arquivos VRML é lenta quando utilizamos o Browser comum.
- A linguagem é simples e constitui no primeiro passo a caminho da Web 3D, imersiva e interativa. Atualmente, ainda existem poucos editores de VRML.
Graphics Interchange Format (GIF) - é o modo mais simples de se criar gráficos na Web. Os gráficos podem ser animados e neste caso são formados por quadros de GIFs estáticos. Pode-se controlar o tempo que cada quadro aparece e o número de vezes que a animação é repetida. Citamos duas vantagens e duas desvantagens na utilização dos GIFs, respectivamente:
- Eles são fáceis de criar usando editores gratuitos ou pouco dispendiosos.
- Eles não são executados por plug-in e são aceitos pelos principais Browser da Web.
- A animação baseada em quadros normalmente resulta em arquivos de maior tamanho.
- A animação não possui quaisquer recursos interativos, ou seja, não podemos acessar os GIFs através de eventos DHTML.
Shockwave - foi projetada originalmente para criar CD-ROMs interativos. Essa tecnologia multimídia foi desenvolvida usando-se o Macromedia Director e permite interação através da linguagem de scripts Lingo. Com Shockwave pode-se criar desenhos, mídias sofisticadas e interativas. Permite também, interagir com banco de dados e programas externos [XHTML, 2001]. As desvantagens na utilização do Shockware são as seguintes:
- Requer treinamento para se utilizar o editor Macromedia Director.
- Necessita de um plug-in especial para a multimídia criada poder ser vista no Browser.
- É bastante lento quando utilizados pela internet porque os arquivos geralmente são grandes.
Flash - é a linguagem de animação criada pela Macromedia especificamente para a Web. Embora ele não tenha toda a funcionalidade do Shockwave, o pequeno tamanho dos arquivos e o fato de que ele utiliza o formato gráfico de vetor, o torna excelente para produzir animações, interfaces dinâmicas, gráficos, que podem ser ampliados e reduzidos [XHTML, 2001]. A seguir, citamos três vantagens e duas desvantagens respectivamente na utilização do Flash:
- A grande diferença do Flash em relação à outras formas de apresentar gráficos é que a página pode ser visualizada antes do arquivo inteiro ser carregado.
- O arquivo produzido tem tamanho pequeno, tendo em vista que ele armazena apenas a definição da imagem, em forma de vetor. Com isso facilita a transferência do arquivo pela internet, tornando-se muito rápida.
- Flash não trabalha somente com gráficos. Ele permite facilmente a integração com áudio e vídeo.
- Para executar os arquivos Flash pelo Browser precisa-se de plug-in especial.
- Para a utilização do editor Macromedia Flash requer treinamento.
Concluímos assim, que para produzir conteúdos gráficos na Web, devemos ter em mente os seguintes aspectos relevantes da tecnologia WWW:
- Os números de cores disponíveis para os gráficos devem ser limitados, porque as resoluções variam de computador e de sistema operacional.
- O tamanho dos arquivos, para download, deve ser pequeno, agilizando a apresentação do conteúdo.
- Atualmente, na maioria dos formatos gráficos exigem, requer que o usuário faça download do plug-in, para executar o arquivo.
- A maioria dos formatos existentes não aceita execução de eventos DHTML. O objetivo principal desses eventos é gerar interações com os elementos do HTML, através de uma linguagem de script, que é executada pelo Browser.
4. Nova tecnologia para produzir materiais didáticos para Web baseado em padrões
As tecnologias e padrões emergentes estão começando a eliminar as barreias ao uso de fontes de alta qualidade, gráficos de alta definição e multimídia. Um dos desenvolvimentos mais promissores é um formato gráfico baseado em XML , chamado Scalable Vector Graphics - SGV. O SVG é um novo padrão, recomendado pela World Wide Web Consortium - W3C, para criação de gráficos bidimensionais e animações para a Web. Algumas empresas que contribuíram para criação do SVG foram: Microsoft, Adobe, Macromedia, IBM, Sun Microsystems, Apple, Xerox, Netscape, Corel e Kodak [XHTML, 2001].
SVG define um formato gráfico de vetor. Este formato contém as informações sobre as curvas e as linhas de uma imagem, ao invés de informações sobre os pixels que compõe a imagem.
Existem produtos já disponíveis para se trabalhar com SVG, e outros estão em processo de desenvolvimento. Entre os aplicativos que geram imagens para SVG, podemos citar o Corel 9.0 e o Adobe Illustrator. Atualmente, os arquivos SVG podem ser carregados pelo Browser por meio de plug-ins e logo ele estará embutido no próprio Browser. [XHTML, 2001].
As principais características do SVG são:
- A qualidade da imagem não será afetada se ela for aumentada ou reduzida.
- Os gráficos podem ser visualizados em múltiplos dispositivos de hardware
(tais como: handhelds, quiosques, celulares, etc.) e mantêm a mesma qualidade.
- O arquivo SVG pode ser criado e modificado com um simples editor de texto.
- Os estilos como: cor, forma de preenchimento, transparência, opacidade, fontes, e assim por diante podem ser aplicados a objetos gráficos do SVG. As linguagens de estilos suportadas são a Cascading Style Sheets - CSS e/ou a Extensible Stylesheet Language - XSL [W3C, 2002].
- SVG é um vocabulário XML e por seu formato baseado em texto ASCII permite a integração com outras tecnologias Web.
- SVG permite a utilização de textos dentro de gráficos. Os textos podem ser pesquisados, incluídos e editados dinamicamente.
- SVG permite a globalização do site por permitir gráficos com texto em múltiplos idiomas.
- Os gráficos SVG podem ser manipulados através de eventos DHTML. Isso é possível através da utilização de linguagens de scripts, como o JavaScript e VbScript, que podem criar novos gráficos, modificar ou excluir partes de um gráfico, etc [W3C, 2002].
- Permite a navegação por hyperlinks.
- SVG tem a capacidade de aplicar efeitos sofisticados em gráficos e textos.
- SVG suporta conteúdos dinâmicos, animações complexas e interatividade [Traversa, 2002]. Os eventos, do próprio SVG, podem ser usados para manipular objetos gráficos. Por exemplo, movendo ou clicando o mouse sobre um gráfico pode-se modificar sua cor ou sua posição.
- Os arquivos SVG podem ser gerados dinamicamente através das linguagens que rodam no Servidor da Web como: SGI, ASP, PHP, Java, Perl, etc.
- SVG tem grande interoperabilidade, para qualquer plataforma e para vários tipos de Browser. Por serem em formato de texto ASCII, os arquivos SVG são pequenos e, portanto, não sobrecarregam os Servidores da Web e agilizam na transferência da página.
- O código SVG pode ser embutido dentro do HTML.
- Os gráficos SVG podem ter cores e fontes Ilimitadas [Traversa, 2002].
- Permite capacidade multimídia [Traversa, 2002].
Diante do exposto, sugerimos que os responsáveis pela construção dos materiais didáticos on-line levem em consideração esta nova tecnologia. Ela proporcionará a confecção de materiais de alta qualidade e interativos necessários aos cursos que tenham disciplinas como: geometria descritiva, desenho industrial, desenho arquitetônico, desenho de máquinas, entre outros. No futuro existirá um grande número de aplicativos que aceitaram o formato SVG, facilitando assim, a modelagem e construção desses materiais.
5. Estudo de caso
A Universidade de Fortaleza - UNIFOR, instituição de ensino superior, através da célula EAD do NATI (Núcleo de Aplicação em Tecnologia da Informação), logrou êxito no Programa ProTeM?CC, financiado pelo CNPq, e produziu um ambiente de aprendizagem virtual chamado CADINet (http://ead.unifor.br/cadinet) [Furtado, 2001]. Esse ambiente (ver figura 1) tem como objetivo permitir a criação e acompanhamento de cursos de diversos contextos destinados à formação de professor dentro da própria instituição.
O CADINet foi utilizado como o ambiente para desenvolver curso on-line de teste de geometria descritiva. Foi, então, construído o material, utilizado pela disciplina, usando a tecnologia SVG. Na figura 2 é mostrada uma aula on-line dessa disciplina, sobre posicionamentos de retas. Esta aula se caracteriza por ser interativa, por permitir ao aluno manipular os objetos gráficos visualizados.
A figura 2 representa o começo de uma seqüência de definições de reta. O gráfico SVG, mostrado na figura, define dois planos de visualização de reta: vertical e horizontal. Ao clicar nos botões, abaixo do gráfico, a figura se modifica para uma nova definição de reta. As definições de reta são: Reta Qualquer, Reta Horizontal (ou de nível), Reta Frontal (ou de frente), Reta Frontohorizontal (paralela à linha de terra), Reta Vertical, Reta de Topo e Reta de Perfil. Todas essas definições são desenhadas em SVG pelo evento "click" do HTML - o DHTML. Existe uma função em JavaScript, que dinamicamente desenha o gráfico SVG, baseado na nova definição de reta.
5. Conclusão
Mostramos neste trabalho que existem desafios a serem superados pelos responsáveis pela produção de material didático on-line. Dentre estes desafios destacamos, o da utilização das tecnologias existentes para se fazer material didático com boa usabilidade e que permita a interatividade a fim de dar suporte a uma aprendizagem prática.
Comparamos as tecnologias existentes e verificamos que elas são difíceis de serem usadas, porque requerem dos responsáveis, conhecimentos de linguagem de programação. Destacamos que a preparação dos materiais tem ocorrido, na maioria das vezes, utilizando documentos para download.
Apresentamos uma proposta para viabilizar a confecção de materiais, com a utilização de um novo padrão para gráficos na Web chamado SVG. A tecnologia SVG permite a confecção de materiais didáticos com conteúdos dinâmicos garantindo a qualidade destes e provendo interações do aluno durante a apresentação de um gráfico, garantido a interatividade da aula. Além disso, SVG é baseado em XML, a qual está se tornando um padrão para a construção de ambientes para a Web. Tal fator ajuda a integrar mais facilmente textos dentro de gráficos, bem como a fazer com que os cursos tenham maior aceitação e maior interoperabilidade.
6. Referências
[Azevedo, 2002]
Azevedo, W.
Palestra ministrada na "III Semana de Educação a Distância" na Universidade de Fortaleza - UNIFOR - 11/04/2002."Educação on-line: as flores (e os espinhos) do caminho"
[Franciosi, 2001]
Franciosi, B. e Andrade F. e Beiler A. e Wagner P.
XII SBIE 2001 - Simpósio Brasileiro de Informática na Educação"Modelando Ambientes de Aprendizagem a Distância Baseado no Uso de Mídias Integradas: um Estudo de Caso"
[Furtado, 2001]
Furtado E. e Silva W. B, e Alves. F. J. A. e Pereira, F. T.
XII SBIE 2001 - Simpósio Brasileiro de Informática na Educação"Ampliando a Noção de Colaboração num Ambiente de Aprendizagem a Distância para Gestão do Conhecimento"
[Loyolla, 2001]
Loyolla, W. e Prates M.
XII SBIE 2001 - Simpósio Brasileiro de Informática na Educação"Ferramental Pedagógico da Educação a Distância Mediada por Computador (EDMC)"
[INTEL, 2002]
http://cedar.intel.com/cgi-bin/ids.dll/content/content.jsp?cntKey=Generic+Editorial%3a%3asvg&cntType=IDS_EDITORIAL&catCode=0&path=13
Pesquisado em: 11-04-2002
[Traversa, 2002]
Traversa, E.
http://www.webreference.com/authoring/languages/svg/
Pesquisado em: 21/03/2002
[XHTML, 2001]
Valentine C. e Minnick. C.
Ed. Campus 2001
[W3C, 2002]
http://www.w3.org/TR/SVG/
Pesquisado em: 12-03-2002