Criando Aulas Multimídia Interativa para Uso em Tablets

Criando Aulas Multimídia Interativa para Uso em Tablets Celso Tatizana Diretor da Caltech Informática Ltda www.class.com.br class@class.com.br 018 3916-7800

Modelos para Criação de Aulas Multimídia Interativa para Tablets Neste artigo vamos discutir três modelos utilizados no mercado para criação de aulas multimídia interativa para Tablets: 1. modelo Flash + Adobe Air; 2. modelo Html + Javascript; 3. modelo Aplicativo Nativo. Nos dois primeiros modelos, as aulas são criadas inicialmente num computador com sistema operacional Windows ou OS X(Apple), para posterior instalação no Tablet. E no terceiro modelo a aula é criada diretamente no Tablet, utilizando interface de toque de dedos (figura abaixo). Modelos para Criação de Aulas Interativas para Tablets Modelo Flash + Adobe Air O Adobe Flash é um software desenvolvido pela Adobe(www.adobe.com) para criação de aplicações multimídia, muito utilizado para criação de animações, jogos educacionais, aulas multimídia e sites dinâmicos, que teve o seu auge na era dos computadores pessoais. Para criar uma aplicação multimídia com o Adobe Flash é necessário um computador com sistema operacional Windows ou OS X(Apple) e a aplicação gerada apresenta o formato SWF, que pode ser executada em computadores com o Flash Player instalado. O Flash Player é um plugin utilizado para executar arquivos SWF e apresenta versões para sistema operacional Windows, OS X, Linux, mas não é compatível com os sistemas operacionais de dispositivos móveis como Tablets e Smartphones.

Tela de Edição do Adobe Flash num Computador com Windows Na figura acima é apresentada a tela de edição do Adobe Flash usando um computador com Windows 7. O Flash trabalha com o conceito de linha de tempo (Timeline) que fica localizado na parte inferior da tela. Esta linha de tempo está conectada com a área de trabalho(parte central superior da tela) sendo dividida em frames, que representam uma fotografia momentânea da área de trabalho. Neste área, o usuário pode inserir objetos como imagens, textos, vídeos e sons e aplicar efeitos como aumentar, diminuir, mover, esmaecer, apagar. Para criar exercícios ou jogos no Flash é necessário utilizar uma linguagem de programação chamada ActionScript. É uma linguagem orientada a objetos, que exige do usuário conhecimento em lógica de programação. botao.onrelease = function(){ escreve() } function escreve(){ texto.text = "Olá, mundo!" } Exemplo de ActionScript

Adobe Air Como os Tablets Android não permitem a execução de arquivos SWF, a Adobe desenvolveu outra ferramenta, chamada Adobe Air, que ao ser instalada junto com o Adobe Flash, permite a conversão para o formato APK, compatível com Tablet Android. Após a instalação do Adobe Air, o Flash pode converter uma aplicação no formato FLA (formato que permite a edição do aplicativo) para o formato APK, através da opção Publicar (figura abaixo). Publicação do Aplicativo no Formato APK com Flash/Adobe Air Este Aplicativo gerado no formato APK pode ser instalado no Tablet através do Google Play Store, a loja de Aplicativos da Google, ou copiando o arquivo para o Tablet e executando pelo instalador de Aplicativos do Android. Para publicar o APK no Google Play Store é necessário uma conta de desenvolvedor e o pagamento de uma taxa. Pontos Fortes O Adobe Flash é uma ferramenta que apresenta muitos recursos para desenvolvimento de aplicações multimídia interativa, e a linguagem ActionScript permite criar jogos educacionais e simuladores. Foi a principal ferramenta para desenvolvimento de aulas multimídia para computadores pessoais e existem muitos Objetos de Aprendizagem em formato SWF que podem ser convertidos para o formato APK e reaproveitados em Tablets Android. Desvantagens Steve Jobs, ex-presidente da Apple, provocou uma grande polêmica no mercado de tecnologia quando anunciou que o Tablet Ipad da Apple não seria compatível com o Flash Player, porque os arquivos SWF consumiam muitos recursos da máquina, reduzindo a duração da bateria, além de instáveis, lentos e fechados, não permitindo pesquisa de informações. Esta tendência foi posteriormente seguida pelos Tablets Android que passaram a não ser compatíveis com o Flash

Player. Segundo a Softpedia(www.softpedia.com) o Flash Player pode ser substituído por tecnologias mais novas como o HTML 5. O Adobe Flash e principalmente a linguagem ActionScript são difíceis de utilizar e indicados para usuários avançados em informática, como designers e programadores. A criação de alguns recursos como exercícios e jogos educacionais exige conhecimento em lógica de programação. O desenvolvimento de uma aula interativa com Flash, dependendo da complexidade, exige uma equipe multidisciplinar especializada, composta por roteirista, designer e programador, tornando o processo oneroso e lento. Não permite a criação ou alteração diretamente no Tablet. A aula deve ser desenvolvida num computador com sistema operacional Windows ou OS X para posterior instalação e teste no Tablet. Isto diminui a agilidade do processo e aumenta o tempo e custo de desenvolvimento. Modelo HTML + JS O segundo modelo utiliza a linguagem HTML e Javascript para criação de aulas multimídia, que são publicadas num servidor e carregadas dentro de um navegador Internet, como o Google Chrome, Firefox, Dolphin ou o próprio navegador padrão que vem instalado nos Tablets Android. Linguagem HTML HTML é uma linguagem de marcação utilizada para produzir páginas na web, interpretadas por navegadores. Os documentos HTML são textos simples, no formato de hipertextos, que podem ser editados em qualquer editor de textos comuns, como por exemplo o bloco de notas do Windows ou editores HTML mais sofisticados como o Dreamweaver da Adobe. <html> <head> <meta charset="utf-8" /> <meta name="description" content="a descrição do seu site em no máximo 90 caracteres"> <meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres"> <title>título do Documento</title> </head> <body> <!-- Aqui fica a página que será visível para todos, onde pode-se inserir textos, imagens, links para outras páginas, etc, geralmente usa-se: --> <div>tag para criar-se uma 'caixa', um bloco, mais utilizada com "Cascading Style Sheets (Folhas de Estilo em Cascata)</div> <span>tag para modificação de uma parte do texto da página</span> <img src="endereço_de_uma_imagem.jpg" /> <a href="http://www.wikipedia.org">wikipedia, A Enciclopédia Livre</a> </body> </html> Exemplo de Linguagem HTML Wikipédia (www.wikipedia.org)

Linguagem Javascript A linguagem HTML é limitada a criação de páginas estáticas (textos e imagens) e não permite criar interação com o usuário. Para inserir efeitos como animações, formulários de preenchimento, exercícios interativos e jogos educacionais é necessário utilizar uma linguagem de programação, sendo a Javascript uma das mais utilizadas no mercado. A linguagem Javascript é orientada a objetos, e o processamento é feito no próprio equipamento do usuário, poupando o servidor. É integrado ao navegador que interpreta os comandos sem precisar de um plugin separado para executar, como a linguagem Java, sendo compatível com a maior parte dos navegadores. Para inserir códigos Javascript dentro de páginas HTML, é só iniciar o bloco com o comando <script> e encerrar com o comando </script> (figura abaixo). <html lang="pt-br"> <head> <meta charset="utf-8" /> <title>wikipédia</title> <script> window.onload = function () { document.getelementbyid("hello").addeventlistener("click", function () { alert("bem-vindo à Wikipédia!"); }, false); }; </script> </head> <body> <noscript>seu navegador não suporta JavaScript ou ele está desabilitado.</noscript> <button id="hello">dizer "Olá"</button> </body> </html> Linguagem PHP Exemplo de Código Javascript Wikipédia (www.wikipedia.org) Caso seja necessário gravar os resultados dos exercícios de uma aula num banco de dados no servidor, para emissão de relatório de desempenho dos alunos, então é necessário utilizar outra linguagem de programação, sendo a PHP a mais utilizada no mercado. A linguagem PHP é uma linguagem interpretada, multiplatafoma, orientada a Objetos, embutida no código HTML e que difere da linguagem Javascript porque é executada no servidor. <?php $vet01 = array(); $vet01[] = "Sistemas operacionais"; $vet01[] = "Compiladores"; $vet01[] = "Bancos de dados"; $vet02 = array(1, 2, 3, 4, 5); $vet03 = array( 0 => 0, 2 => 3, 10 => "item 10"); for ($i = 0; $i < count($vet01); $i++) { echo $vet01[$i]. "<br />"; }?> Exemplo de Código PHP Wikipédia (www.wikipedia.org) Neste segundo modelo(figura abaixo), a aula multimídia é desenvolvida num computador com sistema operacional Windows ou OS X(Apple), utilizando um editor HTML como Dreamweaver ou Frontpage. Os exercícios e jogos educacionais devem ser codificados em linguagem Javascript e os resultados podem ser registrados em banco de dados no servidor utilizando linguagem PHP. A aula multimídia será um conjunto de arquivos em formato HTML/Javascript, arquivos de imagens, vídeos, sons, que poderão ser compactados em formato ZIP

e publicados num servidor via programa FTP, como por exemplo o Filezila, num endereço URL no formato: http:///www.provedor.com.br/aula. No Tablet Android o usuário deve conectar à Internet e carregar um navegador como por exemplo o Google Chrome, Dolphin ou o próprio navegador padrão que vem instalado no Tablet, digitando o endereço URL onde foi publicada a aula (figura abaixo). Aula em HTML/Javascript no navegador do Tablet Pontos Fortes O modelo de publicação e acesso de aulas na Internet apresenta a grande vantagem de permitir a gestão do conteúdo: cadastro dos usuários, atribuição das aulas, aplicação de provas, registros de avaliação num banco de dados no servidor, com relatórios de desempenho no formato tabular ou gráfico, possibilitando o gerenciamento de cursos de ensino a distância no formato eletrônico (e-learning). Os conteúdos no formato HTML/Javascript podem ser gerenciados por softwares LMS (Learning Management System) como o Moodle (www.moodle.org), que é um software livre gratuito muito utilizado nos meios acadêmicos. As aulas ficam disponíveis para acesso global e como estão centralizadas num único servidor, fica fácil fazer a atualização dos conteúdos. E permite atender a um número muito grande de usuários.

Desvantagens A principal desvantagem deste modelo é que exige conhecimento avançado em várias linguagens de programação como a HTML, Javascript, PHP. Exige uma equipe multidisciplinar para desenvolvimento das aulas. Além dos programadores em várias linguagens, também é necessário o roteirista, o designer e um profissional especialista em Internet para garantir o desempenho e segurança das aulas no provedor. Com isto, o processo de criação de aulas torna-se lento e oneroso. O desempenho das aulas depende da velocidade da conexão Internet e do número de usuários com acesso simultâneo. No Brasil a cobertura de banda larga é deficiente existindo muitos pontos cegos, mesmo em grandes cidades, e a velocidade em geral é insuficiente para acesso de aulas ricas em vídeos, áudios e animações, principalmente se existirem muitos usuários simultâneos. Os navegadores para Tablets são mais limitados que as versões para computadores, tornando o processo ainda mais lento e irritante, além de contarem com restrição de recursos. Sendo assim é necessário fazer uma readequação dos conteúdos para Tablets, como botões de navegação maiores para toque de dedos, interfaces mais leves e simples, textos mais curtos. Não permite a criação ou alteração diretamente no Tablet. A aula deve ser desenvolvida num computador com sistema operacional Windows ou OS X para posterior publicação na Internet e teste no Tablet. Isto diminui a agilidade do processo e aumenta o tempo e custo de desenvolvimento. Modelo Aplicativo Nativo Mark Zuckerberg investiu um ano tentando desenvolver uma versão do Facebook para dispositivos móveis usando HTML 5. Acabou desistindo desta versão e optou pelo desenvolvimento de Aplicativos nativos para plataformas Android e ios(apple). Os Aplicativos nativos rodam sem precisar de navegador, portanto são mais leves e mais rápidos, utilizando os recursos de cada sistema operacional de forma otimizada. Aplicativos desenvolvidos para ios não são compatíveis com os Aplicativos para Android. Os Tablets foram concebidos para ler conteúdos, não para criar conteúdos. Por isto vem sem teclado e nem mouse. A interface com o Tablet é através do toque de dedos: toque simples, toque longo, arrastar. O dedo não é preciso como o mouse, dificultando o processo de edição de desenhos e seleção de pequenos elementos como linhas, bordas, textos. Para transformar o Tablet em um dispositivo para criar conteúdos, é necessário redesenhar a interface com o usuário, substituindo os menus de textos por ícones, e métodos de movimentação e redimensionamento de objetos através de interfaces cheio de botões como os controles de tv. Imagem a ser redimensionada Janela com Botões de Redimensionamento Tela de Edição do Visual Class Android

O Objetivo deste artigo é apresentar uma nova proposta para criação de aulas multimídia interativa para Tablets, utilizando um Aplicativo nativo de autoria que permite a criação diretamente no Tablet, através da interface de toque de dedos. Este Aplicativo, denominado Visual Class Android(www.class.com.br), foi desenvolvido pela Caltech Informática em 2012, para Tablets Android. O Sistema Operacional Android foi escolhido pelas seguintes razões: O Ministério da Educação do Brasil (MEC) adotou os Tablets Android como padrão para as escolas públicas brasileira, com lançamento de vários registros de preços permitindo que as escolas públicas possam adquirir a preços tabelados e com valor menor de mercado; O sistema operacional Android é gratuito e os Tablets Android em geral apresentam custo menor que os Tablet ios, sendo os mais adotados no Brasil na área de educação; A Google, detentora dos direitos autorais do Android, permite aos usuários e desenvolvedores criarem lojas eletrônicas próprias para distribuição de Aplicativos, sem precisar dos serviços da Google Play Store, a loja de Aplicativos da Google. Com isto a Caltech Informática desenvolveu a loja Caltech Store para distribuição do Visual Class Android e Aulas demonstrativas; Versão DEMO do Visual Class Android O fabricante disponibiliza uma versão DEMO gratuita do Visual Class Android que permite executar até 60 vezes, para que o usuário possa desenvolver uma aula multimídia e utilizar no seu Tablet Android. Para utilizar esta versão DEMO, sugerimos ao usuário que faça o curso Criando Aulas Multimídia Interativa para Tablets Android que está disponibilizada no seguinte link: www.class.com.br/moodle Ao clicar no link acima, selecione o curso e acesse como Visitante. O curso ensina a instalar a versão DEMO e a construir uma aula interativa usando todos os recursos multimídia, como imagens, textos, sons, vídeos, animações, exercícios e jogos educacionais. E aprender como distribuir estas aulas para outros Tablets e também a publicar na Internet para acesso remoto.