Você está na página 1de 58

FACULDADE DE TECNOLOGIA DE SÃO PAULO

VINICIUS ALVES FONSECA

IdiomGym: Uma Aplicação para Aprendizagem de Idiomas

SÃO PAULO

2019
FACULDADE DE TECNOLOGIA DE SÃO PAULO

VINICIUS ALVES FONSECA

IdiomGym: Uma Aplicação para Aprendizagem de Idiomas

Trabalho submetido como exigência parcial

para a obtenção do Grau de Tecnólogo em

Análise e Desenvolvimento de Sistemas

Orientadora: Professora Mestre Grace Anne Pontes Borges

SÃO PAULO

2019
FACULDADE DE TECNOLOGIA DE SÃO PAULO

VINICIUS ALVES FONSECA

IdiomGym: Uma Aplicação para Aprendizagem de Idiomas

Trabalho submetido como exigência parcial para a obtenção do Grau de Tecnólogo em


Análise e Desenvolvimento de Sistemas.

Parecer do Professor Orientador


______________________________________________________________________
______________________________________________________________________
_________________________________

Conceito/Nota Final: ___________

Atesto o conteúdo contido na mídia entregue pelo aluno e assinada por mim para
avaliação do TCC.

Estou ciente de que se o aluno não tiver entregado a mídia conforme regras do
Roteiro ele estará reprovado na disciplina mesmo que esteja aprovado por mim.

Orientadora: Professora Mestre Grace Anne Pontes Borges

SÃO PAULO, 28 de abril de 2019.


"Feliz aquele que transfere o
que sabe e aprende o que
ensina"
Cora Coralina
AGRADECIMENTO

Agradeço à Deus pela vida que me deu, aos meus pais por sempre me
incentivarem nessa jornada da vida profissional e a todos os amigos e professores que
tornaram possível a conclusão deste trabalho.
Resumo

O crescente alcance das tecnologias digitais possibilitou novas formas de


interação e colaboração, que influenciou na formação de um mundo mais dinâmico
e globalizado. Com a necessidade maior de aprender inglês e outros idiomas para
se adaptar a essa nova realidade, foi desenvolvido um protótipo de aplicação na
forma de extensão cross-browser – IdiomGym – que visa otimizar a aprendizagem
com traduções instantâneas a partir de qualquer texto selecionado e exercícios
elaborados de forma automática a partir destas traduções. O protótipo foi
desenvolvido com base em soluções de aprendizagem de idiomas no mundo real,
abstraindo exercícios de associação e repetição, que exercitam a memória do
usuário. Para a implementação desse sistema, foi utilizado Javascript, React.js,
Node.js e SQLite. A partir do experimento realizado e da análise de seus resultados,
foi possível concluir que 73% dos usuários que testaram o IdiomGym aprenderam
mais do que em soluções de aprendizagem anteriores.

Palavras-chave: Aprendizagem, idiomas, aplicação de sistema, Javascript,


extensão de navegador, tecnologia da informação.
Abstract

The increasing reach of digital technologies has enabled new forms of interaction
and collaboration, which has influenced the formation of a more dynamic and globalized
world. With a greater need to learn English and other languages to adapt to this new
reality, an application prototype was developed in the form of cross-browser extension -
IdiomGym - which aims to optimize learning with instant translations from any selected
text and exercises elaborated automatically from these translations. The prototype was
developed based on solutions of learning of languages in the real world, abstracting
exercises of association and repetition, that exercise the memory of the user. For the
implementation of this system, we used Javascript, React.js, Node.js and SQLite. From
the experiment carried out and the analysis of its results, it was possible to conclude that
73% of users who tested IdiomGym learned more than in previous learning solutions.

Keywords: Learning, languages, system application, Javascript, browser


extension, information technology.
SUMÁRIO

1. INTRODUÇÃO 12

1.1 HIPÓTESE 13

1.2 OBJETIVO 13

1.3 JUSTIFICATIVA 13

1.4 METODOLOGIA 14

2. FERRAMENTAS ATUAIS DE APRENDIZAGEM E/OU TRADUÇÃO DE IDIOMAS15

2.1 Duolingo 15

2.2 Mate Translate 16

2.3 Livros de Idiomas 17

3. ESCOPO DO PROJETO E VIABILIDADE TÉCNICA 19

3.1 TRADUÇÃO INSTANTÂNEA 19

3.2 ARMAZENAMENTO AUTOMÁTICO 20

3.3 ELABORAÇÃO DE EXERCÍCIOS 20

4. TECNOLOGIAS USADAS 21

4.1 HTML + CSS + Javascript 21

4.2 React.js 21

4.3 WebExtensions 22

4.4 Node.js 22
4.5 SQLite 22

4.6 Google Translate (API externa) 22

5. A APLICAÇÃO IdiomGym 24

5.1 Arquitetura 24

5.2.1 Preencha as lacunas 26

5.2.2 Conecte as traduções 27

5.2.3 Conecte as imagens 28

5.3 A extensão do navegador 29

7. CONCLUSÃO 37

8. BIBLIOGRAFIA 39

APÊNDICE A – Manual de Instalação e Uso do IdiomGym 38

APÊNDICE B – Questionário proposto aos usuários 45

APÊNDICE C – Respostas individuais ao questionário 47


ÍNDICE DE FIGURAS

Figura 1: Anúncio na página do Duolingo................................................................. 15

Figura 2: Palavras que devem ser reorganizadas da forma correta. ........................ 16

Figura 3: Interface do Mate Translate ..................................................................... .17

Figura 4: Exemplo de exercício para preencher as lacunas .................................. 168

Figura 5: Exemplo de exercício de associação ...................................................... 168

Figura 6: Esquema representando as diferentes camadas do sistema .................... 24

Figura 7: Exemplo de exercício para preencher as lacunas ..................................... 27

Figura 8: Exemplo de exercício por associação ....................................................... 28

Figura 9: Exemplo de exercício de associação com imagens. ................................. 29

Figura 10: Conteúdo da popup da extensão ............................................................ 30

Figura A-1: Tela de extensões do Chrome ............................................................... 42

Figura A-2: Tradução do texto selecionado. ............................................................. 43

Figura A-3: Interface da Extensão. ........................................................................... 44

Figura A-4: Interface do dicionário ........................................................................... 45

Figura A-5: Popup da extensão com notificação ...................................................... 46

Figura A-6: Tela da prova......................................................................................... 47

Figura A-7: Correção da prova ................................................................................. 47


LISTA DE GRÁFICOS

Gráfico 1: Idade dos entrevistados ........................................................................... 32

Gráfico 2: Presença do inglês no cotidiano dos entrevistados .................................. 33

Gráfico 3: Necessidade de tradução de termos na Internet ...................................... 33

Gráfico 4: Desempenho relativo da extensão ........................................................... 34

Gráfico 5: Dificuldades ao instalar a extensão.......................................................... 34

Gráfico 6: Dificuldades em utilizar a extensão .......................................................... 35

Gráfico 7: Desempenho geral da aplicação .............................................................. 36


12

1. INTRODUÇÃO

Nas últimas décadas, a crescente expansão e evolução das tecnologias


digitais possibilitou novas formas de interação e colaboração. O crescente acesso a
essas tecnologias inseriu as mídias digitais no cotidiano em geral, mudando o perfil
do estudante. A nova geração é fluente digital, acostumada a lidar com várias
tarefas simultaneamente, navegar por hyperlinks e a usar a tecnologia para se
comunicar e divertir (LÉVY, 1997; PRENSKY, 2003; OBLINGER, 2004). É comum o
uso da Internet, seja por meio do celular, notebook ou tablet, para diversas
finalidades, entre elas ler livros, notícias, artigos, participar de fóruns e discussões.
As intermináveis horas que os jovens passam olhando fixamente para aparelhos
eletrônicos pode ajudá-los a adquirir habilidades cognitivas específicas (GOLEMAN,
2013).

No ensino de idiomas, pode-se notar um enfoque maior na prática e


aplicação do conhecimento, em que demanda maior necessidade de leitura, escrita
e fala; em outras palavras, é necessário que o aluno tenha um papel ativo em sua
aprendizagem. De acordo com o Censo ABED EAD (2017), o uso de metodologias
ativas alinha-se ao perfil dos alunos atuais, que desejam aprender com mais
engajamento e participação, isto é, imersão. O acesso aos recursos tecnológicos
oferece condições para que as informações estejam cada vez mais disponíveis.

A análise do perfil do novo estudante, que é multitarefa e mais imersivo, dá a


oportunidade de desenvolver uma ferramenta de apoio ao ensino de idiomas que
não apenas traduz termos que o usuário vê na Internet da forma mais usável e
conveniente, ensinando o estudante por meio de um dicionário, mas também
guarda as últimas traduções feitas pelo estudante e elabora exercícios para o
usuário praticar. Essa funcionalidade permite maior independência e significado em
seu papel ativo para a aprendizagem de novos termos por meio de exercícios que
exploram técnicas comuns de memorização: a repetição e a associação (CASTRO,
2015).
13

No mundo real existem diversas soluções para ensino de idiomas. Alguns


colocam propagandas na aplicação, que podem tirar a atenção do usuário e
prejudicar sua experiência. Outros exigem um cadastro ou instalação. O ideal é que
a aplicação seja o mais leve possível e tenha um cadastro facultativo, de forma que
o usuário possa instalar a extensão e utilizar a ferramenta sem precisar informar um
e-mail e uma senha.

1.1 HIPÓTESE
Dado um idioma de estudo, é possível desenvolver uma aplicação interativa
que otimiza o aprendizado de vocabulário por meio da leitura de textos online no
idioma que o usuário deseja aprender, auxiliando-o a memorizar novos termos por
meio de provas com exercícios elaborados com base no que ele traduziu.

1.2 OBJETIVO

O objetivo deste trabalho é demonstrar, por meio de uma aplicação de


software, como a tecnologia pode auxiliar estudantes de idiomas na aprendizagem
de uma nova língua, explorando e aplicando técnicas de memorização de forma
imersiva. Serão consideradas as técnicas de repetição e associação, usualmente
utilizadas na aprendizagem de idiomas, aplicadas na forma de software.

1.3 JUSTIFICATIVA

Com o mundo cada vez mais globalizado, verifica-se uma tendência maior
em recrutadores de um país procurar pessoas qualificadas em outros países
quando os recursos humanos locais não são qualificados o suficiente. Quando
surge uma oportunidade de emprego no exterior, o candidato à vaga, quando
aprovado, não vê outra alternativa senão aprender a nova língua do país de
trabalho ou o inglês. Representantes comerciais e diretores de multinacionais
precisam também saber falar fluentemente as línguas que são nativas dos países
onde se situam as outras sedes a fim de negócios internacionais. A necessidade
cada vez maior de aprender idiomas conforme apontada por matéria da Catho
14

(2016), somada à tendência da popularização do Ensino à Distância motiva o


desenvolvimento de uma solução mais conveniente e prática de aprendizagem.
Para mostrar como a tecnologia da informação pode auxiliar na
aprendizagem de idiomas, identificamos o seguinte processo de traduzir um termo
desconhecido: o usuário abre um dicionário e aprende o seu significado. O que
pode parecer simples se torna repetitivo à medida que o usuário lê uma notícia ou
um livro e precisa consultar várias vezes uma fonte externa; além disso essas
traduções podem ser esquecidas com o tempo se o usuário não guardar seu
significado em algum lugar ou treiná-las posteriormente. “Aquele que aprende
rapidamente também se esquece rapidamente” (EBBINGHAUS, 2013).

1.4 METODOLOGIA

Esta monografia compreende uma pesquisa prévia sobre ferramentas já


existentes de tradução e ensino de idiomas, de maneira que, a partir da avaliação de
tais ferramentas será apresentada uma solução mais interativa, simples e que
proporcione maior aprendizado e motivação.
Para avaliar a solução proposta, foi desenvolvido um protótipo de aplicação, na
forma de “extensão de navegador” cujo desempenho é testado por um conjunto de
usuários voluntários que responderam a um questionário de avaliação, registrando
assim suas impressões quanto ao uso e eficiência da ferramenta proposta.
15

2. FERRAMENTAS ATUAIS DE APRENDIZAGEM E/OU


TRADUÇÃO DE IDIOMAS

No mundo real, podemos encontrar diversos exemplos de ferramentas que


podem treinar estudantes de determinada língua. Este capítulo apresenta algumas das
aplicações mais conhecidas.

2.1 Duolingo

O Duolingo é um aplicativo que utiliza recursos de “gamificação”, tal como


pontuação, itens de bônus e sistema de ranking, para estimular o usuário a praticar os
exercícios. O ponto forte do Duolingo é a sua capacidade de treinar não só o
vocabulário como a pronúncia de termos desconhecidos. Seu ponto fraco é a baixa
possibilidade de evoluir no idioma sem um professor na parte de gramática. O usuário
fica forte no vocabulário e ortografia, mas fraco na construção de frases mais
elaboradas, além de poder ser distraído com eventuais propagandas (Figura 1).

Figura 1: Anúncio na página do Duolingo.


16

Um exercício muito interessante do Duolingo é um em que as palavras aparecem


“embaralhadas”, e o usuário fica incumbido de reorganizá-las, conforme pode ser
observado na Figura 2.

Figura 2: Palavras que devem ser reorganizadas da forma correta.

2.2 Mate Translate

O Mate Translate é uma extensão para qualquer navegador que mais se


aproxima da solução proposta neste trabalho: é capaz de traduzir qualquer texto
selecionado pelo usuário em qualquer página na Internet para o idioma preferido, e
também de guardar qualquer termo que o usuário queira. A melhor característica desta
extensão está na facilidade em traduzir qualquer termo ou frase em questão
milissegundos. Basta o usuário selecionar um texto e clicar em um botão que aparece
próximo à palavra, e ele terá sua tradução conforme ilustrado na Figura 3, ao invés de
consultar um dicionário.
17

Figura 3: Interface do Mate Translate.

A ferramenta, no entanto, se torna incompleta com a falta de um recurso que


ajude o usuário a persistir a aprendizagem de novos termos. Termos traduzidos podem
se esquecer se não forem lembrados posteriormente.

2.3 Livros de Idiomas

Livros de idiomas são capazes de ensinar muita gramática e provêm exercícios


da maior variedade para os alunos fixarem o que aprenderam. Apesar de precisarem de
um professor para o conhecimento ser assimilado, pois muitos deles são escritos no
idioma que querem ensinar (apostilas de inglês são escritos em inglês, apostilas de
francês são escritos em francês, etc.), eles contêm muitos modelos de exercícios que
podem ser usados para a implementação desta aplicação.
18

Tomemos como exemplo o livro Vocabulaire en dialogues (“Vocabulário em


diálogos”, em francês). A Figura 4 mostra um exercício para preencher as lacunas, um
caso que aplica a memorização por repetição.

Figura 4: Exemplo de exercício para preencher as lacunas.

A Figura 5 mostra um exercício para associar a primeira metade de uma


frase com a sua metade correspondente, no qual é aplicada a técnica da
memorização por associação.

Figura 5: Exemplo de exercício de associação.


19

3. ESCOPO DO PROJETO E VIABILIDADE TÉCNICA

Analisando as melhores características de cada solução apresentada, a solução


deve ser capaz de:

- Existir como um acessório para o usuário aprender novos termos na língua que
desejar, sendo fácil de instalar e desinstalar;
- Traduzir qualquer texto que o usuário, por meio do mouse ou evento de long
press (no caso de um dispositivo celular), selecione em uma página da Internet;
- Armazenar de forma automática os termos e frases traduzidos pelo usuário;
- Elaborar de forma automática exercícios e provas (séries de exercícios) a serem
realizadas pelo usuário, além de notificá-lo quando uma prova estiver pronta;
- Não exigir cadastro para ser usado, não exibir anúncios ou cobrar por algum
serviço;
- Poder ser instalada em qualquer navegador, ou seja, cross-browser.

Este projeto poderia ser usado para traduzir de qualquer idioma para qualquer
idioma, porém neste projeto será usado apenas a tradução do inglês para o português
para fim de demonstração;

3.1 TRADUÇÃO INSTANTÂNEA

Se a extensão estiver habilitada, a cada página carregada na Internet ela é


capaz de executar um script em Javascript. O papel deste script é de adicionar um
evento de seleção de texto na página que, assim que disparado, enviaria o texto
selecionado para um serviço de tradução (que, neste projeto, é o Google Translate) e
não só mostraria sua tradução.
20

3.2 ARMAZENAMENTO AUTOMÁTICO

O armazenamento automático é feito no momento da tradução e será feito com a


ajuda de um web service, que armazenará as informações do usuário em um banco de
dados dos termos traduzidos por ele, que servirá de dicionário, além de elaborar os
exercícios.

3.3 ELABORAÇÃO DE EXERCÍCIOS

A elaboração dos exercícios é uma importante funcionalidade a ser


implementada. Com base nas soluções analisadas, a aplicação deve seguir os
seguintes modelos:

A) Preencha as lacunas: Dado um conjunto de palavras que foram traduzidas pelo


usuário e um conjunto de frases com certas palavras omitidas, o usuário deverá
preencher estas lacunas com a palavra corretas. Esse exercício é estritamente
relacionado à prática da repetição;
B) Conecte as traduções: Dado um conjunto de palavras traduzidas pelo usuário,
ele deverá realizar a “ligação” com sua respectiva tradução. Exercício
estritamente relacionado à prática da associação;
C) Associe as imagens: Dado um conjunto de palavras traduzidas pelo usuário, ele
deverá ligar a palavra à imagem que a melhor representa visualmente. A imagem
deverá ser buscada, no Google Images pela aplicação no momento da tradução.
Exercício estritamente relacionado à prática da associação;

Assim que o usuário traduzir uma determinada quantidade de exercícios, esta


quantidade será suficiente para o sistema elaborar uma série de exercícios de tipos
aleatórios para o usuário praticar.
21

4. TECNOLOGIAS USADAS

4.1 HTML + CSS + Javascript

Como a aplicação em questão é uma extensão de navegador, ela contará com o


conjunto tradicional das tecnologias presentes no navegador que são usadas para
construir sites: HTML, CSS e Javascript.
HTML (HyperText Markup Language) é uma linguagem de marcação utilizada
para construir a estrutura de sites. Neste projeto, ela será utilizada para construir a
estrutura da interface de usuário da extensão.
CSS (Cascading StyleSheet) é uma linguagem utilizada para estilizar os
elementos de interface descritos na HTML. Com ela, será possível adicionar cor e vida
à interface, proporcionando uma melhor experiência de usuário.
Javascript é uma linguagem de programação inventada em 1995 pelo
programador Brendan Eich para o navegador Netscape. Hoje, é a principal linguagem
utilizada para programação client-side no navegador, isto é, nos sites construídos com
HTML e CSS. Com ela, será possível implementar todas as funcionalidades descritas
no escopo, desde o evento de seleção de texto à tradução dos termos e armazenagem
dos dados, além da elaboração dos exercícios.

4.2 React.js

React.js é uma biblioteca de código escrita em Javascript que permite construir


interfaces em HTML e CSS de forma declarativa e dinâmica como reflexo ou não de um
estado. Mudanças em um determinado estado (representado por um objeto)
desencadeiam novas renderizações de elementos associados a esse estado. A escolha
desta biblioteca está na facilidade de descrever, de forma declarativa, diferentes
comportamentos de interface de acordo com um estado de aplicação, perfeita para
construir a interface dos exercícios elaborados.
22

4.3 WebExtensions

WebExtensions é uma especificação elaborada em 2017 pela W3C (World Wide


Web Consortium) que descreve um padrão de implementação de extensões para
navegador, e é mais conhecida como WebExtensions API por contemplar, além de um
padrão de técnicas de implementação de extensões, um conjunto de classes e funções
presentes nos navegadores mais modernos que permitem acessar diversos métodos
nativos dos navegadores.

4.4 Node.js

Node.js é um interpretador de Javascript orientado a eventos e segue


principalmente um paradigma de programação assíncrona, o que permite uma melhor
utilização do processamento do computador, sem que ações de I/O (input / output)
bloqueiem a lógica do script. Este interpretador será usado para construir o web service
responsável por se comunicar com a extensão do navegador via requisições e
respostas sob protocolo HTTP (HyperText Transfer Protocol), gerenciar as informações
do usuário em um banco de dados e elaborar os exercícios.

4.5 SQLite

SQLite é a biblioteca de banco de dados relacional mais implantado em


aplicações no mundo todo, sendo suas principais características a de ser transacional e
serverless. Ele é escrito em C, utiliza acesso a arquivos e requer configuração mínima.
Será usado para armazenar as traduções de cada usuário e a pontuação dos
exercícios.

4.6 Google Translate (API externa)

O Google Translate é uma ferramenta muito comum para se traduzir frases e


termos, e ela está disponível para acesso via web service por aplicações de terceiros.
23

Basta informar o termo ou frase que se deseja traduzir, o idioma de qual esta frase está
sendo traduzida e o idioma para o qual esta frase será traduzida.
24

5. A APLICAÇÃO
Este capítulo apresenta a arquitetura e funcionamento da aplicação proposta

neste trabalho – IdiomGym.

5.1 Arquitetura

A Figura 6 mostra um esquema que mostra os principais componentes


envolvidos no sistema da aplicação, bem como seus processos.

Figura 6: Esquema com as diferentes camadas do sistema.

Os processos, representados por setas na figura, são descritos a seguir:


1) Ao detectar uma tradução feita pelo usuário, a extensão realiza uma
requisição para o servidor com o termo ou frase que foi traduzido.
2) O servidor encaminha a requisição de tradução para o Google Translate.
3) O Google Translate traduz a frase e devolve a tradução em formato JSON.
O servidor recebe a tradução e a armazena na memória, e a partir desse ponto ele
avalia se a tradução é elegível de armazenamento no banco. Independente da
elegibilidade do armazenamento do termo, o passo 4 será executado.
4) O servidor encaminha a tradução da frase para a extensão, que a mostra
para o usuário.
25

5) Este passo só é executado se a tradução for elegível de armazenamento


no banco de dados. As condições são:
a) O termo traduzido não deve ser o mesmo que a tradução;
b) O termo traduzido precisa conter apenas caracteres alfabéticos;
c) O Google Translate não pode ter respondido com um campo “Você quis
dizer”, pois isso significa que o termo pode ter sido escrito errado;
d) O termo traduzido não pode existir no banco de dados para evitar
duplicidade.
6) Se o armazenamento do termo for possível, o termo é armazenado no
banco de dados junto com a sua tradução. Se a nova quantidade de termos
traduzidos for divisível por 6 (seis), é possível montar um exercício de qualquer tipo.
A quantidade é armazenada nos dados do usuário e uma prova será feita assim que
o usuário armazenar 5 (cinco) exercícios em seu banco de dados. Neste momento,
o usuário será notificado de que uma nova prova está pronta para ser feita.
7) Quando o usuário for notificado de uma prova, ele deverá acessar o seu
link, que o redirecionará para a aplicação de front-end em React.js. Assim que a
aplicação for acessada, ela obterá a identificação da prova pelo link fornecido e
realizará uma requisição para obter as informações da prova.
8) O servidor responde com as questões da prova e a aplicação as renderiza,
prontas para serem respondidas pelo usuário. O usuário poderá realizar a prova no
momento que quiser. As provas são cumulativas, podendo ser feitas e refeitas por
meio da interface da aplicação.

5.2 Modelos dos exercícios

A parte de exercícios da aplicação, feita em React.js, seguirá os seguintes


modelos:
26

5.2.1 Preencha as lacunas

Como descrito anteriormente, este exercício consiste em associar a palavra mais


adequada a uma frase. O usuário deverá “arrastar” as palavras em suas respectivas
lacunas.
Estas frases deverão ser obtidas no momento da tradução da palavra, a
partir da detecção do começo da frase em que foi extraída até o fim de uma frase
(ponto final, de exclamação, de interrogação ou ponto e vírgula) ou o fim do
elemento de texto do qual foi extraída. Se a frase não existir ou não for elegível de
envio, ela pode ser alimentada depois com o termo no banco de dados.
Como as páginas da Internet são construídas em HTML e os navegadores
utilizam estruturas de dados em árvores para representar os elementos de interface
destas páginas em sua memória, o evento disparado via Javascript fornece o nodo
do qual a frase foi selecionada, bem como índice do caracter do qual partiu a
seleção e o fim dela.
Existem, porém, três fatores de elegibilidade de envio da frase: 1) o nodo de
início da seleção deve ser também o nodo do fim da seleção, 2) a frase traduzida
deve conter somente um termo (somente caracteres alfabéticos) e 3) deve conter
ao menos três termos antes do termo traduzido e dois termos depois. A Figura 7
ilustra como a interface do exercício foi elaborada.
27

Figura 7: Exemplo de exercício para preencher as lacunas.

5.2.2 Conecte as traduções

A aplicação deverá mostrar duas colunas de palavras. A primeira coluna


representa uma lista de termos em uma língua (no caso deste projeto, em inglês) e a
segunda representa uma lista de termos na outra língua usada nas traduções (no caso,
em português). O usuário deverá “ligar” cada palavra à sua respectiva tradução (Figura
8).
28

Figura 8: Exemplo de exercício por associação.

5.2.3 Conecte as imagens

Semelhante ao exercício anterior, porém no lugar da coluna com as palavras em


português, será mostrada uma coluna com imagens. O usuário deverá “ligar” as
imagens ao seu respectivo significado (Figura 9).
29

Figura 9: Exemplo de exercício de associação com imagens.

5.3 A extensão do navegador

Assim que a extensão é instalada, o ícone da extensão aparece na barra


superior do navegador. No caso do Chrome, no canto superior direito, conforme
ilustrado na Figura 10.
30

Figura 10: Conteúdo da popup da extensão.

Ao clicar no ícone da extensão, o usuário terá acesso ao ID gerado pela


extensão. Esse ID está associado às traduções e às provas elaboradas pelo sistema. O
nome “IdiomGym” (literalmente, “academia de idiomas”) foi atribuído pensando na ideia
de treino do idioma, em que o estudante tem total autonomia para estudar.
31

6. AVALIAÇÃO E QUESTIONÁRIO

Para avaliar a aplicação desenvolvida, o protótipo foi disponibilizado, juntamente


com o Manual de instalação e uso da ferramenta (Apêndice A) para um grupo de 31
voluntários.
Após os testes, foi aplicado um questionário (Apêndice B) com objetivo de avaliar
a facilidade de uso da mesma, seu desempenho relativo às outras soluções e coletar
problemas técnicos durante os testes.
O desempenho relativo às outras aplicações foi medido conforme o aprendizado
do usuário independentemente do seu nível de conhecimento em inglês.
Essa avaliação foi feita para verificar se o objetivo da ferramenta foi atendido,
isto é, se proporcionou maior aprendizado e interesse em relação às outras, além
apontar ocasionais melhorias no protótipo.
A seguir estão os resultados coletados do questionário e suas respectivas
análises.
A maioria que testou a extensão é jovem, com uma média de 23 anos. A mais
velha tem 37 anos e a mais nova, 18, conforme o Gráfico 1. A base para a análise está
nessa faixa etária.
32

Gráfico 1: Idade dos entrevistados.

A partir da quarta e da quinta pergunta foi possível saber que ao menos mais da
metade das pessoas lida bastante com textos em inglês conforme o Gráfico 2, e que ao
menos 90% das pessoas encontram necessidade de traduzir termos desconhecidos na
Internet, conforme representado no Gráfico 3.
33

Gráfico 2: Presença do inglês no cotidiano dos entrevistados.

Gráfico 3: Necessidade de tradução de termos na Internet.

Das 31 pessoas, 18 (58%) já utilizaram algum software ou extensão para auxiliar


em seus estudos de inglês. Entres as aplicações mais citadas estão Duolingo e Google
Translate.
Entre as pessoas que já utilizaram alguma tecnologia para auxiliar em seus
estudos e testaram a extensão (isto é, excluindo as que não utilizaram alguma
34

aplicação anteriormente), 73% apontaram que aprenderam mais com o IdiomGym do


que utilizando a tecnologia anterior. O resultado geral está representado no Gráfico 4.

Gráfico 4: Desempenho relativo da extensão.

Apesar das instruções passadas para instalar a extensão, um pouco menos de


20% das pessoas apontaram dificuldade para realizar o procedimento, conforme
representado no Gráfico 5. Isso se deve ao fato de que não foi possível publicar a
extensão de forma apropriada antes de liberar para testes.

Gráfico 5: Dificuldades ao instalar a extensão.


35

Um pouco mais de 25% das pessoas apresentaram dificuldades para usar a


extensão em geral (Figura 6). Entre as sugestões de melhorias, está o suporte para
outras línguas, integração com outros dispositivos, melhorias no layout e na instalação
da extensão.

Gráfico 6: Dificuldades em utilizar a extensão.

Por fim, pouco mais de 90% das pessoas que testaram a extensão relatou
melhoria no vocabulário em inglês, conforme mostra o Gráfico 7.
36

Gráfico 7: Desempenho geral da aplicação


37

7. CONCLUSÃO

O objetivo do trabalho foi desenvolver uma ferramenta que facilite o trabalho de


traduzir termos na Internet, auxiliando o usuário em sua aprendizagem de idiomas e
prover facilidade em seu uso.
Com a crescente globalização e maior alcance da Internet, a necessidade de
aprender novos idiomas é inevitável, sobretudo o inglês. Como foi constatado no
questionário, 90% das pessoas sentem a necessidade de traduzir termos na Internet. A
aplicação aproveita essa necessidade para melhorar a aprendizagem de novos termos,
elaborando provas e exercícios para o usuário. Essa aprendizagem pode ser vista nos
90% dos usuários que testaram a extensão.
A tecnologia está cada vez mais presente para facilitar a vida das pessoas, visto
que mais da metade dos entrevistados relataram que já utilizaram alguma tecnologia
de software para melhorar seu aprendizado. Com a extensão, uma boa parte (73%)
relatou melhoria em suas respectivas experiências de aprendizagem.
Uma importante característica da extensão é a facilidade em memorizar o
acesso do usuário. Não é necessário um cadastro, basta o usuário instalar a extensão.
Porém, para que seja possível a integração com outros dispositivos (como foi sugerido
nas respostas ao questionário), é inevitável a implementação de um sistema de
autenticação com login e senha.
Como a aplicação foi desenvolvida apenas como um protótipo, muitas sugestões
foram registradas. Entre elas:

• Possibilidade de mostrar mais de um significado da palavra traduzida;


• Melhoria no layout;
• Suporte para demais idiomas;
• Integração com demais dispositivos móveis;
• Desenvolvimento de aplicativo móvel;
38

Apesar das melhorias sugeridas, a extensão foi bem aceita, atendendo o seu
objetivo principal e comprovando que é possível melhorar a aprendizagem de idiomas
por meio da Internet.
39

8. BIBLIOGRAFIA

Browser Extensions (2017). Draft Community Group Report. 2017. Disponível em:
<https://browserext.github.io/browserext/> - Acesso no dia 28/04/2019.

CASTRO C. M. (2015). Você Sabe Estudar?: Quem Sabe, Estuda Menos e Aprende
Mais. São Paulo: Pensa, 2015.

Catho (2016). 10 carreiras das quais saber inglês é fundamental. 2016. Disponível
em: <https://www.catho.com.br/educacao/blog/10-carreiras-das-quais-saber-ingles-e-
fundamental> - Acesso no dia 28/04/2019.

Censo ABED EAD (2017) Relatório analítico da aprendizagem a distância no Brasil.


2017. Disponível em:
<http://abed.org.br/arquivos/CENSO_EAD_BR_2018_digital_completo.pdf> - Acesso no
dia 28/04/2019.

Duolingo (2019). Aprenda inglês, espanhol e mais idiomas de graça. 2019.


Disponível em: <https://pt.duolingo.com/> - Acesso no dia 28/04/2019.

EBBINGHAUS, H. (2013). Memory: A Contribution to Experimental Psychology.


2013. Disponível em: <https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4117135/&> -
Acesso no dia 28/04/2019.

GOLEMAN, D. (2013). Foco: A atenção e seu papel fundamental para o sucesso.


São Paulo: Objetiva, 2013.

Google Cloud (2019). Como traduzir textos. 2019. Disponível em:


<https://cloud.google.com/translate/docs/translating-text?hl=pt-br> - Acesso no dia
28/04/2019.
40

Mate Translate (2019). Mate Translate Extension for Chrome. 2019. Disponível em:
<https://www.matetranslate.com/> - Acesso no dia 28/04/2019.

Node.JS (2019).Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript


engine. 2019. Disponível em: <https://nodejs.org/en/> - Acesso no dia 28/04/2019.

React JS (2019) . A JavaScript library for building user interfaces. 2019. Disponível
em: <https://reactjs.org/> - Acesso no dia 28/04/2019.

Siréjols, Evelyne (2017). Vocabulaire en dialogues - Niveau débutant. 2eme edition.


Paris: Clé International, 2017.

SQLite (2019). SQLite - a C-language library that implements SQL database engine.
2019. Disponível em: <https://www.sqlite.org/index.html> - Acesso no dia 28/04/2019.

SQLite (2019). Most Widely Deployed and Used Database Engine. 2019. Disponível
em: <https://sqlite.org/mostdeployed.html> - Acesso no dia 28/04/2019.

WebExtensions (2019). WebExtensions - Mozilla MDN. 2019 Disponível em:


<https://developer.mozilla.org/pt-BR/docs/Mozilla/Add-ons/WebExtensions> - Acesso no
dia 28/04/2019.
41

Apêndice A – Manual de Instalação e Uso do IdiomGym

1. REQUISITOS MÍNIMOS

Navegador Google Chrome, Mozilla Firefox ou Opera.


42

2. INSTALANDO A EXTENSÃO NO NAVEGADOR

Acesse a página de extensões do seu navegador. No Google Chrome, a página pode


ser acessada por meio da URL chrome://extensions.

Ao acessar a página, habilite o modo desenvolvedor conforme a Figura A-1, e em


seguida, atualize a página:

Figura A-1: Tela de extensões do Chrome

Baixe o arquivo da extensão através do link: https://cdn.glitch.com/247fab77-


8fb0-4212-a2bf-f79deb9954d5%2Ftcc.zip e arraste o arquivo .zip para dentro da
página. Com isso, a extensão será instalada.
43

3. UTILIZANDO A EXTENSÃO PARA TRADUZIR TERMOS

Ao instalar a extensão, qualquer página acessada pelo usuário carregará o script


da extensão. Não é preciso realizar um cadastro. A ferramenta automaticamente irá
gerar um ID para o usuário, e traduções, exercícios e provas serão vinculados a esse
ID, que será guardado no armazenamento interno do navegador.
Ao acessar uma página, basta selecionar um termo ou uma frase para traduzi-la. Um
retângulo com a tradução aparecerá perto do cursor do mouse, conforme ilustrado na
Figura A-2:

Figura A-2: Tradução do texto selecionado.


44

4. ACESSANDO O DICIONÁRIO

Ao instalar a extensão, um botão com um “I” maiúsculo também é adicionado à


barra do navegador. Ao clicar nele, uma popup aparece com a interface da extensão
(Figura A-3).

Figura A-3: Interface da Extensão.

A interface contém um botão que leva o usuário diretamente ao seu dicionário,


ilustrado na Figura A-4, no qual também é possível acessar as provas.
45

Figura A-4: Interface do dicionário.


46

5. FAZENDO PROVAS

A cada 6 (seis) palavras armazenadas no dicionário, um exercício é elaborado, e


a cada seis exercícios elaborados, uma prova é elaborada para o usuário. Nesse
momento, o usuário é notificado com um alerta do navegador, e a prova poderá ser
acessada por meio da popup da extensão (Figura A-5).

Figura A-5: Popup da extensão com notificação.

Ao acessar o link, o usuário é redirecionado para uma prova interativa com


exercícios de associações e preencher as lacunas (Figura A-6).
47

Figura A-6: Tela da prova.

No último exercício de cada prova existe um botão “Concluído”, que ao ser


clicado manda as respostas para o servidor e corrige a prova (Figura A-7).

Figura A-7: Correção da prova.

As provas podem ser feitas e refeitas quando o usuário quiser.


48

6. INFORMAÇÕES ADICIONAIS

Contato para dúvidas ou sugestões: vfonseca1618@gmail.com

Link para o questionário: https://forms.gle/fMHFJa5bf8yrP1xA6


49

Apêndice B – Questionário proposto aos usuários

1 – Qual sua idade?

2 – Qual o seu nível de inglês?


a) Básico
b) Intermediário
c) Avançado

3 – Você atualmente está aprendendo inglês?


a) Sim, faço um curso de inglês
b) Sim, aprendo por conta própria
c) Não
4 – Você lida muito com textos em inglês no seu dia a dia?
a) Sim, bastante
b) Sim, às vezes
c) Não

5 – Com que frequência você precisa traduzir termos em inglês na Internet?


a) Bastante frequência
b) Pouca frequência
c) Nenhuma frequência

6 – Você encontrou dificuldades para instalar a extensão?


a) Sim, bastante
b) Sim, um pouco
c) Não, nenhuma

7 – A extensão serviu para complementar seu vocabulário em inglês?


a) Sim, bastante
50

b) Sim, um pouco
c) Não

8 – Você utiliza ou já utilizou algum software e/ou aplicativo para auxiliar seus estudos
em inglês? Se sim, qual?

9 – Se você já utilizou um software anterior para te auxiliar em seu aprendizado, esta


extensão te ajudou mais ou menos do que antes?
a) Bem mais
b) Um pouco mais
c) Não percebi diferença
d) Um pouco menos
e) Bem menos
f) Não utilizei nenhum software ou aplicativo para me auxiliar antes

10 – Você encontrou alguma dificuldade para usar a extensão (traduzir os termos) ou


fazer os exercícios?
a) Sim, bastante
b) Sim, um pouco
c) Não

11 – (Pergunta opcional) Tem alguma sugestão de melhoria?


51

Apêndice C – Respostas individuais ao questionário

#1

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

21 C B A A C B Não F C

Sem sugestões.

#2

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

22 B B A A C A Não F C

É um ótimo programa, mas sempre é possível deixá-lo bem mais desenvolvido - isto é, ele pode ser
aperfeiçoado. Sugiro que eventualmente o aplicativo seja desenvolvido para captar palavras em
inglês cuja tradução possam ter mais de um significado ou possam ter duplo sentido, de forma a dar
uma orientação mais completa aos usuários. Também sugiro que, futuramente, o aplicativo possa
traduzir frases inteiras (ainda que frases mais simples).

#3

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

24 B A B B C A Duolingo A C

Sem sugestões.
52

#4

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Google
26 C C B B C B Tradutor + D C
Duolingo
Consideraria colocar a maneira como a palavra selecionada é pronunciada ou até mesmo o próprio
som da pronúncia. Além de adicionar os phrasal verbs que são muito utilizados.

#5

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Google
18 B A B A B A Tradutor + B B
Duolingo

Sem sugestões.

#6

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

21 A C A B C A Duolingo F C

Sem sugestões.

#7

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

20 C C A A C C Não F C

Sem sugestões.
53

#8

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

23 A B A A C B Não B C

Implementar a opção de visualizar ou mesmo pesquisar as demais traduções de uma mesma


palavra.

#9

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Google
18 A A A A C A B C
Tradutor
Sem sugestões.

#10

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

19 A C B B B C Não B B

Sem sugestões.

#11

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

19 A A B B C B Duolingo B B

Sem sugestões.
54

#12

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

21 C C A B C A WordReference D B

Não consegui gerar a prova com facilidade. Mas a tradução dos termos funciona muito bem.

#13

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Duolingo +
20 C A C B C C Yázigi App
F C

Sem sugestões.

#14

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Google
20 C B A C C B Translate
B C

Sem sugestões.

#15

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Google
22 C A B B C B Tradutor + B C
Duolingo
A ideia do trabalho é muito boa. Traz a praticidade de não ter que ficar trocando de página para
tradução de termos. Porém, o layout poderia estar um pouco melhor.
55

#16

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

27 C C A B C B Não F C

Interface, suporte para outras línguas.

#17

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

35 C B A A C B N F C

Sem sugestões.

#18

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

Dicionário
33 C B B B C B similar
C C

Sem sugestões.

#19

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

20 B B A B B A Não F C

A possibilidade de usar o mesmo ID em diferentes dispositivos, e até uma extensão para


dispositivos móveis.
56

#20

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

21 A C B C B B Não F B

Facilidade em fazer o download da extensão e deixar mais claro...

#21

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

26 C C A C C B Duolingo B B

Fazer app para celular.

#22

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

18 B C B B C A Não F C

Sem sugestões.

#23

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

23 A B A A B B Duolingo D B

Os exercícios com imagem são um pouco confusos.


57

#24

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

26 C B A B C B Não F B

Sem sugestões.

#25

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

22 C B A B C B WordReference E C

Sem sugestões.

#26

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

19 C C B B C A Não B C

Corrigir as imagens em alguns testes.

#27

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

26 C B A A B A Duolingo B C

A aplicação está boa e bem definida. Mas peca um pouco na questão de entendimento dos
exercícios relativos a imagem.
58

#28

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

37 B B B B C A Youtube A C

Sem sugestões.

#29

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

23 B C B A C B Não F C

Sem sugestões.

#30

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

26 A B C A C A Duolingo B C

Sem sugestões.

#31

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

24 A B A A C A Babel A C

Então, o balão poderia ser um pouco mais inteligente, pois ele aparece em muitos momentos,
mesmo quando eu não preciso da tradução, e isso me incomoda um pouco! Fora isso, a extensão
está cumprindo muito bem o seu papel.