Estudo comparativo de tecnologias para desenvolvimento de objetos digitais de aprendizagem

Estudo comparativo de tecnologias para desenvolvimento de objetos digitais de aprendizagem Bauke Alfredo Dijkstra (UEPG) E-mail: [email protected] Luís Guilherme Ribeiro (UEPG) E-mail: [email protected] Márcio Augusto de Souza (UEPG) E-mail: [email protected] Tatiana Montes Celinski (UEPG) E-mail: [email protected]

Resumo: Este trabalho teve por objetivo a realização de um estudo comparativo entre tecnologias disponíveis para o desenvolvimento de animações Web para estruturas de dados e algoritmos. As tecnologias pesquisadas Adobe Flex, JavaFX, Applet Java e JavaScript - possuem diversas características específicas, como: interface gráfica, tempo de carregamento, acessibilidade ao usuário, entre outras. Entretanto, têm em comum o foco em aplicações de internet rica, que tem funcionalidades de softwares tradicionais do tipo desktop aplicado na Web. O trabalho também apresenta a análise de tecnologias para o desenvolvimento de sites, tendo como foco o site que servirá de repositório de animações de algoritmos e estruturas de dados. A partir das tecnologias selecionadas, foram desenvolvidas animações para pilhas e filas, que permitem simular as operações de inserção e remoção de um elemento. Palavras-chave: Tecnologias de Programação, Objetos de Aprendizagem, Aplicação Web, Estrutura de Dados, Aplicação de Internet Rica.

1. Introdução O ensino de assuntos específicos na área das ciências exatas pode se tornar muito difícil ao se utilizar apenas os métodos tradicionais de ensino. Desta forma, muitos professores procuram novas ferramentas para facilitar o aprendizado de conteúdos abstratos pelos alunos. Nos cursos da área de computação, em especial, muitos alunos apresentam dificuldade no aprendizado de conceitos fundamentais como estruturas de dados e seus algoritmos, pois para isso é necessário pensamento abstrato. De acordo com Scalco (2006), a abstração dos conceitos é uma grande dificuldade apresentada pelos alunos, uma vez que estes não conseguem perceber de imediato como a representação gráfica de um fluxograma ou as palavras de um código-fonte poderão se transformar em um programa de computador. Mesmo o aprendizado de estruturas de dados simples, como pilhas, filas e os algoritmos que realizam operações de inserção e remoção de elementos, exige dos alunos um alto nível de abstração. Entretanto, tem-se atualmente uma grande quantidade de ferramentas computacionais disponíveis para a criação de aplicações que podem ser disponibilizadas na Internet. De acordo com Jarc e Feldman (1998), a animação de algoritmos é uma das mais óbvias aplicações dessa tecnologia. Afirmam os autores que, intuitivamente, a maioria dos educadores em ciência da computação acreditam que a animação de algoritmos pode ser útil no ensino de conceitos de ciência da computação.

De acordo com Braga (2014), animações, assim como imagens, vídeos entre outros recursos digitais que podem ser considerados um objeto de aprendizagem. Segundo Kramer (2005), o conceito de objetos de aprendizagem surgiu nos anos noventa motivado pela redução de custos de desenvolvimento e manutenção de conteúdo digital de aprendizagem, por meio de modularização e reutilização. Os objetos de aprendizagem ofereceram uma nova maneira de criar e mediar conteúdo educacional em termos de pequenas unidades de aprendizagem que são auto-suficientes, podem ser reusadas em vários contextos e definições pedagógicas e podem ser agrupadas em coleções coerentes de conteúdos de aprendizagem digital. Braga (2014) apresenta as características pedagógicas e técnicas que um ODA deve possuir. Dentre os aspectos técnicos, destacam-se a reusabilidade, a portabilidade, a disponibilidade, a acessibilidade, a usabilidade, a manutenibilidade, a confiabilidade, entre outros. A autora também relaciona uma série de aspectos pedagógicos que um ODA deve possuir, como interatividade, autonomia, cooperação, cognição e afetividade. A fim de atender os diversos aspectos de um ODA, torna-se necessário fazer uma análise sobre as diversas ferramentas e tecnologias disponíveis para o desenvolvimento de aplicações Web, especificamente um ODA. Desta forma, este trabalho tem como foco a realização de um estudo sobre ferramentas e tecnologias disponíveis para o desenvolvimento de ODA’s voltados para a aprendizagem de estruturas de dados e algoritmos, elencando vantagens e desvantagens. O estudo compreende também a escolha de ferramentas para o desenvolvimento de um site para servir de repositório de ODA’s. A partir desse estudo, este trabalho apresenta como estudo de caso, ODA’s desenvolvidos a partir das ferramentas selecionadas para tal, voltados para a manipulação de pilhas e filas. 2. Referencial teórico-metodológico Segundo Drozdek (2010), o campo da disciplina de Estruturas de Dados "é concebido para construir ferramentas para serem incorporadas e usadas em programas de aplicação e para encontrar estruturas de dados que possam realizar certas operações rapidamente e sem impor muita carga à memória do computador". Assim, Estruturas de Dados é a disciplina que reúne modelos matemáticos, que complementam e dão continuidade aos estudos relacionados à construção de algoritmos, abordando estruturas para armazenamento, organização e manuseio de dados. Pilhas e filas são estruturas de dados simples, mas de fundamental importância na construção de programas. Pereira (2008) descreve algumas aplicações de pilhas e filas:  Pilhas: Controle do fluxo de execução de um programa desenvolvido em diversos módulos; avaliação de expressões aritméticas e implementação de uma estratégia de solução com base em tentativa e erro.  Filas: Coloração de regiões de uma imagem; simulação de um experimento que determina o tempo médio que um cliente espera numa fila de banco até que seja atendido e simulação do 
funcionamento de um servidor de impressão; 
 Apesar de simples, a compreensão das operações de inserção e remoção de elementos em pilhas e filas exige dos alunos um pensamento abstrato. Desta forma, a possibilidade de visualizar tais operações por meio de uma animação que realiza a simulação das operações, pode contribuir para a aprendizagem de pilhas e filas.

2.1. Desenvolvimento de animações Atualmente, há diversas ferramentas disponíveis para o desenvolvimento de animações. Uma vez que tais animações devem se constituir em aplicações Web, uma opção é focar no desenvolvimento de uma aplicação de internet rica (rich internet application - RIA), que é caracterizada por um objetivo comum de adicionar novos recursos para a Web baseada em hipertexto convencional. RIA’s combinam arquitetura de distribuição leve da Web com a interface interativa da aplicação desktop e o tempo de computação, sendo que a combinação resultante melhora todos elementos de uma aplicação Web (FRATERNALI, 2010). Outro aspecto importante é escolha das ferramentas para seu desenvolvimento. Dentre essas, são bastante utilizadas Adobe Flex, JavaFX, Applet Java e JavaScript. 2.1.1. Adobe Flex A Adobe define o lex como sendo uma estrutura de código aberto para a criação de aplicativos Web expressivos e altamente interativos, implantados de maneira consistente nos principais navegadores. Oferece um modelo moderno de linguagem e programação baseado em padr es que suporta modelos comuns de design, baseado em MXML e ActionScript, duas linguagens complementares. Segundo Ahmed, Hirschi e Abid ,o um sistema de codificação baseado em Extensible Markup Language e, devido a essa herança, ele segue todas as regras e convenç es do . O usado para definir o la out da interface do usu rio e os controles de uma aplicação. le permite estruturar os componentes da aplicação com uma relação pai-filho, que estabelece a aplicação de muitas maneiras diferentes. ara ore , o Action cript uma poderosa linguagem de programação orientada a ob etos. la permite ao desenvolvedor construir aplicaç es muito eficientes e com rica interação de dados, em Flex. 2.1.2. JavaFX JavaFX é uma plataforma multimídia desenvolvida pela Oracle baseada em Java para a criação e disponibilização de Aplicação Rica para Internet. Possui como linguagem o JavaFX Script, que de acordo com Doederlein (2009, p. 1 , em parte declarativa, o que significa que ela se preocupa em di er o que fa er e não como fa er. orientada a ob etos, roda na quina irtual ava , utili a lasses ava, tem tipagem est tica e gera b tecode. A Sun (2009) descreve que o Java fornece um modelo unificado desenvolvimento e implantação para a construção de aplicaç es cliente ricas que integram mídia imersiva rica, como udio e vídeo, gr ficos, texto rico e serviços eb. permite aos desenvolvedores de criação programarem em um contexto visual, a udando-os a tra er suas id ias para a vida mais r pido e melhor. 2.1.3. Applet Java No contexto de Java (2015), applets são aplicativos que se servem da JVM existente na máquina cliente ou embutida no próprio navegador do cliente para interpretar o seu bytecode. Criados pela Sun em 1995, são geralmente usados para adicionar interatividade a aplicações Web que não podem ser geradas pelo HyperText Markup Language (HTML). Eles são executados numa "caixa de areia" (sandbox) pela maioria dos navegadores, impedindo-os de acessarem os dados da máquina na qual estão sendo executados. O código do applet é baixado de um servidor Web e o navegador ou o embute dentro de uma página Web ou abre uma nova janela exibindo a interface do programa. 2.1.4. JavaScript

A linguagem ava cript disponibili a uma s rie de recursos de interface gr fica tais como bot es, campos de entrada e seletores , viabili ando assim a construção de p ginas eb mais interativas. Mais ainda, a linguagem Java cript permite modificar e integrar, de forma din mica, o conte do e a apar ncia dos v rios elementos que comp em o ob eto (BORTOLOSSI, 2012). 2.2. Desenvolvimento de sites O desenvolvimento de um site deve ser pensado de acordo com os padrões da Web, além de apresentar a característica responsiva. As linguagens HTML e CSS são essenciais para a interface de comunicação com o usuário, pois qualquer aplicação Web necessita de uma linguagem de marcação e estilo. Segundo Loudon (2010), o encapsulamento o processo de agrupamento de tudo que necess rio para um módulo dentro de uma nica unidade coesa. ódulos para aplicaç es eb devem encapsular todo o , e ava cript que for necess rio para sua exist ncia. 2.2.1. HyperText Markup Language (HTML) uma linguagem de marcação usada para especificar a estrutura de um documento. m navegador de Internet nada mais do que um soft are que interpreta estas marcaç es de estrutura e, então, constrói uma p gina eb com recursos de hipermídia com os quais o usu rio pode interagir (BROOKS, 2007). 2.2.2. Cascading Style Sheets (CSS) uma linguagem de estilo usada para especificar a apar ncia la out, cor e fonte dos v rios elementos de um documento que foi definido por uma linguagem de marcação. la foi criada com o ob etivo de separar a estrutura do documento de sua apar ncia (GRANNEL, 2007). 3. Resultados e discussão De acordo com oudon , as maiores aplicaç es eb atuais, mesmo aquelas que existem h anos, estão apenas no começo de suas vidas, pois são capa es de resistir a anos de alteraç es e manutenção. Desta forma, o estudo realizado buscou selecionar a tecnologia que proporciona uma maior facilidade, longevidade da aplicação e conforto para o usuário, sendo as duas últimas características de extrema importância. Existem vários aspectos para a realização de comparação de tecnologias, mas essa pesquisa foca-se em comparações com visão de um desenvolvedor de software, ou seja, aspectos que facilitam a programação. Ao realizar a pesquisa das tecnologias obtivemos diferentes aspectos apresentados no Quadro 1, onde demonstra as vantagens e desvantagens técnicas que são relevantes para um desenvolvedor. Quadro 1 - Comparação de Tecnologias

Vantagens

Adobe Flex -FlexBuilder é intuitivo -Tem a opção de criar componentes por draganddrop -Interage com PHP, Java,

JavaFX -Se não suprir um requisito pode “descer” para ava -JavaFx: É focado em interfaces -SceneBuilder e Netbeans é gratuio -Sintaxe simples

Java Script -Ampla compatibilidade -Interagindo com HTML5 abre a porta para interagir com PHP, Ajax, Jquery, Mysql, etc. -Não possui

Applet Java -Não possui problemas de compatibilidade com versões de Java diferente

Desvantagens

ASP.NET e outras -Integração com Adobe Flash Catalyst -Baseado para criação de RIA -Consumo de memória baixo -Tecnologia que ainda não é tão utilizada, portanto pode haver mudanças constantes -Tecnologia privada

-Baseado para criação de RIA - Consumo de memória baixa.

vínculo privado -Consumo de memória baixa

-Tempo de carregamento é um pouco lento

-Pode haver navegadores desatualizados que não executem algumas animações

-Requer Java instalado -Tempo de carregamento lento -Google Chrome não irá suportar Java no final de 2015 -Precisa conceder permissão

Uma das maiores desvantagens do JavaFX e do Adobe Flex é que ainda estão em desenvolvimento, assim há uma certa dependência para adequação quando ocorrem atualizações que afetam a aplicação, sendo que nesse tempo de reparo podem haver problemas na execução da ferramenta. O Applet Java apresenta lentidão na abertura. Além disso, sempre é necessário habilitar a execução da aplicação por meio de um processo complexo. Recentemente, o Google anunciou que seus navegadores deixarão de suportar o plug-in Java para Web, o que torna inviável o desenvolvimento de aplicações usando esta plataforma. O JavaScript se mostrou promissor a partir da análise, devido a sua ampla compatibilidade e interação com diversas tecnologias Web, o que é de grande importância para o desenvolvimento. As Figuras 1 e 2 apresentam telas das aplicações, desenvolvidas em JavaScript, de pilha e de fila. Para o desenvolvimento das aplicações, foi necessária a interação com CSS e HTML para obter uma interface com atributos de boa usabilidade. As aplicações desenvolvidas são animações, as quais simulam as operações de inserção e remoção de elementos, além de permitir ao usuário diversas formas de interação.

Figura 1 - Aplicação desenvolvida para simular uma pilha

Figura 2 - Aplicação desenvolvida para simular uma fila

4. Conclusão Para o desenvolvimento de softwares é de extrema de importância a realização de estudos comparativos das tecnologias e linguagens de programação, pois irão dar forma à lógica e à interface da aplicação. A análise e a comparação entre as ferramentas estudadas permitiram a sua distinção em termos de viabilidade e eficiência para a finalidade pretendida. Desta forma, foi possível concluir que é mais viável a utilização do JavaScript, pois este apresenta uma certa estabilização no mercado e não depende de empresas privadas, o que torna a tecnologia totalmente gratuita para a implementação de animações. Como trabalho futuro, pretende-se desenvolver um site para servir como repositório dos ODA’s desenvolvidos e, consequentemente, de outros ODA’s que serão desenvolvidos, a fim de servir de apoio para o ensino de estruturas de dados e algoritmos.

Referências ADOBE. Adobe Flex, disponível em , Acesso em 18 de julho de 2015. AHMED, T., HIRSCHI, J., ABID, F. Flex 3 inAction, Greenwich: Manning, p.576, 2009. BRAGA, J. C. Objetos de Aprendizagem Volume I - Introdução e Fundamentos. 2014. BROOKS, D. R. An Introduction to HTML and JavaScript for Scientists and Engineers. DOEDERLEIN, OSVALDO PINALI. Apresentando a JavaFX 1.0 e JavaFX Mobile, Java Magazine. Rio de Janeiro, n. 67, 2009. DROZDEK, A. Estruturas de Dados e Algoritmos em C++. Ed. CENGAGE Learning. ão Paulo. 2010. FRATERNALI, P., ROSSI, G., SÁNCHEZ-FIGUEROA, F. Rich Internet Applications. Published by the IEEE Computer Society Issue.2010. GRANNELL, C. The Essential Guide to CSS and HTML Web Design. New York: APress. 2007. JARC, D. J.; FELDMAN, M. B. A empirical study of Web-based algorithm animation courseware in an Ada data structure course, In: ACM SIGAda Ada Letters, vol. XVIII. issue 6, p. 68-74. 1998. JAVA. Como usar o Java com o browser Google Chrome?. Disponivel , Acesso em 22 de junho de 2015.

em

JAVA. Developers - Java Content in the Browser — Security Manifest Changes. Disponivel em , Acesso em 22 de junho de 2015. JAVA. LearnAbout Java Technology. Disponível em: , Acesso em: 18 jun. 2015. KORE, S. Flex 3 with Java, Birmingham: PacktPublishing, p. 304, 2009. KRAMER, B. J. Reusable Learning Objects: Let's give it another trial. ern niversit t in agen, 58084 Hagen, Germany.2005. Web tradução Rafael

LOUDON, K. Editora; Sebastopol, Calif : O'Reilly, 2010. PEREIRA, S. L.

–

.

anolli.

ão

aulo: Novatec

a dição. ão aulo. 2008.

SCALCO R. Utilização de applets como ferramentas de visualização de algoritimos no ensino de programação gráfica 3D em educação a distancia – WCCSETE, São Paulo 2006.