Criando Aulas Multimídia Interativa
para Uso em Tablets
Celso Tatizana
Diretor da Caltech Informática Ltda
www.class.com.br
[email protected]
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>
Exemplo de Código Javascript – Wikipédia (www.wikipedia.org)
Linguagem PHP
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.