1. 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] Tatiana Montes Celinski (UEPG) E-mail: [email protected] Márcio Augusto de Souza (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. 2. 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 ter, 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 (2015) define o Flex 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 (2009), o MXML é um sistema de codificação baseado em ExtensibleMarkupLanguage (XML) e, devido a essa herança, ele segue todas as regras e convenções do XML. O MXML é usado para definir o layout da interface do usuário e os controles de uma aplicação. Ele permite estruturar os componentes da aplicação com uma relação pai-filho, que estabelece a aplicação de muitas maneiras diferentes. Para Kore (2009), o ActionScript é uma poderosa linguagem de programação orientada a objetos. Ela 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. 19), é em parte declarativa, o que significa que ela se preocupa em dizer o que fazer e não como fazer. É orientada a objetos, roda na Máquina Virtual Java (JVM), utiliza Classes Java, tem tipagem estática e gera bytecode. A Sun (2009) descreve que o JavaFX 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 Web. E permite aos desenvolvedores de criação programarem em um contexto visual, ajudando-os a trazer 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 JavaScript disponibiliza uma série de recursos de interface gráfica (tais como botões, campos de entrada e seletores), viabilizando assim a construção de páginas Web mais interativas. Mais ainda, a linguagem JavaScript permite modificar e integrar, de forma dinâmica, o conteúdo e a aparência dos vários elementos que compõem o objeto (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. Módulos para aplicações Web devem encapsular todo o HTML, CSS e JavaScript que for necessário para sua existência. 2.2.1.HyperText Markup Language (HTML) HTML é uma linguagem de marcação usada para especificar a estrutura de um documento. Um navegador de Internet nada mais é do que um software que interpreta estas marcações de estrutura e, então, constrói uma página Web com recursos de hipermídia com os quais o usuário pode interagir (BROOKS, 2007). 2.2.2. Cascading Style Sheets (CSS) CSS é uma linguagem de estilo usada para especificar a aparência (layout, cor e fonte) dos vários elementos de um documento que foi definido por uma linguagem de marcação. Ela foi criada com o objetivo de separar a estrutura do documento de sua aparência (GRANNEL, 2007). 3. Resultados e discussão De acordo com Loudon (2010), as maiores aplicações Web atuais, mesmo aquelas que existem há anos, estão apenas no começo de suas vidas, pois são capazes 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. O Quadro 1 resume as principais vantagens e desvantagens das ferramentas para desenvolvimento de animações de estruturas de dados. Quadro 1 - Comparação de Tecnologias Vantagens Desvantagens Adobe Flex -FlexBuilder é intuitivo -Tem a opção de criar componentes por draganddrop -Interage com PHP, Java, ASP.NET e outras -Integração com Adobe Flash Catalyst -Baseado para criação de RIA Consumo de memória baixo JavaFX -Se não suprir um requisito pode “descer” para Java -JavaFx: É focado em interfaces -SceneBuilder e Netbeans é gratuio -Sintaxe simples -Baseado para criação de RIA - Consumo de memória baixo Java Script -Ampla compatibilidade -Interagindo com HTML5 abre a porta para interagir com PHP, Ajax, Jquery, Mysql, etc -Não possui vínculo privado -Consumo de memória baixo Applet Java -Não possui problemas de compatibilidade com versões de Java diferente -Tecnologia que ainda não é tão utilizada , portanto pode haver mudanças constantes -Tecnologia privada -Tempo de carregamento é um pouco lento -Podem 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ário 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 permitiu 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 establilizaçã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, afim de servir de apoio para o ensino de estruturas de dados e algoritmos.. Referências ADOBE . Adobe Flex, disponível em <http://www.adobe.com/br/products/flex>, 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. SãoPaulo. 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 <https://www.java.com/pt_BR/download/faq/chrome.xml>, Acesso em 22 de junho de 2015. em JAVA. Developers - Java Content in the Browser — Security Manifest Changes. Disponivel em <http://www.java.com/en/download/faq/signed_code.xml>, Acesso em 22 de junho de 2015. JAVA . LearnAbout Java Technology. Disponível em: <https://www.java.com/en/about/>, 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. FernUniversität in Hagen, 58084 Hagen, Germany.2005. LOUDON, K. Desenvolvimento de grandes aplicações Web; tradução Rafael Zanolli. São Paulo : Novatec Editora ; Sebastopol, Calif : O'Reilly, 2010. PEREIRA, S. L. Estruturas de Dados Fundamentais – Conceitos e Aplicações. 12a Edição. São Paulo. 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.